Untitled

import React, { useState, useEffect } from 'react';
import Web3 from 'web3';

const web3 = new Web3(Web3.givenProvider || 'https://mainnet.infura.io/v3/YOUR_INFURA_API_KEY');
const contractABI = [ /* your contract ABI */ ];
const contractAddress = '0xYourContractAddress';
const referralContract = new web3.eth.Contract(contractABI, contractAddress);

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

    useEffect(() => {
        async function loadUserDashboard() {
            const accounts = await web3.eth.getAccounts();
            const currentUserAddress = accounts[0];

            if (!currentUserAddress) {
                alert('Please connect your MetaMask account to view the dashboard.');
                return;
            }

            setUserAddress(currentUserAddress);

            const currentReferrerAddress = await referralContract.methods.referrers(currentUserAddress).call();
            setReferrerAddress(currentReferrerAddress);

            const currentTotalRewards = await referralContract.methods.totalRewards(currentUserAddress).call();
            setTotalRewards(web3.utils.fromWei(currentTotalRewards, 'ether'));

            const currentLevelRewards = [];
            for (let i = 1; i <= 7; i++) {
                const levelReward = await referralContract.methods.rewards(currentUserAddress, i).call();
                currentLevelRewards.push(web3.utils.fromWei(levelReward, 'ether'));
            }
            setLevelRewards(currentLevelRewards);
        }

        loadUserDashboard();
    }, []);

    return (
        <div>
            <h1>User Dashboard</h1>
            <p>User Address: {userAddress}</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;