perf(search modal): refactor before more dramatic changes

src/components/CurrencyInputPanel/index.tsx

@@ -125,7 +125,6 @@ interface CurrencyInputPanelProps {
   onMax?: () => void
   showMaxButton: boolean
   label?: string
-  urlAddedTokens?: Token[]
   onTokenSelection?: (tokenAddress: string) => void
   token?: Token | null
   disableTokenSelect?: boolean
@@ -145,7 +144,6 @@ export default function CurrencyInputPanel({
   onMax,
   showMaxButton,
   label = 'Input',
-  urlAddedTokens = [], // used
   onTokenSelection = null,
   token = null,
   disableTokenSelect = false,
@@ -246,7 +244,6 @@ export default function CurrencyInputPanel({
             setModalOpen(false)
           }}
           filterType="tokens"
-          urlAddedTokens={urlAddedTokens}
           onTokenSelect={onTokenSelection}
           showSendWithSwap={showSendWithSwap}
           hiddenToken={token?.address}

src/components/SearchModal/TokenSortButton.tsx

+import React from 'react'
+import { Text } from 'rebass'
+import { FilterWrapper } from './styleds'
+
+export function TokenSortButton({
+  title,
+  toggleSortOrder,
+  invertSearchOrder
+}: {
+  title: string
+  toggleSortOrder: () => void
+  invertSearchOrder: boolean
+}) {
+  return (
+    <FilterWrapper onClick={toggleSortOrder}>
+      <Text fontSize={14} fontWeight={500}>
+        {title}
+      </Text>
+      <Text fontSize={14} fontWeight={500}>
+        {!invertSearchOrder ? '↓' : '↑'}
+      </Text>
+    </FilterWrapper>
+  )
+}

src/components/SearchModal/sorting.ts

+import { Token, TokenAmount, WETH } from '@uniswap/sdk'
+import { useMemo } from 'react'
+import { useActiveWeb3React } from '../../hooks'
+import { useAllTokenBalancesTreatingWETHasETH } from '../../state/wallet/hooks'
+
+function getTokenComparator(
+  weth: Token | undefined,
+  balances: { [tokenAddress: string]: TokenAmount },
+  invertSearchOrder: boolean
+): (tokenA: Token, tokenB: Token) => number {
+  return function sortTokens(tokenA: Token, tokenB: Token): number {
+    // -1 = a is first
+    // 1 = b is first
+
+    // sort ETH first
+    if (weth) {
+      if (tokenA.equals(weth)) return -1
+      if (tokenB.equals(weth)) return 1
+    }
+
+    // sort by balances
+    const balanceA = balances[tokenA.address]
+    const balanceB = balances[tokenB.address]
+
+    if (balanceA?.greaterThan('0') && !balanceB?.greaterThan('0')) return !invertSearchOrder ? -1 : 1
+    if (!balanceA?.greaterThan('0') && balanceB?.greaterThan('0')) return !invertSearchOrder ? 1 : -1
+    if (balanceA?.greaterThan('0') && balanceB?.greaterThan('0')) {
+      return balanceA.greaterThan(balanceB) ? (!invertSearchOrder ? -1 : 1) : !invertSearchOrder ? 1 : -1
+    }
+
+    // sort by symbol
+    return tokenA.symbol.toLowerCase() < tokenB.symbol.toLowerCase() ? -1 : 1
+  }
+}
+
+export function useTokenComparator(inverted: boolean): (tokenA: Token, tokenB: Token) => number {
+  const { account, chainId } = useActiveWeb3React()
+  const weth = WETH[chainId]
+  const balances = useAllTokenBalancesTreatingWETHasETH()
+  return useMemo(() => getTokenComparator(weth, balances[account] ?? {}, inverted), [account, balances, inverted, weth])
+}

src/components/SearchModal/styleds.tsx

+import styled from 'styled-components'
+import { Spinner } from '../../theme'
+import { AutoColumn } from '../Column'
+import { AutoRow, RowBetween, RowFixed } from '../Row'
+
+export const TokenModalInfo = styled.div`
+  ${({ theme }) => theme.flexRowNoWrap}
+  align-items: center;
+  padding: 1rem 1rem;
+  margin: 0.25rem 0.5rem;
+  justify-content: center;
+  user-select: none;
+  min-height: 200px;
+`
+
+export const ItemList = styled.div`
+  flex-grow: 1;
+  height: 254px;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+`
+
+export const FadedSpan = styled(RowFixed)`
+  color: ${({ theme }) => theme.primary1};
+  font-size: 14px;
+`
+
+export const GreySpan = styled.span`
+  color: ${({ theme }) => theme.text3};
+  font-weight: 400;
+`
+
+export const SpinnerWrapper = styled(Spinner)`
+  margin: 0 0.25rem 0 0.25rem;
+  color: ${({ theme }) => theme.text4};
+  opacity: 0.6;
+`
+
+export const Input = styled.input`
+  position: relative;
+  display: flex;
+  padding: 16px;
+  align-items: center;
+  width: 100%;
+  white-space: nowrap;
+  background: none;
+  border: none;
+  outline: none;
+  border-radius: 20px;
+  color: ${({ theme }) => theme.text1};
+  border-style: solid;
+  border: 1px solid ${({ theme }) => theme.bg3};
+  -webkit-appearance: none;
+
+  font-size: 18px;
+
+  ::placeholder {
+    color: ${({ theme }) => theme.text3};
+  }
+`
+
+export const FilterWrapper = styled(RowFixed)`
+  padding: 8px;
+  background-color: ${({ selected, theme }) => selected && theme.bg2};
+  color: ${({ selected, theme }) => (selected ? theme.text1 : theme.text2)};
+  border-radius: 8px;
+  user-select: none;
+  & > * {
+    user-select: none;
+  }
+  :hover {
+    cursor: pointer;
+  }
+`
+
+export const PaddedColumn = styled(AutoColumn)`
+  padding: 20px;
+  padding-bottom: 12px;
+`
+
+const PaddedItem = styled(RowBetween)`
+  padding: 4px 20px;
+  height: 56px;
+`
+
+export const MenuItem = styled(PaddedItem)`
+  cursor: ${({ disabled }) => !disabled && 'pointer'};
+  pointer-events: ${({ disabled }) => disabled && 'none'};
+  :hover {
+    background-color: ${({ theme, disabled }) => !disabled && theme.bg2};
+  }
+  opacity: ${({ disabled, selected }) => (disabled || selected ? 0.5 : 1)};
+`
+
+export const BaseWrapper = styled(AutoRow)<{ disable?: boolean }>`
+  border: 1px solid ${({ theme, disable }) => (disable ? 'transparent' : theme.bg3)};
+  padding: 0 6px;
+  border-radius: 10px;
+  width: 120px;
+
+  :hover {
+    cursor: ${({ disable }) => !disable && 'pointer'};
+    background-color: ${({ theme, disable }) => !disable && theme.bg2};
+  }
+
+  background-color: ${({ theme, disable }) => disable && theme.bg3};
+  opacity: ${({ disable }) => disable && '0.4'};
+`