blob: 8d1a9c48a1d74d9c1517e65dcedf0ba60a78899c (
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
|
import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
import { colors } from 'ts/style/colors';
import { constants } from 'ts/utils/constants';
export interface InstallPromptProps {
onToggleLedgerDialog: () => void;
}
export const InstallPrompt: React.StatelessComponent<InstallPromptProps> = ({ onToggleLedgerDialog }) => {
return (
<div className="px2" style={{ maxWidth: 420 }}>
<div className="center h4 py2" style={{ color: colors.grey700 }}>
Choose a wallet:
</div>
<div className="flex pb3">
<div className="center px2">
<div style={{ color: colors.darkGrey }}>Install a browser wallet</div>
<div className="py2">
<img src="/images/metamask_or_parity.png" width="135" />
</div>
<div>
Use
<a
href={constants.URL_METAMASK_CHROME_STORE}
target="_blank"
style={{ color: colors.lightBlueA700 }}
>
Metamask
</a>
or
<a
href={constants.URL_PARITY_CHROME_STORE}
target="_blank"
style={{ color: colors.lightBlueA700 }}
>
Parity Signer
</a>
</div>
</div>
<div>
<div className="pl1 ml1" style={{ borderLeft: `1px solid ${colors.grey300}`, height: 65 }} />
<div className="py1">or</div>
<div className="pl1 ml1" style={{ borderLeft: `1px solid ${colors.grey300}`, height: 68 }} />
</div>
<div className="px2 center">
<div style={{ color: colors.darkGrey }}>Connect to a ledger hardware wallet</div>
<div style={{ paddingTop: 21, paddingBottom: 29 }}>
<img src="/images/ledger_icon.png" style={{ width: 80 }} />
</div>
<div>
<RaisedButton style={{ width: '100%' }} label="Use Ledger" onClick={onToggleLedgerDialog} />
</div>
</div>
</div>
</div>
);
};
|
