Compare commits

..

3 Commits

Author SHA1 Message Date
Moody Salem
a5ff3beb92 add a comment for the previous change 2020-06-22 16:12:02 -05:00
Moody Salem
35ccf425f6 improvement(modals): do not focus inputs automatically on mobile 2020-06-22 16:11:32 -05:00
Moody Salem
fe030412cd improvement(pair search modal): show exact symbol match pairs first, filter before sorting 2020-06-22 14:37:52 -05:00
2 changed files with 15 additions and 7 deletions

View File

@@ -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)'

View File

@@ -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}