fix: use tx wrapper hashes in history and notification toasts for ledger (#2129)

Author: mateuszjasiuk

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

@@ -272,7 +272,8 @@ export const IbcWithdraw = (): JSX.Element => {
     invariant(props, "Invalid transaction data");
 
     const transferTransaction: IbcTransferTransactionData = {
-      hash: tx.encodedTxData.txs[0].innerTxHashes[0].toLowerCase(),
+      hash: tx.encodedTxData.txs[0].hash,
+      innerHash: tx.encodedTxData.txs[0].innerTxHashes[0].toLowerCase(),
       currentStep: TransferStep.WaitingConfirmation,
       rpc: "",
       type: shielded ? "ShieldedToIbc" : "TransparentToIbc",

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

@@ -72,7 +72,7 @@ export const StakingRewards = (): JSX.Element => {
     params: rewardsToClaim,
     eventType: ["ClaimRewards", "Bond"],
     parsePendingTxNotification: () => ({
-      title: "Claim rewards transaction is in progress",
+      title: "Claim and stake rewards transaction is in progress",
       description: (
         <>
           Your rewards claim is being processed and will be staked to the same

apps/namadillo/src/App/Transactions/TransactionCard.tsx

@@ -39,7 +39,7 @@ export function getToken(
   txn: Tx["tx"],
   nativeToken: string
 ): string | undefined {
-  if (txn?.kind === "bond") return nativeToken;
+  if (txn?.kind === "bond" || txn?.kind === "unbond") return nativeToken;
   let parsed;
   try {
     parsed = txn?.data ? JSON.parse(txn.data) : undefined;
@@ -62,7 +62,7 @@ export function getToken(
   return undefined;
 }
 
-const getBondTransactionInfo = (
+const getBondOrUnbondTransactionInfo = (
   tx: Tx["tx"]
 ): { amount: BigNumber; sender?: string; receiver?: string } | undefined => {
   if (!tx?.data) return undefined;
@@ -118,10 +118,12 @@ export const TransactionCard = ({
   const token = getToken(transaction, nativeToken ?? "");
   const chainAssetsMap = useAtomValue(chainAssetsMapAtom);
   const asset = token ? chainAssetsMap[token] : undefined;
-  const isBondingTransaction = transactionTopLevel?.tx?.kind === "bond";
+  const isBondingOrUnbondingTransaction = ["bond", "unbond"].includes(
+    transactionTopLevel?.tx?.kind ?? ""
+  );
   const txnInfo =
-    isBondingTransaction ?
-      getBondTransactionInfo(transaction)
+    isBondingOrUnbondingTransaction ?
+      getBondOrUnbondTransactionInfo(transaction)
     : getTransactionInfo(transaction);
   const receiver = txnInfo?.receiver;
   const sender = txnInfo?.sender;
@@ -134,7 +136,8 @@ export const TransactionCard = ({
 
   const getBaseAmount = (): BigNumber | undefined => {
     if (asset && txnInfo?.amount) {
-      if (isBondingTransaction) return toDisplayAmount(asset, txnInfo.amount);
+      if (isBondingOrUnbondingTransaction)
+        return toDisplayAmount(asset, txnInfo.amount);
       if (isNamadaAsset(asset)) return txnInfo.amount;
       return toDisplayAmount(asset, txnInfo.amount);
     } else return undefined;
@@ -154,6 +157,7 @@ export const TransactionCard = ({
     if (isReceived) return "Receive";
     if (kind.startsWith("ibc")) return "IBC Transfer";
     if (kind === "bond") return "Stake";
+    if (kind === "unbond") return "Unstake";
     if (kind === "claimRewards") return "Claim Rewards";
     if (kind === "transparentTransfer") return "Transparent Transfer";
     if (kind === "shieldingTransfer") return "Shielding Transfer";
@@ -171,7 +175,9 @@ export const TransactionCard = ({
           "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 items-center my-1 font-semibold",
           "gap-5 bg-neutral-800 rounded-sm px-5 text-white border border-transparent",
           "transition-colors duration-200 hover:border-neutral-500",
-          isBondingTransaction && validator?.imageUrl ? "py-3" : "py-5"
+          isBondingOrUnbondingTransaction && validator?.imageUrl ?
+            "py-3"
+          : "py-5"
         )
       )}
     >
@@ -205,7 +211,7 @@ export const TransactionCard = ({
             <div className="relative group/tooltip">
               <CopyToClipboardControl
                 className="ml-1.5 text-neutral-400"
-                value={transaction?.txId ?? ""}
+                value={transaction?.wrapperId ?? ""}
               />
               <Tooltip position="right" className="p-2 -mr-3 w-[150px] z-10">
                 Copy transaction hash
@@ -239,7 +245,7 @@ export const TransactionCard = ({
         />
       </div>
 
-      {!isBondingTransaction && (
+      {!isBondingOrUnbondingTransaction && (
         <div className="flex flex-col">
           <h4 className={isShieldedAddress(sender ?? "") ? "text-yellow" : ""}>
             From
@@ -260,14 +266,14 @@ export const TransactionCard = ({
 
       <div className="flex flex-col">
         <h4 className={isShieldedAddress(receiver ?? "") ? "text-yellow" : ""}>
-          {isBondingTransaction ? "Validator" : "To"}
+          {isBondingOrUnbondingTransaction ? "Validator" : "To"}
         </h4>
         <h4 className={isShieldedAddress(receiver ?? "") ? "text-yellow" : ""}>
           {isShieldedAddress(receiver ?? "") ?
             <span className="flex items-center gap-1">
               <FaLock className="w-4 h-4" /> Shielded
             </span>
-          : isBondingTransaction ?
+          : isBondingOrUnbondingTransaction ?
             validator?.imageUrl ?
               <img
                 src={validator?.imageUrl}

apps/namadillo/src/App/Transactions/TransactionHistory.tsx

@@ -28,6 +28,7 @@ export const transferKindOptions = [
   "ibcUnshieldingTransfer",
   "ibcShieldedTransfer",
   "bond",
+  "unbond",
   "received",
 ];
 
@@ -195,6 +196,11 @@ export const TransactionHistory = (): JSX.Element => {
                     value: "Stake",
                     ariaLabel: "Stake",
                   },
+                  {
+                    id: "unbond",
+                    value: "Unstake",
+                    ariaLabel: "Unstake",
+                  },
                 ]}
               />
               <div className="flex items-center bg-yellow/10 border border-yellow/30 rounded-sm px-3 py-2 mr-3 text-xs text-yellow-600 dark:text-yellow-400">

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

@@ -272,7 +272,8 @@ export const updateIbcWithdrawalStatus = async (
   if (!tx.hash) throw new Error("Transaction hash not defined");
 
   const api = getIndexerApi();
-  const response = await api.apiV1IbcTxIdStatusGet(tx.hash);
+  // We have to pass inner hash here to get specific transaction status
+  const response = await api.apiV1IbcTxIdStatusGet(tx.innerHash);
   const { status } = response.data;
 
   if (status === "success") {

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

@@ -1,11 +1,8 @@
 export const notificationIdSeparator = ";";
 import { TxProps } from "@namada/types";
 
-export const createNotificationId = (
-  data?: TxProps["hash"] | TxProps["hash"][]
-): string => {
+export const createNotificationId = (data?: TxProps["hash"][]): string => {
   if (!data) return Date.now().toString();
-  if (typeof data === "string") return data;
   if (Array.isArray(data)) return data.join(notificationIdSeparator);
   return data;
 };

apps/namadillo/src/hooks/useIbcTransaction.tsx

@@ -113,7 +113,7 @@ export const useIbcTransaction = ({
   const dispatchPendingTxNotification = (tx: TransferTransactionData): void => {
     invariant(tx.hash, "Error: Transaction hash not provided");
     dispatchNotification({
-      id: createNotificationId(tx.hash),
+      id: createNotificationId([tx.hash]),
       title: "IBC transfer transaction in progress",
       description: (
         <>
@@ -129,7 +129,7 @@ export const useIbcTransaction = ({
   const dispatchErrorTxNotification = (error: unknown): void => {
     if (!txHash) return;
     dispatchNotification({
-      id: createNotificationId(txHash),
+      id: createNotificationId([txHash]),
       title: "IBC transfer transaction failed",
       description: "",
       details: error instanceof Error ? error.message : undefined,

apps/namadillo/src/hooks/useTransaction.tsx

@@ -61,6 +61,14 @@ export type UseTransactionOutput<T> = {
   unknown
 >;
 
+const getNotificationId = <T,>(tx: TransactionPair<T>): string => {
+  const notificationId = createNotificationId(
+    tx.encodedTxData.txs.map((tx) => tx.hash)
+  );
+
+  return notificationId;
+};
+
 export const useTransaction = <T,>({
   params,
   createTxAtom,
@@ -101,10 +109,8 @@ export const useTransaction = <T,>({
     tx: TransactionPair<T>,
     notification: PartialNotification
   ): void => {
-    const notificationId =
-      tx.encodedTxData.type === "buildIbcTransfer" ?
-        createNotificationId(tx.encodedTxData.txs[0].innerTxHashes)
-      : createNotificationId(tx.encodedTxData.txs[0].hash);
+    const notificationId = getNotificationId(tx);
+
     dispatchNotification({
       ...notification,
       id: notificationId,
@@ -118,10 +124,7 @@ export const useTransaction = <T,>({
     notification: PartialNotification,
     tx: TransactionPair<T>
   ): void => {
-    const notificationId =
-      tx.encodedTxData.type === "buildIbcTransfer" ?
-        createNotificationId(tx.encodedTxData.txs[0].innerTxHashes)
-      : createNotificationId(tx.encodedTxData.txs[0].hash);
+    const notificationId = getNotificationId(tx);
     dispatchNotification({
       ...notification,
       id: notificationId,

apps/namadillo/src/hooks/useTransactionNotifications.tsx

@@ -28,7 +28,7 @@ const parseTxsData = <T extends TxWithAmount>(
   data: T[]
 ): { id: string; total: BigNumber } => {
   const id = createNotificationId(
-    Array.isArray(tx) ? tx.map((t) => t.hash) : tx.hash
+    Array.isArray(tx) ? tx.map((t) => t.hash) : [tx.hash]
   );
   const total = getTotalAmountFromTransactionList(data);
   return { total, id };
@@ -414,7 +414,7 @@ export const useTransactionNotifications = (): void => {
     detail: tx,
   }: CustomEvent<TransferTransactionData>): void => {
     if (!tx.hash) return;
-    const id = createNotificationId(tx.hash);
+    const id = createNotificationId([tx.hash]);
     const storedTx = searchAllStoredTxByHash(tx.hash);
     dispatchNotification({
       id,
@@ -443,7 +443,7 @@ export const useTransactionNotifications = (): void => {
     detail: tx,
   }: CustomEvent<TransferTransactionData>): void => {
     if (!tx.hash) return;
-    const id = createNotificationId(tx.hash);
+    const id = createNotificationId([tx.hash]);
     const storedTx = searchAllStoredTxByHash(tx.hash);
     dispatchNotification({
       id,
@@ -473,7 +473,7 @@ export const useTransactionNotifications = (): void => {
       if (!tx.hash) return;
       invariant(tx.hash, "Notification error: Invalid Tx hash");
 
-      const id = createNotificationId(tx.hash);
+      const id = createNotificationId([tx.hash]);
       const title =
         tx.type === "ShieldedToIbc" || tx.type === "TransparentToIbc" ?
           "IBC withdraw transaction succeeded"
@@ -498,7 +498,7 @@ export const useTransactionNotifications = (): void => {
     if (!tx) return;
 
     invariant(tx.hash, "Notification error: Invalid Tx provider");
-    const id = createNotificationId(tx.hash);
+    const id = createNotificationId([tx.hash]);
     const title =
       tx.type === "ShieldedToIbc" || tx.type === "TransparentToIbc" ?
         "IBC withdraw transaction failed"
@@ -523,7 +523,7 @@ export const useTransactionNotifications = (): void => {
     if (!tx) return;
 
     invariant(tx.hash, "Notification error: Invalid Tx provider");
-    const id = createNotificationId(tx.hash);
+    const id = createNotificationId([tx.hash]);
     const title = "IBC withdraw transaction failed";
 
     dispatchNotification({

apps/namadillo/src/lib/query.ts

@@ -27,10 +27,9 @@ export type TransactionPair<T> = {
 
 export type EncodedTxData<T> = {
   type: string;
-  txs: TxProps[] &
-    {
-      innerTxHashes: string[];
-    }[];
+  txs: (TxProps & {
+    innerTxHashes: string[];
+  })[];
   wrapperTxProps: WrapperTxProps;
   meta?: {
     props: T[];