feat: add optimistic response for shielded transfers (#1615)

anoma · Feb 10, 2025 · a27e004 · a27e004
1 parent 893f85e
commit a27e004
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 9 deletions.
diff --git a/apps/namadillo/src/App/Transactions/TransactionCard.tsx b/apps/namadillo/src/App/Transactions/TransactionCard.tsx
@@ -48,7 +48,7 @@ export const TransactionCard = ({
   const chainName =
     chainId in availableChains ?
       parseChainInfo(availableChains[chainId].chain)?.pretty_name
-    : "Unknown";
+    : chainId;
 
   return (
     <article

diff --git a/apps/namadillo/src/atoms/balance/atoms.ts b/apps/namadillo/src/atoms/balance/atoms.ts
@@ -107,7 +107,7 @@ export const viewingKeysAtom = atomWithQuery<
 });
 
 export const storageShieldedBalanceAtom = atomWithStorage<
-  Record<Address, { address: string; minDenomAmount: BigNumber }[]>
+  Record<Address, { address: Address; minDenomAmount: string }[]>
 >("namadillo:shieldedBalance", {});
 
 export const shieldedSyncProgress = atom(0);
@@ -168,7 +168,7 @@ export const shieldedBalanceAtom = atomWithQuery((get) => {
 
       const shieldedBalance = response.map(([address, amount]) => ({
         address,
-        minDenomAmount: BigNumber(amount),
+        minDenomAmount: amount,
       }));
 
       const storage = get(storageShieldedBalanceAtom);
@@ -208,7 +208,10 @@ export const namadaShieldedAssetsAtom = atomWithQuery((get) => {
     ...queryDependentFn(
       async () =>
         await mapNamadaAddressesToAssets(
-          shieldedBalance ?? [],
+          shieldedBalance?.map((i) => ({
+            ...i,
+            minDenomAmount: BigNumber(i.minDenomAmount),
+          })) ?? [],
           chainTokensQuery.data!,
           chainParameters.data!.chainId
         ),

diff --git a/apps/namadillo/src/hooks/useOptimisticTransferUpdate.tsx b/apps/namadillo/src/hooks/useOptimisticTransferUpdate.tsx
@@ -0,0 +1,39 @@
+import {
+  storageShieldedBalanceAtom,
+  viewingKeysAtom,
+} from "atoms/balance/atoms";
+import { chainAssetsMapAtom } from "atoms/chain/atoms";
+import BigNumber from "bignumber.js";
+import { useAtomValue, useSetAtom } from "jotai";
+import { Address } from "types";
+import { toBaseAmount } from "utils";
+
+type Amount = string | number | BigNumber;
+
+const sum = (a: Amount, b: Amount): string => {
+  return BigNumber(a).plus(b).toString();
+};
+
+export const useOptimisticTransferUpdate = () => {
+  const setStorageShieldedBalance = useSetAtom(storageShieldedBalanceAtom);
+  const chainAssetsMap = useAtomValue(chainAssetsMapAtom);
+
+  const [viewingKeyData] = useAtomValue(viewingKeysAtom).data ?? [];
+  const viewingKey = viewingKeyData?.key;
+
+  return (token: Address, incrementDisplayAmount: BigNumber) => {
+    const asset = chainAssetsMap[token];
+    if (!viewingKey || !asset) {
+      return;
+    }
+    const baseAmount = toBaseAmount(asset, incrementDisplayAmount);
+    setStorageShieldedBalance((storage) => ({
+      ...storage,
+      [viewingKey]: storage[viewingKey].map((item) =>
+        item.address === token ?
+          { ...item, minDenomAmount: sum(item.minDenomAmount, baseAmount) }
+        : item
+      ),
+    }));
+  };
+};
diff --git a/apps/namadillo/src/hooks/useTransfer.ts b/apps/namadillo/src/hooks/useTransfer.ts
@@ -17,6 +17,7 @@ import BigNumber from "bignumber.js";
 import { useTransaction, UseTransactionOutput } from "hooks/useTransaction";
 import { useAtomValue } from "jotai";
 import { Address, NamadaTransferTxKind } from "types";
+import { useOptimisticTransferUpdate } from "./useOptimisticTransferUpdate";
 
 type useTransferParams = {
   source: Address;
@@ -48,6 +49,8 @@ export const useTransfer = ({
   );
   const pseudoExtendedKey = shieldedAccount?.pseudoExtendedKey ?? "";
 
+  const optimisticTransferUpdate = useOptimisticTransferUpdate();
+
   const commomProps = {
     parsePendingTxNotification: () => ({
       title: "Transfer transaction in progress",
@@ -57,6 +60,14 @@ export const useTransfer = ({
       title: "Transfer transaction failed",
       description: "",
     }),
+    onSuccess: () => {
+      if (target === shieldedAccount?.address) {
+        optimisticTransferUpdate(token, amount);
+      }
+      if (source === shieldedAccount?.address) {
+        optimisticTransferUpdate(token, amount.multipliedBy(-1));
+      }
+    },
   };
 
   const transparentTransaction = useTransaction({

diff --git a/apps/namadillo/src/lib/transactions.ts b/apps/namadillo/src/lib/transactions.ts
@@ -180,12 +180,19 @@ export const createTransferDataFromNamada = (
   }
 
   return propsList
-    .map(({ data }) => {
-      return data.map((props) => {
-        const sourceAddress = "source" in props ? (props.source as string) : "";
+    .map((wrapperProps) => {
+      return wrapperProps.data.map((innerProps) => {
+        const sourceAddress =
+          "source" in wrapperProps ? wrapperProps.source
+          : "source" in innerProps ? innerProps.source
+          : "";
         const destinationAddress =
-          "target" in props ? (props.target as string) : "";
-        const amount = "amount" in props ? props.amount : new BigNumber(0);
+          "target" in wrapperProps ? wrapperProps.target
+          : "target" in innerProps ? innerProps.target
+          : "";
+        const amount =
+          "amount" in innerProps ? innerProps.amount : new BigNumber(0);
+
         return {
           type: txKind,
           currentStep: getTxNextStep(txKind, TransferStep.Sign),