@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
|
@@ -8,8 +8,12 @@ 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");
|
|
11
12
|
const lucide_react_1 = require("lucide-react");
|
|
12
|
-
const
|
|
13
|
+
const react_3 = require("react");
|
|
14
|
+
const react_dom_1 = require("react-dom");
|
|
15
|
+
const react_4 = require("thirdweb/react");
|
|
16
|
+
const wallets_1 = require("thirdweb/wallets");
|
|
13
17
|
const wagmi_1 = require("wagmi");
|
|
14
18
|
const useConnectedWalletDisplay_1 = require("../../hooks/useConnectedWalletDisplay");
|
|
15
19
|
var CryptoPaymentMethodType;
|
|
@@ -22,80 +26,193 @@ var CryptoPaymentMethodType;
|
|
|
22
26
|
function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
|
|
23
27
|
const { connectedEOAWallet: connectedEOAWallet, connectedSmartWallet: connectedSmartWallet } = (0, react_1.useAccountWallet)();
|
|
24
28
|
const { connector, address } = (0, wagmi_1.useAccount)();
|
|
29
|
+
const { connect, connectors, isPending } = (0, wagmi_1.useConnect)();
|
|
25
30
|
const { disconnect } = (0, wagmi_1.useDisconnect)();
|
|
26
|
-
const {
|
|
27
|
-
const
|
|
28
|
-
const
|
|
31
|
+
const { data: walletClient } = (0, wagmi_1.useWalletClient)();
|
|
32
|
+
const [showWalletModal, setShowWalletModal] = (0, react_3.useState)(false);
|
|
33
|
+
const setActiveWallet = (0, react_4.useSetActiveWallet)();
|
|
34
|
+
const { data: eoaWalletInfo } = (0, react_4.useWalletInfo)(connectedEOAWallet?.id);
|
|
35
|
+
const isConnected = !!connectedEOAWallet;
|
|
29
36
|
const globalAddress = connectedSmartWallet?.getAccount()?.address;
|
|
30
37
|
// Use custom hook to determine wallet display logic
|
|
31
38
|
const { shouldShowConnectedEOA, shouldShowWagmiWallet } = (0, useConnectedWalletDisplay_1.useConnectedWalletDisplay)(selectedPaymentMethod);
|
|
32
|
-
|
|
33
|
-
|
|
39
|
+
console.log("shouldShowWagmiWallet :", shouldShowWagmiWallet);
|
|
40
|
+
// Map wagmi connector names to thirdweb wallet IDs
|
|
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
|
+
}
|
|
34
58
|
try {
|
|
35
|
-
const
|
|
36
|
-
|
|
37
|
-
|
|
59
|
+
const thirdwebWallet = (0, wallets_1.createWallet)(walletId);
|
|
60
|
+
// Connect the wallet to sync with the existing wagmi connection
|
|
61
|
+
await thirdwebWallet.connect({ client: thirdweb_1.client });
|
|
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");
|
|
38
130
|
setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
39
131
|
onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
40
|
-
|
|
132
|
+
}
|
|
133
|
+
else {
|
|
134
|
+
// Fallback: show modal for manual wallet selection
|
|
135
|
+
setShowWalletModal(true);
|
|
41
136
|
}
|
|
42
137
|
}
|
|
43
138
|
catch (error) {
|
|
44
|
-
console.error("Failed to
|
|
139
|
+
console.error("Failed to request wallet permissions:", error);
|
|
45
140
|
if (error && typeof error === "object" && "message" in error) {
|
|
46
141
|
const errorMessage = error.message.toLowerCase();
|
|
47
142
|
if (errorMessage.includes("rejected") ||
|
|
48
143
|
errorMessage.includes("denied") ||
|
|
49
144
|
errorMessage.includes("cancelled")) {
|
|
50
|
-
|
|
145
|
+
react_1.toast.error("Account selection cancelled");
|
|
51
146
|
}
|
|
52
147
|
else {
|
|
53
|
-
react_1.toast.error("Failed to
|
|
148
|
+
react_1.toast.error("Failed to open account selection");
|
|
54
149
|
}
|
|
55
150
|
}
|
|
151
|
+
else {
|
|
152
|
+
react_1.toast.error("Failed to open account selection");
|
|
153
|
+
}
|
|
56
154
|
}
|
|
57
155
|
};
|
|
58
|
-
return ((0, jsx_runtime_1.
|
|
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
|
-
|
|
156
|
+
return ((0, jsx_runtime_1.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: [(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: () => {
|
|
157
|
+
react_1.toast.success("Multiple test 1");
|
|
158
|
+
setTimeout(() => react_1.toast.info("Multiple test 2"), 200);
|
|
159
|
+
setTimeout(() => react_1.toast.warning("Multiple test 3"), 400);
|
|
160
|
+
}, 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: () => {
|
|
161
|
+
setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
162
|
+
onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
163
|
+
if (connectedEOAWallet) {
|
|
164
|
+
setActiveWallet(connectedEOAWallet);
|
|
165
|
+
}
|
|
166
|
+
react_1.toast.success(`Selected ${eoaWalletInfo?.name || connector?.name || "wallet"}`);
|
|
167
|
+
}, 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
|
|
168
|
+
? "connected-wallet border-as-brand bg-as-brand/5"
|
|
169
|
+
: "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 => {
|
|
170
|
+
e.stopPropagation();
|
|
171
|
+
disconnect();
|
|
172
|
+
react_1.toast.success("Wallet disconnected");
|
|
173
|
+
if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
|
|
174
|
+
setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
|
|
175
|
+
}
|
|
176
|
+
}, 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: async () => {
|
|
177
|
+
setSelectedPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
178
|
+
onSelectPaymentMethod(CryptoPaymentMethodType.CONNECT_WALLET);
|
|
179
|
+
// Create thirdweb wallet from wagmi connector
|
|
180
|
+
if (connector?.name) {
|
|
181
|
+
const thirdwebWallet = await createThirdwebWalletFromConnector(connector.name);
|
|
182
|
+
if (thirdwebWallet) {
|
|
183
|
+
setActiveWallet(thirdwebWallet);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
react_1.toast.success(`Selected ${connector?.name || "wallet"}`);
|
|
187
|
+
}, 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
|
|
188
|
+
? "connected-wallet border-as-brand bg-as-brand/5"
|
|
189
|
+
: "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 => {
|
|
190
|
+
e.stopPropagation();
|
|
191
|
+
disconnect();
|
|
192
|
+
react_1.toast.success("Wallet disconnected");
|
|
193
|
+
if (selectedPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET) {
|
|
194
|
+
setSelectedPaymentMethod(CryptoPaymentMethodType.NONE);
|
|
195
|
+
}
|
|
196
|
+
}, 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: () => {
|
|
197
|
+
setSelectedPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
|
|
198
|
+
onSelectPaymentMethod(CryptoPaymentMethodType.GLOBAL_WALLET);
|
|
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)] }));
|
|
101
218
|
}
|
|
@@ -131,40 +131,14 @@ 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]);
|
|
160
134
|
const onConnect = (0, react_2.useCallback)(async (_walleAutoConnectedWith, allConnectedWallets) => {
|
|
161
135
|
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 });
|
|
162
141
|
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 });
|
|
168
142
|
setHasStartedConnecting(true);
|
|
169
143
|
setIsConnected(true);
|
|
170
144
|
setIsAuthenticating(true);
|
|
@@ -178,7 +152,6 @@ function useAuthentication(partnerId) {
|
|
|
178
152
|
debug("@@useAuthentication:onConnect:failed", { error });
|
|
179
153
|
setIsAuthenticated(false);
|
|
180
154
|
setUser(undefined);
|
|
181
|
-
await logout();
|
|
182
155
|
}
|
|
183
156
|
finally {
|
|
184
157
|
setIsAuthenticating(false);
|
|
@@ -189,19 +162,44 @@ function useAuthentication(partnerId) {
|
|
|
189
162
|
isConnected,
|
|
190
163
|
});
|
|
191
164
|
}, [
|
|
165
|
+
onConnectCallback,
|
|
166
|
+
authenticateUser,
|
|
192
167
|
isAuthenticated,
|
|
193
168
|
isAuthenticating,
|
|
194
169
|
isConnected,
|
|
195
|
-
setHasStartedConnecting,
|
|
196
|
-
setIsConnected,
|
|
197
|
-
setIsAuthenticating,
|
|
198
170
|
setActiveWallet,
|
|
199
|
-
|
|
200
|
-
onConnectCallback,
|
|
171
|
+
setHasStartedConnecting,
|
|
201
172
|
setIsAuthenticated,
|
|
173
|
+
setIsAuthenticating,
|
|
174
|
+
setIsConnected,
|
|
202
175
|
setUser,
|
|
203
|
-
logout,
|
|
204
176
|
]);
|
|
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]);
|
|
205
203
|
const { isLoading: useAutoConnectLoading } = (0, react_3.useAutoConnect)({
|
|
206
204
|
client: thirdweb_1.client,
|
|
207
205
|
wallets: [wallet],
|