add a comment for the previous change

src/components/Modal/index.tsx

@@ -70,12 +70,10 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, ...r
     border-radius: 20px;
     ${({ theme }) => theme.mediaWidth.upToMedium`
       width: 65vw;
-      max-height: 65vh;
       margin: 0;
     `}
     ${({ theme, mobile }) => theme.mediaWidth.upToSmall`
       width:  85vw;
-      max-height: 66vh;
       ${mobile &&
         css`
           width: 100vw;
@@ -87,14 +85,6 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, ...r
   }
 `
 
-const HiddenCloseButton = styled.button`
-  margin: 0;
-  padding: 0;
-  width: 0;
-  height: 0;
-  border: none;
-`
-
 interface ModalProps {
   isOpen: boolean
   onDismiss: () => void
@@ -119,7 +109,7 @@ export default function Modal({
     leave: { opacity: 0 }
   })
 
-  const [{ xy }, set] = useSpring(() => ({ xy: [0, 0] }))
+  const [{ y }, set] = useSpring(() => ({ y: 0, config: { mass: 1, tension: 210, friction: 20 } }))
   const bind = useGesture({
     onDrag: state => {
       let velocity = state.velocity
@@ -130,8 +120,7 @@ export default function Modal({
         velocity = 8
       }
       set({
-        xy: state.down ? state.movement : [0, 0],
-        config: { mass: 1, tension: 210, friction: 20 }
+        y: state.down ? state.movement[1] : 0
       })
       if (velocity > 3 && state.direction[1] > 0) {
         onDismiss()
@@ -152,6 +141,8 @@ export default function Modal({
                 initialFocusRef={initialFocusRef}
                 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
                   from={{
                     transform: isOpen ? 'translateY(200px)' : 'translateY(100px)'
@@ -164,18 +155,17 @@ export default function Modal({
                     <animated.div
                       {...bind()}
                       style={{
-                        transform: (xy as any).interpolate((x, y) => `translate3d(${0}px,${y > 0 ? y : 0}px,0)`)
+                        transform: y.interpolate(y => `translateY(${y > 0 ? y : 0}px)`)
                       }}
                     >
                       <StyledDialogContent
-                        ariaLabel="test"
+                        aria-label="dialog content"
                         style={props}
                         hidden={true}
                         minHeight={minHeight}
                         maxHeight={maxHeight}
-                        mobile={isMobile ?? undefined}
+                        mobile={isMobile}
                       >
-                        <HiddenCloseButton onClick={onDismiss} />
                         {children}
                       </StyledDialogContent>
                     </animated.div>
@@ -193,8 +183,13 @@ export default function Modal({
           ({ item, key, props }) =>
             item && (
               <StyledDialogOverlay key={key} style={props} onDismiss={onDismiss} initialFocusRef={initialFocusRef}>
-                <StyledDialogContent hidden={true} minHeight={minHeight} maxHeight={maxHeight} isOpen={isOpen}>
-                  <HiddenCloseButton onClick={onDismiss} />
+                <StyledDialogContent
+                  aria-label="dialog content"
+                  hidden={true}
+                  minHeight={minHeight}
+                  maxHeight={maxHeight}
+                  isOpen={isOpen}
+                >
                   {children}
                 </StyledDialogContent>
               </StyledDialogOverlay>

src/components/SearchModal/PairSearchModal.tsx

@@ -54,17 +54,23 @@ function PairSearchModal({ history, isOpen, onDismiss }: PairSearchModalProps) {
     setSearchQuery(checksummedInput || input)
   }
 
+  const filteredPairs = useMemo(() => {
+    return filterPairs(allPairs, searchQuery)
+  }, [allPairs, searchQuery])
+
   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 balanceB = allPairBalances[b.liquidityToken.address]
       return pairComparator(a, b, balanceA, balanceB)
     })
-  }, [allPairs, allPairBalances])
-
-  const filteredPairs = useMemo(() => {
-    return filterPairs(sortedPairList, searchQuery)
-  }, [searchQuery, sortedPairList])
+  }, [searchQuery, filteredPairs, allPairBalances])
 
   const selectPair = useCallback(
     (pair: Pair) => {
@@ -110,7 +116,7 @@ function PairSearchModal({ history, isOpen, onDismiss }: PairSearchModalProps) {
         </PaddedColumn>
         <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />
         <PairList
-          pairs={filteredPairs}
+          pairs={sortedPairList}
           focusTokenAddress={focusedToken?.address}
           onAddLiquidity={selectPair}
           onSelectPair={selectPair}

src/constants/tokens/mainnet.ts

@@ -19,6 +19,7 @@ export default [
   new Token(ChainId.MAINNET, '0x39AA39c021dfbaE8faC545936693aC917d5E7563', 8, 'cUSDC', 'Compound USD Coin'),
   new Token(ChainId.MAINNET, '0xaaAEBE6Fe48E54f431b0C390CfaF0b017d09D42d', 4, 'CEL', 'Celsius'),
   new Token(ChainId.MAINNET, '0x06AF07097C9Eeb7fD685c692751D5C66dB49c215', 18, 'CHAI', 'Chai'),
+  new Token(ChainId.MAINNET, '0xc00e94Cb662C3520282E6f5717214004A7f26888', 18, 'COMP', 'Compound'),
   new Token(ChainId.MAINNET, '0x89d24A6b4CcB1B6fAA2625fE562bDD9a23260359', 18, 'SAI', 'Dai Stablecoin v1.0 (SAI)'),
   new Token(ChainId.MAINNET, '0x6B175474E89094C44Da98b954EedeAC495271d0F', 18, 'DAI', 'Dai Stablecoin'),
   new Token(ChainId.MAINNET, '0x0Cf0Ee63788A0849fE5297F3407f701E122cC023', 18, 'DATA', 'Streamr DATAcoin'),
@@ -64,6 +65,7 @@ export default [
   new Token(ChainId.MAINNET, '0x9f8F72aA9304c8B593d555F12eF6589cC3A579A2', 18, 'MKR', 'Maker'),
   new Token(ChainId.MAINNET, '0xec67005c4E498Ec7f55E092bd1d35cbC47C91892', 18, 'MLN', 'Melon Token'),
   new Token(ChainId.MAINNET, '0x957c30aB0426e0C93CD8241E2c60392d08c6aC8e', 0, 'MOD', 'Modum Token'),
+  new Token(ChainId.MAINNET, '0xe2f2a5C287993345a840Db3B0845fbC70f5935a5', 18, 'mUSD', 'mStable USD'),
   new Token(ChainId.MAINNET, '0xB62132e35a6c13ee1EE0f84dC5d40bad8d815206', 18, 'NEXO', 'Nexo'),
   new Token(ChainId.MAINNET, '0x1776e1F26f98b1A5dF9cD347953a26dd3Cb46671', 18, 'NMR', 'Numeraire'),
   new Token(ChainId.MAINNET, '0x985dd3D42De1e256d09e1c10F112bCCB8015AD41', 18, 'OCEAN', 'OceanToken'),
@@ -94,6 +96,7 @@ export default [
   new Token(ChainId.MAINNET, '0xC011a73ee8576Fb46F5E1c5751cA3B9Fe0af2a6F', 18, 'SNX', 'Synthetix Network Token'),
   new Token(ChainId.MAINNET, '0x23B608675a2B2fB1890d3ABBd85c5775c51691d5', 18, 'SOCKS', 'Unisocks Edition 0'),
   new Token(ChainId.MAINNET, '0x42d6622deCe394b54999Fbd73D108123806f6a18', 18, 'SPANK', 'SPANK'),
+  new Token(ChainId.MAINNET, '0x0Ae055097C6d159879521C384F1D2123D1f195e6', 18, 'STAKE', 'STAKE'),
   new Token(ChainId.MAINNET, '0xB64ef51C888972c908CFacf59B47C1AfBC0Ab8aC', 8, 'STORJ', 'StorjToken'),
   new Token(ChainId.MAINNET, '0x57Ab1ec28D129707052df4dF418D58a2D46d5f51', 18, 'sUSD', 'Synth sUSD'),
   new Token(ChainId.MAINNET, '0x261EfCdD24CeA98652B9700800a13DfBca4103fF', 18, 'sXAU', 'Synth sXAU'),