@b3dotfun/sdk 0.0.80-alpha.1 → 0.0.80
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 +10 -23
- package/dist/cjs/anyspend/react/components/AnySpendCustom.js +6 -22
- package/dist/cjs/anyspend/react/components/common/FiatPaymentMethod.d.ts +0 -4
- package/dist/cjs/anyspend/react/components/common/FiatPaymentMethod.js +7 -14
- package/dist/cjs/anyspend/react/components/common/PanelOnramp.js +1 -7
- package/dist/esm/anyspend/react/components/AnySpend.js +10 -23
- package/dist/esm/anyspend/react/components/AnySpendCustom.js +7 -23
- package/dist/esm/anyspend/react/components/common/FiatPaymentMethod.d.ts +0 -4
- package/dist/esm/anyspend/react/components/common/FiatPaymentMethod.js +6 -13
- package/dist/esm/anyspend/react/components/common/PanelOnramp.js +2 -8
- package/dist/types/anyspend/react/components/common/FiatPaymentMethod.d.ts +0 -4
- package/package.json +1 -1
- package/src/anyspend/react/components/AnySpend.tsx +10 -24
- package/src/anyspend/react/components/AnySpendCustom.tsx +33 -42
- package/src/anyspend/react/components/common/FiatPaymentMethod.tsx +6 -14
- package/src/anyspend/react/components/common/PanelOnramp.tsx +27 -23
|
@@ -362,18 +362,18 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
362
362
|
isBalanceLoading,
|
|
363
363
|
});
|
|
364
364
|
// Get geo-based onramp options for fiat payments
|
|
365
|
-
const { geoData, coinbaseAvailablePaymentMethods,
|
|
365
|
+
const { geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support } = (0, react_1.useGeoOnrampOptions)(srcAmountOnRamp);
|
|
366
366
|
// Helper function to map payment method to onramp vendor
|
|
367
367
|
const getOnrampVendor = (paymentMethod) => {
|
|
368
368
|
switch (paymentMethod) {
|
|
369
369
|
case FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY:
|
|
370
370
|
return "coinbase";
|
|
371
371
|
case FiatPaymentMethod_1.FiatPaymentMethod.STRIPE:
|
|
372
|
-
//
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
return
|
|
372
|
+
// Determine if it's stripe onramp or stripe-web2 based on support
|
|
373
|
+
if (stripeWeb2Support?.isSupport) {
|
|
374
|
+
return "stripe-web2";
|
|
375
|
+
}
|
|
376
|
+
return undefined;
|
|
377
377
|
default:
|
|
378
378
|
return undefined;
|
|
379
379
|
}
|
|
@@ -518,9 +518,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
518
518
|
}, [activeTab, selectedSrcChainId, selectedDstChainId, selectedSrcToken.address, selectedDstToken.address]);
|
|
519
519
|
// Determine button state and text
|
|
520
520
|
const btnInfo = (0, react_4.useMemo)(() => {
|
|
521
|
-
|
|
522
|
-
const hasAmount = activeTab === "fiat" ? srcAmountOnRamp && parseFloat(srcAmountOnRamp) > 0 : activeInputAmountInWei !== "0";
|
|
523
|
-
if (!hasAmount)
|
|
521
|
+
if (activeInputAmountInWei === "0")
|
|
524
522
|
return { text: "Enter an amount", disable: true, error: false, loading: false };
|
|
525
523
|
if (isSameChainSameToken)
|
|
526
524
|
return { text: "Select a different token or chain", disable: true, error: false, loading: false };
|
|
@@ -571,7 +569,6 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
571
569
|
activeTab,
|
|
572
570
|
effectiveCryptoPaymentMethod,
|
|
573
571
|
selectedFiatPaymentMethod,
|
|
574
|
-
srcAmountOnRamp,
|
|
575
572
|
]);
|
|
576
573
|
// Handle main button click
|
|
577
574
|
const onMainButtonClick = async () => {
|
|
@@ -686,21 +683,11 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
686
683
|
paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || ""; // Use first available payment method ID
|
|
687
684
|
}
|
|
688
685
|
else if (paymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE) {
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
react_2.toast.error("Credit/Debit Card not available");
|
|
692
|
-
return;
|
|
693
|
-
}
|
|
694
|
-
vendor = "stripe";
|
|
695
|
-
paymentMethodString = "";
|
|
696
|
-
}
|
|
697
|
-
else if (paymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE_WEB2) {
|
|
698
|
-
// Stripe embedded payment form
|
|
699
|
-
if (!stripeWeb2Support.isSupport) {
|
|
700
|
-
react_2.toast.error("Pay with Card not available");
|
|
686
|
+
if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
|
|
687
|
+
react_2.toast.error("Stripe not available");
|
|
701
688
|
return;
|
|
702
689
|
}
|
|
703
|
-
vendor = "stripe-web2";
|
|
690
|
+
vendor = stripeWeb2Support && stripeWeb2Support.isSupport ? "stripe-web2" : "stripe";
|
|
704
691
|
paymentMethodString = "";
|
|
705
692
|
}
|
|
706
693
|
else {
|
|
@@ -236,11 +236,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
236
236
|
contractType: orderType === "mint_nft" ? metadata?.nftContract?.type : undefined,
|
|
237
237
|
encodedData: encodedData,
|
|
238
238
|
spenderAddress: spenderAddress,
|
|
239
|
-
onrampVendor: selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE
|
|
240
|
-
? "stripe"
|
|
241
|
-
: selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE_WEB2
|
|
242
|
-
? "stripe-web2"
|
|
243
|
-
: undefined,
|
|
239
|
+
onrampVendor: selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? "stripe-web2" : undefined,
|
|
244
240
|
});
|
|
245
241
|
}, [
|
|
246
242
|
activeTab,
|
|
@@ -582,13 +578,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
582
578
|
opacity: hasMounted ? 1 : 0,
|
|
583
579
|
y: hasMounted ? 0 : 20,
|
|
584
580
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
585
|
-
}, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: (()
|
|
586
|
-
const config = FiatPaymentMethod_1.FIAT_PAYMENT_METHOD_DISPLAY[selectedFiatPaymentMethod];
|
|
587
|
-
if (config) {
|
|
588
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: config.icon }) }), config.label] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
|
|
589
|
-
}
|
|
590
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Select payment method" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
|
|
591
|
-
})() })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_4.motion.div, { initial: false, animate: {
|
|
581
|
+
}, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "whitespace-nowrap", children: "Select payment method" }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4 shrink-0" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), recipientSection, (0, jsx_runtime_1.jsx)("div", { className: "divider w-full" }), (0, jsx_runtime_1.jsxs)(react_4.motion.div, { initial: false, animate: {
|
|
592
582
|
opacity: hasMounted ? 1 : 0,
|
|
593
583
|
y: hasMounted ? 0 : 20,
|
|
594
584
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
@@ -628,17 +618,11 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
628
618
|
setSelectedCryptoPaymentMethod(method);
|
|
629
619
|
setActivePanel(PanelView.CONFIRM_ORDER);
|
|
630
620
|
} }) }));
|
|
631
|
-
// Stable callback for fiat payment method selection
|
|
632
|
-
const handleFiatPaymentMethodSelect = (0, react_5.useCallback)((method) => {
|
|
633
|
-
setSelectedFiatPaymentMethod(method);
|
|
634
|
-
setActivePanel(PanelView.CONFIRM_ORDER);
|
|
635
|
-
}, []);
|
|
636
|
-
// Stable callback for navigating back to confirm order
|
|
637
|
-
const handleBackToConfirmOrder = (0, react_5.useCallback)(() => {
|
|
638
|
-
setActivePanel(PanelView.CONFIRM_ORDER);
|
|
639
|
-
}, []);
|
|
640
621
|
// Fiat payment method view
|
|
641
|
-
const fiatPaymentMethodView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(FiatPaymentMethod_1.FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack:
|
|
622
|
+
const fiatPaymentMethodView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(FiatPaymentMethod_1.FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onSelectPaymentMethod: (method) => {
|
|
623
|
+
setSelectedFiatPaymentMethod(method);
|
|
624
|
+
setActivePanel(PanelView.CONFIRM_ORDER);
|
|
625
|
+
}, srcAmountOnRamp: srcFiatAmount }) }));
|
|
642
626
|
// Points detail view
|
|
643
627
|
const pointsDetailView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: (0, jsx_runtime_1.jsx)(PointsDetailPanel_1.PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER) }) }));
|
|
644
628
|
// Return the TransitionPanel with all views
|
|
@@ -4,10 +4,6 @@ export declare enum FiatPaymentMethod {
|
|
|
4
4
|
STRIPE = "stripe",// Stripe redirect (one-click buy URL)
|
|
5
5
|
STRIPE_WEB2 = "stripe_web2"
|
|
6
6
|
}
|
|
7
|
-
export declare const FIAT_PAYMENT_METHOD_DISPLAY: Record<FiatPaymentMethod, {
|
|
8
|
-
icon: string;
|
|
9
|
-
label: string;
|
|
10
|
-
} | null>;
|
|
11
7
|
interface FiatPaymentMethodProps {
|
|
12
8
|
selectedPaymentMethod: FiatPaymentMethod;
|
|
13
9
|
setSelectedPaymentMethod: (method: FiatPaymentMethod) => void;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
"use client";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.
|
|
4
|
+
exports.FiatPaymentMethod = void 0;
|
|
5
5
|
exports.FiatPaymentMethodComponent = FiatPaymentMethodComponent;
|
|
6
6
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
7
|
const react_1 = require("../../../../anyspend/react");
|
|
@@ -14,13 +14,6 @@ var FiatPaymentMethod;
|
|
|
14
14
|
FiatPaymentMethod["STRIPE"] = "stripe";
|
|
15
15
|
FiatPaymentMethod["STRIPE_WEB2"] = "stripe_web2";
|
|
16
16
|
})(FiatPaymentMethod || (exports.FiatPaymentMethod = FiatPaymentMethod = {}));
|
|
17
|
-
// Shared display config for fiat payment methods
|
|
18
|
-
exports.FIAT_PAYMENT_METHOD_DISPLAY = {
|
|
19
|
-
[FiatPaymentMethod.COINBASE_PAY]: { icon: "C", label: "Coinbase Pay" },
|
|
20
|
-
[FiatPaymentMethod.STRIPE]: { icon: "S", label: "Pay via Stripe" },
|
|
21
|
-
[FiatPaymentMethod.STRIPE_WEB2]: { icon: "S", label: "Pay with Card" },
|
|
22
|
-
[FiatPaymentMethod.NONE]: null,
|
|
23
|
-
};
|
|
24
17
|
function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedPaymentMethod, onBack, onSelectPaymentMethod, srcAmountOnRamp, }) {
|
|
25
18
|
// Load geo-based onramp options like in PanelOnramp
|
|
26
19
|
const { coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = (0, react_1.useGeoOnrampOptions)(srcAmountOnRamp);
|
|
@@ -57,25 +50,25 @@ function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedPaymentM
|
|
|
57
50
|
available: true,
|
|
58
51
|
});
|
|
59
52
|
}
|
|
60
|
-
// Add Stripe redirect (one-click) if available -
|
|
53
|
+
// Add Stripe redirect (one-click) if available - primary option
|
|
61
54
|
if (stripeOnrampSupport) {
|
|
62
55
|
const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2); // Use same fee estimate
|
|
63
56
|
availablePaymentMethods.push({
|
|
64
57
|
id: FiatPaymentMethod.STRIPE,
|
|
65
|
-
name: "
|
|
66
|
-
description: "
|
|
58
|
+
name: "Credit/Debit Card",
|
|
59
|
+
description: "Pay via Stripe checkout",
|
|
67
60
|
badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
|
|
68
61
|
badgeColor: "bg-gray-100 text-gray-800",
|
|
69
62
|
available: true,
|
|
70
63
|
});
|
|
71
64
|
}
|
|
72
|
-
// Add Stripe Web2 (embedded) if available -
|
|
65
|
+
// Add Stripe Web2 (embedded) if available - secondary option
|
|
73
66
|
if (stripeWeb2Support && stripeWeb2Support.isSupport) {
|
|
74
67
|
const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2);
|
|
75
68
|
availablePaymentMethods.push({
|
|
76
69
|
id: FiatPaymentMethod.STRIPE_WEB2,
|
|
77
|
-
name: "Pay
|
|
78
|
-
description: "
|
|
70
|
+
name: "Quick Pay",
|
|
71
|
+
description: "Credit or debit card",
|
|
79
72
|
badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
|
|
80
73
|
badgeColor: "bg-gray-100 text-gray-800",
|
|
81
74
|
available: true,
|
|
@@ -78,13 +78,7 @@ function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPaymentMetho
|
|
|
78
78
|
const handleQuickAmount = (value) => {
|
|
79
79
|
setSrcAmountOnRamp(value);
|
|
80
80
|
};
|
|
81
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex h-7 w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: (()
|
|
82
|
-
const config = selectedPaymentMethod ? FiatPaymentMethod_1.FIAT_PAYMENT_METHOD_DISPLAY[selectedPaymentMethod] : null;
|
|
83
|
-
if (config) {
|
|
84
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: config.icon }) }), config.label] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }));
|
|
85
|
-
}
|
|
86
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Select payment method", (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] }));
|
|
87
|
-
})() })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center pb-2 pt-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
|
|
81
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex h-7 w-full items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), (0, jsx_runtime_1.jsx)("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: selectedPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.COINBASE_PAY ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "h-4 w-4" })] })) : selectedPaymentMethod === FiatPaymentMethod_1.FiatPaymentMethod.STRIPE ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Stripe"] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { 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.ChevronRight, { className: "h-4 w-4" })] })) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center pb-2 pt-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
|
|
88
82
|
width: `${Math.max(ONE_CHAR_WIDTH, srcAmountOnRamp.length * ONE_CHAR_WIDTH)}px`,
|
|
89
83
|
} })] }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto mb-6 flex justify-center gap-2", hideDstToken && "mb-0"), children: customUsdInputValues
|
|
90
84
|
.filter(v => !isNaN(Number(v)))
|
|
@@ -355,18 +355,18 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
355
355
|
isBalanceLoading,
|
|
356
356
|
});
|
|
357
357
|
// Get geo-based onramp options for fiat payments
|
|
358
|
-
const { geoData, coinbaseAvailablePaymentMethods,
|
|
358
|
+
const { geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
|
|
359
359
|
// Helper function to map payment method to onramp vendor
|
|
360
360
|
const getOnrampVendor = (paymentMethod) => {
|
|
361
361
|
switch (paymentMethod) {
|
|
362
362
|
case FiatPaymentMethod.COINBASE_PAY:
|
|
363
363
|
return "coinbase";
|
|
364
364
|
case FiatPaymentMethod.STRIPE:
|
|
365
|
-
//
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
return
|
|
365
|
+
// Determine if it's stripe onramp or stripe-web2 based on support
|
|
366
|
+
if (stripeWeb2Support?.isSupport) {
|
|
367
|
+
return "stripe-web2";
|
|
368
|
+
}
|
|
369
|
+
return undefined;
|
|
370
370
|
default:
|
|
371
371
|
return undefined;
|
|
372
372
|
}
|
|
@@ -511,9 +511,7 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
511
511
|
}, [activeTab, selectedSrcChainId, selectedDstChainId, selectedSrcToken.address, selectedDstToken.address]);
|
|
512
512
|
// Determine button state and text
|
|
513
513
|
const btnInfo = useMemo(() => {
|
|
514
|
-
|
|
515
|
-
const hasAmount = activeTab === "fiat" ? srcAmountOnRamp && parseFloat(srcAmountOnRamp) > 0 : activeInputAmountInWei !== "0";
|
|
516
|
-
if (!hasAmount)
|
|
514
|
+
if (activeInputAmountInWei === "0")
|
|
517
515
|
return { text: "Enter an amount", disable: true, error: false, loading: false };
|
|
518
516
|
if (isSameChainSameToken)
|
|
519
517
|
return { text: "Select a different token or chain", disable: true, error: false, loading: false };
|
|
@@ -564,7 +562,6 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
564
562
|
activeTab,
|
|
565
563
|
effectiveCryptoPaymentMethod,
|
|
566
564
|
selectedFiatPaymentMethod,
|
|
567
|
-
srcAmountOnRamp,
|
|
568
565
|
]);
|
|
569
566
|
// Handle main button click
|
|
570
567
|
const onMainButtonClick = async () => {
|
|
@@ -679,21 +676,11 @@ function AnySpendInner({ destinationTokenAddress, destinationTokenChainId, mode
|
|
|
679
676
|
paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || ""; // Use first available payment method ID
|
|
680
677
|
}
|
|
681
678
|
else if (paymentMethod === FiatPaymentMethod.STRIPE) {
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
toast.error("Credit/Debit Card not available");
|
|
685
|
-
return;
|
|
686
|
-
}
|
|
687
|
-
vendor = "stripe";
|
|
688
|
-
paymentMethodString = "";
|
|
689
|
-
}
|
|
690
|
-
else if (paymentMethod === FiatPaymentMethod.STRIPE_WEB2) {
|
|
691
|
-
// Stripe embedded payment form
|
|
692
|
-
if (!stripeWeb2Support.isSupport) {
|
|
693
|
-
toast.error("Pay with Card not available");
|
|
679
|
+
if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
|
|
680
|
+
toast.error("Stripe not available");
|
|
694
681
|
return;
|
|
695
682
|
}
|
|
696
|
-
vendor = "stripe-web2";
|
|
683
|
+
vendor = stripeWeb2Support && stripeWeb2Support.isSupport ? "stripe-web2" : "stripe";
|
|
697
684
|
paymentMethodString = "";
|
|
698
685
|
}
|
|
699
686
|
else {
|
|
@@ -19,7 +19,7 @@ import { useRecipientAddressState } from "../hooks/useRecipientAddressState.js";
|
|
|
19
19
|
import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper.js";
|
|
20
20
|
import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod.js";
|
|
21
21
|
import { FeeBreakDown } from "./common/FeeBreakDown.js";
|
|
22
|
-
import {
|
|
22
|
+
import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod.js";
|
|
23
23
|
import { OrderDetails } from "./common/OrderDetails.js";
|
|
24
24
|
import { OrderHistory } from "./common/OrderHistory.js";
|
|
25
25
|
import { OrderToken } from "./common/OrderToken.js";
|
|
@@ -197,11 +197,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
197
197
|
contractType: orderType === "mint_nft" ? metadata?.nftContract?.type : undefined,
|
|
198
198
|
encodedData: encodedData,
|
|
199
199
|
spenderAddress: spenderAddress,
|
|
200
|
-
onrampVendor: selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE
|
|
201
|
-
? "stripe"
|
|
202
|
-
: selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE_WEB2
|
|
203
|
-
? "stripe-web2"
|
|
204
|
-
: undefined,
|
|
200
|
+
onrampVendor: selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? "stripe-web2" : undefined,
|
|
205
201
|
});
|
|
206
202
|
}, [
|
|
207
203
|
activeTab,
|
|
@@ -543,13 +539,7 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
543
539
|
opacity: hasMounted ? 1 : 0,
|
|
544
540
|
y: hasMounted ? 0 : 20,
|
|
545
541
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
546
|
-
}, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), _jsx("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: (()
|
|
547
|
-
const config = FIAT_PAYMENT_METHOD_DISPLAY[selectedFiatPaymentMethod];
|
|
548
|
-
if (config) {
|
|
549
|
-
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [_jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: config.icon }) }), config.label] }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
|
|
550
|
-
}
|
|
551
|
-
return (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Select payment method" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] }));
|
|
552
|
-
})() })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs(motion.div, { initial: false, animate: {
|
|
542
|
+
}, transition: { duration: 0.3, delay: 0, ease: "easeInOut" }, className: "relative flex w-full items-center justify-between", children: [_jsx("div", { className: "text-as-tertiarry flex h-7 items-center text-sm", children: "Pay with" }), _jsx("button", { className: "text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700", onClick: () => setActivePanel(PanelView.FIAT_PAYMENT_METHOD), children: selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [_jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 whitespace-nowrap", children: [_jsx("div", { className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Credit/Debit Card"] }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "whitespace-nowrap", children: "Select payment method" }), _jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })] })) })] }), _jsx("div", { className: "divider w-full" }), recipientSection, _jsx("div", { className: "divider w-full" }), _jsxs(motion.div, { initial: false, animate: {
|
|
553
543
|
opacity: hasMounted ? 1 : 0,
|
|
554
544
|
y: hasMounted ? 0 : 20,
|
|
555
545
|
filter: hasMounted ? "blur(0px)" : "blur(10px)",
|
|
@@ -589,17 +579,11 @@ function AnySpendCustomInner({ loadOrder, mode = "modal", activeTab: activeTabPr
|
|
|
589
579
|
setSelectedCryptoPaymentMethod(method);
|
|
590
580
|
setActivePanel(PanelView.CONFIRM_ORDER);
|
|
591
581
|
} }) }));
|
|
592
|
-
// Stable callback for fiat payment method selection
|
|
593
|
-
const handleFiatPaymentMethodSelect = useCallback((method) => {
|
|
594
|
-
setSelectedFiatPaymentMethod(method);
|
|
595
|
-
setActivePanel(PanelView.CONFIRM_ORDER);
|
|
596
|
-
}, []);
|
|
597
|
-
// Stable callback for navigating back to confirm order
|
|
598
|
-
const handleBackToConfirmOrder = useCallback(() => {
|
|
599
|
-
setActivePanel(PanelView.CONFIRM_ORDER);
|
|
600
|
-
}, []);
|
|
601
582
|
// Fiat payment method view
|
|
602
|
-
const fiatPaymentMethodView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack:
|
|
583
|
+
const fiatPaymentMethodView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(FiatPaymentMethodComponent, { selectedPaymentMethod: selectedFiatPaymentMethod, setSelectedPaymentMethod: setSelectedFiatPaymentMethod, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER), onSelectPaymentMethod: (method) => {
|
|
584
|
+
setSelectedFiatPaymentMethod(method);
|
|
585
|
+
setActivePanel(PanelView.CONFIRM_ORDER);
|
|
586
|
+
}, srcAmountOnRamp: srcFiatAmount }) }));
|
|
603
587
|
// Points detail view
|
|
604
588
|
const pointsDetailView = (_jsx("div", { className: cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4"), children: _jsx(PointsDetailPanel, { pointsAmount: anyspendQuote?.data?.pointsAmount || 0, onBack: () => setActivePanel(PanelView.CONFIRM_ORDER) }) }));
|
|
605
589
|
// Return the TransitionPanel with all views
|
|
@@ -4,10 +4,6 @@ export declare enum FiatPaymentMethod {
|
|
|
4
4
|
STRIPE = "stripe",// Stripe redirect (one-click buy URL)
|
|
5
5
|
STRIPE_WEB2 = "stripe_web2"
|
|
6
6
|
}
|
|
7
|
-
export declare const FIAT_PAYMENT_METHOD_DISPLAY: Record<FiatPaymentMethod, {
|
|
8
|
-
icon: string;
|
|
9
|
-
label: string;
|
|
10
|
-
} | null>;
|
|
11
7
|
interface FiatPaymentMethodProps {
|
|
12
8
|
selectedPaymentMethod: FiatPaymentMethod;
|
|
13
9
|
setSelectedPaymentMethod: (method: FiatPaymentMethod) => void;
|
|
@@ -10,13 +10,6 @@ export var FiatPaymentMethod;
|
|
|
10
10
|
FiatPaymentMethod["STRIPE"] = "stripe";
|
|
11
11
|
FiatPaymentMethod["STRIPE_WEB2"] = "stripe_web2";
|
|
12
12
|
})(FiatPaymentMethod || (FiatPaymentMethod = {}));
|
|
13
|
-
// Shared display config for fiat payment methods
|
|
14
|
-
export const FIAT_PAYMENT_METHOD_DISPLAY = {
|
|
15
|
-
[FiatPaymentMethod.COINBASE_PAY]: { icon: "C", label: "Coinbase Pay" },
|
|
16
|
-
[FiatPaymentMethod.STRIPE]: { icon: "S", label: "Pay via Stripe" },
|
|
17
|
-
[FiatPaymentMethod.STRIPE_WEB2]: { icon: "S", label: "Pay with Card" },
|
|
18
|
-
[FiatPaymentMethod.NONE]: null,
|
|
19
|
-
};
|
|
20
13
|
export function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedPaymentMethod, onBack, onSelectPaymentMethod, srcAmountOnRamp, }) {
|
|
21
14
|
// Load geo-based onramp options like in PanelOnramp
|
|
22
15
|
const { coinbaseAvailablePaymentMethods, stripeOnrampSupport, stripeWeb2Support, isLoading: isLoadingGeoOnramp, } = useGeoOnrampOptions(srcAmountOnRamp);
|
|
@@ -53,25 +46,25 @@ export function FiatPaymentMethodComponent({ selectedPaymentMethod, setSelectedP
|
|
|
53
46
|
available: true,
|
|
54
47
|
});
|
|
55
48
|
}
|
|
56
|
-
// Add Stripe redirect (one-click) if available -
|
|
49
|
+
// Add Stripe redirect (one-click) if available - primary option
|
|
57
50
|
if (stripeOnrampSupport) {
|
|
58
51
|
const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2); // Use same fee estimate
|
|
59
52
|
availablePaymentMethods.push({
|
|
60
53
|
id: FiatPaymentMethod.STRIPE,
|
|
61
|
-
name: "
|
|
62
|
-
description: "
|
|
54
|
+
name: "Credit/Debit Card",
|
|
55
|
+
description: "Pay via Stripe checkout",
|
|
63
56
|
badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
|
|
64
57
|
badgeColor: "bg-gray-100 text-gray-800",
|
|
65
58
|
available: true,
|
|
66
59
|
});
|
|
67
60
|
}
|
|
68
|
-
// Add Stripe Web2 (embedded) if available -
|
|
61
|
+
// Add Stripe Web2 (embedded) if available - secondary option
|
|
69
62
|
if (stripeWeb2Support && stripeWeb2Support.isSupport) {
|
|
70
63
|
const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2);
|
|
71
64
|
availablePaymentMethods.push({
|
|
72
65
|
id: FiatPaymentMethod.STRIPE_WEB2,
|
|
73
|
-
name: "Pay
|
|
74
|
-
description: "
|
|
66
|
+
name: "Quick Pay",
|
|
67
|
+
description: "Credit or debit card",
|
|
75
68
|
badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
|
|
76
69
|
badgeColor: "bg-gray-100 text-gray-800",
|
|
77
70
|
available: true,
|
|
@@ -6,7 +6,7 @@ import { cn, formatUsername } from "../../../../shared/utils/index.js";
|
|
|
6
6
|
import { formatAddress } from "../../../../shared/utils/formatAddress.js";
|
|
7
7
|
import { ChevronRight, Info, Wallet } from "lucide-react";
|
|
8
8
|
import { useRef } from "react";
|
|
9
|
-
import {
|
|
9
|
+
import { FiatPaymentMethod } from "./FiatPaymentMethod.js";
|
|
10
10
|
import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat.js";
|
|
11
11
|
import { PointsBadge } from "./PointsBadge.js";
|
|
12
12
|
const ONE_CHAR_WIDTH = 30;
|
|
@@ -75,13 +75,7 @@ export function PanelOnramp({ srcAmountOnRamp, setSrcAmountOnRamp, selectedPayme
|
|
|
75
75
|
const handleQuickAmount = (value) => {
|
|
76
76
|
setSrcAmountOnRamp(value);
|
|
77
77
|
};
|
|
78
|
-
return (_jsxs("div", { className: "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [_jsxs("div", { className: "flex h-7 w-full items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: (()
|
|
79
|
-
const config = selectedPaymentMethod ? FIAT_PAYMENT_METHOD_DISPLAY[selectedPaymentMethod] : null;
|
|
80
|
-
if (config) {
|
|
81
|
-
return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: config.icon }) }), config.label] }), _jsx(ChevronRight, { className: "h-4 w-4" })] }));
|
|
82
|
-
}
|
|
83
|
-
return (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] }));
|
|
84
|
-
})() })] }), _jsx("div", { className: "flex items-center justify-center pb-2 pt-8", children: _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), _jsx(Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
|
|
78
|
+
return (_jsxs("div", { className: "panel-onramp bg-as-surface-primary flex w-full flex-col", children: [_jsxs("div", { className: "border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4", children: [_jsxs("div", { className: "flex h-7 w-full items-center justify-between", children: [_jsx("span", { className: "text-as-tertiarry flex items-center text-sm font-bold", children: "Pay" }), _jsx("button", { className: "text-as-tertiarry flex h-7 items-center gap-1 text-sm", onClick: () => setActivePanel(fiatPaymentMethodIndex), children: selectedPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "C" }) }), "Coinbase Pay"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : selectedPaymentMethod === FiatPaymentMethod.STRIPE ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-blue-600", children: _jsx("span", { className: "text-xs font-bold text-white", children: "S" }) }), "Stripe"] }), _jsx(ChevronRight, { className: "h-4 w-4" })] })) : (_jsxs(_Fragment, { children: ["Select payment method", _jsx(ChevronRight, { className: "h-4 w-4" })] })) })] }), _jsx("div", { className: "flex items-center justify-center pb-2 pt-8", children: _jsxs("div", { className: "flex gap-1", children: [_jsx("span", { className: "text-as-tertiarry text-2xl font-bold", children: "$" }), _jsx(Input, { ref: amountInputRef, type: "text", value: srcAmountOnRamp, onChange: handleAmountChange, placeholder: "5", className: "text-as-primary placeholder:text-as-primary/50 h-auto border-0 bg-transparent p-0 px-1 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0", style: {
|
|
85
79
|
width: `${Math.max(ONE_CHAR_WIDTH, srcAmountOnRamp.length * ONE_CHAR_WIDTH)}px`,
|
|
86
80
|
} })] }) }), _jsx("div", { className: cn("mx-auto mb-6 flex justify-center gap-2", hideDstToken && "mb-0"), children: customUsdInputValues
|
|
87
81
|
.filter(v => !isNaN(Number(v)))
|
|
@@ -4,10 +4,6 @@ export declare enum FiatPaymentMethod {
|
|
|
4
4
|
STRIPE = "stripe",// Stripe redirect (one-click buy URL)
|
|
5
5
|
STRIPE_WEB2 = "stripe_web2"
|
|
6
6
|
}
|
|
7
|
-
export declare const FIAT_PAYMENT_METHOD_DISPLAY: Record<FiatPaymentMethod, {
|
|
8
|
-
icon: string;
|
|
9
|
-
label: string;
|
|
10
|
-
} | null>;
|
|
11
7
|
interface FiatPaymentMethodProps {
|
|
12
8
|
selectedPaymentMethod: FiatPaymentMethod;
|
|
13
9
|
setSelectedPaymentMethod: (method: FiatPaymentMethod) => void;
|
package/package.json
CHANGED
|
@@ -510,8 +510,7 @@ function AnySpendInner({
|
|
|
510
510
|
});
|
|
511
511
|
|
|
512
512
|
// Get geo-based onramp options for fiat payments
|
|
513
|
-
const { geoData, coinbaseAvailablePaymentMethods,
|
|
514
|
-
useGeoOnrampOptions(srcAmountOnRamp);
|
|
513
|
+
const { geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
|
|
515
514
|
|
|
516
515
|
// Helper function to map payment method to onramp vendor
|
|
517
516
|
const getOnrampVendor = (paymentMethod: FiatPaymentMethod): "coinbase" | "stripe" | "stripe-web2" | undefined => {
|
|
@@ -519,11 +518,11 @@ function AnySpendInner({
|
|
|
519
518
|
case FiatPaymentMethod.COINBASE_PAY:
|
|
520
519
|
return "coinbase";
|
|
521
520
|
case FiatPaymentMethod.STRIPE:
|
|
522
|
-
//
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
return
|
|
521
|
+
// Determine if it's stripe onramp or stripe-web2 based on support
|
|
522
|
+
if (stripeWeb2Support?.isSupport) {
|
|
523
|
+
return "stripe-web2";
|
|
524
|
+
}
|
|
525
|
+
return undefined;
|
|
527
526
|
default:
|
|
528
527
|
return undefined;
|
|
529
528
|
}
|
|
@@ -684,10 +683,7 @@ function AnySpendInner({
|
|
|
684
683
|
|
|
685
684
|
// Determine button state and text
|
|
686
685
|
const btnInfo: { text: string; disable: boolean; error: boolean; loading: boolean } = useMemo(() => {
|
|
687
|
-
|
|
688
|
-
const hasAmount =
|
|
689
|
-
activeTab === "fiat" ? srcAmountOnRamp && parseFloat(srcAmountOnRamp) > 0 : activeInputAmountInWei !== "0";
|
|
690
|
-
if (!hasAmount) return { text: "Enter an amount", disable: true, error: false, loading: false };
|
|
686
|
+
if (activeInputAmountInWei === "0") return { text: "Enter an amount", disable: true, error: false, loading: false };
|
|
691
687
|
if (isSameChainSameToken)
|
|
692
688
|
return { text: "Select a different token or chain", disable: true, error: false, loading: false };
|
|
693
689
|
if (isLoadingAnyspendQuote) return { text: "Loading quote...", disable: true, error: false, loading: true };
|
|
@@ -743,7 +739,6 @@ function AnySpendInner({
|
|
|
743
739
|
activeTab,
|
|
744
740
|
effectiveCryptoPaymentMethod,
|
|
745
741
|
selectedFiatPaymentMethod,
|
|
746
|
-
srcAmountOnRamp,
|
|
747
742
|
]);
|
|
748
743
|
|
|
749
744
|
// Handle main button click
|
|
@@ -875,20 +870,11 @@ function AnySpendInner({
|
|
|
875
870
|
vendor = "coinbase";
|
|
876
871
|
paymentMethodString = coinbaseAvailablePaymentMethods[0]?.id || ""; // Use first available payment method ID
|
|
877
872
|
} else if (paymentMethod === FiatPaymentMethod.STRIPE) {
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
toast.error("Credit/Debit Card not available");
|
|
881
|
-
return;
|
|
882
|
-
}
|
|
883
|
-
vendor = "stripe";
|
|
884
|
-
paymentMethodString = "";
|
|
885
|
-
} else if (paymentMethod === FiatPaymentMethod.STRIPE_WEB2) {
|
|
886
|
-
// Stripe embedded payment form
|
|
887
|
-
if (!stripeWeb2Support.isSupport) {
|
|
888
|
-
toast.error("Pay with Card not available");
|
|
873
|
+
if (!stripeWeb2Support || !stripeWeb2Support.isSupport) {
|
|
874
|
+
toast.error("Stripe not available");
|
|
889
875
|
return;
|
|
890
876
|
}
|
|
891
|
-
vendor = "stripe-web2";
|
|
877
|
+
vendor = stripeWeb2Support && stripeWeb2Support.isSupport ? "stripe-web2" : "stripe";
|
|
892
878
|
paymentMethodString = "";
|
|
893
879
|
} else {
|
|
894
880
|
toast.error("Please select a payment method");
|
|
@@ -50,7 +50,7 @@ import { useRecipientAddressState } from "../hooks/useRecipientAddressState";
|
|
|
50
50
|
import { AnySpendFingerprintWrapper, getFingerprintConfig } from "./AnySpendFingerprintWrapper";
|
|
51
51
|
import { CryptoPaymentMethod, CryptoPaymentMethodType } from "./common/CryptoPaymentMethod";
|
|
52
52
|
import { FeeBreakDown } from "./common/FeeBreakDown";
|
|
53
|
-
import {
|
|
53
|
+
import { FiatPaymentMethod, FiatPaymentMethodComponent } from "./common/FiatPaymentMethod";
|
|
54
54
|
import { OrderDetails } from "./common/OrderDetails";
|
|
55
55
|
import { OrderHistory } from "./common/OrderHistory";
|
|
56
56
|
import { OrderToken } from "./common/OrderToken";
|
|
@@ -355,12 +355,7 @@ function AnySpendCustomInner({
|
|
|
355
355
|
contractType: orderType === "mint_nft" ? metadata?.nftContract?.type : undefined,
|
|
356
356
|
encodedData: encodedData,
|
|
357
357
|
spenderAddress: spenderAddress,
|
|
358
|
-
onrampVendor:
|
|
359
|
-
selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE
|
|
360
|
-
? "stripe"
|
|
361
|
-
: selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE_WEB2
|
|
362
|
-
? "stripe-web2"
|
|
363
|
-
: undefined,
|
|
358
|
+
onrampVendor: selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? "stripe-web2" : undefined,
|
|
364
359
|
});
|
|
365
360
|
}, [
|
|
366
361
|
activeTab,
|
|
@@ -1132,28 +1127,32 @@ function AnySpendCustomInner({
|
|
|
1132
1127
|
className="text-as-tertiarry flex flex-wrap items-center justify-end gap-2 text-sm transition-colors hover:text-blue-700"
|
|
1133
1128
|
onClick={() => setActivePanel(PanelView.FIAT_PAYMENT_METHOD)}
|
|
1134
1129
|
>
|
|
1135
|
-
{
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1130
|
+
{selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (
|
|
1131
|
+
<>
|
|
1132
|
+
<div className="flex items-center gap-2 whitespace-nowrap">
|
|
1133
|
+
<div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600">
|
|
1134
|
+
<span className="text-xs font-bold text-white">C</span>
|
|
1135
|
+
</div>
|
|
1136
|
+
Coinbase Pay
|
|
1137
|
+
</div>
|
|
1138
|
+
<ChevronRight className="h-4 w-4 shrink-0" />
|
|
1139
|
+
</>
|
|
1140
|
+
) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (
|
|
1141
|
+
<>
|
|
1142
|
+
<div className="flex items-center gap-2 whitespace-nowrap">
|
|
1143
|
+
<div className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-blue-600">
|
|
1144
|
+
<span className="text-xs font-bold text-white">S</span>
|
|
1145
|
+
</div>
|
|
1146
|
+
Credit/Debit Card
|
|
1147
|
+
</div>
|
|
1148
|
+
<ChevronRight className="h-4 w-4 shrink-0" />
|
|
1149
|
+
</>
|
|
1150
|
+
) : (
|
|
1151
|
+
<>
|
|
1152
|
+
<span className="whitespace-nowrap">Select payment method</span>
|
|
1153
|
+
<ChevronRight className="h-4 w-4 shrink-0" />
|
|
1154
|
+
</>
|
|
1155
|
+
)}
|
|
1157
1156
|
</button>
|
|
1158
1157
|
</motion.div>
|
|
1159
1158
|
|
|
@@ -1319,25 +1318,17 @@ function AnySpendCustomInner({
|
|
|
1319
1318
|
</div>
|
|
1320
1319
|
);
|
|
1321
1320
|
|
|
1322
|
-
// Stable callback for fiat payment method selection
|
|
1323
|
-
const handleFiatPaymentMethodSelect = useCallback((method: FiatPaymentMethod) => {
|
|
1324
|
-
setSelectedFiatPaymentMethod(method);
|
|
1325
|
-
setActivePanel(PanelView.CONFIRM_ORDER);
|
|
1326
|
-
}, []);
|
|
1327
|
-
|
|
1328
|
-
// Stable callback for navigating back to confirm order
|
|
1329
|
-
const handleBackToConfirmOrder = useCallback(() => {
|
|
1330
|
-
setActivePanel(PanelView.CONFIRM_ORDER);
|
|
1331
|
-
}, []);
|
|
1332
|
-
|
|
1333
1321
|
// Fiat payment method view
|
|
1334
1322
|
const fiatPaymentMethodView = (
|
|
1335
1323
|
<div className={cn("bg-as-surface-primary mx-auto w-[460px] max-w-full rounded-xl p-4")}>
|
|
1336
1324
|
<FiatPaymentMethodComponent
|
|
1337
1325
|
selectedPaymentMethod={selectedFiatPaymentMethod}
|
|
1338
1326
|
setSelectedPaymentMethod={setSelectedFiatPaymentMethod}
|
|
1339
|
-
onBack={
|
|
1340
|
-
onSelectPaymentMethod={
|
|
1327
|
+
onBack={() => setActivePanel(PanelView.CONFIRM_ORDER)}
|
|
1328
|
+
onSelectPaymentMethod={(method: FiatPaymentMethod) => {
|
|
1329
|
+
setSelectedFiatPaymentMethod(method);
|
|
1330
|
+
setActivePanel(PanelView.CONFIRM_ORDER);
|
|
1331
|
+
}}
|
|
1341
1332
|
srcAmountOnRamp={srcFiatAmount}
|
|
1342
1333
|
/>
|
|
1343
1334
|
</div>
|
|
@@ -11,14 +11,6 @@ export enum FiatPaymentMethod {
|
|
|
11
11
|
STRIPE_WEB2 = "stripe_web2", // Stripe embedded payment
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
// Shared display config for fiat payment methods
|
|
15
|
-
export const FIAT_PAYMENT_METHOD_DISPLAY: Record<FiatPaymentMethod, { icon: string; label: string } | null> = {
|
|
16
|
-
[FiatPaymentMethod.COINBASE_PAY]: { icon: "C", label: "Coinbase Pay" },
|
|
17
|
-
[FiatPaymentMethod.STRIPE]: { icon: "S", label: "Pay via Stripe" },
|
|
18
|
-
[FiatPaymentMethod.STRIPE_WEB2]: { icon: "S", label: "Pay with Card" },
|
|
19
|
-
[FiatPaymentMethod.NONE]: null,
|
|
20
|
-
};
|
|
21
|
-
|
|
22
14
|
interface FiatPaymentMethodProps {
|
|
23
15
|
selectedPaymentMethod: FiatPaymentMethod;
|
|
24
16
|
setSelectedPaymentMethod: (method: FiatPaymentMethod) => void;
|
|
@@ -78,26 +70,26 @@ export function FiatPaymentMethodComponent({
|
|
|
78
70
|
});
|
|
79
71
|
}
|
|
80
72
|
|
|
81
|
-
// Add Stripe redirect (one-click) if available -
|
|
73
|
+
// Add Stripe redirect (one-click) if available - primary option
|
|
82
74
|
if (stripeOnrampSupport) {
|
|
83
75
|
const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2); // Use same fee estimate
|
|
84
76
|
availablePaymentMethods.push({
|
|
85
77
|
id: FiatPaymentMethod.STRIPE,
|
|
86
|
-
name: "
|
|
87
|
-
description: "
|
|
78
|
+
name: "Credit/Debit Card",
|
|
79
|
+
description: "Pay via Stripe checkout",
|
|
88
80
|
badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
|
|
89
81
|
badgeColor: "bg-gray-100 text-gray-800",
|
|
90
82
|
available: true,
|
|
91
83
|
});
|
|
92
84
|
}
|
|
93
85
|
|
|
94
|
-
// Add Stripe Web2 (embedded) if available -
|
|
86
|
+
// Add Stripe Web2 (embedded) if available - secondary option
|
|
95
87
|
if (stripeWeb2Support && stripeWeb2Support.isSupport) {
|
|
96
88
|
const stripeFee = getFeeFromApi(FiatPaymentMethod.STRIPE_WEB2);
|
|
97
89
|
availablePaymentMethods.push({
|
|
98
90
|
id: FiatPaymentMethod.STRIPE_WEB2,
|
|
99
|
-
name: "Pay
|
|
100
|
-
description: "
|
|
91
|
+
name: "Quick Pay",
|
|
92
|
+
description: "Credit or debit card",
|
|
101
93
|
badge: stripeFee ? `$${Number(stripeFee).toFixed(2)} fee` : undefined,
|
|
102
94
|
badgeColor: "bg-gray-100 text-gray-800",
|
|
103
95
|
available: true,
|
|
@@ -8,7 +8,7 @@ import { formatAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
|
|
|
8
8
|
import { ChevronRight, Info, Wallet } from "lucide-react";
|
|
9
9
|
import { useRef } from "react";
|
|
10
10
|
|
|
11
|
-
import {
|
|
11
|
+
import { FiatPaymentMethod } from "./FiatPaymentMethod";
|
|
12
12
|
import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat";
|
|
13
13
|
import { PointsBadge } from "./PointsBadge";
|
|
14
14
|
|
|
@@ -141,28 +141,32 @@ export function PanelOnramp({
|
|
|
141
141
|
className="text-as-tertiarry flex h-7 items-center gap-1 text-sm"
|
|
142
142
|
onClick={() => setActivePanel(fiatPaymentMethodIndex)} // PanelView.FIAT_PAYMENT_METHOD
|
|
143
143
|
>
|
|
144
|
-
{
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
144
|
+
{selectedPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (
|
|
145
|
+
<>
|
|
146
|
+
<div className="flex items-center gap-2">
|
|
147
|
+
<div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
|
|
148
|
+
<span className="text-xs font-bold text-white">C</span>
|
|
149
|
+
</div>
|
|
150
|
+
Coinbase Pay
|
|
151
|
+
</div>
|
|
152
|
+
<ChevronRight className="h-4 w-4" />
|
|
153
|
+
</>
|
|
154
|
+
) : selectedPaymentMethod === FiatPaymentMethod.STRIPE ? (
|
|
155
|
+
<>
|
|
156
|
+
<div className="flex items-center gap-2">
|
|
157
|
+
<div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
|
|
158
|
+
<span className="text-xs font-bold text-white">S</span>
|
|
159
|
+
</div>
|
|
160
|
+
Stripe
|
|
161
|
+
</div>
|
|
162
|
+
<ChevronRight className="h-4 w-4" />
|
|
163
|
+
</>
|
|
164
|
+
) : (
|
|
165
|
+
<>
|
|
166
|
+
Select payment method
|
|
167
|
+
<ChevronRight className="h-4 w-4" />
|
|
168
|
+
</>
|
|
169
|
+
)}
|
|
166
170
|
</button>
|
|
167
171
|
</div>
|
|
168
172
|
|