app.js

import React, { useEffect, useState } from 'react';
import { useWagmi } from 'use-wagmi';
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 { connect, account, provider } = useWagmi();
  const [referrer, setReferrer] = useState('');
  const [inviteCount, setInviteCount] = useState(0);
  const [totalRewards, setTotalRewards] = useState(0);

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

  async function updateReferralData() {
    const referralContract = new ethers.Contract(CONTRACT_ADDRESS, abi, provider);

    const fetchedReferrer = await referralContract.referrers(account);
    setReferrer(fetchedReferrer);

    // Fetch invite count and total rewards from contract events
    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={() => connect()}>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;