fix: updating currency search panel for number formatting (#7407)

src/components/SearchModal/CurrencyList/index.test.tsx

@@ -96,5 +96,5 @@ it('renders currency rows correctly with balances', () => {
   expect(screen.getByText('Wrapped BTC')).toBeInTheDocument()
   expect(screen.getByText('DAI')).toBeInTheDocument()
   expect(screen.getByText('USDC')).toBeInTheDocument()
-  expect(screen.getByText('2')).toBeInTheDocument()
+  expect(screen.getByText('2.00')).toBeInTheDocument()
 })

src/components/SearchModal/CurrencyList/index.tsx

@@ -14,6 +14,7 @@ import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
 import styled from 'styled-components'
 import { ThemedText } from 'theme/components'
+import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 import { useIsUserAddedToken } from '../../../hooks/Tokens'
 import { WrappedTokenInfo } from '../../../state/lists/wrappedTokenInfo'
@@ -67,7 +68,16 @@ const WarningContainer = styled.div`
 `
 
 function Balance({ balance }: { balance: CurrencyAmount<Currency> }) {
-  return <StyledBalanceText title={balance.toExact()}>{balance.toSignificant(4)}</StyledBalanceText>
+  const { formatNumberOrString } = useFormatter()
+
+  return (
+    <StyledBalanceText title={balance.toExact()}>
+      {formatNumberOrString({
+        input: balance.toExact(),
+        type: NumberType.TokenNonTx,
+      })}
+    </StyledBalanceText>
+  )
 }
 
 const TagContainer = styled.div`