feat: display consistent decimals when approving transactions (#1681)

- Closes #1675
- Closes #1659

---

| 📷 Asset | 📷  NFT | 📷 TX |
| --- | --- | --- |
| <img width="373" alt="asset"
src="https://github.com/user-attachments/assets/51792048-919e-420c-bb19-0dc62df8e1e4">
| <img width="368"
src="https://github.com/user-attachments/assets/6b4c4b3d-57c6-448b-a5fd-4a311aa83986">
| <img width="370"
src="https://github.com/user-attachments/assets/3a1aabde-9fe7-416a-aca9-b1983813b0f6">
|

.changeset/wicked-months-compete.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": minor
+---
+
+Show asset name, decimals and NFT badge when approving a transaction.

packages/app/src/systems/Asset/components/AssetsAmount/AssetsAmount.tsx

@@ -1,4 +1,12 @@
-import { Avatar, Box, Copyable, Grid, Text, Tooltip } from '@fuel-ui/react';
+import {
+  Avatar,
+  Badge,
+  Box,
+  Copyable,
+  Grid,
+  Text,
+  Tooltip,
+} from '@fuel-ui/react';
 import type { AssetFuelAmount } from '@fuel-wallet/types';
 import { bn } from 'fuels';
 import { type FC, useEffect, useRef, useState } from 'react';
@@ -89,6 +97,7 @@ const AssetsAmountItem = ({ assetAmount }: AssetsAmountItemProps) => {
     assetId,
     decimals,
     amount,
+    isNft,
   } = assetAmount || {};
 
   const containerRef = useRef<HTMLDivElement>(null);
@@ -120,6 +129,11 @@ const AssetsAmountItem = ({ assetAmount }: AssetsAmountItemProps) => {
         <Text as="span" aria-label="Asset Name">
           {name || 'Unknown'}
         </Text>
+        {isNft && (
+          <Badge variant="ghost" intent="primary" css={styles.assetNft}>
+            NFT
+          </Badge>
+        )}
       </Box.Flex>
       <Copyable value={assetId} css={styles.address}>
         <Text fontSize="xs" css={{ mt: '$1' }}>

packages/app/src/systems/Asset/components/AssetsAmount/styles.ts

@@ -70,4 +70,8 @@ export const styles = {
     fontSize: '$sm',
     fontWeight: '$normal',
   }),
+  assetNft: cssObj({
+    fontSize: '$sm',
+    lineHeight: 'normal',
+  }),
 };

packages/app/src/systems/DApp/machines/transactionRequestMachine.tsx

@@ -1,12 +1,5 @@
-import { createProvider } from '@fuel-wallet/connections';
 import type { Account } from '@fuel-wallet/types';
-import {
-  type BN,
-  type TransactionRequest,
-  type TransactionSummary,
-  bn,
-  getTransactionSummary,
-} from 'fuels';
+import type { BN, TransactionRequest, TransactionSummary } from 'fuels';
 import type { InterpreterFrom, StateFrom } from 'xstate';
 import { assign, createMachine } from 'xstate';
 import { AccountService } from '~/systems/Account';

packages/app/src/systems/Transaction/hooks/useAssetsAmount.tsx

@@ -1,36 +1,58 @@
 import type { AssetFuelAmount } from '@fuel-wallet/types';
 import type { OperationCoin } from 'fuels';
 import { useEffect, useState } from 'react';
-import { getFuelAssetByAssetId, useAssets } from '~/systems/Asset';
+import { AssetsCache } from '~/systems/Asset/cache/AssetsCache';
+import { useProvider } from '~/systems/Network/hooks/useProvider';
 
-export const useAssetsAmount = (params: {
+type UseAmountAmountParams = {
   operationsCoin?: OperationCoin[];
-}) => {
-  const { assets } = useAssets();
+};
+
+const isAssetFuelAmount = (
+  value: AssetFuelAmount | null
+): value is AssetFuelAmount => value !== null;
+
+export const useAssetsAmount = (params: UseAmountAmountParams) => {
+  const provider = useProvider();
   const [assetsAmount, setAssetsAmount] = useState<AssetFuelAmount[]>([]);
 
   useEffect(() => {
     const fetchAssetsAmount = async () => {
-      const assetsAmountAsync = await params.operationsCoin?.reduce(
-        async (acc, operationCoin) => {
-          const prev = await acc;
-          const assetAmount = await getFuelAssetByAssetId({
-            assets,
-            assetId: operationCoin.assetId,
-          });
-
-          if (!assetAmount) return prev;
-
-          return [...prev, { ...assetAmount, amount: operationCoin.amount }];
-        },
-        Promise.resolve([] as AssetFuelAmount[])
-      );
-
-      setAssetsAmount(assetsAmountAsync || []);
+      try {
+        if (!params.operationsCoin || !provider) {
+          setAssetsAmount([]);
+          return;
+        }
+
+        const assetsCache = AssetsCache.getInstance();
+
+        const assetsWithAmount: (AssetFuelAmount | null)[] = await Promise.all(
+          params.operationsCoin.map(async (operationCoin) => {
+            const assetCached = await assetsCache.getAsset({
+              chainId: provider.getChainId(),
+              assetId: operationCoin.assetId,
+              dbAssets: [],
+              save: false,
+            });
+
+            if (!assetCached) return null;
+
+            return {
+              ...assetCached,
+              amount: operationCoin.amount,
+            };
+          })
+        );
+
+        setAssetsAmount(assetsWithAmount.filter(isAssetFuelAmount));
+      } catch (error) {
+        console.error('Error fetching assets:', error);
+        setAssetsAmount([]);
+      }
     };
 
     fetchAssetsAmount();
-  }, [params.operationsCoin, assets]);
+  }, [provider, params.operationsCoin]);
 
   return assetsAmount;
 };