feat: asset price display

TalismanSociety · Sep 26, 2023 · d2fb4f9 · d2fb4f9
1 parent 344ddb3
commit d2fb4f9
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 31 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"
@@ -10,6 +11,7 @@ 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"
@@ -19,7 +21,8 @@ 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 currency = useSelectedCurrency()
+  const { token, rates, summary } = useTokenBalancesSummary(balancesToDisplay)
   const { open: openCopyAddressModal } = useCopyAddressModal()
   const { genericEvent } = useAnalytics()
   const { account } = useSelectedAccount()
@@ -52,11 +55,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>
+              {rates && <Fiat amount={rates[currency]} 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, rates } = 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>
+            {rates && <Fiat amount={rates[currency]} />}
             <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,8 +2,10 @@ 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 { useSelectedCurrency } from "@ui/hooks/useCurrency"
 import { FC, useCallback } from "react"
 import { Trans, useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
@@ -56,7 +58,8 @@ const AssetRow = ({ balances }: AssetRowProps) => {
 
   const status = useBalancesStatus(balances)
 
-  const { token, summary } = useTokenBalancesSummary(balances)
+  const currency = useSelectedCurrency()
+  const { token, rates, summary } = useTokenBalancesSummary(balances)
   const { showNomPoolBanner, dismissNomPoolBanner } = useNomPoolStakingBanner()
   const showBanner = showNomPoolBanner({
     chainId: token?.chain?.id,
@@ -130,18 +133,23 @@ 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>
+              {rates !== undefined && (
+                <Fiat amount={rates[currency]} className="text-body-secondary" />
               )}
             </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,8 @@ const AssetRow = ({ balances, locked }: AssetRowProps) => {
   const { account } = useSearchParamsSelectedAccount()
   const status = useBalancesStatus(balances)
 
-  const { token, summary } = useTokenBalancesSummary(balances)
+  const currency = useSelectedCurrency()
+  const { token, summary, rates } = useTokenBalancesSummary(balances)
   const { showNomPoolBanner, dismissNomPoolBanner } = useNomPoolStakingBanner()
   const showBanner = showNomPoolBanner({
     chainId: token?.chain?.id,
@@ -152,18 +153,23 @@ 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>
+              {rates !== undefined && (
+                <Fiat amount={rates[currency]} className="text-body-secondary text-xs" />
               )}
             </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,
+    rates: token?.id !== undefined ? tokenBalanceRates[token?.id] : undefined,
+    summary,
+    tokenBalances,
+    tokenBalanceRates,
+  }
 }