From d2fb4f9f8f333b0f6d6a7e9f92e99018ebb75348 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ti=E1=BA=BFn=20Nguy=E1=BB=85n=20Kh=E1=BA=AFc?= Date: Tue, 26 Sep 2023 16:48:21 +1300 Subject: [PATCH] feat: asset price display --- .../routes/Portfolio/PortfolioAsset.tsx | 16 ++++++---- .../popup/pages/Portfolio/PortfolioAsset.tsx | 6 ++-- .../AssetsTable/DashboardAssetsTable.tsx | 30 ++++++++++++------- .../AssetsTable/PopupAssetsTable.tsx | 28 ++++++++++------- .../Portfolio/useTokenBalancesSummary.ts | 8 ++++- 5 files changed, 57 insertions(+), 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 index ab8e3cf23a..601cb5f70a 100644 --- 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 {t("Asset")} -
-
- +
+
+ +
+
+
{token?.symbol}
+ {rates && }
-
{token?.symbol}
navigate(-1), [navigate]) @@ -41,11 +41,11 @@ const PageContent = ({ balances, symbol }: { balances: Balances; symbol: string
-
{t("Asset")}
+
{symbol}
{t("Total")}
-
{symbol}
+ {rates && }
diff --git a/apps/extension/src/ui/domains/Portfolio/AssetsTable/DashboardAssetsTable.tsx b/apps/extension/src/ui/domains/Portfolio/AssetsTable/DashboardAssetsTable.tsx index 86f5c789d9..15f4f345f2 100644 --- 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) => {
-
- {token.symbol} - {!!token.isTestnet && ( - - {t("Testnet")} - +
+
+ {token.symbol} + {!!token.isTestnet && ( + + {t("Testnet")} + + )} +
+ {!!networkIds.length && ( +
+ +
)}
- {!!networkIds.length && ( -
- -
+ {rates !== undefined && ( + )}
diff --git a/apps/extension/src/ui/domains/Portfolio/AssetsTable/PopupAssetsTable.tsx b/apps/extension/src/ui/domains/Portfolio/AssetsTable/PopupAssetsTable.tsx index bb1f31bfdf..f2ba088e12 100644 --- 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) => {
{/* we want content from this cell to be hidden if there are too many tokens to display on right cell */}
-
- {token.symbol} - {!!token.isTestnet && ( - - {t("Testnet")} - +
+
+ {token.symbol} + {!!token.isTestnet && ( + + {t("Testnet")} + + )} +
+ {!!networkIds.length && ( +
+ +
)}
- {!!networkIds.length && ( -
- -
+ {rates !== undefined && ( + )}
diff --git a/apps/extension/src/ui/domains/Portfolio/useTokenBalancesSummary.ts b/apps/extension/src/ui/domains/Portfolio/useTokenBalancesSummary.ts index 56f1d25f82..46a6b1c9d3 100644 --- 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, + } }