Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
a5ff3beb92 | ||
|
|
35ccf425f6 | ||
|
|
fe030412cd |
@@ -141,6 +141,8 @@ export default function Modal({
|
|||||||
initialFocusRef={initialFocusRef}
|
initialFocusRef={initialFocusRef}
|
||||||
mobile={true}
|
mobile={true}
|
||||||
>
|
>
|
||||||
|
{/* prevents the automatic focusing of inputs on mobile by the reach dialog */}
|
||||||
|
{initialFocusRef ? null : <div tabIndex={1} />}
|
||||||
<Spring // animation for entrance and exit
|
<Spring // animation for entrance and exit
|
||||||
from={{
|
from={{
|
||||||
transform: isOpen ? 'translateY(200px)' : 'translateY(100px)'
|
transform: isOpen ? 'translateY(200px)' : 'translateY(100px)'
|
||||||
|
|||||||
@@ -54,17 +54,23 @@ function PairSearchModal({ history, isOpen, onDismiss }: PairSearchModalProps) {
|
|||||||
setSearchQuery(checksummedInput || input)
|
setSearchQuery(checksummedInput || input)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const filteredPairs = useMemo(() => {
|
||||||
|
return filterPairs(allPairs, searchQuery)
|
||||||
|
}, [allPairs, searchQuery])
|
||||||
|
|
||||||
const sortedPairList = useMemo(() => {
|
const sortedPairList = useMemo(() => {
|
||||||
return allPairs.sort((a, b): number => {
|
const query = searchQuery.toLowerCase()
|
||||||
|
const queryMatches = (pair: Pair): boolean =>
|
||||||
|
pair.token0.symbol.toLowerCase() === query || pair.token1.symbol.toLowerCase() === query
|
||||||
|
return filteredPairs.sort((a, b): number => {
|
||||||
|
const [aMatches, bMatches] = [queryMatches(a), queryMatches(b)]
|
||||||
|
if (aMatches && !bMatches) return -1
|
||||||
|
if (bMatches && !aMatches) return 1
|
||||||
const balanceA = allPairBalances[a.liquidityToken.address]
|
const balanceA = allPairBalances[a.liquidityToken.address]
|
||||||
const balanceB = allPairBalances[b.liquidityToken.address]
|
const balanceB = allPairBalances[b.liquidityToken.address]
|
||||||
return pairComparator(a, b, balanceA, balanceB)
|
return pairComparator(a, b, balanceA, balanceB)
|
||||||
})
|
})
|
||||||
}, [allPairs, allPairBalances])
|
}, [searchQuery, filteredPairs, allPairBalances])
|
||||||
|
|
||||||
const filteredPairs = useMemo(() => {
|
|
||||||
return filterPairs(sortedPairList, searchQuery)
|
|
||||||
}, [searchQuery, sortedPairList])
|
|
||||||
|
|
||||||
const selectPair = useCallback(
|
const selectPair = useCallback(
|
||||||
(pair: Pair) => {
|
(pair: Pair) => {
|
||||||
@@ -110,7 +116,7 @@ function PairSearchModal({ history, isOpen, onDismiss }: PairSearchModalProps) {
|
|||||||
</PaddedColumn>
|
</PaddedColumn>
|
||||||
<div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />
|
<div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />
|
||||||
<PairList
|
<PairList
|
||||||
pairs={filteredPairs}
|
pairs={sortedPairList}
|
||||||
focusTokenAddress={focusedToken?.address}
|
focusTokenAddress={focusedToken?.address}
|
||||||
onAddLiquidity={selectPair}
|
onAddLiquidity={selectPair}
|
||||||
onSelectPair={selectPair}
|
onSelectPair={selectPair}
|
||||||
|
|||||||
Reference in New Issue
Block a user