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'; import { Blockchain } from 'ts/blockchain'; import { ProviderPicker } from 'ts/components/top_bar/provider_picker'; 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 { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; import { ProviderType } from 'ts/types'; import { constants } from 'ts/utils/constants'; 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, backgroundColor: colors.white, borderRadius: ROOT_HEIGHT, boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`, }, }; export class ProviderDisplay extends React.Component { public render(): React.ReactNode { const isExternallyInjectedProvider = utils.isExternallyInjected( 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 = (
{this._isBlockchainReady() ? ( ) : ( )}
{displayMessage} {isProviderMetamask && ( )}
); const hasLedgerProvider = this.props.providerType === ProviderType.Ledger; const horizontalPosition = isExternallyInjectedProvider || hasLedgerProvider ? 'left' : 'middle'; return (
); } public renderPopoverContent(hasInjectedProvider: boolean, hasLedgerProvider: boolean): React.ReactNode { if (!this._isBlockchainReady()) { return null; } else if (hasInjectedProvider || hasLedgerProvider) { return ( ); } else { // Nothing to connect to, show install/info popover return (
Choose a wallet:
Install a browser wallet
Use{' '} Metamask {' '} or{' '} Parity Signer
or
Connect to a ledger hardware wallet
); } } private _isBlockchainReady(): boolean { return this.props.blockchainIsLoaded && !_.isUndefined(this.props.blockchain); } }