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..c3a968e0f0 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" @@ -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 {t("Asset")} -
-
- +
+
+ +
+
+
{token?.symbol}
+ {rate && }
-
{token?.symbol}
navigate(-1), [navigate]) @@ -41,11 +41,11 @@ const PageContent = ({ balances, symbol }: { balances: Balances; symbol: string
-
{t("Asset")}
+
{symbol}
{t("Total")}
-
{symbol}
+ {rate && }
diff --git a/apps/extension/src/ui/domains/Portfolio/AssetsTable/DashboardAssetsTable.tsx b/apps/extension/src/ui/domains/Portfolio/AssetsTable/DashboardAssetsTable.tsx index 86f5c789d9..2965bb8124 100644 --- 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) => {
-
- {token.symbol} - {!!token.isTestnet && ( - - {t("Testnet")} - +
+
+ {token.symbol} + {!!token.isTestnet && ( + + {t("Testnet")} + + )} +
+ {!!networkIds.length && ( +
+ +
)}
- {!!networkIds.length && ( -
- -
- )} + {rate !== 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..77285363ad 100644 --- 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) => {
{/* 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 && ( -
- -
- )} + {rate !== undefined && }
{ 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, + } }