blob: 49ec221646f546c2e686a3673149ac63c4c43c72 (
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
import * as _ from 'lodash';
import * as React from 'react';
import { ColorOption } from '../style/theme';
import { Account, AccountState, Network } from '../types';
import { MetaMaskLogo } from './meta_mask_logo';
import { PaymentMethodDropdown } from './payment_method_dropdown';
import { Circle } from './ui/circle';
import { Container } from './ui/container';
import { Flex } from './ui/flex';
import { Icon } from './ui/icon';
import { Text } from './ui/text';
export interface PaymentMethodProps {
account: Account;
network: Network;
onInstallWalletClick: () => void;
onUnlockWalletClick: () => void;
}
export class PaymentMethod extends React.Component<PaymentMethodProps> {
public render(): React.ReactNode {
return (
<Container padding="20px" width="100%">
<Container marginBottom="12px">
<Flex justify="space-between">
<Text
letterSpacing="1px"
fontColor={ColorOption.primaryColor}
fontWeight={600}
textTransform="uppercase"
fontSize="14px"
>
{this._renderTitleText()}
</Text>
<Flex>{this._renderTitleLabel()}</Flex>
</Flex>
</Container>
{this._renderMainContent()}
</Container>
);
}
private readonly _renderTitleText = (): string => {
const { account } = this.props;
switch (account.state) {
case AccountState.Loading:
return 'loading...';
case AccountState.Locked:
case AccountState.None:
return 'connect your wallet';
case AccountState.Ready:
return 'payment method';
}
};
private readonly _renderTitleLabel = (): React.ReactNode => {
const { account } = this.props;
if (account.state === AccountState.Ready || account.state === AccountState.Locked) {
const circleColor: ColorOption = account.state === AccountState.Ready ? ColorOption.green : ColorOption.red;
return (
<React.Fragment>
<Circle diameter={8} color={circleColor} />
<Container marginLeft="3px">
<Text fontColor={ColorOption.darkGrey} fontSize="12px">
MetaMask
</Text>
</Container>
</React.Fragment>
);
}
return null;
};
private readonly _renderMainContent = (): React.ReactNode => {
const { account, network } = this.props;
switch (account.state) {
case AccountState.Loading:
// Just take up the same amount of space as the other states.
return <Container height="52px" />;
case AccountState.Locked:
return (
<WalletPrompt
onClick={this.props.onUnlockWalletClick}
image={<Icon width={13} icon="lock" color={ColorOption.black} />}
>
Please Unlock MetaMask
</WalletPrompt>
);
case AccountState.None:
return (
<WalletPrompt
onClick={this.props.onInstallWalletClick}
image={<MetaMaskLogo width={19} height={18} />}
>
Install MetaMask
</WalletPrompt>
);
case AccountState.Ready:
return (
<PaymentMethodDropdown
accountAddress={account.address}
accountEthBalanceInWei={account.ethBalanceInWei}
network={network}
/>
);
}
};
}
interface WalletPromptProps {
image: React.ReactNode;
onClick?: () => void;
}
const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({ onClick, image, children }) => (
<Container
padding="14.5px"
border={`1px solid ${ColorOption.darkOrange}`}
backgroundColor={ColorOption.lightOrange}
width="100%"
borderRadius="4px"
onClick={onClick}
cursor={onClick ? 'pointer' : undefined}
boxShadowOnHover={!!onClick}
>
<Flex>
<Container marginRight="10px">{image}</Container>
<Text fontSize="16px" fontColor={ColorOption.darkOrange}>
{children}
</Text>
</Flex>
</Container>
);
|
