Skip to content

Instantly share code, notes, and snippets.

@Ernesto-tha-great
Created October 11, 2022 14:21
Embed
What would you like to do?
import React, { useState, useEffect } from "react";
import { useCelo } from "@celo/react-celo";
import { StakePIR } from "@celo-composer/hardhat/types/StakePIR";
import { PironToken } from "@celo-composer/hardhat/types/PironToken";
import { truncateAddress } from "@/utils";
import { Input } from "@/components/Input";
import { Button } from "@mui/material";
import { ProjectCard } from "@/components/ProjectCard";
export const HomePage = ({ contracts }) => {
const { kit, address } = useCelo();
const [amount, setAmount] = useState<any>([]);
const [loading, setLoading] = useState(false);
const [results, setResults] = useState<any>([]);
// creating an oinstance of our contract
const pironContract = contracts
? (new kit.connection.web3.eth.Contract(
contracts.PironToken.abi,
contracts.PironToken.address
) as any as PironToken)
: null;
const stakingContract = contracts
? (new kit.connection.web3.eth.Contract(
contracts.StakePIR.abi,
contracts.StakePIR.address
) as any as StakePIR)
: null;
const handleChange = (e: { target: { value: any } }) => {
setAmount(e.target.value);
console.log(amount);
};
const Submit = async () => {
const formatAmount = kit.connection.web3.utils.toHex(amount);
try {
setLoading(true);
await pironContract.methods
.approve(contracts.StakePIR.address, "1000000000")
.send({ from: address });
console.log("approval complete");
await stakingContract.methods
.stakeToken(formatAmount)
.send({ from: address, gas: "1000000" });
setLoading(false);
console.log("staking complete");
} catch (err) {
console.log(err.data);
}
};
const fetchPositions = async () => {
const data2 = [];
const totalStake = await stakingContract.methods.totalStakers().call();
const planExpire = await stakingContract.methods.planExpired().call();
const interestRate = await stakingContract.methods.interestRate().call();
const paused = await stakingContract.methods.paused().call();
const owner = await stakingContract.methods.owner().call();
const structuredData = {
totalStakers: totalStake,
planExpires: planExpire,
interestRate: interestRate,
paused: paused.toString(),
owner: owner,
};
data2.push(structuredData);
setResults(data2);
console.log("result", results);
};
useEffect(() => {
const pullData = async () => {
fetchPositions();
};
pullData();
}, []);
return (
<div className="h-screen flex-1 flex flex-col">
<div className="flex justify-between">
<div className="w-7/12 my-20">
<p className="text-xl font-semibold text-center text-white">
Earn amazing returns on your piron token when you stake them on
piron staking dapp. Built using Celo composer.
</p>
</div>
{/* stake card */}
<div className="p-3 mr-12 flex-col rounded-xl h-72 sm:w-72 w-full my-5 eth-card white-glassmorphism">
<div className="flex flex-col w-full h-full">
<div>
{address && (
<p className="text-white font-light text-sm">
{truncateAddress(address)}
</p>
)}
<p className="text-white font-semibold text-lg mt-1">
Stake your PTK tokens
</p>
<Input
placeholder=""
name="stake"
type="text"
handleChange={handleChange}
/>
<div className="text-red-800 ml-14">
<Button color="inherit" variant="contained" onClick={Submit}>
Stake Tokens
</Button>
</div>
</div>
</div>
</div>
</div>
<div className="blue-glassmorphism gradient-bg-transactions bg-gray-800">
<div className="flex flex-col md:p-12 py-12 px-4">
{address ? (
<>
<h3 className="text-white text-3xl text-center my-2">
Latest Positions
</h3>
{results?.map((result, index) => (
<ProjectCard
key={index}
result={result}
contracts={contracts}
/>
))}
</>
) : (
<h3 className="text-white text-3xl text-center my-2">
Connect your account
</h3>
)}
</div>
</div>
</div>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment