@b3dotfun/sdk 0.0.10 → 0.0.11

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { USDC_BASE } from "../../../../anyspend/index.js";
-import { useStripeClientSecret } from "../../../../anyspend/react/index.js";
 import { STRIPE_CONFIG } from "../../../../anyspend/constants/index.js";
-import { ShinyButton, useB3 } from "../../../../global-account/react/index.js";
+import { useStripeClientSecret } from "../../../../anyspend/react/index.js";
+import { ShinyButton, useB3, useModalStore } from "../../../../global-account/react/index.js";
 import { formatStripeAmount } from "../../../../shared/utils/payment.utils.js";
-import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import { AddressElement, Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 import { HelpCircle, Info, X } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -34,11 +34,13 @@ function StripeErrorState({ error }) {
 function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
     const stripe = useStripe();
     const elements = useElements();
+    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
     const [loading, setLoading] = useState(false);
     const [message, setMessage] = useState(null);
     const [amount, setAmount] = useState(null);
     const [stripeReady, setStripeReady] = useState(false);
     const [showHowItWorks, setShowHowItWorks] = useState(false);
+    const [showAddressElement, setShowAddressElement] = useState(false);
     useEffect(() => {
         if (stripe && elements) {
             setStripeReady(true);
@@ -62,6 +64,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) {
@@ -72,25 +80,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));
@@ -100,17 +112,27 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
             setLoading(false);
         }
     };
+    // Handle 3DS redirect
+    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 _jsx(StripeLoadingState, {});
     }
     const stripeElementOptions = {
         layout: "tabs",
-        defaultValues: {
-            billingDetails: {
-                name: "",
-                email: "",
-            },
-        },
         fields: {
             billingDetails: "auto",
         },
@@ -138,7 +160,22 @@ function StripePaymentForm({ order, clientSecret, onPaymentSuccess, }) {
                                         const finalAmount = Number(amount);
                                         const calculatedFee = finalAmount - originalAmount;
                                         return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsx("span", { className: "text-as-primary/60", children: "Amount" }), _jsxs("span", { className: "text-as-primary", children: ["$", originalAmount.toFixed(2)] })] }), _jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-as-primary/60", children: "Processing fee" }), _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: _jsx(Info, { className: "text-as-primary/40 hover:text-as-primary/60 h-3 w-3 transition-colors" }) })] }), _jsxs("span", { className: "text-as-primary", children: ["$", calculatedFee.toFixed(2)] })] }), _jsx("div", { className: "border-as-stroke border-t pt-2", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-as-primary font-semibold", children: "Total Amount" }), _jsxs("span", { className: "text-as-primary text-2xl font-bold", children: ["$", finalAmount.toFixed(2), " USD"] })] }) })] }));
