-
Notifications
You must be signed in to change notification settings - Fork 0
/
wallet.tsx
151 lines (143 loc) · 3.47 KB
/
wallet.tsx
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
140
141
142
143
144
145
146
147
148
149
150
151
import { useChain } from '@cosmos-kit/react';
import {
Box,
Center,
Grid,
GridItem,
Icon,
Stack,
useColorModeValue,
Text,
} from '@chakra-ui/react';
import { MouseEventHandler } from 'react';
import { FiAlertTriangle } from 'react-icons/fi';
import {
Astronaut,
Error,
Connected,
ConnectedShowAddress,
ConnectedUserInfo,
Connecting,
ConnectStatusWarn,
CopyAddressBtn,
Disconnected,
NotExist,
Rejected,
RejectedWarn,
WalletConnectComponent,
ChainCard,
} from '../components';
import { chainName } from '../config';
export const WalletSection = () => {
const {
connect,
openView,
status,
username,
address,
message,
wallet,
chain: chainInfo,
logoUrl,
} = useChain(chainName);
const chain = {
chainName,
label: chainInfo.pretty_name,
value: chainName,
icon: logoUrl,
};
// Events
const onClickConnect: MouseEventHandler = async (e) => {
e.preventDefault();
await connect();
};
const onClickOpenView: MouseEventHandler = (e) => {
e.preventDefault();
openView();
};
// Components
const connectWalletButton = (
<WalletConnectComponent
walletStatus={status}
disconnect={
<Disconnected buttonText="Connect Wallet" onClick={onClickConnect} />
}
connecting={<Connecting />}
connected={
<Connected buttonText={'My Wallet'} onClick={onClickOpenView} />
}
rejected={<Rejected buttonText="Reconnect" onClick={onClickConnect} />}
error={<Error buttonText="Change Wallet" onClick={onClickOpenView} />}
notExist={
<NotExist buttonText="Install Wallet" onClick={onClickOpenView} />
}
/>
);
const connectWalletWarn = (
<ConnectStatusWarn
walletStatus={status}
rejected={
<RejectedWarn
icon={<Icon as={FiAlertTriangle} mt={1} />}
wordOfWarning={`${wallet?.prettyName}: ${message}`}
/>
}
error={
<RejectedWarn
icon={<Icon as={FiAlertTriangle} mt={1} />}
wordOfWarning={`${wallet?.prettyName}: ${message}`}
/>
}
/>
);
const userInfo = username && (
<ConnectedUserInfo username={username} icon={<Astronaut />} />
);
const addressBtn = (
<CopyAddressBtn
walletStatus={status}
connected={<ConnectedShowAddress address={address} isLoading={false} />}
/>
);
return (
<Center py={16}>
<Grid
w="full"
maxW="sm"
templateColumns="1fr"
rowGap={4}
alignItems="center"
justifyContent="center"
>
<GridItem marginBottom={'20px'}>
<ChainCard
prettyName={chain?.label || chainName}
icon={chain?.icon}
/>
</GridItem>
<GridItem px={6}>
<Stack
justifyContent="center"
alignItems="center"
borderRadius="lg"
bg={useColorModeValue('white', 'blackAlpha.400')}
boxShadow={useColorModeValue(
'0 0 2px #dfdfdf, 0 0 6px -2px #d3d3d3',
'0 0 2px #363636, 0 0 8px -2px #4f4f4f'
)}
spacing={4}
px={4}
py={{ base: 6, md: 12 }}
>
{userInfo}
{addressBtn}
<Box w="full" maxW={{ base: 52, md: 64 }}>
{connectWalletButton}
</Box>
{connectWalletWarn && <GridItem>{connectWalletWarn}</GridItem>}
</Stack>
</GridItem>
</Grid>
</Center>
);
};