feat: optimistic disconnect

[magiziz]

Changes

• Added optimistic disconnect behavior by checking isDisconnecting in RainbowKitWagmiStateProvider. If isDisconnecting is true, the useConnectionStatus hook is set to the disconnected state.

Screen recordings / screenshots

optimistic_disconnect.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
rainbowkit-example	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 8, 2024 10:01pm
rainbowkit-site	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 8, 2024 10:01pm

[DanielSinclair]

@magiziz For that WalletConnect scenario, I think what might work better is an "optimistic disconnect". When the user taps disconnect, we put the RainbowKit modal into the disconnected state and then trigger the useDisconnect hook internally. This way the user is never blocked; they don't need to return to their wallet to disconnect anyway. We may need a retry to ensure Wagmi's state is in sync if the websocket were to fail

[magiziz]

This technically won't be a breaking change. If we were to merge this the only thing that would impact is if disconnecting is true, then openConnectModal with just return a noop function. Here is an example.

[magiziz]

For injected wallets it should happen super fast, but for WalletConnect in some scenarios might take time. Of course depending on their socket server.

[DanielSinclair]

I started to look into a refactor here:

• I don't think RainbowKitWagmiStateContext is necessary as we have the existing useConnectionStatus hook
• useDisconnect also comes with a status prop that we could listen to globally and reflect in useConnectionStatus
• Throughout the codebase we use isConnected and isConnecting from useAccount; we would want to consolidate this to only use useConnectionStatus
• As long as the disconnect status flips to pending after a user was in a connected status, then we know they're in the disconnecting state
• We would just want to treat disconnecting like existing connection status disconnected throughout the uses of that hook (as we want the UI to reflect disconnected, even if it is internally processing)

[magiziz]

This is the most important part out of all which makes this work

[magiziz]

I know this is not ideal especially in the long term, but wagmi's useDisconnect hook doesn't provide a global scope state support. It only supports at a component level since they use TanStack react query mutation directly.

Maybe we can look at having isDisconnecting state in useAccount hook in the future, but for now this approach works.

As long as we mark isDisconnecting to disconnected mode in useConnectionStatus that'd work for now 🙏

[magiziz]

You technically can still open the connect modal if your connectionStatus is returning disconnected.

If we allow users to open the connect modal by the time WalletConnect takes time to disconnect, they'll face the issue with shim disconnection which is a known issue in wagmi rn. Ofc only if they start connecting different wallets at once, but we'll make sure to disable it.