diff options
Diffstat (limited to 'packages/website/ts')
-rw-r--r-- | packages/website/ts/components/wallet/wallet.tsx | 31 |
1 files changed, 21 insertions, 10 deletions
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 85603c184..f59f309ac 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -335,18 +335,19 @@ export class Wallet extends React.Component<WalletProps, WalletState> { private _renderEthRows(): React.ReactNode { const icon = <img style={{ width: ICON_DIMENSION, height: ICON_DIMENSION }} src={ETHER_ICON_PATH} />; const primaryText = this._renderAmount( - !_.isUndefined(this.props.userEtherBalanceInWei), this.props.userEtherBalanceInWei || new BigNumber(0), constants.DECIMAL_PLACES_ETH, constants.ETHER_SYMBOL, + _.isUndefined(this.props.userEtherBalanceInWei), ); const etherToken = this._getEthToken(); - const etherPrice = this.state.trackedTokenStateByAddress[etherToken.address].price; + const etherTokenState = this.state.trackedTokenStateByAddress[etherToken.address]; + const etherPrice = etherTokenState.price; const secondaryText = this._renderValue( - !_.isUndefined(this.props.userEtherBalanceInWei) && !_.isUndefined(etherPrice), this.props.userEtherBalanceInWei || new BigNumber(0), constants.DECIMAL_PLACES_ETH, etherPrice, + _.isUndefined(this.props.userEtherBalanceInWei) || !etherTokenState.isLoaded, ); const accessoryItemConfig = { wrappedEtherDirection: Side.Deposit, @@ -373,12 +374,12 @@ export class Wallet extends React.Component<WalletProps, WalletState> { const icon = <TokenIcon token={token} diameter={ICON_DIMENSION} link={tokenLink} />; const isWeth = token.symbol === constants.ETHER_TOKEN_SYMBOL; const wrappedEtherDirection = isWeth ? Side.Receive : undefined; - const primaryText = this._renderAmount(tokenState.isLoaded, tokenState.balance, token.decimals, token.symbol); + const primaryText = this._renderAmount(tokenState.balance, token.decimals, token.symbol, !tokenState.isLoaded); const secondaryText = this._renderValue( - tokenState.isLoaded, tokenState.balance, token.decimals, tokenState.price, + !tokenState.isLoaded, ); const accessoryItemConfig: AccessoryItemConfig = { wrappedEtherDirection, @@ -476,19 +477,29 @@ export class Wallet extends React.Component<WalletProps, WalletState> { /> ); } - private _renderAmount(isLoaded: boolean, amount: BigNumber, decimals: number, symbol: string): React.ReactNode { + private _renderAmount( + amount: BigNumber, + decimals: number, + symbol: string, + isLoading: boolean = false, + ): React.ReactNode { const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); const formattedAmount = unitAmount.toPrecision(TOKEN_AMOUNT_DISPLAY_PRECISION); const result = `${formattedAmount} ${symbol}`; return ( - <PlaceHolder hideChildren={!isLoaded}> + <PlaceHolder hideChildren={isLoading}> <div style={styles.amountLabel}>{result}</div> </PlaceHolder> ); } - private _renderValue(isLoaded: boolean, amount: BigNumber, decimals: number, price?: BigNumber): React.ReactNode { + private _renderValue( + amount: BigNumber, + decimals: number, + price?: BigNumber, + isLoading: boolean = false, + ): React.ReactNode { let result; - if (isLoaded) { + if (!isLoading) { if (_.isUndefined(price)) { result = '--'; } else { @@ -501,7 +512,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { result = '$0.00'; } return ( - <PlaceHolder hideChildren={!isLoaded}> + <PlaceHolder hideChildren={isLoading}> <div style={styles.valueLabel}>{result}</div> </PlaceHolder> ); |