Fix wallets integration issues (#731)

Ref #726
Closes #732

This PR improves dApp integration with browser wallets. After rejecting
any of the actions during account connection, the dApp opened
uncontrollable wallet windows. What has been done:

- The changes trigger an action when the button is clicked.
Additionally, when the user rejects signing the message a special button
is shown to repeat the action.
- Do not trigger connection action again when wallet is selected.
- Reset the status of the sign message to the initial state when the
user changed the wallet and back to the previous one.

Specific issues for the Unisat wallet will be resolved in the next PR.

### UI

#### Before

**Rejecting the action - Connect wallet**


https://github.com/user-attachments/assets/756addd4-092a-4ff3-a3f7-09e2812ce893


**Rejecting the action - Sign message**

https://github.com/user-attachments/assets/64a1039a-35c5-46fd-b384-0d57a37e2fd0




#### After

**Rejecting the action - Connect wallet**

https://github.com/user-attachments/assets/4fad2923-6a18-43f9-ad14-69dcd46bf9b2

**Rejecting the action - Sign message**


https://github.com/user-attachments/assets/d46d448e-e94d-434c-8f47-23278d149a85

dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react"
+import React, { useCallback, useState } from "react"
 import { CONNECTION_ERRORS, ONE_SEC_IN_MILLISECONDS } from "#/constants"
 import {
   useAppDispatch,
@@ -9,7 +9,7 @@ import {
 } from "#/hooks"
 import { setIsSignedMessage } from "#/store/wallet"
 import { OrangeKitConnector, OrangeKitError, OnSuccessCallback } from "#/types"
-import { logPromiseFailure, orangeKit } from "#/utils"
+import { eip1193, logPromiseFailure, orangeKit } from "#/utils"
 import {
   Button,
   Card,
@@ -56,18 +56,18 @@ export default function ConnectWalletButton({
 }: ConnectWalletButtonProps) {
   const {
     address,
-    isConnected,
     onConnect,
     onDisconnect,
     status: connectionStatus,
   } = useWallet()
-  const { signMessageStatus, signMessageAndCreateSession } =
+  const { signMessageStatus, resetMessageStatus, signMessageAndCreateSession } =
     useSignMessageAndCreateSession()
+  const { connectionError, setConnectionError, resetConnectionError } =
+    useWalletConnectionError()
   const { closeModal } = useModal()
   const dispatch = useAppDispatch()
 
   const [isLoading, setIsLoading] = useState<boolean>(false)
-  const { connectionError, setConnectionError } = useWalletConnectionError()
 
   const hasConnectionError = connectionError || connectionStatus === "error"
   const hasSignMessageStatus = signMessageStatus === "error"
@@ -90,11 +90,19 @@ export default function ConnectWalletButton({
 
         onSuccessSignMessage()
       } catch (error) {
+        if (eip1193.didUserRejectRequest(error)) return
+
+        onDisconnect()
         console.error("Failed to sign siww message", error)
         setConnectionError(CONNECTION_ERRORS.INVALID_SIWW_SIGNATURE)
       }
     },
-    [signMessageAndCreateSession, onSuccessSignMessage, setConnectionError],
+    [
+      signMessageAndCreateSession,
+      onSuccessSignMessage,
+      onDisconnect,
+      setConnectionError,
+    ],
   )
 
   const onSuccessConnection = useCallback(
@@ -135,6 +143,13 @@ export default function ConnectWalletButton({
   }, [connector])
 
   const handleButtonClick = () => {
+    // Do not trigger action again when wallet connection is in progress
+    if (showStatuses) return
+
+    onDisconnect()
+    resetConnectionError()
+    resetMessageStatus()
+
     const isInstalled = orangeKit.isWalletInstalled(connector)
 
     if (!isInstalled) {
@@ -143,19 +158,9 @@ export default function ConnectWalletButton({
     }
 
     onClick()
-
-    // Connector still selected and user wants to retry connect action
-    if (isSelected && !isConnected) {
-      handleConnection()
-    }
+    handleConnection()
   }
 
-  useEffect(() => {
-    if (isSelected) handleConnection()
-    // Reset the connection when user selects another connector
-    else onDisconnect()
-  }, [handleConnection, isSelected, onDisconnect])
-
   return (
     <Card
       key={connector.id}

dapp/src/components/ConnectWalletModal/index.tsx

@@ -23,7 +23,6 @@ export function ConnectWalletModalBase({
   const { connectionError, resetConnectionError } = useWalletConnectionError()
 
   const handleButtonOnClick = (connector: OrangeKitConnector) => {
-    resetConnectionError()
     setSelectedConnectorId(connector.id)
   }
 

dapp/src/hooks/useSignMessageAndCreateSession.ts

@@ -4,7 +4,11 @@ import { useCallback } from "react"
 import { useSignMessage } from "wagmi"
 
 function useSignMessageAndCreateSession() {
-  const { signMessageAsync, status: signMessageStatus } = useSignMessage()
+  const {
+    signMessageAsync,
+    status: signMessageStatus,
+    reset: resetMessageStatus,
+  } = useSignMessage()
 
   const signMessageAndCreateSession = useCallback(
     async (connectedConnector: OrangeKitConnector, btcAddress: string) => {
@@ -50,8 +54,9 @@ function useSignMessageAndCreateSession() {
   )
 
   return {
-    signMessageAndCreateSession,
     signMessageStatus,
+    resetMessageStatus,
+    signMessageAndCreateSession,
   }
 }
 export default useSignMessageAndCreateSession