scaffold-stellar-frontend/src/components/WalletButton.tsx at cf7ad5e729f0c87817953096813c5c3bcc5f409c · theahaco/scaffold-stellar-frontend · GitHub

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
import {
	Button,
	Text,
	Modal,
	Profile,
	Icon,
	Tooltip,
} from "@stellar/design-system"
import React, { useState } from "react"
import { useWallet } from "../hooks/useWallet"
import { connectWallet, disconnectWallet } from "../util/wallet"
import cssStyles from "./WalletButton.module.css"

export const WalletButton = () => {
	const [showDisconnectModal, setShowDisconnectModal] = useState(false)
	const { address, isPending, balances, walletWarnings } = useWallet()
	const buttonLabel = isPending ? "Loading..." : "Connect"

	if (!address) {
		return (
			<Button variant="primary" size="md" onClick={() => void connectWallet()}>
				{buttonLabel}
			</Button>
		)
	}

	return (
		<div
			style={{
				display: "flex",
				flexDirection: "row",
				alignItems: "center",
				gap: "5px",
				opacity: isPending ? 0.6 : 1,
			}}
		>
			<Text as="div" size="sm">
				Wallet Balance: {balances?.xlm?.balance ?? "-"} XLM
			</Text>

			<div id="modalContainer">
				<Modal
					visible={showDisconnectModal}
					onClose={() => setShowDisconnectModal(false)}
					parentId="modalContainer"
				>
					<Modal.Heading>Disconnect wallet?</Modal.Heading>
					<Modal.Body>
						<Text
							as="div"
							size="sm"
							style={{
								display: "flex",
								alignItems: "baseline",
								minWidth: 0,
							}}
						>
							<span style={{ flexShrink: 0 }}>Connected as&nbsp;</span>
							<code
								style={{
									overflow: "hidden",
									textOverflow: "ellipsis",
									whiteSpace: "nowrap",
									fontSize: "0.85em",
								}}
								title={address}
							>
								{address}
							</code>
						</Text>
					</Modal.Body>
					<Modal.Footer itemAlignment="stack">
						<Button
							size="md"
							variant="primary"
							onClick={() => {
								void disconnectWallet().then(() =>
									setShowDisconnectModal(false),
								)
							}}
						>
							Disconnect
						</Button>
						<Button
							size="md"
							variant="tertiary"
							onClick={() => {
								setShowDisconnectModal(false)
							}}
						>
							Cancel
						</Button>
					</Modal.Footer>
				</Modal>
			</div>

			<div className={cssStyles.profileWrap}>
				<Profile
					publicAddress={address}
					size="md"
					isShort
					onClick={() => setShowDisconnectModal(true)}
				/>

				{walletWarnings.hasWarnings && (
					<Tooltip
						placement="bottom"
						triggerEl={<Icon.AlertTriangle className={cssStyles.warningIcon} />}
					>
						<div style={{ maxWidth: "15em" }}>
							{walletWarnings.messages.join("")}
							{walletWarnings.helpUrl && (
								<a
									className={cssStyles.learnMore}
									href={walletWarnings.helpUrl}
									target="_blank"
								>
									Learn more
								</a>
							)}
						</div>
					</Tooltip>
				)}
			</div>
		</div>
	)
}