Fix/networth usdt (#189)

apps/wallet/src/apis/react-query/query-keys.ts

@@ -4,5 +4,6 @@ export enum QueryCacheKey {
   GET_TOKEN = 'getToken',
   GET_TOKEN_BALANCE = 'getTokenBalance',
   GET_TOKEN_FIAT_VALUE = 'getTokenFiatValue',
+  GET_CHAIN_NET_WORTH = 'getChainNetWorth',
   GET_USER_LOGINS = 'getUserLogins',
 }

apps/wallet/src/apis/react-query/token.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query"
+import { useQuery, useQueryClient } from "@tanstack/react-query"
 import { QueryCacheKey } from "./query-keys"
 import { GetAllAssetsAsync } from "../services/token"
 import { getSupportedChains } from "../../utils/chain"
@@ -118,17 +118,40 @@ export const useTokenBalanceQuery = (token?: RootAssetInfo) => {
   })
 }
 
-export const useTokenFiatValueQuery = (token?: RootAssetInfo, balance?: BigNumber) => {
+export const useTokenFiatValueQuery = (token?: RootAssetInfo) => {
+  const balanceQuery = useTokenBalanceQuery(token)
   return useQuery({
-    queryKey: [QueryCacheKey.GET_TOKEN_FIAT_VALUE, token?.assetId.toString(), balance],
+    queryKey: [QueryCacheKey.GET_TOKEN_FIAT_VALUE, token?.assetId.toString()],
     queryFn: async () => {
       let value = new BigNumber(0)
       if (token!.assetSymbol === 'USDT') {
-        value = balance!.dp(2, BigNumber.ROUND_FLOOR)
+        value = balanceQuery.data!.dp(2, BigNumber.ROUND_FLOOR)
       }
       // TODO: other tokens
       return value
     },
-    enabled: !!token && !!balance,
+    enabled: !!token && !!balanceQuery.data,
+  })
+}
+
+export const useChainTokenNetWorthQuery = (chain: ChainInfo) => {
+  const queryClient = useQueryClient()
+  const tokenListQuery = useTokenListQuery(chain)
+  return useQuery({
+    queryKey: [QueryCacheKey.GET_CHAIN_NET_WORTH, chain.chainId.toString()],
+    queryFn: async () => {
+      let total = new BigNumber(0)
+      tokenListQuery.data!.forEach((token) => {
+        const fiatValueCache = queryClient.getQueryData<BigNumber>(
+          [QueryCacheKey.GET_TOKEN_FIAT_VALUE, token.assetId.toString()]
+        )
+        if (fiatValueCache) {
+          total = total.plus(fiatValueCache)
+        }
+      })
+      return total
+    },
+    enabled: !!tokenListQuery.data,
+    refetchInterval: 2000,
   })
 }

apps/wallet/src/components/TokenIcon.tsx

@@ -17,9 +17,10 @@ const TokenIcon: FC<TokenIconProps> = ({
 }) => {
   let srcUrl = token?.icon || '';
   if (!srcUrl && token?.assetSymbol) {
+    const symbol = encodeURIComponent(token.assetSymbol);
     srcUrl =
-      `/token-icons/${token.assetSymbol.toUpperCase()}.svg` ||
-      `/token-icons-png/${token.assetSymbol.toUpperCase()}.png`;
+      `/token-icons/${symbol}.svg` ||
+      `/token-icons-png/${symbol}.png`;
   }
 
   return (

apps/wallet/src/components/TokenList.tsx

@@ -11,7 +11,7 @@ import BigNumber from "bignumber.js";
 const TokenListItem: FC<{ token: RootAssetInfo }> = ({ token }) => {
   const navigate = useNavigate()
   const balanceQuery = useTokenBalanceQuery(token)
-  const usdValueQuery = useTokenFiatValueQuery(token, balanceQuery.data)
+  const usdValueQuery = useTokenFiatValueQuery(token)
 
   return (
     <li

apps/wallet/src/pages/main/index.tsx

@@ -3,7 +3,7 @@ import { FC } from "react";
 import SendButton from "../../components/SendButton";
 import ReceiveButton from "../../components/ReceiveButton";
 import TokenList from "../../components/TokenList";
-import { useTokenListQuery } from "../../apis/react-query/token";
+import { useChainTokenNetWorthQuery, useTokenListQuery } from "../../apis/react-query/token";
 import hibitIdSession from "../../stores/session";
 import { useQuery } from "@tanstack/react-query";
 import { ChainAssetType } from "../../utils/basicTypes";
@@ -20,6 +20,7 @@ const WalletMainPage: FC = observer(() => {
   const navigate = useNavigate()
 
   const tokenListQuery = useTokenListQuery(hibitIdSession.chainInfo)
+  const netWorthQuery = useChainTokenNetWorthQuery(hibitIdSession.chainInfo)
   const defaultTokenQuery = useQuery({
     queryKey: ['getDefaultToken', tokenListQuery.data],
     queryFn: async () => {
@@ -56,7 +57,7 @@ const WalletMainPage: FC = observer(() => {
         </h1>
         <div className="flex flex-col items-center">
           <span className="text-xs text-neutral">{t('page_home_netWorth')}</span>
-          <span className="text-2xl">$ 0.00</span>
+          <span className="text-2xl">{`$ ${netWorthQuery.data?.toFixed(2) || '0.00'}`}</span>
         </div>
         <div className="flex gap-10">
           <SendButton token={defaultTokenQuery.data || undefined} />

apps/wallet/src/pages/token-detail/index.tsx

@@ -16,7 +16,7 @@ const TokenDetailPage: FC = observer(() => {
   const { addressOrSymbol } = useParams()
   const tokenQuery = useTokenQuery(addressOrSymbol?? '')
   const balanceQuery = useTokenBalanceQuery(tokenQuery.data || undefined)
-  const usdValueQuery = useTokenFiatValueQuery(tokenQuery.data || undefined, balanceQuery.data)
+  const usdValueQuery = useTokenFiatValueQuery(tokenQuery.data || undefined)
 
   if (tokenQuery.isLoading || typeof tokenQuery.data === 'undefined') {
     return <PageLoading />