feat: [GNS-9] Change the route of sourcing static token data from gno…

…-token-resource

src/components/view/datatable/item/token-title.tsx

@@ -1,5 +1,5 @@
 import Text from '@/components/ui/text';
-import IconTokenDefault from '@/assets/svgs/icon-token-default.svg';
+import UnknownToken from '@/assets/svgs/icon-unknown-token.svg';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -11,11 +11,18 @@ interface Props {
   pkgPath: string;
 }
 
-export const TokenTitle = ({name, symbol, pkgPath}: Props) => {
+export const TokenTitle = ({name, symbol, pkgPath, imagePath}: Props) => {
   return (
     <a href={`/tokens/${pkgPath}`} target={'_blank'} rel={'noopener noreferrer'}>
       <TokenTitleWrapper>
-        <IconTokenDefault />
+        {imagePath && imagePath !== '' ? (
+          <img className="token" src={imagePath} alt="token logo" />
+        ) : (
+          <div className="unknown-token">
+            <UnknownToken width="20" height="20" />
+          </div>
+        )}
+
         <Text type="p4">{`${name} (${symbol})`}</Text>
       </TokenTitleWrapper>
     </a>
@@ -32,9 +39,14 @@ const TokenTitleWrapper = styled.div`
     color: ${({theme}) => theme.colors.blue};
     cursor: pointer;
 
-    svg {
+    .token,
+    .unknown-token {
+      width: 20px;
+      height: 20px;
       margin-right: 10px;
+    }
 
+    svg {
       circle {
         fill: ${({theme}) => theme.colors.primary};
       }

src/components/view/datatable/token/token.tsx

@@ -1,18 +1,19 @@
 'use client';
 
-import React from 'react';
+import React, {useCallback} from 'react';
 import Datatable, {DatatableOption} from '@/components/ui/datatable';
 import usePageQuery from '@/common/hooks/use-page-query';
 import {DatatableItem} from '..';
 import {numberWithCommas} from '@/common/utils';
 import useLoading from '@/common/hooks/use-loading';
 import {API_URI, API_VERSION} from '@/common/values/constant-value';
 import {useRecoilValue} from 'recoil';
-import {themeState} from '@/states';
+import {themeState, tokenState} from '@/states';
 import theme from '@/styles/theme';
 import styled from 'styled-components';
 import {eachMedia} from '@/common/hooks/use-media';
 import {Button} from '@/components/ui/button';
+import {isGRC20TokenModel, TokenModel} from '@/repositories/api/models/meta-token-model';
 
 interface ResponseData {
   hits: number;
@@ -39,6 +40,7 @@ interface TokenData {
 export const TokenDatatable = () => {
   const media = eachMedia();
   const themeMode = useRecoilValue(themeState);
+  const tokenInfos = useRecoilValue(tokenState);
 
   const {data, fetchNextPage, finished, hasNextPage} = usePageQuery<ResponseData>({
     key: ['token/token-list'],
@@ -51,12 +53,29 @@ export const TokenDatatable = () => {
     if (!data) {
       return [];
     }
-    return data.pages.reduce<Array<TokenData>>(
-      (accum, current) => (current ? [...accum, ...current.tokens] : accum),
-      [],
-    );
+    return data.pages.reduce<Array<TokenData>>((accum, current) => {
+      const latest =
+        current?.tokens.map(token => ({
+          ...token,
+          img_path: getTokenMetaInfo(token),
+        })) ?? [];
+      return [...accum, ...latest];
+    }, []);
   };
 
+  const getTokenMetaInfo = useCallback(
+    (token: TokenData) => {
+      const tokenInfo = tokenInfos.find(tokenInfo => {
+        if (!isGRC20TokenModel(tokenInfo)) {
+          return false;
+        }
+        return `${tokenInfo.symbol}`.toUpperCase() === `${token.symbol}`.toUpperCase();
+      });
+      return tokenInfo?.image ?? '';
+    },
+    [tokenInfos],
+  );
+
   const createHeaders = () => {
     return [
       createHeaderToken(),

src/pages/accounts/[address].tsx

@@ -49,8 +49,6 @@ const AccountDetails = () => {
     },
   );
 
-  if (detail) console.log('Detial : ', detail);
-
   return (
     <DetailsPageLayout
       title="Account Details"