refactor functions to be more dynamic

src/App.js

@@ -21,8 +21,8 @@ import { connect } from 'react-redux';
 import { subscribe } from 'redux-subscriber';
 // redux actions
 // import { initializeGlobalWeb3 } from './actions/global-actions';
-import { uniExchangeContractReady, swtExchangeContractReady } from './actions/exchangeContract-actions';
-import { uniTokenContractReady, swtTokenContractReady } from './actions/tokenContract-actions';
+import { uniExchangeContractReady, swtExchangeContractReady, exchangeContractReady } from './actions/exchangeContract-actions';
+import { uniTokenContractReady, swtTokenContractReady, tokenContractReady } from './actions/tokenContract-actions';
 import { initializeGlobalWeb3, setWeb3ConnectionStatus, setCurrentMaskAddress, metamaskLocked, metamaskUnlocked, setInteractionState, factoryContractReady, toggleAbout } from './actions/web3-actions';
 import { setInputBalance, setOutputBalance, setInvariant1, setInvariant2, setMarketEth1, setMarketEth2, setMarketTokens1, setMarketTokens2, setAllowanceApprovalState } from './actions/exchange-actions';
 // enter d3 & misc. tools
@@ -74,12 +74,13 @@ class App extends Component {
     const web3Subscriber = subscribe('web3Store.connected', state => {
       if(state.web3Store.connected === true && !state.web3Store.metamaskLocked) {
         console.log('successfully connected to metamask', state.web3Store.currentMaskAddress);
-        setInterval(this.getMarketInfo, 15000);
-        setInterval(this.getAccountInfo, 15000);
-        setInterval(this.getUserAddress, 10000);
+        this.marketInterval = setInterval(this.getMarketInfo, 15000);
+        this.accountInterval = setInterval(this.getAccountInfo, 15000);
+        this.userInterval = setInterval(this.getUserAddress, 500);
       } else {
         console.log('web3 not connected, getting user address')
-        setInterval(this.getUserAddress, 500);
+        console.log('this.props.currentMaskAddress', this.props.currentMaskAddress)
+        this.otherUserInterval = setInterval(this.getUserAddress, 500);
       }
     })   
   }
