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
89
90
91
92
93
94
95
96
97
98
99
100
|
import { Styles } from '@0xproject/react-shared';
import FlatButton from 'material-ui/FlatButton';
import * as React from 'react';
import { colors } from 'ts/style/colors';
import { BrowserType, ProviderType } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { utils } from 'ts/utils/utils';
export interface WalletDisconnectedItemProps {
providerType: ProviderType;
injectedProviderName: string;
onToggleLedgerDialog: () => void;
}
const styles: Styles = {
button: {
border: colors.walletBorder,
borderStyle: 'solid',
borderWidth: 1,
height: 80,
},
hrefAdjustment: {
paddingTop: 20, // HACK: For some reason when we set the href prop of a FlatButton material-ui reduces the top padding
},
otherWalletText: {
fontSize: 14,
color: colors.grey500,
textDecoration: 'underline',
},
};
const ITEM_HEIGHT = 381;
const METAMASK_ICON_WIDTH = 35;
const LEDGER_ICON_WIDTH = 30;
const BUTTON_BOTTOM_PADDING = 80;
export const WalletDisconnectedItem: React.StatelessComponent<WalletDisconnectedItemProps> = (
props: WalletDisconnectedItemProps,
) => {
const isExternallyInjectedProvider = utils.isExternallyInjected(props.providerType, props.injectedProviderName);
return (
<div className="flex flex-center">
<div className="mx-auto">
<div className="table" style={{ height: ITEM_HEIGHT }}>
<div className="table-cell align-middle">
<ProviderButton isExternallyInjectedProvider={isExternallyInjectedProvider} />
<div className="flex flex-center py2" style={{ paddingBottom: BUTTON_BOTTOM_PADDING }}>
<div className="mx-auto">
<div onClick={props.onToggleLedgerDialog} style={{ cursor: 'pointer' }}>
<img src="/images/ledger_icon.png" style={{ width: LEDGER_ICON_WIDTH }} />
<span className="px1" style={styles.otherWalletText}>
user other wallet
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
interface ProviderButtonProps {
isExternallyInjectedProvider: boolean;
}
const ProviderButton: React.StatelessComponent<ProviderButtonProps> = (props: ProviderButtonProps) => {
const browserType = utils.getBrowserType();
let extensionLink;
if (!props.isExternallyInjectedProvider) {
switch (browserType) {
case BrowserType.Chrome:
extensionLink = constants.URL_METAMASK_CHROME_STORE;
break;
case BrowserType.Firefox:
extensionLink = constants.URL_METAMASK_FIREFOX_STORE;
break;
case BrowserType.Opera:
extensionLink = constants.URL_METAMASK_OPERA_STORE;
break;
default:
extensionLink = constants.URL_METAMASK_HOMEPAGE;
}
}
return (
<FlatButton
label={props.isExternallyInjectedProvider ? 'Please unlock account' : 'Get Metamask Wallet Extension'}
labelStyle={{ color: colors.black }}
labelPosition="after"
primary={true}
icon={<img src="/images/metamask_icon.png" width={METAMASK_ICON_WIDTH.toString()} />}
style={props.isExternallyInjectedProvider ? styles.button : { ...styles.button, ...styles.hrefAdjustment }}
href={extensionLink}
target={props.isExternallyInjectedProvider ? undefined : '_blank'}
disabled={props.isExternallyInjectedProvider}
/>
);
};
|
