fix: signin close button disconnect on auth signature rejection (#1515)

* fix: signin close button disconnect on auth signature rejection

* fix: share onClose hook with top-level dialog

* chore: lint fixes

* chore: amend changeset

* chore: amend comment

.changeset/rude-windows-heal.md

@@ -0,0 +1,5 @@
+---
+'@rainbow-me/rainbowkit': patch
+---
+
+Resolved an issue with the Authentication modal where a user's wallet would remain connected if the modal was dismissed with the Close button rather than explicitly using the Cancel button. This fix ensures that dApps can reliably require a user to complete Authentication before RainbowKit enters a connected state.

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

@@ -1,9 +1,11 @@
 import React from 'react';
+import { useDisconnect } from 'wagmi';
 import { useConnectionStatus } from '../../hooks/useConnectionStatus';
 import ConnectOptions from '../ConnectOptions/ConnectOptions';
 import { Dialog } from '../Dialog/Dialog';
 import { DialogContent } from '../Dialog/DialogContent';
 import { SignIn } from '../SignIn/SignIn';
+
 export interface ConnectModalProps {
   open: boolean;
   onClose: () => void;
@@ -13,6 +15,13 @@ export function ConnectModal({ onClose, open }: ConnectModalProps) {
   const titleId = 'rk_connect_title';
   const connectionStatus = useConnectionStatus();
 
+  // when a user cancels or dismisses the SignIn modal for SIWE, disconnect and call onClose
+  const { disconnect } = useDisconnect();
+  const onAuthCancel = React.useCallback(() => {
+    onClose();
+    disconnect();
+  }, [onClose, disconnect]);
+
   if (connectionStatus === 'disconnected') {
     return (
       <Dialog onClose={onClose} open={open} titleId={titleId}>
@@ -25,9 +34,9 @@ export function ConnectModal({ onClose, open }: ConnectModalProps) {
 
   if (connectionStatus === 'unauthenticated') {
     return (
-      <Dialog onClose={onClose} open={open} titleId={titleId}>
+      <Dialog onClose={onAuthCancel} open={open} titleId={titleId}>
         <DialogContent bottomSheetOnMobile padding="0">
-          <SignIn onClose={onClose} />
+          <SignIn onClose={onAuthCancel} />
         </DialogContent>
       </Dialog>
     );

packages/rainbowkit/src/components/SignIn/SignIn.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useRef } from 'react';
 import { UserRejectedRequestError } from 'viem';
-import { useAccount, useDisconnect, useNetwork, useSignMessage } from 'wagmi';
+import { useAccount, useNetwork, useSignMessage } from 'wagmi';
 import { touchableStyles } from '../../css/touchableStyles';
 import { isMobile } from '../../utils/isMobile';
 import { AsyncImage } from '../AsyncImage/AsyncImage';
@@ -50,8 +50,6 @@ export function SignIn({ onClose }: { onClose: () => void }) {
   const { address } = useAccount();
   const { chain: activeChain } = useNetwork();
   const { signMessageAsync } = useSignMessage();
-  const { disconnect } = useDisconnect();
-  const cancel = () => disconnect();
 
   const signIn = async () => {
     try {
@@ -213,7 +211,7 @@ export function SignIn({ onClose }: { onClose: () => void }) {
           {mobile ? (
             <ActionButton
               label="Cancel"
-              onClick={cancel}
+              onClick={onClose}
               size="large"
               type="secondary"
             />
@@ -223,7 +221,7 @@ export function SignIn({ onClose }: { onClose: () => void }) {
               borderRadius="full"
               className={touchableStyles({ active: 'shrink', hover: 'grow' })}
               display="block"
-              onClick={cancel}
+              onClick={onClose}
               paddingX="10"
               paddingY="5"
               rel="noreferrer"