diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-06-27 06:01:20 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-06-29 02:50:08 +0800 |
commit | f76c9bc2263b81ab895d3ddec1afa2c3f901b32a (patch) | |
tree | 6106ad1aed8e164ac942c8c2b7fdec34fd00e6f0 /packages/website/ts/components/wallet | |
parent | 6a39a69afeed7b0737cff70b4d3314e668b67308 (diff) | |
download | dexon-0x-contracts-f76c9bc2263b81ab895d3ddec1afa2c3f901b32a.tar dexon-0x-contracts-f76c9bc2263b81ab895d3ddec1afa2c3f901b32a.tar.gz dexon-0x-contracts-f76c9bc2263b81ab895d3ddec1afa2c3f901b32a.tar.bz2 dexon-0x-contracts-f76c9bc2263b81ab895d3ddec1afa2c3f901b32a.tar.lz dexon-0x-contracts-f76c9bc2263b81ab895d3ddec1afa2c3f901b32a.tar.xz dexon-0x-contracts-f76c9bc2263b81ab895d3ddec1afa2c3f901b32a.tar.zst dexon-0x-contracts-f76c9bc2263b81ab895d3ddec1afa2c3f901b32a.zip |
Implement loading body rows
Diffstat (limited to 'packages/website/ts/components/wallet')
-rw-r--r-- | packages/website/ts/components/wallet/wallet.tsx | 101 |
1 files changed, 77 insertions, 24 deletions
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 785b2da88..9f3266cc9 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -19,10 +19,12 @@ import { Link } from 'react-router-dom'; import firstBy = require('thenby'); import { Blockchain } from 'ts/blockchain'; +import { Circle } from 'ts/components/ui/circle'; 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'; +import { Text } from 'ts/components/ui/text'; import { TokenIcon } from 'ts/components/ui/token_icon'; import { WalletDisconnectedItem } from 'ts/components/wallet/wallet_disconnected_item'; import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item'; @@ -123,9 +125,6 @@ const styles: Styles = { color: colors.mediumBlue, fontWeight: 'bold', }, - loadingBody: { - height: 381, - }, }; const ETHER_ICON_PATH = '/images/ether.png'; @@ -138,6 +137,8 @@ const ETHER_ITEM_KEY = 'ETHER'; const USD_DECIMAL_PLACES = 2; const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56; const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`; +const PLACEHOLDER_COLOR = colors.grey300; +const LOADING_ROWS_COUNT = 5; const ActionButton = styled(FloatingActionButton)` button { @@ -178,31 +179,49 @@ export class Wallet extends React.Component<WalletProps, WalletState> { </Island> ); } - private _renderLoadedRows(): React.ReactNode { - const isAddressAvailable = !_.isEmpty(this.props.userAddress); - return isAddressAvailable - ? _.concat(this._renderConnectedHeaderRows(), this._renderBody(), this._renderFooterRows()) - : _.concat(this._renderDisconnectedHeaderRows(), this._renderDisconnectedRows()); - } private _renderLoadingRows(): React.ReactNode { - return _.concat(this._renderDisconnectedHeaderRows(), this._renderLoadingBodyRows()); + return _.concat(this._renderLoadingHeaderRows(), this._renderLoadingBodyRows()); + } + private _renderLoadingHeaderRows(): React.ReactElement<{}> { + return this._renderPlainHeaderRow('Loading...'); } private _renderLoadingBodyRows(): React.ReactElement<{}> { + const bodyStyle = this._getBodyStyle(); + const loadingRowsRange = _.range(LOADING_ROWS_COUNT + 1); return ( - <div key={BODY_ITEM_KEY} className="flex items-center" style={styles.loadingBody}> - <div className="mx-auto"> - <CircularProgress size={40} thickness={5} /> - </div> + <div key={BODY_ITEM_KEY} className="flex flex-column" style={bodyStyle}> + {_.map(loadingRowsRange, index => { + return <NullTokenRow />; + })} </div> ); } + private _renderLoadedRows(): React.ReactNode { + const isAddressAvailable = !_.isEmpty(this.props.userAddress); + return isAddressAvailable + ? _.concat(this._renderConnectedHeaderRows(), this._renderBody()) + : _.concat(this._renderDisconnectedHeaderRows(), this._renderLoadingBodyRows()); + } private _renderDisconnectedHeaderRows(): React.ReactElement<{}> { - const primaryText = 'wallet'; + const isExternallyInjectedProvider = utils.isExternallyInjected( + this.props.providerType, + this.props.injectedProviderName, + ); + const text = isExternallyInjectedProvider ? 'Please unlock MetaMask...' : 'Please connect a wallet...'; + return this._renderPlainHeaderRow(text); + } + private _renderPlainHeaderRow(text: string): React.ReactElement<{}> { return ( <StandardIconRow key={HEADER_ITEM_KEY} - icon={<ActionAccountBalanceWallet color={colors.mediumBlue} />} - main={primaryText.toUpperCase()} + icon={<ActionAccountBalanceWallet color={colors.grey} />} + main={ + <Text fontSize="16px" fontColor={colors.grey}> + {text} + </Text> + // https://github.com/palantir/tslint-react/issues/140 + // tslint:disable-next-line:jsx-curly-spacing + } style={styles.borderedItem} /> ); @@ -231,12 +250,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> { ); } private _renderBody(): React.ReactElement<{}> { - const bodyStyle: React.CSSProperties = { - ...styles.bodyInnerDiv, - overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', - // TODO: make this completely responsive - maxHeight: this.props.screenWidth !== ScreenWidths.Sm ? 475 : undefined, - }; + const bodyStyle = this._getBodyStyle(); return ( <div style={bodyStyle} @@ -249,6 +263,14 @@ export class Wallet extends React.Component<WalletProps, WalletState> { </div> ); } + private _getBodyStyle(): React.CSSProperties { + return { + ...styles.bodyInnerDiv, + overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden', + // TODO: make this completely responsive + maxHeight: this.props.screenWidth !== ScreenWidths.Sm ? 475 : undefined, + }; + } private _onSidebarHover(_event: React.FormEvent<HTMLInputElement>): void { this.setState({ isHoveringSidebar: true, @@ -572,7 +594,7 @@ interface PlaceHolderProps { children?: React.ReactNode; } const PlaceHolder = (props: PlaceHolderProps) => { - const rootBackgroundColor = props.hideChildren ? colors.lightGrey : 'transparent'; + const rootBackgroundColor = props.hideChildren ? PLACEHOLDER_COLOR : 'transparent'; const rootStyle: React.CSSProperties = { backgroundColor: rootBackgroundColor, display: 'inline-block', @@ -586,4 +608,35 @@ const PlaceHolder = (props: PlaceHolderProps) => { </div> ); }; + +const NullTokenRow = () => { + const icon = <Circle diameter={ICON_DIMENSION} fillColor={PLACEHOLDER_COLOR} />; + const main = ( + <div className="flex flex-column"> + <PlaceHolder hideChildren={true}> + <div style={styles.amountLabel}>0.00 XXX</div> + </PlaceHolder> + <Container marginTop="3px"> + <PlaceHolder hideChildren={true}> + <div style={styles.valueLabel}>0.00</div> + </PlaceHolder> + </Container> + </div> + ); + const accessory = ( + <Container marginRight="12px"> + <PlaceHolder hideChildren={true}> + <Container width="20px" height="14px" /> + </PlaceHolder> + </Container> + ); + return ( + <StandardIconRow + icon={icon} + main={main} + accessory={accessory} + style={{ ...styles.tokenItem, ...styles.borderedItem }} + /> + ); +}; // tslint:disable:max-file-line-count |