blob: 21bb2902bdd3d005fdd465157e0798d55b32a705 (
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
133
134
135
136
137
138
139
|
import * as _ from 'lodash';
import * as React from 'react';
import {
COINBASE_WALLET_ANDROID_APP_STORE_URL,
COINBASE_WALLET_IOS_APP_STORE_URL,
COINBASE_WALLET_SITE_URL,
} from '../constants';
import { ColorOption } from '../style/theme';
import { Account, AccountState, Network, OperatingSystem } from '../types';
import { envUtil } from '../util/env';
import { CoinbaseWalletLogo } from './coinbase_wallet_logo';
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';
import { WalletPrompt } from './wallet_prompt';
export interface PaymentMethodProps {
account: Account;
network: Network;
walletName: string;
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>
{this._renderTitleLabel()}
</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 (
<Flex>
<Circle diameter={8} color={circleColor} />
<Container marginLeft="3px">
<Text fontColor={ColorOption.darkGrey} fontSize="12px">
{this.props.walletName}
</Text>
</Container>
</Flex>
);
}
return null;
};
private readonly _renderMainContent = (): React.ReactNode => {
const { account, network } = this.props;
const isMobile = envUtil.isMobileOperatingSystem();
const logo = isMobile ? <CoinbaseWalletLogo width={22} /> : <MetaMaskLogo width={19} height={18} />;
const primaryColor = isMobile ? ColorOption.darkBlue : ColorOption.darkOrange;
const secondaryColor = isMobile ? ColorOption.lightBlue : ColorOption.lightOrange;
const colors = { primaryColor, secondaryColor };
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} />}
{...colors}
>
Please Unlock {this.props.walletName}
</WalletPrompt>
);
case AccountState.None:
return (
<WalletPrompt onClick={this._handleInstallWalletClick} image={logo} {...colors}>
{isMobile ? 'Install Coinbase Wallet' : 'Install MetaMask'}
</WalletPrompt>
);
case AccountState.Ready:
return (
<PaymentMethodDropdown
accountAddress={account.address}
accountEthBalanceInWei={account.ethBalanceInWei}
network={network}
/>
);
}
};
private readonly _handleInstallWalletClick = (): void => {
const isMobile = envUtil.isMobileOperatingSystem();
if (!isMobile) {
this.props.onInstallWalletClick();
return;
}
const operatingSystem = envUtil.getOperatingSystem();
let url = COINBASE_WALLET_SITE_URL;
switch (operatingSystem) {
case OperatingSystem.Android:
url = COINBASE_WALLET_ANDROID_APP_STORE_URL;
break;
case OperatingSystem.iOS:
url = COINBASE_WALLET_IOS_APP_STORE_URL;
break;
default:
break;
}
window.open(url, '_blank');
};
}
|
