@b3dotfun/sdk 0.0.10 → 0.0.11-alpha.0

package/dist/cjs/anyspend/react/components/AnySpendCustom.js

@@ -369,7 +369,7 @@ function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", recipient
     const historyView = ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: (0, jsx_runtime_1.jsx)(OrderHistory_1.OrderHistory, { mode: mode, onBack: () => {
                 setActivePanel(PanelView.HISTORY);
             }, onSelectOrder: onSelectOrder }) }));
-    const orderDetailsView = ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mx-auto flex max-h-[90dvh] w-full flex-col items-center gap-4 overflow-y-auto p-5", mode === "modal" && "bg-b3-react-background"), children: [oat && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: oat.data.order }), (0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { isMainnet: isMainnet, mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, onBack: () => {
+    const orderDetailsView = ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background"), children: [oat && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(OrderStatus_1.OrderStatus, { order: oat.data.order }), (0, jsx_runtime_1.jsx)(OrderDetails_1.OrderDetails, { isMainnet: isMainnet, mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, onBack: () => {
                             setOrderId(undefined);
                             setActivePanel(PanelView.CONFIRM_ORDER);
                             // Remove orderId from URL when canceling

package/dist/cjs/anyspend/react/components/common/PaymentStripeWeb2.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = PaymentStripeWeb2;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../../anyspend");
-const react_1 = require("../../../../anyspend/react");
 const constants_1 = require("../../../../anyspend/constants");
+const react_1 = require("../../../../anyspend/react");
 const react_2 = require("../../../../global-account/react");
 const payment_utils_1 = require("../../../../shared/utils/payment.utils");
 const react_stripe_js_1 = require("@stripe/react-stripe-js");
