MetaMask Confirmation – How to Refresh Page Using Web3js and React?

ethereum-wallet-dappmetamaskreactweb3js

I would like to reload the React Web3 wallet's page upon MetaMask Confirmation. Meaning when the ERC-20 token send transaction is confirmed, the page should reload or state should update to display the new balance.

In this transfer function, the pseudo-code starts with ".on()":

function refreshPage() {
  window.location.reload(false);
}

transfer(recipient, amount) {
  this.state.waviiiToken.methods.transfer(recipient, amount).send({ from: this.state.account })
  .on('confirmation' refreshPage);
}

Please let me know if this is possible or if you have an example I can reference that updates state or refreshes the page.

Best Answer

I added a window.location.reload() after successful transaction (my web3 await function). This works on local test net but will have to do some more digging due to the longer wait times on the Main Net and other Test Nets.

** EDIT **

Thanks @JaxCoder, This helped me find the solution. window.location.reload() was part of it. To make sure the loader / progress bar keeps running until full confirmation of the transaction is received, the following is the solution:

transfer(recipient, amount) {
  this.setState({ loading: true })
  this.state.waviiiToken.methods.transfer(recipient, amount).send({ from: this.state.account }).on('confirmation', (reciept) => {
    this.setState({ loading: false })
    window.location.reload()
  })
}

Related Solutions

Metamask Integration – Connecting to Metamask Using React.js and Next.js Without Refreshing

This is probably because you are establishing the web3 connection only in your index.js; therefore, it is not accessible when you navigate into other pages.

You can either use Redux to have global variables accessible from any page, or share data between components through properties.

** UPDATE: **

In case it helps, this is the way I normally connect to web3 through React (in Typescript):

React.useEffect(() => {
    const init = async () => {
        await getWeb3(true);
    }
    init();
}, []);

const getWeb3 = async (isFirstLoad: boolean) => {
    try {
        let web3: Web3;
        if (window.ethereum) {
            web3 = new Web3(window.ethereum);
            // Ask User permission to connect to Metamask
            if (!isFirstLoad) {
                try {
                    await window.ethereum.enable();
                } catch (err) {
                    console.log('Transaction rejected by user:', err)
                };
            };
        } else if (window.web3) {
            web3 = new Web3(window.web3.currentProvider);
        } else {
            window.alert('Non-Ethereum browser detected. Please install MetaMask plugin');
            return;
        };

        dispatch(setWeb3(web3));  // Update web3 into Redux state

        // ...
    } catch (err) {
        console.log('Error in Web3.tsx -> getWeb3(): ', err);
    };
};

The variable isFirstLoad prevents asking the User to reconnect to your site if he/she was already connected.

I had some issues when using window.addEventListener(), so perhaps you can try without it.