feat: handle nam as denominated amount

apps/namadillo/.gitignore

@@ -8,3 +8,4 @@
 /test-results/
 /playwright-report/
 /playwright/.cache/
+/public/localnet-config.toml

apps/namadillo/src/App/AccountOverview/TransparentOverviewPanel.tsx

@@ -72,7 +72,7 @@ const TransparentTokensTable = ({
           >
             Shield
           </ActionButton>
-          {originalAddress === namadaAsset.address && (
+          {originalAddress === namadaAsset().address && (
             <ActionButton
               size="xs"
               className="w-fit mx-auto"
@@ -127,7 +127,7 @@ const TransparentTokensTable = ({
 };
 
 const PanelContent = ({ data }: { data: TokenBalance[] }): JSX.Element => {
-  const namBalance = data.find((i) => i.asset.base === namadaAsset.base);
+  const namBalance = data.find((i) => i.asset.base === namadaAsset().base);
 
   return (
     <div className="flex flex-col gap-2">

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

@@ -55,8 +55,8 @@ export const IbcWithdraw: React.FC = () => {
 
   const transactionFee = mapUndefined(
     ({ gasLimit, gasPrice }) => ({
-      originalAddress: namadaAsset.address,
-      asset: namadaAsset,
+      originalAddress: namadaAsset().address,
+      asset: namadaAsset(),
       amount: gasPrice.multipliedBy(gasLimit),
     }),
     gasConfig

apps/namadillo/src/App/Setup/ChainLoader.tsx

@@ -2,6 +2,7 @@ import { AtomErrorBoundary } from "App/Common/AtomErrorBoundary";
 import { ErrorBox } from "App/Common/ErrorBox";
 import { routes } from "App/routes";
 import { chainAtom } from "atoms/chain";
+import { localnetConfigAtom } from "atoms/integrations";
 import { useAtomValue } from "jotai";
 import { ReactNode } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
@@ -31,6 +32,8 @@ export const ChainLoader = ({
   children: ReactNode;
 }): JSX.Element => {
   const chain = useAtomValue(chainAtom);
+  useAtomValue(localnetConfigAtom);
+
   const errorContainerProps = {
     className: "bg-black max-w-full rounded-sm w-full text-white min-h-full",
   };

apps/namadillo/src/App/Transfer/AssetImage.tsx

@@ -21,7 +21,7 @@ export const AssetImage = ({
       <img src={image} alt={altText} className="w-full" />
       {isShielded !== undefined && (
         <span className="absolute -bottom-1 -right-1 w-4 aspect-square">
-          <AssetImage asset={namadaAsset} />
+          <AssetImage asset={namadaAsset()} />
         </span>
       )}
     </span>

apps/namadillo/src/App/Transfer/__tests__/TransferDestination.test.tsx

@@ -102,8 +102,8 @@ describe("Component: TransferDestination", () => {
       <TransferDestination
         transactionFee={{
           amount: fee,
-          asset: namadaAsset,
-          originalAddress: namadaAsset.address,
+          asset: namadaAsset(),
+          originalAddress: namadaAsset().address,
         }}
       />
     );

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

@@ -7,7 +7,6 @@ import { namadaExtensionConnectedAtom } from "atoms/settings";
 import { queryDependentFn } from "atoms/utils";
 import BigNumber from "bignumber.js";
 import { atomWithMutation, atomWithQuery } from "jotai-tanstack-query";
-import { chainConfigByName } from "registry";
 import {
   fetchAccountBalance,
   fetchAccounts,
@@ -85,7 +84,6 @@ export const accountBalanceAtom = atomWithQuery<BigNumber>((get) => {
   const tokenAddress = get(nativeTokenAddressAtom);
   const enablePolling = get(shouldUpdateBalanceAtom);
   const api = get(indexerApiAtom);
-  const chainConfig = chainConfigByName("namada");
 
   return {
     // TODO: subscribe to indexer events when it's done
@@ -95,10 +93,7 @@ export const accountBalanceAtom = atomWithQuery<BigNumber>((get) => {
       return await fetchNamAccountBalance(
         api,
         defaultAccount.data,
-        tokenAddress.data!,
-        // As this is a nam balance specific atom, we can safely assume that the
-        // first currency is the native token
-        chainConfig.currencies[0].coinDecimals
+        tokenAddress.data!
       );
     }, [tokenAddress, defaultAccount]),
   };

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

@@ -17,14 +17,12 @@ export const fetchDefaultAccount = async (): Promise<Account | undefined> => {
 export const fetchNamAccountBalance = async (
   api: DefaultApi,
   account: Account | undefined,
-  tokenAddress: string,
-  decimals: number
+  tokenAddress: string
 ): Promise<BigNumber> => {
   if (!account) return BigNumber(0);
   const balancesResponse = await api.apiV1AccountAddressGet(account.address);
 
   const balance = balancesResponse.data
-    // TODO: add filter to the api call
     .filter(({ tokenAddress: ta }) => ta === tokenAddress)
     .map(({ tokenAddress, balance }) => {
       return {
@@ -34,9 +32,7 @@ export const fetchNamAccountBalance = async (
     })
     .at(0);
 
-  return balance ?
-      BigNumber(balance.amount).shiftedBy(-decimals)
-    : BigNumber(0);
+  return balance ? BigNumber(balance.amount) : BigNumber(0);
 };
 
 export const fetchAccountBalance = async (

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

@@ -69,11 +69,7 @@ export const shieldedBalanceAtom = atomWithQuery<
       );
       const shieldedBalance = response.map(([address, amount]) => ({
         address,
-        amount:
-          // Sdk returns the nam amount as `nam` instead of `namnam`
-          namTokenAddressQuery.data === address ?
-            new BigNumber(amount).shiftedBy(6)
-          : new BigNumber(amount),
+        amount: new BigNumber(amount),
       }));
       return shieldedBalance;
     }, [viewingKeyQuery, tokenAddressesQuery, namTokenAddressQuery]),

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

@@ -53,7 +53,7 @@ export const getTotalDollar = (list?: TokenBalance[]): BigNumber | undefined =>
   sumDollars(list ?? []);
 
 export const getTotalNam = (list?: TokenBalance[]): BigNumber =>
-  list?.find((i) => i.asset.base === namadaAsset.base)?.amount ??
+  list?.find((i) => i.asset.base === namadaAsset().base)?.amount ??
   new BigNumber(0);
 
 const tnamAddressToDenomTrace = (

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

@@ -20,6 +20,7 @@ import {
   TransferTransactionData,
 } from "types";
 import {
+  addLocalnetToRegistry,
   createIbcTx,
   getIbcChannels,
   getKnownChains,
@@ -28,6 +29,7 @@ import {
   mapCoinsToAssets,
 } from "./functions";
 import {
+  fetchLocalnetTomlConfig,
   IbcTransferParams,
   queryAndStoreRpc,
   queryAssetBalances,
@@ -198,3 +200,27 @@ export const createIbcTxAtom = atomWithMutation((get) => {
     },
   };
 });
+
+export const localnetConfigAtom = atomWithQuery((_get) => {
+  return {
+    queryKey: ["localnet-config"],
+    staleTime: Infinity,
+    retry: false,
+
+    queryFn: async () => {
+      try {
+        const { enabled, chain_id, token_address } =
+          await fetchLocalnetTomlConfig();
+
+        if (enabled && chain_id && token_address) {
+          addLocalnetToRegistry(chain_id, token_address);
+        }
+
+        return { chainId: chain_id, tokenAddress: token_address };
+      } catch (_) {
+        // If file not found just ignore
+        return null;
+      }
+    },
+  };
+});

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

@@ -1,4 +1,4 @@
-import { Asset, Chain } from "@chain-registry/types";
+import { Asset, AssetList, Chain } from "@chain-registry/types";
 import { Coin } from "@cosmjs/launchpad";
 import { QueryClient, setupIbcExtension } from "@cosmjs/stargate";
 import { Tendermint34Client } from "@cosmjs/tendermint-rpc";
@@ -370,3 +370,37 @@ export const createIbcTx = async (
   );
   return transactionPair;
 };
+
+export const namadaLocal = (chainId: string): Chain => ({
+  ...internalDevnetChain,
+  chain_name: "localnet",
+  chain_id: chainId,
+});
+
+export const namadaLocalAsset = (tokenAddress: string): AssetList => ({
+  ...internalDevnetAssets,
+  chain_name: "localnet",
+  assets: internalDevnetAssets.assets.map((asset) =>
+    asset.name === "NAM" ?
+      {
+        ...asset,
+        address: tokenAddress,
+      }
+    : asset
+  ),
+});
+
+export const addLocalnetToRegistry = (
+  chainId: string,
+  tokenAddress: string
+): void => {
+  const localChain: ChainRegistryEntry = {
+    chain: namadaLocal(chainId),
+    assets: namadaLocalAsset(tokenAddress),
+  };
+
+  cosmosRegistry.chains.push(localChain.chain);
+  cosmosRegistry.assets.push(localChain.assets);
+
+  mainnetChains.push(localChain);
+};

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

@@ -11,9 +11,11 @@ import { queryForAck, queryForIbcTimeout } from "atoms/transactions";
 import BigNumber from "bignumber.js";
 import { getDefaultStore } from "jotai";
 import { createIbcTransferMessage } from "lib/transactions";
+import toml from "toml";
 import {
   AddressWithAsset,
   IbcTransferTransactionData,
+  LocalnetToml,
   TransferStep,
 } from "types";
 import { toBaseAmount } from "utils";
@@ -189,3 +191,8 @@ export const updateIbcTransactionStatus = async (
     });
   }
 };
+
+export const fetchLocalnetTomlConfig = async (): Promise<LocalnetToml> => {
+  const response = await fetch("/localnet-config.toml");
+  return toml.parse(await response.text()) as LocalnetToml;
+};

apps/namadillo/src/hooks/useRegistryFeatures.tsx

@@ -7,7 +7,7 @@ import {
 import { useAtom, useAtomValue } from "jotai";
 import { useEffect } from "react";
 
-const { VITE_PROXY } = process.env;
+const { VITE_PROXY } = import.meta.env;
 
 const namadaChainRegistryUrl =
   VITE_PROXY ?

apps/namadillo/src/registry/namadaAsset.ts

@@ -1,21 +1,33 @@
 import { Asset } from "@chain-registry/types";
+import { localnetConfigAtom } from "atoms/integrations/atoms";
+import { getDefaultStore } from "jotai";
 import namadaShieldedSvg from "./assets/namada-shielded.svg";
 
-export const namadaAsset = {
-  name: "Namada",
-  base: "unam",
-  address: "tnam1qy440ynh9fwrx8aewjvvmu38zxqgukgc259fzp6h",
-  display: "nam",
-  symbol: "NAM",
-  denom_units: [
-    {
-      denom: "unam",
-      exponent: 0,
-    },
-    {
-      denom: "nam",
-      exponent: 6,
-    },
-  ],
-  logo_URIs: { svg: namadaShieldedSvg },
-} satisfies Asset;
+const ADDRESS = "tnam1qxp7u2vmlgcrpn9j0ml7hrtr79g2w2fdesteh7tu";
+
+// We can't return "satisfies Asset" from fn
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export const namadaAsset = () => {
+  const store = getDefaultStore();
+  const config = store.get(localnetConfigAtom);
+  const address = config.data?.tokenAddress || ADDRESS;
+
+  return {
+    name: "Namada",
+    base: "unam",
+    address,
+    display: "nam",
+    symbol: "NAM",
+    denom_units: [
+      {
+        denom: "unam",
+        exponent: 0,
+      },
+      {
+        denom: "nam",
+        exponent: 6,
+      },
+    ],
+    logo_URIs: { svg: namadaShieldedSvg },
+  } satisfies Asset;
+};

apps/namadillo/src/setupTests.ts

@@ -1,6 +1,11 @@
 import "@testing-library/jest-dom";
+import { atom } from "jotai";
 
 jest.mock("atoms/integrations", () => ({
   getRestApiAddressByIndex: jest.fn(),
   getRpcByIndex: jest.fn(),
 }));
+
+jest.mock("atoms/integrations/atoms", () => ({
+  localnetConfigAtom: atom({ data: undefined }),
+}));

apps/namadillo/src/types.ts

@@ -333,3 +333,9 @@ export type TransferTransactionData =
 
 export type PartialTransferTransactionData = Partial<TransferTransactionData> &
   Pick<TransferTransactionData, "type" | "chainId" | "asset">;
+
+export type LocalnetToml = {
+  enabled: boolean;
+  chain_id: string;
+  token_address: string;
+};

apps/namadillo/src/utils/index.ts

@@ -122,12 +122,14 @@ const findDisplayUnit = (asset: Asset): AssetDenomUnit | undefined => {
 };
 
 const isNamAsset = (asset: Asset): boolean =>
-  asset.symbol === namadaAsset.symbol;
+  asset.symbol === namadaAsset().symbol;
 
 export const toDisplayAmount = (
   asset: Asset,
   baseAmount: BigNumber
 ): BigNumber => {
+  if (isNamAsset(asset)) return baseAmount;
+
   const displayUnit = findDisplayUnit(asset);
   if (!displayUnit) {
     return baseAmount;
@@ -139,7 +141,6 @@ export const toBaseAmount = (
   asset: Asset,
   displayAmount: BigNumber
 ): BigNumber => {
-  if (isNamAsset(asset)) return displayAmount;
   const displayUnit = findDisplayUnit(asset);
   if (!displayUnit) {
     return displayAmount;