@@ -40,11 +40,13 @@ function StripeErrorState({ error }) {
 function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
     const stripe = (0, react_stripe_js_1.useStripe)();
     const elements = (0, react_stripe_js_1.useElements)();
+    const setB3ModalOpen = (0, react_2.useModalStore)(state => state.setB3ModalOpen);
     const [loading, setLoading] = (0, react_3.useState)(false);
     const [message, setMessage] = (0, react_3.useState)(null);
     const [amount, setAmount] = (0, react_3.useState)(null);
     const [stripeReady, setStripeReady] = (0, react_3.useState)(false);
     const [showHowItWorks, setShowHowItWorks] = (0, react_3.useState)(false);
+    const [showAddressElement, setShowAddressElement] = (0, react_3.useState)(false);
     (0, react_3.useEffect)(() => {
         if (stripe && elements) {
             setStripeReady(true);
@@ -68,6 +70,12 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
         };
         fetchPaymentIntent();
     }, [clientSecret, stripe]);
+    // Handle payment element changes
+    const handlePaymentElementChange = (event) => {
+        // Show address element only for card payments
+        console.log("@@stripe-web2-payment:payment-element-change:", JSON.stringify(event, null, 2));
+        setShowAddressElement(event.value.type === "card");
+    };
     const handleSubmit = async (e) => {
         e.preventDefault();
         if (!stripe || !elements) {
@@ -78,25 +86,29 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
         setMessage(null);
         try {
             console.log("@@stripe-web2-payment:confirming-payment:", JSON.stringify({ orderId: order.id }, null, 2));
-            const { error, paymentIntent } = await stripe.confirmPayment({
+            const result = (await stripe.confirmPayment({
                 elements,
-                redirect: "if_required",
-            });
-            if (error) {
-                console.error("@@stripe-web2-payment:error:", JSON.stringify(error, null, 2));
-                setMessage(error.message || "An unexpected error occurred.");
-            }
-            else if (paymentIntent && paymentIntent.status === "succeeded") {
-                console.log("@@stripe-web2-payment:success:", JSON.stringify({ orderId: order.id, paymentIntentId: paymentIntent.id }, null, 2));
-                // Payment succeeded without redirect - handle success in the modal
-                setMessage(null);
-                // Add waitingForDeposit=true to query params
-                const currentUrl = new URL(window.location.href);
-                currentUrl.searchParams.set("waitingForDeposit", "true");
-                window.history.replaceState(null, "", currentUrl.toString());
-                // Call the success callback if provided
-                onPaymentSuccess?.(paymentIntent);
+                confirmParams: {
+                    return_url: `${window.location.origin}/?orderId=${order.id}&waitingForDeposit=true&fromStripe=true`,
+                },
+            }));
+            if (result.error) {
+                // This point will only be reached if there is an immediate error.
+                // Otherwise, the customer will be redirected to the `return_url`.
+                console.error("@@stripe-web2-payment:error:", JSON.stringify(result.error, null, 2));
+                setMessage(result.error.message || "An unexpected error occurred.");
+                return;
             }
+            // At this point TypeScript knows result.paymentIntent exists and error is undefined
+            console.log("@@stripe-web2-payment:success:", JSON.stringify({ orderId: order.id, paymentIntentId: result.paymentIntent.id }, null, 2));
+            // Payment succeeded without redirect - handle success in the modal
+            setMessage(null);
+            // Add waitingForDeposit=true to query params
+            const currentUrl = new URL(window.location.href);
+            currentUrl.searchParams.set("waitingForDeposit", "true");
+            window.history.replaceState(null, "", currentUrl.toString());
+            // Call the success callback if provided
+            onPaymentSuccess?.(result.paymentIntent);
         }
         catch (error) {
             console.error("@@stripe-web2-payment:confirmation-error:", JSON.stringify(error, null, 2));
@@ -106,17 +118,27 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
             setLoading(false);
         }
     };
+    // Handle 3DS redirect
+    (0, react_3.useEffect)(() => {
+        // Check if we're returning from Stripe
+        const url = new URL(window.location.href);
+        const fromStripe = url.searchParams.get("fromStripe");
+        const paymentIntent = url.searchParams.get("payment_intent");
+        console.log("@@stripe-web2-payment:fromStripe:", fromStripe);
+        console.log("@@stripe-web2-payment:paymentIntent:", paymentIntent);
+        if (fromStripe && paymentIntent) {
+            // Close the modal as we're returning from 3DS
+            setB3ModalOpen(true);
+            // Clean up URL params
+            url.searchParams.delete("fromStripe");
+            window.history.replaceState({}, "", url.toString());
+        }
+    }, [setB3ModalOpen]);
     if (!stripeReady) {
         return (0, jsx_runtime_1.jsx)(StripeLoadingState, {});
     }
     const stripeElementOptions = {
         layout: "tabs",
-        defaultValues: {
-            billingDetails: {
-                name: "",
-                email: "",
-            },
-        },
         fields: {
             billingDetails: "auto",
         },
@@ -144,7 +166,22 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
                                         const finalAmount = Number(amount);
                                         const calculatedFee = finalAmount - originalAmount;
                                         return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between text-sm", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60", children: "Amount" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary", children: ["$", originalAmount.toFixed(2)] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary/60", children: "Processing fee" }), (0, jsx_runtime_1.jsx)(Tooltip, { content: `Credit card companies charge a processing fee of 5.4% + $0.30 for all transactions.\n\nThis fee covers secure payment processing and fraud protection.`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "text-as-primary/40 hover:text-as-primary/60 h-3 w-3 transition-colors" }) })] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary", children: ["$", calculatedFee.toFixed(2)] })] }), (0, jsx_runtime_1.jsx)("div", { className: "border-as-stroke border-t pt-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: "Total Amount" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-as-primary text-2xl font-bold", children: ["$", finalAmount.toFixed(2), " USD"] })] }) })] }));
