Asset display in popup fixes (#1169)

* fix: asset display when hideDust true, and selected account via url params

* fix: fix determining whether account has a balance or not

apps/extension/src/ui/apps/popup/components/Navigation/BottomNav.tsx

@@ -4,9 +4,9 @@ import { AlertCircleIcon, HistoryIcon, PieChartIcon, ZapIcon } from "@talismn/ic
 import { classNames } from "@talismn/util"
 import { api } from "@ui/api"
 import { AnalyticsPage, sendAnalyticsEvent } from "@ui/api/analytics"
+import { useSelectedAccount } from "@ui/domains/Portfolio/SelectedAccountContext"
 import { PendingTransactionsDrawer } from "@ui/domains/Transactions/PendingTransactionsDrawer"
 import useMnemonicBackup from "@ui/hooks/useMnemonicBackup"
-import { useSearchParamsSelectedAccount } from "@ui/hooks/useSearchParamsSelectedAccount"
 import { useSearchParamsSelectedFolder } from "@ui/hooks/useSearchParamsSelectedFolder"
 import { useLiveQuery } from "dexie-react-hooks"
 import { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef, useCallback } from "react"
@@ -93,7 +93,7 @@ export const BottomNav = () => {
   const navigate = useNavigate()
   const location = useLocation()
   const { folder } = useSearchParamsSelectedFolder()
-  const { account } = useSearchParamsSelectedAccount()
+  const { account } = useSelectedAccount()
   const { open } = useNavigationContext()
 
   const handleHomeClick = useCallback(() => {

apps/extension/src/ui/apps/popup/pages/Portfolio/PortfolioAsset.tsx

@@ -4,12 +4,12 @@ import Fiat from "@ui/domains/Asset/Fiat"
 import { TokenLogo } from "@ui/domains/Asset/TokenLogo"
 import { PopupAssetDetails } from "@ui/domains/Portfolio/AssetDetails"
 import { usePortfolio } from "@ui/domains/Portfolio/context"
+import { useSelectedAccount } from "@ui/domains/Portfolio/SelectedAccountContext"
 import { useDisplayBalances } from "@ui/domains/Portfolio/useDisplayBalances"
 import { useTokenBalancesSummary } from "@ui/domains/Portfolio/useTokenBalancesSummary"
 import { useAnalytics } from "@ui/hooks/useAnalytics"
 import useBalances from "@ui/hooks/useBalances"
 import { useSelectedCurrency } from "@ui/hooks/useCurrency"
-import { useSearchParamsSelectedAccount } from "@ui/hooks/useSearchParamsSelectedAccount"
 import { useCallback, useEffect, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { Navigate, useNavigate, useParams, useSearchParams } from "react-router-dom"
@@ -62,7 +62,7 @@ const PageContent = ({ balances, symbol }: { balances: Balances; symbol: string
 export const PortfolioAsset = () => {
   const { symbol } = useParams()
   const [search] = useSearchParams()
-  const { account } = useSearchParamsSelectedAccount()
+  const { account } = useSelectedAccount()
   const allBalances = useBalances()
   const { networkBalances } = usePortfolio()
   const { popupOpenEvent } = useAnalytics()

apps/extension/src/ui/apps/popup/pages/Portfolio/PortfolioAssets.tsx

@@ -9,12 +9,12 @@ import Fiat from "@ui/domains/Asset/Fiat"
 import { useCopyAddressModal } from "@ui/domains/CopyAddress"
 import { PopupAssetsTable } from "@ui/domains/Portfolio/AssetsTable"
 import { usePortfolio } from "@ui/domains/Portfolio/context"
+import { useSelectedAccount } from "@ui/domains/Portfolio/SelectedAccountContext"
 import { useDisplayBalances } from "@ui/domains/Portfolio/useDisplayBalances"
 import { useAnalytics } from "@ui/hooks/useAnalytics"
 import useBalances from "@ui/hooks/useBalances"
 import { useSelectedCurrency } from "@ui/hooks/useCurrency"
 import { useFormattedAddress } from "@ui/hooks/useFormattedAddress"
-import { useSearchParamsSelectedAccount } from "@ui/hooks/useSearchParamsSelectedAccount"
 import { useSearchParamsSelectedFolder } from "@ui/hooks/useSearchParamsSelectedFolder"
 import { useSendFundsPopup } from "@ui/hooks/useSendFundsPopup"
 import { useCallback, useEffect, useMemo } from "react"
@@ -35,7 +35,7 @@ const PageContent = ({
   allBalances: Balances
   networkBalances: Balances
 }) => {
-  const { account } = useSearchParamsSelectedAccount()
+  const { account } = useSelectedAccount()
   const { folder } = useSearchParamsSelectedFolder()
 
   const formattedAddress = useFormattedAddress(account?.address, account?.genesisHash)

apps/extension/src/ui/domains/Account/CurrentAccountAvatar.tsx

@@ -3,11 +3,11 @@ import { AccountJsonAny } from "@core/domains/accounts/types"
 import { WithTooltip } from "@talisman/components/Tooltip"
 import { classNames } from "@talismn/util"
 import { AllAccountsIcon } from "@ui/domains/Account/AllAccountsIcon"
-import { useSearchParamsSelectedAccount } from "@ui/hooks/useSearchParamsSelectedAccount"
 import { useSearchParamsSelectedFolder } from "@ui/hooks/useSearchParamsSelectedFolder"
 import { useMemo } from "react"
 import { useTranslation } from "react-i18next"
 
+import { useSelectedAccount } from "../Portfolio/SelectedAccountContext"
 import { AccountFolderIcon } from "./AccountFolderIcon"
 import { AccountIcon } from "./AccountIcon"
 
@@ -44,7 +44,7 @@ export const CurrentAccountAvatar = ({
   className?: string
   withTooltip?: boolean
 }) => {
-  const { account } = useSearchParamsSelectedAccount()
+  const { account } = useSelectedAccount()
   const { folder } = useSearchParamsSelectedFolder()
   const { t } = useTranslation()
   const tooltip = useMemo(() => {

apps/extension/src/ui/domains/Portfolio/AssetDetails/CopyAddressIconButton.tsx

@@ -2,7 +2,6 @@ import { ChainId, EvmNetworkId } from "@talismn/chaindata-provider"
 import { CopyIcon } from "@talismn/icons"
 import { useCopyAddressModal } from "@ui/domains/CopyAddress"
 import { useAnalytics } from "@ui/hooks/useAnalytics"
-import { useSearchParamsSelectedAccount } from "@ui/hooks/useSearchParamsSelectedAccount"
 import { useSetting } from "@ui/hooks/useSettings"
 import useTokens from "@ui/hooks/useTokens"
 import { useCallback } from "react"
@@ -16,13 +15,10 @@ export const CopyAddressButton = ({
   symbol: string
   networkId: ChainId | EvmNetworkId | null | undefined
 }) => {
-  const { account: searchParamsSelectedAccount } = useSearchParamsSelectedAccount()
-  const { account: selectedAccount } = useSelectedAccount()
+  const { account } = useSelectedAccount()
   const [useTestnets] = useSetting("useTestnets")
   const { tokens } = useTokens(useTestnets)
 
-  const account = searchParamsSelectedAccount ?? selectedAccount
-
   const token = tokens?.find(
     (t) =>
       t.symbol === symbol &&

apps/extension/src/ui/domains/Portfolio/AssetDetails/SendFundsIconButton.tsx

@@ -1,6 +1,5 @@
 import { ChainId, EvmNetworkId } from "@talismn/chaindata-provider"
 import { SendIcon } from "@talismn/icons"
-import { useSearchParamsSelectedAccount } from "@ui/hooks/useSearchParamsSelectedAccount"
 import { useSendFundsPopup } from "@ui/hooks/useSendFundsPopup"
 import { useSetting } from "@ui/hooks/useSettings"
 import useTokens from "@ui/hooks/useTokens"
@@ -19,13 +18,10 @@ export const SendFundsButton = ({
   networkId: ChainId | EvmNetworkId
   shouldClose?: boolean
 }) => {
-  const { account: searchParamsSelectedAccount } = useSearchParamsSelectedAccount()
-  const { account: selectedAccount } = useSelectedAccount()
+  const { account } = useSelectedAccount()
   const [useTestnets] = useSetting("useTestnets")
   const { tokens } = useTokens(useTestnets)
 
-  const account = searchParamsSelectedAccount ?? selectedAccount
-
   const token = tokens?.find(
     (t) =>
       t.symbol === symbol &&

apps/extension/src/ui/domains/Portfolio/AssetsTable/PopupAssetsTable.tsx

@@ -10,7 +10,6 @@ import Tokens from "@ui/domains/Asset/Tokens"
 import { useAnalytics } from "@ui/hooks/useAnalytics"
 import { useBalancesStatus } from "@ui/hooks/useBalancesStatus"
 import { useSelectedCurrency } from "@ui/hooks/useCurrency"
-import { useSearchParamsSelectedAccount } from "@ui/hooks/useSearchParamsSelectedAccount"
 import { MouseEventHandler, ReactNode, useCallback, useMemo } from "react"
 import { Trans, useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
@@ -85,7 +84,7 @@ const AssetRow = ({ balances, locked }: AssetRowProps) => {
   const networkIds = usePortfolioNetworkIds(balances)
   const { genericEvent } = useAnalytics()
 
-  const { account } = useSearchParamsSelectedAccount()
+  const { account } = useSelectedAccount()
   const status = useBalancesStatus(balances)
 
   const { token, summary, rate } = useTokenBalancesSummary(balances)
@@ -269,7 +268,6 @@ const BalancesGroup = ({ label, fiatAmount, className, children }: GroupProps) =
 
 export const PopupAssetsTable = ({ balances }: GroupedAssetsTableProps) => {
   const { account } = useSelectedAccount()
-
   // group by status by token (symbol)
   const {
     availableSymbolBalances: available,

apps/extension/src/ui/domains/Portfolio/AssetsTable/usePortfolioSymbolBalances.ts

@@ -95,6 +95,7 @@ const sortSymbolBalancesBy =
 export const usePortfolioSymbolBalances = (balances: Balances) => {
   const currency = useSelectedCurrency()
   const [hideDust] = useSetting("hideDust")
+  const { account, accounts } = useSelectedAccount()
 
   // group balances by token symbol
   // TODO: Move the association between a token on multiple chains into the backend / subsquid.
@@ -110,17 +111,27 @@ export const usePortfolioSymbolBalances = (balances: Balances) => {
       return acc
     }, {})
 
+    const defaultTokens = [
+      DEFAULT_PORTFOLIO_TOKENS_ETHEREUM,
+      DEFAULT_PORTFOLIO_TOKENS_SUBSTRATE,
+    ].flat()
+
     return Object.entries(groupedByToken)
       .map(([key, tokenBalances]): SymbolBalances => [key, new Balances(tokenBalances)])
       .sort(sortSymbolBalancesBy("total", currency))
       .filter(
         hideDust
           ? ([, balances]) =>
               balances.each.flatMap((b) => b.token?.coingeckoId ?? []).length === 0 ||
-              balances.sum.fiat("usd").total >= 1
+              balances.sum.fiat("usd").total >= 1 ||
+              // if an account is selected, still show the default tokens for the selected currency if they are dust
+              (account &&
+                balances.each.flatMap(
+                  (b) => b.token?.symbol && defaultTokens.includes(b.token.symbol)
+                ))
           : () => true
       )
-  }, [balances.each, currency, hideDust])
+  }, [balances.each, currency, hideDust, account])
 
   const availableSymbolBalances = useMemo(() => {
     const available = symbolBalances
@@ -155,7 +166,6 @@ export const usePortfolioSymbolBalances = (balances: Balances) => {
     [currency, symbolBalances]
   )
 
-  const { account, accounts } = useSelectedAccount()
   const { networkFilter } = usePortfolio()
 
   const hasEthereumAccount = useMemo(() => accounts.some((a) => a.type === "ethereum"), [accounts])
@@ -176,17 +186,20 @@ export const usePortfolioSymbolBalances = (balances: Balances) => {
         )
       if (account.genesisHash) return 1
 
-      // DEFAULT_TOKENS are only shown for accounts with no balance
-      const accountHasSomeBalance =
-        balances.find({ address: account?.address }).sum.planck.total > 0n
+      // DEFAULT_TOKENS are only shown for accounts with no visible balance
+      const addressBalances = balances.find({ address: account?.address })
+      const accountHasSomeBalance = hideDust
+        ? addressBalances.sum.fiat("usd").total >= 1
+        : addressBalances.sum.planck.total > 0n
+
       if (accountHasSomeBalance) return 0
 
       if (account.type === "ethereum") return DEFAULT_PORTFOLIO_TOKENS_ETHEREUM.length
       return DEFAULT_PORTFOLIO_TOKENS_SUBSTRATE.length
     })()
 
     return symbolBalances.length < expectedRows ? expectedRows - symbolBalances.length : 0
-  }, [account, hasEthereumAccount, networkFilter, balances, symbolBalances.length])
+  }, [networkFilter, symbolBalances.length, account, hasEthereumAccount, balances, hideDust])
 
   return { symbolBalances, availableSymbolBalances, lockedSymbolBalances, skeletons }
 }

apps/extension/src/ui/domains/Portfolio/SelectedAccountContext.tsx

@@ -1,32 +1,37 @@
 import { AccountJsonAny } from "@core/domains/accounts/types"
 import { provideContext } from "@talisman/util/provideContext"
 import useAccounts from "@ui/hooks/useAccounts"
+import { useSearchParamsSelectedAccount } from "@ui/hooks/useSearchParamsSelectedAccount"
 import { useSetting } from "@ui/hooks/useSettings"
-import { useCallback, useMemo, useState } from "react"
+import { useCallback, useMemo } from "react"
 
 const useSelectedAccountProvider = ({ isPopup }: { isPopup?: boolean }) => {
-  //if isPopup = true, then use in memory address.
-  const [popupAccount, setPopupAccount] = useState<string>()
+  //if isPopup = true, then use account from search parameters.
+  const { account: popupAccount } = useSearchParamsSelectedAccount()
   //if isPopup = false, then use address persisted in settings
-  const [selectedAccount, setSelectedAccount] = useSetting("selectedAccount")
+  const [selectedAccountAddress, setSelectedAccountAddress] = useSetting("selectedAccount")
 
   const accounts = useAccounts()
 
   const account = useMemo(
     () =>
-      accounts.find((account) => account.address === (isPopup ? popupAccount : selectedAccount)),
-    [accounts, isPopup, popupAccount, selectedAccount]
+      isPopup
+        ? popupAccount
+        : accounts.find((account) => account.address === selectedAccountAddress),
+    [accounts, isPopup, popupAccount, selectedAccountAddress]
   )
 
   const select = useCallback(
     (accountOrAddress: AccountJsonAny | string | undefined) => {
+      // in popup, account is selected via url params so this will be a noop
+      if (isPopup) return
+
       const address =
         typeof accountOrAddress === "string" ? accountOrAddress : accountOrAddress?.address
       if (address === undefined || accounts.some((acc) => acc.address === address))
-        if (isPopup) setPopupAccount(address)
-        else setSelectedAccount(address)
+        setSelectedAccountAddress(address)
     },
-    [accounts, isPopup, setSelectedAccount]
+    [accounts, isPopup, setSelectedAccountAddress]
   )
 
   return { select, accounts, account }