feat: disable nam on asset selector

apps/namadillo/src/App/NamadaTransfer/NamadaTransfer.tsx

@@ -13,20 +13,19 @@ import {
   namadaTransparentAssetsAtom,
 } from "atoms/balance/atoms";
 import { chainParametersAtom } from "atoms/chain/atoms";
-import { applicationFeaturesAtom, rpcUrlAtom } from "atoms/settings";
+import { rpcUrlAtom } from "atoms/settings";
 import BigNumber from "bignumber.js";
 import { useTransactionActions } from "hooks/useTransactionActions";
 import { useTransfer } from "hooks/useTransfer";
 import { wallets } from "integrations";
 import invariant from "invariant";
 import { useAtomValue } from "jotai";
 import { createTransferDataFromNamada } from "lib/transactions";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import namadaChain from "registry/namada.json";
 import { twMerge } from "tailwind-merge";
 import { Address } from "types";
-import { isNamadaAsset } from "utils";
 import { NamadaTransferTopHeader } from "./NamadaTransferTopHeader";
 
 export const NamadaTransfer: React.FC = () => {
@@ -40,31 +39,15 @@ export const NamadaTransfer: React.FC = () => {
   const [completedAt, setCompletedAt] = useState<Date | undefined>();
 
   const rpcUrl = useAtomValue(rpcUrlAtom);
-  const features = useAtomValue(applicationFeaturesAtom);
   const chainParameters = useAtomValue(chainParametersAtom);
   const defaultAccounts = useAtomValue(allDefaultAccountsAtom);
 
-  const { data: availableAssetsData, isLoading: isLoadingAssets } =
-    useAtomValue(
-      shielded ? namadaShieldedAssetsAtom : namadaTransparentAssetsAtom
-    );
+  const { data: availableAssets, isLoading: isLoadingAssets } = useAtomValue(
+    shielded ? namadaShieldedAssetsAtom : namadaTransparentAssetsAtom
+  );
 
   const { storeTransaction } = useTransactionActions();
 
-  const availableAssets = useMemo(() => {
-    if (features.namTransfersEnabled) {
-      return availableAssetsData;
-    }
-    const assetsMap = { ...availableAssetsData };
-    const namadaAsset = Object.values(availableAssetsData ?? {}).find((a) =>
-      isNamadaAsset(a.asset)
-    );
-    if (namadaAsset?.originalAddress) {
-      delete assetsMap[namadaAsset?.originalAddress]; // NAM will be available only on phase 5
-    }
-    return assetsMap;
-  }, [availableAssetsData]);
-
   const chainId = chainParameters.data?.chainId;
   const account = defaultAccounts.data?.find((account) =>
     shielded ?

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

@@ -4,17 +4,23 @@ import { AssetImage } from "./AssetImage";
 
 type AssetCardProps = {
   asset: Asset;
+  disabled?: boolean;
 };
 
-export const AssetCard = ({ asset }: AssetCardProps): JSX.Element => {
+export const AssetCard = ({ asset, disabled }: AssetCardProps): JSX.Element => {
   return (
     <span
       className={clsx(
         "grid grid-cols-[40px_auto] gap-6 w-full px-4 py-2.5 items-center"
       )}
     >
       <AssetImage asset={asset} />
-      <span className="text-left">{asset.name}</span>
+      <span className="text-left">
+        {asset.name}
+        {disabled && (
+          <i className="text-red-500 ml-2">disabled until phase 5</i>
+        )}
+      </span>
     </span>
   );
 };

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

@@ -1,7 +1,10 @@
 import { Stack } from "@namada/components";
 import { Search } from "App/Common/Search";
 import { SelectModal } from "App/Common/SelectModal";
+import { nativeTokenAddressAtom } from "atoms/chain/atoms";
+import { applicationFeaturesAtom } from "atoms/settings/atoms";
 import clsx from "clsx";
+import { useAtomValue } from "jotai";
 import { useMemo, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { Address, AddressWithAsset, WalletProvider } from "types";
@@ -23,6 +26,9 @@ export const SelectAssetModal = ({
   wallet,
   walletAddress,
 }: SelectWalletModalProps): JSX.Element => {
+  const { namTransfersEnabled } = useAtomValue(applicationFeaturesAtom);
+  const nativeTokenAddress = useAtomValue(nativeTokenAddressAtom).data;
+
   const [filter, setFilter] = useState("");
 
   const filteredAssets = useMemo(() => {
@@ -44,24 +50,30 @@ export const SelectAssetModal = ({
         gap={0}
         className="max-h-[400px] overflow-auto dark-scrollbar pb-4 mr-[-0.5rem]"
       >
-        {filteredAssets.map(({ asset, originalAddress }) => (
-          <li key={originalAddress} className="text-sm">
-            <button
-              onClick={() => {
-                onSelect(originalAddress);
-                onClose();
-              }}
-              className={twMerge(
-                clsx(
-                  "w-full rounded-sm border border-transparent",
-                  "hover:border-neutral-400 transition-colors duration-150"
-                )
-              )}
-            >
-              <AssetCard asset={asset} />
-            </button>
-          </li>
-        ))}
+        {filteredAssets.map(({ asset, originalAddress }) => {
+          const disabled =
+            !namTransfersEnabled && originalAddress === nativeTokenAddress;
+          return (
+            <li key={originalAddress} className="text-sm">
+              <button
+                onClick={() => {
+                  onSelect(originalAddress);
+                  onClose();
+                }}
+                className={twMerge(
+                  clsx(
+                    "w-full rounded-sm border border-transparent",
+                    "hover:border-neutral-400 transition-colors duration-150",
+                    { "pointer-events-none opacity-50": disabled }
+                  )
+                )}
+                disabled={disabled}
+              >
+                <AssetCard asset={asset} disabled={disabled} />
+              </button>
+            </li>
+          );
+        })}
         {filteredAssets.length === 0 && (
           <p className="py-2 font-light">There are no available assets</p>
         )}