aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-05-31 06:20:44 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-06-01 02:54:25 +0800
commitbee26daf0c2497a11dfe944d355c4958329d1f50 (patch)
treebd5d0a632075667f3c420fe2ec67a4788b0483fb
parentb76c7387851585500e4465aeb24e27bd564844a8 (diff)
downloaddexon-0x-contracts-bee26daf0c2497a11dfe944d355c4958329d1f50.tar.gz
dexon-0x-contracts-bee26daf0c2497a11dfe944d355c4958329d1f50.tar.zst
dexon-0x-contracts-bee26daf0c2497a11dfe944d355c4958329d1f50.zip
Add loading state to ProviderDisplay
-rw-r--r--packages/website/ts/components/top_bar/provider_display.tsx36
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx25
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)} />