diff options
author | Fabio Berger <me@fabioberger.com> | 2018-07-02 17:12:01 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-07-02 17:12:01 +0800 |
commit | de9f0732a09893f035ce8a7e8e01fa1141882a3a (patch) | |
tree | 63d1f0bbc6f9d65576e5d12b379378700eb88567 /packages/website/ts/components/top_bar/provider_display.tsx | |
parent | 20acdbf6c3ba6a62e87a9a496021cb6482c0c03a (diff) | |
parent | b9b00e10d39c3c84bc72892ef37f1313e904414d (diff) | |
download | dexon-sol-tools-de9f0732a09893f035ce8a7e8e01fa1141882a3a.tar dexon-sol-tools-de9f0732a09893f035ce8a7e8e01fa1141882a3a.tar.gz dexon-sol-tools-de9f0732a09893f035ce8a7e8e01fa1141882a3a.tar.bz2 dexon-sol-tools-de9f0732a09893f035ce8a7e8e01fa1141882a3a.tar.lz dexon-sol-tools-de9f0732a09893f035ce8a7e8e01fa1141882a3a.tar.xz dexon-sol-tools-de9f0732a09893f035ce8a7e8e01fa1141882a3a.tar.zst dexon-sol-tools-de9f0732a09893f035ce8a7e8e01fa1141882a3a.zip |
Merge branch 'v2-prototype' into fix/five_decimal_scenario
* v2-prototype: (75 commits)
Update relayer grid tiles to use Text
Fix build
Update file structure
Update 2.0.0 artifacts
Move ledgerhq module declarations to typescript-typings
Export LedgerEthereumClient type in subproviders
Update artifacts
Add logging and updated artifacts
Fix migrations
Run prettier
Add Kovan artifacts
Use ledger subprovider
Add Kovan migrations
Remove state variable from Link component in Portal
Make registerAssetProxy append only
Update staging api link
Change getTransactionReceipt to awaitTransactionMined
Move /docs route to the end
Remove extra call to scrollIntoView for wallet in onboarding
Update expectRevertReasonOrAlwaysFailingTransactionAsync to check status codes
...
Diffstat (limited to 'packages/website/ts/components/top_bar/provider_display.tsx')
-rw-r--r-- | packages/website/ts/components/top_bar/provider_display.tsx | 100 |
1 files changed, 70 insertions, 30 deletions
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 496e5cae0..8743e4320 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -2,19 +2,21 @@ import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import RaisedButton from 'material-ui/RaisedButton'; +import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; +import Lock from 'material-ui/svg-icons/action/lock'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; import { ProviderPicker } from 'ts/components/top_bar/provider_picker'; +import { AccountConnection } from 'ts/components/ui/account_connection'; import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; import { Identicon } from 'ts/components/ui/identicon'; -import { Image } from 'ts/components/ui/image'; import { Island } from 'ts/components/ui/island'; import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; -import { ProviderType } from 'ts/types'; +import { AccountState, ProviderType } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; @@ -46,37 +48,13 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi this.props.providerType, this.props.injectedProviderName, ); - const displayMessage = utils.getReadableAccountState( - this._isBlockchainReady(), - this.props.providerType, - this.props.injectedProviderName, - this.props.userAddress, - ); - // 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 - ? this.props.injectedProviderName - : 'Connect a wallet'; - const providerTitle = - this.props.providerType === ProviderType.Injected ? injectedProviderName : 'Ledger Nano S'; - const isProviderMetamask = providerTitle === constants.PROVIDER_NAME_METAMASK; const hoverActiveNode = ( - <Island className="flex items-center p1" style={styles.root}> - <div> - {this._isBlockchainReady() ? ( - <Identicon address={this.props.userAddress} diameter={ROOT_HEIGHT} /> - ) : ( - <CircularProgress size={ROOT_HEIGHT} thickness={2} /> - )} - </div> + <Island className="flex items-center py1 px2" style={styles.root}> + {this._renderIcon()} <Container marginLeft="12px" marginRight="12px"> - <Text fontSize="14px" fontColor={colors.darkGrey}> - {displayMessage} - </Text> + {this._renderDisplayMessage()} </Container> - {isProviderMetamask && ( - <Image src="/images/metamask_icon.png" height={ROOT_HEIGHT} width={ROOT_HEIGHT} /> - )} + {this._renderInjectedProvider()} </Island> ); const hasLedgerProvider = this.props.providerType === ProviderType.Ledger; @@ -168,7 +146,69 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi ); } } + private _renderIcon(): React.ReactNode { + const accountState = this._getAccountState(); + switch (accountState) { + case AccountState.Ready: + return <Identicon address={this.props.userAddress} diameter={ROOT_HEIGHT} />; + case AccountState.Loading: + return <CircularProgress size={ROOT_HEIGHT} thickness={2} />; + case AccountState.Locked: + return <Lock color={colors.black} />; + case AccountState.Disconnected: + return <ActionAccountBalanceWallet color={colors.mediumBlue} />; + default: + return null; + } + } + private _renderDisplayMessage(): React.ReactNode { + const accountState = this._getAccountState(); + const displayMessage = utils.getReadableAccountState(accountState, this.props.userAddress); + const fontColor = this._getDisplayMessageFontColor(); + return ( + <Text fontSize="16px" fontColor={fontColor} fontWeight={500}> + {displayMessage} + </Text> + ); + } + private _getDisplayMessageFontColor(): string { + const accountState = this._getAccountState(); + switch (accountState) { + case AccountState.Loading: + return colors.darkGrey; + case AccountState.Ready: + case AccountState.Locked: + case AccountState.Disconnected: + default: + return colors.black; + } + } + private _renderInjectedProvider(): React.ReactNode { + const accountState = this._getAccountState(); + switch (accountState) { + case AccountState.Ready: + case AccountState.Locked: + return ( + <AccountConnection + accountState={accountState} + injectedProviderName={this.props.injectedProviderName} + /> + ); + case AccountState.Disconnected: + case AccountState.Loading: + default: + return null; + } + } private _isBlockchainReady(): boolean { return this.props.blockchainIsLoaded && !_.isUndefined(this.props.blockchain); } + private _getAccountState(): AccountState { + return utils.getAccountState( + this._isBlockchainReady(), + this.props.providerType, + this.props.injectedProviderName, + this.props.userAddress, + ); + } } |