blob: 418f8696b9bb975f85b4af42b261780157cc2f1c (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
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 {
// tslint:disable-next-line:no-floating-promises
this.props.blockchain.updateProviderToInjectedAsync();
}
}
}
|