@@ -90,12 +91,14 @@ class App extends Component {
   // TODO: getInfoFirstTime and getUserAddress are WET af 
   // lets do something about it 
   getInfoFirstTime = () => {
-    localweb3.eth.getAccounts((error, result) => {
+    localweb3.eth.getAccounts(async (error, result) => {
       if(result.length > 0){
         this.props.setCurrentMaskAddress(result[0]);
         this.props.metamaskUnlocked();
         this.props.setWeb3ConnectionStatus(true)
-        this.getContracts();
+        await this.getContracts();
+        this.getAccountInfo();
+        this.getMarketInfo();
       } else {
         this.props.metamaskLocked();
         this.props.setWeb3ConnectionStatus(false)
@@ -107,13 +110,15 @@ class App extends Component {
   getUserAddress = () => {
    localweb3.eth.getAccounts((error, result) => {
       if (result.length > 0) {
-        console.log('getUserAddress metamask unlocked')
         this.props.setCurrentMaskAddress(result[0]);
         this.props.metamaskUnlocked();
         this.props.setWeb3ConnectionStatus(true);
       }
       else {
-        console.log('getUserAddress metamask Locked ')
+        this.props.setCurrentMaskAddress(undefined);
+        clearInterval(this.marketInterval);
+        clearInterval(this.accountInterval);
+        clearInterval(this.userInterval);
         this.props.metamaskLocked();
         this.props.setWeb3ConnectionStatus(false);
         this.props.setInteractionState('locked');
@@ -123,62 +128,56 @@ class App extends Component {
 
   // could possibly use refactoring 
   getContracts = () => {
-    const uniExchangeAddress = this.props.web3Store.exchangeAddresses.UNI;
-    const uniExchangeContract = new localweb3.eth.Contract(exchangeABI, uniExchangeAddress);
-    this.props.uniExchangeContractReady(uniExchangeContract);
-
-    const swapExchangeAddress = this.props.web3Store.exchangeAddresses.SWT;
-    const swapExchangeContract = new localweb3.eth.Contract(exchangeABI, swapExchangeAddress);
-    this.props.swtExchangeContractReady(swapExchangeContract);
-
-    const uniTokenAddress = this.props.web3Store.tokenAddresses.UNI;
-    const uniTokenContract = new localweb3.eth.Contract(tokenABI, uniTokenAddress);
-    this.props.uniTokenContractReady(uniTokenContract);
-
-    const swapTokenAddress = this.props.web3Store.tokenAddresses.SWT;
-    const swapTokenContract = new localweb3.eth.Contract(tokenABI, swapTokenAddress);
-    this.props.swtTokenContractReady(swapTokenContract);
-
+    this.props.web3Store.exchangeAddresses.addresses.map(async exchangeAddress => {
+      // receive the exchange address, create the exchange contract
+      let exchangeContract = await new localweb3.eth.Contract(exchangeABI, exchangeAddress[1]);
+      // send the exchange contract to redux store
+      await this.props.exchangeContractReady(exchangeAddress[0], exchangeContract);
+    })
+    
+    this.props.web3Store.tokenAddresses.addresses.map(async tokenAddress => {
+      // receive the token address, create the token contract
+      let tokenContract = await new localweb3.eth.Contract(tokenABI, tokenAddress[1]);
+      // send the token contract to redux store 
+      await this.props.tokenContractReady(tokenAddress[0], tokenContract);
+    })
+    
+    // happens only once 
     const factoryAddress = this.props.web3Store.factoryAddress;
     const factoryContract = new localweb3.eth.Contract(factoryABI, factoryAddress);
     this.props.factoryContractReady(factoryContract);
-
-    this.getAccountInfo();
-    this.getMarketInfo();
+    
+    // this.getAccountInfo();
+    // this.getMarketInfo();
   }
    
   symbolToTokenAddress = (symbol) => {
-    if(symbol === 'UNI') {
-      return this.props.web3Store.tokenAddresses.UNI;
-    } else if (symbol === 'SWAP') {
-      return this.props.web3Store.tokenAddresses.SWT;
+    let tokenAddresses = this.props.web3Store.tokenAddresses.addresses;
+    for (let i = 0; i < tokenAddresses.length; i++) {
+      if (tokenAddresses[i][0] === symbol) {
+        return tokenAddresses[i][1];
+      }
     }
   }
 
   symbolToTokenContract = (symbol) => {
-    if(symbol === 'UNI') {
-      return this.props.tokenContracts.UNI;
-    } else if(symbol === 'SWAP') {
-      return this.props.tokenContracts.SWT;
-    }
+    return this.props.tokenContracts[symbol]
   }
 
   symbolToExchangeAddress = (symbol) => {
-    if(symbol === 'UNI') {
-      return this.props.web3Store.exchangeAddresses.UNI;
-    } else if(symbol === 'SWAP') {
-      return this.props.web3Store.exchangeAddresses.SWT;
+    let exchangeAddresses = this.props.web3Store.exchangeAddresses.addresses;
+    for (let i = 0; i < exchangeAddresses.length; i++) {
+      if (exchangeAddresses[i][0] === symbol) {
+        return exchangeAddresses[i][1];
+      }
     }
   }
 
   symbolToExchangeContract = (symbol) => {
-    if(symbol === 'UNI') {
-      return this.props.exchangeContracts.UNI;
-    } else if(symbol === 'SWAP') {
-      return this.props.exchangeContracts.SWT;
-    }
+    return this.props.exchangeContracts[symbol]
   }
 
+
   getMarketInfo = () => {
     switch (this.props.web3Store.exchangeType) {
       case 'ETH to Token':
@@ -292,7 +291,7 @@ class App extends Component {
     if(type === 'Token to ETH' || type === 'Token to Token') {
       var token = this.symbolToTokenContract(this.props.exchange.inputToken.value);
       var exchangeAddress = this.symbolToExchangeAddress(this.props.exchange.inputToken.value);
-
+      
       token.methods.allowance(this.props.web3Store.currentMaskAddress, exchangeAddress).call().then((result, error) => {
         console.log(this.props.exchange.inputToken.value + ' allowance: ' + result);
         if(result === '0'){
@@ -418,7 +417,9 @@ const mapDispatchToProps = (dispatch) => {
     setMarketTokens2,
     setAllowanceApprovalState,
     initializeGlobalWeb3,
-    toggleAbout
+    toggleAbout,
+    exchangeContractReady,
+    tokenContractReady
   }, dispatch)
 }
 

src/actions/exchange-actions.js

@@ -84,9 +84,9 @@ export const setExchangeOutputValue = (outputValue) => ({
 export const setExchangeRate = (rate) => ({
   type: SET_EXCHANGE_RATE,
   rate
-})
+});
 
 export const setExchangeFee = (fee) => ({
   type: SET_EXCHANGE_FEE,
   fee 
-})
\ No newline at end of file
+});
\ No newline at end of file

src/actions/exchangeContract-actions.js

 import { 
   UNI_EXCHANGE_CONTRACT_READY,
-  SWT_EXCHANGE_CONTRACT_READY
+  SWT_EXCHANGE_CONTRACT_READY,
+  EXCHANGE_CONTRACT_READY
 } from '../constants';
 
 export const uniExchangeContractReady = (contract) => ({
@@ -11,4 +12,11 @@ export const uniExchangeContractReady = (contract) => ({
 export const swtExchangeContractReady = (contract) => ({
   type: SWT_EXCHANGE_CONTRACT_READY,
   contract
-});
\ No newline at end of file
+});
+// definitely needs to be redux thunk 
+export const exchangeContractReady = (symbol, exchangeContract) => ({
+  type: EXCHANGE_CONTRACT_READY,
+  payload: { [symbol]: exchangeContract } 
+});
+
+

src/actions/global-actions.js

-import { INITIALIZE_GLOBAL_WEB3 } from '../constants';
-
-export const initializeGlobalWeb3 = (globalWeb3) => ({
-  type: INITIALIZE_GLOBAL_WEB3,
-  globalWeb3
-})
-  
\ No newline at end of file

src/actions/tokenContract-actions.js

 import {
   UNI_TOKEN_CONTRACT_READY,
-  SWT_TOKEN_CONTRACT_READY
+  SWT_TOKEN_CONTRACT_READY,
+  TOKEN_CONTRACT_READY
 } from '../constants';
 
 export const uniTokenContractReady = (contract) => ({
@@ -11,4 +12,9 @@ export const uniTokenContractReady = (contract) => ({
 export const swtTokenContractReady = (contract) => ({
   type: SWT_TOKEN_CONTRACT_READY,
   contract
+});
+// again, needs to be redux thunk 
+export const tokenContractReady = (symbol, tokenContract) => ({
+  type: TOKEN_CONTRACT_READY,
+  payload: { [symbol]: tokenContract }
 });
\ No newline at end of file

src/actions/web3-actions.js

@@ -76,8 +76,8 @@ export const setNetworkMessage = (networkMessage) => {
 
 export const setBlockTimestamp = () => {
   return async (dispatch, getState) => {
-    const { globalWeb3 } = getState().web3Store
-    await globalWeb3.eth.getBlock('latest', (error, blockInfo) => {
+    const { web3 } = getState().web3Store;
+    await web3.eth.getBlock('latest', (error, blockInfo) => {
       console.log(blockInfo.timestamp, 'BLOCKTIMESTAMP');
       dispatch({
         type: SET_BLOCK_TIMESTAMP,

src/components/NetworkStatus.js

@@ -6,17 +6,13 @@ import { setWeb3ConnectionStatus, setInteractionState, setNetworkMessage, metama
 
 class NetworkStatus extends Component {
   componentDidMount(){
-    const interactionStateSubscriber = subscribe('web3Store.metamaskLocked', state => {
-      if (state.web3Store.metamaskLocked !== true) {
-        console.log('metamask is unlocked')
+    // eslint-disable-next-line no-unused-vars
+    const interactionStateSubscriber = subscribe('web3Store.currentMaskAddress', state => {
+      if (state.web3Store.currentMaskAddress !== undefined) {
+        console.log('METAMASK UNLOCKED FROM NETWORK STATUS')
         this.checkNetwork();
-      } else { 
-        console.log('metamask is locked')
-      }
+      } else { console.log('METAMASK LOCKED FROM NETWORK STATUS') }
     })
-    // if (this.props.web3Store.web3 !== undefined){
-    //   this.checkNetwork();
-    // } 
   }
 
   checkNetwork = () => {

src/components/SelectToken.js

-import React, { Component } from 'react'
-import Select from 'react-select'
-import './SelectToken.css'
+import React, { Component } from 'react';
+import Select from 'react-select';
+import './SelectToken.css';
+import { connect } from 'react-redux';
 
 class SelectToken extends Component {
   constructor (props) {
     super(props)
     this.state = {
       selectedOption: this.props.token,
+      tokenList: []
     }
   }
+  
+  componentDidMount() {
+    let tokenList = this.createTokenList();
+    this.setState({ tokenList })
+  }
+
   handleChange = (selectedOption) => {
-    this.setState({ selectedOption })
+    this.setState({ selectedOption });
     this.props.onSelectToken(selectedOption, this.props.type)
     // console.log(`Selected: ${selectedOption.label}`)
   }
+
+  createTokenList = () => {
+    let tokens = this.props.web3Store.tokenAddresses.addresses; 
+    let tokenList = [ { value: 'ETH', label: 'ETH', clearableValue: false } ];
+
+    for (let i = 0; i < tokens.length; i++) {
+      let entry = { value: '', label: '', clearableValue: false }
+      entry.value = tokens[i][0];
+      entry.label = tokens[i][0];
+      tokenList.push(entry);
+    }
+   
+    return tokenList; 
+  }
+
   render () {
     const { selectedOption } = this.state
     const value = selectedOption && selectedOption.value
@@ -24,14 +47,14 @@ class SelectToken extends Component {
         value={value}
         onChange={this.handleChange}
         className="select"
-        options={[
-          { value: 'ETH', label: 'ETH', clearableValue: false },
-          { value: 'UNI', label: 'UNI', clearableValue: false },
-          { value: 'SWAP', label: 'SWAP', clearableValue: false },
-        ]}
+        options={this.state.tokenList}
       />
     )
   }
 }
 
-export default SelectToken;
+const mapStateToProps = state => ({
+  web3Store: state.web3Store
+})
+
+export default connect(mapStateToProps)(SelectToken);

src/constants.js

@@ -23,10 +23,12 @@ export const FACTORY_CONTRACT_READY = 'FACTORY_CONTRACT_READY';
 // token EXCHANGE contract actions, in action creator, reducer, and app
 export const UNI_EXCHANGE_CONTRACT_READY = 'UNI_EXCHANGE_CONTRACT_READY';
 export const SWT_EXCHANGE_CONTRACT_READY = 'SWT_EXCHANGE_CONTRACT_READY';
+export const EXCHANGE_CONTRACT_READY = 'EXCHANGE_CONTRACT_READY';
 
 // token CONTRACT actions in actions, action creator, reducer
 export const UNI_TOKEN_CONTRACT_READY = 'UNI_TOKEN_CONTRACT_READY';
 export const SWT_TOKEN_CONTRACT_READY = 'SWT_TOKEN_CONTRACT_READY';
+export const TOKEN_CONTRACT_READY = 'TOKEN_CONTRACT_READY';
 
 // actions for the exchange, all in one place
 export const SET_INPUT_BALANCE = 'SET_INPUT_BALANCE';

src/reducers/exchangeContract-reducer.js

 import {
   UNI_EXCHANGE_CONTRACT_READY,
-  SWT_EXCHANGE_CONTRACT_READY
+  SWT_EXCHANGE_CONTRACT_READY,
+  EXCHANGE_CONTRACT_READY
 } from '../constants'
 
 export default (state = {}, action) => {
-  const { contract } = action;
+  const { contract, payload } = action;
   switch(action.type) {
     case UNI_EXCHANGE_CONTRACT_READY:
       return Object.assign({}, state, { UNI: contract });
     case SWT_EXCHANGE_CONTRACT_READY: 
       return Object.assign({}, state, { SWT: contract });
+    case EXCHANGE_CONTRACT_READY: 
+      return Object.assign({}, state,  payload )
     default: return state;
   }
 }
\ No newline at end of file

src/reducers/tokenContract-reducer.js

 import { 
   UNI_TOKEN_CONTRACT_READY,
-  SWT_TOKEN_CONTRACT_READY
+  SWT_TOKEN_CONTRACT_READY,
+  TOKEN_CONTRACT_READY
 } from '../constants';
 
 export default (state = {}, action) => {
-  const { contract } = action;
+  const { contract, payload } = action;
   switch(action.type) {
     case UNI_TOKEN_CONTRACT_READY:
       return Object.assign({}, state, { UNI: contract });
     case SWT_TOKEN_CONTRACT_READY: 
       return Object.assign({}, state, { SWT: contract });
+    case TOKEN_CONTRACT_READY: 
+      return Object.assign({}, state,  payload )
     default: return state;
   }
 }
\ No newline at end of file

src/store/initial-state.js

@@ -3,8 +3,7 @@ export default {
     web3: {},
     connected: false,
     aboutToggle: false,
-    globalWeb3: {},
-    currentMaskAddress: '',
+    currentMaskAddress: undefined,
     metamaskLocked: true,
     interaction: '',
     networkMessage: '',
@@ -13,22 +12,20 @@ export default {
     blockTimestamp: '',
     exchangeType: 'ETH to Token',
     exchangeAddresses: {
-      UNI: '0xcDc30C3b02c5776495298198377D2Fc0fd6B1F1C',
-      SWT: '0x4632a7Cd732c625dcc48d75E289c209422e1D2B7'
+      addresses: [
+        ['UNI','0xcDc30C3b02c5776495298198377D2Fc0fd6B1F1C'], 
+        ['SWAP','0x4632a7Cd732c625dcc48d75E289c209422e1D2B7']
+      ]
     },
     tokenAddresses: {
-      UNI: '0x350E5DD084ecF271e8d3531D4324443952F47756',
-      SWT: '0x8B2A87F8243f23C33fb97E23a21Ae8EDB3b71AcA'
+      addresses: [
+        ['UNI','0x350E5DD084ecF271e8d3531D4324443952F47756'], 
+        ['SWAP','0x8B2A87F8243f23C33fb97E23a21Ae8EDB3b71AcA']
+      ]
     }
   },
-  exchangeContracts: {
-    UNI: '',
-    SWT: ''
-  },
-  tokenContracts: {
-    UNI: '',
-    SWT: ''
-  },
+  exchangeContracts: {},
+  tokenContracts: {},
   exchange: {
     inputBalance: 0,
     outputBalance: 0,