Merge pull request #6 from uvilchis/dev

Dev

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);
+    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);
+    })
     
-    const swapTokenAddress = this.props.web3Store.tokenAddresses.SWT;
-    const swapTokenContract = new localweb3.eth.Contract(tokenABI, swapTokenAddress);
-    this.props.swtTokenContractReady(swapTokenContract);
+    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':
@@ -227,12 +226,12 @@ class App extends Component {
         // console.log('Input Invariant: ' + result);
       });
 
-      exchange.methods.ethInMarket().call().then((result, error) => {
+      exchange.methods.ethPool().call().then((result, error) => {
         this.props.setMarketEth1(result);
         // console.log('Input Market ETH: ' + result);
       });
 
-      exchange.methods.tokensInMarket().call().then((result, error) => {
+      exchange.methods.tokenPool().call().then((result, error) => {
         this.props.setMarketTokens1(result);
         // console.log('Input Market Tokens: ' + result);
       });
@@ -244,12 +243,12 @@ class App extends Component {
           // console.log('Output Invariant: ' + result);
         });
 
-        exchange.methods.ethInMarket().call().then((result, error) => {
+        exchange.methods.ethPool().call().then((result, error) => {
           this.props.setMarketEth2(result);
           // console.log('Output Market ETH: ' + result);
         });
 
-        exchange.methods.tokensInMarket().call().then((result, error) => {
+        exchange.methods.tokenPool().call().then((result, error) => {
           this.props.setMarketTokens2(result);
           // console.log('Output Market Tokens: ' + result);
         });
@@ -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

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) => ({
@@ -12,3 +13,10 @@ export const swtExchangeContractReady = (contract) => ({
   type: SWT_EXCHANGE_CONTRACT_READY,
   contract
 });
+// 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) => ({
@@ -12,3 +13,8 @@ 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/Exchange.js

@@ -8,6 +8,7 @@ import { setExchangeInputValue, setExchangeOutputValue, setExchangeRate, setExch
 class Exchange extends Component {
   onInputChange = async (event) => {
     var inputValue = event.target.value;
+    console.log(inputValue, 'onInputChange value')
     await this.props.setExchangeInputValue(inputValue);
     this.setExchangeOutput();
   }
@@ -36,6 +37,8 @@ class Exchange extends Component {
   
   setExchangeOutput = () => {
     var inputValue = this.props.exchange.inputValue;
+    console.log(inputValue, 'from setExchangeOutput')
+    console.log('outputToken', this.props.exchange.outputToken);
     if (this.props.web3Store.exchangeType === 'Invalid'){
       this.props.setExchangeOutputValue(0);
       this.props.setInteractionState('error1');

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/Purchase.js

@@ -33,8 +33,8 @@ class Purchase extends Component {
         // transactions is cookie stuff, we'll keep that in state
         // this.setState({ transactions: transactions })
         // any particular reason why there are initialized as 0, but get turned to empty strings after the transaction is over?
-        this.props.setExchangeInputValue('');
-        this.props.setExchangeOutputValue('');
+        // this.props.setExchangeInputValue(0);
+        // this.props.setExchangeOutputValue(0);
         this.props.setInteractionState('submitted');
         // cookie.save('transactions', transactions, { path: '/' })
       })
@@ -64,8 +64,8 @@ class Purchase extends Component {
         // let transactions = this.state.transactions
         // transactions.push(result)
         // this.setState({ transactions: transactions });
-        this.props.setExchangeInputValue('');
-        this.props.setExchangeOutputValue('');
+        // this.props.setExchangeInputValue(0);
+        // this.props.setExchangeOutputValue(0);
         this.props.setInteractionState('submitted');
         // cookie.save('transactions', transactions, { path: '/' })
       })
@@ -93,8 +93,8 @@ class Purchase extends Component {
         // let transactions = this.state.transactions
         // transactions.push(result)
         // this.setState({ transactions: transactions });
-        this.props.setExchangeInputValue('');
-        this.props.setExchangeOutputValue('');
+        // this.props.setExchangeInputValue(0);
+        // this.props.setExchangeOutputValue(0);
         this.props.setInteractionState('submitted');
         // cookie.save('transactions', transactions, { path: '/' })
       })

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/helpers/factoryABI.js

 module.exports.factoryABI = 
-[
-	{
-		"constant": false,
-		"inputs": [
-			{
-				"name": "token",
-				"type": "address"
-			}
-		],
-		"name": "createExchange",
-		"outputs": [
-			{
-				"name": "exchange",
-				"type": "address"
-			}
-		],
-		"payable": false,
-		"stateMutability": "nonpayable",
-		"type": "function"
-	},
-	{
-		"constant": true,
-		"inputs": [],
-		"name": "getExchangeCount",
-		"outputs": [
-			{
-				"name": "exchangeCount",
-				"type": "uint256"
-			}
-		],
-		"payable": false,
-		"stateMutability": "view",
-		"type": "function"
-	},
-	{
-		"constant": true,
-		"inputs": [
-			{
-				"name": "",
-				"type": "uint256"
-			}
-		],
-		"name": "tokenList",
-		"outputs": [
-			{
-				"name": "",
-				"type": "address"
-			}
-		],
-		"payable": false,
-		"stateMutability": "view",
-		"type": "function"
-	},
-	{
-		"constant": true,
-		"inputs": [
-			{
-				"name": "token",
-				"type": "address"
-			}
-		],
-		"name": "tokenToExchangeLookup",
-		"outputs": [
-			{
-				"name": "exchange",
-				"type": "address"
-			}
-		],
-		"payable": false,
-		"stateMutability": "view",
-		"type": "function"
-	},
-	{
-		"constant": true,
-		"inputs": [
-			{
-				"name": "exchange",
-				"type": "address"
-			}
-		],
-		"name": "exchangeToTokenLookup",
-		"outputs": [
-			{
-				"name": "token",
-				"type": "address"
-			}
-		],
-		"payable": false,
-		"stateMutability": "view",
-		"type": "function"
-	}
-]
+[{"constant":true,"inputs":[],"name":"getExchangeCount","outputs":[{"name":"exchangeCount","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_token","type":"address"}],"name":"launchExchange","outputs":[{"name":"exchange","type":"address"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"tokenList","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"_token","type":"address"}],"name":"tokenToExchangeLookup","outputs":[{"name":"exchange","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"_exchange","type":"address"}],"name":"exchangeToTokenLookup","outputs":[{"name":"token","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"anonymous":false,"inputs":[{"indexed":true,"name":"exchange","type":"address"},{"indexed":true,"name":"token","type":"address"}],"name":"ExchangeLaunch","type":"event"}]

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,27 +12,25 @@ export default {
     blockTimestamp: '',
     exchangeType: 'ETH to Token',
     exchangeAddresses: {
-      UNI: '0xcDc30C3b02c5776495298198377D2Fc0fd6B1F1C',
-      SWT: '0x4632a7Cd732c625dcc48d75E289c209422e1D2B7'
+      addresses: [
+        ['BAT','0x80f5C1beA2Ea4a9C21E4c6D7831ae2Dbce45674d'], 
+        ['OMG','0x1033f09e293200de63AF16041e83000aFBBfF5c0']
+      ]
     },
     tokenAddresses: {
-      UNI: '0x350E5DD084ecF271e8d3531D4324443952F47756',
-      SWT: '0x8B2A87F8243f23C33fb97E23a21Ae8EDB3b71AcA'
+      addresses: [
+        ['BAT','0xDA5B056Cfb861282B4b59d29c9B395bcC238D29B'], 
+        ['OMG','0x879884c3C46A24f56089f3bBbe4d5e38dB5788C0']
+      ]
     }
   },
-  exchangeContracts: {
-    UNI: '',
-    SWT: ''
-  },
-  tokenContracts: {
-    UNI: '',
-    SWT: ''
-  },
+  exchangeContracts: {},
+  tokenContracts: {},
   exchange: {
     inputBalance: 0,
     outputBalance: 0,
     inputToken: { value: 'ETH', label: 'ETH', clearableValue: false },
-    outputToken: { value: 'UNI', label: 'UNI', clearableValue: false },
+    outputToken: { value: 'OMG', label: 'OMG', clearableValue: false },
     invariant1: 0,
     invariant2: 0,
     marketEth1: 0,