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()
@@ -64,61 +62,56 @@ function Supply({ history }) {
 
   return (
     <>
-      {!showPositionFind && (
-        <>
-          <ButtonPrimary
-            onClick={() => {
-              setShowPoolSearch(true)
-            }}
-          >
-            <Text fontSize={20}>Join a pool</Text>
-          </ButtonPrimary>
-          <Positions>
-            <AutoColumn gap="20px">
-              <RowBetween>
-                <Text fontWeight={500}>Your Pooled Liquidity</Text>
-                <Question text="filler text" />
-              </RowBetween>
-              {filteredExchangeList}
-              {filteredExchangeList?.length === 0 && (
-                <LightCard bg="rgba(255, 255, 255, 0.6)" padding={'45px'}>
-                  <Text color="#C3C5CB">Add liquidity to see your positions</Text>
-                </LightCard>
-              )}
-              <AutoColumn justify="center">
-                <Text color="#AEAEAE">
-                  Already have liquidity?{' '}
-                  <Link
-                    onClick={() => {
-                      history.push('/find')
-                    }}
-                  >
-                    Find it now.
-                  </Link>
-                </Text>
-              </AutoColumn>
+      <ButtonPrimary
+        onClick={() => {
+          setShowPoolSearch(true)
+        }}
+      >
+        <Text fontSize={20}>Join a pool</Text>
+      </ButtonPrimary>
+      <Positions>
+        <AutoColumn gap="20px">
+          <RowBetween>
+            <Text fontWeight={500}>Your Pooled Liquidity</Text>
+            <Question text="filler text" />
+          </RowBetween>
+          {filteredExchangeList}
+          {filteredExchangeList?.length === 0 && (
+            <LightCard bg="rgba(255, 255, 255, 0.6)" padding={'45px'}>
+              <Text color="#C3C5CB">Add liquidity to see your positions</Text>
+            </LightCard>
+          )}
+          <AutoColumn justify="center">
+            <Text color="#AEAEAE">
+              Already have liquidity?{' '}
+              <Link
+                onClick={() => {
+                  history.push('/find')
+                }}
+              >
+                Find it now.
+              </Link>
+            </Text>
+          </AutoColumn>
+        </AutoColumn>
+        <FixedBottom>
+          <Card bg="rgba(255, 255, 255, 0.6)" padding={'24px'}>
+            <AutoColumn gap="30px">
+              <Text fontSize="20px" fontWeight={500}>
+                Earn fees with pooled market making.
+              </Text>
+              <Text fontSize="12px">
+                <Link>Provide liquidity </Link>to earn .03% spread fees for providing market depth.
+              </Text>
+              <Link>
+                <Row>
+                  Learn More <ArrowRight size="16" />
+                </Row>
+              </Link>
             </AutoColumn>
-            <FixedBottom>
-              <Card bg="rgba(255, 255, 255, 0.6)" padding={'24px'}>
-                <AutoColumn gap="30px">
-                  <Text fontSize="20px" fontWeight={500}>
-                    Earn fees with pooled market making.
-                  </Text>
-                  <Text fontSize="12px">
-                    <Link>Provide liquidity </Link>to earn .03% spread fees for providing market depth.
-                  </Text>
-                  <Link>
-                    <Row>
-                      Learn More <ArrowRight size="16" />
-                    </Row>
-                  </Link>
-                </AutoColumn>
-              </Card>
-            </FixedBottom>
-          </Positions>
-        </>
-      )}
-      {showPositionFind && <TokenFind />}
+          </Card>
+        </FixedBottom>
+      </Positions>
       <SearchModal isOpen={showPoolSearch} onDismiss={() => setShowPoolSearch(false)} />
     </>
   )