@b3dotfun/sdk 0.0.82-alpha.2 → 0.0.82-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -10,7 +10,6 @@ const formatAddress_1 = require("../../../../shared/utils/formatAddress");
|
|
|
10
10
|
const thirdweb_1 = require("../../../../shared/utils/thirdweb");
|
|
11
11
|
const lucide_react_1 = require("lucide-react");
|
|
12
12
|
const react_2 = require("thirdweb/react");
|
|
13
|
-
const wagmi_1 = require("wagmi");
|
|
14
13
|
const useConnectedWalletDisplay_1 = require("../../hooks/useConnectedWalletDisplay");
|
|
15
14
|
var CryptoPaymentMethodType;
|
|
16
15
|
(function (CryptoPaymentMethodType) {
|
|
@@ -20,18 +19,20 @@ var CryptoPaymentMethodType;
|
|
|
20
19
|
CryptoPaymentMethodType["TRANSFER_CRYPTO"] = "transfer_crypto";
|
|
21
20
|
})(CryptoPaymentMethodType || (exports.CryptoPaymentMethodType = CryptoPaymentMethodType = {}));
|
|
22
21
|
function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
|
|
23
|
-
const { connectedEOAWallet
|
|
24
|
-
const {
|
|
25
|
-
const { disconnect } = (0, wagmi_1.useDisconnect)();
|
|
22
|
+
const { connectedEOAWallet, connectedSmartWallet } = (0, react_1.useAccountWallet)();
|
|
23
|
+
const { disconnect } = (0, react_2.useDisconnect)();
|
|
26
24
|
const { connect: openConnectModal } = (0, react_2.useConnectModal)();
|
|
27
|
-
const setActiveWallet = (0, react_2.useSetActiveWallet)();
|
|
28
25
|
const { data: eoaWalletInfo } = (0, react_2.useWalletInfo)(connectedEOAWallet?.id);
|
|
29
26
|
const globalAddress = connectedSmartWallet?.getAccount()?.address;
|
|
30
27
|
// Use custom hook to determine wallet display logic
|
|
31
|
-
const { shouldShowConnectedEOA
|
|
28
|
+
const { shouldShowConnectedEOA } = (0, useConnectedWalletDisplay_1.useConnectedWalletDisplay)(selectedPaymentMethod);
|
|
32
29
|
// Handle wallet connection using thirdweb modal
|
|
33
30
|
const handleConnectWallet = async () => {
|
|
34
31
|
try {
|
|
32
|
+
// Disconnect current wallet before connecting a new one
|
|
33
|
+
if (connectedEOAWallet) {
|
|
34
|
+
await disconnect(connectedEOAWallet);
|
|
35
|
+
}
|
|
35
36
|
const wallet = await openConnectModal({ client: thirdweb_1.client, setActive: false });
|
|
36
37
|
if (wallet) {
|
|
37
38
|
// setActiveWallet(wallet);
|
|
@@ -59,31 +60,17 @@ function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod,
|
|
|
59
60
|
react_1.toast.success("Multiple test 1");
|
|
60
61
|
setTimeout(() => react_1.toast.info("Multiple test 2"), 200);
|
|
61
62
|
setTimeout(() => react_1.toast.warning("Multiple test 3"), 400);
|
|
62
|
-
}, className: "rounded bg-purple-600 px-2 py-1 text-xs font-medium text-white hover:bg-purple-700", children: "Multiple" })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "crypto-payment-methods flex flex-col gap-4", children: [(shouldShowConnectedEOA ||
|
|
63
|
+
}, className: "rounded bg-purple-600 px-2 py-1 text-xs font-medium text-white hover:bg-purple-700", children: "Multiple" })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "crypto-payment-methods flex flex-col gap-4", children: [(shouldShowConnectedEOA || globalAddress) && ((0, jsx_runtime_1.jsxs)("div", { className: "installed-wallets", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Connected wallets" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [shouldShowConnectedEOA && ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
|
|
63
64
|
setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
64
65
|
onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
65
|
-
|
|
66
|
-
setActiveWallet(connectedEOAWallet);
|
|
67
|
-
}
|
|
68
|
-
react_1.toast.success(`Selected ${eoaWalletInfo?.name || connector?.name || "wallet"}`);
|
|
66
|
+
react_1.toast.success(`Selected ${eoaWalletInfo?.name || "wallet"}`);
|
|
69
67
|
}, className: (0, cn_1.cn)("crypto-payment-method-connect-wallet eoa-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
|
|
70
68
|
? "connected-wallet border-as-brand bg-as-brand/5"
|
|
71
|
-
: "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-blue-600" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: eoaWalletInfo?.name ||
|
|
69
|
+
: "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-blue-600" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: eoaWalletInfo?.name || "Connected Wallet" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(connectedEOAWallet?.getAccount()?.address || "") })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 rounded-full bg-green-500" })), (0, jsx_runtime_1.jsx)("button", { onClick: e => {
|
|
72
70
|
e.stopPropagation();
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
|
|
76
|
-
setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
|
|
71
|
+
if (connectedEOAWallet) {
|
|
72
|
+
disconnect(connectedEOAWallet);
|
|
77
73
|
}
|
|
78
|
-
}, className: "text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })] })] }) })), shouldShowWagmiWallet && ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
|
|
79
|
-
setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
80
|
-
onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
81
|
-
react_1.toast.success(`Selected ${connector?.name || "wallet"}`);
|
|
82
|
-
}, className: (0, cn_1.cn)("crypto-payment-method-connect-wallet wagmi-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
|
|
83
|
-
? "connected-wallet border-as-brand bg-as-brand/5"
|
|
84
|
-
: "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-5 w-5 text-blue-600" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: connector?.name || "Connected Wallet" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(address || "") })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && ((0, jsx_runtime_1.jsx)("div", { className: "h-2 w-2 rounded-full bg-green-500" })), (0, jsx_runtime_1.jsx)("button", { onClick: e => {
|
|
85
|
-
e.stopPropagation();
|
|
86
|
-
disconnect();
|
|
87
74
|
react_1.toast.success("Wallet disconnected");
|
|
88
75
|
if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
|
|
89
76
|
setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
|
|
@@ -5,8 +5,7 @@ import { cn } from "../../../../shared/utils/cn.js";
|
|
|
5
5
|
import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
|
|
6
6
|
import { client } from "../../../../shared/utils/thirdweb.js";
|
|
7
7
|
import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-react";
|
|
8
|
-
import { useConnectModal,
|
|
9
|
-
import { useAccount, useDisconnect } from "wagmi";
|
|
8
|
+
import { useConnectModal, useDisconnect, useWalletInfo } from "thirdweb/react";
|
|
10
9
|
import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay.js";
|
|
11
10
|
export var CryptoPaymentMethodType;
|
|
12
11
|
(function (CryptoPaymentMethodType) {
|
|
@@ -16,18 +15,20 @@ export var CryptoPaymentMethodType;
|
|
|
16
15
|
CryptoPaymentMethodType["TRANSFER_CRYPTO"] = "transfer_crypto";
|
|
17
16
|
})(CryptoPaymentMethodType || (CryptoPaymentMethodType = {}));
|
|
18
17
|
export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
|
|
19
|
-
const { connectedEOAWallet
|
|
20
|
-
const { connector, address } = useAccount();
|
|
18
|
+
const { connectedEOAWallet, connectedSmartWallet } = useAccountWallet();
|
|
21
19
|
const { disconnect } = useDisconnect();
|
|
22
20
|
const { connect: openConnectModal } = useConnectModal();
|
|
23
|
-
const setActiveWallet = useSetActiveWallet();
|
|
24
21
|
const { data: eoaWalletInfo } = useWalletInfo(connectedEOAWallet?.id);
|
|
25
22
|
const globalAddress = connectedSmartWallet?.getAccount()?.address;
|
|
26
23
|
// Use custom hook to determine wallet display logic
|
|
27
|
-
const { shouldShowConnectedEOA
|
|
24
|
+
const { shouldShowConnectedEOA } = useConnectedWalletDisplay(selectedPaymentMethod);
|
|
28
25
|
// Handle wallet connection using thirdweb modal
|
|
29
26
|
const handleConnectWallet = async () => {
|
|
30
27
|
try {
|
|
28
|
+
// Disconnect current wallet before connecting a new one
|
|
29
|
+
if (connectedEOAWallet) {
|
|
30
|
+
await disconnect(connectedEOAWallet);
|
|
31
|
+
}
|
|
31
32
|
const wallet = await openConnectModal({ client, setActive: false });
|
|
32
33
|
if (wallet) {
|
|
33
34
|
// setActiveWallet(wallet);
|
|
@@ -55,31 +56,17 @@ export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentM
|
|
|
55
56
|
toast.success("Multiple test 1");
|
|
56
57
|
setTimeout(() => toast.info("Multiple test 2"), 200);
|
|
57
58
|
setTimeout(() => toast.warning("Multiple test 3"), 400);
|
|
58
|
-
}, className: "rounded bg-purple-600 px-2 py-1 text-xs font-medium text-white hover:bg-purple-700", children: "Multiple" })] })] })), _jsxs("div", { className: "crypto-payment-methods flex flex-col gap-4", children: [(shouldShowConnectedEOA ||
|
|
59
|
+
}, className: "rounded bg-purple-600 px-2 py-1 text-xs font-medium text-white hover:bg-purple-700", children: "Multiple" })] })] })), _jsxs("div", { className: "crypto-payment-methods flex flex-col gap-4", children: [(shouldShowConnectedEOA || globalAddress) && (_jsxs("div", { className: "installed-wallets", children: [_jsx("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Connected wallets" }), _jsxs("div", { className: "space-y-2", children: [shouldShowConnectedEOA && (_jsx("button", { onClick: () => {
|
|
59
60
|
setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
60
61
|
onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
61
|
-
|
|
62
|
-
setActiveWallet(connectedEOAWallet);
|
|
63
|
-
}
|
|
64
|
-
toast.success(`Selected ${eoaWalletInfo?.name || connector?.name || "wallet"}`);
|
|
62
|
+
toast.success(`Selected ${eoaWalletInfo?.name || "wallet"}`);
|
|
65
63
|
}, className: cn("crypto-payment-method-connect-wallet eoa-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
|
|
66
64
|
? "connected-wallet border-as-brand bg-as-brand/5"
|
|
67
|
-
: "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-5 w-5 text-blue-600" }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: eoaWalletInfo?.name ||
|
|
65
|
+
: "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-5 w-5 text-blue-600" }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: eoaWalletInfo?.name || "Connected Wallet" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(connectedEOAWallet?.getAccount()?.address || "") })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && (_jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })), _jsx("button", { onClick: e => {
|
|
68
66
|
e.stopPropagation();
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
|
|
72
|
-
setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
|
|
67
|
+
if (connectedEOAWallet) {
|
|
68
|
+
disconnect(connectedEOAWallet);
|
|
73
69
|
}
|
|
74
|
-
}, className: "text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors", children: _jsx(X, { className: "h-4 w-4" }) })] })] }) })), shouldShowWagmiWallet && (_jsx("button", { onClick: () => {
|
|
75
|
-
setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
76
|
-
onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
77
|
-
toast.success(`Selected ${connector?.name || "wallet"}`);
|
|
78
|
-
}, className: cn("crypto-payment-method-connect-wallet wagmi-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
|
|
79
|
-
? "connected-wallet border-as-brand bg-as-brand/5"
|
|
80
|
-
: "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80"), children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-5 w-5 text-blue-600" }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: connector?.name || "Connected Wallet" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(address || "") })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && (_jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })), _jsx("button", { onClick: e => {
|
|
81
|
-
e.stopPropagation();
|
|
82
|
-
disconnect();
|
|
83
70
|
toast.success("Wallet disconnected");
|
|
84
71
|
if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
|
|
85
72
|
setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
|
package/package.json
CHANGED
|
@@ -5,8 +5,7 @@ import { cn } from "@b3dotfun/sdk/shared/utils/cn";
|
|
|
5
5
|
import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
|
|
6
6
|
import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
|
|
7
7
|
import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-react";
|
|
8
|
-
import { useConnectModal,
|
|
9
|
-
import { useAccount, useDisconnect } from "wagmi";
|
|
8
|
+
import { useConnectModal, useDisconnect, useWalletInfo } from "thirdweb/react";
|
|
10
9
|
import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay";
|
|
11
10
|
|
|
12
11
|
export enum CryptoPaymentMethodType {
|
|
@@ -31,21 +30,23 @@ export function CryptoPaymentMethod({
|
|
|
31
30
|
onBack,
|
|
32
31
|
onSelectPaymentMethod,
|
|
33
32
|
}: CryptoPaymentMethodProps) {
|
|
34
|
-
const { connectedEOAWallet
|
|
35
|
-
const { connector, address } = useAccount();
|
|
33
|
+
const { connectedEOAWallet, connectedSmartWallet } = useAccountWallet();
|
|
36
34
|
const { disconnect } = useDisconnect();
|
|
37
35
|
const { connect: openConnectModal } = useConnectModal();
|
|
38
|
-
const setActiveWallet = useSetActiveWallet();
|
|
39
36
|
const { data: eoaWalletInfo } = useWalletInfo(connectedEOAWallet?.id);
|
|
40
37
|
|
|
41
38
|
const globalAddress = connectedSmartWallet?.getAccount()?.address;
|
|
42
39
|
|
|
43
40
|
// Use custom hook to determine wallet display logic
|
|
44
|
-
const { shouldShowConnectedEOA
|
|
41
|
+
const { shouldShowConnectedEOA } = useConnectedWalletDisplay(selectedPaymentMethod);
|
|
45
42
|
|
|
46
43
|
// Handle wallet connection using thirdweb modal
|
|
47
44
|
const handleConnectWallet = async () => {
|
|
48
45
|
try {
|
|
46
|
+
// Disconnect current wallet before connecting a new one
|
|
47
|
+
if (connectedEOAWallet) {
|
|
48
|
+
await disconnect(connectedEOAWallet);
|
|
49
|
+
}
|
|
49
50
|
const wallet = await openConnectModal({ client, setActive: false });
|
|
50
51
|
if (wallet) {
|
|
51
52
|
// setActiveWallet(wallet);
|
|
@@ -132,7 +133,7 @@ export function CryptoPaymentMethod({
|
|
|
132
133
|
{/* Payment Methods */}
|
|
133
134
|
<div className="crypto-payment-methods flex flex-col gap-4">
|
|
134
135
|
{/* Installed Wallets Section */}
|
|
135
|
-
{(shouldShowConnectedEOA ||
|
|
136
|
+
{(shouldShowConnectedEOA || globalAddress) && (
|
|
136
137
|
<div className="installed-wallets">
|
|
137
138
|
<h3 className="text-as-primary/80 mb-3 text-sm font-medium">Connected wallets</h3>
|
|
138
139
|
<div className="space-y-2">
|
|
@@ -143,10 +144,7 @@ export function CryptoPaymentMethod({
|
|
|
143
144
|
onClick={() => {
|
|
144
145
|
setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
145
146
|
onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
146
|
-
|
|
147
|
-
setActiveWallet(connectedEOAWallet);
|
|
148
|
-
}
|
|
149
|
-
toast.success(`Selected ${eoaWalletInfo?.name || connector?.name || "wallet"}`);
|
|
147
|
+
toast.success(`Selected ${eoaWalletInfo?.name || "wallet"}`);
|
|
150
148
|
}}
|
|
151
149
|
className={cn(
|
|
152
150
|
"crypto-payment-method-connect-wallet eoa-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
|
|
@@ -162,7 +160,7 @@ export function CryptoPaymentMethod({
|
|
|
162
160
|
</div>
|
|
163
161
|
<div className="flex flex-col">
|
|
164
162
|
<span className="text-as-primary font-semibold">
|
|
165
|
-
{eoaWalletInfo?.name ||
|
|
163
|
+
{eoaWalletInfo?.name || "Connected Wallet"}
|
|
166
164
|
</span>
|
|
167
165
|
<span className="text-as-primary/60 text-sm">
|
|
168
166
|
{shortenAddress(connectedEOAWallet?.getAccount()?.address || "")}
|
|
@@ -176,53 +174,9 @@ export function CryptoPaymentMethod({
|
|
|
176
174
|
<button
|
|
177
175
|
onClick={e => {
|
|
178
176
|
e.stopPropagation();
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
|
|
182
|
-
setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
|
|
177
|
+
if (connectedEOAWallet) {
|
|
178
|
+
disconnect(connectedEOAWallet);
|
|
183
179
|
}
|
|
184
|
-
}}
|
|
185
|
-
className="text-as-primary/60 hover:text-as-primary/80 rounded-lg p-1.5 transition-colors"
|
|
186
|
-
>
|
|
187
|
-
<X className="h-4 w-4" />
|
|
188
|
-
</button>
|
|
189
|
-
</div>
|
|
190
|
-
</div>
|
|
191
|
-
</button>
|
|
192
|
-
)}
|
|
193
|
-
|
|
194
|
-
{shouldShowWagmiWallet && (
|
|
195
|
-
<button
|
|
196
|
-
onClick={() => {
|
|
197
|
-
setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
198
|
-
onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
199
|
-
toast.success(`Selected ${connector?.name || "wallet"}`);
|
|
200
|
-
}}
|
|
201
|
-
className={cn(
|
|
202
|
-
"crypto-payment-method-connect-wallet wagmi-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md",
|
|
203
|
-
selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET
|
|
204
|
-
? "connected-wallet border-as-brand bg-as-brand/5"
|
|
205
|
-
: "border-as-border-secondary bg-as-surface-primary hover:border-as-secondary/80",
|
|
206
|
-
)}
|
|
207
|
-
>
|
|
208
|
-
<div className="flex items-center justify-between">
|
|
209
|
-
<div className="flex items-center gap-3">
|
|
210
|
-
<div className="wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-blue-100">
|
|
211
|
-
<Wallet className="h-5 w-5 text-blue-600" />
|
|
212
|
-
</div>
|
|
213
|
-
<div className="flex flex-col">
|
|
214
|
-
<span className="text-as-primary font-semibold">{connector?.name || "Connected Wallet"}</span>
|
|
215
|
-
<span className="text-as-primary/60 text-sm">{shortenAddress(address || "")}</span>
|
|
216
|
-
</div>
|
|
217
|
-
</div>
|
|
218
|
-
<div className="flex items-center gap-2">
|
|
219
|
-
{selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET && (
|
|
220
|
-
<div className="h-2 w-2 rounded-full bg-green-500"></div>
|
|
221
|
-
)}
|
|
222
|
-
<button
|
|
223
|
-
onClick={e => {
|
|
224
|
-
e.stopPropagation();
|
|
225
|
-
disconnect();
|
|
226
180
|
toast.success("Wallet disconnected");
|
|
227
181
|
if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
|
|
228
182
|
setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
|