[bug] <Connect button state not updating after metamask disconnect>

[edgardo-mkr]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.7.1

wagmi Version

0.6.8

Current Behavior

In a certain case scenario when disconnecting from metamask it still shows my address and balance in the connect button.

Expected Behavior

it should just show the connect wallet button

Steps To Reproduce

1.connect with metamask.
2.disconnect with the account modal.
3.close the web browser (in my case i used chrome).
4.open and connect again with metamask.
5.now disconnect using metamask and it will still show all the account data in the connect button.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

[jackromo888]

@bcomnes

[abartolo]

I am also having this issue with RainbowKit version: 0.7.2. It works fine after reverting to 0.5.3 since I tried every version before @latest to find the last working version.

1. Connect to wallet
2. Refresh Page - still connected to wallet(good)
3. Disconnect via Rainbowkit UI - Shows the "Connect" button since I clicked "Disconnect"
4. Refresh page - Shows connected again even tho I disconnected before.

Edit - Added code below
Code

File: App.tsx

// Rainbow css
import '@rainbow-me/rainbowkit/styles.css';
import React from 'react';
import type { AppProps } from 'next/app';
import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { chain, configureChains, createClient, WagmiConfig } from 'wagmi';
import { infuraProvider } from 'wagmi/providers/infura';
import { publicProvider } from 'wagmi/providers/public';

const { chains, provider } = configureChains(
  [chain.goerli],
  [
    infuraProvider({ apiKey: 'abc....xyz' }),
    publicProvider(),
  ]
);
const { connectors } = getDefaultWallets({
  appName: 'DeFi App',
  chains,
});
const wagmiClient = createClient({
  autoConnect: true,
  connectors,
  provider,
});

export default function MyApp({ Component, pageProps }: AppProps) {
  // TODO: Fix this Typescript error
  const PageComponent = Component as any;

  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains} coolMode>
        <PageComponent {...pageProps} />
      </RainbowKitProvider>
    </WagmiConfig>
  );
}

File: fileWithConnect.tsx

import { AuthPageContainer } from 'components/auth/AuthPageContainer';
import { Container } from '@defience/ui';
import { ConnectButton } from '@rainbow-me/rainbowkit';


export default function RainbowKitPage() {
  return (
    <AuthPageContainer>
      <div className="mt-16">
        <Container>
          <ConnectButton />
        </Container>
      </div>
    </AuthPageContainer>
  );
}

[abartolo]

After messing around with Custom wallet and walletlist I found that the issue might be the infjectedWallet and metaMaskWallet. The other wallet connections did not have this when I connect/disconnect/refresh.

const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [
      // injectedWallet({ chains }),
      alexCustomWallet({ chains }),
      // metaMaskWallet({ chains }),
      rainbowWallet({ chains }),
      walletConnectWallet({ chains }),
      coinbaseWallet({ appName: 'DeFi App', chains }),
    ],
  },
]);

[mathesond2]

I'm having this issue as well. I've created a Loom video recording to illustrate this issue along with an associated small repo available for checkout. Please let me know if I can help further, happy to do so :)

[jeevanpillay0000]

bump this issue

also happens on rainbow custom auth plugin

after reading this, pretty sure the core issue is with rainbowkit itself.

[sarinniural]

It happens on https://www.rainbowkit.com/ as well. When you disconnect the wallet and refresh it, it is still connected. Have to go to metamask to disconnect.

[chrisvxd]

Suspect this is because the shimDisconnect option from wagmi is not getting applied properly:

wevm/wagmi#119

[hzhu]

[xjjda22]

#836 (comment)

known issue with MetaMask
wevm/wagmi#1239

[danielgangl]

Had the same issue, was resolved for me with rainbow 8.x version. Sadly I still couldn't use it then because it has a few other major bugs that have yet to be resolved

[terrytjw]

How about setting autoConnect: false?

[jackromo888]

🍍

[terrytjw]

Ok so for this, whenever you refresh while it's connected, the wallet disconnects as well. So it's not really a viable solution.

[voldemote]

Yeah, Exactly @terrytjw
To make autoConnect: false is not viable solution.
Then, is there no way to solve this trouble ?

[terrytjw]

Is this issue fixed yet?

[voldemote]

still not fixed.

[natrixofficial]

This error has gone after add shimDisconnect to true. Aka: metaMaskWallet({ chains, shimDisconnect: true }),
I have just tried now. Rebuild my test project. connect, then disconnect and refresh the page. After it the "Connect" button still in "Connect" state ;)
I am using the latest version of rainbowkit (0.8.1) and wagmi 0.9.6

[voldemote]

wow, great. thanks @natrixofficial

[rjborba]

This issue is related to metamask. It does not allows to change the connect state. MetamaskWallet connector on wagmi has a way to manage it by keeping track of users actions locally:

metaMaskWallet({ chains, shimDisconnect: true })

This issue is NOT related to Rainbowkit and should be closed.

[Kethatril]

Due to a bug in wagmi you need to make sure all of the connectors that you use that are either InjectedConnector or extend InjectedConnector have shimDisconnect set to true. For the default set of connectors that RainbowKit uses (from getDefaultWallets) those are: metaMaskWallet, injectedWallet and braveWallet.

[ajeetgill]

not the best option but clearing the localstorage helps - though it should just work irrespective of if the issue is with wagmi or metamask or whatever.

[Chriton]

I've fixed it like this:

const {chains, provider} = configureChains(
    [mainnet],
    [
        alchemyProvider({apiKey: (process.env.REACT_APP_ALCHEMY_API as string), priority: 0}),
        infuraProvider({apiKey: (process.env.REACT_APP_INFURA_API as string), priority: 1}),
        publicProvider({priority: 2})
    ]
);

const connectors = connectorsForWallets([
    {
        groupName: 'Recommended',
        wallets: [
            injectedWallet({ chains, shimDisconnect: true }),
            metaMaskWallet({ chains, shimDisconnect: true }),
            coinbaseWallet({ chains, appName: 'Linagee Identity' }),
            ledgerWallet({ chains }),
            rainbowWallet({ chains, shimDisconnect: true }),
            walletConnectWallet({ chains }),
        ],
    },
    {
        groupName: 'Other',
        wallets: [
            trustWallet({ chains, shimDisconnect: true }),
        ]
    }
]);

const wagmiClient = createClient({
    autoConnect: true,
    connectors,
    provider
});

Hope it helps you

[balajipdm]

The following localStorage attributes will help disconnect from the MetaMask wallet on disconnect:

localStorage.setItem('wagmi.io.metamask.disconnected', true)
localStorage.setItem('wagmi.metaMask.disconnected', true)

Hope it helps

[DanielSinclair]

@balajipdm These localstorage keys are actually handled by Wagmi internally, so there shouldn't be a need to adjust them. metaMask would also be replaced by each individual connector id, so you'd need to handle multiple keys. There is indeed an issue with Wagmi v2 currently that seems to mix connector ids and leads to unexpected persistence, which is being investigated here, and should be fixed soon: wevm/wagmi#3606