-                                    })()] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 w-full rounded-2xl p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary mb-4 text-lg font-semibold", children: "Payment Details" }), (0, jsx_runtime_1.jsx)(react_stripe_js_1.PaymentElement, { options: stripeElementOptions })] }), message && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-red/10 border-as-red/20 flex w-full items-center gap-3 rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-red flex h-6 w-6 shrink-0 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm font-medium", children: message })] })), (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { type: "submit", accentColor: "hsl(var(--as-brand))", disabled: !stripe || !elements || loading, className: "relative w-full py-4 text-lg font-semibold", children: loading ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-current border-t-transparent" }), (0, jsx_runtime_1.jsx)("span", { className: "text-white", children: "Processing Payment..." })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-white", children: "Complete Payment" }), amount && (0, jsx_runtime_1.jsxs)("span", { className: "text-white/90", children: ["$", Number(amount).toFixed(2)] })] })) })] }), showHowItWorks && ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 relative max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-2xl p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-6 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-semibold", children: "How it works" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowHowItWorks(false), className: "text-as-primary/60 hover:text-as-primary transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-6 w-6" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsx)(PaymentMethodIcons_1.default, {}), (0, jsx_runtime_1.jsx)(HowItWorks_1.default, { steps: howItWorksSteps })] })] }) }))] }));
+                                    })()] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 w-full rounded-2xl p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-as-primary mb-4 text-lg font-semibold", children: "Payment Details" }), (0, jsx_runtime_1.jsx)(react_stripe_js_1.PaymentElement, { onChange: handlePaymentElementChange, options: stripeElementOptions }), showAddressElement && ((0, jsx_runtime_1.jsx)(react_stripe_js_1.AddressElement, { options: {
+                                    mode: "billing",
+                                    fields: {
+                                        phone: "always",
+                                    },
+                                    // More granular control
+                                    display: {
+                                        name: "split", // or 'split' for first/last name separately
+                                    },
+                                    // Validation
+                                    validation: {
+                                        phone: {
+                                            required: "auto", // or 'always', 'never'
+                                        },
+                                    },
+                                } }))] }), message && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-as-red/10 border-as-red/20 flex w-full items-center gap-3 rounded-2xl border p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-as-red flex h-6 w-6 shrink-0 items-center justify-center rounded-full", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm font-medium", children: message })] })), (0, jsx_runtime_1.jsx)(react_2.ShinyButton, { type: "submit", accentColor: "hsl(var(--as-brand))", disabled: !stripe || !elements || loading, className: "relative w-full py-4 text-lg font-semibold", children: loading ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-current border-t-transparent" }), (0, jsx_runtime_1.jsx)("span", { className: "text-white", children: "Processing Payment..." })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-white", children: "Complete Payment" }), amount && (0, jsx_runtime_1.jsxs)("span", { className: "text-white/90", children: ["$", Number(amount).toFixed(2)] })] })) })] }), showHowItWorks && ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-as-on-surface-1 relative max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-2xl p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-6 flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-semibold", children: "How it works" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowHowItWorks(false), className: "text-as-primary/60 hover:text-as-primary transition-colors", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-6 w-6" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsx)(PaymentMethodIcons_1.default, {}), (0, jsx_runtime_1.jsx)(HowItWorks_1.default, { steps: howItWorksSteps })] })] }) }))] }));
 }
 // Add tooltip component
 function Tooltip({ children, content }) {

package/dist/cjs/anyspend/react/components/webview/WebviewOnrampPayment.js

@@ -22,6 +22,7 @@ function StripePaymentForm({ order, onPaymentSuccess, }) {
     const elements = (0, react_stripe_js_1.useElements)();
     const [isProcessing, setIsProcessing] = (0, react_2.useState)(false);
     const [error, setError] = (0, react_2.useState)(null);
+    const [showAddressElement, setShowAddressElement] = (0, react_2.useState)(false);
     const handleSubmit = async (e) => {
         e.preventDefault();
         if (!stripe || !elements) {
@@ -51,16 +52,38 @@ function StripePaymentForm({ order, onPaymentSuccess, }) {
             setIsProcessing(false);
         }
     };
+    // Handle payment element changes
+    const handlePaymentElementChange = (event) => {
+        // Show address element only for card payments
+        console.log("@@stripe-web2-payment:payment-element-change:", JSON.stringify(event, null, 2));
+        setShowAddressElement(event.value.type === "card");
+    };
     const stripeElementOptions = {
         layout: "tabs",
-        defaultValues: {
-            billingDetails: {
-                name: "",
-                email: "",
-            },
+        fields: {
+            billingDetails: "auto",
+        },
+        wallets: {
+            applePay: "auto",
+            googlePay: "auto",
         },
     };
-    return ((0, jsx_runtime_1.jsx)("form", { onSubmit: handleSubmit, className: "w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "overflow-hidden rounded-xl bg-white", children: (0, jsx_runtime_1.jsxs)("div", { className: "px-6 py-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "mb-4 text-lg font-semibold", children: "Payment Details" }), (0, jsx_runtime_1.jsx)(react_stripe_js_1.PaymentElement, { options: stripeElementOptions }), error && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600", children: error })), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: !stripe || isProcessing, className: "mt-6 w-full rounded-xl bg-blue-600 px-4 py-3 font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50", children: isProcessing ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Processing..." })] })) : ((0, jsx_runtime_1.jsx)("span", { children: "Complete Payment" })) })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)("form", { onSubmit: handleSubmit, className: "w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "overflow-hidden rounded-xl bg-white", children: (0, jsx_runtime_1.jsxs)("div", { className: "px-6 py-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "mb-4 text-lg font-semibold", children: "Payment Details" }), (0, jsx_runtime_1.jsx)(react_stripe_js_1.PaymentElement, { options: stripeElementOptions, onChange: handlePaymentElementChange }), showAddressElement && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.AddressElement, { options: {
+                                mode: "billing",
+                                fields: {
+                                    phone: "always",
+                                },
+                                // More granular control
+                                display: {
+                                    name: "split", // or 'split' for first/last name separately
+                                },
+                                // Validation
+                                validation: {
+                                    phone: {
+                                        required: "auto", // or 'always', 'never'
+                                    },
+                                },
+                            } }) })), error && ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600", children: error })), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: !stripe || isProcessing, className: "mt-6 w-full rounded-xl bg-blue-600 px-4 py-3 font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50", children: isProcessing ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-5 w-5 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { children: "Processing..." })] })) : ((0, jsx_runtime_1.jsx)("span", { children: "Complete Payment" })) })] }) }) }));
 }
 function WebviewOnrampPayment({ srcAmountOnRamp, recipientAddress, destinationToken, anyspendQuote, onPaymentSuccess, userId, partnerId, }) {
     const [stableAmountForGeo, setStableAmountForGeo] = (0, react_2.useState)(srcAmountOnRamp);

package/dist/cjs/anyspend/react/providers/AnyspendProvider.d.ts

@@ -11,6 +11,7 @@ interface AnyspendProviderProps {
  * - Optimized for performance with React.memo
  * - Safe to use at the application root
  * - Configures sensible defaults for query caching
+ * - Handles Stripe payment redirects and modal state
  *
  * @example
  * ```tsx

package/dist/cjs/anyspend/react/providers/AnyspendProvider.js

@@ -6,6 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("../../../global-account/react");
 const react_query_1 = require("@tanstack/react-query");
 const react_2 = require("react");
+const StripeRedirectHandler_1 = require("./StripeRedirectHandler");
 const defaultQueryClientConfig = {
     defaultOptions: {
         queries: {
@@ -24,6 +25,7 @@ const defaultQueryClientConfig = {
  * - Optimized for performance with React.memo
  * - Safe to use at the application root
  * - Configures sensible defaults for query caching
+ * - Handles Stripe payment redirects and modal state
  *
  * @example
  * ```tsx
@@ -38,6 +40,6 @@ const defaultQueryClientConfig = {
  */
 const AnyspendProvider = function AnyspendProvider({ children }) {
     const [queryClient] = (0, react_2.useState)(() => new react_query_1.QueryClient(defaultQueryClientConfig));
-    return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(react_1.TooltipProvider, { children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsxs)(react_1.TooltipProvider, { children: [(0, jsx_runtime_1.jsx)(StripeRedirectHandler_1.StripeRedirectHandler, {}), children] }) }));
 };
 exports.AnyspendProvider = AnyspendProvider;

package/dist/cjs/anyspend/react/providers/StripeRedirectHandler.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Handles Stripe payment redirects by showing the order details modal
+ * when returning from Stripe's payment flow.
+ *
+ * This component should be mounted inside AnyspendProvider to ensure
+ * proper modal state management.
+ */
+export declare function StripeRedirectHandler(): null;

package/dist/cjs/anyspend/react/providers/StripeRedirectHandler.js

@@ -0,0 +1,41 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StripeRedirectHandler = StripeRedirectHandler;
+const react_1 = require("../../../global-account/react");
+const react_2 = require("react");
+/**
+ * Handles Stripe payment redirects by showing the order details modal
+ * when returning from Stripe's payment flow.
+ *
+ * This component should be mounted inside AnyspendProvider to ensure
+ * proper modal state management.
+ */
+function StripeRedirectHandler() {
+    const setB3ModalOpen = (0, react_1.useModalStore)(state => state.setB3ModalOpen);
+    const setB3ModalContentType = (0, react_1.useModalStore)(state => state.setB3ModalContentType);
+    (0, react_2.useEffect)(() => {
+        const url = new URL(window.location.href);
+        const fromStripe = url.searchParams.get("fromStripe");
+        const paymentIntent = url.searchParams.get("payment_intent");
+        const orderId = url.searchParams.get("orderId");
+        console.log("@@stripe-web2-payment:fromStripe:", fromStripe);
+        console.log("@@stripe-web2-payment:paymentIntent:", paymentIntent);
+        console.log("@@stripe-web2-payment:orderId:", orderId);
+        if (fromStripe && paymentIntent && orderId) {
+            // Re-open the modal with the order details
+            setB3ModalOpen(true);
+            setB3ModalContentType({
+                type: "anyspendOrderDetails",
+                orderId,
+            });
+            // Clean up URL params
+            url.searchParams.delete("fromStripe");
+            url.searchParams.delete("payment_intent");
+            url.searchParams.delete("payment_intent_client_secret");
+            url.searchParams.delete("redirect_status");
+            window.history.replaceState({}, "", url.toString());
+        }
+    }, [setB3ModalOpen, setB3ModalContentType]);
+    return null;
+}

package/dist/cjs/global-account/react/components/B3DynamicModal.js

@@ -31,7 +31,7 @@ function B3DynamicModal() {
         "anySpendSignatureMint",
         "anySpendBondKit",
     ].find(type => contentType?.type === type)) {
-        contentClass += " max-h-[90dvh] overflow-y-auto no-scrollbar w-full";
+        contentClass += " w-full";
     }
     if ([
         "anySpendNft",
@@ -93,5 +93,5 @@ function B3DynamicModal() {
     const ModalContent = isMobile ? drawer_1.DrawerContent : dialog_1.DialogContent;
     const ModalTitle = isMobile ? drawer_1.DrawerTitle : dialog_1.DialogTitle;
     const ModalDescription = isMobile ? drawer_1.DrawerDescription : dialog_1.DialogDescription;
-    return ((0, jsx_runtime_1.jsx)(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: (0, jsx_runtime_1.jsxs)(ModalContent, { className: contentClass, hideCloseButton: hideCloseButton, children: [(0, jsx_runtime_1.jsx)(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), (0, jsx_runtime_1.jsx)(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), (0, jsx_runtime_1.jsxs)("div", { className: "overflow-auto", children: [history.length > 0 && contentType?.showBackButton && ((0, jsx_runtime_1.jsxs)("button", { onClick: navigateBack, className: "b3-modal-back-button mb-4 flex items-center gap-2 transition-colors hover:text-white", children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2190" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: "Back" })] })), renderContent()] })] }) }));
+    return ((0, jsx_runtime_1.jsx)(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: (0, jsx_runtime_1.jsxs)(ModalContent, { className: contentClass, hideCloseButton: hideCloseButton, children: [(0, jsx_runtime_1.jsx)(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), (0, jsx_runtime_1.jsx)(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), (0, jsx_runtime_1.jsxs)("div", { className: "no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]", children: [history.length > 0 && contentType?.showBackButton && ((0, jsx_runtime_1.jsxs)("button", { onClick: navigateBack, className: "b3-modal-back-button mb-4 flex items-center gap-2 transition-colors hover:text-white", children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2190" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: "Back" })] })), renderContent()] })] }) }));
 }

package/dist/cjs/global-account/react/components/ui/dialog.js

@@ -53,7 +53,7 @@ exports.DialogOverlay = DialogOverlay;
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef(({ className, children, hideCloseButton = false, closeBtnClassName, ...props }, ref) => {
     const container = typeof window !== "undefined" ? document.getElementById("b3-root") : null;
-    return ((0, jsx_runtime_1.jsxs)(DialogPortal, { container: container, children: [(0, jsx_runtime_1.jsx)(DialogOverlay, {}), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { ref: ref, className: (0, utils_1.cn)("bg-b3-react-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg !outline-none", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-500", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", "data-[state=closed]:rotate-x-10 data-[state=open]:rotate-x-0", "[perspective:1200px] [transform-style:preserve-3d] sm:rounded-xl", "ease-spring transition-all", className), ...props, children: [children, !hideCloseButton && ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Close, { className: (0, utils_1.cn)("data-[state=open]:bg-accent data-[state=open]:text-b3-react-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400", closeBtnClassName), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Close" })] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(DialogPortal, { container: container, children: [(0, jsx_runtime_1.jsx)(DialogOverlay, {}), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { ref: ref, className: (0, utils_1.cn)("bg-b3-react-background fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg !outline-none", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-500", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", "[perspective:1200px] [transform-style:preserve-3d] sm:rounded-xl", "transition-all ease-out", className), ...props, children: [children, !hideCloseButton && ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Close, { className: (0, utils_1.cn)("data-[state=open]:bg-b3-react-background data-[state=open]:text-b3-react-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400", closeBtnClassName), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Close" })] }))] })] }));
 });
 exports.DialogContent = DialogContent;
 DialogContent.displayName = DialogPrimitive.Content.displayName;

package/dist/cjs/global-account/react/hooks/index.d.ts

@@ -20,6 +20,7 @@ export { useMediaQuery } from "./useMediaQuery";
 export { useNativeBalance, useNativeBalanceFromRPC } from "./useNativeBalance";
 export { useOnchainName } from "./useOnchainName";
 export { useOneBalance } from "./useOneBalance";
+export { useProfile, useProfilePreference, type Profile, type CombinedProfile, type PreferenceRequestBody, } from "./useProfile";
 export { useQueryB3 } from "./useQueryB3";
 export { useQueryBSMNT } from "./useQueryBSMNT";
 export { useRemoveSessionKey } from "./useRemoveSessionKey";

package/dist/cjs/global-account/react/hooks/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useURLParams = exports.useTokensFromAddress = exports.useTokenPriceWithFallback = exports.useTokenPrice = exports.useTokenFromUrl = exports.useTokenData = exports.useTokenBalancesByChain = exports.useTokenBalance = exports.useSiwe = exports.useSearchParamsSSR = exports.useRouter = exports.useRemoveSessionKey = exports.useQueryBSMNT = exports.useQueryB3 = exports.useOneBalance = exports.useOnchainName = exports.useNativeBalanceFromRPC = exports.useNativeBalance = exports.useMediaQuery = exports.useIsomorphicLayoutEffect = exports.useIsMobile = exports.useHasMounted = exports.useHandleConnectWithPrivy = exports.useGetGeo = exports.useGetAllTWSigners = exports.useExchangeRate = exports.useConnect = exports.useClaim = exports.useChainSwitchWithAction = exports.useBsmntProfile = exports.useBestTransactionPath = exports.useB3EnsName = exports.useB3BalanceFromAddresses = exports.useAuthentication = exports.useAddTWSessionKey = exports.useAccountWallet = exports.useAccountAssets = void 0;
+exports.useURLParams = exports.useTokensFromAddress = exports.useTokenPriceWithFallback = exports.useTokenPrice = exports.useTokenFromUrl = exports.useTokenData = exports.useTokenBalancesByChain = exports.useTokenBalance = exports.useSiwe = exports.useSearchParamsSSR = exports.useRouter = exports.useRemoveSessionKey = exports.useQueryBSMNT = exports.useQueryB3 = exports.useProfilePreference = exports.useProfile = exports.useOneBalance = exports.useOnchainName = exports.useNativeBalanceFromRPC = exports.useNativeBalance = exports.useMediaQuery = exports.useIsomorphicLayoutEffect = exports.useIsMobile = exports.useHasMounted = exports.useHandleConnectWithPrivy = exports.useGetGeo = exports.useGetAllTWSigners = exports.useExchangeRate = exports.useConnect = exports.useClaim = exports.useChainSwitchWithAction = exports.useBsmntProfile = exports.useBestTransactionPath = exports.useB3EnsName = exports.useB3BalanceFromAddresses = exports.useAuthentication = exports.useAddTWSessionKey = exports.useAccountWallet = exports.useAccountAssets = void 0;
 var useAccountAssets_1 = require("./useAccountAssets");
 Object.defineProperty(exports, "useAccountAssets", { enumerable: true, get: function () { return useAccountAssets_1.useAccountAssets; } });
 var useAccountWallet_1 = require("./useAccountWallet");
@@ -46,6 +46,9 @@ var useOnchainName_1 = require("./useOnchainName");
 Object.defineProperty(exports, "useOnchainName", { enumerable: true, get: function () { return useOnchainName_1.useOnchainName; } });
 var useOneBalance_1 = require("./useOneBalance");
 Object.defineProperty(exports, "useOneBalance", { enumerable: true, get: function () { return useOneBalance_1.useOneBalance; } });
+var useProfile_1 = require("./useProfile");
+Object.defineProperty(exports, "useProfile", { enumerable: true, get: function () { return useProfile_1.useProfile; } });
+Object.defineProperty(exports, "useProfilePreference", { enumerable: true, get: function () { return useProfile_1.useProfilePreference; } });
 var useQueryB3_1 = require("./useQueryB3");
 Object.defineProperty(exports, "useQueryB3", { enumerable: true, get: function () { return useQueryB3_1.useQueryB3; } });
 var useQueryBSMNT_1 = require("./useQueryBSMNT");

package/dist/cjs/global-account/react/hooks/useAccountWallet.js

@@ -62,9 +62,5 @@ function useAccountWallet() {
         smartWalletIcon,
         walletImage,
     ]);
-    (0, react_2.useEffect)(() => {
-        console.log(`account`, account);
-        console.log(`useAccountWallet`, res);
-    }, [account, res]);
     return res;
 }

package/dist/cjs/global-account/react/hooks/useProfile.d.ts

@@ -0,0 +1,38 @@
+export interface Profile {
+    type: string;
+    address?: string;
+    name?: string;
+    avatar?: string | null;
+    bio?: string | null;
+    displayName?: string | null;
+}
+export interface CombinedProfile {
+    name: string | null;
+    address: string | null;
+    avatar: string | null;
+    bio: string | null;
+    displayName: string | null;
+    profiles: Profile[];
+}
+export interface PreferenceRequestBody {
+    key: string;
+    preferredType: string;
+    signature: string;
+    signer: string;
+    timestamp: number;
+}
+export declare function useProfile({ address, name, fresh, }: {
+    address?: string;
+    name?: string;
+    fresh?: boolean;
+}, options?: {
+    enabled?: boolean;
+    refetchInterval?: number;
+    staleTime?: number;
+}): import("@tanstack/react-query").UseQueryResult<CombinedProfile, Error>;
+export declare function useProfilePreference(): {
+    setPreference: (key: string, preferredType: string, signerAddress: string, signMessage: (message: string) => Promise<string>) => Promise<{
+        success: boolean;
+    }>;
+};
+export default useProfile;

package/dist/cjs/global-account/react/hooks/useProfile.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useProfile = useProfile;
+exports.useProfilePreference = useProfilePreference;
+const react_query_1 = require("@tanstack/react-query");
+const PROFILES_API_URL = "https://profiles.b3.fun";
+async function fetchProfile({ address, name, fresh = false, }) {
+    if (!address && !name) {
+        throw new Error("Either address or name must be provided");
+    }
+    const params = new URLSearchParams();
+    if (address)
+        params.append("address", address);
+    if (name)
+        params.append("name", name);
+    if (fresh)
+        params.append("fresh", "true");
+    const response = await fetch(`${PROFILES_API_URL}?${params.toString()}`);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch profile: ${response.statusText}`);
+    }
+    return response.json();
+}
+async function setProfilePreference({ key, preferredType, signature, signer, timestamp, }) {
+    const response = await fetch(`${PROFILES_API_URL}/preference`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            key,
+            preferredType,
+            signature,
+            signer,
+            timestamp,
+        }),
+    });
+    if (!response.ok) {
+        throw new Error(`Failed to set preference: ${response.statusText}`);
+    }
+    return response.json();
+}
+function useProfile({ address, name, fresh = false, }, options) {
+    return (0, react_query_1.useQuery)({
+        queryKey: ["profile", address || name, fresh],
+        queryFn: () => fetchProfile({ address, name, fresh }),
+        enabled: (options?.enabled ?? true) && (!!address || !!name),
+        refetchInterval: options?.refetchInterval,
+        staleTime: options?.staleTime ?? 5 * 60 * 1000, // 5 minutes default
+    });
+}
+function useProfilePreference() {
+    const setPreference = async (key, preferredType, signerAddress, signMessage) => {
+        const timestamp = Math.floor(Date.now() / 1000);
+        const message = `SetProfilePreference:${key}:${preferredType}:${timestamp}`;
+        try {
+            const signature = await signMessage(message);
+            return setProfilePreference({
+                key,
+                preferredType,
+                signature,
+                signer: signerAddress,
+                timestamp,
+            });
+        }
+        catch (error) {
+            throw new Error(`Failed to set profile preference: ${error}`);
+        }
+    };
+    return { setPreference };
+}
+exports.default = useProfile;

package/dist/esm/anyspend/react/components/AnySpendCustom.js

@@ -363,7 +363,7 @@ export function AnySpendCustom({ isMainnet = true, loadOrder, mode = "modal", re
     const historyView = (_jsx("div", { className: cn("mx-auto flex w-full max-w-2xl flex-col items-center p-5", mode === "modal" && "bg-b3-react-background"), children: _jsx(OrderHistory, { mode: mode, onBack: () => {
                 setActivePanel(PanelView.HISTORY);
             }, onSelectOrder: onSelectOrder }) }));
-    const orderDetailsView = (_jsxs("div", { className: cn("mx-auto flex max-h-[90dvh] w-full flex-col items-center gap-4 overflow-y-auto p-5", mode === "modal" && "bg-b3-react-background"), children: [oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatusDisplay, { order: oat.data.order }), _jsx(OrderDetails, { isMainnet: isMainnet, mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, onBack: () => {
+    const orderDetailsView = (_jsxs("div", { className: cn("mx-auto flex w-full flex-col items-center gap-4 p-5", mode === "modal" && "bg-b3-react-background"), children: [oat && (_jsxs(_Fragment, { children: [_jsx(OrderStatusDisplay, { order: oat.data.order }), _jsx(OrderDetails, { isMainnet: isMainnet, mode: mode, order: oat.data.order, depositTxs: oat.data.depositTxs, relayTx: oat.data.relayTx, executeTx: oat.data.executeTx, refundTxs: oat.data.refundTxs, onBack: () => {
                             setOrderId(undefined);
                             setActivePanel(PanelView.CONFIRM_ORDER);
                             // Remove orderId from URL when canceling