0

Trying to practice web3, I want to show the total supply of ERC20 token by making a frontend. Please help !

import React, { useState, useEffect } from 'react';
import Web3 from 'web3';
import erc20ABI from './ERC20TokenABI.json'; // Import the ABI for the ERC20 token contract

function App() {
    // State variables
    const [web3, setWeb3] = useState(null);
    const [contractInstance, setContractInstance] = useState(null);

    // Effect to initialize Web3 and contract instance
    useEffect(() => {
        const initializeWeb3 = async () => {
            // Connect to Web3 provider
            const web3 = new Web3('http://127.0.0.1:7545'); // Replace with your Web3 provider URL
            setWeb3(web3);
    
            // Create contract instance
            const contractAddress = '0xd16B472C1b3AB8bc40C1321D7b33dB857e823f01'; // Replace with the address of the deployed ERC20 token contract
            const contractInstance = new web3.eth.Contract(erc20ABI, contractAddress);
            console.log('Contract Instance:', contractInstance); // Log contract instance
            setContractInstance(contractInstance);
        };
    
        initializeWeb3();
    }, []);
    

    // Function to handle button click
    const handleClick = async () => {
        if (!contractInstance) {
            console.error('Contract instance not initialized');
            return;
        }
    
        try {
            // Call the function to retrieve the total supply of tokens
            const totalSupply = await contractInstance.methods.totalSupply().call();
            console.log('Total Supply of Tokens:', totalSupply);
        } catch (error) {
            console.error('Error:', error);
        }
    };
    

    return (
        <div>
            <h1>My React App</h1>
            <button onClick={handleClick}>Get Total Supply</button>
        </div>
    );
}

export default App;
2
  • On which network have you deployed your token contract having address as 0xd16B472C1b3AB8bc40C1321D7b33dB857e823f01 ? Commented Apr 25 at 14:16
  • And, what error are you facing ? Commented Apr 25 at 14:23

1 Answer 1

0

Your code appears suitable for fetching the total supply of an ERC20 token using React. Just make sure your contract address and ABI are correct. Start by confirming that the contract ABI is accurate. Then, double-check the provider URL. If you're deploying to Ethereum mainnet or a testnet, you can also use your Infura URL as an alternative (for example, 'https://mainnet.infura.io/v3/YOUR_INFURA_PROJECT_ID'). Finally, ensure your contract instance is initialized properly.

use my code, the problem will solve, Best of luck with your project!:

import React, { useState, useEffect } from 'react';
import Web3 from 'web3';
import tokenABI from './TokenABI.json'; // Import the ABI from an external file

const TokenTotalSupply = ({ contractAddress }) => {
  const [totalSupply, setTotalSupply] = useState(null);

  useEffect(() => {
    const fetchTotalSupply = async () => {
      try {
        const web3 = new Web3('https://mainnet.infura.io/v3/your_infura_project_id');
        const contract = new web3.eth.Contract(tokenABI, contractAddress); // Use the imported ABI
        const supply = await contract.methods.totalSupply().call();
        setTotalSupply(supply);
      } catch (error) {
        console.error('Error fetching total supply:', error);
      }
    };

    fetchTotalSupply();
  }, [contractAddress]);

  return (
    <div>
      <p>{totalSupply !== null ? `Total Supply: ${totalSupply}` : 'Loading...'}</p>
    </div>
  );
};

export default TokenTotalSupply;

 
2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.