rainbow-me / rainbowkit

The best way to connect a wallet 🌈 🧰
https://rainbowkit.com
MIT License
2.36k stars 617 forks source link

[bug] wallet status changed after connected #2062

Closed RodeRickIsWatching closed 1 week ago

RodeRickIsWatching commented 1 week ago

Is there an existing issue for this?

RainbowKit Version

2.0.6

wagmi Version

2.6.0

Current Behavior

im using isConnected for if the user has connected to the wallet, but sometimes, it has changed into false and rechanged into true in a very short time. And on my website it acts like the video below. And I've console the value of isConnected, it show true -> false -> true, and cycling like this.

https://github.com/rainbow-me/rainbowkit/assets/43104791/0d801efd-889d-46df-b2c3-2ad764bf95d1

And also here's my code for the wallets.

WalletList

 const walletList = [
  {
    name: 'metamask',
    walletName: 'metamask',
    icon: getImageUrl('@/assets/images/wallet/metamask.svg'),
    wallet: metaMaskWallet,
  }
];

  const { connectAsync } = useConnect();
  const handleConnect = async (connect: any, connector: any, item: any) => {
      if (!connector?.installed && connector?.id !== 'walletConnect') {
        const downloadUrl = connector?.extensionDownloadUrl || connector?.downloadUrls?.browserExtension;
        // send to download
        return;
      }
      await connectAsync?.({ connector });
  };

<div className="grid grid-cols-2 items-center gap-[10px]">
  {walletList
    ?.map((i, index) => {
      return (
        <WalletButton.Custom wallet={i?.name} key={index}>
          {({ connector, loading, connect, error }) => {
            return (
              <button
                type="button"
                onClick={() => handleConnect(connect, connector, i)}
              >
                {loading ? <Loading /> : <img className="size-[2.125rem] rounded-full" src={i?.icon} />}
                <div className="capitalize">{i?.name}</div>
              </button>
            );
          }}
        </WalletButton.Custom>
      );
    })}
</div>

And provider

const config = getDefaultConfig({
  pollingInterval: 10_000,
  appName: '',
  projectId: '',
  multiInjectedProviderDiscovery: false,
  chains: [mainnet, bsc, arbitrum]
  wallets: [
    {
      groupName: 'Recommended',
      wallets: Object.values(walletList)?.map(i => i?.wallet),
    },
  ],
});

Expected Behavior

a stable wallet status

Steps To Reproduce

hard to reproduce. need stay in page for a long time.

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

https://omni.apex.exchange

Anything else?

No response

RodeRickIsWatching commented 1 week ago

@magiziz sir, could u help with this, thx

magiziz commented 1 week ago

@RodeRickIsWatching I'm not able to reproduce this with your code. Are you disconnecting and connecting every second in your code maybe ?

Can you share a small reproducible example ? Github or codesandbox link would be great

We also have a <WalletButton.Custom> example here https://github.com/rainbow-me/rainbowkit/blob/main/examples/with-next-wallet-button/src/pages/index.tsx#L35-L43.

magiziz commented 1 week ago

@RodeRickIsWatching Were you able to figure something out ?

magiziz commented 1 week ago

Closing this issue due to inactivity