Liquidity migration (#279)

* finalize initial migration

* remove redux

* fix token to token rate bug

* finalize initial migration

* fix test

package.json

@@ -5,31 +5,23 @@
   "homepage": ".",
   "private": true,
   "dependencies": {
-    "bignumber.js": "^7.2.1",
     "classnames": "^2.2.6",
     "escape-string-regexp": "^2.0.0",
     "ethers": "^4.0.27",
-    "fuse": "^0.4.0",
     "i18next": "^15.0.9",
     "i18next-browser-languagedetector": "^3.0.1",
     "i18next-xhr-backend": "^2.0.1",
     "jazzicon": "^1.5.0",
     "lodash.merge": "^4.6.1",
     "node-sass": "^4.11.0",
-    "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-ga": "^2.5.7",
     "react-i18next": "^10.7.0",
-    "react-redux": "^5.0.7",
     "react-router-dom": "^5.0.0",
     "react-scripts": "^3.0.0",
     "react-transition-group": "1.x",
-    "redux": "^3.7.2",
-    "redux-subscriber": "^1.1.0",
-    "redux-thunk": "^2.2.0",
     "ua-parser-js": "^0.7.18",
-    "web3": "1.0.0-beta.52",
     "web3-react": "^5.0.4"
   },
   "scripts": {

public/locales/en.json

@@ -47,7 +47,7 @@
   "noZero": "Amount cannot be zero.",
   "mustBeETH": "One of the input must be ETH.",
   "enterCurrencyOrLabelCont": "Enter a {{ inputCurrency }} or {{ label }} value to continue.",
-  "youAreAdding": "You are adding between",
+  "youAreAdding": "You are adding",
   "and": "and",
   "intoPool": "into the liquidity pool.",
   "outPool": "from the liquidity pool.",

src/components/CurrencyInputPanel/index.js

@@ -26,7 +26,7 @@ export default function CurrencyInputPanel({
   title,
   description,
   extraText,
-  extraTextClickHander,
+  extraTextClickHander = () => {},
   errorMessage,
   disableUnlock,
   disableTokenSelect,

src/components/NavigationTabs/index.js

 import React, { useCallback } from 'react'
 import { withRouter, NavLink } from 'react-router-dom'
-import { connect } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
-import { dismissBetaMessage } from '../../ducks/app'
 import { useBodyKeyDown } from '../../hooks'
 
 import './navigation-tabs.scss'
+import { useApplicationContext } from '../../contexts/Application'
 
 const tabOrder = [
   {
@@ -26,9 +25,11 @@ const tabOrder = [
   }
 ]
 
-function NavigationTabs({ location: { pathname }, history, dismissBetaMessage, showBetaMessage }) {
+function NavigationTabs({ location: { pathname }, history }) {
   const { t } = useTranslation()
 
+  const { showBetaMessage, dismissBetaMessage } = useApplicationContext()
+
   const navigate = useCallback(
     direction => {
       const tabIndex = tabOrder.findIndex(({ regex }) => pathname.match(regex))
@@ -73,13 +74,4 @@ function NavigationTabs({ location: { pathname }, history, dismissBetaMessage, s
   )
 }
 
-export default withRouter(
-  connect(
-    state => ({
-      showBetaMessage: state.app.showBetaMessage
-    }),
-    dispatch => ({
-      dismissBetaMessage: () => dispatch(dismissBetaMessage())
-    })
-  )(NavigationTabs)
-)
+export default withRouter(NavigationTabs)

src/constants/actionTypes.js

-// string literals for actions
-
-// set global web3 object
-export const INITIALIZE_GLOBAL_WEB3 = 'INITIALIZE_GLOBAL_WEB3'
-
-// web3 actions, all set from action creator to reducer to app
-export const SET_WEB3_CONNECTION_STATUS = 'WEB3_CONNECTION_STATUS'
-export const CHECK_WEB3_CONNECTION = 'CHECK_WEB3_CONNECTION'
-export const SET_CURRENT_MASK_ADDRESS = 'SET_CURRENT_MASK_ADDRESS'
-
-export const SET_INTERACTION_STATE = 'SET_INTERACTION_STATE'
-export const SET_NETWORK_MESSAGE = 'SET_NETWORK_MESSAGE'
-
-export const SET_BLOCK_TIMESTAMP = 'SET_BLOCK_TIMESTAMP'
-export const SET_EXCHANGE_TYPE = 'SET_EXCHANGE_TYPE'
-
-// actions to toggle divs
-export const TOGGLE_ABOUT = 'TOGGLE_ABOUT'
-export const TOGGLE_INVEST = 'TOGGLE_INVEST'
-
-// CONTRACT actions in actions, action creator, reducer
-export const FACTORY_CONTRACT_READY = 'FACTORY_CONTRACT_READY'
-export const EXCHANGE_CONTRACT_READY = 'EXCHANGE_CONTRACT_READY'
-export const TOKEN_CONTRACT_READY = 'TOKEN_CONTRACT_READY'
-
-// actions for the exchange
-export const SET_INPUT_BALANCE = 'SET_INPUT_BALANCE'
-export const SET_OUTPUT_BALANCE = 'SET_OUTPUT_BALANCE'
-export const SET_INPUT_TOKEN = 'SET_INPUT_TOKEN'
-export const SET_OUTPUT_TOKEN = 'SET_OUTPUT_TOKEN'
-export const SET_ETH_POOL_1 = 'SET_ETH_POOL_1'
-export const SET_ETH_POOL_2 = 'SET_ETH_POOL_2'
-export const SET_TOKEN_POOL_1 = 'SET_TOKEN_POOL_1'
-export const SET_TOKEN_POOL_2 = 'SET_TOKEN_POOL_2'
-export const SET_ALLOWANCE_APPROVAL_STATE = 'SET_ALLOWANCE_APPROVAL_STATE'
-export const SET_EXCHANGE_INPUT_VALUE = 'SET_EXCHANGE_INPUT_VALUE'
-export const SET_EXCHANGE_OUTPUT_VALUE = 'SET_EXCHANGE_OUTPUT_VALUE'
-export const SET_EXCHANGE_RATE = 'SET_EXCHANGE_RATE'
-export const SET_EXCHANGE_FEE = 'SET_EXCHANGE_FEE'
-export const SET_INVEST_TOKEN = 'SET_INVEST_TOKEN'
-export const SET_INVEST_ETH_POOL = 'SET_INVEST_ETH'
-export const SET_INVEST_TOKEN_POOL = 'SET_INVEST_TOKENS'
-export const SET_INVEST_TOKEN_ALLOWANCE = 'SET_INVEST_TOKEN_ALLOWANCE'
-export const SET_INVEST_SHARES = 'SET_INVEST_SHARES'
-export const SET_USER_SHARES = 'SET_USER_SHARES'
-export const SET_INVEST_TOKEN_BALANCE = 'SET_INVEST_TOKEN_BALANCE'
-export const SET_INVEST_ETH_BALANCE = 'SET_INVEST_ETH_BALANCE'
-export const SET_INVEST_SHARES_INPUT = 'SET_INVEST_SHARES_INPUT'
-export const SET_INVEST_ETH_REQUIRED = 'SET_INVEST_ETH_REQUIRED'
-export const SET_INVEST_TOKENS_REQUIRED = 'SET_INVEST_TOKENS_REQUIRED'
-export const SET_INVEST_CHECKED = 'SET_INVEST_CHECKED'

src/constants/currencyInputErrorTypes.js

-export const INSUFFICIENT_BALANCE = 'Insufficient balance'

src/contexts/Static.js

@@ -116,6 +116,12 @@ const TOKEN_DETAILS_MAINNET = {
     [DECIMALS]: 18,
     [EXCHANGE_ADDRESS]: '0xF173214C720f58E03e194085B1DB28B50aCDeeaD'
   },
+  '0x6c6EE5e31d828De241282B9606C8e98Ea48526E2': {
+    [NAME]: 'HoloToken',
+    [SYMBOL]: 'HOT',
+    [DECIMALS]: 18,
+    [EXCHANGE_ADDRESS]: '0xd4777E164c6C683E10593E08760B803D58529a8E'
+  },
   '0xA4e8C3Ec456107eA67d3075bF9e3DF3A75823DB0': {
     [NAME]: 'LoomToken',
     [SYMBOL]: 'LOOM',

src/ducks/app.js

-const DISMISS_BETA_MESSAGE = 'app/app/dismissBetaMessage'
-
-const initialState = {
-  showBetaMessage: true
-}
-
-export const dismissBetaMessage = () => ({ type: DISMISS_BETA_MESSAGE })
-
-export default function appReducer(state = initialState, { type, payload }) {
-  switch (type) {
-    case DISMISS_BETA_MESSAGE:
-      return { ...state, showBetaMessage: false }
-    default:
-      return state
-  }
-}

src/ducks/index.js

-import { combineReducers } from 'redux'
-import addresses from './addresses'
-import app from './app'
-import pending from './pending'
-import web3connect from './web3connect'
-
-export default combineReducers({
-  app,
-  addresses,
-  pending,
-  web3connect
-})

src/ducks/pending.js

-const ADD_APPROVAL_TX = 'app/send/addApprovalTx'
-
-const getInitialState = () => {
-  return {
-    approvals: {}
-  }
-}
-
-export const addApprovalTx = ({ tokenAddress, txId }) => ({
-  type: ADD_APPROVAL_TX,
-  payload: { tokenAddress, txId }
-})
-
-export default function sendReducer(state = getInitialState(), { type, payload }) {
-  switch (type) {
-    case ADD_APPROVAL_TX:
-      return {
-        approvals: {
-          ...state.approvals,
-          [payload.tokenAddress]: payload.txId
-        }
-      }
-    default:
-      return state
-  }
-}

src/helpers/promise-utils.js

-export function retry(func, retryCount = 5) {
-  return new Promise((resolve, reject) => {
-    func().then(
-      (...args) => {
-        resolve(...args)
-      },
-      () => {
-        if (retryCount === 0) {
-          return reject()
-        }
-        setTimeout(() => retry(func, retryCount - 1).then(resolve, reject), 50)
-      }
-    )
-  })
-}

src/helpers/web3-promisfy.js

-export default function promisify(web3, methodName, ...args) {
-  return new Promise((resolve, reject) => {
-    if (!web3) {
-      reject(new Error('No Web3 object'))
-      return
-    }
-
-    const method = web3.eth[methodName]
-
-    if (!method) {
-      reject(new Error(`Cannot find web3.eth.${methodName}`))
-      return
-    }
-
-    method(...args, (error, data) => {
-      if (error) {
-        reject(error)
-        return
-      }
-
-      resolve(data)
-    })
-  })
-}

src/helpers/web3-utils.js

-import promisify from './web3-promisfy'
-
-export function getBlockDeadline(web3, deadline) {
-  return new Promise(async (resolve, reject) => {
-    const blockNumber = await promisify(web3, 'getBlockNumber')
-    if (!blockNumber && blockNumber !== 0) {
-      return reject()
-    }
-
-    const block = await promisify(web3, 'getBlock', blockNumber)
-    if (!block) {
-      return reject()
-    }
-
-    resolve(block.timestamp + deadline)
-  })
-}

src/index.js

 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Provider } from 'react-redux'
 import ReactGA from 'react-ga'
 import Web3Provider, { Connectors } from 'web3-react'
 import ApplicationContextProvider, { Updater as ApplicationContextUpdater } from './contexts/Application'
@@ -9,7 +8,6 @@ import StaticContextProvider, { Updater as StaticContextUpdater } from './contex
 import BlockContextProvider, { Updater as BlockContextUpdater } from './contexts/Block'
 
 import App from './pages/App'
-import store from './store'
 
 import './index.scss'
 import './i18n'
@@ -52,13 +50,11 @@ function Updaters() {
 }
 
 ReactDOM.render(
-  <Provider store={store}>
-    <Web3Provider connectors={connectors} libraryName="ethers.js">
-      <ContextProviders>
-        <Updaters />
-        <App />
-      </ContextProviders>
-    </Web3Provider>
-  </Provider>,
+  <Web3Provider connectors={connectors} libraryName="ethers.js">
+    <ContextProviders>
+      <Updaters />
+      <App />
+    </ContextProviders>
+  </Web3Provider>,
   document.getElementById('root')
 )

src/pages/App.js

-import React, { useState, useEffect } from 'react'
-import { connect } from 'react-redux'
+import React, { useEffect } from 'react'
 import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'
 import { useWeb3Context, Connectors } from 'web3-react'
 
 import NavigationTabs from '../components/NavigationTabs'
-import { updateNetwork, updateAccount, initialize, startWatching } from '../ducks/web3connect'
-import { setAddresses } from '../ducks/addresses'
 import Header from '../components/Header'
 import Swap from './Swap'
 import Send from './Send'
@@ -15,60 +12,34 @@ import './App.scss'
 
 const { Connector, InjectedConnector } = Connectors
 
-function App({ initialized, setAddresses, updateNetwork, updateAccount, initialize, startWatching }) {
-  const context = useWeb3Context()
+export default function App() {
+  const { setConnector, setError, error, active, connectorName } = useWeb3Context()
 
   // start web3-react on page-load
   useEffect(() => {
-    context.setConnector('Injected', { suppressAndThrowErrors: true }).catch(error => {
+    setConnector('Injected', { suppressAndThrowErrors: true }).catch(error => {
       if (error.code === Connector.errorCodes.UNSUPPORTED_NETWORK) {
-        context.setError(error, { connectorName: 'Injected' })
+        setError(error, { connectorName: 'Injected' })
       } else {
-        context.setConnector('Infura')
+        setConnector('Infura')
       }
     })
   }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
   // if the metamask user logs out, set the infura provider
   useEffect(() => {
-    if (context.error && context.error.code === InjectedConnector.errorCodes.UNLOCK_REQUIRED) {
-      context.setConnector('Infura')
+    if (error && error.code === InjectedConnector.errorCodes.UNLOCK_REQUIRED) {
+      setConnector('Infura')
     }
-  }, [context, context.error, context.connectorName])
-
-  // initialize redux network
-  const [reduxNetworkInitialized, setReduxNetworkInitialized] = useState(false)
-  useEffect(() => {
-    if (context.active) {
-      setAddresses(context.networkId)
-      updateNetwork(context.library._web3Provider, context.networkId)
-      setReduxNetworkInitialized(true)
-    }
-  }, [context.active, context.networkId]) // eslint-disable-line react-hooks/exhaustive-deps
-
-  // initialize redux account
-  const [reduxAccountInitialized, setReduxAccountInitialized] = useState(false)
-  useEffect(() => {
-    if (context.active) {
-      updateAccount(context.account)
-      setReduxAccountInitialized(true)
-    }
-  }, [context.active, context.account]) // eslint-disable-line react-hooks/exhaustive-deps
-
-  // initialize redux
-  useEffect(() => {
-    if (reduxNetworkInitialized && reduxAccountInitialized) {
-      initialize().then(startWatching)
-    }
-  }, [reduxNetworkInitialized, reduxAccountInitialized]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [error, connectorName, setConnector])
 
   // active state
-  if (initialized || context.error) {
+  if (active || error) {
     return (
       <div id="app-container">
         <Header />
         {/* this is an intermediate state before infura is set */}
-        {initialized && (!context.error || context.error.code === InjectedConnector.errorCodes.UNLOCK_REQUIRED) && (
+        {(!error || error.code === InjectedConnector.errorCodes.UNLOCK_REQUIRED) && (
           <div className="app__wrapper">
             <div className="body">
               <div className="body__content">
@@ -100,16 +71,3 @@ function App({ initialized, setAddresses, updateNetwork, updateAccount, initiali
   // loading state
   return null
 }
-
-export default connect(
-  state => ({
-    initialized: state.web3connect.initialized
-  }),
-  dispatch => ({
-    setAddresses: networkId => dispatch(setAddresses(networkId)),
-    updateNetwork: (passedProvider, networkId) => dispatch(updateNetwork(passedProvider, networkId)),
-    updateAccount: account => dispatch(updateAccount(account)),
-    initialize: () => dispatch(initialize()),
-    startWatching: () => dispatch(startWatching())
-  })
-)(App)

src/pages/App.test.js

 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Provider } from 'react-redux'
 import Web3Provider, { Connectors } from 'web3-react'
 
 import App from './App'
-import store from '../store'
 
 // TODO, fix this hacky workaround
 const { NetworkOnlyConnector } = Connectors
@@ -16,11 +14,9 @@ export const connectors = { Injected }
 it('renders without crashing', () => {
   const div = document.createElement('div')
   ReactDOM.render(
-    <Provider store={store}>
-      <Web3Provider connectors={connectors} libraryName="ethers.js">
-        <App />
-      </Web3Provider>
-    </Provider>,
+    <Web3Provider connectors={connectors} libraryName="ethers.js">
+      <App />
+    </Web3Provider>,
     div
   )
   ReactDOM.unmountComponentAtNode(div)

src/pages/Pool/pool.scss

@@ -69,6 +69,7 @@
   }
 
   &__new-exchange-warning {
+    margin-top: 1rem;
     padding: 1rem;
     margin-bottom: 2rem;
     border: 1px solid rgba($pizazz-orange, 0.4);

src/pages/Send/index.js

@@ -362,24 +362,36 @@ export default function Swap() {
 
       if (amount && reserveETHFirst && reserveTokenFirst && reserveETHSecond && reserveTokenSecond) {
         try {
-          const intermediateValue =
-            independentField === INPUT
-              ? calculateEtherTokenOutputFromInput(amount, reserveTokenFirst, reserveETHFirst)
-              : calculateEtherTokenInputFromOutput(amount, reserveTokenFirst, reserveETHFirst)
-
-          if (intermediateValue.lte(ethers.constants.Zero)) {
-            throw Error()
-          }
-
-          const calculatedDependentValue =
-            independentField === INPUT
-              ? calculateEtherTokenOutputFromInput(intermediateValue, reserveETHSecond, reserveTokenSecond)
-              : calculateEtherTokenInputFromOutput(intermediateValue, reserveETHSecond, reserveTokenSecond)
-
-          if (calculatedDependentValue.lte(ethers.constants.Zero)) {
-            throw Error()
+          if (independentField === INPUT) {
+            const intermediateValue = calculateEtherTokenOutputFromInput(amount, reserveTokenFirst, reserveETHFirst)
+            if (intermediateValue.lte(ethers.constants.Zero)) {
+              throw Error()
+            }
+            const calculatedDependentValue = calculateEtherTokenOutputFromInput(
+              intermediateValue,
+              reserveETHSecond,
+              reserveTokenSecond
+            )
+            if (calculatedDependentValue.lte(ethers.constants.Zero)) {
+              throw Error()
+            }
+            dispatchSwapState({ type: 'UPDATE_DEPENDENT', payload: calculatedDependentValue })
+          } else {
+            const intermediateValue = calculateEtherTokenInputFromOutput(amount, reserveETHSecond, reserveTokenSecond)
+            if (intermediateValue.lte(ethers.constants.Zero)) {
+              throw Error()
+            }
+            // console.log('hi!', amountFormatter(intermediateValue, ))
+            const calculatedDependentValue = calculateEtherTokenInputFromOutput(
+              intermediateValue,
+              reserveTokenFirst,
+              reserveETHFirst
+            )
+            if (calculatedDependentValue.lte(ethers.constants.Zero)) {
+              throw Error()
+            }
+            dispatchSwapState({ type: 'UPDATE_DEPENDENT', payload: calculatedDependentValue })
           }
-          dispatchSwapState({ type: 'UPDATE_DEPENDENT', payload: calculatedDependentValue })
         } catch {
           setIndependentError(t('insufficientLiquidity'))
         }

src/pages/Swap/index.js

@@ -357,24 +357,36 @@ export default function Swap() {
 
       if (amount && reserveETHFirst && reserveTokenFirst && reserveETHSecond && reserveTokenSecond) {
         try {
-          const intermediateValue =
-            independentField === INPUT
-              ? calculateEtherTokenOutputFromInput(amount, reserveTokenFirst, reserveETHFirst)
-              : calculateEtherTokenInputFromOutput(amount, reserveTokenFirst, reserveETHFirst)
-
-          if (intermediateValue.lte(ethers.constants.Zero)) {
-            throw Error()
-          }
-
-          const calculatedDependentValue =
-            independentField === INPUT
-              ? calculateEtherTokenOutputFromInput(intermediateValue, reserveETHSecond, reserveTokenSecond)
-              : calculateEtherTokenInputFromOutput(intermediateValue, reserveETHSecond, reserveTokenSecond)
-
-          if (calculatedDependentValue.lte(ethers.constants.Zero)) {
-            throw Error()
+          if (independentField === INPUT) {
+            const intermediateValue = calculateEtherTokenOutputFromInput(amount, reserveTokenFirst, reserveETHFirst)
+            if (intermediateValue.lte(ethers.constants.Zero)) {
+              throw Error()
+            }
+            const calculatedDependentValue = calculateEtherTokenOutputFromInput(
+              intermediateValue,
+              reserveETHSecond,
+              reserveTokenSecond
+            )
+            if (calculatedDependentValue.lte(ethers.constants.Zero)) {
+              throw Error()
+            }
+            dispatchSwapState({ type: 'UPDATE_DEPENDENT', payload: calculatedDependentValue })
+          } else {
+            const intermediateValue = calculateEtherTokenInputFromOutput(amount, reserveETHSecond, reserveTokenSecond)
+            if (intermediateValue.lte(ethers.constants.Zero)) {
+              throw Error()
+            }
+            // console.log('hi!', amountFormatter(intermediateValue, ))
+            const calculatedDependentValue = calculateEtherTokenInputFromOutput(
+              intermediateValue,
+              reserveTokenFirst,
+              reserveETHFirst
+            )
+            if (calculatedDependentValue.lte(ethers.constants.Zero)) {
+              throw Error()
+            }
+            dispatchSwapState({ type: 'UPDATE_DEPENDENT', payload: calculatedDependentValue })
           }
-          dispatchSwapState({ type: 'UPDATE_DEPENDENT', payload: calculatedDependentValue })
         } catch {
           setIndependentError(t('insufficientLiquidity'))
         }

src/store/index.js

-import store from './store.dev'
-
-export default store

src/store/initial-state.js

-export default {}

src/store/store.dev.js

-import { applyMiddleware, compose, createStore } from 'redux'
-import thunk from 'redux-thunk'
-import initialState from './initial-state'
-import reducer from '../ducks'
-
-const middleware = [thunk]
-const enhancers = []
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
-
-const store = createStore(reducer, initialState, composeEnhancers(applyMiddleware(...middleware), ...enhancers))
-
-export default store

src/utils/index.js

@@ -44,12 +44,12 @@ export function getContract(address, ABI, library, account) {
 
 // account is optional
 export function getFactoryContract(networkId, library, account) {
-  return getContract(FACTORY_ADDRESSES[networkId], FACTORY_ABI, getProviderOrSigner(library, account))
+  return getContract(FACTORY_ADDRESSES[networkId], FACTORY_ABI, library, account)
 }
 
 // account is optional
 export function getExchangeContract(exchangeAddress, library, account) {
-  return getContract(exchangeAddress, EXCHANGE_ABI, getProviderOrSigner(library, account))
+  return getContract(exchangeAddress, EXCHANGE_ABI, library, account)
 }
 
 // get token name