fix: WalletConnect hangs if request modal gets hidden

apps/web/src/components/AccountCard/AccountCard.tsx

@@ -28,7 +28,7 @@ export const AccountCard = () => {
         background={color("100")}
         account={currentAccount}
         id="account-tile"
-        onClick={() => openWith(<AccountSelectorModal />)}
+        onClick={() => openWith(<AccountSelectorModal />, { canBeOverriden: true })}
       >
         <IconButton
           alignSelf="center"

apps/web/src/components/Header/Header.tsx

@@ -62,7 +62,7 @@ export const Header = () => {
         <AccountTile
           background={color("100")}
           account={currentAccount}
-          onClick={() => openWith(<AccountSelectorModal />)}
+          onClick={() => openWith(<AccountSelectorModal />, { canBeOverriden: true })}
           size="xs"
         />
       </SlideFade>

apps/web/src/components/SendFlow/Beacon/useSignWithBeacon.tsx

@@ -37,7 +37,7 @@ export const useSignWithBeacon = ({
         };
         await WalletClient.respond(response);
 
-        return openWith(<SuccessStep hash={opHash} />);
+        return openWith(<SuccessStep hash={opHash} />, { canBeOverriden: true });
       },
       (error: any) => {
         const context = getErrorContext(error);

apps/web/src/components/SendFlow/WalletConnect/useSignWithWalletConnect.tsx

@@ -45,12 +45,13 @@ export const useSignWithWalletConnect = ({
         } catch (error: any) {
           const errorContext = getErrorContext(error);
           await openWith(
-            <SuccessStep dAppNotificationError={errorContext.description} hash={opHash} />
+            <SuccessStep dAppNotificationError={errorContext.description} hash={opHash} />,
+            { canBeOverriden: true }
           );
           error.processed = true; // no toast for this error
           throw error;
         }
-        return openWith(<SuccessStep hash={opHash} />);
+        return openWith(<SuccessStep hash={opHash} />, { canBeOverriden: true });
       },
       (error: { message: any }) => ({
         description: `Failed to perform WalletConnect operation: ${error.message}`,

apps/web/src/components/SendFlow/utils.tsx

@@ -175,7 +175,7 @@ export const useSignPageHelpers = (
         { ...operations, estimates: form.watch("executeParams") },
         tezosToolkit
       );
-      await openWith(<SuccessStep hash={operation.opHash} />);
+      await openWith(<SuccessStep hash={operation.opHash} />, { canBeOverriden: true });
       return operation;
     });
 

apps/web/src/components/WalletConnect/SessionProposalModal.tsx

@@ -43,7 +43,7 @@ export const SessionProposalModal = ({
   const toggleWcPeerListUpdated = useToggleWcPeerListUpdated();
   const color = useColor();
 
-  const { onClose } = useDynamicModalContext();
+  const { goBack } = useDynamicModalContext();
   const { isLoading, handleAsyncAction } = useAsyncActionHandler();
 
   const verifyContext: Verify.Context = proposal.verifyContext;
@@ -82,13 +82,16 @@ export const SessionProposalModal = ({
       });
       console.log("WC session approved", session);
       toggleWcPeerListUpdated();
-      onClose();
+
+      // this modal could hide existing request modal; now when we are done, it's time to bring it back. otherwise, WalletConenct will wait forever
+      goBack();
     });
 
   const onReject = () =>
     handleAsyncAction(async () => {
-      // close immediately assuming that the user wants to get rid of the modal
-      onClose();
+      // Close immediately assuming that the user wants to get rid of the modal.
+      // This modal could hide existing request modal; now when we are done, it's time to bring it back. otherwise, WalletConenct will wait forever
+      goBack();
       console.log("WC session rejected");
       await walletKit.rejectSession({
         id: proposal.id,

apps/web/src/components/WalletConnect/WalletConnectProvider.tsx

@@ -3,7 +3,7 @@ import type EventEmitter from "events";
 import { type NetworkType } from "@airgap/beacon-wallet";
 import { useToast } from "@chakra-ui/react";
 import { type WalletKitTypes } from "@reown/walletkit";
-import { useDynamicModalContext } from "@umami/components";
+import { useDynamicModal, useDynamicModalContext } from "@umami/components";
 import {
   createWalletKit,
   useAsyncActionHandler,
@@ -31,7 +31,8 @@ export const WalletConnectProvider = ({ children }: PropsWithChildren) => {
   const walletKitState = useRef<WalletKitState>(WalletKitState.NOT_INITIALIZED);
   const eventEmitters = useRef<EventEmitter[]>([]);
   const { handleAsyncActionUnsafe } = useAsyncActionHandler();
-  const { openWith } = useDynamicModalContext();
+  const { openWith, isOpen, canBeOverriden } = useDynamicModalContext();
+  const { content } = useDynamicModal();
   const toggleWcPeerListUpdated = useToggleWcPeerListUpdated();
   const toast = useToast();
 
@@ -64,6 +65,12 @@ export const WalletConnectProvider = ({ children }: PropsWithChildren) => {
           );
         }
 
+        if (isOpen && !canBeOverriden) {
+          const errMessage = `Rejected session proposal from dApp ${proposal.params.proposer.metadata.name}. Wallet is busy waiting for user answer for the previous request`;
+          console.error(errMessage, content);
+          throw new WalletConnectError(errMessage, WcErrorCode.WALLET_BUSY, null);
+        }
+
         await openWith(<SessionProposalModal network={network} proposal={proposal} />, {});
       }).catch(async () => {
         // dApp is waiting so we need to notify it
@@ -72,7 +79,7 @@ export const WalletConnectProvider = ({ children }: PropsWithChildren) => {
           reason: getSdkError("UNSUPPORTED_CHAINS"),
         });
       }),
-    [availableNetworks, openWith, handleAsyncActionUnsafe]
+    [handleAsyncActionUnsafe, availableNetworks, isOpen, canBeOverriden, openWith, content]
   );
 
   const onSessionDelete = useCallback(
@@ -98,6 +105,10 @@ export const WalletConnectProvider = ({ children }: PropsWithChildren) => {
         }
 
         const session = activeSessions[event.topic];
+        if (isOpen && !canBeOverriden) {
+          const errMessage = `Rejected request from dApp ${session.peer.metadata.name}. Wallet is busy waiting for user answer for the previous request`;
+          throw new WalletConnectError(errMessage, WcErrorCode.WALLET_BUSY, null);
+        }
         toast({
           description: `Session request from dApp ${session.peer.metadata.name}`,
           status: "info",
@@ -109,7 +120,7 @@ export const WalletConnectProvider = ({ children }: PropsWithChildren) => {
         // dApp is waiting so we need to notify it
         await walletKit.respondSessionRequest({ topic, response });
       }),
-    [handleAsyncActionUnsafe, handleWcRequest, toast]
+    [handleAsyncActionUnsafe, handleWcRequest, isOpen, canBeOverriden, toast]
   );
 
   useEffect(() => {

apps/web/src/components/beacon/PermissionRequestModal.tsx

@@ -43,7 +43,7 @@ export const PermissionRequestModal = ({ request }: { request: PermissionRequest
   const color = useColor();
   const addConnectionToBeaconSlice = useAddBeaconConnection();
   const getAccount = useGetImplicitAccount();
-  const { onClose } = useDynamicModalContext();
+  const { goBack } = useDynamicModalContext();
   const { handleAsyncAction } = useAsyncActionHandler();
   const form = useForm<{ address: string }>({
     mode: "onBlur",
@@ -69,7 +69,7 @@ export const PermissionRequestModal = ({ request }: { request: PermissionRequest
       await WalletClient.respond(response);
 
       addConnectionToBeaconSlice(request.senderId, account.address.pkh, request.network.type);
-    }).finally(onClose);
+    }).finally(goBack);
 
   return (
     <ModalContent>

apps/web/src/components/beacon/useHandleBeaconMessage.tsx

@@ -15,7 +15,7 @@ import {
   useRemoveBeaconPeerBySenderId,
 } from "@umami/state";
 import { type Network } from "@umami/tezos";
-import { BeaconError, getErrorContext } from "@umami/utils";
+import { BeaconError, CustomError, getErrorContext } from "@umami/utils";
 
 import { PermissionRequestModal } from "./PermissionRequestModal";
 import { SignPayloadRequestModal } from "../common/SignPayloadRequestModal";
@@ -34,7 +34,7 @@ import {
  * estimate the fee and open the SingleSignPage only if it succeeds
  */
 export const useHandleBeaconMessage = () => {
-  const { openWith } = useDynamicModalContext();
+  const { openWith, isOpen, canBeOverriden } = useDynamicModalContext();
   const { handleAsyncAction } = useAsyncActionHandler();
   const getAccount = useGetOwnedAccountSafe();
   const getImplicitAccount = useGetImplicitAccount();
@@ -48,18 +48,17 @@ export const useHandleBeaconMessage = () => {
     errorType: BeaconErrorType,
     errorData?: any
   ) => {
-    console.info("[respondWithError]", messageId, errorType, errorData);
     if (messageId !== lastProcessedMessageId) {
       lastProcessedMessageId = messageId;
-      console.info("[respondWithError] sending response", errorType);
+      console.info("[respondWithError] sending response", messageId, errorType, errorData);
       await WalletClient.respond({
         id: messageId,
         type: BeaconMessageType.Error,
         errorType,
         errorData,
       });
     } else {
-      console.info("[respondWithError] response already sent", errorType);
+      console.info("[respondWithError] response already sent", messageId, errorType, errorData);
     }
   };
 
@@ -90,6 +89,12 @@ export const useHandleBeaconMessage = () => {
         let modal;
         let onClose;
 
+        if (isOpen && !canBeOverriden) {
+          const errMessage = `Rejected request from dApp ${message.appMetadata.name}. Wallet is busy waiting for user answer for the previous request`;
+          console.error(errMessage);
+          throw new CustomError(errMessage);
+        }
+
         // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
         switch (message.type) {
           case BeaconMessageType.PermissionRequest: {

packages/components/src/components/DynamicDisclosure/DynamicDisclosure.tsx

@@ -24,13 +24,15 @@ interface DynamicDisclosureContextType {
     props?: ThemingProps & {
       onClose?: () => void | Promise<void>;
       closeOnEsc?: boolean;
+      canBeOverriden?: boolean;
     }
   ) => Promise<void>;
   onClose: () => void;
   isOpen: boolean;
   goBack: () => void;
   goToIndex: (index: number) => void;
   hasPrevious: boolean;
+  canBeOverriden: boolean;
   formValues: Record<string, any>;
   allFormValues: RefObject<Record<string, any>>;
 }
@@ -42,6 +44,7 @@ const defaultContextValue = {
   goToIndex: () => {},
   isOpen: false,
   hasPrevious: false,
+  canBeOverriden: false,
   formValues: {},
   allFormValues: { current: {} },
 };
@@ -64,6 +67,7 @@ type DisclosureStackItem = {
   props: ThemingProps & {
     onClose: () => void | Promise<void>;
     closeOnEsc?: boolean;
+    canBeOverriden?: boolean; // protects WalletConnect and Beacon modals from being overriden
   };
   formValues: Record<string, any>;
 };
@@ -89,6 +93,7 @@ export const useDynamicDisclosure = () => {
     props: ThemingProps & {
       onClose?: () => void | Promise<void>;
       closeOnEsc?: boolean;
+      canBeOverriden?: boolean;
     } = {}
   ) => {
     const onClose = () => {
@@ -146,6 +151,7 @@ export const useDynamicDisclosure = () => {
     formValues: currentItem?.formValues || {},
     hasPrevious: stackRef.current.length > 1,
     allFormValues,
+    canBeOverriden: currentItem?.props.canBeOverriden || false,
   };
 };
 

packages/utils/src/ErrorContext.ts

@@ -70,6 +70,7 @@ export enum WcErrorCode {
   REJECTED_BY_CHAIN = 4009,
   DELEGATE_UNCHANGED = 4010,
   UNKNOWN_ERROR = 4011,
+  WALLET_BUSY = 4012,
 }
 
 // Converts a known L1 error message to a more user-friendly one