diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-05-30 15:12:10 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-06-01 02:54:25 +0800 |
commit | 8ca9fb0251e72d79a33c760ffd9a27f501748d27 (patch) | |
tree | 2a578c37eadefb9fe76faacf5e347b1e91dbafd3 /packages/website/ts/components/wallet | |
parent | 3b26a656f725b2100f346e4f7eeff33b741562f6 (diff) | |
download | dexon-0x-contracts-8ca9fb0251e72d79a33c760ffd9a27f501748d27.tar dexon-0x-contracts-8ca9fb0251e72d79a33c760ffd9a27f501748d27.tar.gz dexon-0x-contracts-8ca9fb0251e72d79a33c760ffd9a27f501748d27.tar.bz2 dexon-0x-contracts-8ca9fb0251e72d79a33c760ffd9a27f501748d27.tar.lz dexon-0x-contracts-8ca9fb0251e72d79a33c760ffd9a27f501748d27.tar.xz dexon-0x-contracts-8ca9fb0251e72d79a33c760ffd9a27f501748d27.tar.zst dexon-0x-contracts-8ca9fb0251e72d79a33c760ffd9a27f501748d27.zip |
Add Placeholder component
Diffstat (limited to 'packages/website/ts/components/wallet')
-rw-r--r-- | packages/website/ts/components/wallet/wallet.tsx | 62 |
1 files changed, 48 insertions, 14 deletions
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 219854f4a..74f3cc24f 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -23,6 +23,7 @@ import firstBy = require('thenby'); import { Blockchain } from 'ts/blockchain'; import { AllowanceToggle } from 'ts/components/inputs/allowance_toggle'; +import { Container } from 'ts/components/ui/container'; import { IconButton } from 'ts/components/ui/icon_button'; import { Identicon } from 'ts/components/ui/identicon'; import { Island } from 'ts/components/ui/island'; @@ -320,6 +321,7 @@ 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( + true, this.props.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH, constants.ETHER_SYMBOL, @@ -327,6 +329,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { const etherToken = this._getEthToken(); const etherPrice = this.state.trackedTokenStateByAddress[etherToken.address].price; const secondaryText = this._renderValue( + true, this.props.userEtherBalanceInWei, constants.DECIMAL_PLACES_ETH, etherPrice, @@ -354,10 +357,15 @@ export class Wallet extends React.Component<WalletProps, WalletState> { EtherscanLinkSuffixes.Address, ); const icon = <TokenIcon token={token} diameter={ICON_DIMENSION} link={tokenLink} />; - const primaryText = this._renderAmount(tokenState.balance, token.decimals, token.symbol); - const secondaryText = this._renderValue(tokenState.balance, token.decimals, tokenState.price); 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 secondaryText = this._renderValue( + tokenState.isLoaded, + tokenState.balance, + token.decimals, + tokenState.price, + ); const accessoryItemConfig: AccessoryItemConfig = { wrappedEtherDirection, allowanceToggleConfig: { @@ -394,9 +402,9 @@ export class Wallet extends React.Component<WalletProps, WalletState> { <StandardIconRow icon={icon} main={ - <div> + <div className="flex flex-column"> {primaryText} - {secondaryText} + <Container marginTop="3px">{secondaryText}</Container> </div> } accessory={this._renderAccessoryItems(accessoryItemConfig)} @@ -453,21 +461,29 @@ export class Wallet extends React.Component<WalletProps, WalletState> { /> ); } - private _renderAmount(amount: BigNumber, decimals: number, symbol: string): React.ReactNode { + private _renderAmount(isLoaded: boolean, amount: BigNumber, decimals: number, symbol: string): React.ReactNode { const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); const formattedAmount = unitAmount.toPrecision(TOKEN_AMOUNT_DISPLAY_PRECISION); const result = `${formattedAmount} ${symbol}`; - return <div style={styles.amountLabel}>{result}</div>; + return ( + <PlaceHolder hideChildren={!isLoaded}> + <div style={styles.amountLabel}>{result}</div> + </PlaceHolder> + ); } - private _renderValue(amount: BigNumber, decimals: number, price?: BigNumber): React.ReactNode { - if (_.isUndefined(price)) { - return null; + private _renderValue(isLoaded: boolean, amount: BigNumber, decimals: number, price?: BigNumber): React.ReactNode { + let result = '$00.00'; + if (!_.isUndefined(price) && isLoaded) { + const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); + const value = unitAmount.mul(price); + const formattedAmount = value.toFixed(USD_DECIMAL_PLACES); + result = `$${formattedAmount}`; } - const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); - const value = unitAmount.mul(price); - const formattedAmount = value.toFixed(USD_DECIMAL_PLACES); - const result = `$${formattedAmount}`; - return <div style={styles.valueLabel}>{result}</div>; + return ( + <PlaceHolder hideChildren={!isLoaded}> + <div style={styles.valueLabel}>{result}</div> + </PlaceHolder> + ); } private _renderWrappedEtherButton(wrappedEtherDirection: Side): React.ReactNode { const isWrappedEtherDirectionOpen = this.state.wrappedEtherDirection === wrappedEtherDirection; @@ -602,4 +618,22 @@ const StandardIconRow = (props: StandardIconRowProps) => { </div> ); }; +interface PlaceHolderProps { + hideChildren: React.ReactNode; + children?: React.ReactNode; +} +const PlaceHolder = (props: PlaceHolderProps) => { + const rootBackgroundColor = props.hideChildren ? colors.lightGrey : 'transparent'; + const rootStyle: React.CSSProperties = { + backgroundColor: rootBackgroundColor, + display: 'inline-block', + }; + const childrenVisibility = props.hideChildren ? 'hidden' : 'visible'; + const childrenStyle: React.CSSProperties = { visibility: childrenVisibility }; + return ( + <div style={rootStyle}> + <div style={childrenStyle}>{props.children}</div> + </div> + ); +}; // tslint:disable:max-file-line-count |