add import to token search

src/components/Button/index.js

@@ -40,6 +40,9 @@ export const ButtonPrimary = styled(Base)`
     background-color: ${({ theme }) => theme.outlineGrey};
     color: ${({ theme }) => theme.darkGrey}
     cursor: auto;
+    outline: none;
+    border: none;
+    box-shadow: none;
   }
 `
 

src/components/TokenFind/index.js → src/components/PoolFinder/index.js

 import React, { useState } from 'react'
-import styled from 'styled-components'
 import { withRouter } from 'react-router-dom'
 import { JSBI } from '@uniswap/sdk'
 
@@ -8,18 +7,18 @@ import { useToken } from '../../contexts/Tokens'
 import { useExchange } from '../../contexts/Exchanges'
 import { useAddressBalance } from '../../contexts/Balances'
 
-import { LightCard } from '../../components/Card'
-import PositionCard from '../../components/PositionCard'
-import SearchModal from '../../components/SearchModal'
-import Row from '../../components/Row'
+import { LightCard } from '../Card'
+import PositionCard from '../PositionCard'
+import SearchModal from '../SearchModal'
+import Row from '../Row'
 import { Link } from '../../theme'
 import { Text } from 'rebass'
-import { AutoColumn, ColumnCenter } from '../../components/Column'
+import { AutoColumn, ColumnCenter } from '../Column'
 import { Plus } from 'react-feather'
-import { ButtonPrimary, ButtonDropwdown, ButtonDropwdownLight } from '../../components/Button'
+import { ButtonPrimary, ButtonDropwdown, ButtonDropwdownLight } from '../Button'
 import TokenLogo from '../TokenLogo'
 
