abort rebase fix conflicts

.github/PULL_REQUEST_TEMPLATE/pull_request_template.md

+**PLEASE DO NOT SUBMIT TOKEN ADDITIONS AS PULL REQUESTS**
+
+All token requests should be made via an issue.

.gitignore

@@ -25,3 +25,5 @@ yarn-error.log*
 
 notes.txt
 .idea/
+
+.vscode/
\ No newline at end of file

package.json

@@ -7,9 +7,10 @@
   "dependencies": {
     "@reach/dialog": "^0.2.8",
     "@reach/tooltip": "^0.2.0",
+    "@uniswap/sdk": "^1.0.0-beta.4",
     "copy-to-clipboard": "^3.2.0",
     "escape-string-regexp": "^2.0.0",
-    "ethers": "^4.0.28",
+    "ethers": "^4.0.33",
     "i18next": "^15.0.9",
     "i18next-browser-languagedetector": "^3.0.1",
     "i18next-xhr-backend": "^2.0.1",
@@ -24,6 +25,7 @@
     "react-router-dom": "^5.0.0",
     "react-scripts": "^3.0.1",
     "react-spring": "^8.0.20",
+    "react-switch": "^5.0.1",
     "styled-components": "^4.2.0",
     "web3-react": "^5.0.4"
   },

public/locales/en.json

@@ -18,7 +18,8 @@
   "unlock": "Unlock",
   "pending": "Pending",
   "selectToken": "Select a token",
-  "searchOrPaste": "Search Token or Paste Address",
+  "searchOrPaste": "Search Token Name, Symbol, or Address",
+  "searchOrPasteMobile": "Name, Symbol, or Address",
   "noExchange": "No Exchange Found",
   "exchangeRate": "Exchange Rate",
   "unknownError": "Oops! An unknown error occurred. Please refresh the page, or visit from another browser or device.",
@@ -36,6 +37,7 @@
   "youWillReceive": "You will receive at least",
   "youAreBuying": "You are buying",
   "itWillCost": "It will cost at most",
+  "forAtMost": "for at most",
   "insufficientBalance": "Insufficient Balance",
   "inputNotValid": "Not a valid input value",
   "differentToken": "Must be different token.",

src/assets/images/circle-grey.svg

+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 9.27455 20.9097 6.80375 19.1414 5" stroke="#AEAEAE" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/images/x.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
\ No newline at end of file

src/assets/svg/SVGArrowDown.js

