add slider to remove

package.json

@@ -6,6 +6,7 @@
   "private": true,
   "dependencies": {
     "@ethersproject/units": "^5.0.0-beta.132",
+    "@material-ui/core": "^4.9.5",
     "@reach/dialog": "^0.2.8",
     "@reach/tooltip": "^0.2.0",
     "@types/jest": "^25.1.3",

src/components/Button/index.js

 import React from 'react'
 import { Button as RebassButton } from 'rebass/styled-components'
 import styled from 'styled-components'
-import { darken } from 'polished'
+import { darken, lighten } from 'polished'
 
 import { RowBetween } from '../Row'
 import { ChevronDown } from 'react-feather'
@@ -87,6 +87,24 @@ export const ButtonEmpty = styled(Base)`
   }
 `
 
+const ButtonConfirmedStyle = styled(Base)`
+  background-color: ${({ theme }) => lighten(0.5, theme.connectedGreen)};
+  border: 1px solid ${({ theme }) => theme.connectedGreen};
+
+  &:disabled {
+    opacity: 50%;
+    cursor: auto;
+  }
+`
+
+export function ButtonConfirmed({ children, confirmed, ...rest }) {
+  if (confirmed) {
+    return <ButtonConfirmedStyle {...rest}>{children}</ButtonConfirmedStyle>
+  } else {
+    return <ButtonPrimary {...rest}>{children}</ButtonPrimary>
+  }
+}
+
 export function ButtonDropwdown({ disabled, children, ...rest }) {
   return (
     <ButtonPrimary {...rest}>

src/components/Card/index.js

@@ -8,9 +8,12 @@ const Card = styled(Box)`
   padding: ${({ padding }) => padding};
   border: ${({ border }) => border};
 `
-
 export default Card
 
 export const LightCard = styled(Card)`
   border: 1px solid ${({ theme }) => theme.outlineGrey};
 `
+
+export const GreyCard = styled(Card)`
+  background-color: rgba(255, 255, 255, 0.6);
+`

src/components/ConfirmationModal/index.js

-import React, { useState } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 
 import { ButtonPrimary } from '../Button'
@@ -6,6 +6,7 @@ import { AutoColumn, ColumnCenter } from '../Column'
 import Row, { RowBetween, RowFlat, RowFixed } from '../Row'
 import { ArrowDown } from 'react-feather'
 
+import { ButtonConfirmed } from '../Button'
 import { Text } from 'rebass'
 import { LightCard } from '../Card'
 import Modal from '../Modal'
@@ -35,6 +36,10 @@ const ConfirmedIcon = styled(ColumnCenter)`
   padding: 60px 0;
 `
 
+const ConfirmedText = styled(Text)`
+  color: ${({ theme, confirmed }) => (confirmed ? theme.connectedGreen : theme.white)};
+`
+
 export default function ConfirmationModal({
   isOpen,
   onDismiss,
@@ -46,23 +51,23 @@ export default function ConfirmationModal({
   transactionType,
   pendingConfirmation,
   hash,
-  contractCall
+  signed = false,
+  contractCall,
+  attemptedRemoval = false,
+  extraCall = undefined
 }) {
   const { address: address0, symbol: symbol0 } = amount0?.token || {}
   const { address: address1, symbol: symbol1 } = amount1?.token || {}
 
   const { chainId } = useWeb3React()
 
-  const [confirmed, setConfirmed] = useState(false)
-
   function WrappedOnDismissed() {
     onDismiss()
-    setConfirmed(false)
   }
 
   return (
-    <Modal isOpen={isOpen} onDismiss={onDismiss}>
-      {!confirmed ? (
+    <Modal isOpen={isOpen} onDismiss={WrappedOnDismissed}>
+      {!attemptedRemoval ? (
         <Wrapper>
           <Section gap="40px">
             <RowBetween>
@@ -195,22 +200,51 @@ export default function ConfirmationModal({
                   </Text>
                 </RowBetween>
               )}
-              <ButtonPrimary
-                style={{ margin: '20px 0' }}
-                onClick={() => {
-                  setConfirmed(true)
-                  contractCall()
-                }}
-              >
-                <Text fontWeight={500} fontSize={20}>
-                  Confirm{' '}
-                  {transactionType === TRANSACTION_TYPE.ADD
-                    ? 'Supply'
-                    : transactionType === TRANSACTION_TYPE.REMOVE
-                    ? 'Remove'
-                    : 'Swap'}
-                </Text>
-              </ButtonPrimary>
+              {transactionType === TRANSACTION_TYPE.REMOVE ? (
+                <RowBetween gap="20px">
+                  <ButtonConfirmed
+                    style={{ margin: '20px 0' }}
+                    width="48%"
+                    onClick={() => {
+                      extraCall()
+                    }}
+                    confirmed={signed}
+                    disabled={signed}
+                  >
+                    <ConfirmedText fontWeight={500} fontSize={20} confirmed={signed}>
+                      {signed ? 'Signed' : 'Sign'}
+                    </ConfirmedText>
+                  </ButtonConfirmed>
+                  <ButtonPrimary
+                    width="48%"
+                    disabled={!signed}
+                    style={{ margin: '20px 0' }}
+                    onClick={() => {
+                      contractCall()
+                    }}
+                  >
+                    <Text fontWeight={500} fontSize={20}>
+                      Confirm Remove
+                    </Text>
+                  </ButtonPrimary>
+                </RowBetween>
+              ) : (
+                <ButtonPrimary
+                  style={{ margin: '20px 0' }}
+                  onClick={() => {
+                    contractCall()
+                  }}
+                >
+                  <Text fontWeight={500} fontSize={20}>
+                    Confirm{' '}
+                    {transactionType === TRANSACTION_TYPE.ADD
+                      ? 'Supply'
+                      : transactionType === TRANSACTION_TYPE.REMOVE
+                      ? 'Remove'
+                      : 'Swap'}
+                  </Text>
+                </ButtonPrimary>
+              )}
               {transactionType === TRANSACTION_TYPE.ADD && (
                 <Text fontSize={12} color="#565A69" textAlign="center">
                   {`Output is estimated. You will receive at least ${liquidityAmount?.toFixed(

src/components/CurrencyInputPanel/index.js

@@ -245,7 +245,7 @@ export default function CurrencyInputPanel({
               <ErrorSpan data-tip={'Enter max'} error={!!error} onClick={() => {}}></ErrorSpan>
               <ClickableText onClick={onMax}>
                 <Text>
-                  Balance: {customBalance ? customBalance.toSignificant(4) : userTokenBalance?.toSignificant(4)}
+                  Balance: {customBalance ? customBalance?.toSignificant(4) : userTokenBalance?.toSignificant(4)}
                 </Text>
               </ClickableText>
             </RowBetween>
@@ -273,7 +273,7 @@ export default function CurrencyInputPanel({
           >
             <Aligner>
               {isExchange ? (
-                <DoubleLogo a0={exchange?.token0.address} a1={exchange?.token1.address} margin={true} />
+                <DoubleLogo a0={exchange?.token0.address} a1={exchange?.token1.address} size={24} margin={true} />
               ) : token?.address ? (
                 <TokenLogo address={token?.address} size={'24px'} />
               ) : null}

src/components/DoubleLogo/index.js

@@ -7,7 +7,7 @@ export default function DoubleTokenLogo({ a0, a1, size = 16, margin = false }) {
     position: relative;
     display: flex;
     flex-direction: row;
-    margin-right: ${({ sizeraw, margin }) => margin && (sizeraw / 2 + 10).toString() + 'px'};
+    margin-right: ${({ sizeraw, margin }) => margin && (sizeraw / 3 + 8).toString() + 'px'};
   `
 
   const HigherLogo = styled(TokenLogo)`

src/components/ExchangePage/index.tsx

 import React, { useState, useReducer, useCallback, useEffect } from 'react'
-import { ethers } from 'ethers'
 import styled from 'styled-components'
+import { ethers } from 'ethers'
 import { parseUnits, parseEther } from '@ethersproject/units'
 import { WETH, TradeType, Route, Trade, TokenAmount, JSBI } from '@uniswap/sdk'
 
-import { useWeb3React } from '../../hooks'
 import { useToken } from '../../contexts/Tokens'
 import { useExchange } from '../../contexts/Exchanges'
-import { useTransactionAdder } from '../../contexts/Transactions'
+import { useWeb3React } from '../../hooks'
 import { useAddressBalance } from '../../contexts/Balances'
+import { useTransactionAdder } from '../../contexts/Transactions'
 import { useAddressAllowance } from '../../contexts/Allowances'
 
+import ConfirmationModal from '../ConfirmationModal'
+import CurrencyInputPanel from '../CurrencyInputPanel'
 import { Text } from 'rebass'
-import { ButtonPrimary } from '../Button'
-import { AutoColumn, ColumnCenter } from '../../components/Column'
 import { RowBetween } from '../../components/Row'
+import { ButtonPrimary } from '../Button'
 import { ArrowDown, ArrowUp } from 'react-feather'
-import CurrencyInputPanel from '../CurrencyInputPanel'
-import ConfirmationModal from '../ConfirmationModal'
+import { AutoColumn, ColumnCenter } from '../../components/Column'
 
+import { TRANSACTION_TYPE, ROUTER_ADDRESSES } from '../../constants'
 import { getRouterContract, calculateGasMargin } from '../../utils'
-import { TRANSACTION_TYPE } from '../../constants'
 
 const ArrowWrapper = styled.div`
   padding: 4px;
@@ -138,6 +138,7 @@ function reducer(
 
 export default function ExchangePage() {
   const { chainId, account, library } = useWeb3React()
+  const routerAddress = ROUTER_ADDRESSES[chainId]
 
   const [state, dispatch] = useReducer(reducer, WETH[chainId].address, initializeSwapState)
   const { independentField, typedValue, ...fieldData } = state
@@ -326,8 +327,6 @@ export default function ExchangePage() {
         : calculateSlippageAmount(parsedAmounts[Field.OUTPUT])?.[0]
   }
 
-  const routerAddress = '0xd9210Ff5A0780E083BB40e30d005d93a2DcFA4EF'
-
   const inputApproval = useAddressAllowance(account, tokens[Field.INPUT], routerAddress)
   const outputApproval = useAddressAllowance(account, tokens[Field.OUTPUT], routerAddress)
 

src/components/PositionCard/index.js

+import React from 'react'
+import styled from 'styled-components'
+import { withRouter } from 'react-router-dom'
+import { Percent, Exchange } from '@uniswap/sdk'
+
+import { useWeb3React } from '@web3-react/core'
+import { useAllBalances } from '../../contexts/Balances'
+import { useTotalSupply } from '../../contexts/Exchanges'
+
+import Card from '../Card'
+import TokenLogo from '../TokenLogo'
+import DoubleLogo from '../DoubleLogo'
+import { Text } from 'rebass'
+import { GreyCard } from '../../components/Card'
+import { AutoColumn } from '../Column'
+import { ButtonSecondary } from '../Button'
+import { RowBetween, RowFixed } from '../Row'
+
+const FixedHeightRow = styled(RowBetween)`
+  height: 24px;
+`
+
+function PositionCard({ exchangeAddress, token0, token1, history, minimal = false, ...rest }) {
+  const { account } = useWeb3React()
+  const allBalances = useAllBalances()
+
+  const tokenAmount0 = allBalances?.[exchangeAddress]?.[token0.address]
+  const tokenAmount1 = allBalances?.[exchangeAddress]?.[token1.address]
+
+  const exchange = tokenAmount0 && tokenAmount1 && new Exchange(tokenAmount0, tokenAmount1)
+
+  const userPoolBalance = allBalances?.[account]?.[exchangeAddress]
+  const totalPoolTokens = useTotalSupply(exchange)
+
+  const poolTokenPercentage =
+    !!userPoolBalance && !!totalPoolTokens ? new Percent(userPoolBalance.raw, totalPoolTokens.raw) : undefined
+
+  const token0Deposited = poolTokenPercentage?.multiply(allBalances[exchangeAddress][token0.address])
+  const token1Deposited = poolTokenPercentage?.multiply(allBalances[exchangeAddress][token1.address])
+
+  function DynamicCard({ children, ...rest }) {
+    if (!minimal) {
+      return (
+        <Card border="1px solid #EDEEF2" {...rest}>
+          {children}
+        </Card>
+      )
+    } else {
+      return <GreyCard {...rest}>{children}</GreyCard>
+    }
+  }
+
+  return (
+    <DynamicCard {...rest}>
+      <AutoColumn gap="20px">
+        <FixedHeightRow>
+          <Text fontWeight={500} fontSize={16}>
+            Current Position
+          </Text>
+        </FixedHeightRow>
+        <FixedHeightRow>
+          <RowFixed>
+            <DoubleLogo a0={token0?.address || ''} a1={token1?.address || ''} margin={true} size={24} />
+            <Text fontWeight={500} fontSize={20}>
+              {token0?.symbol}:{token1?.symbol}
+            </Text>
+          </RowFixed>
+          <Text fontWeight={500} fontSize={20}>
+            {userPoolBalance ? userPoolBalance.toFixed(6) : '-'}
+          </Text>
+        </FixedHeightRow>
+        <AutoColumn gap="12px">
+          <FixedHeightRow>
+            <Text color="#888D9B" fontSize={16} fontWeight={500}>
+              {token0?.symbol} Deposited:
+            </Text>
+            {token0Deposited ? (
+              <RowFixed>
+                <TokenLogo address={token0?.address || ''} />
+                <Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                  {token0Deposited?.toFixed(8)}
+                </Text>
+              </RowFixed>
+            ) : (
+              '-'
+            )}
+          </FixedHeightRow>
+          <FixedHeightRow>
+            <Text color="#888D9B" fontSize={16} fontWeight={500}>
+              {token1?.symbol} Deposited:
+            </Text>
+            {token1Deposited ? (
+              <RowFixed>
+                <TokenLogo address={token1.address || ''} />
+                <Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
+                  {token1Deposited?.toFixed(8)}
+                </Text>
+              </RowFixed>
+            ) : (
+              '-'
+            )}
+          </FixedHeightRow>
+          {!minimal && (
+            <FixedHeightRow>
+              <Text color="#888D9B" fontSize={16} fontWeight={500}>
+                Your pool share:
+              </Text>
+              <Text color="#888D9B" fontSize={16} fontWeight={500}>
+                {poolTokenPercentage ? poolTokenPercentage.toFixed(2) + '%' : '-'}
+              </Text>
+            </FixedHeightRow>
+          )}
+        </AutoColumn>
+        {!minimal && (
+          <RowBetween>
+            <ButtonSecondary
+              width="48%"
+              onClick={() => {
+                history.push('/add/' + token0?.address + '-' + token1?.address)
+              }}
+            >
+              Add
+            </ButtonSecondary>
+            <ButtonSecondary
+              width="48%"
+              onClick={() => {
+                history.push('/remove/' + token0?.address + '-' + token1?.address)
+              }}
+            >
+              Remove
+            </ButtonSecondary>
+          </RowBetween>
+        )}
+      </AutoColumn>
+    </DynamicCard>
+  )
+}
+
+export default withRouter(PositionCard)

src/components/SearchModal/index.js

@@ -201,8 +201,8 @@ function SearchModal({ history, isOpen, onDismiss, onTokenSelect, field, urlAdde
   }
 
   // amount of tokens to display at once
-  const [tokensShown, setTokensShown] = useState(0)
-  const [pairsShown, setPairsShown] = useState(0)
+  const [, setTokensShown] = useState(0)
+  const [, setPairsShown] = useState(0)
 
   // filters on results
   const FILTERS = {

src/components/Slider/index.js

+import React from 'react'
+import Slider from '@material-ui/core/Slider'
+import { withStyles } from '@material-ui/core/styles'
+
+const IOSSlider = withStyles({
+  root: {
+    width: '95%',
+    color: '#3880ff',
+    height: 4,
+    padding: '15px 0'
+  },
+  thumb: {
+    height: 28,
+    width: 28,
+    backgroundColor: '##2172E5',
+    marginTop: -14,
+    marginLeft: -14,
+    '&:focus,&:hover,&$active': {
+      boxShadow:
+        '0px 0px 1px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 24px 32px rgba(0, 0, 0, 0.04)',
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {}
+    }
+  },
+  active: {},
+  track: {
+    height: 4
+  },
+  rail: {
+    height: 2,
+    opacity: 0.5,
+    backgroundColor: '#bfbfbf'
+  },
+  mark: {
+    backgroundColor: '#bfbfbf',
+    height: 8,
+    width: 1,
+    marginTop: -3
+  },
+  markActive: {
+    opacity: 1,
+    backgroundColor: 'currentColor'
+  }
+})(Slider)
+
+export default function InputSlider({ value, onChange }) {
+  return <IOSSlider value={typeof value === 'number' ? value : 0} onChange={onChange} aria-labelledby="input-slider" />
+}

src/components/TokenLogo/index.js

@@ -26,8 +26,7 @@ const Emoji = styled.span`
   font-size: ${({ size }) => size};
   width: ${({ size }) => size};
   height: ${({ size }) => size};
-  margin-bottom: -2px;
-  margin-right: ${({ sizeraw, margin }) => margin && (sizeraw / 2 + 10).toString() + 'px'};
+  margin-bottom: -4px;
 `
 
 const StyledEthereumLogo = styled(EthereumLogo)`
@@ -35,7 +34,7 @@ const StyledEthereumLogo = styled(EthereumLogo)`
   height: ${({ size }) => size};
 `
 
-export default function TokenLogo({ address, size = '1rem', ...rest }) {
+export default function TokenLogo({ address, size = '24px', ...rest }) {
   const [error, setError] = useState(false)
   const { chainId } = useWeb3React()
 

src/contexts/Balances.tsx

 import React, { createContext, useContext, useReducer, useRef, useMemo, useCallback, useEffect, ReactNode } from 'react'
 import { TokenAmount, Token, JSBI, WETH } from '@uniswap/sdk'
 
-import { useWeb3React, useDebounce } from '../hooks'
-import { getEtherBalance, getTokenBalance, isAddress } from '../utils'
-import { useBlockNumber } from './Application'
 import { useAllTokens } from './Tokens'
+import { useBlockNumber } from './Application'
 import { useAllExchanges } from './Exchanges'
+import { useWeb3React, useDebounce } from '../hooks'
+
+import { getEtherBalance, getTokenBalance, isAddress } from '../utils'
 
 const LOCAL_STORAGE_KEY = 'BALANCES'
 const SHORT_BLOCK_TIMEOUT = (60 * 2) / 15 // in seconds, represented as a block number delta
@@ -408,30 +409,23 @@ export function useAllBalances(): Array<TokenAmount> {
   const allTokens = useAllTokens()
 
   const formattedBalances = useMemo(() => {
-    if (!state?.[chainId]) {
+    if (!state || !state[chainId]) {
       return {}
     } else {
       let newBalances = {}
       Object.keys(state[chainId]).map(address => {
         return Object.keys(state[chainId][address]).map(tokenAddress => {
-          if (state?.[chainId][address][tokenAddress].value) {
-            return (newBalances[chainId] = {
+          if (state[chainId][address][tokenAddress].value) {
+            newBalances[chainId] = {
               ...newBalances[chainId],
               [address]: {
                 ...newBalances[chainId]?.[address],
                 [tokenAddress]: new TokenAmount(
-                  // if token not in token list, must be an exchange -
-                  /**
-                   *  @TODO
-                   *
-                   * should we live fetch data here if token not in list
-                   *
-                   */
-                  allTokens && allTokens[tokenAddress] ? allTokens[tokenAddress] : new Token(chainId, tokenAddress, 18),
+                  allTokens[tokenAddress] ? allTokens[tokenAddress] : new Token(chainId, tokenAddress, 18),
                   JSBI.BigInt(state?.[chainId][address][tokenAddress].value)
                 )
               }
-            })
+            }
           }
         })
       })
@@ -485,7 +479,3 @@ export function useAccountLPBalances(account: string) {
     })
   }, [account, allExchanges, chainId, startListening, stopListening])
 }
-
-export function useExchangeReserves(tokenAddress: string) {
-  return []
-}

src/contexts/Exchanges.tsx

-import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect } from 'react'
-import { ChainId, WETH, Token, Exchange } from '@uniswap/sdk'
-import { INITIAL_TOKENS_CONTEXT } from './Tokens'
+import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect, useState } from 'react'
+
 import { useAddressBalance } from './Balances'
+import { useWeb3React, useExchangeContract } from '../hooks'
 
-import { useWeb3React } from '../hooks'
+import { INITIAL_TOKENS_CONTEXT } from './Tokens'
+import { ChainId, WETH, Token, TokenAmount, Exchange, JSBI } from '@uniswap/sdk'
 
 const UPDATE = 'UPDATE'
 
@@ -138,3 +139,46 @@ export function useAllExchanges() {
     return allExchanges || {}
   }, [allExchanges])
 }
+
+export function useTotalSupply(exchange: Exchange) {
+  const { library } = useWeb3React()
+
+  const [totalPoolTokens, setTotalPoolTokens] = useState<TokenAmount>()
+
+  const exchangeContract = useExchangeContract(exchange?.liquidityToken.address)
+
+  const fetchPoolTokens = useCallback(async () => {
+    !!exchangeContract &&
+      exchangeContract
+        .deployed()
+        .then(() => {
+          if (exchangeContract) {
+            exchangeContract.totalSupply().then(totalSupply => {
+              if (totalSupply !== undefined && exchange?.liquidityToken?.decimals) {
+                const supplyFormatted = JSBI.BigInt(totalSupply)
+                const tokenSupplyFormatted = new TokenAmount(exchange?.liquidityToken, supplyFormatted)
+                setTotalPoolTokens(tokenSupplyFormatted)
+              }
+            })
+          }
+        })
+        .catch(e => {
+          console.log('error')
+        })
+    /**
+     * @todo
+     * fix this
+     */
+  }, [exchangeContract])
+
+  // on the block make sure we're updated
+  useEffect(() => {
+    fetchPoolTokens()
+    library.on('block', fetchPoolTokens)
+    return () => {
+      library.removeListener('block', fetchPoolTokens)
+    }
+  }, [fetchPoolTokens, library])
+
+  return totalPoolTokens
+}

src/contexts/Tokens.tsx

@@ -108,7 +108,7 @@ export function useToken(tokenAddress: string): Token {
   return token
 }
 
-export function useAllTokens() {
+export function useAllTokens(): string[] {
   const { chainId } = useWeb3React()
   const [state] = useTokensContext()
 

src/pages/App.js

@@ -47,8 +47,8 @@ const Body = styled.div`
   max-width: 28rem;
   width: 90%;
   background: ${({ theme }) => theme.panelBackground};
-  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
-    0px 24px 32px rgba(0, 0, 0, 0.04);
+  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
+    0px 24px 32px rgba(0, 0, 0, 0.01);
   border-radius: 20px;
   padding: 2rem 1rem;
 `

src/pages/Supply/index.js

-import React, { useEffect, useState, useCallback } from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
-import { TokenAmount, JSBI, Percent, Token } from '@uniswap/sdk'
-import ReactGA from 'react-ga'
-import { withRouter } from 'react-router-dom'
+import { JSBI } from '@uniswap/sdk'
+
+import { useWeb3React } from '@web3-react/core'
+import { useAllTokens } from '../../contexts/Tokens'
+import { useAllExchanges } from '../../contexts/Exchanges'
+import { useAllBalances, useAccountLPBalances } from '../../contexts/Balances'
 
-import { Link } from '../../theme'
-import { AutoColumn } from '../../components/Column'
-import Row, { RowBetween, RowFixed } from '../../components/Row'
-import { ButtonDropwdown, ButtonSecondary } from '../../components/Button'
 import Card from '../../components/Card'
-import { Text } from 'rebass'
-import DoubleLogo from '../../components/DoubleLogo'
 import SearchModal from '../../components/SearchModal'
+import PositionCard from '../../components/PositionCard'
+import Row, { RowBetween } from '../../components/Row'
+import { Link } from '../../theme'
+import { Text } from 'rebass'
+import { AutoColumn } from '../../components/Column'
 import { ArrowRight } from 'react-feather'
-
-import { useAllExchanges } from '../../contexts/Exchanges'
-import { useAllBalances, useAccountLPBalances } from '../../contexts/Balances'
-import { useWeb3React } from '@web3-react/core'
-import { useAllTokens } from '../../contexts/Tokens'
-import { useExchangeContract } from '../../hooks'
-import TokenLogo from '../../components/TokenLogo'
+import { ButtonDropwdown } from '../../components/Button'
 
 const Positions = styled.div`
   position: relative;
   margin-top: 38px;
 `
-
 const FixedBottom = styled.div`
   position: absolute;
   bottom: -240px;
   width: 100%;
 `
 
-function ExchangeCard({ exchangeAddress, token0, token1, history, allBalances }) {
-  const { account, chainId } = useWeb3React()
-
-  const userPoolBalance = allBalances?.[account]?.[exchangeAddress]
-  const [totalPoolTokens, setTotalPoolTokens] = useState()
-  // get the total pool token supply
-  const exchangeContract = useExchangeContract(exchangeAddress)
-  const fetchPoolTokens = useCallback(() => {
-    if (exchangeContract) {
-      exchangeContract.totalSupply().then(totalSupply => {
-        if (totalSupply !== undefined) {
-          const supplyFormatted = JSBI.BigInt(totalSupply)
-          const tokenSupplyFormatted = new TokenAmount(new Token(chainId, exchangeAddress, 18), supplyFormatted)
-          setTotalPoolTokens(tokenSupplyFormatted)
-        }
-      })
-    }
-  }, [exchangeContract, chainId, exchangeAddress])
-  useEffect(() => {
-    fetchPoolTokens()
-  }, [fetchPoolTokens])
-
-  const poolTokenPercentage =
-    !!userPoolBalance && !!totalPoolTokens ? new Percent(userPoolBalance.raw, totalPoolTokens.raw) : undefined
-
-  const token0Deposited = poolTokenPercentage?.multiply(allBalances[exchangeAddress][token0.address])
-  const token1Deposited = poolTokenPercentage?.multiply(allBalances[exchangeAddress][token1.address])
-
-  return (
-    <Card border="1px solid #EDEEF2">
-      <AutoColumn gap="20px">
-        <RowBetween>
-          <RowFixed>
-            <DoubleLogo a0={token0?.address || ''} a1={token1?.address || ''} margin={true} size={24} />
-            <Text fontWeight={500} fontSize={20}>
-              {token0?.symbol}:{token1?.symbol}
-            </Text>
-          </RowFixed>
-          <Text fontWeight={500} fontSize={20}>
-            {userPoolBalance ? userPoolBalance.toFixed(6) : '-'}
-          </Text>
-        </RowBetween>
-        <AutoColumn gap="12px">
-          <RowBetween>
-            <Text color="#888D9B" fontSize={16} fontWeight={500}>
-              {token0?.symbol} Deposited:
-            </Text>
-            {token0Deposited ? (
-              <RowFixed>
-                <TokenLogo address={token0?.address || ''} />
-                <Text color="#888D9B" fontSize={16} fontWeight={500}>
-                  {token0Deposited?.toSignificant(6)}
-                </Text>
-              </RowFixed>
-            ) : (
-              '-'
-            )}
-          </RowBetween>
-          <RowBetween>
-            <Text color="#888D9B" fontSize={16} fontWeight={500}>
-              {token1?.symbol} Deposited:
-            </Text>
-            {token1Deposited ? (
-              <RowFixed>
-                <TokenLogo address={token1.address || ''} />
-                <Text color="#888D9B" fontSize={16} fontWeight={500}>
-                  {token1Deposited?.toSignificant(6)}
-                </Text>
-              </RowFixed>
-            ) : (
-              '-'
-            )}
-          </RowBetween>
-          <RowBetween>
-            <Text color="#888D9B" fontSize={16} fontWeight={500}>
-              Your pool share:
-            </Text>
-            <Text color="#888D9B" fontSize={16} fontWeight={500}>
-              {poolTokenPercentage ? poolTokenPercentage.toFixed(2) + '%' : '-'}
-            </Text>
-          </RowBetween>
-        </AutoColumn>
-        <RowBetween>
-          <ButtonSecondary
-            width="48%"
-            onClick={() => {
-              history.push('/add/' + token0?.address + '-' + token1?.address)
-            }}
-          >
-            Add
-          </ButtonSecondary>
-          <ButtonSecondary
-            width="48%"
-            onClick={() => {
-              history.push('/remove/' + token0?.address + '-' + token1?.address)
-            }}
-          >
-            Remove
-          </ButtonSecondary>
-        </RowBetween>
-      </AutoColumn>
-    </Card>
-  )
-}
-
-function Supply({ history }) {
-  useEffect(() => {
-    ReactGA.pageview(window.location.pathname + window.location.search)
-  }, [])
-
+export default function Supply() {
   const { account } = useWeb3React()
-
-  const [showSearch, toggleSearch] = useState(false)
-
-  const exchanges = useAllExchanges()
+  const [showSearch, setShowSearch] = useState(false)
 
   const allTokens = useAllTokens()
-
   const allBalances = useAllBalances()
+  const allExchanges = useAllExchanges()
 
   // initiate listener for LP balances
   useAccountLPBalances(account)
 
-  const filteredPairList = Object.keys(exchanges).map((exchangeAddress, i) => {
-    const exchange = exchanges[exchangeAddress]
-    // gate on positive address
-    if (allBalances?.[account]?.[exchangeAddress]) {
-      const token0 = allTokens[exchange.token0]
-      const token1 = allTokens[exchange.token1]
-      return (
-        <ExchangeCard
-          history={history}
+  const filteredExchangeList = Object.keys(allExchanges).map((exchangeAddress, i) => {
+    const balance = allBalances?.[account]?.[exchangeAddress]
+    return (
+      balance &&
+      JSBI.greaterThan(balance.raw, JSBI.BigInt(0)) && (
+        <PositionCard
           key={i}
           exchangeAddress={exchangeAddress}
-          token0={token0}
-          token1={token1}
-          allBalances={allBalances}
+          token0={allTokens[allExchanges[exchangeAddress].token0]}
+          token1={allTokens[allExchanges[exchangeAddress].token1]}
         />
       )
-    } else {
-      return ''
-    }
+    )
   })
 
   return (
     <>
       <ButtonDropwdown
         onClick={() => {
-          toggleSearch(true)
+          setShowSearch(true)
         }}
       >
         <Text fontSize={20}>Find a pool</Text>
@@ -193,7 +70,7 @@ function Supply({ history }) {
               <Text fontWeight={500}>View on Uniswap.info</Text>
             </Link>
           </RowBetween>
-          {filteredPairList}
+          {filteredExchangeList}
         </AutoColumn>
         <FixedBottom>
           <Card bg="rgba(255, 255, 255, 0.6)" padding={'24px'}>
@@ -216,11 +93,9 @@ function Supply({ history }) {
       <SearchModal
         isOpen={showSearch}
         onDismiss={() => {
-          toggleSearch(false)
+          setShowSearch(false)
         }}
       />
     </>
   )
 }
-
-export default withRouter(Supply)

src/utils/index.js

@@ -6,15 +6,7 @@ import ROUTER_ABI from '../constants/abis/router'
 import ERC20_ABI from '../constants/abis/erc20'
 import ERC20_BYTES32_ABI from '../constants/abis/erc20_bytes32'
 import { FACTORY_ADDRESSES, SUPPORTED_THEMES } from '../constants'
-import {
-  BigNumber,
-  bigNumberify,
-  getAddress,
-  keccak256,
-  defaultAbiCoder,
-  toUtf8Bytes,
-  solidityPack
-} from 'ethers/utils'
+import { bigNumberify, keccak256, defaultAbiCoder, toUtf8Bytes, solidityPack } from 'ethers/utils'
 
 import UncheckedJsonRpcSigner from './signer'