feat: pick gas fee token with enough balance (#2206)

Author: mateuszjasiuk

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

@@ -16,7 +16,6 @@ import { useAtomValue } from "jotai";
 import { IoClose } from "react-icons/io5";
 import { twMerge } from "tailwind-merge";
 import { Asset, GasConfig, NamadaAsset } from "types";
-import { toDisplayAmount } from "utils";
 import { getDisplayGasFee } from "utils/gas";
 import { FiatCurrency } from "./FiatCurrency";
 import { TokenCard } from "./TokenCard";
@@ -122,17 +121,10 @@ export const GasFeeModal = ({
 
   const findUserBalanceByTokenAddress = (tokenAddres: string): BigNumber => {
     // TODO: we need to refactor userShieldedBalances to return Balance[] type instead
-    const balances =
-      isShielded ?
-        shieldedAmount.data?.map((balance) => ({
-          minDenomAmount: balance.minDenomAmount,
-          tokenAddress: balance.address,
-        }))
-      : transparentAmount.data;
+    const balances = isShielded ? shieldedAmount.data : transparentAmount.data;
 
-    return new BigNumber(
-      balances?.find((token) => token.tokenAddress === tokenAddres)
-        ?.minDenomAmount || "0"
+    return BigNumber(
+      balances?.find((b) => b.tokenAddress === tokenAddres)?.amount || "0"
     );
   };
 
@@ -256,9 +248,8 @@ export const GasFeeModal = ({
                   gasToken: item.token,
                 });
 
-                const availableAmount = toDisplayAmount(
-                  asset,
-                  findUserBalanceByTokenAddress(item.token)
+                const availableAmount = findUserBalanceByTokenAddress(
+                  item.token
                 );
 
                 return {

apps/namadillo/src/atoms/accounts/atoms.ts

@@ -1,4 +1,3 @@
-import { Balance } from "@namada/indexer-client";
 import {
   AccountType,
   GenDisposableSignerResponse,
@@ -7,13 +6,15 @@ import {
 import { indexerApiAtom } from "atoms/api";
 import { nativeTokenAddressAtom } from "atoms/chain";
 import { shouldUpdateBalanceAtom } from "atoms/etc";
+import { namadaRegistryChainAssetsMapAtom } from "atoms/integrations";
 import { namadaExtensionConnectedAtom } from "atoms/settings";
 import { queryDependentFn } from "atoms/utils";
 import BigNumber from "bignumber.js";
 import { NamadaKeychain } from "hooks/useNamadaKeychain";
 import { atom } from "jotai";
 import { atomWithMutation, atomWithQuery } from "jotai-tanstack-query";
-import { namadaAsset, toDisplayAmount } from "utils";
+import { Address } from "types";
+import { toDisplayAmount } from "utils";
 import {
   fetchAccountBalance,
   fetchAccounts,
@@ -106,9 +107,9 @@ export const accountBalanceAtom = atomWithQuery<BigNumber>((get) => {
     ...queryDependentFn(async (): Promise<BigNumber> => {
       const balance = transparentBalanceQuery.data
         ?.filter(({ tokenAddress: ta }) => ta === tokenAddress.data)
-        .map(({ tokenAddress, minDenomAmount }) => ({
+        .map(({ tokenAddress, amount }) => ({
           token: tokenAddress,
-          amount: toDisplayAmount(namadaAsset(), new BigNumber(minDenomAmount)),
+          amount,
         }))
         .at(0);
       return balance ? BigNumber(balance.amount) : BigNumber(0);
@@ -136,18 +137,35 @@ export const disposableSignerAtom = atomWithQuery<GenDisposableSignerResponse>(
   }
 );
 
-export const transparentBalanceAtom = atomWithQuery<Balance[]>((get) => {
+export const transparentBalanceAtom = atomWithQuery<
+  { tokenAddress: Address; amount: BigNumber }[]
+>((get) => {
   const enablePolling = get(shouldUpdateBalanceAtom);
   const api = get(indexerApiAtom);
   const defaultAccountQuery = get(defaultAccountAtom);
+  const assetsMapAtom = get(namadaRegistryChainAssetsMapAtom);
 
   const account = defaultAccountQuery.data;
+  const assetsMap = assetsMapAtom.data;
 
   return {
     refetchInterval: enablePolling ? 1000 : false,
     queryKey: ["transparent-balance", account],
     ...queryDependentFn(async () => {
-      return account ? fetchAccountBalance(api, account) : [];
-    }, [defaultAccountQuery]),
+      if (!account || !assetsMap) {
+        return [];
+      }
+      const balance = await fetchAccountBalance(api, account);
+
+      return balance
+        .filter((b) => b.tokenAddress in assetsMap)
+        .map((item) => ({
+          tokenAddress: item.tokenAddress,
+          amount: toDisplayAmount(
+            assetsMap[item.tokenAddress],
+            BigNumber(item.minDenomAmount)
+          ),
+        }));
+    }, [defaultAccountQuery, assetsMapAtom]),
   };
 });

apps/namadillo/src/atoms/balance/atoms.ts

@@ -20,10 +20,12 @@ import { maspIndexerUrlAtom, rpcUrlAtom } from "atoms/settings";
 import { queryDependentFn } from "atoms/utils";
 import { isAxiosError } from "axios";
 import BigNumber from "bignumber.js";
+import * as E from "fp-ts/Either";
 import { sequenceT } from "fp-ts/lib/Apply";
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/Option";
 import invariant from "invariant";
+import * as t from "io-ts";
 import { atom, getDefaultStore } from "jotai";
 import { atomWithQuery } from "jotai-tanstack-query";
 import { atomWithStorage } from "jotai/utils";
@@ -109,12 +111,43 @@ export const viewingKeysAtom = atomWithQuery<
   };
 });
 
+const NamadilloShieldedBalanceCodec = t.record(
+  t.string, // Address
+  t.array(
+    t.type({
+      tokenAddress: t.string,
+      amount: t.string,
+    })
+  )
+);
+
 export const storageShieldedBalanceAtom = atomWithStorage<
-  Record<Address, { address: Address; minDenomAmount: string }[]>
->("namadillo:shieldedBalance", {});
+  Record<Address, { tokenAddress: Address; amount: string }[]>
+>(
+  "namadillo:shieldedBalance",
+  {},
+  {
+    // Invalidation function to ensure the stored data matches the codec
+    getItem(key, initialValue) {
+      const storedValue = localStorage.getItem(key);
+      const maybeValue = NamadilloShieldedBalanceCodec.decode(
+        JSON.parse(storedValue ?? "{}")
+      );
+
+      return E.isRight(maybeValue) ? maybeValue.right : initialValue;
+    },
+    setItem(key, value) {
+      localStorage.setItem(key, JSON.stringify(value));
+    },
+    removeItem(key) {
+      localStorage.removeItem(key);
+    },
+  }
+);
 
 export const shieldedSyncProgress = atom(0);
 
+// After changing the stored data type, change the version in the key
 export const lastCompletedShieldedSyncAtom = atomWithStorage<
   Record<Address, Date | undefined>
 >("namadillo:last-shielded-sync", {}, undefined, { getOnInit: true });
@@ -132,11 +165,13 @@ export const shieldedBalanceAtom = atomWithQuery((get) => {
   const rpcUrl = get(rpcUrlAtom);
   const maspIndexerUrl = get(maspIndexerUrlAtom);
   const defaultAccount = get(defaultAccountAtom);
+  const assetsMapAtom = get(namadaRegistryChainAssetsMapAtom);
 
   const [viewingKey, allViewingKeys] = viewingKeysQuery.data ?? [];
   const chainTokens = chainTokensQuery.data?.map((t) => t.address);
   const chainId = chainParametersQuery.data?.chainId;
   const namTokenAddress = namTokenAddressQuery.data;
+  const assetsMap = assetsMapAtom.data;
 
   return {
     refetchInterval: enablePolling ? 1000 : false,
@@ -148,7 +183,8 @@ export const shieldedBalanceAtom = atomWithQuery((get) => {
         !chainTokens ||
         !chainId ||
         !namTokenAddress ||
-        !rpcUrl
+        !rpcUrl ||
+        !assetsMap
       ) {
         return [];
       }
@@ -168,16 +204,24 @@ export const shieldedBalanceAtom = atomWithQuery((get) => {
         chainTokens,
         chainId
       );
-
-      const shieldedBalance = response.map(([address, amount]) => ({
-        address,
-        minDenomAmount: amount,
-      }));
+      const shieldedBalance = response
+        // Filter out unknown assets
+        .filter(([address]) => address in assetsMap)
+        .map(([address, amount]) => {
+          const asset = assetsMap[address];
+          return {
+            tokenAddress: address,
+            amount: toDisplayAmount(asset, BigNumber(amount)),
+          };
+        });
 
       const storage = get(storageShieldedBalanceAtom);
       set(storageShieldedBalanceAtom, {
         ...storage,
-        [viewingKey.key]: shieldedBalance,
+        [viewingKey.key]: shieldedBalance.map((balance) => ({
+          ...balance,
+          amount: balance.amount.toString(),
+        })),
       });
 
       if (defaultAccount.data) {
@@ -198,6 +242,7 @@ export const shieldedBalanceAtom = atomWithQuery((get) => {
       chainTokensQuery,
       chainParametersQuery,
       namTokenAddressQuery,
+      assetsMapAtom,
     ]),
   };
 });
@@ -218,8 +263,10 @@ export const namadaShieldedAssetsAtom = atomWithQuery((get) => {
 
       return mapNamadaAddressesToAssets({
         balances:
-          shieldedBalance?.map((i) => ({ ...i, tokenAddress: i.address })) ??
-          [],
+          shieldedBalance?.map((i) => ({
+            ...i,
+            amount: BigNumber(i.amount),
+          })) ?? [],
         assets: Object.values(chainAssetsMap.data),
       });
     }, [viewingKeysQuery, chainTokensQuery, chainAssetsMap]),

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

@@ -1,12 +1,11 @@
-import { Balance } from "@namada/indexer-client";
 import BigNumber from "bignumber.js";
 import {
   Address,
   NamadaAsset,
   NamadaAssetWithAmount,
   TokenBalance,
 } from "types";
-import { isNamadaAsset, toDisplayAmount } from "utils";
+import { isNamadaAsset } from "utils";
 
 export const getTotalDollar = (list?: TokenBalance[]): BigNumber =>
   (list ?? []).reduce(
@@ -21,16 +20,16 @@ export const mapNamadaAddressesToAssets = ({
   balances,
   assets,
 }: {
-  balances: Balance[];
+  balances: { tokenAddress: Address; amount: BigNumber }[];
   assets: NamadaAsset[];
 }): Record<Address, NamadaAssetWithAmount> => {
   const map: Record<Address, NamadaAssetWithAmount> = {};
-  balances.forEach((item) => {
-    const asset = assets.find((asset) => asset.address === item.tokenAddress);
+  balances.forEach(({ tokenAddress, amount }) => {
+    const asset = assets.find((asset) => asset.address === tokenAddress);
 
     if (asset) {
-      map[item.tokenAddress] = {
-        amount: toDisplayAmount(asset, BigNumber(item.minDenomAmount)),
+      map[tokenAddress] = {
+        amount,
         asset,
       };
     }

apps/namadillo/src/atoms/chain/atoms.ts

@@ -121,7 +121,7 @@ export const maspRewardsAtom = atomWithQuery((get) => {
     ...queryDependentFn(async (): Promise<MaspAssetRewards[]> => {
       invariant(chainAssetsMap.data, "No chain assets map");
 
-      return await fetchMaspRewards(Object.values(chainAssetsMap.data));
+      return await fetchMaspRewards(chainAssetsMap.data);
     }, [chainAssetsMap]),
   };
 });

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

@@ -4,10 +4,8 @@ import {
   NativeToken,
   Parameters,
 } from "@namada/indexer-client";
-import { getDenomFromIbcTrace } from "atoms/integrations";
 import BigNumber from "bignumber.js";
-import { MaspAssetRewards, NamadaAsset } from "types";
-import { unknownAsset } from "utils/assets";
+import { Address, MaspAssetRewards, NamadaAsset } from "types";
 import { getSdkInstance } from "utils/sdk";
 
 export const fetchRpcUrlFromIndexer = async (
@@ -43,16 +41,16 @@ export const clearShieldedContext = async (chainId: string): Promise<void> => {
 };
 
 export const fetchMaspRewards = async (
-  assets: NamadaAsset[]
+  assets: Record<Address, NamadaAsset>
 ): Promise<MaspAssetRewards[]> => {
   const sdk = await getSdkInstance();
   const rewards = await sdk.rpc.globalShieldedRewardForTokens();
+
   const existingRewards: MaspAssetRewards[] = rewards
-    .filter((r) => r.maxRewardRate > 0)
+    .filter((r) => r.maxRewardRate > 0 && r.address in assets)
     .map((r) => {
-      const denom = getDenomFromIbcTrace(r.name);
-      const asset =
-        assets.find((asset) => asset.base === denom) ?? unknownAsset(denom);
+      const asset = assets[r.address];
+
       return {
         asset,
         address: r.address,

apps/namadillo/src/atoms/fees/atoms.ts

@@ -11,7 +11,7 @@ import { isPublicKeyRevealed } from "lib/query";
 import isEqual from "lodash.isequal";
 import { Address } from "types";
 import { TxKind } from "types/txKind";
-import { isNamadaAsset, toDisplayAmount } from "utils";
+import { toDisplayAmount } from "utils";
 import { fetchGasEstimate, fetchTokensGasPrice } from "./services";
 
 export type GasPriceTableItem = {
@@ -73,10 +73,7 @@ export const gasPriceTableAtom = atomWithQuery<GasPriceTable>((get) => {
             const baseAmount = BigNumber(minDenomAmount);
             return {
               token,
-              gasPrice:
-                asset && isNamadaAsset(asset) ?
-                  toDisplayAmount(asset, baseAmount)
-                : baseAmount,
+              gasPrice: toDisplayAmount(asset, baseAmount),
             };
           })
       );

apps/namadillo/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from "./useProposalIdParam";
 export * from "./useSdk";
+export * from "./useTransactionFee";

apps/namadillo/src/hooks/useOptimisticTransferUpdate.tsx

@@ -17,17 +17,17 @@ export const useOptimisticTransferUpdate = () => {
   const [viewingKeyData] = useAtomValue(viewingKeysAtom).data ?? [];
   const viewingKey = viewingKeyData?.key;
 
-  return (token: Address, incrementBaseDenomAmount: BigNumber) => {
+  return (token: Address, incrementAmount: BigNumber) => {
     if (!viewingKey) {
       return;
     }
     setStorageShieldedBalance((storage) => ({
       ...storage,
       [viewingKey]: storage[viewingKey].map((item) =>
-        item.address === token ?
+        item.tokenAddress === token ?
           {
             ...item,
-            minDenomAmount: sum(item.minDenomAmount, incrementBaseDenomAmount),
+            amount: sum(item.amount, incrementAmount),
           }
         : item
       ),

apps/namadillo/src/hooks/useTransactionFee/index.ts

@@ -0,0 +1 @@
+export * from "./useTransactionFee";