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