feat: asset price display (#1089)

* feat: asset price display * refactor: expose token rate for selected currency from `useTokenBalancesSummary`
TalismanSociety · Oct 31, 2023 · 0855ad9 · 0855ad9
1 parent c4d5967
commit 0855ad9
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 33 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
@@ -1,6 +1,7 @@
 import { Balances } from "@core/domains/balances/types"
 import { ChevronLeftIcon, CopyIcon, SendIcon } from "@talismn/icons"
 import { classNames } from "@talismn/util"
+import Fiat from "@ui/domains/Asset/Fiat"
 import { TokenLogo } from "@ui/domains/Asset/TokenLogo"
 import { useCopyAddressModal } from "@ui/domains/CopyAddress"
 import { DashboardAssetDetails } from "@ui/domains/Portfolio/AssetDetails"
@@ -19,7 +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 { token, summary } = useTokenBalancesSummary(balancesToDisplay)
+  const { token, rate, summary } = useTokenBalancesSummary(balancesToDisplay)
   const { open: openCopyAddressModal } = useCopyAddressModal()
   const { genericEvent } = useAnalytics()
   const { account } = useSelectedAccount()
@@ -52,11 +53,14 @@ const PageContent = ({ balances, symbol }: { balances: Balances; symbol: string
             <ChevronLeftIcon />
             <span className="text-sm">{t("Asset")}</span>
           </button>
-          <div className="flex items-center gap-4">
-            <div className="w-12 shrink-0 text-lg">
-              <TokenLogo tokenId={token?.id} />
+          <div className="flex items-center gap-6">
+            <div className="text-3xl">
+              <TokenLogo tokenId={token?.id} className="text-3xl" />
+            </div>
+            <div>
+              <div className="text-md">{token?.symbol}</div>
+              {rate && <Fiat amount={rate} className="text-body-secondary" />}
             </div>
-            <div className="text-md">{token?.symbol}</div>
             <div className="flex flex-wrap">
               <Tooltip>
                 <TooltipTrigger

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 } = useTokenBalancesSummary(balancesToDisplay)
+  const { token, rate } = useTokenBalancesSummary(balancesToDisplay)
 
   const handleBackBtnClick = useCallback(() => navigate(-1), [navigate])
 
@@ -41,11 +41,11 @@ const PageContent = ({ balances, symbol }: { balances: Balances; symbol: string
         </div>
         <div className="flex grow flex-col gap-1 pl-2 text-sm">
           <div className="text-body-secondary flex justify-between">
-            <div>{t("Asset")}</div>
+            <div>{symbol}</div>
             <div>{t("Total")}</div>
           </div>
           <div className="text-md flex justify-between font-bold">
-            <div>{symbol}</div>
+            {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
@@ -2,6 +2,7 @@ import { TALISMAN_WEB_APP_STAKING_URL } from "@core/constants"
 import { Balances } from "@core/domains/balances/types"
 import { ExternalLinkIcon, XIcon, ZapIcon } from "@talismn/icons"
 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 { FC, useCallback } from "react"
@@ -56,7 +57,7 @@ const AssetRow = ({ balances }: AssetRowProps) => {
 
   const status = useBalancesStatus(balances)
 
-  const { token, summary } = useTokenBalancesSummary(balances)
+  const { token, rate, summary } = useTokenBalancesSummary(balances)
   const { showNomPoolBanner, dismissNomPoolBanner } = useNomPoolStakingBanner()
   const showBanner = showNomPoolBanner({
     chainId: token?.chain?.id,
@@ -130,19 +131,22 @@ const AssetRow = ({ balances }: AssetRowProps) => {
               <TokenLogo tokenId={token.id} />
             </div>
             <div className="flex grow flex-col justify-center gap-2">
-              <div className="text-body flex items-center gap-4 text-base font-bold">
-                {token.symbol}
-                {!!token.isTestnet && (
-                  <span className="text-tiny bg-alert-warn/10 text-alert-warn rounded px-3 py-1 font-light">
-                    {t("Testnet")}
-                  </span>
+              <div className="flex items-center gap-3">
+                <div className="text-body flex items-center gap-4 text-base font-bold">
+                  {token.symbol}
+                  {!!token.isTestnet && (
+                    <span className="text-tiny bg-alert-warn/10 text-alert-warn rounded px-3 py-1 font-light">
+                      {t("Testnet")}
+                    </span>
+                  )}
+                </div>
+                {!!networkIds.length && (
+                  <div>
+                    <NetworksLogoStack networkIds={networkIds} max={3} />
+                  </div>
                 )}
               </div>
-              {!!networkIds.length && (
-                <div>
-                  <NetworksLogoStack networkIds={networkIds} />
-                </div>
-              )}
+              {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,7 +88,7 @@ const AssetRow = ({ balances, locked }: AssetRowProps) => {
   const { account } = useSearchParamsSelectedAccount()
   const status = useBalancesStatus(balances)
 
-  const { token, summary } = useTokenBalancesSummary(balances)
+  const { token, summary, rate } = useTokenBalancesSummary(balances)
   const { showNomPoolBanner, dismissNomPoolBanner } = useNomPoolStakingBanner()
   const showBanner = showNomPoolBanner({
     chainId: token?.chain?.id,
@@ -152,19 +152,22 @@ const AssetRow = ({ balances, locked }: AssetRowProps) => {
           <div className="relative grow">
             {/* we want content from this cell to be hidden if there are too many tokens to display on right cell */}
             <div className="absolute left-0 top-0 flex w-full flex-col gap-2 overflow-hidden text-left">
-              <div className="text-body flex items-center gap-3 whitespace-nowrap text-sm font-bold">
-                {token.symbol}
-                {!!token.isTestnet && (
-                  <span className="text-tiny bg-alert-warn/10 text-alert-warn rounded px-3 py-1 font-light">
-                    {t("Testnet")}
-                  </span>
+              <div className="flex items-center gap-3">
+                <div className="text-body flex items-center gap-3 whitespace-nowrap text-sm font-bold">
+                  {token.symbol}
+                  {!!token.isTestnet && (
+                    <span className="text-tiny bg-alert-warn/10 text-alert-warn rounded px-3 py-1 font-light">
+                      {t("Testnet")}
+                    </span>
+                  )}
+                </div>
+                {!!networkIds.length && (
+                  <div className="text-base">
+                    <NetworksLogoStack networkIds={networkIds} max={3} />
+                  </div>
                 )}
               </div>
-              {!!networkIds.length && (
-                <div className="text-base">
-                  <NetworksLogoStack networkIds={networkIds} />
-                </div>
-              )}
+              {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
@@ -155,5 +155,11 @@ export const useTokenBalancesSummary = (balances: Balances) => {
     return summary
   }, [currency, tokenBalanceRates, tokenBalances.count, tokenBalances.each])
 
-  return { token, summary, tokenBalances, tokenBalanceRates }
+  return {
+    token,
+    rate: token?.id !== undefined ? tokenBalanceRates[token?.id]?.[currency] : undefined,
+    summary,
+    tokenBalances,
+    tokenBalanceRates,
+  }
 }