diff options
| -rw-r--r-- | packages/website/ts/components/top_bar/provider_display.tsx | 36 | ||||
| -rw-r--r-- | packages/website/ts/components/top_bar/top_bar.tsx | 25 |
2 files changed, 39 insertions, 22 deletions
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 679ec07dc..8a337119a 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -1,5 +1,6 @@ import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; +import CircularProgress from 'material-ui/CircularProgress'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; @@ -23,7 +24,8 @@ export interface ProviderDisplayProps { injectedProviderName: string; providerType: ProviderType; onToggleLedgerDialog: () => void; - blockchain: Blockchain; + blockchain?: Blockchain; + blockchainIsLoaded: boolean; } interface ProviderDisplayState {} @@ -44,11 +46,18 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi this.props.providerType, this.props.injectedProviderName, ); - const displayAddress = isAddressAvailable - ? utils.getAddressBeginAndEnd(this.props.userAddress) - : isExternallyInjectedProvider - ? 'Account locked' - : '0x0000...0000'; + let displayMessage; + if (!this._isBlockchainReady()) { + displayMessage = 'loading account'; + } else if (isAddressAvailable) { + displayMessage = utils.getAddressBeginAndEnd(this.props.userAddress); + // tslint:disable-next-line: prefer-conditional-expression + } else if (isExternallyInjectedProvider) { + displayMessage = 'Account locked'; + } else { + displayMessage = '0x0000...0000'; + } + // If the "injected" provider is our fallback public node, then we want to // show the "connect a wallet" message instead of the providerName const injectedProviderName = isExternallyInjectedProvider @@ -60,10 +69,14 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi const hoverActiveNode = ( <div className="flex right lg-pr0 md-pr2 sm-pr2 p1" style={styles.root}> <div> - <Identicon address={this.props.userAddress} diameter={ROOT_HEIGHT} /> + {this._isBlockchainReady() ? ( + <Identicon address={this.props.userAddress} diameter={ROOT_HEIGHT} /> + ) : ( + <CircularProgress size={ROOT_HEIGHT} thickness={2} /> + )} </div> <div style={{ marginLeft: 12, paddingTop: 3 }}> - <div style={{ fontSize: 16, color: colors.darkGrey }}>{displayAddress}</div> + <div style={{ fontSize: 16, color: colors.darkGrey }}>{displayMessage}</div> </div> {isProviderMetamask && ( <div style={{ marginLeft: 16 }}> @@ -87,7 +100,9 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi ); } public renderPopoverContent(hasInjectedProvider: boolean, hasLedgerProvider: boolean): React.ReactNode { - if (hasInjectedProvider || hasLedgerProvider) { + if (!this._isBlockchainReady()) { + return null; + } else if (hasInjectedProvider || hasLedgerProvider) { return ( <ProviderPicker dispatcher={this.props.dispatcher} @@ -159,4 +174,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi ); } } + private _isBlockchainReady(): boolean { + return this.props.blockchainIsLoaded && !_.isUndefined(this.props.blockchain); + } } diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx index db8e3cb82..0855d2584 100644 --- a/packages/website/ts/components/top_bar/top_bar.tsx +++ b/packages/website/ts/components/top_bar/top_bar.tsx @@ -261,19 +261,18 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> { </div> </div> )} - {this.props.blockchainIsLoaded && ( - <div className="sm-hide xs-hide col col-5" style={{ paddingTop: 8, marginRight: 36 }}> - <ProviderDisplay - dispatcher={this.props.dispatcher} - userAddress={this.props.userAddress} - networkId={this.props.networkId} - injectedProviderName={this.props.injectedProviderName} - providerType={this.props.providerType} - onToggleLedgerDialog={this.props.onToggleLedgerDialog} - blockchain={this.props.blockchain} - /> - </div> - )} + <div className="sm-hide xs-hide col col-5" style={{ paddingTop: 8, marginRight: 36 }}> + <ProviderDisplay + dispatcher={this.props.dispatcher} + userAddress={this.props.userAddress} + networkId={this.props.networkId} + injectedProviderName={this.props.injectedProviderName} + providerType={this.props.providerType} + onToggleLedgerDialog={this.props.onToggleLedgerDialog} + blockchain={this.props.blockchain} + blockchainIsLoaded={this.props.blockchainIsLoaded} + /> + </div> <div className={`col ${isExpandedDisplayType ? 'col-2 pl2' : 'col-1'} md-hide lg-hide`}> <div style={menuIconStyle}> <i className="zmdi zmdi-menu" onClick={this._onMenuButtonClick.bind(this)} /> |