diff options
Diffstat (limited to 'packages/website/ts/components/top_bar/provider_picker.tsx')
-rw-r--r-- | packages/website/ts/components/top_bar/provider_picker.tsx | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/packages/website/ts/components/top_bar/provider_picker.tsx b/packages/website/ts/components/top_bar/provider_picker.tsx new file mode 100644 index 000000000..ca98d8d05 --- /dev/null +++ b/packages/website/ts/components/top_bar/provider_picker.tsx @@ -0,0 +1,88 @@ +import * as _ from 'lodash'; +import Menu from 'material-ui/Menu'; +import MenuItem from 'material-ui/MenuItem'; +import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton'; +import * as React from 'react'; +import { Link } from 'react-router-dom'; +import { Blockchain } from 'ts/blockchain'; +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 { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; + +const IDENTICON_DIAMETER = 32; +const SELECTED_BG_COLOR = '#F7F7F7'; + +interface ProviderPickerProps { + networkId: number; + injectedProviderName: string; + providerType: ProviderType; + onToggleLedgerDialog: () => void; + dispatcher: Dispatcher; + blockchain: Blockchain; +} + +interface ProviderPickerState {} + +export class ProviderPicker extends React.Component<ProviderPickerProps, ProviderPickerState> { + public render() { + const isLedgerSelected = this.props.providerType === ProviderType.Ledger; + const menuStyle = { + padding: 10, + paddingTop: 15, + paddingBottom: 15, + }; + const injectedLabel = ( + <div className="flex"> + <div>{this.props.injectedProviderName}</div> + {this._renderNetwork()} + </div> + ); + // Show dropdown with two options + return ( + <div style={{ width: 225, overflow: 'hidden' }}> + <RadioButtonGroup + name="provider" + defaultSelected={this.props.providerType} + onChange={this._onProviderRadioChanged.bind(this)} + > + <RadioButton + style={{ ...menuStyle, backgroundColor: !isLedgerSelected && SELECTED_BG_COLOR }} + value={ProviderType.Injected} + label={injectedLabel} + /> + <RadioButton + style={{ ...menuStyle, backgroundColor: isLedgerSelected && SELECTED_BG_COLOR }} + value={ProviderType.Ledger} + label="Ledger Nano S" + /> + </RadioButtonGroup> + </div> + ); + } + private _renderNetwork() { + const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId]; + return ( + <div className="flex"> + <div className="pr1 relative" style={{ width: 14, paddingLeft: 14 }}> + <img + src={`/images/network_icons/${networkName.toLowerCase()}.png`} + className="absolute" + style={{ top: 4, width: 14 }} + /> + </div> + <div style={{ color: '#BBBBBB' }}>{networkName}</div> + </div> + ); + } + private _onProviderRadioChanged(e: any, value: string) { + if (value === ProviderType.Ledger) { + this.props.onToggleLedgerDialog(); + } else { + // Fire and forget + this.props.blockchain.updateProviderToInjectedAsync(); + } + } +} |