@b3dotfun/sdk 0.0.20-alpha.1 → 0.0.20
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/AnySpend.js +14 -18
- package/dist/cjs/anyspend/react/components/common/CryptoPaymentMethod.js +95 -42
- package/dist/cjs/global-account/react/hooks/index.d.ts +1 -1
- package/dist/esm/anyspend/react/components/AnySpend.js +15 -19
- package/dist/esm/anyspend/react/components/common/CryptoPaymentMethod.js +98 -45
- package/dist/esm/global-account/react/hooks/index.d.ts +1 -1
- package/dist/styles/index.css +1 -1
- package/dist/types/global-account/react/hooks/index.d.ts +1 -1
- package/package.json +1 -1
- package/src/anyspend/react/components/AnySpend.tsx +22 -57
- package/src/anyspend/react/components/common/CryptoPaymentMethod.tsx +96 -61
- package/src/global-account/react/hooks/index.ts +1 -1
|
@@ -18,9 +18,9 @@ const lucide_react_1 = require("lucide-react");
|
|
|
18
18
|
const react_3 = require("motion/react");
|
|
19
19
|
const react_4 = require("react");
|
|
20
20
|
const sonner_1 = require("sonner");
|
|
21
|
-
const react_5 = require("thirdweb/react");
|
|
22
21
|
const viem_1 = require("viem");
|
|
23
22
|
const chains_1 = require("viem/chains");
|
|
23
|
+
const wagmi_1 = require("wagmi");
|
|
24
24
|
const AnySpendFingerprintWrapper_1 = require("./AnySpendFingerprintWrapper");
|
|
25
25
|
const CryptoPaymentMethod_1 = require("./common/CryptoPaymentMethod");
|
|
26
26
|
const FiatPaymentMethod_1 = require("./common/FiatPaymentMethod");
|
|
@@ -51,7 +51,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
|
|
|
51
51
|
const searchParams = (0, react_2.useSearchParamsSSR)();
|
|
52
52
|
const router = (0, react_2.useRouter)();
|
|
53
53
|
// Get wagmi account state for wallet connection
|
|
54
|
-
const
|
|
54
|
+
const wagmiAccount = (0, wagmi_1.useAccount)();
|
|
55
55
|
// Determine if we're in "buy mode" based on whether destination token props are provided
|
|
56
56
|
const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
|
|
57
57
|
// Add refs to track URL state
|
|
@@ -343,9 +343,6 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
|
|
|
343
343
|
amount: srcAmountOnrampInWei,
|
|
344
344
|
onrampVendor: getOnrampVendor(selectedFiatPaymentMethod),
|
|
345
345
|
});
|
|
346
|
-
const connectedAddress = globalAddress || connectedWallets?.[0]?.getAccount()?.address;
|
|
347
|
-
const connectedProfile = (0, react_2.useProfile)({ address: connectedAddress });
|
|
348
|
-
const connectedName = connectedProfile.data?.name?.replace(/\.b3\.fun/g, "");
|
|
349
346
|
const recipientProfile = (0, react_2.useProfile)({ address: recipientAddress });
|
|
350
347
|
const recipientName = recipientProfile.data?.name?.replace(/\.b3\.fun/g, "");
|
|
351
348
|
// Load custom recipients from local storage on mount
|
|
@@ -810,7 +807,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
|
|
|
810
807
|
setActiveTab("fiat");
|
|
811
808
|
setSelectedPaymentMethod(CryptoPaymentMethod_1.PaymentMethod.NONE); // Reset crypto payment method when switching to fiat
|
|
812
809
|
setSelectedFiatPaymentMethod(FiatPaymentMethod_1.FiatPaymentMethod.NONE); // Reset fiat payment method when switching to fiat
|
|
813
|
-
}, children: "Pay with Fiat" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-
|
|
810
|
+
}, children: "Pay with Fiat" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-primary/50 hover:text-as-primary/70 flex h-7 items-center gap-1 text-sm transition-colors", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedPaymentMethod === CryptoPaymentMethod_1.PaymentMethod.CONNECT_WALLET ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [globalAddress || wagmiAccount.address ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [globalWallet?.meta?.icon && ((0, jsx_runtime_1.jsx)("img", { src: globalWallet.meta.icon, alt: "Connected Wallet", className: "h-4 w-4 rounded-full" })), (0, jsx_runtime_1.jsx)("span", { children: (0, formatAddress_1.shortenAddress)(globalAddress || wagmiAccount.address || "") })] })) : ("Connect wallet"), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "h-4 w-4" })] })) : selectedPaymentMethod === CryptoPaymentMethod_1.PaymentMethod.TRANSFER_CRYPTO ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Transfer crypto", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
|
|
814
811
|
setIsSrcInputDirty(true);
|
|
815
812
|
setSrcAmount(value);
|
|
816
813
|
}, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: (0, number_1.formatDisplayNumber)(anyspendQuote?.data?.currencyIn?.amountUsd, { style: "currency", fallback: "" }) }), (0, jsx_runtime_1.jsx)(TokenBalance_1.TokenBalance, { token: selectedSrcToken, walletAddress: globalAddress, onChangeInput: value => {
|
|
@@ -835,7 +832,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
|
|
|
835
832
|
const tempDstAmount = dstAmount;
|
|
836
833
|
setSrcAmount(tempDstAmount);
|
|
837
834
|
setDstAmount(tempSrcAmount);
|
|
838
|
-
}, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? ((0, jsx_runtime_1.jsxs)("button", { className: (0, cn_1.cn)("text-as-
|
|
835
|
+
}, children: (0, jsx_runtime_1.jsx)("div", { className: "relative flex items-center justify-center transition-opacity", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && ((0, jsx_runtime_1.jsxs)(react_3.motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? ((0, jsx_runtime_1.jsxs)("button", { className: (0, cn_1.cn)("text-as-primary/70 flex h-7 items-center gap-2 rounded-lg px-2"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: [globalAddress && recipientAddress === globalAddress && globalWallet?.meta?.icon ? ((0, jsx_runtime_1.jsx)("img", { src: globalWallet?.meta?.icon, alt: "Current wallet", className: "bg-as-primary h-6 w-6 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs text-white", children: "\uD83E\uDD8A" })), (0, jsx_runtime_1.jsx)("div", { className: "text-sm", children: recipientName ? recipientName : (0, formatAddress_1.shortenAddress)(recipientAddress) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightCircle, { className: "h-4 w-4" })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium", children: "Select recipient" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDown, { className: "h-3 w-3" })] }))] }), isBuyMode ? (
|
|
839
836
|
// Fixed destination token display in buy mode
|
|
840
837
|
(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3", children: [selectedDstToken.metadata?.logoURI && ((0, jsx_runtime_1.jsx)("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "h-8 w-8 rounded-full" })), (0, jsx_runtime_1.jsx)("span", { className: "text-as-brand text-lg font-bold", children: selectedDstToken.symbol })] })] })) : ((0, jsx_runtime_1.jsx)(OrderTokenAmount_1.OrderTokenAmount, { address: recipientAddress, context: "to", inputValue: dstAmount, onChangeInput: value => {
|
|
841
838
|
setIsSrcInputDirty(false);
|
|
@@ -894,27 +891,26 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
|
|
|
894
891
|
setActivePanel(PanelView.MAIN); // Go back to main panel to show updated pricing
|
|
895
892
|
}, srcAmountOnRamp: srcAmountOnRamp, isMainnet: isMainnet }));
|
|
896
893
|
// Add tabs to the main component when no order is loaded
|
|
897
|
-
return ((0, jsx_runtime_1.jsx)(react_2.StyleRoot, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("mx-auto w-full max-w-[460px]", mode === "page" &&
|
|
898
|
-
"bg-as-surface-primary border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: (0, jsx_runtime_1.jsx)(react_2.TransitionPanel, { activeIndex: orderId
|
|
894
|
+
return ((0, jsx_runtime_1.jsx)(react_2.StyleRoot, { children: (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("mx-auto w-full max-w-[460px]", mode === "page" && "bg-as-surface-primary border-as-border-secondary rounded-2xl border p-6 shadow-xl"), children: (0, jsx_runtime_1.jsx)(react_2.TransitionPanel, { activeIndex: orderId
|
|
899
895
|
? oat
|
|
900
896
|
? PanelView.ORDER_DETAILS
|
|
901
897
|
: PanelView.LOADING
|
|
902
898
|
: activePanel === PanelView.ORDER_DETAILS
|
|
903
899
|
? PanelView.MAIN
|
|
904
|
-
: activePanel, className: (0, cn_1.cn)("
|
|
900
|
+
: activePanel, className: (0, cn_1.cn)("overflow-hidden", {
|
|
905
901
|
"mt-0": mode === "modal",
|
|
906
902
|
}), variants: {
|
|
907
903
|
enter: { x: 300, opacity: 0 },
|
|
908
904
|
center: { x: 0, opacity: 1 },
|
|
909
905
|
exit: { x: -300, opacity: 0 },
|
|
910
906
|
}, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
|
|
911
|
-
(0, jsx_runtime_1.jsx)("div", {
|
|
912
|
-
(0, jsx_runtime_1.jsx)("div", {
|
|
913
|
-
(0, jsx_runtime_1.jsx)("div", {
|
|
914
|
-
(0, jsx_runtime_1.jsx)("div", {
|
|
915
|
-
(0, jsx_runtime_1.jsx)("div", {
|
|
916
|
-
(0, jsx_runtime_1.jsx)("div", {
|
|
917
|
-
(0, jsx_runtime_1.jsx)("div", {
|
|
918
|
-
(0, jsx_runtime_1.jsx)("div", {
|
|
907
|
+
(0, jsx_runtime_1.jsx)("div", { children: mainView }, "main-view"),
|
|
908
|
+
(0, jsx_runtime_1.jsx)("div", { children: historyView }, "history-view"),
|
|
909
|
+
(0, jsx_runtime_1.jsx)("div", { children: orderDetailsView }, "order-details-view"),
|
|
910
|
+
(0, jsx_runtime_1.jsx)("div", { children: OrderDetails_1.OrderDetailsLoadingView }, "loading-view"),
|
|
911
|
+
(0, jsx_runtime_1.jsx)("div", { children: onrampPaymentView }, "fiat-payment-view"),
|
|
912
|
+
(0, jsx_runtime_1.jsx)("div", { children: recipientSelectionView }, "recipient-selection-view"),
|
|
913
|
+
(0, jsx_runtime_1.jsx)("div", { children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
|
|
914
|
+
(0, jsx_runtime_1.jsx)("div", { children: fiatPaymentMethodView }, "fiat-payment-method-view"),
|
|
919
915
|
] }) }) }));
|
|
920
916
|
}
|
|
@@ -5,16 +5,12 @@ exports.PaymentMethod = void 0;
|
|
|
5
5
|
exports.CryptoPaymentMethod = CryptoPaymentMethod;
|
|
6
6
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
7
|
const react_1 = require("../../../../global-account/react");
|
|
8
|
-
const b3Chain_1 = require("../../../../shared/constants/chains/b3Chain");
|
|
9
8
|
const cn_1 = require("../../../../shared/utils/cn");
|
|
10
9
|
const formatAddress_1 = require("../../../../shared/utils/formatAddress");
|
|
11
|
-
const thirdweb_1 = require("../../../../shared/utils/thirdweb");
|
|
12
10
|
const lucide_react_1 = require("lucide-react");
|
|
13
11
|
const react_2 = require("react");
|
|
14
|
-
const react_dom_1 = require("react-dom");
|
|
15
12
|
const sonner_1 = require("sonner");
|
|
16
13
|
const react_3 = require("thirdweb/react");
|
|
17
|
-
const wallets_1 = require("thirdweb/wallets");
|
|
18
14
|
const wagmi_1 = require("wagmi");
|
|
19
15
|
var PaymentMethod;
|
|
20
16
|
(function (PaymentMethod) {
|
|
@@ -23,43 +19,100 @@ var PaymentMethod;
|
|
|
23
19
|
PaymentMethod["TRANSFER_CRYPTO"] = "transfer_crypto";
|
|
24
20
|
})(PaymentMethod || (exports.PaymentMethod = PaymentMethod = {}));
|
|
25
21
|
function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
|
|
26
|
-
const {
|
|
22
|
+
const { connect, connectors, isPending: isConnecting, error: connectError } = (0, wagmi_1.useConnect)();
|
|
23
|
+
const wagmiAccount = (0, wagmi_1.useAccount)();
|
|
24
|
+
const { address: globalAddress, connectedEOAWallet, isActiveEOAWallet, wallet: globalWallet } = (0, react_1.useAccountWallet)();
|
|
27
25
|
const { disconnect } = (0, wagmi_1.useDisconnect)();
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
26
|
+
const previousAddress = (0, react_2.useRef)(globalAddress);
|
|
27
|
+
const setActiveWallet = (0, react_3.useSetActiveWallet)();
|
|
28
|
+
// Automatically set EOA wallet as active when available
|
|
29
|
+
(0, react_2.useEffect)(() => {
|
|
30
|
+
if (connectedEOAWallet) {
|
|
31
|
+
console.log("Setting active wallet", connectedEOAWallet);
|
|
32
|
+
setActiveWallet(connectedEOAWallet);
|
|
33
|
+
}
|
|
34
|
+
}, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet]);
|
|
35
|
+
// Handle wallet connection success
|
|
36
|
+
(0, react_2.useEffect)(() => {
|
|
37
|
+
if (globalAddress && previousAddress.current !== globalAddress) {
|
|
38
|
+
previousAddress.current = globalAddress;
|
|
39
|
+
sonner_1.toast.success("Wallet connected successfully");
|
|
40
|
+
// Automatically select connect wallet method and go back to main view
|
|
41
|
+
setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
42
|
+
onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
43
|
+
}
|
|
44
|
+
}, [globalAddress, setSelectedPaymentMethod, onSelectPaymentMethod]);
|
|
45
|
+
// Handle connection errors
|
|
46
|
+
(0, react_2.useEffect)(() => {
|
|
47
|
+
if (connectError) {
|
|
48
|
+
// Handle specific error cases
|
|
49
|
+
if (connectError.message.includes("Connector already connected")) {
|
|
50
|
+
// If connector is already connected, just proceed with the flow
|
|
51
|
+
console.log("Connector already connected, proceeding with selection");
|
|
52
|
+
// Use wagmi account address or global address
|
|
53
|
+
if (wagmiAccount.address || globalAddress) {
|
|
54
|
+
setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
55
|
+
onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
// Fallback: proceed anyway as the connector reports it's connected
|
|
59
|
+
setTimeout(() => {
|
|
60
|
+
setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
61
|
+
onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
62
|
+
}, 100);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
else {
|
|
66
|
+
sonner_1.toast.error(`Failed to connect wallet: ${connectError.message}`);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}, [connectError, globalAddress, wagmiAccount.address, setSelectedPaymentMethod, onSelectPaymentMethod]);
|
|
70
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-[460px] max-w-full", 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: "Choose payment method" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [!globalAddress ? (
|
|
71
|
+
// Not connected - show single connect button
|
|
72
|
+
(0, jsx_runtime_1.jsxs)("button", { onClick: () => {
|
|
73
|
+
// Prevent connecting if already connecting or if there's already a connection
|
|
74
|
+
if (isConnecting)
|
|
75
|
+
return;
|
|
76
|
+
try {
|
|
77
|
+
// Check if wagmi already has a connection
|
|
78
|
+
if (wagmiAccount.isConnected && wagmiAccount.address) {
|
|
79
|
+
// Already connected via wagmi, just proceed with selection
|
|
80
|
+
console.log("Wagmi already connected, proceeding with selection");
|
|
81
|
+
setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
82
|
+
onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
// Check if global address exists (b3 account system)
|
|
86
|
+
if (globalAddress) {
|
|
87
|
+
// Already connected via global account, just proceed with selection
|
|
88
|
+
console.log("Global address already exists, proceeding with selection");
|
|
89
|
+
setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
90
|
+
onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
// Use the first available connector or a preferred one
|
|
94
|
+
const preferredConnector = connectors.find(c => c.name.toLowerCase().includes("metamask")) || connectors[0];
|
|
95
|
+
if (preferredConnector) {
|
|
96
|
+
connect({ connector: preferredConnector });
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
catch (error) {
|
|
100
|
+
console.error("Connection error:", error);
|
|
101
|
+
sonner_1.toast.error("Failed to connect wallet. Please try again.");
|
|
102
|
+
}
|
|
103
|
+
}, disabled: isConnecting, className: "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 disabled:cursor-not-allowed disabled:opacity-50", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "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.jsxs)("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)("p", { className: "text-as-primary/60 text-sm", children: "Connect your wallet to continue" })] })] }), isConnecting ? ((0, jsx_runtime_1.jsx)("div", { className: "border-as-primary/20 border-t-as-primary h-5 w-5 animate-spin rounded-full border-2" })) : ((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" }))] })) : (
|
|
104
|
+
// Connected - show wallet info
|
|
105
|
+
(0, jsx_runtime_1.jsx)("div", { className: "bg-as-surface-primary border-as-border-secondary rounded-xl border", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [globalWallet?.meta?.icon ? ((0, jsx_runtime_1.jsx)("img", { src: globalWallet.meta.icon, alt: "Connected Wallet", className: "h-8 w-8 rounded-full" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-green-100", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { className: "h-4 w-4 text-green-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: "Connected Wallet" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60 text-sm", children: (0, formatAddress_1.shortenAddress)(globalAddress) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => {
|
|
106
|
+
setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
107
|
+
onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
108
|
+
}, className: "bg-as-brand hover:bg-as-brand/90 rounded-lg px-3 py-1.5 text-sm font-medium text-white transition-colors", children: "Use Wallet" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
|
|
109
|
+
disconnect();
|
|
110
|
+
sonner_1.toast.success("Wallet disconnected");
|
|
111
|
+
if (selectedPaymentMethod === PaymentMethod.CONNECT_WALLET) {
|
|
112
|
+
setSelectedPaymentMethod(PaymentMethod.NONE);
|
|
113
|
+
}
|
|
114
|
+
}, 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" }) })] })] }) })), (0, jsx_runtime_1.jsxs)("button", { onClick: () => {
|
|
115
|
+
setSelectedPaymentMethod(PaymentMethod.TRANSFER_CRYPTO);
|
|
116
|
+
onSelectPaymentMethod(PaymentMethod.TRANSFER_CRYPTO);
|
|
117
|
+
}, disabled: isCreatingOrder, className: "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.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" })] })] })] }) }));
|
|
65
118
|
}
|
|
@@ -18,7 +18,7 @@ export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
|
|
|
18
18
|
export { useMediaQuery } from "./useMediaQuery";
|
|
19
19
|
export { useNativeBalance, useNativeBalanceFromRPC } from "./useNativeBalance";
|
|
20
20
|
export { useOneBalance } from "./useOneBalance";
|
|
21
|
-
export { useProfile, useProfilePreference, type
|
|
21
|
+
export { useProfile, useProfilePreference, type Profile, type CombinedProfile, type PreferenceRequestBody, } from "./useProfile";
|
|
22
22
|
export { useQueryB3 } from "./useQueryB3";
|
|
23
23
|
export { useQueryBSMNT } from "./useQueryBSMNT";
|
|
24
24
|
export { useRemoveSessionKey } from "./useRemoveSessionKey";
|
|
@@ -7,13 +7,13 @@ import { cn } from "../../../shared/utils/cn.js";
|
|
|
7
7
|
import { shortenAddress } from "../../../shared/utils/formatAddress.js";
|
|
8
8
|
import { formatDisplayNumber, formatTokenAmount } from "../../../shared/utils/number.js";
|
|
9
9
|
import invariant from "invariant";
|
|
10
|
-
import { ArrowDown, ChevronLeft,
|
|
10
|
+
import { ArrowDown, ChevronLeft, ChevronRightCircle, ChevronsUpDown, CircleAlert, HistoryIcon } from "lucide-react";
|
|
11
11
|
import { motion } from "motion/react";
|
|
12
12
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
13
13
|
import { toast } from "sonner";
|
|
14
|
-
import { useConnectedWallets } from "thirdweb/react";
|
|
15
14
|
import { parseUnits } from "viem";
|
|
16
15
|
import { b3Sepolia, base, mainnet, sepolia } from "viem/chains";
|
|
16
|
+
import { useAccount } from "wagmi";
|
|
17
17
|
import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
|
|
18
18
|
import { CryptoPaymentMethod, PaymentMethod } from "./common/CryptoPaymentMethod.js";
|
|
19
19
|
import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
|
|
@@ -44,7 +44,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
|
|
|
44
44
|
const searchParams = useSearchParamsSSR();
|
|
45
45
|
const router = useRouter();
|
|
46
46
|
// Get wagmi account state for wallet connection
|
|
47
|
-
const
|
|
47
|
+
const wagmiAccount = useAccount();
|
|
48
48
|
// Determine if we're in "buy mode" based on whether destination token props are provided
|
|
49
49
|
const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
|
|
50
50
|
// Add refs to track URL state
|
|
@@ -336,9 +336,6 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
|
|
|
336
336
|
amount: srcAmountOnrampInWei,
|
|
337
337
|
onrampVendor: getOnrampVendor(selectedFiatPaymentMethod),
|
|
338
338
|
});
|
|
339
|
-
const connectedAddress = globalAddress || connectedWallets?.[0]?.getAccount()?.address;
|
|
340
|
-
const connectedProfile = useProfile({ address: connectedAddress });
|
|
341
|
-
const connectedName = connectedProfile.data?.name?.replace(/\.b3\.fun/g, "");
|
|
342
339
|
const recipientProfile = useProfile({ address: recipientAddress });
|
|
343
340
|
const recipientName = recipientProfile.data?.name?.replace(/\.b3\.fun/g, "");
|
|
344
341
|
// Load custom recipients from local storage on mount
|
|
@@ -803,7 +800,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
|
|
|
803
800
|
setActiveTab("fiat");
|
|
804
801
|
setSelectedPaymentMethod(PaymentMethod.NONE); // Reset crypto payment method when switching to fiat
|
|
805
802
|
setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE); // Reset fiat payment method when switching to fiat
|
|
806
|
-
}, children: "Pay with Fiat" })] }) }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-
|
|
803
|
+
}, children: "Pay with Fiat" })] }) }), _jsxs("div", { className: "relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2", children: [activeTab === "crypto" ? (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Pay" }), _jsx("button", { className: "text-as-primary/50 hover:text-as-primary/70 flex h-7 items-center gap-1 text-sm transition-colors", onClick: () => setActivePanel(PanelView.CRYPTO_PAYMENT_METHOD), children: selectedPaymentMethod === PaymentMethod.CONNECT_WALLET ? (_jsxs(_Fragment, { children: [globalAddress || wagmiAccount.address ? (_jsxs(_Fragment, { children: [globalWallet?.meta?.icon && (_jsx("img", { src: globalWallet.meta.icon, alt: "Connected Wallet", className: "h-4 w-4 rounded-full" })), _jsx("span", { children: shortenAddress(globalAddress || wagmiAccount.address || "") })] })) : ("Connect wallet"), _jsx(ChevronRightCircle, { className: "h-4 w-4" })] })) : selectedPaymentMethod === PaymentMethod.TRANSFER_CRYPTO ? (_jsxs(_Fragment, { children: ["Transfer crypto", _jsx(ChevronRightCircle, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRightCircle, { className: "h-4 w-4" })] })) })] }), _jsx(OrderTokenAmount, { address: globalAddress, context: "from", inputValue: srcAmount, onChangeInput: value => {
|
|
807
804
|
setIsSrcInputDirty(true);
|
|
808
805
|
setSrcAmount(value);
|
|
809
806
|
}, chainId: selectedSrcChainId, setChainId: setSelectedSrcChainId, token: selectedSrcToken, setToken: setSelectedSrcToken }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-5 items-center text-sm", children: formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, { style: "currency", fallback: "" }) }), _jsx(TokenBalance, { token: selectedSrcToken, walletAddress: globalAddress, onChangeInput: value => {
|
|
@@ -828,7 +825,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
|
|
|
828
825
|
const tempDstAmount = dstAmount;
|
|
829
826
|
setSrcAmount(tempDstAmount);
|
|
830
827
|
setDstAmount(tempSrcAmount);
|
|
831
|
-
}, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? (_jsxs("button", { className: cn("text-as-
|
|
828
|
+
}, children: _jsx("div", { className: "relative flex items-center justify-center transition-opacity", children: _jsx(ArrowDown, { className: "text-as-primary/50 h-5 w-5" }) }) }), activeTab !== "fiat" && (_jsxs(motion.div, { initial: { opacity: 0, y: 20, filter: "blur(10px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: 0.3, delay: 0.1, ease: "easeInOut" }, className: "bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6", children: [_jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-primary/50 flex h-7 items-center text-sm", children: "Receive" }), recipientAddress ? (_jsxs("button", { className: cn("text-as-primary/70 flex h-7 items-center gap-2 rounded-lg px-2"), onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: [globalAddress && recipientAddress === globalAddress && globalWallet?.meta?.icon ? (_jsx("img", { src: globalWallet?.meta?.icon, alt: "Current wallet", className: "bg-as-primary h-6 w-6 rounded-full" })) : (_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-orange-500 text-xs text-white", children: "\uD83E\uDD8A" })), _jsx("div", { className: "text-sm", children: recipientName ? recipientName : shortenAddress(recipientAddress) }), _jsx(ChevronRightCircle, { className: "h-4 w-4" })] })) : (_jsxs("button", { className: "text-as-primary/70 flex items-center gap-1 rounded-lg", onClick: () => setActivePanel(PanelView.RECIPIENT_SELECTION), children: [_jsx("div", { className: "text-sm font-medium", children: "Select recipient" }), _jsx(ChevronsUpDown, { className: "h-3 w-3" })] }))] }), isBuyMode ? (
|
|
832
829
|
// Fixed destination token display in buy mode
|
|
833
830
|
_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-as-primary text-2xl font-bold", children: dstAmount || "0" }), _jsxs("div", { className: "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3", children: [selectedDstToken.metadata?.logoURI && (_jsx("img", { src: selectedDstToken.metadata.logoURI, alt: selectedDstToken.symbol, className: "h-8 w-8 rounded-full" })), _jsx("span", { className: "text-as-brand text-lg font-bold", children: selectedDstToken.symbol })] })] })) : (_jsx(OrderTokenAmount, { address: recipientAddress, context: "to", inputValue: dstAmount, onChangeInput: value => {
|
|
834
831
|
setIsSrcInputDirty(false);
|
|
@@ -887,27 +884,26 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, isMai
|
|
|
887
884
|
setActivePanel(PanelView.MAIN); // Go back to main panel to show updated pricing
|
|
888
885
|
}, srcAmountOnRamp: srcAmountOnRamp, isMainnet: isMainnet }));
|
|
889
886
|
// Add tabs to the main component when no order is loaded
|
|
890
|
-
return (_jsx(StyleRoot, { children: _jsx("div", { className: cn("mx-auto w-full max-w-[460px]", mode === "page" &&
|
|
891
|
-
"bg-as-surface-primary border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl"), children: _jsx(TransitionPanel, { activeIndex: orderId
|
|
887
|
+
return (_jsx(StyleRoot, { children: _jsx("div", { className: cn("mx-auto w-full max-w-[460px]", mode === "page" && "bg-as-surface-primary border-as-border-secondary rounded-2xl border p-6 shadow-xl"), children: _jsx(TransitionPanel, { activeIndex: orderId
|
|
892
888
|
? oat
|
|
893
889
|
? PanelView.ORDER_DETAILS
|
|
894
890
|
: PanelView.LOADING
|
|
895
891
|
: activePanel === PanelView.ORDER_DETAILS
|
|
896
892
|
? PanelView.MAIN
|
|
897
|
-
: activePanel, className: cn("
|
|
893
|
+
: activePanel, className: cn("overflow-hidden", {
|
|
898
894
|
"mt-0": mode === "modal",
|
|
899
895
|
}), variants: {
|
|
900
896
|
enter: { x: 300, opacity: 0 },
|
|
901
897
|
center: { x: 0, opacity: 1 },
|
|
902
898
|
exit: { x: -300, opacity: 0 },
|
|
903
899
|
}, transition: { type: "spring", stiffness: 300, damping: 30 }, children: [
|
|
904
|
-
_jsx("div", {
|
|
905
|
-
_jsx("div", {
|
|
906
|
-
_jsx("div", {
|
|
907
|
-
_jsx("div", {
|
|
908
|
-
_jsx("div", {
|
|
909
|
-
_jsx("div", {
|
|
910
|
-
_jsx("div", {
|
|
911
|
-
_jsx("div", {
|
|
900
|
+
_jsx("div", { children: mainView }, "main-view"),
|
|
901
|
+
_jsx("div", { children: historyView }, "history-view"),
|
|
902
|
+
_jsx("div", { children: orderDetailsView }, "order-details-view"),
|
|
903
|
+
_jsx("div", { children: OrderDetailsLoadingView }, "loading-view"),
|
|
904
|
+
_jsx("div", { children: onrampPaymentView }, "fiat-payment-view"),
|
|
905
|
+
_jsx("div", { children: recipientSelectionView }, "recipient-selection-view"),
|
|
906
|
+
_jsx("div", { children: cryptoPaymentMethodView }, "crypto-payment-method-view"),
|
|
907
|
+
_jsx("div", { children: fiatPaymentMethodView }, "fiat-payment-method-view"),
|
|
912
908
|
] }) }) }));
|
|
913
909
|
}
|
|
@@ -1,17 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useAccountWallet } from "../../../../global-account/react/index.js";
|
|
4
|
-
import { thirdwebB3Mainnet } from "../../../../shared/constants/chains/b3Chain.js";
|
|
5
4
|
import { cn } from "../../../../shared/utils/cn.js";
|
|
6
5
|
import { shortenAddress } from "../../../../shared/utils/formatAddress.js";
|
|
7
|
-
import { client } from "../../../../shared/utils/thirdweb.js";
|
|
8
6
|
import { ChevronLeft, ChevronRightCircle, Wallet, X } from "lucide-react";
|
|
9
|
-
import {
|
|
10
|
-
import { createPortal } from "react-dom";
|
|
7
|
+
import { useEffect, useRef } from "react";
|
|
11
8
|
import { toast } from "sonner";
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import { useDisconnect } from "wagmi";
|
|
9
|
+
import { useSetActiveWallet } from "thirdweb/react";
|
|
10
|
+
import { useAccount, useConnect, useDisconnect } from "wagmi";
|
|
15
11
|
export var PaymentMethod;
|
|
16
12
|
(function (PaymentMethod) {
|
|
17
13
|
PaymentMethod["NONE"] = "none";
|
|
@@ -19,43 +15,100 @@ export var PaymentMethod;
|
|
|
19
15
|
PaymentMethod["TRANSFER_CRYPTO"] = "transfer_crypto";
|
|
20
16
|
})(PaymentMethod || (PaymentMethod = {}));
|
|
21
17
|
export function CryptoPaymentMethod({ selectedPaymentMethod, setSelectedPaymentMethod, isCreatingOrder, onBack, onSelectPaymentMethod, }) {
|
|
22
|
-
const {
|
|
18
|
+
const { connect, connectors, isPending: isConnecting, error: connectError } = useConnect();
|
|
19
|
+
const wagmiAccount = useAccount();
|
|
20
|
+
const { address: globalAddress, connectedEOAWallet, isActiveEOAWallet, wallet: globalWallet } = useAccountWallet();
|
|
23
21
|
const { disconnect } = useDisconnect();
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
22
|
+
const previousAddress = useRef(globalAddress);
|
|
23
|
+
const setActiveWallet = useSetActiveWallet();
|
|
24
|
+
// Automatically set EOA wallet as active when available
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
if (connectedEOAWallet) {
|
|
27
|
+
console.log("Setting active wallet", connectedEOAWallet);
|
|
28
|
+
setActiveWallet(connectedEOAWallet);
|
|
29
|
+
}
|
|
30
|
+
}, [connectedEOAWallet, isActiveEOAWallet, setActiveWallet]);
|
|
31
|
+
// Handle wallet connection success
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
if (globalAddress && previousAddress.current !== globalAddress) {
|
|
34
|
+
previousAddress.current = globalAddress;
|
|
35
|
+
toast.success("Wallet connected successfully");
|
|
36
|
+
// Automatically select connect wallet method and go back to main view
|
|
37
|
+
setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
38
|
+
onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
39
|
+
}
|
|
40
|
+
}, [globalAddress, setSelectedPaymentMethod, onSelectPaymentMethod]);
|
|
41
|
+
// Handle connection errors
|
|
42
|
+
useEffect(() => {
|
|
43
|
+
if (connectError) {
|
|
44
|
+
// Handle specific error cases
|
|
45
|
+
if (connectError.message.includes("Connector already connected")) {
|
|
46
|
+
// If connector is already connected, just proceed with the flow
|
|
47
|
+
console.log("Connector already connected, proceeding with selection");
|
|
48
|
+
// Use wagmi account address or global address
|
|
49
|
+
if (wagmiAccount.address || globalAddress) {
|
|
50
|
+
setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
51
|
+
onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
52
|
+
}
|
|
53
|
+
else {
|
|
54
|
+
// Fallback: proceed anyway as the connector reports it's connected
|
|
55
|
+
setTimeout(() => {
|
|
56
|
+
setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
57
|
+
onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
58
|
+
}, 100);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
else {
|
|
62
|
+
toast.error(`Failed to connect wallet: ${connectError.message}`);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}, [connectError, globalAddress, wagmiAccount.address, setSelectedPaymentMethod, onSelectPaymentMethod]);
|
|
66
|
+
return (_jsx("div", { className: "mx-auto w-[460px] max-w-full", 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: "Choose payment method" }) }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [!globalAddress ? (
|
|
67
|
+
// Not connected - show single connect button
|
|
68
|
+
_jsxs("button", { onClick: () => {
|
|
69
|
+
// Prevent connecting if already connecting or if there's already a connection
|
|
70
|
+
if (isConnecting)
|
|
71
|
+
return;
|
|
72
|
+
try {
|
|
73
|
+
// Check if wagmi already has a connection
|
|
74
|
+
if (wagmiAccount.isConnected && wagmiAccount.address) {
|
|
75
|
+
// Already connected via wagmi, just proceed with selection
|
|
76
|
+
console.log("Wagmi already connected, proceeding with selection");
|
|
77
|
+
setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
78
|
+
onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
// Check if global address exists (b3 account system)
|
|
82
|
+
if (globalAddress) {
|
|
83
|
+
// Already connected via global account, just proceed with selection
|
|
84
|
+
console.log("Global address already exists, proceeding with selection");
|
|
85
|
+
setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
86
|
+
onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
// Use the first available connector or a preferred one
|
|
90
|
+
const preferredConnector = connectors.find(c => c.name.toLowerCase().includes("metamask")) || connectors[0];
|
|
91
|
+
if (preferredConnector) {
|
|
92
|
+
connect({ connector: preferredConnector });
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
catch (error) {
|
|
96
|
+
console.error("Connection error:", error);
|
|
97
|
+
toast.error("Failed to connect wallet. Please try again.");
|
|
98
|
+
}
|
|
99
|
+
}, disabled: isConnecting, className: "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 disabled:cursor-not-allowed disabled:opacity-50", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "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" }) }), _jsxs("div", { className: "flex flex-col items-start text-left", children: [_jsx("h4", { className: "text-as-primary font-semibold", children: "Connect wallet" }), _jsx("p", { className: "text-as-primary/60 text-sm", children: "Connect your wallet to continue" })] })] }), isConnecting ? (_jsx("div", { className: "border-as-primary/20 border-t-as-primary h-5 w-5 animate-spin rounded-full border-2" })) : (_jsx(ChevronRightCircle, { className: "text-as-primary/40 group-hover:text-as-primary/60 h-5 w-5 transition-colors" }))] })) : (
|
|
100
|
+
// Connected - show wallet info
|
|
101
|
+
_jsx("div", { className: "bg-as-surface-primary border-as-border-secondary rounded-xl border", children: _jsxs("div", { className: "flex items-center justify-between p-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [globalWallet?.meta?.icon ? (_jsx("img", { src: globalWallet.meta.icon, alt: "Connected Wallet", className: "h-8 w-8 rounded-full" })) : (_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-green-100", children: _jsx(Wallet, { className: "h-4 w-4 text-green-600" }) })), _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-as-primary font-semibold", children: "Connected Wallet" }), _jsx("span", { className: "text-as-primary/60 text-sm", children: shortenAddress(globalAddress) })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { onClick: () => {
|
|
102
|
+
setSelectedPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
103
|
+
onSelectPaymentMethod(PaymentMethod.CONNECT_WALLET);
|
|
104
|
+
}, className: "bg-as-brand hover:bg-as-brand/90 rounded-lg px-3 py-1.5 text-sm font-medium text-white transition-colors", children: "Use Wallet" }), _jsx("button", { onClick: () => {
|
|
105
|
+
disconnect();
|
|
106
|
+
toast.success("Wallet disconnected");
|
|
107
|
+
if (selectedPaymentMethod === PaymentMethod.CONNECT_WALLET) {
|
|
108
|
+
setSelectedPaymentMethod(PaymentMethod.NONE);
|
|
109
|
+
}
|
|
110
|
+
}, 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" }) })] })] }) })), _jsxs("button", { onClick: () => {
|
|
111
|
+
setSelectedPaymentMethod(PaymentMethod.TRANSFER_CRYPTO);
|
|
112
|
+
onSelectPaymentMethod(PaymentMethod.TRANSFER_CRYPTO);
|
|
113
|
+
}, disabled: isCreatingOrder, className: "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: [_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" })] })] })] }) }));
|
|
61
114
|
}
|