@b3dotfun/sdk 0.0.82-alpha.1 → 0.0.82
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.
- package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.js +173 -56
- package/dist/cjs/global-account/react/hooks/useAuthentication.js +36 -38
- package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.js +172 -55
- package/dist/esm/global-account/react/hooks/useAuthentication.js +36 -38
- package/dist/styles/index.css +1 -1
- package/package.json +1 -1
- package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx +199 -14
- package/src/global-account/react/hooks/useAuthentication.ts +46 -47
|
@@ -4,9 +4,13 @@ import { toast, useAccountWallet, WalletImage } from "../../../../global-account
|
|
|
4
4
|
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
|
+
import { WalletCoinbase, WalletMetamask, WalletRainbow, WalletWalletConnect } from "@web3icons/react";
|
|
7
8
|
import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-react";
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
9
|
+
import { useState } from "react";
|
|
10
|
+
import { createPortal } from "react-dom";
|
|
11
|
+
import { useSetActiveWallet, useWalletInfo } from "thirdweb/react";
|
|
12
|
+
import { createWallet } from "thirdweb/wallets";
|
|
13
|
+
import { useAccount, useConnect, useDisconnect, useWalletClient } from "wagmi";
|
|
10
14
|
import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay.js";
|
|
11
15
|
export var CryptoPaymentMethodType;
|
|
12
16
|
(function (CryptoPaymentMethodType) {
|
|
@@ -18,80 +22,193 @@ export var CryptoPaymentMethodType;
|
|
|
18
22
|
export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
|
|
19
23
|
const { connectedEOAWallet: connectedEOAWallet, connectedSmartWallet: connectedSmartWallet } = useAccountWallet();
|
|
20
24
|
const { connector, address } = useAccount();
|
|
25
|
+
const { connect, connectors, isPending } = useConnect();
|
|
21
26
|
const { disconnect } = useDisconnect();
|
|
22
|
-
const {
|
|
27
|
+
const { data: walletClient } = useWalletClient();
|
|
28
|
+
const [showWalletModal, setShowWalletModal] = useState(false);
|
|
23
29
|
const setActiveWallet = useSetActiveWallet();
|
|
24
30
|
const { data: eoaWalletInfo } = useWalletInfo(connectedEOAWallet?.id);
|
|
31
|
+
const isConnected = !!connectedEOAWallet;
|
|
25
32
|
const globalAddress = connectedSmartWallet?.getAccount()?.address;
|
|
26
33
|
// Use custom hook to determine wallet display logic
|
|
27
34
|
const { shouldShowConnectedEOA, shouldShowWagmiWallet } = useConnectedWalletDisplay(selectedPaymentMethod);
|
|
28
|
-
|
|
29
|
-
|
|
35
|
+
console.log("shouldShowWagmiWallet :", shouldShowWagmiWallet);
|
|
36
|
+
// Map wagmi connector names to thirdweb wallet IDs
|
|
37
|
+
const getThirdwebWalletId = (connectorName) => {
|
|
38
|
+
const walletMap = {
|
|
39
|
+
MetaMask: "io.metamask",
|
|
40
|
+
"Coinbase Wallet": "com.coinbase.wallet",
|
|
41
|
+
Rainbow: "me.rainbow",
|
|
42
|
+
WalletConnect: "walletConnect",
|
|
43
|
+
Phantom: "app.phantom",
|
|
44
|
+
};
|
|
45
|
+
return walletMap[connectorName] || null;
|
|
46
|
+
};
|
|
47
|
+
// Create thirdweb wallet from wagmi connector
|
|
48
|
+
const createThirdwebWalletFromConnector = async (connectorName) => {
|
|
49
|
+
const walletId = getThirdwebWalletId(connectorName);
|
|
50
|
+
if (!walletId) {
|
|
51
|
+
console.warn(`No thirdweb wallet ID found for connector: ${connectorName}`);
|
|
52
|
+
return null;
|
|
53
|
+
}
|
|
30
54
|
try {
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
55
|
+
const thirdwebWallet = createWallet(walletId);
|
|
56
|
+
// Connect the wallet to sync with the existing wagmi connection
|
|
57
|
+
await thirdwebWallet.connect({ client });
|
|
58
|
+
return thirdwebWallet;
|
|
59
|
+
}
|
|
60
|
+
catch (error) {
|
|
61
|
+
console.error(`Failed to create thirdweb wallet for ${connectorName}:`, error);
|
|
62
|
+
return null;
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
// Define available wallet connectors
|
|
66
|
+
const availableConnectors = connectors.filter(connector => ["MetaMask", "WalletConnect", "Coinbase Wallet", "Rainbow", "Phantom"].includes(connector.name));
|
|
67
|
+
// Define wallet options with icons and info
|
|
68
|
+
const walletOptions = [
|
|
69
|
+
{
|
|
70
|
+
id: "metamask",
|
|
71
|
+
name: "MetaMask",
|
|
72
|
+
icon: _jsx(WalletMetamask, { size: 48 }),
|
|
73
|
+
description: "Connect using MetaMask browser extension",
|
|
74
|
+
connector: availableConnectors.find(c => c.name === "MetaMask"),
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
id: "coinbase",
|
|
78
|
+
name: "Coinbase Wallet",
|
|
79
|
+
icon: _jsx(WalletCoinbase, { size: 48 }),
|
|
80
|
+
description: "Connect using Coinbase Wallet",
|
|
81
|
+
connector: availableConnectors.find(c => c.name === "Coinbase Wallet"),
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
id: "rainbow",
|
|
85
|
+
name: "Rainbow",
|
|
86
|
+
icon: _jsx(WalletRainbow, { size: 48 }),
|
|
87
|
+
description: "Connect using Rainbow wallet",
|
|
88
|
+
connector: availableConnectors.find(c => c.name === "Rainbow"),
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
id: "walletconnect",
|
|
92
|
+
name: "WalletConnect",
|
|
93
|
+
icon: _jsx(WalletWalletConnect, { size: 48 }),
|
|
94
|
+
description: "Connect using WalletConnect protocol",
|
|
95
|
+
connector: availableConnectors.find(c => c.name === "WalletConnect"),
|
|
96
|
+
},
|
|
97
|
+
].filter(wallet => wallet.connector); // Only show wallets that have available connectors
|
|
98
|
+
// Reset modal state when closing
|
|
99
|
+
const handleCloseModal = () => {
|
|
100
|
+
setShowWalletModal(false);
|
|
101
|
+
};
|
|
102
|
+
// Function to request wallet permissions for specific wallet
|
|
103
|
+
const requestWalletPermissions = async (walletConnector) => {
|
|
104
|
+
try {
|
|
105
|
+
// If a specific wallet connector is provided and it's different from current
|
|
106
|
+
if (walletConnector && connector?.name !== walletConnector.name) {
|
|
107
|
+
// Disconnect current and connect to the selected wallet
|
|
108
|
+
// if (isConnected) {
|
|
109
|
+
// disconnect();
|
|
110
|
+
// // Small delay to ensure disconnection
|
|
111
|
+
// await new Promise(resolve => setTimeout(resolve, 100));
|
|
112
|
+
// }
|
|
113
|
+
await connect({ connector: walletConnector });
|
|
114
|
+
setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
115
|
+
onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
116
|
+
toast.success(`Connected to ${walletConnector.name}`);
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
// If same wallet or no specific wallet, request permissions for account switching
|
|
120
|
+
if (walletClient && "request" in walletClient) {
|
|
121
|
+
await walletClient.request({
|
|
122
|
+
method: "wallet_requestPermissions",
|
|
123
|
+
params: [{ eth_accounts: {} }],
|
|
124
|
+
});
|
|
125
|
+
toast.success("Account selection completed");
|
|
34
126
|
setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
35
127
|
onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
36
|
-
|
|
128
|
+
}
|
|
129
|
+
else {
|
|
130
|
+
// Fallback: show modal for manual wallet selection
|
|
131
|
+
setShowWalletModal(true);
|
|
37
132
|
}
|
|
38
133
|
}
|
|
39
134
|
catch (error) {
|
|
40
|
-
console.error("Failed to
|
|
135
|
+
console.error("Failed to request wallet permissions:", error);
|
|
41
136
|
if (error && typeof error === "object" && "message" in error) {
|
|
42
137
|
const errorMessage = error.message.toLowerCase();
|
|
43
138
|
if (errorMessage.includes("rejected") ||
|
|
44
139
|
errorMessage.includes("denied") ||
|
|
45
140
|
errorMessage.includes("cancelled")) {
|
|
46
|
-
|
|
141
|
+
toast.error("Account selection cancelled");
|
|
47
142
|
}
|
|
48
143
|
else {
|
|
49
|
-
toast.error("Failed to
|
|
144
|
+
toast.error("Failed to open account selection");
|
|
50
145
|
}
|
|
51
146
|
}
|
|
147
|
+
else {
|
|
148
|
+
toast.error("Failed to open account selection");
|
|
149
|
+
}
|
|
52
150
|
}
|
|
53
151
|
};
|
|
54
|
-
return (
|
|
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
|
-
|
|
152
|
+
return (_jsxs("div", { className: "crypto-payment-method mx-auto h-fit w-[460px] max-w-full px-5 pb-5 pt-5 sm:px-0 sm:pt-5", children: [_jsxs("div", { className: cn("relative flex flex-col gap-10"), children: [_jsx("button", { onClick: onBack, className: "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors", children: _jsx(ChevronLeft, { className: "h-6 w-6" }) }), _jsx("div", { className: "flex items-center justify-around gap-4", children: _jsx("div", { className: "flex-1 text-center", children: _jsx("h2", { className: "text-as-primary text-lg font-semibold", children: "Select a payment method" }) }) }), process.env.NODE_ENV === "development" && (_jsxs("div", { className: "rounded-lg border border-yellow-500/50 bg-yellow-50 p-3 dark:bg-yellow-950/20", children: [_jsx("p", { className: "mb-2 text-xs font-semibold text-yellow-800 dark:text-yellow-300", children: "\uD83E\uDDEA Toast Test (Dev Only)" }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx("button", { onClick: () => toast.success("Success! Transaction completed"), className: "rounded bg-green-600 px-2 py-1 text-xs font-medium text-white hover:bg-green-700", children: "Success" }), _jsx("button", { onClick: () => toast.error("Error! Transaction failed"), className: "rounded bg-red-600 px-2 py-1 text-xs font-medium text-white hover:bg-red-700", children: "Error" }), _jsx("button", { onClick: () => toast.info("Info: Processing your request..."), className: "rounded bg-blue-600 px-2 py-1 text-xs font-medium text-white hover:bg-blue-700", children: "Info" }), _jsx("button", { onClick: () => toast.warning("Warning: Low balance detected"), className: "rounded bg-yellow-600 px-2 py-1 text-xs font-medium text-white hover:bg-yellow-700", children: "Warning" }), _jsx("button", { onClick: () => {
|
|
153
|
+
toast.success("Multiple test 1");
|
|
154
|
+
setTimeout(() => toast.info("Multiple test 2"), 200);
|
|
155
|
+
setTimeout(() => toast.warning("Multiple test 3"), 400);
|
|
156
|
+
}, 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 || shouldShowWagmiWallet || 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: () => {
|
|
157
|
+
setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
158
|
+
onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
159
|
+
if (connectedEOAWallet) {
|
|
160
|
+
setActiveWallet(connectedEOAWallet);
|
|
161
|
+
}
|
|
162
|
+
toast.success(`Selected ${eoaWalletInfo?.name || connector?.name || "wallet"}`);
|
|
163
|
+
}, 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
|
|
164
|
+
? "connected-wallet border-as-brand bg-as-brand/5"
|
|
165
|
+
: "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 || connector?.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 => {
|
|
166
|
+
e.stopPropagation();
|
|
167
|
+
disconnect();
|
|
168
|
+
toast.success("Wallet disconnected");
|
|
169
|
+
if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
|
|
170
|
+
setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
|
|
171
|
+
}
|
|
172
|
+
}, 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: async () => {
|
|
173
|
+
setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
174
|
+
onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
175
|
+
// Create thirdweb wallet from wagmi connector
|
|
176
|
+
if (connector?.name) {
|
|
177
|
+
const thirdwebWallet = await createThirdwebWalletFromConnector(connector.name);
|
|
178
|
+
if (thirdwebWallet) {
|
|
179
|
+
setActiveWallet(thirdwebWallet);
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
toast.success(`Selected ${connector?.name || "wallet"}`);
|
|
183
|
+
}, 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
|
|
184
|
+
? "connected-wallet border-as-brand bg-as-brand/5"
|
|
185
|
+
: "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 => {
|
|
186
|
+
e.stopPropagation();
|
|
187
|
+
disconnect();
|
|
188
|
+
toast.success("Wallet disconnected");
|
|
189
|
+
if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
|
|
190
|
+
setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
|
|
191
|
+
}
|
|
192
|
+
}, 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" }) })] })] }) })), globalAddress && (_jsx("button", { onClick: () => {
|
|
193
|
+
setSelectedPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
|
|
194
|
+
onSelectPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
|
|
195
|
+
toast.success("Selected B3 Account");
|
|
196
|
+
}, className: cn("crypto-payment-method-global-wallet w-full rounded-xl border p-4 text-left transition-all hover:shadow-md", selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
|
|
197
|
+
? "connected-wallet border-as-brand bg-as-brand/5"
|
|
198
|
+
: "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(WalletImage, { fallback: _jsx("div", { className: "wallet-icon flex h-10 w-10 items-center justify-center rounded-full bg-purple-100", children: _jsx(Wallet, { className: "h-5 w-5 text-purple-600" }) }) }), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: "Global Account" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(globalAddress || "") })] })] }), _jsx("div", { className: "flex items-center gap-2", children: selectedPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET && (_jsx("div", { className: "h-2 w-2 rounded-full bg-green-500" })) })] }) }))] })] })), _jsxs("div", { className: "other-payment-methods", children: [_jsx("h3", { className: "text-as-primary/80 mb-3 text-sm font-medium", children: "Payment methods" }), _jsxs("div", { className: "space-y-3", children: [_jsxs("button", { onClick: () => {
|
|
199
|
+
// Always show wallet selection modal first
|
|
200
|
+
setShowWalletModal(true);
|
|
201
|
+
}, className: "crypto-payment-method-connect-wallet bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-blue-100", children: _jsx(Wallet, { className: "h-4 w-4 text-blue-600" }) }), _jsx("div", { className: "flex flex-col items-start text-left", children: _jsx("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }) })] }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] }), _jsxs("button", { onClick: () => {
|
|
202
|
+
setSelectedPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
|
|
203
|
+
onSelectPaymentMethod(CryptoPaymentMethodType.TRANSFER_CRYPTO);
|
|
204
|
+
}, disabled: isCreatingOrder, className: "crypto-payment-method-transfer bg-as-surface-primary border-as-border-secondary hover:border-as-secondary/80 group flex w-full items-center justify-between gap-4 rounded-xl border px-4 py-3.5 transition-all duration-200 hover:shadow-md", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "wallet-icon flex h-8 w-8 items-center justify-center rounded-full bg-orange-100", children: _jsx(ZapIcon, { className: "h-4 w-4" }) }), _jsx("div", { className: "flex flex-col items-start text-left", children: _jsx("h4", { className: "text-as-primary font-semibold", children: "Transfer crypto" }) })] }), _jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" })] })] })] })] })] }), showWalletModal &&
|
|
205
|
+
createPortal(_jsx("div", { className: "wallet-connection-modal pointer-events-auto fixed inset-0 z-[9999] flex items-center justify-center bg-black/50", children: _jsxs("div", { className: "max-h-[80vh] w-[400px] max-w-[90vw] overflow-auto rounded-xl bg-white p-6 dark:bg-gray-900", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: isConnected ? "Switch wallet or account" : "Choose wallet to connect" }), _jsx("button", { onClick: handleCloseModal, className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx("div", { className: "space-y-4", children: _jsx("div", { className: "space-y-3", children: walletOptions.map(walletOption => {
|
|
206
|
+
const isCurrentWallet = isConnected && connector?.name === walletOption.connector?.name;
|
|
207
|
+
return (_jsx("button", { onClick: async () => {
|
|
208
|
+
handleCloseModal();
|
|
209
|
+
await requestWalletPermissions(walletOption.connector);
|
|
210
|
+
}, disabled: isPending, className: `wallet-option w-full rounded-xl border p-4 text-left transition-all hover:shadow-md disabled:opacity-50 ${isCurrentWallet
|
|
211
|
+
? "wallet-option--active border-blue-500 bg-blue-50 dark:bg-blue-900/20"
|
|
212
|
+
: "border-gray-200 bg-white hover:border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:hover:border-gray-500"}`, children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [walletOption.icon, _jsxs("div", { children: [_jsxs("div", { className: "wallet-option-name flex items-center gap-2", children: [_jsx("div", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: walletOption.name }), isCurrentWallet && (_jsx("span", { className: "rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-800 dark:text-blue-200", children: "Connected" }))] }), _jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: isCurrentWallet ? "Switch account or reconnect" : walletOption.description })] })] }), _jsx(ChevronRightCircle, { className: "h-5 w-5 text-gray-400" })] }) }, walletOption.id));
|
|
213
|
+
}) }) })] }) }), typeof window !== "undefined" ? document.getElementById("b3-root") || document.body : document.body)] }));
|
|
97
214
|
}
|
|
@@ -125,40 +125,14 @@ export function useAuthentication(partnerId) {
|
|
|
125
125
|
return userAuth;
|
|
126
126
|
}
|
|
127
127
|
}, [activeWallet, partnerId, authenticate, setIsAuthenticated, setIsAuthenticating, setUser, setHasStartedConnecting]);
|
|
128
|
-
const logout = useCallback(async (callback) => {
|
|
129
|
-
if (activeWallet) {
|
|
130
|
-
debug("@@logout:activeWallet", activeWallet);
|
|
131
|
-
disconnect(activeWallet);
|
|
132
|
-
debug("@@logout:activeWallet", activeWallet);
|
|
133
|
-
}
|
|
134
|
-
// Log out of each wallet
|
|
135
|
-
wallets.forEach(wallet => {
|
|
136
|
-
console.log("@@logging out", wallet);
|
|
137
|
-
disconnect(wallet);
|
|
138
|
-
});
|
|
139
|
-
// Delete localStorage thirdweb:connected-wallet-ids
|
|
140
|
-
// https://npc-labs.slack.com/archives/C070E6HNG85/p1750185115273099
|
|
141
|
-
if (typeof localStorage !== "undefined") {
|
|
142
|
-
localStorage.removeItem("thirdweb:connected-wallet-ids");
|
|
143
|
-
localStorage.removeItem("wagmi.store");
|
|
144
|
-
localStorage.removeItem("lastAuthProvider");
|
|
145
|
-
localStorage.removeItem("b3-user");
|
|
146
|
-
}
|
|
147
|
-
app.logout();
|
|
148
|
-
debug("@@logout:loggedOut");
|
|
149
|
-
setIsAuthenticated(false);
|
|
150
|
-
setIsConnected(false);
|
|
151
|
-
setUser();
|
|
152
|
-
callback?.();
|
|
153
|
-
}, [activeWallet, disconnect, wallets, setIsAuthenticated, setUser, setIsConnected]);
|
|
154
128
|
const onConnect = useCallback(async (_walleAutoConnectedWith, allConnectedWallets) => {
|
|
155
129
|
debug("@@useAuthentication:onConnect", { _walleAutoConnectedWith, allConnectedWallets });
|
|
130
|
+
const wallet = allConnectedWallets.find(wallet => wallet.id.startsWith("ecosystem."));
|
|
131
|
+
if (!wallet) {
|
|
132
|
+
throw new Error("No smart wallet found during auto-connect");
|
|
133
|
+
}
|
|
134
|
+
debug("@@useAuthentication:onConnect", { wallet });
|
|
156
135
|
try {
|
|
157
|
-
const wallet = allConnectedWallets.find(wallet => wallet.id.startsWith("ecosystem."));
|
|
158
|
-
if (!wallet) {
|
|
159
|
-
throw new Error("No smart wallet found during auto-connect");
|
|
160
|
-
}
|
|
161
|
-
debug("@@useAuthentication:onConnect", { wallet });
|
|
162
136
|
setHasStartedConnecting(true);
|
|
163
137
|
setIsConnected(true);
|
|
164
138
|
setIsAuthenticating(true);
|
|
@@ -172,7 +146,6 @@ export function useAuthentication(partnerId) {
|
|
|
172
146
|
debug("@@useAuthentication:onConnect:failed", { error });
|
|
173
147
|
setIsAuthenticated(false);
|
|
174
148
|
setUser(undefined);
|
|
175
|
-
await logout();
|
|
176
149
|
}
|
|
177
150
|
finally {
|
|
178
151
|
setIsAuthenticating(false);
|
|
@@ -183,19 +156,44 @@ export function useAuthentication(partnerId) {
|
|
|
183
156
|
isConnected,
|
|
184
157
|
});
|
|
185
158
|
}, [
|
|
159
|
+
onConnectCallback,
|
|
160
|
+
authenticateUser,
|
|
186
161
|
isAuthenticated,
|
|
187
162
|
isAuthenticating,
|
|
188
163
|
isConnected,
|
|
189
|
-
setHasStartedConnecting,
|
|
190
|
-
setIsConnected,
|
|
191
|
-
setIsAuthenticating,
|
|
192
164
|
setActiveWallet,
|
|
193
|
-
|
|
194
|
-
onConnectCallback,
|
|
165
|
+
setHasStartedConnecting,
|
|
195
166
|
setIsAuthenticated,
|
|
167
|
+
setIsAuthenticating,
|
|
168
|
+
setIsConnected,
|
|
196
169
|
setUser,
|
|
197
|
-
logout,
|
|
198
170
|
]);
|
|
171
|
+
const logout = useCallback(async (callback) => {
|
|
172
|
+
if (activeWallet) {
|
|
173
|
+
debug("@@logout:activeWallet", activeWallet);
|
|
174
|
+
disconnect(activeWallet);
|
|
175
|
+
debug("@@logout:activeWallet", activeWallet);
|
|
176
|
+
}
|
|
177
|
+
// Log out of each wallet
|
|
178
|
+
wallets.forEach(wallet => {
|
|
179
|
+
console.log("@@logging out", wallet);
|
|
180
|
+
disconnect(wallet);
|
|
181
|
+
});
|
|
182
|
+
// Delete localStorage thirdweb:connected-wallet-ids
|
|
183
|
+
// https://npc-labs.slack.com/archives/C070E6HNG85/p1750185115273099
|
|
184
|
+
if (typeof localStorage !== "undefined") {
|
|
185
|
+
localStorage.removeItem("thirdweb:connected-wallet-ids");
|
|
186
|
+
localStorage.removeItem("wagmi.store");
|
|
187
|
+
localStorage.removeItem("lastAuthProvider");
|
|
188
|
+
localStorage.removeItem("b3-user");
|
|
189
|
+
}
|
|
190
|
+
app.logout();
|
|
191
|
+
debug("@@logout:loggedOut");
|
|
192
|
+
setIsAuthenticated(false);
|
|
193
|
+
setIsConnected(false);
|
|
194
|
+
setUser();
|
|
195
|
+
callback?.();
|
|
196
|
+
}, [activeWallet, disconnect, wallets, setIsAuthenticated, setUser, setIsConnected]);
|
|
199
197
|
const { isLoading: useAutoConnectLoading } = useAutoConnect({
|
|
200
198
|
client,
|
|
201
199
|
wallets: [wallet],
|