Блог

Я создал веб-сайт reactjs и реализовал подключение к нему Metamask. Я хочу вызвать функцию моего смарт-контракта, чтобы получить количество токенов, которые у меня есть. Я не уверен, как это сделать, учитывая структуру моего приложения react.

 Src ---- Containers ---- Home 
                    ---- Page2 after Metamask connection (where I need to write the result of contract call)
                    ---- Layout (Footer and Navbar for Home and Page2)
 

Поскольку у меня есть кнопка подключения на панели навигации, все подключения web3, metamask находятся в моем Nabvbar.js
Вот код. Как мне вызвать свой конкретный смарт-контракт (с адресом моего контракта), чтобы получить баланс токена, и результат появится на моей странице 2?

 import { useEffect, useState } from 'react';
import { useHistory } from "react-router-dom";
import { Container, Image, Navbar, Nav } from 'react-bootstrap';

import Web3 from 'web3';
import Web3Modal from "web3modal";
import WalletConnectProvider from "@walletconnect/web3-provider";
import Fortmatic from "fortmatic";
import Torus from "@toruslabs/torus-embed";
import Authereum from "authereum";

import { Link, scroller } from "react-scroll";

const Navigation = () => {
    const history = useHistory();
    const [ walletAddress, setWalletAddress ] = useState("");
    const [ showWalletAddress, setShowWalletAddress ] = useState(false);
    const [ navBarShrink, setNavbarShrink ] = useState(false);
    
    const providerOptions = {
        walletconnect: {
          package: WalletConnectProvider,
          options: {
            infuraId: "27e484dcd9e3efcfd25a83a78777cdf1",
            qrcodeModalOptions: {
                mobileLinks: [
                  "rainbow",
                  "metamask",
                  "argent",
                  "trust",
                  "imtoken",
                  "pillar",
                ],
                desktopLinks: [
                  "encrypted ink",
                ]
            }
          }
        },
        torus: {
          package: Torus
        },
        authereum: {
          package: Authereum
        }
    };
      
      const web3Modal = new Web3Modal({
        network: "mainnet", 
        cacheProvider: true, 
        providerOptions
    });
    
      const [walletInfo, setWalletInfo] = useState({
        address: '',
        chainId: 0,
        networkId: 0,
        web3: '',
        provider: '',
        connected: false
    });

    const connect = async () => {
        const provider  = await web3Modal.connect();
        const web3      = getWeb3(provider);
        const accounts  = await web3.eth.getAccounts();
        const address   = accounts[0];
        const networkId = await web3.eth.net.getId();
        const chainId   = await web3.eth.chainId();

        setWalletInfo((prevStatus) => ({
            ...prevStatus,
            address: address,
            chainId: chainId,
            networkId: networkId,
            web3: web3,
            provider: provider,
            connected: true
        }));
        
        if (!provider.on) {
        return;
        }

        provider.on("close", () => resetWallet());

        provider.on("accountsChanged", async (accounts) => {
            setWalletInfo((prevStatus) => ({
                ...prevStatus,
                address: accounts[0]
            }));
        });

        provider.on("chainChanged", async (chainId) => {
            const networkId = await web3.eth.net.getId();
            setWalletInfo((prevStatus) => ({
                ...prevStatus,
                chainId: chainId,
                networkId: networkId
            }));
        });

        provider.on("networkChanged", async (networkId) => {
            setWalletInfo((prevStatus) => ({
                ...prevStatus,
                networkId: networkId
            }));
        });

        if(address) {
            const wallet_txt = getShortText(address);
            setWalletAddress(wallet_txt);
            setShowWalletAddress(true);
            history.push("/default");
        } else {
            setShowWalletAddress(false);
        }
    }

    const getWeb3 = (provider) => {
        const web3 = new Web3(provider);
      
        web3.eth.extend({
          methods: [
            {
              name: "chainId",
              call: "eth_chainId",
              outputFormatter: web3.utils.hexToNumber
            }
          ]
        });
    
        return web3;
    }
    
    const resetWallet = async () => {
        const web3 = walletInfo.web3;
        if (web3 amp;amp; web3.currentProvider amp;amp; web3.currentProvider.close) {
          await web3.currentProvider.close();
        }
        await web3Modal.clearCachedProvider();
        
        setWalletInfo((prevStatus) => ({
          ...prevStatus,
          address: '',
          chainId: 0,
          networkId: 0,
          web3: '',
          provider: '',
          connected: false
        }));

        setShowWalletAddress(false);
        history.push("/");
    };

    return (
        <Navbar>
            <Container>
                NAVBAR CODE
            </Container>
        </Navbar>
  );
}

export default Navigation;

 
 

И там, где я хочу написать, результат находится в tresor.js

 Page2 ---- particles ---- tresor.js
      ---- index.js
 

 import { Container, Image } from "react-bootstrap";

const Tresor = () => {
  return (
   <section className="page-section bg-primary text-blue mb-0" id="tresor">
            <Image id="imgTresor" src={TresorImg} alt=""/>
    </section>
  );
}

export default Tresor;