diff options
Diffstat (limited to 'packages/website/ts/components')
3 files changed, 80 insertions, 73 deletions
diff --git a/packages/website/ts/components/top_bar/install_prompt.tsx b/packages/website/ts/components/top_bar/install_prompt.tsx new file mode 100644 index 000000000..8d1a9c48a --- /dev/null +++ b/packages/website/ts/components/top_bar/install_prompt.tsx @@ -0,0 +1,59 @@ +import RaisedButton from 'material-ui/RaisedButton'; +import * as React from 'react'; + +import { colors } from 'ts/style/colors'; +import { constants } from 'ts/utils/constants'; + +export interface InstallPromptProps { + onToggleLedgerDialog: () => void; +} + +export const InstallPrompt: React.StatelessComponent<InstallPromptProps> = ({ onToggleLedgerDialog }) => { + 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={onToggleLedgerDialog} /> + </div> + </div> + </div> + </div> + ); +}; 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 { diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx index 22cb942f8..7d900d685 100644 --- a/packages/website/ts/components/ui/drop_down.tsx +++ b/packages/website/ts/components/ui/drop_down.tsx @@ -66,7 +66,7 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> { targetOrigin={this.props.targetOrigin} onRequestClose={this._closePopover.bind(this)} useLayerForClickAway={false} - animation={PopoverAnimationVertical} + animated={false} zDepth={this.props.zDepth} > <div onMouseEnter={this._onHover.bind(this)} onMouseLeave={this._onHoverOff.bind(this)}> |