diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-07-01 04:51:40 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-07-02 05:50:55 +0800 |
commit | be64184cfa11dcabd543161b5d7a6726d4e7924d (patch) | |
tree | 640b4b75205de77acd05e5d3b0c3d8ca102e7cf1 /packages/website/ts/components/top_bar/provider_display.tsx | |
parent | 3031598843080ff4fabb7bfb0ba823be6d545285 (diff) | |
download | dexon-sol-tools-be64184cfa11dcabd543161b5d7a6726d4e7924d.tar dexon-sol-tools-be64184cfa11dcabd543161b5d7a6726d4e7924d.tar.gz dexon-sol-tools-be64184cfa11dcabd543161b5d7a6726d4e7924d.tar.bz2 dexon-sol-tools-be64184cfa11dcabd543161b5d7a6726d4e7924d.tar.lz dexon-sol-tools-be64184cfa11dcabd543161b5d7a6726d4e7924d.tar.xz dexon-sol-tools-be64184cfa11dcabd543161b5d7a6726d4e7924d.tar.zst dexon-sol-tools-be64184cfa11dcabd543161b5d7a6726d4e7924d.zip |
Clean up a bit of the provider display logic
Diffstat (limited to 'packages/website/ts/components/top_bar/provider_display.tsx')
-rw-r--r-- | packages/website/ts/components/top_bar/provider_display.tsx | 92 |
1 files changed, 20 insertions, 72 deletions
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 8743e4320..18afee4ea 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -7,6 +7,7 @@ import Lock from 'material-ui/svg-icons/action/lock'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; +import { InstallPrompt } from 'ts/components/top_bar/install_prompt'; import { ProviderPicker } from 'ts/components/top_bar/provider_picker'; import { AccountConnection } from 'ts/components/ui/account_connection'; import { Container } from 'ts/components/ui/container'; @@ -72,78 +73,25 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi ); } public renderPopoverContent(hasInjectedProvider: boolean, hasLedgerProvider: boolean): React.ReactNode { - if (!this._isBlockchainReady()) { - return null; - } else if (hasInjectedProvider || hasLedgerProvider) { - return ( - <ProviderPicker - dispatcher={this.props.dispatcher} - networkId={this.props.networkId} - injectedProviderName={this.props.injectedProviderName} - providerType={this.props.providerType} - onToggleLedgerDialog={this.props.onToggleLedgerDialog} - blockchain={this.props.blockchain} - /> - ); - } else { - // Nothing to connect to, show install/info popover - return ( - <div className="px2" style={{ maxWidth: 420 }}> - <div className="center h4 py2" style={{ color: colors.grey700 }}> - Choose a wallet: - </div> - <div className="flex pb3"> - <div className="center px2"> - <div style={{ color: colors.darkGrey }}>Install a browser wallet</div> - <div className="py2"> - <img src="/images/metamask_or_parity.png" width="135" /> - </div> - <div> - Use{' '} - <a - href={constants.URL_METAMASK_CHROME_STORE} - target="_blank" - style={{ color: colors.lightBlueA700 }} - > - Metamask - </a>{' '} - or{' '} - <a - href={constants.URL_PARITY_CHROME_STORE} - target="_blank" - style={{ color: colors.lightBlueA700 }} - > - Parity Signer - </a> - </div> - </div> - <div> - <div - className="pl1 ml1" - style={{ borderLeft: `1px solid ${colors.grey300}`, height: 65 }} - /> - <div className="py1">or</div> - <div - className="pl1 ml1" - style={{ borderLeft: `1px solid ${colors.grey300}`, height: 68 }} - /> - </div> - <div className="px2 center"> - <div style={{ color: colors.darkGrey }}>Connect to a ledger hardware wallet</div> - <div style={{ paddingTop: 21, paddingBottom: 29 }}> - <img src="/images/ledger_icon.png" style={{ width: 80 }} /> - </div> - <div> - <RaisedButton - style={{ width: '100%' }} - label="Use Ledger" - onClick={this.props.onToggleLedgerDialog} - /> - </div> - </div> - </div> - </div> - ); + const accountState = this._getAccountState(); + switch (accountState) { + case AccountState.Ready: + case AccountState.Locked: + return ( + <ProviderPicker + dispatcher={this.props.dispatcher} + networkId={this.props.networkId} + injectedProviderName={this.props.injectedProviderName} + providerType={this.props.providerType} + onToggleLedgerDialog={this.props.onToggleLedgerDialog} + blockchain={this.props.blockchain} + /> + ); + case AccountState.Disconnected: + return <InstallPrompt onToggleLedgerDialog={this.props.onToggleLedgerDialog} />; + case AccountState.Loading: + default: + return null; } } private _renderIcon(): React.ReactNode { |