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

This commit is contained in:
Kenny Tran 2018-12-11 05:27:20 -08:00 committed by Chi Kei Chan
parent 7608485fdb
commit 4b4df7ed3d
4 changed files with 65 additions and 45 deletions

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

@ -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);

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

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