Untitled

import React, { useState, useEffect } from 'react';
import { useEthers } from '@usedapp/core';
import { ethers } from 'ethers';
import contractABI from './contractABI.json';

const contractAddress = '0xYourContractAddress';

const ReferralDashboard = () => {
  const { account, library } = useEthers();
  const [referrerAddress, setReferrerAddress] = useState('');
  const [totalRewards, setTotalRewards] = useState(0);
  const [levelRewards, setLevelRewards] = useState(Array(7).fill(0));

  useEffect(() => {
    async function loadUserDashboard() {
      if (account && library) {
        const referralContract = new ethers.Contract(contractAddress, contractABI, library);
        const connectedContract = referralContract.connect(account);

        const currentReferrerAddress = await connectedContract.referrers(account);
        setReferrerAddress(currentReferrerAddress);

        const currentTotalRewards = await connectedContract.totalRewards(account);
        setTotalRewards(ethers.utils.formatEther(currentTotalRewards));

        const currentLevelRewards = [];
        for (let i = 1; i <= 7; i++) {
          const levelReward = await connectedContract.rewards(account, i);
          currentLevelRewards.push(ethers.utils.formatEther(levelReward));
        }
        setLevelRewards(currentLevelRewards);
      }
    }

    loadUserDashboard();
  }, [account, library]);

  return (
    <div>
      <h1>User Dashboard</h1>
      <p>User Address: {account || 'Not connected'}</p>
      <p>Referrer Address: {referrerAddress}</p>
      <p>Total Referral Rewards: {totalRewards} SMU</p>
      <p>Level-wise Referral Rewards:</p>
      <ul>
        {levelRewards.map((reward, index) => (
          <li key={index}>Level {index + 1}: {reward} SMU</li>
        ))}
      </ul>
    </div>
  );
};

export default ReferralDashboard;