add localstorage support (#374)

* add localstorage support

* remove connect arrow

* invert rates to start

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 = [
   {

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/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/Send/index.js

@@ -760,13 +760,13 @@ export default function Swap({ initialCurrency }) {
           {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/pages/Swap/index.js

@@ -731,13 +731,13 @@ export default function Swap({ initialCurrency }) {
           {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>
           )}