various improvements (Uniswap#313)

* add unchecked signer

* remove focus underline from tabs

* update tokens

* remove console log

* remove snx for now

* make slippage warnings more robust

* memo-ize contexts

* improve slippage styling

package.json

@@ -14,7 +14,7 @@
     "@reach/tooltip": "^0.2.0",
     "copy-to-clipboard": "^3.2.0",
     "escape-string-regexp": "^2.0.0",
-    "ethers": "^4.0.27",
+    "ethers": "^4.0.28",
     "i18next": "^15.0.9",
     "i18next-browser-languagedetector": "^3.0.1",
     "i18next-xhr-backend": "^2.0.1",

public/locales/en.json

@@ -6,7 +6,9 @@
   "installMetamask": "Please visit us after installing Metamask on Chrome or Brave.",
   "disconnected": "Disconnected",
   "swap": "Swap",
+  "swapAnyway": "Swap Anyway",
   "send": "Send",
+  "sendAnyway": "Send Anyway",
   "pool": "Pool",
   "betaWarning": "This project is in beta. Use at your own risk.",
   "input": "Input",
@@ -28,6 +30,7 @@
   "transactionDetails": "Transaction Details",
   "hideDetails": "Hide Details",
   "slippageWarning": "Slippage Warning",
+  "highSlippageWarning": "High Slippage Warning",
   "youAreSelling": "You are selling",
   "orTransFail": "or the transaction will fail.",
   "youWillReceive": "You will receive at least",

src/components/ContextualInfoNew/index.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
+import { transparentize } from 'polished'
 
 import { ReactComponent as Dropup } from '../../assets/images/dropup-blue.svg'
 import { ReactComponent as Dropdown } from '../../assets/images/dropdown-blue.svg'
@@ -23,10 +24,6 @@ const SummaryWrapperContainer = styled.div`
   justify-content: center;
   font-size: 0.75rem;
 
-  span {
-    margin-right: 12px;
-  }
-
   img {
     height: 0.75rem;
     width: 0.75rem;
@@ -42,20 +39,46 @@ const Details = styled.div`
 `
 
 const ErrorSpan = styled.span`
+  margin-right: 12px;
+
   color: ${({ isError, theme }) => isError && theme.salmonRed};
+  ${({ slippageWarning, highSlippageWarning, theme }) =>
+    highSlippageWarning
+      ? css`
+          color: ${theme.salmonRed};
+          font-weight: 600;
+        `
+      : slippageWarning &&
+        css`
+          background-color: ${transparentize(0.6, theme.warningYellow)};
+          font-weight: 600;
+          padding: 0.25rem;
+        `}
 `
 
 const WrappedDropup = ({ isError, ...rest }) => <Dropup {...rest} />
 const ColoredDropup = styled(WrappedDropup)`
   path {
     stroke: ${({ isError, theme }) => isError && theme.salmonRed};
+
+    ${({ highSlippageWarning, theme }) =>
+      highSlippageWarning &&
+      css`
+        stroke: ${theme.salmonRed};
+      `}
   }
 `
 
 const WrappedDropdown = ({ isError, ...rest }) => <Dropdown {...rest} />
 const ColoredDropdown = styled(WrappedDropdown)`
   path {
     stroke: ${({ isError, theme }) => isError && theme.salmonRed};
+
+    ${({ highSlippageWarning, theme }) =>
+      highSlippageWarning &&
+      css`
+        stroke: ${theme.salmonRed};
+      `}
   }
 `
 
@@ -65,7 +88,9 @@ export default function ContextualInfo({
   contextualInfo = '',
   allowExpand = false,
   renderTransactionDetails = () => {},
-  isError = false
+  isError = false,
+  slippageWarning,
+  highSlippageWarning
 }) {
   const [showDetails, setShowDetails] = useState(false)
 
@@ -75,10 +100,19 @@ export default function ContextualInfo({
     <>
       <SummaryWrapperContainer onClick={() => setShowDetails(s => !s)}>
         <>
-          <ErrorSpan isError={isError}>
+          <ErrorSpan isError={isError} slippageWarning={slippageWarning} highSlippageWarning={highSlippageWarning}>
+            {(slippageWarning || highSlippageWarning) && (
+              <span role="img" aria-label="warning">
+                ⚠️
+              </span>
+            )}
             {contextualInfo ? contextualInfo : showDetails ? closeDetailsText : openDetailsText}
           </ErrorSpan>
-          {showDetails ? <ColoredDropup isError={isError} /> : <ColoredDropdown isError={isError} />}
+          {showDetails ? (
+            <ColoredDropup isError={isError} highSlippageWarning={highSlippageWarning} />
+          ) : (
+            <ColoredDropdown isError={isError} highSlippageWarning={highSlippageWarning} />
+          )}
         </>
       </SummaryWrapperContainer>
       {showDetails && <Details>{renderTransactionDetails()}</Details>}

src/components/CurrencyInputPanel/index.js

@@ -236,7 +236,7 @@ export default function CurrencyInputPanel({
                   gasLimit: calculateGasMargin(estimatedGas, GAS_MARGIN)
                 })
                 .then(response => {
-                  addTransaction(response)
+                  addTransaction(response, { approval: selectedTokenAddress })
                 })
             }}
           >

src/components/NavigationTabs/index.js

@@ -88,18 +88,14 @@ const StyledNavLink = styled(NavLink).attrs({
     font-weight: 500;
     color: ${({ theme }) => theme.royalBlue};
     :hover {
-    box-shadow: 0 0 0.5px 1px ${({ theme }) => darken(0.1, theme.mercuryGray)};
-  }
+      box-shadow: 0 0 0.5px 1px ${({ theme }) => darken(0.1, theme.mercuryGray)};
+    }
   }
 
   :hover,
   :focus {
+    font-weight: 500;
     color: ${({ theme }) => darken(0.1, theme.royalBlue)};
-    /* box-shadow: 0 0 0.5px 0.5px ${({ theme }) => darken(0.2, theme.mercuryGray)}; */
-  }
-
-  :focus {
-    text-decoration: underline;
   }
 `
 

src/contexts/Allowances.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useReducer, useCallback, useEffect } from 'react'
+import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect } from 'react'
 import { useWeb3Context } from 'web3-react'
 
 import { safeAccess, isAddress, getTokenAllowance } from '../utils'
