fixed decimal values, fixed bug related to error1 not showing for token to token

src/App.js

@@ -371,6 +371,7 @@ class App extends Component {
       this.setState({inputToken: selected});
       if (selected.value === this.state.outputToken.value) {
         marketType = 'Invalid';
+        this.setState({interaction: 'error1'});
       } else if (selected.value === 'ETH'){
           marketType = 'ETH to Token';
       } else if (this.state.outputToken.value === 'ETH'){
@@ -637,7 +638,7 @@ class App extends Component {
             <p>→</p>
           </div>
           <div className="value border pa2">
-            <input type="number" value={this.state.output/10**18} placeholder="0"/>
+            <input type="number" readOnly={true} value={(this.state.output/10**18).toFixed(5)} placeholder="0"/>
             <SelectToken token={this.state.outputToken} onSelectToken={this.onSelectToken} type="output"/>
             <p className="dropdown">{'<'}</p>
           </div>
@@ -645,11 +646,11 @@ class App extends Component {
         <section className="rate border pa2">
           <span className="rate-info">
             <p>Rate</p>
-            <p>{this.state.rate} {this.state.outputToken.value + "/" + this.state.inputToken.value}</p>
+            <p>{(this.state.rate).toFixed(5)} {this.state.outputToken.value + "/" + this.state.inputToken.value}</p>
           </span>
           <span className="rate-info">
             <p>Fee</p>
-            <p>{this.state.fee/10**18} {this.state.inputToken.value}</p>
+            <p>{(this.state.fee/10**18).toFixed(5)} {this.state.inputToken.value}</p>
           </span>
         </section>
 

src/components/ConnectionHelper.js

@@ -22,17 +22,35 @@ function ConnectionHelper(props) {
         Looks like you aren't connected. <b>Please unlock Metamask to continue.</b></p>
       </div>
     )
+  } else if (props.interaction === "error1") {
+    return (
+      <div className="grey-bg connection border pa2">
+        <p>You can't swap a token for itself! <span role="img" aria-label="Crying">😂</span></p>
+      </div>
+    )
+  } else if (props.interaction === "submitted") {
+    return (
+      <div className="grey-bg connection border pa2">
+        <p>{"Transaction submitted! Click on the transaction hash below to check its status?"}</p>
+      </div>
+    )
+  } else if (props.input > props.balance/10**18 && props.inputToken.value === 'ETH') {
+    return (
+      <div className="grey-bg red connection border pa2">
+        <p>This account doesn't have enough balance to make this transaction! Get more {props.inputToken.value} with the <a target="_blank" rel="noopener noreferrer" href="https://faucet.rinkeby.io/">Rinkeby Faucet.</a></p>
+      </div>
+    )
   } else if (!props.approved &&  props.exchangeType === "Token to Token") {
     return (
       <div className="grey-bg connection border pa2">
-        <p>Our smart contract has to be approved by your address to be able to swap tokens for tokens.<br /> We set the transfer limit to 250 (<a onClick={() => {props.toggleAbout()}} className="f-a">Why?</a>).</p>
+        <p>Our smart contract has to be approved by your address to be able to swap  this token for other tokens.<br /> We set a high transfer limit for the demo (<a onClick={() => {props.toggleAbout()}} className="f-a">Why?</a>).</p>
         <a className="f-a"  onClick={() => props.approveAllowance()}>Approve ⭞</a>
       </div>
     )
   } else if (!props.approved && props.exchangeType === "Token to ETH") {
     return (
       <div className="grey-bg connection border pa2">
-        <p>Our smart contract has to be approved by your address to be able to swap tokens for ETH.<br /> We set the transfer limit to 250 (<a onClick={() => {props.toggleAbout()}} className="f-a">Why?</a>).</p>
+        <p>Our smart contract has to be approved by your address to be able to swap this token for ETH.<br /> We set a high transfer limit for the demo (<a onClick={() => {props.toggleAbout()}} className="f-a">Why?</a>).</p>
         <a className="f-a"  onClick={() => props.approveAllowance()}>Approve ⭞</a>
       </div>
     )
@@ -54,24 +72,6 @@ function ConnectionHelper(props) {
         <a className="f-a" onClick={() => props.onCloseHelper()}>I've added the token</a>
       </div>
     )
-  } else if (props.interaction === "error1") {
-    return (
-      <div className="grey-bg connection border pa2">
-        <p>You can't swap a token for itself! <span role="img" aria-label="Crying">😂</span></p>
-      </div>
-    )
-  } else if (props.interaction === "submitted") {
-    return (
-      <div className="grey-bg connection border pa2">
-        <p>{"Transaction submitted! Click on the transaction hash below to check its status?"}</p>
-      </div>
-    )
-  } else if (props.input > props.balance/10**18 && props.inputToken.value === 'ETH') {
-    return (
-      <div className="grey-bg red connection border pa2">
-        <p>This account doesn't have enough balance to make this transaction! Get more {props.inputToken.value} with the <a target="_blank" rel="noopener noreferrer" href="https://faucet.rinkeby.io/">Rinkeby Faucet.</a></p>
-      </div>
-    )
   } else if (props.input > props.balance/10**18) {
     return (
       <div className="grey-bg red connection border pa2">