import { Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import CircularProgress from 'material-ui/CircularProgress'; import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import * as React from 'react'; import { Blockchain } from 'ts/blockchain'; 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 { CopyAddressSimpleMenuItem, DifferentWalletSimpleMenuItem, GoToAccountManagementSimpleMenuItem, SimpleMenu, } from 'ts/components/ui/simple_menu'; import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; import { AccountState, ProviderType } from 'ts/types'; import { utils } from 'ts/utils/utils'; const ROOT_HEIGHT = 24; export interface ProviderDisplayProps { dispatcher: Dispatcher; userAddress: string; networkId: number; injectedProviderName: string; providerType: ProviderType; onToggleLedgerDialog: () => void; blockchain?: Blockchain; blockchainIsLoaded: boolean; } interface ProviderDisplayState {} const styles: Styles = { root: { height: ROOT_HEIGHT, borderRadius: ROOT_HEIGHT, }, }; export class ProviderDisplay extends React.Component { public render(): React.ReactNode { const activeNode = ( {this._renderIcon()} {this._renderDisplayMessage()} {this._renderInjectedProvider()} ); return (
); } private _renderPopoverContent(): React.ReactNode { const accountState = this._getAccountState(); switch (accountState) { case AccountState.Ready: return ( ); case AccountState.Disconnected: case AccountState.Locked: case AccountState.Loading: default: return null; } } private _renderIcon(): React.ReactNode { const accountState = this._getAccountState(); switch (accountState) { case AccountState.Ready: return ; case AccountState.Loading: return ; case AccountState.Locked: return ; case AccountState.Disconnected: return ; default: return null; } } private _renderDisplayMessage(): React.ReactNode { const accountState = this._getAccountState(); const displayMessage = utils.getReadableAccountState(accountState, this.props.userAddress); const fontColor = this._getDisplayMessageFontColor(); return ( {displayMessage} ); } 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 ( ); 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, ); } }