feat: listen for the transfer success event

apps/namadillo/src/App/Common/Timeline.tsx

@@ -15,42 +15,25 @@ type TransactionTimelineProps = {
   complete?: boolean;
 };
 
-type DisabledProps = {
-  disabled: boolean;
-};
-
-const StepConnector = ({ disabled }: DisabledProps): JSX.Element => (
-  <i
-    className={clsx(
-      "h-10 w-px bg-current mb-3",
-      clsx({ "opacity-20": disabled })
-    )}
-  />
+const StepConnector = (): JSX.Element => (
+  <i className="h-10 w-px bg-current mb-3" />
 );
 
-const StepBullet = ({ disabled }: DisabledProps): JSX.Element => (
-  <i
-    className={clsx(
-      "w-4 aspect-square rounded-full bg-current",
-      clsx({ "opacity-20": disabled })
-    )}
-  />
+const StepBullet = (): JSX.Element => (
+  <i className="w-4 aspect-square rounded-full bg-current" />
 );
 
 const StepContent = ({
   children,
   isCurrentStep,
   hasError,
-  disabled,
 }: React.PropsWithChildren & {
   isCurrentStep: boolean;
   hasError: boolean;
-  disabled: boolean;
 }): JSX.Element => (
   <div
     className={clsx("text-center", {
       "animate-pulse": isCurrentStep && !hasError,
-      "opacity-20": disabled,
     })}
   >
     {children}
@@ -206,19 +189,15 @@ export const Timeline = ({
               className={twMerge(
                 clsx(
                   "flex flex-col gap-1 items-center",
-                  "text-center transition-all duration-150"
+                  "text-center transition-all duration-150",
+                  { "opacity-20": index > currentStepIndex }
                 )
               )}
             >
-              {index > 0 && (
-                <StepConnector disabled={index > currentStepIndex} />
-              )}
-              {step.bullet && (
-                <StepBullet disabled={index > currentStepIndex} />
-              )}
+              {index > 0 && <StepConnector />}
+              {step.bullet && <StepBullet />}
               <StepContent
                 isCurrentStep={index === currentStepIndex}
-                disabled={index > currentStepIndex}
                 hasError={!!hasError}
               >
                 {step.children}

apps/namadillo/src/hooks/useTransactionCallbacks.tsx

@@ -35,9 +35,7 @@ export const useTransactionCallback = (): void => {
   useTransactionEventListener("Unbond.Success", onBalanceUpdate);
   useTransactionEventListener("Withdraw.Success", onBalanceUpdate);
   useTransactionEventListener("Redelegate.Success", onBalanceUpdate);
-  useTransactionEventListener("ClaimRewards.Success", onBalanceUpdate, [
-    account?.address,
-  ]);
+  useTransactionEventListener("ClaimRewards.Success", onBalanceUpdate);
 
   useTransactionEventListener("VoteProposal.Success", () => {
     shouldUpdateProposal(true);
@@ -56,18 +54,10 @@ export const useTransactionCallback = (): void => {
       "UnshieldingTransfer.Success",
     ],
     (e) => {
-      e.detail.data.forEach((dataList) => {
-        dataList.data.forEach((props) => {
-          const sourceAddress = "source" in props ? props.source : "";
-          sourceAddress &&
-            changeTransaction(
-              e.detail.tx.hash,
-              {
-                status: "success",
-                currentStep: TransferStep.Complete,
-              },
-              sourceAddress
-            );
+      e.detail.tx.forEach(({ hash }) => {
+        changeTransaction(hash, {
+          status: "success",
+          currentStep: TransferStep.Complete,
         });
       });
     }

apps/namadillo/src/hooks/useTransactionNotifications.tsx

@@ -28,7 +28,7 @@ const getTotalAmountFromTransactionList = (txs: TxWithAmount[]): BigNumber =>
   }, new BigNumber(0));
 
 const parseTxsData = <T extends TxWithAmount>(
-  tx: TxProps,
+  tx: TxProps | TxProps[],
   data: T[]
 ): { id: string; total: BigNumber } => {
   const id = createNotificationId(tx);
@@ -357,11 +357,9 @@ export const useTransactionNotifications = (): void => {
       "UnshieldingTransfer.Error",
     ],
     (e) => {
-      const tx = e.detail.tx;
-      const data: TxWithAmount[] = e.detail.data[0].data;
-      const { id } = parseTxsData(tx, data);
+      const id = createNotificationId(e.detail.tx);
       clearPendingNotifications(id);
-      const storedTx = searchAllStoredTxByHash(tx.hash);
+      const storedTx = searchAllStoredTxByHash(e.detail.tx[0].hash);
       dispatchNotification({
         id,
         type: "error",
@@ -391,11 +389,10 @@ export const useTransactionNotifications = (): void => {
       "UnshieldingTransfer.Success",
     ],
     (e) => {
-      const tx = e.detail.tx;
-      const data: TxWithAmount[] = e.detail.data[0].data;
-      const { id } = parseTxsData(tx, data);
+      const id = createNotificationId(e.detail.tx);
       clearPendingNotifications(id);
-      const storedTx = searchAllStoredTxByHash(tx.hash);
+      clearPendingNotifications(id);
+      const storedTx = searchAllStoredTxByHash(e.detail.tx[0].hash);
       dispatchNotification({
         id,
         title: "Transfer transaction succeeded",

apps/namadillo/src/types.ts

@@ -235,22 +235,25 @@ export enum TransferStep {
 // Defines the steps in the Namada <> Namada transfer progress for tracking transaction stages.
 export const namadaTransferStages = {
   TransparentToShielded: [
-    TransferStep.Sign,
     TransferStep.ZkProof,
+    TransferStep.Sign,
     TransferStep.TransparentToShielded,
     TransferStep.Complete,
   ] as const,
   ShieldedToTransparent: [
+    TransferStep.ZkProof,
     TransferStep.Sign,
     TransferStep.ShieldedToTransparent,
     TransferStep.Complete,
   ] as const,
   ShieldedToShielded: [
+    TransferStep.ZkProof,
     TransferStep.Sign,
     TransferStep.ShieldedToShielded,
     TransferStep.Complete,
   ] as const,
   TransparentToTransparent: [
+    TransferStep.ZkProof,
     TransferStep.Sign,
     TransferStep.TransparentToTransparent,
     TransferStep.Complete,

apps/namadillo/src/types/events.ts

@@ -32,7 +32,7 @@ export type TransactionEventHandlers = {
 
 export interface EventData<T> extends CustomEvent {
   detail: {
-    tx: TxProps;
+    tx: TxProps[];
     data: T[];
     // If event is for PartialSuccess, use the following:
     successData?: T[];

apps/namadillo/src/utils/index.ts

@@ -3,8 +3,9 @@ import { ProposalStatus, ProposalTypeString } from "@namada/types";
 import { localnetConfigAtom } from "atoms/integrations/atoms";
 import BigNumber from "bignumber.js";
 import { getDefaultStore } from "jotai";
+import { isEqual } from "lodash";
 import namadaAssets from "namada-chain-registry/namada/assetlist.json";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 export const proposalStatusToString = (status: ProposalStatus): string => {
   const statusText: Record<ProposalStatus, string> = {
@@ -38,32 +39,46 @@ export const proposalIdToString = (proposalId: bigint): string =>
 
 export const useTransactionEventListener = <T extends keyof WindowEventMap>(
   event: T,
-  handler: (this: Window, ev: WindowEventMap[T]) => void,
-  deps: React.DependencyList = []
+  handler: (event: WindowEventMap[T]) => void
 ): void => {
+  // `handlerRef` is useful to avoid recreating the listener every time
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+
   useEffect(() => {
-    window.addEventListener(event, handler);
+    const callback: typeof handler = (event) => handlerRef.current(event);
+    window.addEventListener(event, callback);
     return () => {
-      window.removeEventListener(event, handler);
+      window.removeEventListener(event, callback);
     };
-  }, deps);
+  }, [event]);
 };
 
 export const useTransactionEventListListener = <T extends keyof WindowEventMap>(
   events: T[],
-  handler: (this: Window, ev: WindowEventMap[T]) => void,
-  deps: React.DependencyList = []
+  handler: (event: WindowEventMap[T]) => void
 ): void => {
+  // `eventsRef` and `handlerRef` are useful to avoid recreating the listener every time
+  const eventsRef = useRef(events);
+  if (!isEqual(events, eventsRef.current)) {
+    eventsRef.current = events;
+  }
+  const eventsValue = eventsRef.current;
+
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
+
   useEffect(() => {
-    events.forEach((event) => {
-      window.addEventListener(event, handler);
+    const callback: typeof handler = (event) => handlerRef.current(event);
+    eventsValue.forEach((event) => {
+      window.addEventListener(event, callback);
     });
     return () => {
-      events.forEach((event) => {
-        window.removeEventListener(event, handler);
+      eventsValue.forEach((event) => {
+        window.removeEventListener(event, callback);
       });
     };
-  }, deps);
+  }, [eventsValue]);
 };
 
 export const sumBigNumberArray = (numbers: BigNumber[]): BigNumber => {