-                                    })()] }))] }), _jsxs("div", { className: "bg-as-on-surface-1 w-full rounded-2xl p-6", children: [_jsx("div", { className: "text-as-primary mb-4 text-lg font-semibold", children: "Payment Details" }), _jsx(PaymentElement, { options: stripeElementOptions })] }), message && (_jsxs("div", { className: "bg-as-red/10 border-as-red/20 flex w-full items-center gap-3 rounded-2xl border p-4", children: [_jsx("div", { className: "bg-as-red flex h-6 w-6 shrink-0 items-center justify-center rounded-full", children: _jsx("svg", { className: "h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx("div", { className: "text-as-red text-sm font-medium", children: message })] })), _jsx(ShinyButton, { type: "submit", accentColor: "hsl(var(--as-brand))", disabled: !stripe || !elements || loading, className: "relative w-full py-4 text-lg font-semibold", children: loading ? (_jsxs("div", { className: "flex items-center justify-center gap-3", children: [_jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-current border-t-transparent" }), _jsx("span", { className: "text-white", children: "Processing Payment..." })] })) : (_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx("span", { className: "text-white", children: "Complete Payment" }), amount && _jsxs("span", { className: "text-white/90", children: ["$", Number(amount).toFixed(2)] })] })) })] }), showHowItWorks && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: _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: [_jsxs("div", { className: "mb-6 flex items-center justify-between", children: [_jsx("h2", { className: "text-as-primary text-xl font-semibold", children: "How it works" }), _jsx("button", { onClick: () => setShowHowItWorks(false), className: "text-as-primary/60 hover:text-as-primary transition-colors", children: _jsx(X, { className: "h-6 w-6" }) })] }), _jsxs("div", { className: "space-y-6", children: [_jsx(PaymentMethodIcons, {}), _jsx(HowItWorks, { steps: howItWorksSteps })] })] }) }))] }));
+                                    })()] }))] }), _jsxs("div", { className: "bg-as-on-surface-1 w-full rounded-2xl p-6", children: [_jsx("div", { className: "text-as-primary mb-4 text-lg font-semibold", children: "Payment Details" }), _jsx(PaymentElement, { onChange: handlePaymentElementChange, options: stripeElementOptions }), showAddressElement && (_jsx(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 && (_jsxs("div", { className: "bg-as-red/10 border-as-red/20 flex w-full items-center gap-3 rounded-2xl border p-4", children: [_jsx("div", { className: "bg-as-red flex h-6 w-6 shrink-0 items-center justify-center rounded-full", children: _jsx("svg", { className: "h-4 w-4 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx("div", { className: "text-as-red text-sm font-medium", children: message })] })), _jsx(ShinyButton, { type: "submit", accentColor: "hsl(var(--as-brand))", disabled: !stripe || !elements || loading, className: "relative w-full py-4 text-lg font-semibold", children: loading ? (_jsxs("div", { className: "flex items-center justify-center gap-3", children: [_jsx("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-current border-t-transparent" }), _jsx("span", { className: "text-white", children: "Processing Payment..." })] })) : (_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx("span", { className: "text-white", children: "Complete Payment" }), amount && _jsxs("span", { className: "text-white/90", children: ["$", Number(amount).toFixed(2)] })] })) })] }), showHowItWorks && (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: _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: [_jsxs("div", { className: "mb-6 flex items-center justify-between", children: [_jsx("h2", { className: "text-as-primary text-xl font-semibold", children: "How it works" }), _jsx("button", { onClick: () => setShowHowItWorks(false), className: "text-as-primary/60 hover:text-as-primary transition-colors", children: _jsx(X, { className: "h-6 w-6" }) })] }), _jsxs("div", { className: "space-y-6", children: [_jsx(PaymentMethodIcons, {}), _jsx(HowItWorks, { steps: howItWorksSteps })] })] }) }))] }));
 }
 // Add tooltip component
 function Tooltip({ children, content }) {

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getChainName, STRIPE_CONFIG } from "../../../../anyspend/index.js";
 import { useAnyspendCreateOnrampOrder, useGeoOnrampOptions, useStripeClientSecret } from "../../../../anyspend/react/index.js";
 import centerTruncate from "../../../../shared/utils/centerTruncate.js";
-import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import { AddressElement, Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
 import { motion } from "framer-motion";
 import { Loader2 } from "lucide-react";
@@ -16,6 +16,7 @@ function StripePaymentForm({ order, onPaymentSuccess, }) {
     const elements = useElements();
     const [isProcessing, setIsProcessing] = useState(false);
     const [error, setError] = useState(null);
+    const [showAddressElement, setShowAddressElement] = useState(false);
     const handleSubmit = async (e) => {
         e.preventDefault();
         if (!stripe || !elements) {
@@ -45,16 +46,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 (_jsx("form", { onSubmit: handleSubmit, className: "w-full", children: _jsx("div", { className: "overflow-hidden rounded-xl bg-white", children: _jsxs("div", { className: "px-6 py-4", children: [_jsx("h2", { className: "mb-4 text-lg font-semibold", children: "Payment Details" }), _jsx(PaymentElement, { options: stripeElementOptions }), error && (_jsx("div", { className: "mt-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600", children: error })), _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 ? (_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx(Loader2, { className: "h-5 w-5 animate-spin" }), _jsx("span", { children: "Processing..." })] })) : (_jsx("span", { children: "Complete Payment" })) })] }) }) }));
+    return (_jsx("form", { onSubmit: handleSubmit, className: "w-full", children: _jsx("div", { className: "overflow-hidden rounded-xl bg-white", children: _jsxs("div", { className: "px-6 py-4", children: [_jsx("h2", { className: "mb-4 text-lg font-semibold", children: "Payment Details" }), _jsx(PaymentElement, { options: stripeElementOptions, onChange: handlePaymentElementChange }), showAddressElement && (_jsx("div", { className: "mt-4", children: _jsx(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 && (_jsx("div", { className: "mt-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600", children: error })), _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 ? (_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx(Loader2, { className: "h-5 w-5 animate-spin" }), _jsx("span", { children: "Processing..." })] })) : (_jsx("span", { children: "Complete Payment" })) })] }) }) }));
 }
 export function WebviewOnrampPayment({ srcAmountOnRamp, recipientAddress, destinationToken, anyspendQuote, onPaymentSuccess, userId, partnerId, }) {
     const [stableAmountForGeo, setStableAmountForGeo] = useState(srcAmountOnRamp);

package/dist/esm/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/esm/anyspend/react/providers/AnyspendProvider.js

@@ -1,8 +1,9 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TooltipProvider } from "../../../global-account/react/index.js";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useState } from "react";
+import { StripeRedirectHandler } from "./StripeRedirectHandler.js";
 const defaultQueryClientConfig = {
     defaultOptions: {
         queries: {
@@ -21,6 +22,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
@@ -35,5 +37,5 @@ const defaultQueryClientConfig = {
  */
 export const AnyspendProvider = function AnyspendProvider({ children }) {
     const [queryClient] = useState(() => new QueryClient(defaultQueryClientConfig));
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(TooltipProvider, { children: children }) }));
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsxs(TooltipProvider, { children: [_jsx(StripeRedirectHandler, {}), children] }) }));
 };

package/dist/esm/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/esm/anyspend/react/providers/StripeRedirectHandler.js

@@ -0,0 +1,38 @@
+"use client";
+import { useModalStore } from "../../../global-account/react/index.js";
+import { useEffect } from "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.
+ */
+export function StripeRedirectHandler() {
+    const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
+    const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
+    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/esm/global-account/react/components/B3DynamicModal.js

@@ -28,7 +28,7 @@ export 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",
@@ -90,5 +90,5 @@ export function B3DynamicModal() {
     const ModalContent = isMobile ? DrawerContent : DialogContent;
     const ModalTitle = isMobile ? DrawerTitle : DialogTitle;
     const ModalDescription = isMobile ? DrawerDescription : DialogDescription;
-    return (_jsx(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: _jsxs(ModalContent, { className: contentClass, hideCloseButton: hideCloseButton, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: "overflow-auto", children: [history.length > 0 && contentType?.showBackButton && (_jsxs("button", { onClick: navigateBack, className: "b3-modal-back-button mb-4 flex items-center gap-2 transition-colors hover:text-white", children: [_jsx("span", { children: "\u2190" }), _jsx("span", { className: "text-sm", children: "Back" })] })), renderContent()] })] }) }));
+    return (_jsx(ModalComponent, { open: isOpen, onOpenChange: setB3ModalOpen, children: _jsxs(ModalContent, { className: contentClass, hideCloseButton: hideCloseButton, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: "no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]", children: [history.length > 0 && contentType?.showBackButton && (_jsxs("button", { onClick: navigateBack, className: "b3-modal-back-button mb-4 flex items-center gap-2 transition-colors hover:text-white", children: [_jsx("span", { children: "\u2190" }), _jsx("span", { className: "text-sm", children: "Back" })] })), renderContent()] })] }) }));
 }

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

@@ -12,7 +12,7 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(D
 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 (_jsxs(DialogPortal, { container: container, children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: 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 && (_jsxs(DialogPrimitive.Close, { className: 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: [_jsx(X, { className: "h-5 w-5" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+    return (_jsxs(DialogPortal, { container: container, children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: 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 && (_jsxs(DialogPrimitive.Close, { className: 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: [_jsx(X, { className: "h-5 w-5" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));

package/dist/esm/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/esm/global-account/react/hooks/index.js

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

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

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

package/dist/esm/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/esm/global-account/react/hooks/useProfile.js

@@ -0,0 +1,68 @@
+import { useQuery } from "@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();
+}
+export function useProfile({ address, name, fresh = false, }, options) {
+    return 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
+    });
+}
+export 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 };
+}
+export default useProfile;