[Ethereum] How to disconnect MetaMask wallet using Web3modal

reactweb3js

I am using metamask with kovan to connect to the wallet 
import React, { useState, useEffect} from 'react';
import Web3 from "web3";
import Web3Modal from "web3modal";
import Navbar from './components/navbar';

function App() {
const providerOptions = {};
const web3Modal = new Web3Modal({
  network: "mainnet", // optional
  cacheProvider: true, // optional
  providerOptions // required
});

  const [account, setAccount] = useState('');
  async function connect() {
    try {
      const provider = await web3Modal.connect();
      const web3 = new Web3(provider);
      const accounts = await web3.eth.getAccounts();
      setAccount(accounts[0]);
    } catch (err) {
      console.error(err);
    }
  }


  useEffect(() => {
    if (window.web3) {
      connect();
    }
  }, []);

   async function disconnect() {
    const clear = await web3Modal.clearCachedProvider();
  }

  return (
    <div>
     <Navbar account={account} connect={connect} disconnect={disconnect} />
    </div>
  );
}

export default App;

how do i disconnect from the metamask?

Best Answer

It's not possible.

The connect/disconnect functionality is entirely in the user's hands due to security and privacy concerns.

You can only pretend a disconnect by resetting a provider, chainId and selectedAccount to null and clearing the cache of the provided you previously used.

P.S.: I know this is a harsh reality. Upvote this as it's the only correct answer that there is! You have to pretend from your app that the user has disconnected. This is the way I do it in my dapp, the way PancakeSwap does, Uniswap too, etc...

Related Solutions

[Ethereum] Async with getAccounts

I think this just has to do with the fact that web3 methods are error first.

As you said @eoin-moloney this works fine:

web3.eth.getAccounts((err, accounts) => { currentAccount = accounts[0] }

I find that the more I write JS the less convenient callbacks are, so what I do is wrap my web3 calls in a Promise. I'm not sure this is the most efficient way but it was the only way that I could get to work:

promisify = (fun, params=[]) => {
  return new Promise((resolve, reject) => {
    fun(...params, (err, data) => {
      if (err !== null) reject(err);
      else resolve(data);
    });
  });
}

getCurrentAccount = async () => {
  const promise = promisify(web3.eth.getAccounts);
  const accounts = await promise;
  return accounts[0];
}

JavaScript Async Error – Fix ‘Cannot Use Keyword “await” Outside an Async Function’

The actual issue here is that you are using the await at the top level of the JS, you would avoid the issue by doing something like this (but it's worth noting that you are probably going to run into other issues after this - since there's nothing really being done with that web3 variable):

import React from 'react';
import { ChainId, DAppProvider } from "@usedapp/core";
import { Box, Button, Container } from "@material-ui/core";
import Web3 from "web3";
import Web3Modal from "web3modal";
import WalletConnectProvider from "@walletconnect/web3-provider";

const providerOptions = {
  walletconnect: {
    package: WalletConnectProvider, // required
    options: {
      infuraId: process.env.REACT_APP_INFURA_ID // required
    }
  }
};

const web3Modal = new Web3Modal({
  network: "rinkeby", // optional
  cacheProvider: true, // optional
  providerOptions // required
});

function App() {

  const connectWallet = async () => {
    const provider = await web3Modal.connect();
    const web3 = new Web3(provider);
  }

  return (
    <DAppProvider config={{
      supportedChains: [ChainId.Rinkeby],
      notifications: {
        expirationPeriod: 1000,
        checkInterval: 1000
      }
    }}>
      <Container maxWidth="md">
        <Box>
          <Button onClick={() => connectWallet()} variant="contained" color="primary">Connect</Button>
        </Box>
      </Container>
    </DAppProvider>
  )
}

export default App

Best Answer

Related Solutions

[Ethereum] Async with getAccounts

JavaScript Async Error – Fix ‘Cannot Use Keyword “await” Outside an Async Function’

Related Topic