From 4b4df7ed3d52fbf3c0a9d61ac5384747fd6905a2 Mon Sep 17 00:00:00 2001
From: Kenny Tran <kenny8tran@gmail.com>
Date: Tue, 11 Dec 2018 05:27:20 -0800
Subject: [PATCH] =?UTF-8?q?Don=E2=80=99t=20render=20numbers=20if=20decimal?=
 =?UTF-8?q?s=20is=200=20(#135)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Pool/AddLiquidity.js    |  6 ++-
 src/pages/Pool/RemoveLiquidity.js | 66 ++++++++++++++++++-------------
 src/pages/Send/index.js           | 18 +++++----
 src/pages/Swap/index.js           | 20 ++++++----
 4 files changed, 65 insertions(+), 45 deletions(-)

diff --git a/src/pages/Pool/AddLiquidity.js b/src/pages/Pool/AddLiquidity.js
index 7e82462131..6156d4b783 100644
--- a/src/pages/Pool/AddLiquidity.js
+++ b/src/pages/Pool/AddLiquidity.js
@@ -118,6 +118,10 @@ class AddLiquidity extends Component {
     }
 
     const { value, decimals } = selectors().getBalance(account, currency);
+    if (!decimals) {
+      return '';
+    }
+
     return `Balance: ${value.dividedBy(10 ** decimals).toFixed(4)}`;
   }
 
