FundraiserCard.js

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import ReceiptIcon from '@mui/icons-material/Receipt';
import {
  Box,
  Button,
  Typography,
} from '@mui/material';
import FundraiserContract from 'contracts/Fundraiser.json';
import Web3 from 'web3';
import Web3Modal from 'web3modal';

const cc = require('cryptocompare');

const FundraiserCard = ({ fundraiser }) => {
  const [web3, setWeb3] = useState(null);
  const [description, setDescription] = useState(null);
  const [image, setImage] = useState('');
  const [fundName, setFundName] = useState(null);
  const [goalAmount, setGoalAmount] = useState(null);
  const [totalDonations, setTotalDonations] = useState(null);
  const [totalDonationsEth, setTotalDonationsEth] = useState(null);
  const [contract, setContract] = useState(null);
  const [accounts, setAccounts] = useState([]);
  const [exchangeRate, setExchangeRate] = useState(null);
  const [userDonations, setUserDonations] = useState(null);
  const [isOwner, setIsOwner] = useState(false);
  const [newBeneficiary, setNewBeneficiary] = useState(null);

  useEffect(() => {
    if (fundraiser) {
      init(fundraiser);
    }
  }, [fundraiser]);

  const init = async (fundraiser) => {
    try {
      const fund = fundraiser;
      const web3Modal = new Web3Modal({
        network: 'mainnet',
        cacheProvider: true,
      });
      const provider = await web3Modal.connect();
      const web3 = new Web3(provider);
      const account = await web3.eth.getAccounts();
      const instance = new web3.eth.Contract(FundraiserContract.abi, fund);
      setWeb3(web3);
      setContract(instance);
      setAccounts(account);
      setFundName(await instance.methods.name().call());
      setImage(await instance.methods.image().call());
      setDescription(await instance.methods.description().call());
      setGoalAmount(await instance.methods.goalAmount().call());
      const totalDonation = await instance.methods.totalDonations().call();
      
      // converting ETH-USD 
      await cc
        .price('ETH', ['USD'])
        .then((prices) => {
          exchangeRate = prices.USD;
          setExchangeRate(prices.USD);
        })
        .catch(console.error);
        
      const eth = web3.utils.fromWei(web3.utils.toBN(totalDonation), 'ether');
      setTotalDonationsEth(parseFloat(eth).toFixed(4));
      const dollarDonationAmount = exchangeRate * eth;
      setTotalDonations(dollarDonationAmount.toFixed(2));
      
      const userDonation = await instance.methods
        .myDonations()
        .call({ from: accounts[0] });
      setUserDonations(userDonation);
      const isUser = accounts[0];
      const owner = await instance.methods.owner().call();
      if (owner === accounts[0]) {
        setIsOwner(true);
      }
      console.log('owner-------', isOwner);
    } catch (error) {
      console.error(error);
    }
  };
  const withdrawFunds = async () => {
    await contract.methods.withdraw().send({
      from: accounts[0],
    });
    alert('Funds Withdrawn!');
  };

// function to set new beneficiary
  const setBeneficiary = async () => {
    await contract.methods
      .setBeneficiary(newBeneficiary)
      .send({ from: accounts[0] });
    alert(`Fundraiser Beneficiary Changed`);
    setOpen(false);
  };

// returns previous donations made
  const renderDonationsList = () => {
    var donations = userDonations;
    if (donations === null) {
      return null;
    }
    const totalDonations = donations.length;
    let donationList = [];
    var i;
    for (i = 0; i < totalDonations; i++) {
      const ethAmount = web3.utils.fromWei(donations.values[i], 'ether');
      const userDonation = exchangeRate * ethAmount;
      const donationDate = donations.dates[i];
      donationList.push({
        donationAmount: userDonation.toFixed(2),
        date: donationDate,
      });
      console.log('donation list <<<<', donationList);
    }

    return donationList.map((donation) => {
      return (
        <Box>
          <Typography component={'span'} fontWeight={700}>
            ${donation.donationAmount}
          </Typography>

          <Link
            to={{
              pathname: '/receipt',
              state: {
                fund: fundName,
                donation: donation.donationAmount,
                date: donation.date,
              },
            }}
          >
            <Button
              startIcon={<ReceiptIcon />}
              variant="contained"
              color="primary"
            >
              Receipt
            </Button>
          </Link>
        </Box>
      );
    });
  };

  return (
    ...
  );
};

export default FundraiserCard;