@@ -46,7 +46,11 @@ export default function Provider({ children }) {
     dispatch({ type: UPDATE, payload: { networkId, address, tokenAddress, spenderAddress, value, blockNumber } })
   }, [])
 
-  return <AllowancesContext.Provider value={[state, { update }]}>{children}</AllowancesContext.Provider>
+  return (
+    <AllowancesContext.Provider value={useMemo(() => [state, { update }], [state, update])}>
+      {children}
+    </AllowancesContext.Provider>
+  )
 }
 
 export function useAddressAllowance(address, tokenAddress, spenderAddress) {

src/contexts/Application.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useReducer, useCallback, useEffect } from 'react'
+import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect } from 'react'
 import { useWeb3Context } from 'web3-react'
 import { safeAccess } from '../utils'
 
@@ -52,7 +52,13 @@ export default function Provider({ children }) {
   }, [])
 
   return (
-    <ApplicationContext.Provider value={[state, { dismissBetaMessage, updateBlockNumber }]}>
+    <ApplicationContext.Provider
+      value={useMemo(() => [state, { dismissBetaMessage, updateBlockNumber }], [
+        state,
+        dismissBetaMessage,
+        updateBlockNumber
+      ])}
+    >
       {children}
     </ApplicationContext.Provider>
   )

