diff options
author | Fabio Berger <me@fabioberger.com> | 2018-01-29 17:44:30 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-01-29 17:44:30 +0800 |
commit | 3c3f9ca85b1429821138840b6074503e58fab7e1 (patch) | |
tree | 09af836fd9b4603d5ead775a82e29073d9b9c9a0 /packages/website/ts/components/top_bar/provider_picker.tsx | |
parent | 005a02efeb5ac874e1c1a4dd6679bfa3cc21b1b1 (diff) | |
download | dexon-sol-tools-3c3f9ca85b1429821138840b6074503e58fab7e1.tar dexon-sol-tools-3c3f9ca85b1429821138840b6074503e58fab7e1.tar.gz dexon-sol-tools-3c3f9ca85b1429821138840b6074503e58fab7e1.tar.bz2 dexon-sol-tools-3c3f9ca85b1429821138840b6074503e58fab7e1.tar.lz dexon-sol-tools-3c3f9ca85b1429821138840b6074503e58fab7e1.tar.xz dexon-sol-tools-3c3f9ca85b1429821138840b6074503e58fab7e1.tar.zst dexon-sol-tools-3c3f9ca85b1429821138840b6074503e58fab7e1.zip |
Add network name to the select provider
Diffstat (limited to 'packages/website/ts/components/top_bar/provider_picker.tsx')
-rw-r--r-- | packages/website/ts/components/top_bar/provider_picker.tsx | 27 |
1 files changed, 15 insertions, 12 deletions
diff --git a/packages/website/ts/components/top_bar/provider_picker.tsx b/packages/website/ts/components/top_bar/provider_picker.tsx index 418f8696b..4dc8ff0bd 100644 --- a/packages/website/ts/components/top_bar/provider_picker.tsx +++ b/packages/website/ts/components/top_bar/provider_picker.tsx @@ -34,12 +34,6 @@ export class ProviderPicker extends React.Component<ProviderPickerProps, Provide 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' }}> @@ -51,29 +45,38 @@ export class ProviderPicker extends React.Component<ProviderPickerProps, Provide <RadioButton style={{ ...menuStyle, backgroundColor: !isLedgerSelected && SELECTED_BG_COLOR }} value={ProviderType.Injected} - label={injectedLabel} + label={this._renderLabel(this.props.injectedProviderName, !isLedgerSelected)} /> <RadioButton style={{ ...menuStyle, backgroundColor: isLedgerSelected && SELECTED_BG_COLOR }} value={ProviderType.Ledger} - label="Ledger Nano S" + label={this._renderLabel('Ledger Nano S', isLedgerSelected)} /> </RadioButtonGroup> </div> ); } + private _renderLabel(title: string, shouldShowNetwork: boolean) { + const label = ( + <div className="flex"> + <div style={{ fontSize: 14 }}>{title}</div> + {shouldShowNetwork && this._renderNetwork()} + </div> + ); + return label; + } 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 }}> + <div className="flex" style={{ marginTop: 1 }}> + <div className="relative" style={{ width: 14, paddingLeft: 14 }}> <img src={`/images/network_icons/${networkName.toLowerCase()}.png`} className="absolute" - style={{ top: 4, width: 14 }} + style={{ top: 6, width: 10 }} /> </div> - <div style={{ color: '#BBBBBB' }}>{networkName}</div> + <div style={{ color: '#BBBBBB', fontSize: 11 }}>{networkName}</div> </div> ); } |