resolve conflicts

public/locales/en.json

@@ -27,7 +27,7 @@
   "noLiquidity": "No liquidity.",
   "insufficientLiquidity": "Insufficient liquidity.",
   "unlockTokenCont": "Please unlock token to continue.",
-  "transactionDetails": "Transaction Details",
+  "transactionDetails": "Advanced Details",
   "hideDetails": "Hide Details",
   "slippageWarning": "Slippage Warning",
   "highSlippageWarning": "High Slippage Warning",
@@ -81,5 +81,5 @@
   "decimals": "Decimals",
   "enterTokenCont": "Enter a token address to continue",
   "priceChange": "Expected price slippage",
-  "forAtLeast" : "for at least "
+  "forAtLeast": "for at least "
 }

src/components/AddressInputPanel/index.js

@@ -21,7 +21,7 @@ const ContainerRow = styled.div`
   justify-content: center;
   align-items: center;
   border-radius: 1.25rem;
-  box-shadow: 0 0 0 0.5px ${({ error, theme }) => (error ? theme.salmonRed : theme.mercuryGray)};
+  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;
 `

src/components/ContextualInfo/index.js

@@ -51,8 +51,8 @@ class ContextualInfo extends Component {
   }
 
   static defaultProps = {
-    openDetailsText: 'Transaction Details',
-    closeDetailsText: 'Hide Details',
+    openDetailsText: 'Advanced Details',
+    closeDetailsText: 'Hide Advanced',
     renderTransactionDetails() {},
     contextualInfo: '',
     isError: false

src/components/ContextualInfoNew/index.js

@@ -32,11 +32,10 @@ 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-top: 1rem;
+  margin: 1rem 0.5rem 0 0.5rem;
 `
 
 const ErrorSpan = styled.span`
@@ -86,11 +85,10 @@ const ColoredDropdown = styled(WrappedDropdown)`
 `
 
 export default function ContextualInfo({
-  openDetailsText = 'Transaction Details',
-  closeDetailsText = 'Hide Details',
+  openDetailsText = 'Advanced Details',
+  closeDetailsText = 'Hide Advanced',
   contextualInfo = '',
   allowExpand = false,
-  renderTransactionDetails = () => {},
   isError = false,
   slippageWarning,
   highSlippageWarning,

src/components/CurrencyInputPanel/index.js

@@ -34,6 +34,7 @@ const SubCurrencySelect = styled.button`
   outline: none;
   cursor: pointer;
   user-select: none;
+
 `
 
 const InputRow = styled.div`
@@ -70,7 +71,7 @@ const CurrencySelect = styled.button`
   }
 
   :focus {
-    box-shadow: 0 0 0.5px 0.5px ${({ theme }) => theme.malibuBlue};
+    border: 1px solid ${({ theme }) => darken(0.1, theme.royalBlue)};
   }
 
   :active {
@@ -104,12 +105,12 @@ const InputPanel = styled.div`
 
 const Container = styled.div`
   border-radius: 1.25rem;
-  box-shadow: 0 0 0 0.5px ${({ error, theme }) => (error ? theme.salmonRed : theme.mercuryGray)};
+  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;
 
   :focus-within {
-    box-shadow: 0 0 0.5px 0.5px ${({ theme }) => theme.malibuBlue};
+    box-shadow: 0 0 1px 1px ${({ theme }) => theme.malibuBlue};
   }
 `
 

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;

src/components/NavigationTabs/index.js

@@ -5,7 +5,7 @@ import styled from 'styled-components'
 import { transparentize, darken } from 'polished'
 
 import { useBodyKeyDown } from '../../hooks'
-import { useBetaMessageManager } from '../../contexts/Application'
+import { useBetaMessageManager } from '../../contexts/LocalStorage'
 
 const tabOrder = [
   {
@@ -84,11 +84,11 @@ const StyledNavLink = styled(NavLink).attrs({
   &.${activeClassName} {
     background-color: ${({ theme }) => theme.white};
     border-radius: 3rem;
-    box-shadow: 0 0 0.5px 1px ${({ theme }) => theme.mercuryGray};
+    box-shadow: 0 0 1px 1px ${({ theme }) => theme.mercuryGray};
     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 1px 1px ${({ theme }) => darken(0.1, theme.mercuryGray)};
     }
   }
 

src/components/Web3Status/index.js

@@ -5,7 +5,7 @@ import { useWeb3Context, Connectors } from 'web3-react'
 import { darken, transparentize } from 'polished'
 import Jazzicon from 'jazzicon'
 import { ethers } from 'ethers'
-import { Activity, ArrowRight } from 'react-feather'
+import { Activity } from 'react-feather'
 
 import { shortenAddress } from '../../utils'
 import { useENSName } from '../../hooks'
@@ -91,13 +91,6 @@ const NetworkIcon = styled(Activity)`
   height: 16px;
 `
 
-const ArrowIcon = styled(ArrowRight)`
-  margin-left: 0.25rem;
-  margin-right: 0.5rem;
-  width: 16px;
-  height: 16px;
-`
-
 const SpinnerWrapper = styled(Spinner)`
   margin: 0 0.25rem 0 0.25rem;
 `
@@ -251,7 +244,6 @@ export default function Web3Status() {
       return (
         <Web3StatusConnect onClick={onClick}>
           <Text>{t('Connect')}</Text>
-          <ArrowIcon />
         </Web3StatusConnect>
       )
     } else {

src/contexts/Application.js

@@ -2,10 +2,8 @@ import React, { createContext, useContext, useReducer, useMemo, useCallback, use
 import { useWeb3Context } from 'web3-react'
 import { safeAccess } from '../utils'
 
-const SHOW_BETA_MESSAGE = 'SHOW_BETA_MESSAGE'
 const BLOCK_NUMBERS = 'BLOCK_NUMBERS'
 
-const DISMISS_BETA_MESSAGE = 'DISMISS_BETA_MESSAGE'
 const UPDATE_BLOCK_NUMBER = 'UPDATE_BLOCK_NUMBER'
 
 const ApplicationContext = createContext()
@@ -16,12 +14,6 @@ function useApplicationContext() {
 
 function reducer(state, { type, payload }) {
   switch (type) {
-    case DISMISS_BETA_MESSAGE: {
-      return {
-        ...state,
-        [SHOW_BETA_MESSAGE]: false
-      }
-    }
     case UPDATE_BLOCK_NUMBER: {
       const { networkId, blockNumber } = payload
       return {
@@ -40,25 +32,15 @@ function reducer(state, { type, payload }) {
 
 export default function Provider({ children }) {
   const [state, dispatch] = useReducer(reducer, {
-    [SHOW_BETA_MESSAGE]: true,
     [BLOCK_NUMBERS]: {}
   })
 
-  const dismissBetaMessage = useCallback(() => {
-    dispatch({ type: DISMISS_BETA_MESSAGE })
-  }, [])
   const updateBlockNumber = useCallback((networkId, blockNumber) => {
     dispatch({ type: UPDATE_BLOCK_NUMBER, payload: { networkId, blockNumber } })
   }, [])
 
   return (
-    <ApplicationContext.Provider
-      value={useMemo(() => [state, { dismissBetaMessage, updateBlockNumber }], [
-        state,
-        dismissBetaMessage,
-        updateBlockNumber
-      ])}
-    >
+    <ApplicationContext.Provider value={useMemo(() => [state, { updateBlockNumber }], [state, updateBlockNumber])}>
       {children}
     </ApplicationContext.Provider>
   )
@@ -101,12 +83,6 @@ export function Updater() {
   return null
 }
 
-export function useBetaMessageManager() {
-  const [state, { dismissBetaMessage }] = useApplicationContext()
-
-  return [safeAccess(state, [SHOW_BETA_MESSAGE]), dismissBetaMessage]
-}
-
 export function useBlockNumber() {
   const { networkId } = useWeb3Context()
 

src/contexts/LocalStorage.js

+import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect } from 'react'
+
+const UNISWAP = 'UNISWAP'
+
+const VERSION = 'VERSION'
+const CURRENT_VERSION = 0
+const LAST_SAVED = 'LAST_SAVED'
+
+const BETA_MESSAGE_DISMISSED = 'BETA_MESSAGE_DISMISSED'
+const UPDATABLE_KEYS = [BETA_MESSAGE_DISMISSED]
+
+const UPDATE_KEY = 'UPDATE_KEY'
+
+const LocalStorageContext = createContext()
+
+function useLocalStorageContext() {
+  return useContext(LocalStorageContext)
+}
+
+function reducer(state, { type, payload }) {
+  switch (type) {
+    case UPDATE_KEY: {
+      const { key, value } = payload
+      if (!UPDATABLE_KEYS.some(k => k === key)) {
+        throw Error(`Unexpected key in LocalStorageContext reducer: '${key}'.`)
+      } else {
+        return {
+          ...state,
+          [key]: value
+        }
+      }
+    }
+    default: {
+      throw Error(`Unexpected action type in LocalStorageContext reducer: '${type}'.`)
+    }
+  }
+}
+
+function init() {
+  const defaultLocalStorage = {
+    [VERSION]: CURRENT_VERSION,
+    [BETA_MESSAGE_DISMISSED]: false
+  }
+
+  try {
+    const parsed = JSON.parse(window.localStorage.getItem(UNISWAP))
+    if (parsed[VERSION] !== CURRENT_VERSION) {
+      // this is where we could run migration logic
+      return defaultLocalStorage
+    } else {
+      return parsed
+    }
+  } catch {
+    return defaultLocalStorage
+  }
+}
+
+export default function Provider({ children }) {
+  const [state, dispatch] = useReducer(reducer, undefined, init)
+
+  const updateKey = useCallback((key, value) => {
+    dispatch({ type: UPDATE_KEY, payload: { key, value } })
+  }, [])
+
+  return (
+    <LocalStorageContext.Provider value={useMemo(() => [state, { updateKey }], [state, updateKey])}>
+      {children}
+    </LocalStorageContext.Provider>
+  )
+}
+
+export function Updater() {
+  const [state] = useLocalStorageContext()
+
+  useEffect(() => {
+    window.localStorage.setItem(UNISWAP, JSON.stringify({ ...state, [LAST_SAVED]: Math.floor(Date.now() / 1000) }))
+  })
+
+  return null
+}
+
+export function useBetaMessageManager() {
+  const [state, { updateKey }] = useLocalStorageContext()
+
+  const dismissBetaMessage = useCallback(() => {
+    updateKey(BETA_MESSAGE_DISMISSED, true)
+  }, [updateKey])
+
+  return [!state[BETA_MESSAGE_DISMISSED], dismissBetaMessage]
+}

src/contexts/Tokens.js

@@ -89,6 +89,14 @@ 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',
@@ -191,6 +199,12 @@ const INITIAL_TOKENS_CONTEXT = {
       [DECIMALS]: 18,
       [EXCHANGE_ADDRESS]: '0x2C4Bd064b998838076fa341A83d007FC2FA50957'
     },
+    '0xec67005c4E498Ec7f55E092bd1d35cbC47C91892': {
+      [NAME]: 'Melon Token',
+      [SYMBOL]: 'MLN',
+      [DECIMALS]: 18,
+      [EXCHANGE_ADDRESS]: '0xA931F4eB165AC307fD7431b5EC6eADde53E14b0C'
+    },
     '0x957c30aB0426e0C93CD8241E2c60392d08c6aC8e': {
       [NAME]: 'Modum Token',
       [SYMBOL]: 'MOD',

src/index.js

@@ -4,6 +4,7 @@ import ReactGA from 'react-ga'
 import Web3Provider, { Connectors } from 'web3-react'
 
 import ThemeProvider, { GlobalStyle } from './theme'
+import LocalStorageContextProvider, { Updater as LocalStorageContextUpdater } from './contexts/LocalStorage'
 import ApplicationContextProvider, { Updater as ApplicationContextUpdater } from './contexts/Application'
 import TransactionContextProvider, { Updater as TransactionContextUpdater } from './contexts/Transactions'
 import TokensContextProvider from './contexts/Tokens'
@@ -29,21 +30,24 @@ const connectors = { Injected, Network }
 
 function ContextProviders({ children }) {
   return (
-    <ApplicationContextProvider>
-      <TransactionContextProvider>
-        <TokensContextProvider>
-          <BalancesContextProvider>
-            <AllowancesContextProvider>{children}</AllowancesContextProvider>
-          </BalancesContextProvider>
-        </TokensContextProvider>
-      </TransactionContextProvider>
-    </ApplicationContextProvider>
+    <LocalStorageContextProvider>
+      <ApplicationContextProvider>
+        <TransactionContextProvider>
+          <TokensContextProvider>
+            <BalancesContextProvider>
+              <AllowancesContextProvider>{children}</AllowancesContextProvider>
+            </BalancesContextProvider>
+          </TokensContextProvider>
+        </TransactionContextProvider>
+      </ApplicationContextProvider>
+    </LocalStorageContextProvider>
   )
 }
 
 function Updaters() {
   return (
     <>
+      <LocalStorageContextUpdater />
       <ApplicationContextUpdater />
       <TransactionContextUpdater />
     </>

src/pages/Pool/AddLiquidity.js

@@ -362,6 +362,7 @@ export default function AddLiquidity() {
     })
 
     const deadline = Math.ceil(Date.now() / 1000) + DEADLINE_FROM_NOW
+
     const estimatedGasLimit = await exchangeContract.estimate.addLiquidity(
       isNewExchange ? ethers.constants.Zero : liquidityTokensMin,
       isNewExchange ? outputValueParsed : outputValueMax,
@@ -371,6 +372,8 @@ export default function AddLiquidity() {
       }
     )
 
+    const gasLimit = calculateGasMargin(estimatedGasLimit, GAS_MARGIN)
+
     exchangeContract
       .addLiquidity(
         isNewExchange ? ethers.constants.Zero : liquidityTokensMin,
@@ -378,7 +381,7 @@ export default function AddLiquidity() {
         deadline,
         {
           value: inputValueParsed,
-          gasLimit: calculateGasMargin(estimatedGasLimit, GAS_MARGIN)
+          gasLimit
         }
       )
       .then(response => {

src/pages/Pool/ModeSelector.js

@@ -64,7 +64,7 @@ const StyledNavLink = styled(NavLink).attrs({
   &.${activeClassName} {
     background-color: ${({ theme }) => theme.white};
     border-radius: 3rem;
-    box-shadow: 0 0 0.5px 0.5px ${({ theme }) => theme.mercuryGray};
+    box-shadow: 0 0 1px 1px ${({ theme }) => theme.mercuryGray};
     font-weight: 500;
     color: ${({ theme }) => theme.royalBlue};
   }

src/theme/components.js

 import styled, { keyframes } from 'styled-components'
-import { lighten, darken } from 'polished'
+import { darken } from 'polished'
 
 export const Button = styled.button.attrs(({ warning, theme }) => ({
   backgroundColor: warning ? theme.salmonRed : theme.royalBlue
@@ -18,11 +18,11 @@ export const Button = styled.button.attrs(({ warning, theme }) => ({
 
   :hover,
   :focus {
-    background-color: ${({ backgroundColor }) => lighten(0.05, backgroundColor)};
+    background-color: ${({ backgroundColor }) => darken(0.05, backgroundColor)};
   }
 
   :active {
-    background-color: ${({ backgroundColor }) => darken(0.05, backgroundColor)};
+    background-color: ${({ backgroundColor }) => darken(0.1, backgroundColor)};
   }
 
   :disabled {

src/theme/index.js

@@ -38,6 +38,9 @@ const theme = {
   chaliceGray: '#AEAEAE',
   doveGray: '#737373',
   mineshaftGray: '#2B2B2B',
+  buttonOutlineGrey: '#f2f2f2',
+  //blacks
+  charcoalBlack: '#404040',
   // blues
   zumthorBlue: '#EBF4FF',
   malibuBlue: '#5CA2FF',
@@ -53,6 +56,7 @@ const theme = {
   // pink
   uniswapPink: '#DC6BE5',
   connectedGreen: '#27AE60',
+
   // media queries
   mediaWidth: mediaWidthTemplates,
   // css snippets