import * as _ from 'lodash'; import Menu from 'material-ui/Menu'; import MenuItem from 'material-ui/MenuItem'; import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; import { Link } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { ProviderPicker } from 'ts/components/top_bar/provider_picker'; import { DropDown } from 'ts/components/ui/drop_down'; import { Identicon } from 'ts/components/ui/identicon'; import { Dispatcher } from 'ts/redux/dispatcher'; import { ProviderType } from 'ts/types'; import { colors } from 'ts/utils/colors'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; const IDENTICON_DIAMETER = 32; interface ProviderDisplayProps { dispatcher: Dispatcher; userAddress: string; networkId: number; injectedProviderName: string; providerType: ProviderType; onToggleLedgerDialog: () => void; blockchain: Blockchain; } interface ProviderDisplayState {} export class ProviderDisplay extends React.Component { public render() { const isAddressAvailable = !_.isEmpty(this.props.userAddress); const isExternallyInjectedProvider = ProviderType.Injected && this.props.injectedProviderName !== '0x Public'; const displayAddress = isAddressAvailable ? utils.getAddressBeginAndEnd(this.props.userAddress) : isExternallyInjectedProvider ? 'Account locked' : '0x0000...0000'; // 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 hoverActiveNode = (
{providerTitle}
{displayAddress}
); const hasInjectedProvider = this.props.injectedProviderName !== '0x Public' && this.props.providerType === ProviderType.Injected; const hasLedgerProvider = this.props.providerType === ProviderType.Ledger; const horizontalPosition = hasInjectedProvider || hasLedgerProvider ? 'left' : 'middle'; return (
); } public renderPopoverContent(hasInjectedProvider: boolean, hasLedgerProvider: boolean) { 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
); } } }