{
@@ -522,27 +364,6 @@ function SearchModal({
}
}
- const Filter = ({ title, filter, filterType }: { title: string; filter: string; filterType: string }) => {
- return (
-
{
- setActiveFilter(filter)
- setInvertSearchOrder(invertSearchOrder => !invertSearchOrder)
- }}
- selected={filter === activeFilter}
- >
-
- {title}
-
- {filter === activeFilter && filterType === 'tokens' && (
-
- {!invertSearchOrder ? '↓' : '↑'}
-
- )}
-
- )
- }
-
return (
- {filterType === 'tokens' ? 'Select A Token' : 'Select A Pool'}
+ {filterType === 'tokens' ? 'Select a token' : 'Select a pool'}
@@ -621,11 +442,13 @@ function SearchModal({
{filterType === 'tokens' ? 'Token Name' : 'Pool Name'}
-
+ {filterType === 'tokens' && (
+ setInvertSearchOrder(iso => !iso)}
+ title={filterType === 'tokens' ? 'Your Balances' : ' '}
+ />
+ )}
)}
diff --git a/src/components/SearchModal/sorting.ts b/src/components/SearchModal/sorting.ts
new file mode 100644
index 0000000000..6015538010
--- /dev/null
+++ b/src/components/SearchModal/sorting.ts
@@ -0,0 +1,41 @@
+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])
+}
diff --git a/src/components/SearchModal/styleds.tsx b/src/components/SearchModal/styleds.tsx
new file mode 100644
index 0000000000..adf69e678e
--- /dev/null
+++ b/src/components/SearchModal/styleds.tsx
@@ -0,0 +1,108 @@
+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'};
+`