-function TokenFind({ history }) {
+function PoolFinder({ history }) {
   const Fields = {
     TOKEN0: 0,
     TOKEN1: 1
@@ -124,7 +123,13 @@ function TokenFind({ history }) {
           <LightCard padding="45px">
             <AutoColumn gap="8px" justify="center">
               <Text color="">No exchange found.</Text>
-              <Link>Create exchange instead.</Link>
+              <Link
+                onClick={() => {
+                  history.push('/add/' + token0Address + '-' + token1Address)
+                }}
+              >
+                Create exchange instead.
+              </Link>
             </AutoColumn>
           </LightCard>
         ) : (
@@ -160,4 +165,4 @@ function TokenFind({ history }) {
   )
 }
 
-export default withRouter(TokenFind)
+export default withRouter(PoolFinder)

src/components/SearchModal/index.js

 import React, { useState, useRef, useMemo, useEffect } from 'react'
 import { withRouter } from 'react-router-dom'
 import { Link } from 'react-router-dom'
+import { Link as StyledLink } from '../../theme/components'
 import { useTranslation } from 'react-i18next'
 import { ethers } from 'ethers'
 import styled from 'styled-components'
@@ -126,6 +127,8 @@ function SearchModal({ history, isOpen, onDismiss, onTokenSelect, urlAddedTokens
   // all balances for both account and exchanges
   let allBalances = useAllBalances()
 
+  const [sortDirection, setSortDirection] = useState(true)
+
   const tokenList = useMemo(() => {
     return Object.keys(allTokens)
       .sort((a, b) => {
@@ -138,6 +141,22 @@ function SearchModal({ history, isOpen, onDismiss, onTokenSelect, urlAddedTokens
             return aSymbol === bSymbol ? 0 : aSymbol === 'ETH'.toLowerCase() ? -1 : 1
           }
 
+          // sort by balance
+          const balanceA = allBalances?.[account]?.[a]
+          const balanceB = allBalances?.[account]?.[b]
+
+          if (balanceA && !balanceB) {
+            return sortDirection
+          }
+
+          if (!balanceA && balanceB) {
+            return sortDirection * -1
+          }
+
+          if (balanceA && balanceB) {
+            return sortDirection * parseFloat(balanceA.toExact()) > parseFloat(balanceB.toExact()) ? -1 : 1
+          }
+
           // sort alphabetically
           return aSymbol < bSymbol ? -1 : aSymbol > bSymbol ? 1 : 0
         } else {
@@ -159,7 +178,7 @@ function SearchModal({ history, isOpen, onDismiss, onTokenSelect, urlAddedTokens
           balance: balance
         }
       })
-  }, [allTokens, hiddenToken, allBalances, account])
+  }, [allTokens, allBalances, account, sortDirection, hiddenToken])
 
   const filteredTokenList = useMemo(() => {
     return tokenList.filter(tokenEntry => {
@@ -215,7 +234,6 @@ function SearchModal({ history, isOpen, onDismiss, onTokenSelect, urlAddedTokens
     BALANCES: 'BALANCES'
   }
   const [activeFilter, setActiveFilter] = useState(FILTERS.BALANCES)
-  const [sortDirection, setSortDirection] = useState(true)
 
   // sort tokens
   const escapeStringRegexp = string => string
@@ -392,7 +410,18 @@ function SearchModal({ history, isOpen, onDismiss, onTokenSelect, urlAddedTokens
             onChange={onInput}
           />
           <RowBetween>
-            <div />
+            <div>
+              <Text>
+                Don't see a pool?{' '}
+                <StyledLink
+                  onClick={() => {
+                    history.push('/find')
+                  }}
+                >
+                  Import it.
+                </StyledLink>
+              </Text>
+            </div>
             <div />
             <Filter title="Your Balances" filter={FILTERS.BALANCES} />
           </RowBetween>

src/contexts/Exchanges.tsx

@@ -9,10 +9,10 @@ import { ChainId, WETH, Token, TokenAmount, Exchange, JSBI } from '@uniswap/sdk'
 const UPDATE = 'UPDATE'
 
 const ALL_EXCHANGES: [Token, Token][] = [
-  // [
-  //   INITIAL_TOKENS_CONTEXT[ChainId.RINKEBY][WETH[ChainId.RINKEBY].address],
-  //   INITIAL_TOKENS_CONTEXT[ChainId.RINKEBY]['0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735']
-  // ],
+  [
+    INITIAL_TOKENS_CONTEXT[ChainId.RINKEBY][WETH[ChainId.RINKEBY].address],
+    INITIAL_TOKENS_CONTEXT[ChainId.RINKEBY]['0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735']
+  ]
   // [
   //   INITIAL_TOKENS_CONTEXT[ChainId.RINKEBY]['0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735'],
   //   INITIAL_TOKENS_CONTEXT[ChainId.RINKEBY]['0x8ab15C890E5C03B5F240f2D146e3DF54bEf3Df44']
@@ -172,7 +172,7 @@ export function useTotalSupply(exchange: Exchange) {
           }
         })
         .catch(e => {
-          console.log('error')
+          console.log(e)
         })
     /**
      * @todo

src/contexts/Tokens.tsx

@@ -6,9 +6,9 @@ import { isAddress, getTokenName, getTokenSymbol, getTokenDecimals, safeAccess }
 const UPDATE = 'UPDATE'
 
 export const ALL_TOKENS = [
-  WETH[ChainId.RINKEBY]
-  // new Token(ChainId.RINKEBY, '0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735', 18, 'DAI', 'Dai Stablecoin'),
-  // new Token(ChainId.RINKEBY, '0x8ab15C890E5C03B5F240f2D146e3DF54bEf3Df44', 18, 'IANV2', 'IAn V2 Coin')
+  WETH[ChainId.RINKEBY],
+  new Token(ChainId.RINKEBY, '0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735', 18, 'DAI', 'Dai Stablecoin'),
+  new Token(ChainId.RINKEBY, '0x8ab15C890E5C03B5F240f2D146e3DF54bEf3Df44', 18, 'IANV2', 'IAn V2 Coin')
 ]
 
 // only meant to be used in exchanges.ts!

src/pages/Supply/index.js

@@ -9,7 +9,6 @@ import { useAllExchanges } from '../../contexts/Exchanges'
 import { useAllBalances, useAccountLPBalances } from '../../contexts/Balances'
 
 import Question from '../../components/Question'
-import TokenFind from '../../components/TokenFind'
 import SearchModal from '../../components/SearchModal'
 import PositionCard from '../../components/PositionCard'
 import Row, { RowBetween } from '../../components/Row'
@@ -32,7 +31,6 @@ const FixedBottom = styled.div`
 
 function Supply({ history }) {
   const { account } = useWeb3React()
-  const [showPositionFind, setShowPositionFind] = useState(false)
   const [showPoolSearch, setShowPoolSearch] = useState(false)
 
   const allTokens = useAllTokens()
@@ -63,8 +61,6 @@ function Supply({ history }) {
     })
 
   return (
-    <>
-      {!showPositionFind && (
     <>
       <ButtonPrimary
         onClick={() => {
@@ -116,9 +112,6 @@ function Supply({ history }) {
           </Card>
         </FixedBottom>
       </Positions>
-        </>
-      )}
-      {showPositionFind && <TokenFind />}
       <SearchModal isOpen={showPoolSearch} onDismiss={() => setShowPoolSearch(false)} />
     </>
   )