src/contexts/Balances.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useReducer, useCallback, useEffect } from 'react'
+import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect } from 'react'
 import { useWeb3Context } from 'web3-react'
 
 import { safeAccess, isAddress, getEtherBalance, getTokenBalance } from '../utils'
@@ -44,7 +44,11 @@ export default function Provider({ children }) {
     dispatch({ type: UPDATE, payload: { networkId, address, tokenAddress, value, blockNumber } })
   }, [])
 
-  return <BalancesContext.Provider value={[state, { update }]}>{children}</BalancesContext.Provider>
+  return (
+    <BalancesContext.Provider value={useMemo(() => [state, { update }], [state, update])}>
+      {children}
+    </BalancesContext.Provider>
+  )
 }
 
 export function useAddressBalance(address, tokenAddress) {

src/contexts/Tokens.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useReducer, useCallback, useEffect } from 'react'
+import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect } from 'react'
 import { useWeb3Context } from 'web3-react'
 import { ethers } from 'ethers'
 
@@ -59,6 +59,12 @@ const INITIAL_TOKENS_CONTEXT = {
       [DECIMALS]: 18,
       [EXCHANGE_ADDRESS]: '0xF7B5A4b934658025390ff69dB302BC7F2AC4a542'
     },
+    '0xF5DCe57282A584D2746FaF1593d3121Fcac444dC': {
+      [NAME]: 'Compound Dai',
+      [SYMBOL]: 'cDAI',
+      [DECIMALS]: 8,
+      [EXCHANGE_ADDRESS]: '0x45A2FDfED7F7a2c791fb1bdF6075b83faD821ddE'
+    },
     '0x41e5560054824eA6B0732E656E3Ad64E20e94E45': {
       [NAME]: 'Civic',
       [SYMBOL]: 'CVC',
@@ -101,12 +107,6 @@ const INITIAL_TOKENS_CONTEXT = {
       [DECIMALS]: 12,
       [EXCHANGE_ADDRESS]: '0x4B17685b330307C751B47f33890c8398dF4Fe407'
     },
-    '0x056Fd409E1d7A124BD7017459dFEa2F387b6d5Cd': {
-      [NAME]: 'Gemini dollar',
-      [SYMBOL]: 'GUSD',
-      [DECIMALS]: 2,
-      [EXCHANGE_ADDRESS]: '0xD883264737Ed969d2696eE4B4cAF529c2Fc2A141'
-    },
     '0x818Fc6C2Ec5986bc6E2CBf00939d90556aB12ce5': {
       [NAME]: 'Kin',
       [SYMBOL]: 'KIN',
@@ -125,6 +125,12 @@ const INITIAL_TOKENS_CONTEXT = {
       [DECIMALS]: 18,
       [EXCHANGE_ADDRESS]: '0xF173214C720f58E03e194085B1DB28B50aCDeeaD'
     },
+    '0xBBbbCA6A901c926F240b89EacB641d8Aec7AEafD': {
+      [NAME]: 'LoopringCoin V2',
+      [SYMBOL]: 'LRC',
+      [DECIMALS]: 18,
+      [EXCHANGE_ADDRESS]: '0xA539BAaa3aCA455c986bB1E25301CEF936CE1B65'
+    },
     '0x6c6EE5e31d828De241282B9606C8e98Ea48526E2': {
       [NAME]: 'HoloToken',
       [SYMBOL]: 'HOT',
@@ -233,12 +239,6 @@ const INITIAL_TOKENS_CONTEXT = {
       [DECIMALS]: 18,
       [EXCHANGE_ADDRESS]: '0x1aEC8F11A7E78dC22477e91Ed924Fab46e3A88Fd'
     },
-    '0xEf8a2c1BC94e630463293F71bF5414d13e80F62D': {
-      [NAME]: 'Synthetix Network Token',
-      [SYMBOL]: 'SNX',
-      [DECIMALS]: 18,
-      [EXCHANGE_ADDRESS]: '0xd9025Ed64BAA7B9046E37fe94670C79fcCB2b5C8'
-    },
     '0x42d6622deCe394b54999Fbd73D108123806f6a18': {
       [NAME]: 'SPANK',
       [SYMBOL]: 'SPANK',
@@ -293,12 +293,6 @@ const INITIAL_TOKENS_CONTEXT = {
       [DECIMALS]: 18,
       [EXCHANGE_ADDRESS]: '0x8dE0d002DC83478f479dC31F76cB0a8aa7CcEa17'
     },
-    '0x05f4a42e251f2d52b8ed15E9FEdAacFcEF1FAD27': {
-      [NAME]: 'Zilliqa',
-      [SYMBOL]: 'ZIL',
-      [DECIMALS]: 12,
-      [EXCHANGE_ADDRESS]: '0x7dc095A5CF7D6208CC680fA9866F80a53911041a'
-    },
     '0xE41d2489571d322189246DaFA5ebDe1F4699F498': {
       [NAME]: '0x Protocol Token',
       [SYMBOL]: 'ZRX',
@@ -344,7 +338,11 @@ export default function Provider({ children }) {
     dispatch({ type: UPDATE, payload: { networkId, tokenAddress, name, symbol, decimals, exchangeAddress } })
   }, [])
 
-  return <TokensContext.Provider value={[state, { update }]}>{children}</TokensContext.Provider>
+  return (
+    <TokensContext.Provider value={useMemo(() => [state, { update }], [state, update])}>
+      {children}
+    </TokensContext.Provider>
+  )
 }
 
 export function useTokenDetails(tokenAddress) {

src/contexts/Transactions.js

@@ -1,11 +1,11 @@
-import React, { createContext, useContext, useReducer, useCallback, useEffect } from 'react'
+import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect } from 'react'
 import { useWeb3Context } from 'web3-react'
-import { ethers } from 'ethers'
 
 import { safeAccess } from '../utils'
 import { useBlockNumber } from './Application'
 
 const RESPONSE = 'response'
+const CUSTOM_DATA = 'CUSTOM_DATA'
 const BLOCK_NUMBER_CHECKED = 'BLOCK_NUMBER_CHECKED'
 const RECEIPT = 'receipt'
 
@@ -94,7 +94,11 @@ export default function Provider({ children }) {
   }, [])
 
   return (
-    <TransactionsContext.Provider value={[state, { add, check, finalize }]}>{children}</TransactionsContext.Provider>
+    <TransactionsContext.Provider
+      value={useMemo(() => [state, { add, check, finalize }], [state, add, check, finalize])}
+    >
+      {children}
+    </TransactionsContext.Provider>
   )
 }
 
@@ -145,7 +149,7 @@ export function useTransactionAdder() {
   const [, { add }] = useTransactionsContext()
 
   return useCallback(
-    response => {
+    (response, customData = {}) => {
       if (!(networkId || networkId === 0)) {
         throw Error(`Invalid networkId '${networkId}`)
       }
@@ -155,7 +159,7 @@ export function useTransactionAdder() {
       if (!hash) {
         throw Error('No transaction hash found.')
       }
-      add(networkId, hash, response)
+      add(networkId, hash, { ...response, [CUSTOM_DATA]: customData })
     },
     [networkId, add]
   )
@@ -178,12 +182,7 @@ export function usePendingApproval(tokenAddress) {
         return false
       } else if (!allTransactions[hash][RESPONSE]) {
         return false
-      } else if (allTransactions[hash][RESPONSE].to !== tokenAddress) {
-        return false
-      } else if (
-        allTransactions[hash][RESPONSE].data.substring(0, 10) !==
-        ethers.utils.id('approve(address,uint256)').substring(0, 10)
-      ) {
+      } else if (allTransactions[hash][RESPONSE][CUSTOM_DATA].approval !== tokenAddress) {
         return false
       } else {
         return true