feat: Improvements on IBC withdrawal

apps/namadillo/src/App/Governance/SubmitVote.tsx

@@ -23,13 +23,13 @@ import clsx from "clsx";
 import { useProposalIdParam } from "hooks";
 import invariant from "invariant";
 import { useAtomValue, useSetAtom } from "jotai";
-import { TransactionPair, broadcastTx } from "lib/query";
+import { TransactionPair, broadcastTxWithEvents } from "lib/query";
 import { useEffect, useState } from "react";
 import { IoClose } from "react-icons/io5";
 import { useNavigate } from "react-router-dom";
 
 const dispatchVoteTx = (tx: TransactionPair<VoteProposalProps>): void => {
-  broadcastTx(
+  broadcastTxWithEvents(
     tx.encodedTxData,
     tx.signedTxs,
     tx.encodedTxData.meta?.props,

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

@@ -34,7 +34,7 @@ import {
   TransferStep,
   TransferTransactionData,
 } from "types";
-import { toBaseAmount } from "utils";
+import { toBaseAmount, toDisplayAmount } from "utils";
 import { IbcTopHeader } from "./IbcTopHeader";
 
 const defaultChainId = "cosmoshub-4";
@@ -61,6 +61,11 @@ export const IbcWithdraw: React.FC = () => {
     selectedAssetAddress
   );
 
+  const selectedAsset = mapUndefined(
+    (address) => availableAssets?.[address],
+    selectedAssetAddress
+  );
+
   const { data: gasConfig } = useAtomValue(
     defaultGasConfigFamily(["IbcTransfer"])
   );
@@ -90,10 +95,15 @@ export const IbcWithdraw: React.FC = () => {
     setSourceChannel(ibcChannels?.namadaChannel || "");
   }, [ibcChannels]);
 
-  const { execute: performWithdraw, isPending } = useTransaction({
+  const {
+    execute: performWithdraw,
+    isPending,
+    isSuccess,
+  } = useTransaction({
     eventType: "IbcTransfer",
     createTxAtom: createIbcTxAtom,
     params: [],
+    gasConfig,
     parsePendingTxNotification: () => ({
       title: "IBC withdrawal transaction in progress",
       description: "Your IBC transaction is being processed",
@@ -102,6 +112,29 @@ export const IbcWithdraw: React.FC = () => {
       title: "IBC withdrawal failed",
       description: "",
     }),
+    onSuccess: (tx) => {
+      const props = tx.encodedTxData.meta?.props[0];
+      invariant(props, "EncodedTxData not provided");
+      invariant(selectedAsset, "Selected asset is not defined");
+      invariant(chainId, "Chain ID is not provided");
+
+      const displayAmount = toDisplayAmount(
+        selectedAsset.asset,
+        props.amountInBaseDenom
+      );
+
+      const transferTransaction = storeTransferTransaction(
+        tx,
+        displayAmount,
+        chainId,
+        selectedAsset.asset
+      );
+
+      redirectToTimeline(transferTransaction);
+    },
+    onError: (err) => {
+      setGeneralErrorMessage(String(err));
+    },
   });
 
   const storeTransferTransaction = (
@@ -147,49 +180,26 @@ export const IbcWithdraw: React.FC = () => {
     destinationAddress,
     memo,
   }: OnSubmitTransferParams): Promise<void> => {
-    try {
-      const selectedAsset = mapUndefined(
-        (address) => availableAssets?.[address],
-        selectedAssetAddress
-      );
-
-      invariant(selectedAsset, "No asset is selected");
-      invariant(sourceChannel, "No channel ID is set");
-      invariant(chainId, "No chain is selected");
-      invariant(gasConfig, "No gas config");
-      invariant(keplrAddress, "No address is selected");
+    invariant(selectedAsset, "No asset is selected");
+    invariant(sourceChannel, "No channel ID is set");
+    invariant(chainId, "No chain is selected");
+    invariant(gasConfig, "No gas config");
+    invariant(keplrAddress, "No address is selected");
 
-      const amountInBaseDenom = toBaseAmount(
-        selectedAsset.asset,
-        displayAmount
-      );
-
-      const tx = await performWithdraw({
-        params: [
-          {
-            amountInBaseDenom,
-            channelId: sourceChannel.trim(),
-            portId: "transfer",
-            token: selectedAsset.originalAddress,
-            source: keplrAddress,
-            receiver: destinationAddress,
-            memo,
-          },
-        ],
-      });
-
-      if (tx) {
-        const transferTransaction = storeTransferTransaction(
-          tx,
-          displayAmount,
-          chainId,
-          selectedAsset.asset
-        );
-        redirectToTimeline(transferTransaction);
-      }
-    } catch (err) {
-      setGeneralErrorMessage(String(err));
-    }
+    const amountInBaseDenom = toBaseAmount(selectedAsset.asset, displayAmount);
+    await performWithdraw({
+      params: [
+        {
+          amountInBaseDenom,
+          channelId: sourceChannel.trim(),
+          portId: "transfer",
+          token: selectedAsset.originalAddress,
+          source: keplrAddress,
+          receiver: destinationAddress,
+          memo,
+        },
+      ],
+    });
   };
 
   const requiresIbcChannels = !isLoadingIbcChannels && unknownIbcChannels;
@@ -234,7 +244,10 @@ export const IbcWithdraw: React.FC = () => {
           onChangeChain,
           isShielded: false,
         }}
-        isSubmitting={isPending}
+        isSubmitting={
+          isPending ||
+          isSuccess /* should redirect to timeline to wait for confirmation */
+        }
         isIbcTransfer={true}
         requiresIbcChannels={requiresIbcChannels}
         ibcOptions={{

apps/namadillo/src/App/Staking/IncrementBonding.tsx

@@ -84,7 +84,7 @@ const IncrementBonding = (): JSX.Element => {
       title: "Staking transaction failed",
       description: "",
     }),
-    onSuccess: () => {
+    onBroadcasted: () => {
       onCloseModal();
     },
   });

apps/namadillo/src/App/Staking/ReDelegate.tsx

@@ -69,7 +69,7 @@ export const ReDelegate = (): JSX.Element => {
       title: "Staking redelegation failed",
       description: "",
     }),
-    onSuccess: () => {
+    onBroadcasted: () => {
       onCloseModal();
     },
   });

apps/namadillo/src/App/Staking/StakingRewards.tsx

@@ -54,7 +54,7 @@ export const StakingRewards = (): JSX.Element => {
       title: "Claim rewards transaction is in progress",
       description: <>Your rewards claim is being processed</>,
     }),
-    onSuccess: () => {
+    onBroadcasted: () => {
       onCloseModal();
     },
   });
