chore: tweak disconnect behaviour

chore: remove unnecessary code

chore: remove unnecessary code

.changeset/wild-hounds-talk.md

@@ -2,4 +2,4 @@
 "@rainbow-me/rainbowkit": patch
 ---
 
-Added optimistic disconnect behavior for the account modal and chain modal. Additionally, a new prop `disconnecting` was introduced to `<ConnectButton.Custom>` to enable rendering of UI based on the optimistic behavior.
+Introduced optimistic disconnect behavior by monitoring `isDisconnecting` in `RainbowKitWagmiStateProvider`. If `isDisconnecting` is `true`, the `useConnectionStatus` hook will mark its state as `disconnected`.

examples/with-next-custom-button/pages/index.tsx

@@ -14,7 +14,6 @@ const Home: NextPage = () => {
  <ConnectButton.Custom>
  {({
  account,
- disconnecting,
  chain,
  openAccountModal,
  openChainModal,
@@ -33,9 +32,9 @@ const Home: NextPage = () => {
  })}
  >
  {(() => {
- if (!mounted || !account || !chain || disconnecting) {
+ if (!mounted || !account || !chain) {
  return (
- <button disabled={disconnecting} onClick={openConnectModal} type="button">
+ <button onClick={openConnectModal} type="button">
  Connect Wallet
  </button>
  );

packages/example/pages/index.tsx

@@ -129,7 +129,6 @@ const Example = ({ authEnabled }: AppContextProps) => {
  authenticationStatus,
  chain,
  mounted,
- disconnecting,
  openAccountModal,
  openChainModal,
  openConnectModal,
@@ -138,7 +137,6 @@ const Example = ({ authEnabled }: AppContextProps) => {
  const connected =
  ready &&
  account &&
- !disconnecting &&
  chain &&
  (!authenticationStatus ||
  authenticationStatus === 'authenticated');
@@ -157,11 +155,7 @@ const Example = ({ authEnabled }: AppContextProps) => {
  {(() => {
  if (!connected) {
  return (
- <button
- disabled={disconnecting}
- onClick={openConnectModal}
- type="button"
- >
+ <button onClick={openConnectModal} type="button">
  Connect Wallet
  </button>
  );

packages/rainbowkit/src/components/AccountModal/AccountModal.tsx

@@ -20,8 +20,8 @@ export function AccountModal({ onClose, open }: AccountModalProps) {
 
  const { disconnect } = useDisconnect({
  mutation: {
- onSuccess: () => setIsDisconnecting(false),
- onError: () => setIsDisconnecting(false),
+ onMutate: () => setIsDisconnecting(true),
+ onSettled: () => setIsDisconnecting(false),
  },
  });
 
@@ -43,7 +43,6 @@ export function AccountModal({ onClose, open }: AccountModalProps) {
  onClose={onClose}
  onDisconnect={() => {
  onClose();
- setIsDisconnecting(true);
  disconnect();
  }}
  />

packages/rainbowkit/src/components/ChainModal/ChainModal.tsx

@@ -48,8 +48,8 @@ export function ChainModal({ onClose, open }: ChainModalProps) {
 
  const { disconnect } = useDisconnect({
  mutation: {
- onSuccess: () => setIsDisconnecting(false),
- onError: () => setIsDisconnecting(false),
+ onMutate: () => setIsDisconnecting(true),
+ onSettled: () => setIsDisconnecting(false),
  },
  });
 
@@ -126,7 +126,6 @@ export function ChainModal({ onClose, open }: ChainModalProps) {
  <MenuButton
  onClick={() => {
  onClose();
- setIsDisconnecting(true);
  disconnect();
  }}
  testId="chain-option-disconnect"

packages/rainbowkit/src/components/ConnectButton/ConnectButton.tsx

@@ -14,7 +14,6 @@ import { DropdownIcon } from '../Icons/Dropdown';
 import { I18nContext } from '../RainbowKitProvider/I18nContext';
 import { useRainbowKitChains } from '../RainbowKitProvider/RainbowKitChainContext';
 import { useShowBalance } from '../RainbowKitProvider/ShowBalanceContext';
-import * as styles from './ConnectButton.css';
 import { ConnectButtonRenderer } from './ConnectButtonRenderer';
 
 type AccountStatus = 'full' | 'avatar' | 'address';
@@ -59,7 +58,6 @@ export function ConnectButton({
  account,
  chain,
  mounted,
- disconnecting,
  openAccountModal,
  openChainModal,
  openConnectModal,
@@ -80,10 +78,7 @@ export function ConnectButton({
  },
  })}
  >
- {ready &&
- account &&
- !disconnecting &&
- connectionStatus === 'connected' ? (
+ {ready && account && connectionStatus === 'connected' ? (
  <>
  {chain && (chains.length > 1 || unsupportedChain) && (
  <Box
@@ -271,19 +266,15 @@ export function ConnectButton({
  background="accentColor"
  borderRadius="connectButton"
  boxShadow="connectButton"
- className={[
- styles.button,
- touchableStyles({
- active: 'shrink',
- hover: 'grow',
- }),
- ]}
+ className={touchableStyles({
+ active: 'shrink',
+ hover: 'grow',
+ })}
  color="accentColorForeground"
  fontFamily="body"
  fontWeight="bold"
  height="40"
  key="connect"
- disabled={disconnecting}
  onClick={openConnectModal}
  paddingX="14"
  testId="connect-button"

packages/rainbowkit/src/components/ConnectButton/ConnectButtonRenderer.tsx

@@ -18,7 +18,6 @@ import {
  useModalState,
 } from '../RainbowKitProvider/ModalContext';
 import { useRainbowKitChainsById } from '../RainbowKitProvider/RainbowKitChainContext';
-import { useRainbowKitWagmiState } from '../RainbowKitProvider/RainbowKitWagmiStateProvider';
 import { useShowBalance } from '../RainbowKitProvider/ShowBalanceContext';
 import { ShowRecentTransactionsContext } from '../RainbowKitProvider/ShowRecentTransactionsContext';
 import { abbreviateETHBalance } from './abbreviateETHBalance';
@@ -49,7 +48,6 @@ export interface ConnectButtonRendererProps {
  unsupported?: boolean;
  };
  mounted: boolean;
- disconnecting: boolean;
  authenticationStatus?: AuthenticationStatus;
  openAccountModal: () => void;
  openChainModal: () => void;
@@ -67,6 +65,7 @@ export function ConnectButtonRenderer({
  const { address } = useAccount();
  const ensName = useMainnetEnsName(address);
  const ensAvatar = useMainnetEnsAvatar(ensName);
+
  const { chainId } = useAccount();
  const { chains: wagmiChains } = useConfig();
  const isCurrentChainSupported = wagmiChains.some(
@@ -116,7 +115,6 @@ export function ConnectButtonRenderer({
  const { openConnectModal } = useConnectModal();
  const { openChainModal } = useChainModal();
  const { openAccountModal } = useAccountModal();
- const { isDisconnecting: disconnecting } = useRainbowKitWagmiState();
  const { accountModalOpen, chainModalOpen, connectModalOpen } =
  useModalState();
 
@@ -153,7 +151,6 @@ export function ConnectButtonRenderer({
  chainModalOpen,
  connectModalOpen,
  mounted: isMounted(),
- disconnecting,
  openAccountModal: openAccountModal ?? noop,
  openChainModal: openChainModal ?? noop,
  openConnectModal: openConnectModal ?? noop,

packages/rainbowkit/src/components/ConnectModal/ConnectModal.tsx

@@ -4,6 +4,7 @@ import { useConnectionStatus } from '../../hooks/useConnectionStatus';
 import ConnectOptions from '../ConnectOptions/ConnectOptions';
 import { Dialog } from '../Dialog/Dialog';
 import { DialogContent } from '../Dialog/DialogContent';
+import { useRainbowKitWagmiState } from '../RainbowKitProvider/RainbowKitWagmiStateProvider';
 import { SignIn } from '../SignIn/SignIn';
 
 export interface ConnectModalProps {
@@ -14,8 +15,15 @@ export interface ConnectModalProps {
 export function ConnectModal({ onClose, open }: ConnectModalProps) {
  const titleId = 'rk_connect_title';
  const connectionStatus = useConnectionStatus();
+ const { setIsDisconnecting } = useRainbowKitWagmiState();
+
+ const { disconnect } = useDisconnect({
+ mutation: {
+ onMutate: () => setIsDisconnecting(true),
+ onSettled: () => setIsDisconnecting(false),
+ },
+ });
 
- const { disconnect } = useDisconnect();
  const { isConnecting } = useAccount();
 
  // when a user cancels or dismisses the SignIn modal for SIWE, disconnect and call onClose

packages/rainbowkit/src/components/RainbowKitProvider/ModalContext.tsx

@@ -67,13 +67,13 @@ export function ModalProvider({ children }: ModalProviderProps) {
  openModal: openChainModal,
  } = useModalStateValue();
 
- const { isDisconnecting } = useRainbowKitWagmiState();
-
  const [isWalletConnectModalOpen, setIsWalletConnectModalOpen] =
  useState(false);
 
  const connectionStatus = useConnectionStatus();
 
+ const { isDisconnecting } = useRainbowKitWagmiState();
+
  const { chainId } = useAccount();
  const { chains } = useConfig();
 
@@ -116,19 +116,18 @@ export function ModalProvider({ children }: ModalProviderProps) {
  connectModalOpen,
  isWalletConnectModalOpen,
  openAccountModal:
- !isDisconnecting &&
- isCurrentChainSupported &&
- connectionStatus === 'connected'
+ isCurrentChainSupported && connectionStatus === 'connected'
  ? openAccountModal
  : undefined,
  openChainModal:
- !isDisconnecting && connectionStatus === 'connected'
- ? openChainModal
- : undefined,
+ connectionStatus === 'connected' ? openChainModal : undefined,
  openConnectModal:
+ // Prevent opening the connect modal during disconnecting mode. Even though `connectionStatus`
+ // may mark it as 'disconnected', we don't want the user to open the modal as the wagmi state
+ // still considers it 'connected'
+ !isDisconnecting &&
  (connectionStatus === 'disconnected' ||
- connectionStatus === 'unauthenticated') &&
- !isDisconnecting
+ connectionStatus === 'unauthenticated')
  ? openConnectModal
  : undefined,
  setIsWalletConnectModalOpen,

packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitWagmiStateProvider.tsx

@@ -24,6 +24,8 @@ interface RainbowKitWagmiStateProviderProps {
 export function RainbowKitWagmiStateProvider({
  children,
 }: RainbowKitWagmiStateProviderProps) {
+ // The 'status' state from the `useDisconnect` hook in wagmi can't be used for 'pending' logic,
+ // as it doesn't share its state globally. It only shares its state within the same component (like useState).
  const [isDisconnecting, setIsDisconnecting] = useState(false);
 
  return (

packages/rainbowkit/src/hooks/useConnectionStatus.ts

@@ -1,5 +1,6 @@
 import { useAccount } from 'wagmi';
 import { useAuthenticationStatus } from '../components/RainbowKitProvider/AuthenticationContext';
+import { useRainbowKitWagmiState } from '../components/RainbowKitProvider/RainbowKitWagmiStateProvider';
 
 export type ConnectionStatus =
  | 'disconnected'
@@ -10,8 +11,9 @@ export type ConnectionStatus =
 export function useConnectionStatus(): ConnectionStatus {
  const authenticationStatus = useAuthenticationStatus();
  const { isConnected } = useAccount();
+ const { isDisconnecting } = useRainbowKitWagmiState();
 
- if (!isConnected) {
+ if (!isConnected || isDisconnecting) {
  return 'disconnected';
  }
 

site/data/en-US/docs/custom-connect-button.mdx

@@ -19,7 +19,6 @@ export const YourApp = () => {
  <ConnectButton.Custom>
  {({
  account,
- disconnecting,
  chain,
  openAccountModal,
  openChainModal,
@@ -34,7 +33,6 @@ export const YourApp = () => {
  ready &&
  account &&
  chain &&
- !disconnecting &&
  (!authenticationStatus ||
  authenticationStatus === 'authenticated');
 
@@ -52,7 +50,7 @@ export const YourApp = () => {
  {(() => {
  if (!connected) {
  return (
- <button disabled={disconnecting} onClick={openConnectModal} type="button">
+ <button onClick={openConnectModal} type="button">
  Connect Wallet
  </button>
  );