display icon for known tokens

package.json

@@ -41,6 +41,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@minotaur-ergo/icons": "^0.1.2",
     "@mui/icons-material": "^5.15.6",
     "@mui/material": "^5.15.6",
     "@reduxjs/toolkit": "^2.1.0",

src/action/sync.ts

@@ -101,6 +101,7 @@ const syncInfo = async (network: AbstractNetwork, address: Address) => {
   }
 };
 
+
 const syncAssets = async (
   network: AbstractNetwork,
   networkType: string,

src/hooks/useAssetDetail.ts

@@ -0,0 +1,72 @@
+import { useEffect, useState } from 'react';
+import tokens from '@minotaur-ergo/icons';
+import { AssetDbAction } from '@/action/db';
+
+const useAssetDetail = (assetId: string, networkType: string) => {
+  const [details, setDetails] = useState<{
+    name: string;
+    logo?: React.ElementType;
+    description: string;
+    decimal: number;
+    emissionAmount: bigint;
+    txId: string;
+    tokenId: string;
+  }>({
+    name: '',
+    decimal: 0,
+    description: '',
+    txId: '',
+    emissionAmount: -1n,
+    tokenId: '',
+  });
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    if (!loading && assetId !== details.tokenId) {
+      setLoading(true);
+      const saved = tokens.get(assetId);
+      if (saved) {
+        setDetails({
+          name: saved.name,
+          decimal: saved.decimals,
+          description: saved.description,
+          emissionAmount: saved.emissionAmount,
+          tokenId: saved.id,
+          txId: saved.txId,
+          logo: saved.icon,
+        });
+        setLoading(false);
+      } else {
+        AssetDbAction.getInstance()
+          .getAssetByAssetId(assetId, networkType)
+          .then((asset) => {
+            if (asset) {
+              const decimal = asset.decimal ? asset.decimal : 0;
+              setDetails({
+                name: asset.name ? asset.name : assetId.substring(0, 6),
+                description: asset.description ? asset.description : '',
+                decimal,
+                emissionAmount: asset.emission_amount
+                  ? BigInt(asset.emission_amount)
+                  : 0n,
+                txId: asset.tx_id ? asset.tx_id : '',
+                tokenId: assetId,
+              });
+            } else {
+              setDetails({
+                name: assetId.substring(0, 6),
+                description: '',
+                decimal: 0,
+                emissionAmount: -1n,
+                txId: '',
+                tokenId: assetId,
+              });
+            }
+            setLoading(false);
+          });
+      }
+    }
+  }, [assetId, networkType, details.tokenId, loading]);
+  return details;
+};
+
+export default useAssetDetail;

src/pages/wallet-page/asset/AssetItem.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import {
   Avatar,
   Box,
@@ -7,10 +7,10 @@ import {
   Drawer,
   Typography,
 } from '@mui/material';
-import { AssetDbAction } from '@/action/db';
 import DisplayId from '@/components/display-id/DisplayId';
 import AssetItemDetail from './AssetItemDetail';
 import TokenAmountDisplay from '@/components/amounts-display/TokenAmountDisplay';
+import useAssetDetail from '@/hooks/useAssetDetail';
 
 interface PropsType {
   amount: bigint;
@@ -19,60 +19,21 @@ interface PropsType {
 }
 
 const AssetItem = (props: PropsType) => {
+  console.log(props)
   const [showDetail, setShowDetail] = useState(false);
-  const [loadedToken, setLoadedToken] = useState('');
-  const [details, setDetails] = useState<{
-    name: string;
-    logoSrc: string;
-    description: string;
-    decimal: number;
-    emissionAmount: bigint;
-    txId: string;
-  }>({
-    name: '',
-    decimal: 0,
-    description: '',
-    logoSrc: '/',
-    txId: '',
-    emissionAmount: -1n,
-  });
-  useEffect(() => {
-    if (props.id !== loadedToken) {
-      const loadId = props.id;
-      AssetDbAction.getInstance()
-        .getAssetByAssetId(loadId, props.network_type)
-        .then((asset) => {
-          if (asset) {
-            const decimal = asset.decimal ? asset.decimal : 0;
-            setDetails({
-              name: asset.name ? asset.name : props.id.substring(0, 6),
-              description: asset.description ? asset.description : '',
-              decimal,
-              logoSrc: '/',
-              emissionAmount: asset.emission_amount
-                ? BigInt(asset.emission_amount)
-                : 0n,
-              txId: asset.tx_id ? asset.tx_id : '',
-            });
-          } else {
-            setDetails({
-              name: props.id.substring(0, 6),
-              description: '',
-              decimal: 0,
-              logoSrc: '/',
-              emissionAmount: -1n,
-              txId: '',
-            });
-          }
-          setLoadedToken(loadId);
-        });
-    }
-  });
+  const details = useAssetDetail(props.id, props.network_type);
   return (
     <Card>
       <CardActionArea onClick={() => setShowDetail(true)} sx={{ p: 2 }}>
         <Box sx={{ float: 'left', mr: 2 }}>
-          <Avatar alt={details.name} src={details.logoSrc || '/'} />
+          {details.logo ? (
+            <Avatar alt={details.name}>
+              <details.logo/>
+            </Avatar>
+          ) : (
+            <Avatar alt={details.name} src='/' />
+          )}
+
         </Box>
         <Box display="flex">
           <Typography sx={{ flexGrow: 1 }}>{details.name}</Typography>

src/pages/wallets/components/WalletItem.tsx

@@ -92,9 +92,10 @@ const WalletItem = (props: PropsType) => {
             ) : null}
           </Box>
           {props.tokensCount && props.tokensCount > 0 ? (
-          <Typography variant="body2" color="textSecondary">
-              Includes {props.tokensCount} token{props.tokensCount > 1 ? 's' : ''}
-          </Typography>
+            <Typography variant="body2" color="textSecondary">
+              Includes {props.tokensCount} token
+              {props.tokensCount > 1 ? 's' : ''}
+            </Typography>
           ) : null}
         </Box>
       </CardActionArea>