HomePage.tsx

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>
  );
};