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();
    } catch (err) {

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

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

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

export default App;

how do i disconnect from the metamask?


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...


I think what you can do is to call:

  // TODO: Which providers have close method?
  if(provider.close) {
    await provider.close();

    // If the cached provider is not cleared,
    // WalletConnect will default to the existing session
    // and does not allow to re-scan the QR code with a new wallet.
    // Depending on your use case you may want or want not his behavior.
    await web3Modal.clearCachedProvider();
    provider = null;

You can also find the example here.

  • 1
    It does not work anymore.
    – porton
    Dec 14 '20 at 9:18
  • TypeError: provider.close is not a function Jul 6 '21 at 13:50

Hello Sir You Could Wait For Event To Be Fired When Disconnecting(User Deletes Connection in Metamask From Dapp) And Then Dispatch A Action With New Address If there is any other Accounts Currently Connected To Dapp else you Can Call Disconnect Function

         const provider = await new web3(web3.givenProvider);
         provider.on('accountsChanged', (code: number, reason: string) => {
                        const accountSwitch = code[0];
                        if (accountSwitch){
                            if (accountSwitch) {
                                    type: _const.ADDRESS,
                                    payload: { address: accountSwitch }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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