add MKR, DAI, ZRX

src/components/Exchange.js

@@ -19,7 +19,7 @@ class Exchange extends Component {
     this.props.setExchangeRate(0);
     this.props.setExchangeFee(0);
     this.props.setInteractionState('connected');
-    // what the flip does this do 
+    // what the flip does this do
     // this.setState({ firstRun: true })
 
     if (type === 'input') {
@@ -27,14 +27,14 @@ class Exchange extends Component {
     } else if (type === 'output'){
       await this.props.setOutputToken(selected);
     }
-    
+
     await this.getMarketType();
     // these two functions are actually being passed from the parent component, because they're used in multiple places
     // eventually pull these out into HOC
     this.props.getAccountInfo();
     this.props.getMarketInfo();
   }
-  
+
   setExchangeOutput = () => {
     var inputValue = this.props.exchange.inputValue;
     console.log(inputValue, 'from setExchangeOutput')
@@ -44,7 +44,7 @@ class Exchange extends Component {
       this.props.setInteractionState('error1');
     } else if(inputValue && inputValue !== 0 && inputValue !== '0'){
         this.props.setInteractionState('input');
-        // another function to be pulled out into HOC 
+        // another function to be pulled out into HOC
         this.getExchangeRate(inputValue);
     } else {
         this.props.setExchangeOutputValue(0);
@@ -83,7 +83,7 @@ class Exchange extends Component {
       this.tokenToTokenRate(input);
     }
   }
- 
+
   ethToTokenRate = (ethInput) => {
     var ethInMarket = +this.props.exchange.marketEth2;
     var tokensInMarket = +this.props.exchange.marketTokens2;
@@ -157,7 +157,7 @@ class Exchange extends Component {
           <p>→</p>
         </div>
         <div className="value border pa2">
-          <input type="number" readOnly={true} value={(this.props.exchange.outputValue/10**18).toFixed(5)} placeholder="0"/>
+          <input type="number" readOnly={true} value={(this.props.exchange.outputValue/10**18).toFixed(6)} placeholder="0"/>
           <SelectToken token={this.props.exchange.outputToken} onSelectToken={this.onSelectToken} type="output"/>
            <p className="dropdown">{'<'}</p>
         </div>
@@ -170,7 +170,7 @@ const mapStateToProps = state => ({
     web3Store: state.web3Store,
     exchange: state.exchange
 })
-  
+
   const mapDispatchToProps = (dispatch) => {
     return bindActionCreators({
       setExchangeInputValue,
@@ -187,4 +187,4 @@ const mapStateToProps = state => ({
     }, dispatch);
   }
 
-  export default connect(mapStateToProps, mapDispatchToProps)(Exchange);
\ No newline at end of file
+  export default connect(mapStateToProps, mapDispatchToProps)(Exchange);

src/components/Purchase.js

@@ -27,7 +27,7 @@ class Purchase extends Component {
 
     exchange.methods.ethToTokenSwap(minTokensInt, timeout).send({from: this.props.web3Store.currentMaskAddress, value: weiSold})
       .on('transactionHash', (result) => {
-        // console.log('Transaction Hash created'        
+        // console.log('Transaction Hash created'
         // let transactions = this.state.transactions
         // transactions.push(result);
         // transactions is cookie stuff, we'll keep that in state
@@ -57,7 +57,7 @@ class Purchase extends Component {
     var tokensSold = this.props.exchange.inputValue;
     var tokensSoldInt = this.props.web3Store.web3.utils.toWei(tokensSold);
     var timeout = this.props.web3Store.blockTimestamp + 300; //current block time + 5mins
-  
+
     exchange.methods.tokenToEthSwap(tokensSoldInt, minEthInt, timeout).send({from: this.props.web3Store.currentMaskAddress})
       .on('transactionHash', (result) => {
         // console.log('Transaction Hash created')
@@ -107,7 +107,7 @@ class Purchase extends Component {
     if (this.props.web3Store.interaction === 'input') {
         return (
           <a className="swap border pa2" role="button" onClick={() => {this.purchaseTokens()}}>
-            <b>{"I want to swap " + this.props.exchange.inputValue + " " + this.props.exchange.inputToken.value + " for " + this.props.exchange.outputValue/10**18 + " " + this.props.exchange.outputToken.value}</b>
+            <b>{"I want to swap " + this.props.exchange.inputValue + " " + this.props.exchange.inputToken.value + " for " + (this.props.exchange.outputValue/10**18).toFixed(6) + " " + this.props.exchange.outputToken.value}</b>
           </a>
         )
       } else {

src/components/RateAndFee.js

@@ -5,14 +5,14 @@ function RateAndFee ({ exchangeRate, outputTokenValue, inputTokenValue, exchange
     <section className="rate border pa2">
       <span className="rate-info">
         <p>Rate</p>
-        <p>{(exchangeRate).toFixed(5)} {outputTokenValue + "/" + inputTokenValue}</p>
+        <p>{(exchangeRate).toFixed(6)} {outputTokenValue + "/" + inputTokenValue}</p>
       </span>
       <span className="rate-info">
         <p>Fee</p>
-        <p>{(exchangeFee/10**18).toFixed(5)} {inputTokenValue}</p>
+        <p>{(exchangeFee/10**18).toFixed(6)} {inputTokenValue}</p>
       </span>
     </section>
   )
 }
 
-export default RateAndFee;
\ No newline at end of file
+export default RateAndFee;

src/store/initial-state.js

@@ -13,14 +13,20 @@ export default {
     exchangeType: 'ETH to Token',
     exchangeAddresses: {
       addresses: [
-        ['BAT','0x80f5C1beA2Ea4a9C21E4c6D7831ae2Dbce45674d'], 
-        ['OMG','0x1033f09e293200de63AF16041e83000aFBBfF5c0']
+        ['BAT','0x80f5C1beA2Ea4a9C21E4c6D7831ae2Dbce45674d'],
+        ['DAI','0x9eb0461bcc20229bE61319372cCA84d782823FCb'],
+        ['MKR','0x4c86a3b3cf926de3644f60658071ca604949609f'],
+        ['OMG','0x1033f09e293200de63AF16041e83000aFBBfF5c0'],
+        ['ZRX','0x42E109452F4055c82a513A527690F2D73251367e']
       ]
     },
     tokenAddresses: {
       addresses: [
-        ['BAT','0xDA5B056Cfb861282B4b59d29c9B395bcC238D29B'], 
-        ['OMG','0x879884c3C46A24f56089f3bBbe4d5e38dB5788C0']
+        ['BAT','0xDA5B056Cfb861282B4b59d29c9B395bcC238D29B'],
+        ['DAI','0x2448eE2641d78CC42D7AD76498917359D961A783'],
+        ['MKR','0xf9ba5210f91d0474bd1e1dcdaec4c58e359aad85'],
+        ['OMG','0x879884c3C46A24f56089f3bBbe4d5e38dB5788C0'],
+        ['ZRX','0xF22e3F33768354c9805d046af3C0926f27741B43']
       ]
     }
   },
@@ -30,7 +36,7 @@ export default {
     inputBalance: 0,
     outputBalance: 0,
     inputToken: { value: 'ETH', label: 'ETH', clearableValue: false },
-    outputToken: { value: 'OMG', label: 'OMG', clearableValue: false },
+    outputToken: { value: 'MKR', label: 'MKR', clearableValue: false },
     invariant1: 0,
     invariant2: 0,
     marketEth1: 0,