Merge pull request #475 from BootNodeDev/feat/466

feat(token-select): sort by positive balance by default when wallet connected

Author: gabitoesmiapodo

src/components/pageComponents/home/Examples/demos/TransactionButton/NativeToken.tsx

@@ -1,6 +1,7 @@
 import { Dialog } from '@chakra-ui/react'
 import { type ReactElement, useState } from 'react'
 import { type Hash, parseEther, type TransactionReceipt } from 'viem'
+import { sepolia } from 'viem/chains'
 import { useSendTransaction } from 'wagmi'
 import Wrapper from '@/src/components/pageComponents/home/Examples/demos/TransactionButton/Wrapper'
 import TransactionButton from '@/src/components/sharedComponents/TransactionButton'
@@ -46,7 +47,10 @@ const NativeToken = () => {
         text="Demo transaction that sends 0.1 Sepolia ETH from / to your wallet."
         title="Native token demo"
       >
+        {/* chainId must be explicit: the parent WalletStatusVerifier already verified Sepolia,
+            but TransactionButton checks against appChainId without it. */}
         <TransactionButton
+          chainId={sepolia.id}
           labelSending="Sending 0.1 ETH..."
           onMined={handleOnMined}
           transaction={handleSendTransaction}

src/components/sharedComponents/SignButton.test.tsx

@@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react'
 import type { ReactNode } from 'react'
 import { createElement } from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { Web3Status } from '@/src/hooks/useWeb3Status'
 import SignButton from './SignButton'
 
 const mockSwitchChain = vi.fn()
@@ -45,6 +46,21 @@ vi.mock('wagmi', () => ({
 const { useWalletStatus } = await import('@/src/hooks/useWalletStatus')
 const mockedUseWalletStatus = vi.mocked(useWalletStatus)
 
+const mockWeb3Status = {
+  readOnlyClient: undefined,
+  appChainId: 1,
+  address: '0xdeadbeef',
+  balance: undefined,
+  connectingWallet: false,
+  switchingChain: false,
+  isWalletConnected: true,
+  walletClient: undefined,
+  isWalletSynced: true,
+  walletChainId: 1,
+  switchChain: vi.fn(),
+  disconnect: vi.fn(),
+} as unknown as Web3Status
+
 const system = createSystem(defaultConfig)
 
 const renderWithChakra = (ui: ReactNode) =>
@@ -63,6 +79,7 @@ describe('SignButton', () => {
       targetChain: { id: 1, name: 'Ethereum' } as ReturnType<typeof useWalletStatus>['targetChain'],
       targetChainId: 1,
       switchChain: mockSwitchChain,
+      web3Status: mockWeb3Status,
     })
 
     renderWithChakra(<SignButton message="Hello" />)
@@ -79,6 +96,7 @@ describe('SignButton', () => {
       targetChain: { id: 1, name: 'Ethereum' } as ReturnType<typeof useWalletStatus>['targetChain'],
       targetChainId: 1,
       switchChain: mockSwitchChain,
+      web3Status: mockWeb3Status,
     })
 
     renderWithChakra(
@@ -102,6 +120,7 @@ describe('SignButton', () => {
       >['targetChain'],
       targetChainId: 10,
       switchChain: mockSwitchChain,
+      web3Status: mockWeb3Status,
     })
 
     renderWithChakra(<SignButton message="Hello" />)
@@ -119,6 +138,7 @@ describe('SignButton', () => {
       targetChain: { id: 1, name: 'Ethereum' } as ReturnType<typeof useWalletStatus>['targetChain'],
       targetChainId: 1,
       switchChain: mockSwitchChain,
+      web3Status: mockWeb3Status,
     })
 
     renderWithChakra(<SignButton message="Hello" />)

src/components/sharedComponents/TokenDropdown.tsx

@@ -28,8 +28,9 @@ type Props = ComponentPropsWithoutRef<'span'> & TokenDropdownProps
  * @param {string} [props.placeholder] - Placeholder text for the search input.
  * @param {number} [props.containerHeight] - Height of the virtualized tokens list.
  * @param {number} [props.itemHeight] - Height of each item in the tokens list.
- * @param {boolean} [props.showBalance] - Whether to show the token balance in the list.
+ * @param {boolean} [props.showBalance] - Whether to show the token balance column in each row.
  * @param {boolean} [props.showTopTokens] - Whether to show the top tokens section in the list.
+ * @param {boolean} [props.sortByBalance] - Sort tokens with a positive balance to the top, ordered by USD value descending. Defaults to true when a wallet is connected.
  * @param {ComponentPropsWithoutRef<'span'>} props.restProps - Additional props for the span element.
  *
  * @example

src/components/sharedComponents/TokenInput/index.tsx

@@ -58,8 +58,9 @@ type Props = FlexProps & TokenInputProps
  * @param {number} [props.iconSize=32] - Optional size of the token icon in the list. Default is 32.
  * @param {number} [props.itemHeight=64] - Optional height of each item in the list. Default is 64.
  * @param {boolean} [props.showAddTokenButton=false] - Optional flag to allow adding a token. Default is false.
- * @param {boolean} [props.showBalance=false] - Optional flag to show the token balance in the list. Default is false.
+ * @param {boolean} [props.showBalance=false] - Optional flag to show the token balance column in each row. Default is false.
  * @param {boolean} [props.showTopTokens=false] - Optional flag to show the top tokens in the list. Default is false.
+ * @param {boolean} [props.sortByBalance] - Sort tokens with a positive balance to the top, ordered by USD value descending. Defaults to true when a wallet is connected.
  */
 const TokenInput: FC<Props> = ({
   containerHeight,
@@ -73,6 +74,7 @@ const TokenInput: FC<Props> = ({
   showBalance,
   showTopTokens,
   singleToken,
+  sortByBalance,
   thousandSeparator = true,
   title,
   tokenInput,
@@ -230,6 +232,7 @@ const TokenInput: FC<Props> = ({
               showAddTokenButton={showAddTokenButton}
               showBalance={showBalance}
               showTopTokens={showTopTokens}
+              sortByBalance={sortByBalance}
             >
               <CloseButton
                 aria-label="Close"

src/components/sharedComponents/TokenSelect/List/TokenBalance.tsx

@@ -73,14 +73,16 @@ const TokenBalance = withSuspenseAndRetry<TokenBalanceProps>(({ isLoading, token
 
   if (hasExtensions) {
     const balance = formatUnits((token.extensions?.balance ?? 0n) as bigint, token.decimals)
-    const value = (
-      Number.parseFloat((token.extensions?.priceUSD ?? '0') as string) * Number.parseFloat(balance)
-    ).toFixed(2)
+    const priceUSD = token.extensions?.priceUSD as string | undefined
+    const usdLabel =
+      priceUSD !== undefined
+        ? `$ ${(Number.parseFloat(priceUSD) * Number.parseFloat(balance)).toFixed(2)}`
+        : NO_PRICE_DATA_LABEL
 
     return (
       <Flex {...flexProps}>
         <Box {...balanceBoxProps}>{balance}</Box>
-        <Box {...valueBoxProps}>$ {value}</Box>
+        <Box {...valueBoxProps}>{usdLabel}</Box>
       </Flex>
     )
   }

src/components/sharedComponents/TokenSelect/index.tsx

@@ -25,6 +25,7 @@ export interface TokenSelectProps {
   showAddTokenButton?: boolean
   showTopTokens?: boolean
   showBalance?: boolean
+  sortByBalance?: boolean
 }
 
 /** @ignore */
@@ -42,8 +43,9 @@ type Props = FlexProps & TokenSelectProps
  * @param {number} [props.iconSize=32] - Optional size of the token icon in the list. Default is 32.
  * @param {number} [props.itemHeight=64] - Optional height of each item in the list. Default is 64.
  * @param {boolean} [props.showAddTokenButton=false] - Optional flag to allow adding a token. Default is false.
- * @param {boolean} [props.showBalance=false] - Optional flag to show the token balance in the list. Default is false.
+ * @param {boolean} [props.showBalance=false] - Optional flag to show the token balance column in each row. Default is false.
  * @param {boolean} [props.showTopTokens=false] - Optional flag to show the top tokens in the list. Default is false.
+ * @param {boolean} [props.sortByBalance] - Sort tokens with a positive balance to the top, ordered by USD value descending. Defaults to true when a wallet is connected.
  */
 const TokenSelect = withSuspenseAndRetry<Props>(
   ({
@@ -59,9 +61,10 @@ const TokenSelect = withSuspenseAndRetry<Props>(
     showAddTokenButton = false,
     showBalance = false,
     showTopTokens = false,
+    sortByBalance,
     ...restProps
   }) => {
-    const { appChainId, walletChainId } = useWeb3Status()
+    const { appChainId, isWalletConnected, walletChainId } = useWeb3Status()
 
     const [chainId, setChainId] = useState<Chain['id']>(() =>
       getValidChainId({
@@ -122,9 +125,12 @@ const TokenSelect = withSuspenseAndRetry<Props>(
       previousDepsRef.current = [appChainId, currentNetworkId, walletChainId]
     }, [appChainId, currentNetworkId, networks, walletChainId])
 
+    const resolvedSortByBalance = sortByBalance ?? isWalletConnected
+
     const { isLoadingBalances, tokensByChainId } = useTokens({
       chainId,
-      withBalance: showBalance,
+      withBalance: showBalance || resolvedSortByBalance,
+      sortByBalance: resolvedSortByBalance,
     })
 
     const { searchResult, searchTerm, setSearchTerm } = useTokenSearch(

src/components/sharedComponents/TransactionButton.test.tsx

@@ -2,6 +2,7 @@ import { ChakraProvider, createSystem, defaultConfig } from '@chakra-ui/react'
 import { render, screen } from '@testing-library/react'
 import { createElement, type ReactNode } from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { Web3Status } from '@/src/hooks/useWeb3Status'
 import TransactionButton from './TransactionButton'
 
 const mockSwitchChain = vi.fn()
@@ -43,6 +44,21 @@ vi.mock('wagmi', () => ({
 const { useWalletStatus } = await import('@/src/hooks/useWalletStatus')
 const mockedUseWalletStatus = vi.mocked(useWalletStatus)
 
+const mockWeb3Status = {
+  readOnlyClient: undefined,
+  appChainId: 1,
+  address: '0xdeadbeef',
+  balance: undefined,
+  connectingWallet: false,
+  switchingChain: false,
+  isWalletConnected: true,
+  walletClient: undefined,
+  isWalletSynced: true,
+  walletChainId: 1,
+  switchChain: vi.fn(),
+  disconnect: vi.fn(),
+} as unknown as Web3Status
+
 const system = createSystem(defaultConfig)
 
 const renderWithChakra = (ui: ReactNode) =>
@@ -61,6 +77,7 @@ describe('TransactionButton', () => {
       targetChain: { id: 1, name: 'Ethereum' } as ReturnType<typeof useWalletStatus>['targetChain'],
       targetChainId: 1,
       switchChain: mockSwitchChain,
+      web3Status: mockWeb3Status,
     })
 
     renderWithChakra(<TransactionButton transaction={mockTransaction}>Send</TransactionButton>)
@@ -77,6 +94,7 @@ describe('TransactionButton', () => {
       targetChain: { id: 1, name: 'Ethereum' } as ReturnType<typeof useWalletStatus>['targetChain'],
       targetChainId: 1,
       switchChain: mockSwitchChain,
+      web3Status: mockWeb3Status,
     })
 
     renderWithChakra(
@@ -102,6 +120,7 @@ describe('TransactionButton', () => {
       >['targetChain'],
       targetChainId: 10,
       switchChain: mockSwitchChain,
+      web3Status: mockWeb3Status,
     })
 
     renderWithChakra(<TransactionButton transaction={mockTransaction}>Send</TransactionButton>)
@@ -121,6 +140,7 @@ describe('TransactionButton', () => {
       >['targetChain'],
       targetChainId: 10,
       switchChain: mockSwitchChain,
+      web3Status: mockWeb3Status,
     })
 
     renderWithChakra(
@@ -144,6 +164,7 @@ describe('TransactionButton', () => {
       targetChain: { id: 1, name: 'Ethereum' } as ReturnType<typeof useWalletStatus>['targetChain'],
       targetChainId: 1,
       switchChain: mockSwitchChain,
+      web3Status: mockWeb3Status,
     })
 
     renderWithChakra(<TransactionButton transaction={mockTransaction}>Send ETH</TransactionButton>)

src/components/sharedComponents/WalletStatusVerifier.test.tsx

@@ -3,10 +3,26 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { createElement, type ReactNode } from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { Web3Status } from '@/src/hooks/useWeb3Status'
 import { useWeb3StatusConnected, WalletStatusVerifier } from './WalletStatusVerifier'
 
 const mockSwitchChain = vi.fn()
 
+const mockWeb3Status = {
+  readOnlyClient: undefined,
+  appChainId: 1,
+  address: '0xdeadbeef',
+  balance: undefined,
+  connectingWallet: false,
+  switchingChain: false,
+  isWalletConnected: true,
+  walletClient: undefined,
+  isWalletSynced: true,
+  walletChainId: 1,
+  switchChain: vi.fn(),
+  disconnect: vi.fn(),
+} as unknown as Web3Status
+
 vi.mock('@/src/hooks/useWalletStatus', () => ({
   useWalletStatus: vi.fn(() => ({
     isReady: false,
@@ -15,23 +31,7 @@ vi.mock('@/src/hooks/useWalletStatus', () => ({
     targetChain: { id: 1, name: 'Ethereum' },
     targetChainId: 1,
     switchChain: mockSwitchChain,
-  })),
-}))
-
-vi.mock('@/src/hooks/useWeb3Status', () => ({
-  useWeb3Status: vi.fn(() => ({
-    readOnlyClient: {},
-    appChainId: 1,
-    address: '0xdeadbeef',
-    balance: undefined,
-    connectingWallet: false,
-    switchingChain: false,
-    isWalletConnected: true,
-    walletClient: undefined,
-    isWalletSynced: true,
-    walletChainId: 1,
-    switchChain: vi.fn(),
-    disconnect: vi.fn(),
+    web3Status: mockWeb3Status,
   })),
 }))
 
@@ -65,6 +65,7 @@ describe('WalletStatusVerifier', () => {
       targetChain: { id: 1, name: 'Ethereum' } as ReturnType<typeof useWalletStatus>['targetChain'],
       targetChainId: 1,
       switchChain: mockSwitchChain,
+      web3Status: mockWeb3Status,
     })
 
     renderWithChakra(
@@ -87,6 +88,7 @@ describe('WalletStatusVerifier', () => {
       targetChain: { id: 1, name: 'Ethereum' } as ReturnType<typeof useWalletStatus>['targetChain'],
       targetChainId: 1,
       switchChain: mockSwitchChain,
+      web3Status: mockWeb3Status,
     })
 
     renderWithChakra(
@@ -111,6 +113,7 @@ describe('WalletStatusVerifier', () => {
       >['targetChain'],
       targetChainId: 10,
       switchChain: mockSwitchChain,
+      web3Status: mockWeb3Status,
     })
 
     renderWithChakra(
@@ -134,6 +137,7 @@ describe('WalletStatusVerifier', () => {
       targetChain: { id: 1, name: 'Ethereum' } as ReturnType<typeof useWalletStatus>['targetChain'],
       targetChainId: 1,
       switchChain: mockSwitchChain,
+      web3Status: mockWeb3Status,
     })
 
     renderWithChakra(
@@ -159,6 +163,7 @@ describe('WalletStatusVerifier', () => {
       >['targetChain'],
       targetChainId: 10,
       switchChain: mockSwitchChain,
+      web3Status: mockWeb3Status,
     })
 
     renderWithChakra(
@@ -179,6 +184,7 @@ describe('WalletStatusVerifier', () => {
       targetChain: { id: 1, name: 'Ethereum' } as ReturnType<typeof useWalletStatus>['targetChain'],
       targetChainId: 1,
       switchChain: mockSwitchChain,
+      web3Status: mockWeb3Status,
     })
 
     const ChildComponent = () => {

src/components/sharedComponents/WalletStatusVerifier.tsx

@@ -1,7 +1,7 @@
 import { createContext, type FC, type ReactElement, type ReactNode, useContext } from 'react'
 import SwitchChainButton from '@/src/components/sharedComponents/ui/SwitchChainButton'
 import { useWalletStatus } from '@/src/hooks/useWalletStatus'
-import { useWeb3Status, type Web3Status } from '@/src/hooks/useWeb3Status'
+import type { Web3Status } from '@/src/hooks/useWeb3Status'
 import type { ChainsIds } from '@/src/lib/networks.config'
 import { ConnectWalletButton } from '@/src/providers/Web3Provider'
 import type { RequiredNonNull } from '@/src/types/utils'
@@ -51,9 +51,8 @@ const WalletStatusVerifier: FC<WalletStatusVerifierProps> = ({
   fallback = <ConnectWalletButton />,
   switchChainLabel = 'Switch to',
 }: WalletStatusVerifierProps) => {
-  const { needsConnect, needsChainSwitch, targetChain, targetChainId, switchChain } =
+  const { needsConnect, needsChainSwitch, targetChain, targetChainId, switchChain, web3Status } =
     useWalletStatus({ chainId })
-  const web3Status = useWeb3Status()
 
   if (needsConnect) {
     return fallback