@@ -76,7 +76,7 @@ export const StakingRewards = (): JSX.Element => {
         </>
       ),
     }),
-    onSuccess: () => {
+    onBroadcasted: () => {
       onCloseModal();
     },
   });

apps/namadillo/src/App/Staking/Unstake.tsx

@@ -71,7 +71,7 @@ export const Unstake = (): JSX.Element => {
       title: "Unstake transaction failed",
       description: "",
     }),
-    onSuccess: () => {
+    onBroadcasted: () => {
       onCloseModal();
     },
   });

apps/namadillo/src/atoms/notifications/functions.ts

@@ -1,13 +1,13 @@
 import { TxProps } from "@namada/types";
 
-export const createNotificationId = (data?: TxProps | TxProps[]): string => {
+export const createNotificationId = (
+  data?: TxProps | TxProps[] | string
+): string => {
   if (!data) return Date.now().toString();
+  if (typeof data === "string") return data;
   if (Array.isArray(data)) {
     return data.map((tx) => tx.hash).join(";");
   }
   return data.hash;
 };
 
-export const createIbcNotificationId = (hash: string): string => {
-  return `ibc-transfer-${hash}`;
-};

apps/namadillo/src/hooks/useIbcTransaction.tsx

@@ -10,7 +10,7 @@ import {
   queryAndStoreRpc,
 } from "atoms/integrations";
 import {
-  createIbcNotificationId,
+  createNotificationId,
   dispatchToastNotificationAtom,
 } from "atoms/notifications";
 import BigNumber from "bignumber.js";
@@ -101,7 +101,7 @@ export const useIbcTransaction = ({
   const dispatchPendingTxNotification = (tx: TransferTransactionData): void => {
     invariant(tx.hash, "Error: Transaction hash not provided");
     dispatchNotification({
-      id: createIbcNotificationId(tx.hash),
+      id: createNotificationId(tx.hash),
       title: "IBC transfer transaction in progress",
       description: (
         <>
@@ -117,7 +117,7 @@ export const useIbcTransaction = ({
   const dispatchErrorTxNotification = (error: unknown): void => {
     if (!txHash) return;
     dispatchNotification({
-      id: createIbcNotificationId(txHash),
+      id: createNotificationId(txHash),
       title: "IBC transfer transaction failed",
       description: "",
       details: error instanceof Error ? error.message : undefined,