+import React from 'react'
+
+const SVGArrowDown = props => (
+  <svg width="1em" height="1em" viewBox="0 0 9 10" fill="currentColor" {...props}>
+    <path
+      d="M5.298 0H4.24v7.911h-.075L1.256 4.932l-.717.735L4.769 10 9 5.667l-.718-.735-2.908 2.979h-.076V0z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export default SVGArrowDown

src/components/AddressInputPanel/index.js

@@ -2,17 +2,17 @@ import React, { useState, useEffect } from 'react'
 import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import { useWeb3Context } from 'web3-react'
-import { lighten } from 'polished'
+import { transparentize } from 'polished'
 
 import { isAddress } from '../../utils'
 import { useDebounce } from '../../hooks'
 
 const InputPanel = styled.div`
   ${({ theme }) => theme.flexColumnNoWrap}
-  box-shadow: 0 4px 8px 0 ${({ theme }) => lighten(0.9, theme.royalBlue)};
+  box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.royalBlue)};
   position: relative;
   border-radius: 1.25rem;
-  background-color: ${({ theme }) => theme.white};
+  background-color: ${({ theme }) => theme.inputBackground};
   z-index: 1;
 `
 
@@ -21,9 +21,10 @@ const ContainerRow = styled.div`
   justify-content: center;
   align-items: center;
   border-radius: 1.25rem;
-  box-shadow: 0 0 0 1px ${({ error, theme }) => (error ? theme.salmonRed : theme.mercuryGray)};
-  background-color: ${({ theme }) => theme.white};
-  transition: box-shadow 200ms ease-in-out;
+  border: 1px solid ${({ error, theme }) => (error ? theme.salmonRed : theme.mercuryGray)};
+
+  background-color: ${({ theme }) => theme.inputBackground};
+  transition: box-shadow 125ms ease-in-out;
 `
 
 const InputContainer = styled.div`
@@ -59,13 +60,15 @@ const Input = styled.input`
   border: none;
   flex: 1 1 auto;
   width: 0;
+  background-color: ${({ theme }) => theme.inputBackground};
+
   color: ${({ error, theme }) => (error ? theme.salmonRed : theme.royalBlue)};
-  transition: color 200ms ease-in-out;
+  transition: color 125ms ease-in-out;
   overflow: hidden;
   text-overflow: ellipsis;
 
   ::placeholder {
-    color: ${({ theme }) => theme.chaliceGray};
+    color: ${({ theme }) => theme.placeholderGray};
   }
 `
 
@@ -93,6 +96,7 @@ export default function AddressInputPanel({ title, initialInput = '', onChange =
     let stale = false
 
     if (isAddress(debouncedInput)) {
+      try {
         library
           .lookupAddress(debouncedInput)
           .then(name => {
@@ -107,11 +111,18 @@ export default function AddressInputPanel({ title, initialInput = '', onChange =
             }
           })
           .catch(() => {
+            if (!stale) {
               setData({ address: debouncedInput, name: '' })
               setError(null)
+            }
           })
+      } catch {
+        setData({ address: debouncedInput, name: '' })
+        setError(null)
+      }
     } else {
       if (debouncedInput !== '') {
+        try {
           library
             .resolveName(debouncedInput)
             .then(address => {
@@ -126,8 +137,13 @@ export default function AddressInputPanel({ title, initialInput = '', onChange =
               }
             })
             .catch(() => {
+              if (!stale) {
                 setError(true)
+              }
             })
+        } catch {
+          setError(true)
+        }
       }
     }
 

src/components/ContextualInfo/index.js

@@ -2,8 +2,8 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
-import DropdownBlue from '../../assets/images/dropdown-blue.svg'
-import DropupBlue from '../../assets/images/dropup-blue.svg'
+import { ReactComponent as Dropup } from '../../assets/images/dropup-blue.svg'
+import { ReactComponent as Dropdown } from '../../assets/images/dropdown-blue.svg'
 
 const SummaryWrapper = styled.div`
   color: ${({ error, theme }) => (error ? theme.salmonRed : theme.doveGray)};
@@ -42,6 +42,20 @@ const SummaryWrapperContainer = styled.div`
   }
 `
 
+const WrappedDropup = ({ isError, highSlippageWarning, ...rest }) => <Dropup {...rest} />
+const ColoredDropup = styled(WrappedDropup)`
+  path {
+    stroke: ${({ theme }) => theme.royalBlue};
+  }
+`
+
+const WrappedDropdown = ({ isError, highSlippageWarning, ...rest }) => <Dropdown {...rest} />
+const ColoredDropdown = styled(WrappedDropdown)`
+  path {
+    stroke: ${({ theme }) => theme.royalBlue};
+  }
+`
+
 class ContextualInfo extends Component {
   static propTypes = {
     openDetailsText: PropTypes.string,
@@ -89,12 +103,12 @@ class ContextualInfo extends Component {
           {!this.state.showDetails ? (
             <>
               <span>{openDetailsText}</span>
-              <img src={DropdownBlue} alt="dropdown" />
+              <ColoredDropup />
             </>
           ) : (
             <>
               <span>{closeDetailsText}</span>
-              <img src={DropupBlue} alt="dropup" />
+              <ColoredDropdown />
             </>
           )}
         </SummaryWrapperContainer>

src/components/ContextualInfoNew/index.js

@@ -32,8 +32,7 @@ const SummaryWrapperContainer = styled.div`
 
 const Details = styled.div`
   background-color: ${({ theme }) => theme.concreteGray};
-  padding: 1.5rem;
-  padding-bottom: 1rem;
+  /* padding: 1.25rem 1.25rem 1rem 1.25rem; */
   border-radius: 1rem;
   font-size: 0.75rem;
   margin: 1rem 0.5rem 0 0.5rem;
@@ -62,7 +61,7 @@ const ErrorSpan = styled.span`
 const WrappedDropup = ({ isError, highSlippageWarning, ...rest }) => <Dropup {...rest} />
 const ColoredDropup = styled(WrappedDropup)`
   path {
-    stroke: ${({ isError, theme }) => isError && theme.salmonRed};
+    stroke: ${({ isError, theme }) => (isError ? theme.salmonRed : theme.royalBlue)};
 
     ${({ highSlippageWarning, theme }) =>
       highSlippageWarning &&
@@ -75,7 +74,7 @@ const ColoredDropup = styled(WrappedDropup)`
 const WrappedDropdown = ({ isError, highSlippageWarning, ...rest }) => <Dropdown {...rest} />
 const ColoredDropdown = styled(WrappedDropdown)`
   path {
-    stroke: ${({ isError, theme }) => isError && theme.salmonRed};
+    stroke: ${({ isError, theme }) => (isError ? theme.salmonRed : theme.royalBlue)};
 
     ${({ highSlippageWarning, theme }) =>
       highSlippageWarning &&

src/components/ExchangePage/index.jsx

 import React, { useState, useReducer, useEffect } from 'react'
 import ReactGA from 'react-ga'
+
 import { useTranslation } from 'react-i18next'
 import { useWeb3Context } from 'web3-react'
+
 import { ethers } from 'ethers'
 import styled from 'styled-components'
 
@@ -10,13 +12,13 @@ import CurrencyInputPanel from '../CurrencyInputPanel'
 import AddressInputPanel from '../AddressInputPanel'
 import OversizedPanel from '../OversizedPanel'
 import TransactionDetails from '../TransactionDetails'
-import ArrowDownBlue from '../../assets/images/arrow-down-blue.svg'
-import ArrowDownGrey from '../../assets/images/arrow-down-grey.svg'
+import ArrowDown from '../../assets/svg/SVGArrowDown'
 import { amountFormatter, calculateGasMargin } from '../../utils'
 import { useExchangeContract } from '../../hooks'
 import { useTokenDetails } from '../../contexts/Tokens'
 import { useTransactionAdder } from '../../contexts/Transactions'
 import { useAddressBalance, useExchangeReserves } from '../../contexts/Balances'
+import { useFetchAllBalances } from '../../contexts/AllBalances'
 import { useAddressAllowance } from '../../contexts/Allowances'
 
 const INPUT = 0
@@ -27,23 +29,24 @@ const TOKEN_TO_ETH = 1
 const TOKEN_TO_TOKEN = 2
 
 // denominated in bips
-const ALLOWED_SLIPPAGE_DEFAULT = 150
-const TOKEN_ALLOWED_SLIPPAGE_DEFAULT = 200
+const ALLOWED_SLIPPAGE_DEFAULT = 100
+const TOKEN_ALLOWED_SLIPPAGE_DEFAULT = 100
 
-// denominated in seconds
+// 15 minutes, denominated in seconds
 const DEADLINE_FROM_NOW = 60 * 15
 
-// denominated in bips
+// % above the calculated gas cost that we actually send, denominated in bips
 const GAS_MARGIN = ethers.utils.bigNumberify(1000)
 
-
 const DownArrowBackground = styled.div`
   ${({ theme }) => theme.flexRowNoWrap}
   justify-content: center;
   align-items: center;
 `
 
-const DownArrow = styled.img`
+const WrappedArrowDown = ({ clickable, active, ...rest }) => <ArrowDown {...rest} />
+const DownArrow = styled(WrappedArrowDown)`
+  color: ${({ theme, active }) => (active ? theme.royalBlue : theme.chaliceGray)};
   width: 0.625rem;
   height: 0.625rem;
   position: relative;
@@ -62,7 +65,7 @@ const ExchangeRateWrapper = styled.div`
 const ExchangeRate = styled.span`
   flex: 1 1 auto;
   width: 0;
-  color: ${({ theme }) => theme.chaliceGray};
+  color: ${({ theme }) => theme.doveGray};
 `
 
 const Flex = styled.div`
@@ -241,16 +244,17 @@ export default function ExchangePage({ initialCurrency, sending }) {
   const [rawSlippage, setRawSlippage] = useState(ALLOWED_SLIPPAGE_DEFAULT)
   const [rawTokenSlippage, setRawTokenSlippage] = useState(TOKEN_ALLOWED_SLIPPAGE_DEFAULT)
 
-  let allowedSlippageBig = ethers.utils.bigNumberify(rawSlippage)
-  let tokenAllowedSlippageBig = ethers.utils.bigNumberify(rawTokenSlippage)
+  const allowedSlippageBig = ethers.utils.bigNumberify(rawSlippage)
+  const tokenAllowedSlippageBig = ethers.utils.bigNumberify(rawTokenSlippage)
 
   // analytics
   useEffect(() => {
     ReactGA.pageview(window.location.pathname + window.location.search)
   }, [])
 
-  // core swap state-
+  // core swap state
   const [swapState, dispatchSwapState] = useReducer(swapStateReducer, initialCurrency, getInitialSwapState)
+
   const { independentValue, dependentValue, independentField, inputCurrency, outputCurrency } = swapState
 
   const [recipient, setRecipient] = useState({ address: '', name: '' })
@@ -259,7 +263,7 @@ export default function ExchangePage({ initialCurrency, sending }) {
   // get swap type from the currency types
   const swapType = getSwapType(inputCurrency, outputCurrency)
 
-  // get decimals and exchange addressfor each of the currency types
+  // get decimals and exchange address for each of the currency types
   const { symbol: inputSymbol, decimals: inputDecimals, exchangeAddress: inputExchangeAddress } = useTokenDetails(
     inputCurrency
   )
@@ -583,10 +587,13 @@ export default function ExchangePage({ initialCurrency, sending }) {
 
   const [customSlippageError, setcustomSlippageError] = useState('')
 
+  const allBalances = useFetchAllBalances()
+
   return (
     <>
       <CurrencyInputPanel
         title={t('input')}
+        allBalances={allBalances}
         description={inputValueFormatted && independentField === OUTPUT ? estimatedText : ''}
         extraText={inputBalanceFormatted && formatBalance(inputBalanceFormatted)}
         extraTextClickHander={() => {
@@ -620,12 +627,13 @@ export default function ExchangePage({ initialCurrency, sending }) {
             }}
             clickable
             alt="swap"
-            src={isValid ? ArrowDownBlue : ArrowDownGrey}
+            active={isValid}
           />
         </DownArrowBackground>
       </OversizedPanel>
       <CurrencyInputPanel
         title={t('output')}
+        allBalances={allBalances}
         description={outputValueFormatted && independentField === INPUT ? estimatedText : ''}
         extraText={outputBalanceFormatted && formatBalance(outputBalanceFormatted)}
         onCurrencySelected={outputCurrency => {
@@ -644,7 +652,7 @@ export default function ExchangePage({ initialCurrency, sending }) {
         <>
           <OversizedPanel>
             <DownArrowBackground>
-              <DownArrow src={isValid ? ArrowDownBlue : ArrowDownGrey} alt="arrow" />
+              <DownArrow active={isValid} alt="arrow" />
             </DownArrowBackground>
           </OversizedPanel>
           <AddressInputPanel onChange={setRecipient} onError={setRecipientError} />
@@ -662,13 +670,13 @@ export default function ExchangePage({ initialCurrency, sending }) {
           {inverted ? (
             <span>
               {exchangeRate
-                ? `1 ${outputSymbol} = ${amountFormatter(exchangeRateInverted, 18, 4, false)} ${inputSymbol}`
+                ? `1 ${inputSymbol} = ${amountFormatter(exchangeRate, 18, 4, false)} ${outputSymbol}`
                 : ' - '}
             </span>
           ) : (
             <span>
               {exchangeRate
-                ? `1 ${inputSymbol} = ${amountFormatter(exchangeRate, 18, 4, false)} ${outputSymbol}`
+                ? `1 ${outputSymbol} = ${amountFormatter(exchangeRateInverted, 18, 4, false)} ${inputSymbol}`
                 : ' - '}
             </span>
           )}

src/components/Footer/index.js

+import React from 'react'
+import styled from 'styled-components'
+import { darken, transparentize } from 'polished'
+import Toggle from 'react-switch'
+
+import { Link } from '../../theme'
+import { useDarkModeManager } from '../../contexts/LocalStorage'
+
+const FooterFrame = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`
+
+const FooterElement = styled.div`
+  margin: 1.25rem;
+  display: flex;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+`
+
+const Title = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${({ theme }) => theme.uniswapPink};
+
+  :hover {
+    cursor: pointer;
+  }
+  #link {
+    text-decoration-color: ${({ theme }) => theme.uniswapPink};
+  }
+
+  #title {
+    display: inline;
+    font-size: 0.825rem;
+    margin-right: 12px;
+    font-weight: 400;
+    color: ${({ theme }) => theme.uniswapPink};
+    :hover {
+      color: ${({ theme }) => darken(0.2, theme.uniswapPink)};
+    }
+  }
+`
+
+const StyledToggle = styled(Toggle)`
+  margin-right: 24px;
+
+  .react-switch-bg[style] {
+    background-color: ${({ theme }) => theme.inputBackground} !important;
+    border: 1px solid ${({ theme }) => theme.concreteGray} !important;
+  }
+
+  .react-switch-handle[style] {
+    background-color: ${({ theme }) => theme.inputBackground};
+    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.93, theme.royalBlue)};
+    border: 1px solid ${({ theme }) => theme.mercuryGray};
+    border-color: ${({ theme }) => theme.mercuryGray} !important;
+  }
+`
+
+const EmojiToggle = styled.span`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  font-family: Arial sans-serif;
+`
+
+export default function Footer() {
+  const [isDark, toggleDarkMode] = useDarkModeManager()
+
+  return (
+    <FooterFrame>
+      <FooterElement>
+        <Title>
+          <Link id="link" href="https://uniswap.io/">
+            <h1 id="title">About</h1>
+          </Link>
+          <Link id="link" href="https://docs.uniswap.io/">
+            <h1 id="title">Docs</h1>
+          </Link>
+          <Link id="link" href="https://github.com/Uniswap">
+            <h1 id="title">Code</h1>
+          </Link>
+        </Title>
+      </FooterElement>
+
+      <StyledToggle
+        checked={!isDark}
+        uncheckedIcon={
+          <EmojiToggle role="img" aria-label="moon">
+            {/* eslint-disable-line jsx-a11y/accessible-emoji */}
+            🌙️
+          </EmojiToggle>
+        }
+        checkedIcon={
+          <EmojiToggle role="img" aria-label="sun">
+            {/* eslint-disable-line jsx-a11y/accessible-emoji */}
+            {'☀️'}
+          </EmojiToggle>
+        }
+        onChange={() => toggleDarkMode()}
+      />
+    </FooterFrame>
+  )
+}

src/components/Header/index.js

@@ -5,23 +5,40 @@ import { Link } from '../../theme'
 import Web3Status from '../Web3Status'
 import { darken } from 'polished'
 
+const HeaderFrame = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`
+
 const HeaderElement = styled.div`
   margin: 1.25rem;
   display: flex;
   min-width: 0;
+  display: flex;
+  align-items: center;
+`
+
+const Nod = styled.span`
+  transform: rotate(0deg);
+  transition: transform 150ms ease-out;
+
+  :hover {
+    transform: rotate(-10deg);
+  }
 `
 
 const Title = styled.div`
   display: flex;
   align-items: center;
 
-  #image {
-    font-size: 1.5rem;
-    margin-right: 1rem;
+  :hover {
+    cursor: pointer;
   }
 
   #link {
-    text-decoration-color: ${({ theme }) => theme.wisteriaPurple};
+    text-decoration-color: ${({ theme }) => theme.UniswapPink};
   }
 
   #title {
@@ -37,22 +54,24 @@ const Title = styled.div`
 
 export default function Header() {
   return (
-    <>
+    <HeaderFrame>
       <HeaderElement>
         <Title>
-          <span id="image" role="img" aria-label="Unicorn Emoji">
-            🦄
+          <Nod>
+            <Link id="link" href="https://uniswap.io">
+              <span role="img" aria-label="unicorn">
+                🦄{'  '}
               </span>
-
+            </Link>
+          </Nod>
           <Link id="link" href="https://uniswap.io">
             <h1 id="title">Uniswap</h1>
           </Link>
         </Title>
       </HeaderElement>
-
       <HeaderElement>
         <Web3Status />
       </HeaderElement>
-    </>
+    </HeaderFrame>
   )
 }

src/components/Modal/index.js

@@ -5,8 +5,9 @@ import { DialogOverlay, DialogContent } from '@reach/dialog'
 import '@reach/dialog/styles.css'
 
 const AnimatedDialogOverlay = animated(DialogOverlay)
-const StyledDialogOverlay = styled(AnimatedDialogOverlay).attrs({
-  suppressclassnamewarning: 'true'
+const WrappedDialogOverlay = ({ suppressClassNameWarning, ...rest }) => <AnimatedDialogOverlay {...rest} />
+const StyledDialogOverlay = styled(WrappedDialogOverlay).attrs({
+  suppressClassNameWarning: true
 })`
   &[data-reach-dialog-overlay] {
     z-index: 2;
@@ -20,12 +21,14 @@ const FilteredDialogContent = ({ minHeight, ...rest }) => <DialogContent {...res
 const StyledDialogContent = styled(FilteredDialogContent)`
   &[data-reach-dialog-content] {
     margin: 0 0 2rem 0;
-    ${({ theme }) => theme.mediaWidth.upToMedium`margin: 0;`}
-    padding: 0;
+    border: 1px solid ${({ theme }) => theme.concreteGray};
+    background-color: ${({ theme }) => theme.inputBackground};
+    ${({ theme }) => theme.mediaWidth.upToMedium`margin: 0;`};
+    padding: 0px;
     width: 50vw;
     max-width: 650px;
     ${({ theme }) => theme.mediaWidth.upToMedium`width: 65vw;`}
-    ${({ theme }) => theme.mediaWidth.upToSmall`width: 80vw;`}
+    ${({ theme }) => theme.mediaWidth.upToSmall`width: 85vw;`}
     max-height: 50vh;
     ${({ minHeight }) =>
       minHeight &&
@@ -36,7 +39,7 @@ const StyledDialogContent = styled(FilteredDialogContent)`
     ${({ theme }) => theme.mediaWidth.upToSmall`max-height: 80vh;`}
     display: flex;
     overflow: hidden;
-    border-radius: 1.5rem;
+    border-radius: 10px;
   }
 `
 
@@ -50,7 +53,7 @@ const HiddenCloseButton = styled.button`
 
 export default function Modal({ isOpen, onDismiss, minHeight = false, initialFocusRef, children }) {
   const transitions = useTransition(isOpen, null, {
-    config: { duration: 125 },
+    config: { duration: 150 },
     from: { opacity: 0 },
     enter: { opacity: 1 },
     leave: { opacity: 0 }

src/components/NavigationTabs/index.js

@@ -60,7 +60,7 @@ const Tabs = styled.div`
   height: 2.5rem;
   background-color: ${({ theme }) => theme.concreteGray};
   border-radius: 3rem;
-  box-shadow: 0 0 0 1px ${({ theme }) => darken(0.05, theme.concreteGray)};
+  /* border: 1px solid ${({ theme }) => theme.mercuryGray}; */
   margin-bottom: 1rem;
 `
 
@@ -73,6 +73,7 @@ const StyledNavLink = styled(NavLink).attrs({
   align-items: center;
   justify-content: center;
   height: 2.5rem;
+  border: 1px solid ${({ theme }) => transparentize(1, theme.mercuryGray)};
   flex: 1 0 auto;
   border-radius: 3rem;
   outline: none;
@@ -80,21 +81,24 @@ const StyledNavLink = styled(NavLink).attrs({
   text-decoration: none;
   color: ${({ theme }) => theme.doveGray};
   font-size: 1rem;
+  box-sizing: border-box;
 
   &.${activeClassName} {
-    background-color: ${({ theme }) => theme.white};
+    background-color: ${({ theme }) => theme.inputBackground};
     border-radius: 3rem;
-    box-shadow: 0 0 1px 1px ${({ theme }) => theme.mercuryGray};
+    border: 1px solid ${({ theme }) => theme.mercuryGray};
+    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.royalBlue)};
+    box-sizing: border-box;
     font-weight: 500;
     color: ${({ theme }) => theme.royalBlue};
     :hover {
-      box-shadow: 0 0 1px 1px ${({ theme }) => darken(0.1, theme.mercuryGray)};
+      border: 1px solid ${({ theme }) => darken(0.1, theme.mercuryGray)};
+      background-color: ${({ theme }) => darken(0.01, theme.inputBackground)};
     }
   }
 
   :hover,
   :focus {
-    font-weight: 500;
     color: ${({ theme }) => darken(0.1, theme.royalBlue)};
   }
 `

src/components/TokenLogo/index.js

@@ -3,18 +3,20 @@ import styled from 'styled-components'
 
 import { ReactComponent as EthereumLogo } from '../../assets/images/ethereum-logo.svg'
 
-const TOKEN_ICON_API = 'https://raw.githubusercontent.com/TrustWallet/tokens/master/tokens'
+const TOKEN_ICON_API = address =>
+  `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${address}/logo.png`
 const BAD_IMAGES = {}
 
 const Image = styled.img`
   width: ${({ size }) => size};
   height: ${({ size }) => size};
+  background-color: white;
   border-radius: 1rem;
 `
 
 const Emoji = styled.span`
   width: ${({ size }) => size};
-  font-size: ${({ size }) => size};
+  height: ${({ size }) => size};
 `
 
 const StyledEthereumLogo = styled(EthereumLogo)`
@@ -29,10 +31,10 @@ export default function TokenLogo({ address, size = '1rem', ...rest }) {
   if (address === 'ETH') {
     return <StyledEthereumLogo size={size} />
   } else if (!error && !BAD_IMAGES[address]) {
-    path = `${TOKEN_ICON_API}/${address.toLowerCase()}.png`
+    path = TOKEN_ICON_API(address.toLowerCase())
   } else {
     return (
-      <Emoji {...rest}>
+      <Emoji {...rest} size={size}>
         <span role="img" aria-label="Thinking">
           🤔
         </span>

src/components/Web3Status/index.js

@@ -32,8 +32,8 @@ const Web3StatusGeneric = styled.button`
 `
 const Web3StatusError = styled(Web3StatusGeneric)`
   background-color: ${({ theme }) => theme.salmonRed};
-  color: ${({ theme }) => theme.white};
   border: 1px solid ${({ theme }) => theme.salmonRed};
+  color: ${({ theme }) => theme.white};
   font-weight: 500;
   :hover,
   :focus {
@@ -43,9 +43,10 @@ const Web3StatusError = styled(Web3StatusGeneric)`
 
 const Web3StatusConnect = styled(Web3StatusGeneric)`
   background-color: ${({ theme }) => theme.royalBlue};
-  color: ${({ theme }) => theme.white};
   border: 1px solid ${({ theme }) => theme.royalBlue};
+  color: ${({ theme }) => theme.white};
   font-weight: 500;
+
   :hover,
   :focus {
     background-color: ${({ theme }) => darken(0.1, theme.royalBlue)};
@@ -53,14 +54,18 @@ const Web3StatusConnect = styled(Web3StatusGeneric)`
 `
 
 const Web3StatusConnected = styled(Web3StatusGeneric)`
-  background-color: ${({ pending, theme }) => (pending ? theme.zumthorBlue : theme.white)};
-  color: ${({ pending, theme }) => (pending ? theme.royalBlue : theme.doveGray)};
+  background-color: ${({ pending, theme }) => (pending ? theme.zumthorBlue : theme.inputBackground)};
   border: 1px solid ${({ pending, theme }) => (pending ? theme.royalBlue : theme.mercuryGray)};
+  color: ${({ pending, theme }) => (pending ? theme.royalBlue : theme.doveGray)};
   font-weight: 400;
   :hover {
+
+    > P {
+      color: ${({ theme }) => theme.uniswapPink};
+    }
     background-color: ${({ pending, theme }) =>
       pending ? transparentize(0.9, theme.royalBlue) : transparentize(0.9, theme.mercuryGray)};
-  }
+    
   :focus {
     border: 1px solid
       ${({ pending, theme }) => (pending ? darken(0.1, theme.royalBlue) : darken(0.1, theme.mercuryGray))};
@@ -72,7 +77,6 @@ const Text = styled.p`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-
   margin: 0 0.5rem 0 0.25rem;
   font-size: 0.83rem;
 `

src/contexts/AllBalances.js

+import React, { createContext, useContext, useReducer, useMemo, useCallback } from 'react'
+import { ethers } from 'ethers'
+import { getTokenReserves, getMarketDetails, BigNumber } from '@uniswap/sdk'
+import { useWeb3Context } from 'web3-react'
+
+import { safeAccess, isAddress, getEtherBalance, getTokenBalance } from '../utils'
+import { useAllTokenDetails } from './Tokens'
+
+const ZERO = ethers.utils.bigNumberify(0)
+const ONE = new BigNumber(1)
+
+const UPDATE = 'UPDATE'
+
+const AllBalancesContext = createContext()
+
+function useAllBalancesContext() {
+  return useContext(AllBalancesContext)
+}
+
+function reducer(state, { type, payload }) {
+  switch (type) {
+    case UPDATE: {
+      const { allBalanceData, networkId, address } = payload
+      return {
+        ...state,
+        [networkId]: {
+          ...(safeAccess(state, [networkId]) || {}),
+          [address]: {
+            ...(safeAccess(state, [networkId, address]) || {}),
+            allBalanceData
+          }
+        }
+      }
+    }
+    default: {
+      throw Error(`Unexpected action type in AllBalancesContext reducer: '${type}'.`)
+    }
+  }
+}
+
+export default function Provider({ children }) {
+  const [state, dispatch] = useReducer(reducer, {})
+
+  const update = useCallback((allBalanceData, networkId, address) => {
+    dispatch({ type: UPDATE, payload: { allBalanceData, networkId, address } })
+  }, [])
+
+  return (
+    <AllBalancesContext.Provider value={useMemo(() => [state, { update }], [state, update])}>
+      {children}
+    </AllBalancesContext.Provider>
+  )
+}
+
+export function useFetchAllBalances() {
+  const { account, networkId, library } = useWeb3Context()
+
+  const allTokens = useAllTokenDetails()
+
+  const [state, { update }] = useAllBalancesContext()
+
+  const { allBalanceData } = safeAccess(state, [networkId, account]) || {}
+
+  const getData = async () => {
+    if (!!library && !!account) {
+      const newBalances = {}
+      await Promise.all(
+        Object.keys(allTokens).map(async k => {
+          let balance = null
+          let ethRate = null
+
+          if (isAddress(k) || k === 'ETH') {
+            if (k === 'ETH') {
+              balance = await getEtherBalance(account, library).catch(() => null)
+              ethRate = ONE
+            } else {
+              balance = await getTokenBalance(k, account, library).catch(() => null)
+
+              // only get values for tokens with positive balances
+              if (!!balance && balance.gt(ZERO)) {
+                const tokenReserves = await getTokenReserves(k, library).catch(() => null)
+                if (!!tokenReserves) {
+                  const marketDetails = getMarketDetails(tokenReserves)
+                  if (marketDetails.marketRate && marketDetails.marketRate.rate) {
+                    ethRate = marketDetails.marketRate.rate
+                  }
+                }
+              }
+            }
+
+            return (newBalances[k] = { balance, ethRate })
+          }
+        })
+      )
+      update(newBalances, networkId, account)
+    }
+  }
+
+  useMemo(getData, [account, state])
+
+  return allBalanceData
+}

src/contexts/Application.js

 import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect } from 'react'
 import { useWeb3Context } from 'web3-react'
+
 import { safeAccess } from '../utils'
+import { getUSDPrice } from '../utils/price'
 
-const BLOCK_NUMBERS = 'BLOCK_NUMBERS'
+const BLOCK_NUMBER = 'BLOCK_NUMBER'
+const USD_PRICE = 'USD_PRICE'
 
 const UPDATE_BLOCK_NUMBER = 'UPDATE_BLOCK_NUMBER'
+const UPDATE_USD_PRICE = 'UPDATE_USD_PRICE'
 
 const ApplicationContext = createContext()
 
@@ -18,12 +22,22 @@ function reducer(state, { type, payload }) {
       const { networkId, blockNumber } = payload
       return {
         ...state,
-        [BLOCK_NUMBERS]: {
-          ...(safeAccess(state, [BLOCK_NUMBERS]) || {}),
+        [BLOCK_NUMBER]: {
+          ...(safeAccess(state, [BLOCK_NUMBER]) || {}),
           [networkId]: blockNumber
         }
       }
     }
+    case UPDATE_USD_PRICE: {
+      const { networkId, USDPrice } = payload
+      return {
+        ...state,
+        [USD_PRICE]: {
+          ...(safeAccess(state, [USD_PRICE]) || {}),
+          [networkId]: USDPrice
+        }
+      }
+    }
     default: {
       throw Error(`Unexpected action type in ApplicationContext reducer: '${type}'.`)
     }
@@ -32,15 +46,22 @@ function reducer(state, { type, payload }) {
 
 export default function Provider({ children }) {
   const [state, dispatch] = useReducer(reducer, {
-    [BLOCK_NUMBERS]: {}
+    [BLOCK_NUMBER]: {},
+    [USD_PRICE]: {}
   })
 
   const updateBlockNumber = useCallback((networkId, blockNumber) => {
     dispatch({ type: UPDATE_BLOCK_NUMBER, payload: { networkId, blockNumber } })
   }, [])
 
+  const updateUSDPrice = useCallback((networkId, USDPrice) => {
+    dispatch({ type: UPDATE_USD_PRICE, payload: { networkId, USDPrice } })
+  }, [])
+
   return (
-    <ApplicationContext.Provider value={useMemo(() => [state, { updateBlockNumber }], [state, updateBlockNumber])}>
+    <ApplicationContext.Provider
+      value={useMemo(() => [state, { updateBlockNumber, updateUSDPrice }], [state, updateBlockNumber, updateUSDPrice])}
+    >
       {children}
     </ApplicationContext.Provider>
   )
@@ -49,7 +70,24 @@ export default function Provider({ children }) {
 export function Updater() {
   const { networkId, library } = useWeb3Context()
 
-  const [, { updateBlockNumber }] = useApplicationContext()
+  const globalBlockNumber = useBlockNumber()
+  const [, { updateBlockNumber, updateUSDPrice }] = useApplicationContext()
+
+  useEffect(() => {
+    let stale = false
+
+    getUSDPrice(library)
+      .then(([price]) => {
+        if (!stale) {
+          updateUSDPrice(networkId, price)
+        }
+      })
+      .catch(() => {
+        if (!stale) {
+          updateUSDPrice(networkId, null)
+        }
+      })
+  }, [globalBlockNumber, library, networkId, updateUSDPrice])
 
   useEffect(() => {
     if ((networkId || networkId === 0) && library) {
@@ -88,5 +126,13 @@ export function useBlockNumber() {
 
   const [state] = useApplicationContext()
 
-  return safeAccess(state, [BLOCK_NUMBERS, networkId])
+  return safeAccess(state, [BLOCK_NUMBER, networkId])
+}
+
+export function useUSDPrice() {
+  const { networkId } = useWeb3Context()
+
+  const [state] = useApplicationContext()
+
+  return safeAccess(state, [USD_PRICE, networkId])
 }

src/contexts/Balances.js

@@ -79,7 +79,6 @@ export function useAddressBalance(address, tokenAddress) {
             update(networkId, address, tokenAddress, null, globalBlockNumber)
           }
         })
-
       return () => {
         stale = true
       }

src/contexts/LocalStorage.js

@@ -7,7 +7,9 @@ const CURRENT_VERSION = 0
 const LAST_SAVED = 'LAST_SAVED'
 
 const BETA_MESSAGE_DISMISSED = 'BETA_MESSAGE_DISMISSED'
-const UPDATABLE_KEYS = [BETA_MESSAGE_DISMISSED]
+const DARK_MODE = 'DARK_MODE'
+
+const UPDATABLE_KEYS = [BETA_MESSAGE_DISMISSED, DARK_MODE]
 
 const UPDATE_KEY = 'UPDATE_KEY'
 
@@ -39,7 +41,8 @@ function reducer(state, { type, payload }) {
 function init() {
   const defaultLocalStorage = {
     [VERSION]: CURRENT_VERSION,
-    [BETA_MESSAGE_DISMISSED]: false
+    [BETA_MESSAGE_DISMISSED]: false,
+    [DARK_MODE]: false
   }
 
   try {
@@ -48,7 +51,7 @@ function init() {
       // this is where we could run migration logic
       return defaultLocalStorage
     } else {
-      return parsed
+      return { ...defaultLocalStorage, ...parsed }
     }
   } catch {
     return defaultLocalStorage
@@ -88,3 +91,15 @@ export function useBetaMessageManager() {
 
   return [!state[BETA_MESSAGE_DISMISSED], dismissBetaMessage]
 }
+
+export function useDarkModeManager() {
+  const [state, { updateKey }] = useLocalStorageContext()
+
+  const isDarkMode = state[DARK_MODE]
+
+  const toggleDarkMode = useCallback(() => {
+    updateKey(DARK_MODE, !isDarkMode)
+  }, [updateKey, isDarkMode])
+
+  return [state[DARK_MODE], toggleDarkMode]
+}

src/contexts/Tokens.js

@@ -89,14 +89,12 @@ const INITIAL_TOKENS_CONTEXT = {
       [DECIMALS]: 9,
       [EXCHANGE_ADDRESS]: '0xb92dE8B30584392Af27726D5ce04Ef3c4e5c9924'
     },
-
     '0xc719d010B63E5bbF2C0551872CD5316ED26AcD83': {
       [NAME]: 'Decentralized Insurance Protocol',
       [SYMBOL]: 'DIP',
       [DECIMALS]: 18,
       [EXCHANGE_ADDRESS]: '0x61792F290e5100FBBcBb2309F03A1Bab869fb850'
     },
-
     '0x4946Fcea7C692606e8908002e55A582af44AC121': {
       [NAME]: 'FOAM Token',
       [SYMBOL]: 'FOAM',
@@ -247,6 +245,12 @@ const INITIAL_TOKENS_CONTEXT = {
       [DECIMALS]: 18,
       [EXCHANGE_ADDRESS]: '0x755899F0540c3548b99E68C59AdB0f15d2695188'
     },
+    '0xF970b8E36e23F7fC3FD752EeA86f8Be8D83375A6': {
+      [NAME]: 'Ripio Credit Network Token',
+      [SYMBOL]: 'RCN',
+      [DECIMALS]: 18,
+      [EXCHANGE_ADDRESS]: '0xD91FF16Ef92568fC27F466C3c5613e43313Ab1dc'
+    },
     '0x255Aa6DF07540Cb5d3d297f0D0D4D84cb52bc8e6': {
       [NAME]: 'Raiden Token',
       [SYMBOL]: 'RDN',
@@ -301,11 +305,11 @@ const INITIAL_TOKENS_CONTEXT = {
       [DECIMALS]: 18,
       [EXCHANGE_ADDRESS]: '0x1aEC8F11A7E78dC22477e91Ed924Fab46e3A88Fd'
     },
-    '0x2Dea20405c52Fb477ecCa8Fe622661d316Ac5400': {
+    '0xC011a73ee8576Fb46F5E1c5751cA3B9Fe0af2a6F': {
       [NAME]: 'Synthetix Network Token',
       [SYMBOL]: 'SNX',
       [DECIMALS]: 18,
-      [EXCHANGE_ADDRESS]: '0x9fAA0Cb10912DE7Ad1D86705C65de291a9088A61'
+      [EXCHANGE_ADDRESS]: '0x3958B4eC427F8fa24eB60F42821760e88d485f7F'
     },
     '0x42d6622deCe394b54999Fbd73D108123806f6a18': {
       [NAME]: 'SPANK',
@@ -462,7 +466,6 @@ export function useTokenDetails(tokenAddress) {
           }
         }
       )
-
       return () => {
         stale = true
       }

src/hooks/index.js

@@ -58,9 +58,8 @@ export function useENSName(address) {
   useEffect(() => {
     if (isAddress(address)) {
       let stale = false
-      library
-        .lookupAddress(address)
-        .then(name => {
+      try {
+        library.lookupAddress(address).then(name => {
           if (!stale) {
             if (name) {
               setENSNname(name)
@@ -69,11 +68,9 @@ export function useENSName(address) {
             }
           }
         })
-        .catch(() => {
-          if (!stale) {
+      } catch {
         setENSNname(null)
       }
-        })
 
       return () => {
         stale = true

src/index.js

@@ -10,6 +10,7 @@ import TransactionContextProvider, { Updater as TransactionContextUpdater } from
 import TokensContextProvider from './contexts/Tokens'
 import BalancesContextProvider from './contexts/Balances'
 import AllowancesContextProvider from './contexts/Allowances'
+import AllBalancesContextProvider from './contexts/AllBalances'
 
 import App from './pages/App'
 import InjectedConnector from './InjectedConnector'
@@ -35,7 +36,9 @@ function ContextProviders({ children }) {
         <TransactionContextProvider>
           <TokensContextProvider>
             <BalancesContextProvider>
+              <AllBalancesContextProvider>
                 <AllowancesContextProvider>{children}</AllowancesContextProvider>
+              </AllBalancesContextProvider>
             </BalancesContextProvider>
           </TokensContextProvider>
         </TransactionContextProvider>
@@ -55,16 +58,16 @@ function Updaters() {
 }
 
 ReactDOM.render(
-  <ThemeProvider>
-    <>
-      <GlobalStyle />
   <Web3Provider connectors={connectors} libraryName="ethers.js">
     <ContextProviders>
       <Updaters />
+      <ThemeProvider>
+        <>
+          <GlobalStyle />
           <App />
-        </ContextProviders>
-      </Web3Provider>
         </>
-  </ThemeProvider>,
+      </ThemeProvider>
+    </ContextProviders>
+  </Web3Provider>,
   document.getElementById('root')
 )

src/pages/App.js

@@ -4,6 +4,8 @@ import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'
 
 import Web3ReactManager from '../components/Web3ReactManager'
 import Header from '../components/Header'
+import Footer from '../components/Footer'
+
 import NavigationTabs from '../components/NavigationTabs'
 import { isAddress } from '../utils'
 
@@ -11,24 +13,38 @@ const Swap = lazy(() => import('./Swap'))
 const Send = lazy(() => import('./Send'))
 const Pool = lazy(() => import('./Pool'))
 
+const AppWrapper = styled.div`
+  display: flex;
+  flex-flow: column;
+  align-items: flex-start;
+  height: 100vh;
+`
+
 const HeaderWrapper = styled.div`
   ${({ theme }) => theme.flexRowNoWrap}
   width: 100%;
   justify-content: space-between;
 `
+const FooterWrapper = styled.div`
+  width: 100%;
+  min-height: 30px;
+  align-self: flex-end;
+`
 
 const BodyWrapper = styled.div`
-  ${({ theme }) => theme.flexRowNoWrap}
+  display: flex;
+  flex-direction: column;
   width: 100%;
-  justify-content: center;
-  flex-grow: 1;
-  flex-basis: 0;
+  justify-content: flex-start;
+  align-items: center;
+  flex: 1;
   overflow: auto;
 `
 
 const Body = styled.div`
-  width: 35rem;
-  margin: 1.25rem;
+  max-width: 35rem;
+  width: 90%;
+  /* margin: 0 1.25rem 1.25rem 1.25rem; */
 `
 
 export default function App() {

src/pages/Pool/AddLiquidity.js

@@ -9,12 +9,13 @@ import { Button } from '../../theme'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
 import OversizedPanel from '../../components/OversizedPanel'
 import ContextualInfo from '../../components/ContextualInfo'
-import PlusBlue from '../../assets/images/plus-blue.svg'
-import PlusGrey from '../../assets/images/plus-grey.svg'
+import { ReactComponent as Plus } from '../../assets/images/plus-blue.svg'
+
 import { useExchangeContract } from '../../hooks'
 import { amountFormatter, calculateGasMargin } from '../../utils'
 import { useTransactionAdder } from '../../contexts/Transactions'
 import { useTokenDetails } from '../../contexts/Tokens'
+import { useFetchAllBalances } from '../../contexts/AllBalances'
 import { useAddressBalance, useExchangeReserves } from '../../contexts/Balances'
 import { useAddressAllowance } from '../../contexts/Allowances'
 
@@ -63,14 +64,6 @@ const DownArrowBackground = styled.div`
   justify-content: center;
   align-items: center;
 `
-
-const DownArrow = styled.img`
-  width: 0.625rem;
-  height: 0.625rem;
-  position: relative;
-  padding: 0.875rem;
-`
-
 const SummaryPanel = styled.div`
   ${({ theme }) => theme.flexColumnNoWrap}
   padding: 1rem 0;
@@ -87,7 +80,7 @@ const ExchangeRateWrapper = styled.div`
 const ExchangeRate = styled.span`
   flex: 1 1 auto;
   width: 0;
-  color: ${({ theme }) => theme.chaliceGray};
+  color: ${({ theme }) => theme.doveGray};
 `
 
 const Flex = styled.div`
@@ -100,6 +93,17 @@ const Flex = styled.div`
   }
 `
 
+const WrappedPlus = ({ isError, highSlippageWarning, ...rest }) => <Plus {...rest} />
+const ColoredWrappedPlus = styled(WrappedPlus)`
+  width: 0.625rem;
+  height: 0.625rem;
+  position: relative;
+  padding: 0.875rem;
+  path {
+    stroke: ${({ active, theme }) => (active ? theme.royalBlue : theme.chaliceGray)};
+  }
+`
+
 function calculateSlippageBounds(value) {
   if (value) {
     const offset = value.mul(ALLOWED_SLIPPAGE).div(ethers.utils.bigNumberify(10000))
@@ -531,6 +535,8 @@ export default function AddLiquidity() {
   const isActive = active && account
   const isValid = (inputError === null || outputError === null) && !showUnlock
 
+  const allBalances = useFetchAllBalances()
+
   return (
     <>
       {isNewExchange ? (
@@ -547,6 +553,7 @@ export default function AddLiquidity() {
 
       <CurrencyInputPanel
         title={t('deposit')}
+        allBalances={allBalances}
         extraText={inputBalance && formatBalance(amountFormatter(inputBalance, 18, 4))}
         onValueChange={inputValue => {
           dispatchAddLiquidityState({ type: 'UPDATE_VALUE', payload: { value: inputValue, field: INPUT } })
@@ -558,11 +565,12 @@ export default function AddLiquidity() {
       />
       <OversizedPanel>
         <DownArrowBackground>
-          <DownArrow src={isActive ? PlusBlue : PlusGrey} alt="plus" />
+          <ColoredWrappedPlus active={isActive} alt="plus" />
         </DownArrowBackground>
       </OversizedPanel>
       <CurrencyInputPanel
         title={t('deposit')}
+        allBalances={allBalances}
         description={isNewExchange ? '' : outputValue ? `(${t('estimated')})` : ''}
         extraText={outputBalance && formatBalance(amountFormatter(outputBalance, decimals, Math.min(decimals, 4)))}
         selectedTokenAddress={outputCurrency}

src/pages/Pool/CreateExchange.js

@@ -29,7 +29,7 @@ const ExchangeRateWrapper = styled.div`
 const ExchangeRate = styled.span`
   flex: 1 1 auto;
   width: 0;
-  color: ${({ theme }) => theme.chaliceGray};
+  color: ${({ theme }) => theme.doveGray};
 `
 
 const CreateExchangeWrapper = styled.div`

src/pages/Pool/ModeSelector.js

@@ -4,10 +4,13 @@ import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import OversizedPanel from '../../components/OversizedPanel'
-import Dropdown from '../../assets/images/dropdown-blue.svg'
+import { ReactComponent as Dropdown } from '../../assets/images/dropdown-blue.svg'
+
 import Modal from '../../components/Modal'
 import { useBodyKeyDown } from '../../hooks'
 
+import { lighten } from 'polished'
+
 const poolTabOrder = [
   {
     path: '/add-liquidity',
@@ -29,13 +32,16 @@ const poolTabOrder = [
 const LiquidityContainer = styled.div`
   ${({ theme }) => theme.flexRowNoWrap};
   align-items: center;
-  font-size: 0.75rem;
-  padding: 0.625rem 1rem;
-  font-size: 0.75rem;
+  padding: 1rem 1rem;
+  font-size: 1rem;
   color: ${({ theme }) => theme.royalBlue};
   font-weight: 500;
   cursor: pointer;
 
+  :hover {
+    color: ${({ theme }) => lighten(0.1, theme.royalBlue)};
+  }
+
   img {
     height: 0.75rem;
     width: 0.75rem;
@@ -62,21 +68,28 @@ const StyledNavLink = styled(NavLink).attrs({
   font-size: 1rem;
 
   &.${activeClassName} {
-    background-color: ${({ theme }) => theme.white};
+    background-color: ${({ theme }) => theme.inputBackground};
     border-radius: 3rem;
-    box-shadow: 0 0 1px 1px ${({ theme }) => theme.mercuryGray};
+    border: 1px solid ${({ theme }) => theme.mercuryGray};
     font-weight: 500;
     color: ${({ theme }) => theme.royalBlue};
   }
 `
 
 const PoolModal = styled.div`
-  background-color: ${({ theme }) => theme.white};
+  background-color: ${({ theme }) => theme.inputBackground};
   width: 100%;
   height: 100%;
   padding: 2rem 0 2rem 0;
 `
 
+const WrappedDropdown = ({ isError, highSlippageWarning, ...rest }) => <Dropdown {...rest} />
+const ColoredDropdown = styled(WrappedDropdown)`
+  path {
+    stroke: ${({ theme }) => theme.royalBlue};
+  }
+`
+
 function ModeSelector({ location: { pathname }, history }) {
   const { t } = useTranslation()
 
@@ -109,7 +122,7 @@ function ModeSelector({ location: { pathname }, history }) {
         }}
       >
         <LiquidityLabel>{t(activeTabKey)}</LiquidityLabel>
-        <img src={Dropdown} alt="dropdown" />
+        <ColoredDropdown alt="arrow down" />
       </LiquidityContainer>
       <Modal
         isOpen={modalIsOpen}

src/pages/Pool/RemoveLiquidity.js

@@ -9,12 +9,13 @@ import { Button } from '../../theme'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
 import ContextualInfo from '../../components/ContextualInfo'
 import OversizedPanel from '../../components/OversizedPanel'
-import ArrowDownBlue from '../../assets/images/arrow-down-blue.svg'
-import ArrowDownGrey from '../../assets/images/arrow-down-grey.svg'
+import ArrowDown from '../../assets/svg/SVGArrowDown'
+
 import { useExchangeContract } from '../../hooks'
 import { useTransactionAdder } from '../../contexts/Transactions'
 import { useTokenDetails } from '../../contexts/Tokens'
 import { useAddressBalance } from '../../contexts/Balances'
+import { useFetchAllBalances } from '../../contexts/AllBalances'
 import { calculateGasMargin, amountFormatter } from '../../utils'
 
 // denominated in bips
@@ -36,7 +37,9 @@ const DownArrowBackground = styled.div`
   align-items: center;
 `
 
-const DownArrow = styled.img`
+const DownArrow = styled(ArrowDown)`
+  ${({ theme }) => theme.flexRowNoWrap}
+  color: ${({ theme, active }) => (active ? theme.royalBlue : theme.doveGray)};
   width: 0.625rem;
   height: 0.625rem;
   position: relative;
@@ -80,7 +83,7 @@ const ExchangeRateWrapper = styled.div`
 const ExchangeRate = styled.span`
   flex: 1 1 auto;
   width: 0;
-  color: ${({ theme }) => theme.chaliceGray};
+  color: ${({ theme }) => theme.doveGray};
 `
 
 const Flex = styled.div`
@@ -326,10 +329,13 @@ export default function RemoveLiquidity() {
 
   const marketRate = getMarketRate(exchangeETHBalance, exchangeTokenBalance, decimals)
 
+  const allBalances = useFetchAllBalances()
+
   return (
     <>
       <CurrencyInputPanel
         title={t('poolTokens')}
+        allBalances={allBalances}
         extraText={poolTokenBalance && formatBalance(amountFormatter(poolTokenBalance, 18, 4))}
         extraTextClickHander={() => {
           if (poolTokenBalance) {
@@ -347,11 +353,12 @@ export default function RemoveLiquidity() {
       />
       <OversizedPanel>
         <DownArrowBackground>
-          <DownArrow src={isActive ? ArrowDownBlue : ArrowDownGrey} alt="arrow" />
+          <DownArrow active={isActive} alt="arrow" />
         </DownArrowBackground>
       </OversizedPanel>
       <CurrencyInputPanel
         title={t('output')}
+        allBalances={allBalances}
         description={!!(ethWithdrawn && tokenWithdrawn) ? `(${t('estimated')})` : ''}
         key="remove-liquidity-input"
         renderInput={() =>

src/theme/components.js

@@ -12,8 +12,8 @@ export const Button = styled.button.attrs(({ warning, theme }) => ({
   border: none;
   outline: none;
   background-color: ${({ backgroundColor }) => backgroundColor};
+  transition: background-color 150ms ease-out;
   color: ${({ theme }) => theme.white};
-  transition: background-color 125ms ease-in-out;
   width: 100%;
 
   :hover,
@@ -26,7 +26,8 @@ export const Button = styled.button.attrs(({ warning, theme }) => ({
   }
 
   :disabled {
-    background-color: ${({ theme }) => theme.mercuryGray};
+    background-color: ${({ theme }) => theme.concreteGray};
+    color: ${({ theme }) => theme.silverGray};
     cursor: auto;
   }
 `
@@ -50,12 +51,13 @@ export const Link = styled.a.attrs({
 `
 
 export const BorderlessInput = styled.input`
-  color: ${({ theme }) => theme.mineshaftGray};
+  color: ${({ theme }) => theme.textColor};
   font-size: 1rem;
   outline: none;
   border: none;
   flex: 1 1 auto;
   width: 0;
+  background-color: ${({ theme }) => theme.inputBackground};
 
   [type='number'] {
     -moz-appearance: textfield;
@@ -67,7 +69,7 @@ export const BorderlessInput = styled.input`
   }
 
   ::placeholder {
-    color: ${({ theme }) => theme.mercuryGray};
+    color: ${({ theme }) => theme.chaliceGray};
   }
 `
 

src/theme/index.js

 import React from 'react'
 import { ThemeProvider as StyledComponentsThemeProvider, createGlobalStyle, css } from 'styled-components'
+import { useDarkModeManager } from '../contexts/LocalStorage'
 
 export * from './components'
 
@@ -28,23 +29,36 @@ const flexRowNoWrap = css`
   flex-flow: row nowrap;
 `
 
-const theme = {
-  white: '#FFFFFF',
-  black: '#000000',
+const white = '#FFFFFF'
+const black = '#000000'
+
+const theme = darkMode => ({
+  white,
+  black,
+  textColor: darkMode ? white : '#010101',
+
+  // for setting css on <html>
+  backgroundColor: darkMode ? '#333639' : white,
+
+  inputBackground: darkMode ? '#202124' : white,
+  placeholderGray: darkMode ? '#5F5F5F' : '#E1E1E1',
+
   // grays
-  concreteGray: '#FAFAFA',
-  mercuryGray: '#E1E1E1',
-  silverGray: '#C4C4C4',
-  chaliceGray: '#AEAEAE',
-  doveGray: '#737373',
-  mineshaftGray: '#2B2B2B',
-  buttonOutlineGrey: '#f2f2f2',
+  concreteGray: darkMode ? '#292C2F' : '#FAFAFA',
+  mercuryGray: darkMode ? '#333333' : '#E1E1E1',
+  silverGray: darkMode ? '#737373' : '#C4C4C4',
+  chaliceGray: darkMode ? '#7B7B7B' : '#AEAEAE',
+  doveGray: darkMode ? '#C4C4C4' : '#737373',
+  mineshaftGray: darkMode ? '#E1E1E1' : '#2B2B2B',
+  buttonOutlineGrey: darkMode ? '#FAFAFA' : '#F2F2F2',
+  tokenRowHover: darkMode ? '#404040' : '#F2F2F2',
   //blacks
-  charcoalBlack: '#404040',
+  charcoalBlack: darkMode ? '#F2F2F2' : '#404040',
   // blues
-  zumthorBlue: '#EBF4FF',
-  malibuBlue: '#5CA2FF',
-  royalBlue: '#2F80ED',
+  zumthorBlue: darkMode ? '#212529' : '#EBF4FF',
+  malibuBlue: darkMode ? '#E67AEF' : '#5CA2FF',
+  royalBlue: darkMode ? '#DC6BE5' : '#2F80ED',
+  loadingBlue: darkMode ? '#e4f0ff' : '#e4f0ff',
   // purples
   wisteriaPurple: '#DC6BE5',
   // reds
@@ -57,15 +71,20 @@ const theme = {
   uniswapPink: '#DC6BE5',
   connectedGreen: '#27AE60',
 
+  //specific
+  textHover: darkMode ? theme.uniswapPink : theme.doveGray,
+
   // media queries
   mediaWidth: mediaWidthTemplates,
   // css snippets
   flexColumnNoWrap,
   flexRowNoWrap
-}
+})
 
 export default function ThemeProvider({ children }) {
-  return <StyledComponentsThemeProvider theme={theme}>{children}</StyledComponentsThemeProvider>
+  const [darkMode] = useDarkModeManager()
+
+  return <StyledComponentsThemeProvider theme={theme(darkMode)}>{children}</StyledComponentsThemeProvider>
 }
 
 export const GlobalStyle = createGlobalStyle`
@@ -79,20 +98,25 @@ export const GlobalStyle = createGlobalStyle`
   body {
     margin: 0;
     padding: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;    
+  }
+
+  body > div {
+    height: 100%;
+    overflow: scroll;
+    -webkit-overflow-scrolling: touch;
+}
+
+  html {
     font-size: 16px;
     font-variant: none;
+    color: ${({ theme }) => theme.textColor};
+    background-color: ${({ theme }) => theme.backgroundColor};
+    transition: color 150ms ease-out, background-color 150ms ease-out;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
-
-  #root {
-    ${({ theme }) => theme.flexColumnNoWrap}
-    justify-content: center;
-    align-items: center;
-    width: 100vw;
-    height: 100vh;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
 `

src/utils/index.js

@@ -5,6 +5,7 @@ import EXCHANGE_ABI from '../constants/abis/exchange'
 import ERC20_ABI from '../constants/abis/erc20'
 import ERC20_BYTES32_ABI from '../constants/abis/erc20_bytes32'
 import { FACTORY_ADDRESSES } from '../constants'
+import { formatFixed } from '@uniswap/sdk'
 
 import UncheckedJsonRpcSigner from './signer'
 
@@ -178,10 +179,27 @@ export async function getEtherBalance(address, library) {
   if (!isAddress(address)) {
     throw Error(`Invalid 'address' parameter '${address}'`)
   }
-
   return library.getBalance(address)
 }
 
+export function formatEthBalance(balance) {
+  return amountFormatter(balance, 18, 6)
+}
+
+export function formatTokenBalance(balance, decimal) {
+  return !!(balance && Number.isInteger(decimal)) ? amountFormatter(balance, decimal, Math.min(4, decimal)) : 0
+}
+
+export function formatToUsd(price) {
+  const format = { decimalSeparator: '.', groupSeparator: ',', groupSize: 3 }
+  const usdPrice = formatFixed(price, {
+    decimalPlaces: 2,
+    dropTrailingZeros: false,
+    format
+  })
+  return usdPrice
+}
+
 // get the token balance of an address
 export async function getTokenBalance(tokenAddress, address, library) {
   if (!isAddress(tokenAddress) || !isAddress(address)) {

src/utils/math.js

+import { BigNumber } from '@uniswap/sdk'
+
+// returns a deep copied + sorted list of values, as well as a sortmap
+export function sortBigNumbers(values) {
+  const valueMap = values.map((value, i) => ({ value, i }))
+
+  valueMap.sort((a, b) => {
+    if (a.value.isGreaterThan(b.value)) {
+      return 1
+    } else if (a.value.isLessThan(b.value)) {
+      return -1
+    } else {
+      return 0
+    }
+  })
+
+  return [
+    valueMap.map(element => values[element.i]),
+    values.map((_, i) => valueMap.findIndex(element => element.i === i))
+  ]
+}
+
+export function getMedian(values) {
+  const [sortedValues, sortMap] = sortBigNumbers(values)
+  if (values.length % 2 === 0) {
+    const middle = values.length / 2
+    const indices = [middle - 1, middle]
+    return [
+      sortedValues[middle - 1].plus(sortedValues[middle]).dividedBy(2),
+      sortMap.map(element => (indices.includes(element) ? new BigNumber(0.5) : new BigNumber(0)))
+    ]
+  } else {
+    const middle = Math.floor(values.length / 2)
+    return [sortedValues[middle], sortMap.map(element => (element === middle ? new BigNumber(1) : new BigNumber(0)))]
+  }
+}
+
+export function getMean(values, _weights) {
+  const weights = _weights ? _weights : values.map(() => new BigNumber(1))
+
+  const weightedValues = values.map((value, i) => value.multipliedBy(weights[i]))
+  const numerator = weightedValues.reduce(
+    (accumulator, currentValue) => accumulator.plus(currentValue),
+    new BigNumber(0)
+  )
+  const denominator = weights.reduce((accumulator, currentValue) => accumulator.plus(currentValue), new BigNumber(0))
+
+  return [numerator.dividedBy(denominator), weights.map(weight => weight.dividedBy(denominator))]
+}

src/utils/price.js

+import { getTokenReserves, getMarketDetails } from '@uniswap/sdk'
+import { getMedian, getMean } from './math'
+
+const DAI = 'DAI'
+const USDC = 'USDC'
+const TUSD = 'TUSD'
+
+const USD_STABLECOINS = [DAI, USDC, TUSD]
+
+const USD_STABLECOIN_ADDRESSES = [
+  '0x89d24A6b4CcB1B6fAA2625fE562bDD9a23260359',
+  '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
+  '0x8dd5fbCe2F6a956C3022bA3663759011Dd51e73E'
+]
+
+function forEachStablecoin(runner) {
+  return USD_STABLECOINS.map((stablecoin, index) => runner(index, stablecoin))
+}
+
+export async function getUSDPrice(library) {
+  return Promise.all(forEachStablecoin(i => getTokenReserves(USD_STABLECOIN_ADDRESSES[i], library))).then(reserves => {
+    const ethReserves = forEachStablecoin(i => reserves[i].ethReserve.amount)
+    const marketDetails = forEachStablecoin(i => getMarketDetails(reserves[i], undefined))
+
+    const ethPrices = forEachStablecoin(i => marketDetails[i].marketRate.rateInverted)
+
+    const [median, medianWeights] = getMedian(ethPrices)
+    const [mean, meanWeights] = getMean(ethPrices)
+    const [weightedMean, weightedMeanWeights] = getMean(ethPrices, ethReserves)
+
+    const ethPrice = getMean([median, mean, weightedMean])[0]
+    const _stablecoinWeights = [
+      getMean([medianWeights[0], meanWeights[0], weightedMeanWeights[0]])[0],
+      getMean([medianWeights[1], meanWeights[1], weightedMeanWeights[1]])[0],
+      getMean([medianWeights[2], meanWeights[2], weightedMeanWeights[2]])[0]
+    ]
+    const stablecoinWeights = forEachStablecoin((i, stablecoin) => ({
+      [stablecoin]: _stablecoinWeights[i]
+    })).reduce((accumulator, currentValue) => ({ ...accumulator, ...currentValue }), {})
+
+    return [ethPrice, stablecoinWeights]
+  })
+}