@@ -339,7 +343,7 @@ class AddLiquidity extends Component {
     const ownedEth = ethPer.multipliedBy(liquidityBalance).dividedBy(10 ** 18);
     const ownedToken = tokenPer.multipliedBy(liquidityBalance).dividedBy(10 ** decimals);
 
-    if (!label) {
+    if (!label || !decimals) {
       return blank;
     }
 
diff --git a/src/pages/Pool/RemoveLiquidity.js b/src/pages/Pool/RemoveLiquidity.js
index b47c961c46..f4981978ca 100644
--- a/src/pages/Pool/RemoveLiquidity.js
+++ b/src/pages/Pool/RemoveLiquidity.js
@@ -151,6 +151,10 @@ class RemoveLiquidity extends Component {
       return '';
     }
     const { value, decimals } = selectors().getBalance(account, exchangeAddress);
+    if (!decimals) {
+      return '';
+    }
+
     return `Balance: ${value.dividedBy(10 ** decimals).toFixed(7)}`;
   };
 
@@ -244,42 +248,48 @@ class RemoveLiquidity extends Component {
 
     const { tokenAddress, totalSupply, value: input } = this.state;
 
+    const blank = [
+      <CurrencyInputPanel
+        key="remove-liquidity-input"
+        title="Output"
+        description="(estimated)"
+        renderInput={() => (
+          <div className="remove-liquidity__output"></div>
+        )}
+        disableTokenSelect
+        disableUnlock
+      />,
+      <OversizedPanel key="remove-liquidity-input-under" hideBottom>
+        <div className="pool__summary-panel">
+          <div className="pool__exchange-rate-wrapper">
+            <span className="pool__exchange-rate">Exchange Rate</span>
+            <span> - </span>
+          </div>
+          <div className="pool__exchange-rate-wrapper">
+            <span className="swap__exchange-rate">Current Pool Size</span>
+            <span> - </span>
+          </div>
+          <div className="pool__exchange-rate-wrapper">
+            <span className="swap__exchange-rate">Your Pool Share</span>
+            <span> - </span>
+          </div>
+        </div>
+      </OversizedPanel>
+    ];
 
     const exchangeAddress = fromToken[tokenAddress];
     if (!exchangeAddress || !web3) {
-      return [
-        <CurrencyInputPanel
-          key="remove-liquidity-input"
-          title="Output"
-          description="(estimated)"
-          renderInput={() => (
-            <div className="remove-liquidity__output"></div>
-          )}
-          disableTokenSelect
-          disableUnlock
-        />,
-        <OversizedPanel key="remove-liquidity-input-under" hideBottom>
-          <div className="pool__summary-panel">
-            <div className="pool__exchange-rate-wrapper">
-              <span className="pool__exchange-rate">Exchange Rate</span>
-              <span> - </span>
-            </div>
-            <div className="pool__exchange-rate-wrapper">
-              <span className="swap__exchange-rate">Current Pool Size</span>
-              <span> - </span>
-            </div>
-            <div className="pool__exchange-rate-wrapper">
-              <span className="swap__exchange-rate">Your Pool Share</span>
-              <span> - </span>
-            </div>
-          </div>
-        </OversizedPanel>
-      ];
+      return blank;
     }
+
     const { value: liquidityBalance } = getBalance(account, exchangeAddress);
     const { value: ethReserve } = getBalance(exchangeAddress);
     const { value: tokenReserve, decimals: tokenDecimals, label } = getBalance(exchangeAddress, tokenAddress);
 
+    if (!tokenDecimals) {
+      return blank;
+    }
+
     const ownership = liquidityBalance.dividedBy(totalSupply);
     const ethPer = ethReserve.dividedBy(totalSupply);
     const tokenPer = tokenReserve.multipliedBy(10 ** (18 - tokenDecimals)).dividedBy(totalSupply);
diff --git a/src/pages/Send/index.js b/src/pages/Send/index.js
index 4d1365f8d9..b942de23f4 100644
--- a/src/pages/Send/index.js
+++ b/src/pages/Send/index.js
@@ -682,6 +682,14 @@ class Send extends Component {
     );
   }
 
+  renderBalance(currency, balance, decimals) {
+    if (!currency || decimals === 0) {
+      return '';
+    }
+
+    return `Balance: ${balance.dividedBy(BN(10 ** decimals)).toFixed(4)}`
+  }
+
   render() {
     const { selectors, account } = this.props;
     const {
@@ -716,10 +724,7 @@ class Send extends Component {
           <CurrencyInputPanel
             title="Input"
             description={lastEditedField === OUTPUT ? estimatedText : ''}
-            extraText={inputCurrency
-              ? `Balance: ${inputBalance.dividedBy(BN(10 ** inputDecimals)).toFixed(4)}`
-              : ''
-            }
+            extraText={this.renderBalance(inputCurrency, inputBalance, inputDecimals)}
             onCurrencySelected={inputCurrency => this.setState({ inputCurrency }, this.recalcForm)}
             onValueChange={this.updateInput}
             selectedTokens={[inputCurrency, outputCurrency]}
@@ -735,10 +740,7 @@ class Send extends Component {
           <CurrencyInputPanel
             title="Output"
             description={lastEditedField === INPUT ? estimatedText : ''}
-            extraText={outputCurrency
-              ? `Balance: ${outputBalance.dividedBy(BN(10 ** outputDecimals)).toFixed(4)}`
-              : ''
-            }
+            extraText={this.renderBalance(outputCurrency, outputBalance, outputDecimals)}
             onCurrencySelected={outputCurrency => this.setState({ outputCurrency }, this.recalcForm)}
             onValueChange={this.updateOutput}
             selectedTokens={[inputCurrency, outputCurrency]}
diff --git a/src/pages/Swap/index.js b/src/pages/Swap/index.js
index c7ceba0cd3..fcf402e907 100644
--- a/src/pages/Swap/index.js
+++ b/src/pages/Swap/index.js
@@ -662,6 +662,14 @@ class Swap extends Component {
     );
   }
 
+  renderBalance(currency, balance, decimals) {
+    if (!currency || decimals === 0) {
+      return '';
+    }
+
+    return `Balance: ${balance.dividedBy(BN(10 ** decimals)).toFixed(4)}`
+  }
+
   render() {
     const { selectors, account } = this.props;
     const {
@@ -678,6 +686,8 @@ class Swap extends Component {
 
     const { inputError, outputError, isValid } = this.validate();
 
+
+
     return (
       <div className="swap">
         <MediaQuery query="(max-device-width: 767px)">
@@ -696,10 +706,7 @@ class Swap extends Component {
           <CurrencyInputPanel
             title="Input"
             description={lastEditedField === OUTPUT ? estimatedText : ''}
-            extraText={inputCurrency
-              ? `Balance: ${inputBalance.dividedBy(BN(10 ** inputDecimals)).toFixed(4)}`
-              : ''
-            }
+            extraText={this.renderBalance(inputCurrency, inputBalance, inputDecimals)}
             onCurrencySelected={inputCurrency => this.setState({ inputCurrency }, this.recalcForm)}
             onValueChange={this.updateInput}
             selectedTokens={[inputCurrency, outputCurrency]}
@@ -715,10 +722,7 @@ class Swap extends Component {
           <CurrencyInputPanel
             title="Output"
             description={lastEditedField === INPUT ? estimatedText : ''}
-            extraText={outputCurrency
-              ? `Balance: ${outputBalance.dividedBy(BN(10 ** outputDecimals)).toFixed(4)}`
-              : ''
-            }
+            extraText={this.renderBalance(outputCurrency, outputBalance, outputDecimals)}
             onCurrencySelected={outputCurrency => this.setState({ outputCurrency }, this.recalcForm)}
             onValueChange={this.updateOutput}
             selectedTokens={[inputCurrency, outputCurrency]}