feat: optimistic disconnect behaviour

.changeset/wild-hounds-talk.md

@@ -2,4 +2,4 @@
 "@rainbow-me/rainbowkit": patch
 ---
 
-Disable disconnect buttons when wallet is disconnecting.
+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.

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

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

packages/example/pages/index.tsx

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

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

@@ -5,6 +5,7 @@ import { useMainnetEnsName } from '../../hooks/useMainnetEnsName';
 import { Dialog } from '../Dialog/Dialog';
 import { DialogContent } from '../Dialog/DialogContent';
 import { ProfileDetails } from '../ProfileDetails/ProfileDetails';
+import { useRainbowKitWagmiState } from '../RainbowKitProvider/RainbowKitWagmiStateProvider';
 
 export interface AccountModalProps {
  open: boolean;
@@ -15,7 +16,14 @@ export function AccountModal({ onClose, open }: AccountModalProps) {
  const { address } = useAccount();
  const ensName = useMainnetEnsName(address);
  const ensAvatar = useMainnetEnsAvatar(ensName);
- const { disconnect } = useDisconnect();
+ const { setIsDisconnecting } = useRainbowKitWagmiState();
+
+ const { disconnect } = useDisconnect({
+ mutation: {
+ onSuccess: () => setIsDisconnecting(false),
+ onError: () => setIsDisconnecting(false),
+ },
+ });
 
  if (!address) {
  return null;
@@ -33,7 +41,11 @@ export function AccountModal({ onClose, open }: AccountModalProps) {
  ensAvatar={ensAvatar}
  ensName={ensName}
  onClose={onClose}
- onDisconnect={disconnect}
+ onDisconnect={() => {
+ onClose();
+ setIsDisconnecting(true);
+ disconnect();
+ }}
  />
  </DialogContent>
  </Dialog>

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

@@ -10,6 +10,7 @@ import { DisconnectSqIcon } from '../Icons/DisconnectSq';
 import { MenuButton } from '../MenuButton/MenuButton';
 import { I18nContext } from '../RainbowKitProvider/I18nContext';
 import { useRainbowKitChains } from '../RainbowKitProvider/RainbowKitChainContext';
+import { useRainbowKitWagmiState } from '../RainbowKitProvider/RainbowKitWagmiStateProvider';
 import { Text } from '../Text/Text';
 import Chain from './Chain';
 import {
@@ -45,7 +46,14 @@ export function ChainModal({ onClose, open }: ChainModalProps) {
 
  const { i18n } = useContext(I18nContext);
 
- const { disconnect } = useDisconnect();
+ const { disconnect } = useDisconnect({
+ mutation: {
+ onSuccess: () => setIsDisconnecting(false),
+ onError: () => setIsDisconnecting(false),
+ },
+ });
+
+ const { setIsDisconnecting } = useRainbowKitWagmiState();
  const titleId = 'rk_chain_modal_title';
  const mobile = isMobile();
  const isCurrentChainSupported = chains.some((chain) => chain.id === chainId);
@@ -116,7 +124,11 @@ export function ChainModal({ onClose, open }: ChainModalProps) {
  <>
  <Box background="generalBorderDim" height="1" marginX="8" />
  <MenuButton
- onClick={() => disconnect()}
+ onClick={() => {
+ onClose();
+ setIsDisconnecting(true);
+ disconnect();
+ }}
  testId="chain-option-disconnect"
  >
  <Box

packages/rainbowkit/src/components/ConnectButton/ConnectButton.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const button = style({
+ ':disabled': {
+ opacity: 0.75,
+ pointerEvents: 'none',
+ },
+});

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

@@ -14,6 +14,7 @@ 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';
@@ -58,6 +59,7 @@ export function ConnectButton({
  account,
  chain,
  mounted,
+ disconnecting,
  openAccountModal,
  openChainModal,
  openConnectModal,
@@ -78,7 +80,10 @@ export function ConnectButton({
  },
  })}
  >
- {ready && account && connectionStatus === 'connected' ? (
+ {ready &&
+ account &&
+ !disconnecting &&
+ connectionStatus === 'connected' ? (
  <>
  {chain && (chains.length > 1 || unsupportedChain) && (
  <Box
@@ -266,15 +271,19 @@ export function ConnectButton({
  background="accentColor"
  borderRadius="connectButton"
  boxShadow="connectButton"
- className={touchableStyles({
- active: 'shrink',
- hover: 'grow',
- })}
+ className={[
+ styles.button,
+ 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,6 +18,7 @@ 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';
@@ -48,6 +49,7 @@ export interface ConnectButtonRendererProps {
  unsupported?: boolean;
  };
  mounted: boolean;
+ disconnecting: boolean;
  authenticationStatus?: AuthenticationStatus;
  openAccountModal: () => void;
  openChainModal: () => void;
@@ -65,7 +67,6 @@ 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(
@@ -115,6 +116,7 @@ export function ConnectButtonRenderer({
  const { openConnectModal } = useConnectModal();
  const { openChainModal } = useChainModal();
  const { openAccountModal } = useAccountModal();
+ const { isDisconnecting: disconnecting } = useRainbowKitWagmiState();
  const { accountModalOpen, chainModalOpen, connectModalOpen } =
  useModalState();
 
@@ -151,6 +153,7 @@ export function ConnectButtonRenderer({
  chainModalOpen,
  connectModalOpen,
  mounted: isMounted(),
+ disconnecting,
  openAccountModal: openAccountModal ?? noop,
  openChainModal: openChainModal ?? noop,
  openConnectModal: openConnectModal ?? noop,

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

@@ -13,6 +13,7 @@ import { AccountModal } from '../AccountModal/AccountModal';
 import { ChainModal } from '../ChainModal/ChainModal';
 import { ConnectModal } from '../ConnectModal/ConnectModal';
 import { useAuthenticationStatus } from './AuthenticationContext';
+import { useRainbowKitWagmiState } from './RainbowKitWagmiStateProvider';
 
 function useModalStateValue() {
  const [isModalOpen, setModalOpen] = useState(false);
@@ -66,6 +67,8 @@ export function ModalProvider({ children }: ModalProviderProps) {
  openModal: openChainModal,
  } = useModalStateValue();
 
+ const { isDisconnecting } = useRainbowKitWagmiState();
+
  const [isWalletConnectModalOpen, setIsWalletConnectModalOpen] =
  useState(false);
 
@@ -113,19 +116,25 @@ export function ModalProvider({ children }: ModalProviderProps) {
  connectModalOpen,
  isWalletConnectModalOpen,
  openAccountModal:
- isCurrentChainSupported && connectionStatus === 'connected'
+ !isDisconnecting &&
+ isCurrentChainSupported &&
+ connectionStatus === 'connected'
  ? openAccountModal
  : undefined,
  openChainModal:
- connectionStatus === 'connected' ? openChainModal : undefined,
+ !isDisconnecting && connectionStatus === 'connected'
+ ? openChainModal
+ : undefined,
  openConnectModal:
- connectionStatus === 'disconnected' ||
- connectionStatus === 'unauthenticated'
+ (connectionStatus === 'disconnected' ||
+ connectionStatus === 'unauthenticated') &&
+ !isDisconnecting
  ? openConnectModal
  : undefined,
  setIsWalletConnectModalOpen,
  }),
  [
+ isDisconnecting,
  connectionStatus,
  accountModalOpen,
  chainModalOpen,