[Web][UMA-1115] WC bug: retry on failed notification to dApp

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

@@ -1,5 +1,6 @@
 import {
   Button,
+  Card,
   Center,
   Heading,
   Icon,
@@ -13,37 +14,75 @@ import { useDynamicModalContext } from "@umami/components";
 import { useSelectedNetwork } from "@umami/state";
 import { useNavigate } from "react-router-dom";
 
-import { CheckCircleIcon, ExternalLinkIcon } from "../../assets/icons";
+import { AlertTriangleIcon, CheckCircleIcon, ExternalLinkIcon } from "../../assets/icons";
 import { useColor } from "../../styles/useColor";
 import { ModalCloseButton } from "../CloseButton";
 
-export const SuccessStep = ({ hash }: { hash: string }) => {
+export const SuccessStep = ({
+  hash,
+  dAppNotificationError,
+}: {
+  hash: string;
+  dAppNotificationError?: string;
+}) => {
   const network = useSelectedNetwork();
   const tzktUrl = `${network.tzktExplorerUrl}/${hash}`;
   const { onClose } = useDynamicModalContext();
   const navigate = useNavigate();
   const color = useColor();
 
+  type StepData = [React.ElementType, string, string];
+
+  const getIconAndHeader = (): StepData => {
+    if (dAppNotificationError) {
+      return [AlertTriangleIcon, color("orange"), "Operation Submitted but dApp Not Notified"];
+    }
+
+    return [CheckCircleIcon, color("green"), "Operation Submitted"];
+  };
+
+  const Message = () => {
+    const successText =
+      "You can follow this operation's progress in the Operations section. It may take up to 30 seconds to appear.";
+
+    if (dAppNotificationError) {
+      return (
+        <>
+          <Text size="md">
+            Transaction was performed successfully and stored on the blockchain. However, the dApp
+            was not notified.
+          </Text>
+          <Text marginTop="12px" size="md">
+            <strong>Do not retry this operation</strong> — it has already been completed. You may
+            need to reload the dApp page to see the updated status.
+          </Text>
+          <Text marginTop="12px" size="md">
+            <strong>Error on dApp notification:</strong> {dAppNotificationError}
+          </Text>
+          <Text marginTop="12px" size="md">
+            {successText}
+          </Text>
+        </>
+      );
+    } else {
+      return <Text size="md">successText</Text>;
+    }
+  };
+
+  const [icon, iconColor, heading] = getIconAndHeader();
+
   return (
     <ModalContent paddingY="20px">
       <ModalHeader textAlign="center">
         <ModalCloseButton />
         <Center flexDirection="column">
-          <Icon as={CheckCircleIcon} boxSize="24px" marginBottom="18px" color={color("green")} />
-          <Heading marginBottom="12px" size="xl">
-            Operation Submitted
+          <Icon as={icon} boxSize="24px" marginBottom="18px" color={iconColor} />
+          <Heading marginTop="24px" marginBottom="24px" size="xl">
+            {heading}
           </Heading>
-          <Text
-            maxWidth="340px"
-            color={color("700")}
-            fontWeight="400"
-            whiteSpace="break-spaces"
-            size="md"
-          >
-            {
-              "You can follow this operation's progress\n in the Operations section. It may take up to 30 seconds to appear."
-            }
-          </Text>
+          <Card maxWidth="340px" color={color("700")} fontWeight="400" whiteSpace="pre-line">
+            <Message />
+          </Card>
         </Center>
       </ModalHeader>
       <ModalBody gap="24px">

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

@@ -2,6 +2,7 @@ import { type TezosToolkit } from "@taquito/taquito";
 import { useDynamicModalContext } from "@umami/components";
 import { executeOperations, totalFee } from "@umami/core";
 import { useAsyncActionHandler, walletKit } from "@umami/state";
+import { getErrorContext } from "@umami/utils";
 import { formatJsonRpcResult } from "@walletconnect/jsonrpc-utils";
 import { useForm } from "react-hook-form";
 
@@ -35,12 +36,24 @@ export const useSignWithWalletConnect = ({
           tezosToolkit
         );
 
-        const response = formatJsonRpcResult(requestId.id, { hash: opHash, operationHash: opHash });
-        await walletKit.respondSessionRequest({ topic: requestId.topic, response });
+        try {
+          const response = formatJsonRpcResult(requestId.id, {
+            hash: opHash,
+            operationHash: opHash,
+          });
+          await walletKit.respondSessionRequest({ topic: requestId.topic, response });
+        } catch (error: any) {
+          const errorContext = getErrorContext(error);
+          await openWith(
+            <SuccessStep dAppNotificationError={errorContext.description} hash={opHash} />
+          );
+          error.processed = true; // no toast for this error
+          throw error;
+        }
         return openWith(<SuccessStep hash={opHash} />);
       },
       (error: { message: any }) => ({
-        description: `Failed to confirm WalletConnect operation: ${error.message}`,
+        description: `Failed to perform WalletConnect operation: ${error.message}`,
       })
     );