Untitled

import { useEffect, useState } from 'react';
import { useEthers, useContractFunction, useContractCall } from '@usedapp/core';
import { abi } from './ReferralProgram.json'; // Replace with the path to your ABI file

const CONTRACT_ADDRESS = '0x1234...'; // Replace with your contract address

function App() {
  const { activateBrowserWallet, account } = useEthers();
  const [referrer, setReferrer] = useState('');
  const [inviteCount, setInviteCount] = useState(0);
  const [totalRewards, setTotalRewards] = useState(0);

  const referralContract = new ethers.Contract(CONTRACT_ADDRESS, abi, getProvider());

  const referrerCall = useContractCall({
    abi: referralContract.interface,
    address: referralContract.address,
    method: 'referrers',
    args: [account],
  });

  useEffect(() => {
    if (account) {
      updateReferralData();
    }
  }, [account]);

  async function updateReferralData() {
    if (referrerCall && referrerCall.length > 0) {
      setReferrer(referrerCall[0]);
    }

    // Fetch invite count and total rewards from contract events
    // This assumes you have an event named 'ReferralRewards' in your smart contract
    const filter = referralContract.filters.ReferralRewards(account);
    const events = await referralContract.queryFilter(filter);

    let invites = 0;
    let rewards = ethers.BigNumber.from(0);

    events.forEach((event) => {
      invites++;
      rewards = rewards.add(event.args.amount);
    });

    setInviteCount(invites);
    setTotalRewards(ethers.utils.formatEther(rewards));
  }

  return (
    <div>
      <h1>Referral Program</h1>
      <button onClick={() => activateBrowserWallet()}>Connect Wallet</button>
      {account && (
        <div>
          <h2>Referral Data</h2>
          <p>Your referrer: {referrer}</p>
          <p>Number of people you invited: {inviteCount}</p>
          <p>Total rewards earned: {totalRewards} ETH</p>
        </div>
      )}
    </div>
  );
}

export default App;