Don’t render numbers if decimals is 0 (#135)

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;
     }
 

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,10 +248,7 @@ class RemoveLiquidity extends Component {
 
     const { tokenAddress, totalSupply, value: input } = this.state;
 
-
-    const exchangeAddress = fromToken[tokenAddress];
-    if (!exchangeAddress || !web3) {
-      return [
+    const blank = [
       <CurrencyInputPanel
         key="remove-liquidity-input"
         title="Output"
@@ -275,11 +276,20 @@ class RemoveLiquidity extends Component {
         </div>
       </OversizedPanel>
     ];
+
+    const exchangeAddress = fromToken[tokenAddress];
+    if (!exchangeAddress || !web3) {
+      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);

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]}

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]}