refactor: expose token rate for selected currency from `useTokenBalan…

…cesSummary`
TalismanSociety · Oct 29, 2023 · a5a9c20 · a5a9c20
1 parent d2fb4f9
commit a5a9c20
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 18 deletions.
diff --git a/apps/extension/src/ui/apps/dashboard/routes/Portfolio/PortfolioAsset.tsx b/apps/extension/src/ui/apps/dashboard/routes/Portfolio/PortfolioAsset.tsx
@@ -11,7 +11,6 @@ import { Statistics } from "@ui/domains/Portfolio/Statistics"
 import { useDisplayBalances } from "@ui/domains/Portfolio/useDisplayBalances"
 import { useTokenBalancesSummary } from "@ui/domains/Portfolio/useTokenBalancesSummary"
 import { useAnalytics } from "@ui/hooks/useAnalytics"
-import { useSelectedCurrency } from "@ui/hooks/useCurrency"
 import { useSendFundsPopup } from "@ui/hooks/useSendFundsPopup"
 import { useCallback, useEffect, useMemo } from "react"
 import { useTranslation } from "react-i18next"
@@ -21,8 +20,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "talisman-ui"
 const PageContent = ({ balances, symbol }: { balances: Balances; symbol: string }) => {
   const navigate = useNavigate()
   const balancesToDisplay = useDisplayBalances(balances)
-  const currency = useSelectedCurrency()
-  const { token, rates, summary } = useTokenBalancesSummary(balancesToDisplay)
+  const { token, rate, summary } = useTokenBalancesSummary(balancesToDisplay)
   const { open: openCopyAddressModal } = useCopyAddressModal()
   const { genericEvent } = useAnalytics()
   const { account } = useSelectedAccount()
@@ -61,7 +59,7 @@ const PageContent = ({ balances, symbol }: { balances: Balances; symbol: string
             </div>
             <div>
               <div className="text-md">{token?.symbol}</div>
-              {rates && <Fiat amount={rates[currency]} className="text-body-secondary" />}
+              {rate && <Fiat amount={rate} className="text-body-secondary" />}
             </div>
             <div className="flex flex-wrap">
               <Tooltip>

diff --git a/apps/extension/src/ui/apps/popup/pages/Portfolio/PortfolioAsset.tsx b/apps/extension/src/ui/apps/popup/pages/Portfolio/PortfolioAsset.tsx
@@ -19,7 +19,7 @@ const PageContent = ({ balances, symbol }: { balances: Balances; symbol: string
   const navigate = useNavigate()
   const balancesToDisplay = useDisplayBalances(balances)
   const currency = useSelectedCurrency()
-  const { token, rates } = useTokenBalancesSummary(balancesToDisplay)
+  const { token, rate } = useTokenBalancesSummary(balancesToDisplay)
 
   const handleBackBtnClick = useCallback(() => navigate(-1), [navigate])
 
@@ -45,7 +45,7 @@ const PageContent = ({ balances, symbol }: { balances: Balances; symbol: string
             <div>{t("Total")}</div>
           </div>
           <div className="text-md flex justify-between font-bold">
-            {rates && <Fiat amount={rates[currency]} />}
+            {rate && <Fiat amount={rate} />}
             <div>
               <Fiat amount={total} isBalance />
             </div>

diff --git a/apps/extension/src/ui/domains/Portfolio/AssetsTable/DashboardAssetsTable.tsx b/apps/extension/src/ui/domains/Portfolio/AssetsTable/DashboardAssetsTable.tsx
@@ -5,7 +5,6 @@ import { classNames } from "@talismn/util"
 import Fiat from "@ui/domains/Asset/Fiat"
 import { useAnalytics } from "@ui/hooks/useAnalytics"
 import { useBalancesStatus } from "@ui/hooks/useBalancesStatus"
-import { useSelectedCurrency } from "@ui/hooks/useCurrency"
 import { FC, useCallback } from "react"
 import { Trans, useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
@@ -58,8 +57,7 @@ const AssetRow = ({ balances }: AssetRowProps) => {
 
   const status = useBalancesStatus(balances)
 
-  const currency = useSelectedCurrency()
-  const { token, rates, summary } = useTokenBalancesSummary(balances)
+  const { token, rate, summary } = useTokenBalancesSummary(balances)
   const { showNomPoolBanner, dismissNomPoolBanner } = useNomPoolStakingBanner()
   const showBanner = showNomPoolBanner({
     chainId: token?.chain?.id,
@@ -148,9 +146,7 @@ const AssetRow = ({ balances }: AssetRowProps) => {
                   </div>
                 )}
               </div>
-              {rates !== undefined && (
-                <Fiat amount={rates[currency]} className="text-body-secondary" />
-              )}
+              {rate !== undefined && <Fiat amount={rate} className="text-body-secondary" />}
             </div>
           </div>
         </div>

diff --git a/apps/extension/src/ui/domains/Portfolio/AssetsTable/PopupAssetsTable.tsx b/apps/extension/src/ui/domains/Portfolio/AssetsTable/PopupAssetsTable.tsx
@@ -88,8 +88,7 @@ const AssetRow = ({ balances, locked }: AssetRowProps) => {
   const { account } = useSearchParamsSelectedAccount()
   const status = useBalancesStatus(balances)
 
-  const currency = useSelectedCurrency()
-  const { token, summary, rates } = useTokenBalancesSummary(balances)
+  const { token, summary, rate } = useTokenBalancesSummary(balances)
   const { showNomPoolBanner, dismissNomPoolBanner } = useNomPoolStakingBanner()
   const showBanner = showNomPoolBanner({
     chainId: token?.chain?.id,
@@ -168,9 +167,7 @@ const AssetRow = ({ balances, locked }: AssetRowProps) => {
                   </div>
                 )}
               </div>
-              {rates !== undefined && (
-                <Fiat amount={rates[currency]} className="text-body-secondary text-xs" />
-              )}
+              {rate !== undefined && <Fiat amount={rate} className="text-body-secondary text-xs" />}
             </div>
           </div>
           <div

diff --git a/apps/extension/src/ui/domains/Portfolio/useTokenBalancesSummary.ts b/apps/extension/src/ui/domains/Portfolio/useTokenBalancesSummary.ts
@@ -157,7 +157,7 @@ export const useTokenBalancesSummary = (balances: Balances) => {
 
   return {
     token,
-    rates: token?.id !== undefined ? tokenBalanceRates[token?.id] : undefined,
+    rate: token?.id !== undefined ? tokenBalanceRates[token?.id]?.[currency] : undefined,
     summary,
     tokenBalances,
     tokenBalanceRates,