fix: do not display refund target error for transparent ibc withdrawals (#2220)

Author: mateuszjasiuk

apps/namadillo/src/App/Ibc/IbcWithdraw.tsx

@@ -121,20 +121,26 @@ export const IbcWithdraw = (): JSX.Element => {
     connectToChainId(defaultChainId);
   };
 
-  useTransactionEventListener("IbcWithdraw.Success", async (e) => {
-    if (txHash && e.detail.hash === txHash) {
-      setCompletedAt(new Date());
-      // We are clearing the disposable signer only if the transaction was successful on the target chain
-      if (shielded && refundTarget) {
-        await clearDisposableSigner(refundTarget);
+  useTransactionEventListener(
+    ["IbcWithdraw.Success", "ShieldedIbcWithdraw.Success"],
+    async (e) => {
+      if (txHash && e.detail.hash === txHash) {
+        setCompletedAt(new Date());
+        // We are clearing the disposable signer only if the transaction was successful on the target chain
+        if (shielded && refundTarget) {
+          await clearDisposableSigner(refundTarget);
+        }
+        trackEvent(`${shielded ? "Shielded " : ""}IbcWithdraw: tx complete`);
       }
-      trackEvent(`${shielded ? "Shielded " : ""}IbcWithdraw: tx complete`);
     }
-  });
+  );
 
-  useTransactionEventListener("IbcWithdraw.Error", () => {
-    trackEvent(`${shielded ? "Shielded " : ""}IbcWithdraw: tx error`);
-  });
+  useTransactionEventListener(
+    ["IbcWithdraw.Error", "ShieldedIbcWithdraw.Error"],
+    () => {
+      trackEvent(`${shielded ? "Shielded " : ""}IbcWithdraw: tx error`);
+    }
+  );
 
   const redirectToTimeline = (): void => {
     if (txHash) {

apps/namadillo/src/atoms/integrations/services.ts

@@ -397,6 +397,8 @@ export const transactionTypeToEventName = (
       return "TransparentTransfer";
 
     case "ShieldedToIbc":
+      return "ShieldedIbcWithdraw";
+
     case "TransparentToIbc":
       return "IbcWithdraw";
 

apps/namadillo/src/hooks/useTransactionCallbacks.tsx

@@ -72,11 +72,13 @@ export const useTransactionCallback = (): void => {
   useTransactionEventListener("UnshieldingTransfer.Success", onTransferSuccess);
   useTransactionEventListener("IbcTransfer.Success", onTransferSuccess);
   useTransactionEventListener("IbcWithdraw.Success", onTransferSuccess);
+  useTransactionEventListener("ShieldedIbcWithdraw.Success", onTransferSuccess);
 
   useTransactionEventListener("TransparentTransfer.Error", onTransferError);
   useTransactionEventListener("ShieldedTransfer.Error", onTransferError);
   useTransactionEventListener("ShieldingTransfer.Error", onTransferError);
   useTransactionEventListener("UnshieldingTransfer.Error", onTransferError);
   useTransactionEventListener("IbcTransfer.Error", onTransferError);
   useTransactionEventListener("IbcWithdraw.Error", onTransferError);
+  useTransactionEventListener("ShieldedIbcWithdraw.Error", onTransferError);
 };

apps/namadillo/src/hooks/useTransactionNotifications.tsx

@@ -468,7 +468,11 @@ export const useTransactionNotifications = (): void => {
   useTransactionEventListener("UnshieldingTransfer.Success", onTransferSuccess);
 
   useTransactionEventListener(
-    ["IbcTransfer.Success", "IbcWithdraw.Success"],
+    [
+      "IbcTransfer.Success",
+      "IbcWithdraw.Success",
+      "ShieldedIbcWithdraw.Success",
+    ],
     ({ detail: tx }) => {
       if (!tx.hash) return;
       invariant(tx.hash, "Notification error: Invalid Tx hash");
@@ -494,51 +498,57 @@ export const useTransactionNotifications = (): void => {
     }
   );
 
-  useTransactionEventListener("IbcTransfer.Error", ({ detail: tx }) => {
-    if (!tx) return;
+  useTransactionEventListener(
+    ["IbcTransfer.Error", "IbcWithdraw.Error"],
+    ({ detail: tx }) => {
+      if (!tx) return;
 
-    invariant(tx.hash, "Notification error: Invalid Tx provider");
-    const id = createNotificationId([tx.hash]);
-    const title =
-      tx.type === "ShieldedToIbc" || tx.type === "TransparentToIbc" ?
-        "IBC withdraw transaction failed"
-      : "IBC transfer transaction failed";
+      invariant(tx.hash, "Notification error: Invalid Tx provider");
+      const id = createNotificationId([tx.hash]);
+      const title =
+        tx.type === "ShieldedToIbc" || tx.type === "TransparentToIbc" ?
+          "IBC withdraw transaction failed"
+        : "IBC transfer transaction failed";
 
-    dispatchNotification({
-      id,
-      title,
-      description: (
-        <>
-          Your transaction of{" "}
-          <TokenCurrency amount={tx.displayAmount} symbol={tx.asset.symbol} />{" "}
-          has failed.
-        </>
-      ),
-      details: tx.errorMessage,
-      type: "error",
-    });
-  });
+      dispatchNotification({
+        id,
+        title,
+        description: (
+          <>
+            Your transaction of{" "}
+            <TokenCurrency amount={tx.displayAmount} symbol={tx.asset.symbol} />{" "}
+            has failed.
+          </>
+        ),
+        details: tx.errorMessage,
+        type: "error",
+      });
+    }
+  );
 
-  useTransactionEventListener("IbcWithdraw.Error", ({ detail: tx }) => {
-    if (!tx) return;
+  useTransactionEventListener(
+    ["ShieldedIbcWithdraw.Error"],
+    ({ detail: tx }) => {
+      if (!tx) return;
 
-    invariant(tx.hash, "Notification error: Invalid Tx provider");
-    const id = createNotificationId([tx.hash]);
-    const title = "IBC withdraw transaction failed";
+      invariant(tx.hash, "Notification error: Invalid Tx provider");
+      const id = createNotificationId([tx.hash]);
+      const title = "IBC withdraw transaction failed";
 
-    dispatchNotification({
-      id,
-      title,
-      description: (
-        <>
-          Your transaction of{" "}
-          <TokenCurrency amount={tx.displayAmount} symbol={tx.asset.symbol} />{" "}
-          has failed.{" "}
-          <b>Open the Namada extension to access the refund account.</b>
-        </>
-      ),
-      details: tx.errorMessage,
-      type: "error",
-    });
-  });
+      dispatchNotification({
+        id,
+        title,
+        description: (
+          <>
+            Your transaction of{" "}
+            <TokenCurrency amount={tx.displayAmount} symbol={tx.asset.symbol} />{" "}
+            has failed.{" "}
+            <b>Open the Namada extension to access the refund account.</b>
+          </>
+        ),
+        details: tx.errorMessage,
+        type: "error",
+      });
+    }
+  );
 };

apps/namadillo/src/types/events.ts

@@ -68,5 +68,7 @@ declare global {
     "IbcTransfer.Error": CustomEvent<TransferTransactionData>;
     "IbcWithdraw.Success": CustomEvent<TransferTransactionData>;
     "IbcWithdraw.Error": CustomEvent<TransferTransactionData>;
+    "ShieldedIbcWithdraw.Success": CustomEvent<TransferTransactionData>;
+    "ShieldedIbcWithdraw.Error": CustomEvent<TransferTransactionData>;
   }
 }