@b3dotfun/sdk 0.0.10 → 0.0.11

package/src/anyspend/react/components/common/PaymentStripeWeb2.tsx

@@ -1,15 +1,15 @@
 import { USDC_BASE } from "@b3dotfun/sdk/anyspend";
-import { useStripeClientSecret } from "@b3dotfun/sdk/anyspend/react";
 import { STRIPE_CONFIG } from "@b3dotfun/sdk/anyspend/constants";
-import { ShinyButton, useB3 } from "@b3dotfun/sdk/global-account/react";
+import { useStripeClientSecret } from "@b3dotfun/sdk/anyspend/react";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { ShinyButton, useB3, useModalStore } from "@b3dotfun/sdk/global-account/react";
 import { formatStripeAmount } from "@b3dotfun/sdk/shared/utils/payment.utils";
-import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
-import { loadStripe } from "@stripe/stripe-js";
+import { AddressElement, Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import { loadStripe, PaymentIntentResult, StripePaymentElementOptions } from "@stripe/stripe-js";
 import { HelpCircle, Info, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import HowItWorks from "./HowItWorks";
 import PaymentMethodIcons from "./PaymentMethodIcons";
-import { components } from "@b3dotfun/sdk/anyspend/types/api";
 
 const stripePromise = loadStripe(STRIPE_CONFIG.publishableKey);
 
@@ -90,12 +90,14 @@ function StripePaymentForm({
 }) {
   const stripe = useStripe();
   const elements = useElements();
+  const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
 
   const [loading, setLoading] = useState<boolean>(false);
   const [message, setMessage] = useState<string | null>(null);
   const [amount, setAmount] = useState<string | null>(null);
   const [stripeReady, setStripeReady] = useState<boolean>(false);
   const [showHowItWorks, setShowHowItWorks] = useState<boolean>(false);
+  const [showAddressElement, setShowAddressElement] = useState<boolean>(false);
 
   useEffect(() => {
     if (stripe && elements) {
@@ -122,6 +124,13 @@ function StripePaymentForm({
     fetchPaymentIntent();
   }, [clientSecret, stripe]);
 
+  // Handle payment element changes
+  const handlePaymentElementChange = (event: any) => {
+    // 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: React.FormEvent) => {
     e.preventDefault();
 
@@ -135,30 +144,38 @@ function StripePaymentForm({
 
     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`,
+        },
+      })) as PaymentIntentResult;
+
+      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));
       setMessage("Payment failed. Please try again.");
@@ -167,18 +184,32 @@ function StripePaymentForm({
     }
   };
 
+  // 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 <StripeLoadingState />;
   }
 
-  const stripeElementOptions = {
+  const stripeElementOptions: StripePaymentElementOptions = {
     layout: "tabs" as const,
-    defaultValues: {
-      billingDetails: {
-        name: "",
-        email: "",
-      },
-    },
     fields: {
       billingDetails: "auto" as const,
     },
@@ -282,7 +313,27 @@ function StripePaymentForm({
         {/* Simplified Payment Form */}
         <div className="bg-as-on-surface-1 w-full rounded-2xl p-6">
           <div className="text-as-primary mb-4 text-lg font-semibold">Payment Details</div>
-          <PaymentElement options={stripeElementOptions} />
+          <PaymentElement onChange={handlePaymentElementChange} options={stripeElementOptions} />
+          {showAddressElement && (
+            <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'
+                  },
+                },
+              }}
+            />
+          )}
         </div>
 
         {/* Error Message */}

package/src/anyspend/react/components/webview/WebviewOnrampPayment.tsx

@@ -3,7 +3,7 @@ import { useAnyspendCreateOnrampOrder, useGeoOnrampOptions, useStripeClientSecre
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
 import centerTruncate from "@b3dotfun/sdk/shared/utils/centerTruncate";
-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";
@@ -35,6 +35,7 @@ function StripePaymentForm({
   const elements = useElements();
   const [isProcessing, setIsProcessing] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [showAddressElement, setShowAddressElement] = useState<boolean>(false);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -67,13 +68,21 @@ function StripePaymentForm({
     }
   };
 
+  // Handle payment element changes
+  const handlePaymentElementChange = (event: any) => {
+    // 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" as const,
-    defaultValues: {
-      billingDetails: {
-        name: "",
-        email: "",
-      },
+    fields: {
+      billingDetails: "auto" as const,
+    },
+    wallets: {
+      applePay: "auto" as const,
+      googlePay: "auto" as const,
     },
   };
 
@@ -82,7 +91,30 @@ function StripePaymentForm({
       <div className="overflow-hidden rounded-xl bg-white">
         <div className="px-6 py-4">
           <h2 className="mb-4 text-lg font-semibold">Payment Details</h2>
-          <PaymentElement options={stripeElementOptions} />
+          <PaymentElement options={stripeElementOptions} onChange={handlePaymentElementChange} />
+
+          {showAddressElement && (
+            <div className="mt-4">
+              <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'
+                    },
+                  },
+                }}
+              />
+            </div>
+          )}
 
           {error && (
             <div className="mt-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-600">{error}</div>

package/src/anyspend/react/providers/AnyspendProvider.tsx

@@ -3,6 +3,7 @@
 import { TooltipProvider } from "@b3dotfun/sdk/global-account/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactNode, useState } from "react";
+import { StripeRedirectHandler } from "./StripeRedirectHandler";
 
 interface AnyspendProviderProps {
   children: ReactNode;
@@ -27,6 +28,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
@@ -44,7 +46,10 @@ export const AnyspendProvider = function AnyspendProvider({ children }: Anyspend
 
   return (
     <QueryClientProvider client={queryClient}>
-      <TooltipProvider>{children}</TooltipProvider>
+      <TooltipProvider>
+        <StripeRedirectHandler />
+        {children}
+      </TooltipProvider>
     </QueryClientProvider>
   );
 };

package/src/anyspend/react/providers/StripeRedirectHandler.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useModalStore } from "@b3dotfun/sdk/global-account/react";
+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/src/global-account/react/components/B3DynamicModal.tsx

@@ -41,7 +41,7 @@ export function B3DynamicModal() {
       "anySpendBondKit",
     ].find(type => contentType?.type === type)
   ) {
-    contentClass += " max-h-[90dvh] overflow-y-auto no-scrollbar w-full";
+    contentClass += " w-full";
   }
 
   if (
@@ -115,7 +115,7 @@ export function B3DynamicModal() {
       <ModalContent className={contentClass} hideCloseButton={hideCloseButton}>
         <ModalTitle className="sr-only hidden">{contentType?.type || "Modal"}</ModalTitle>
         <ModalDescription className="sr-only hidden">{contentType?.type || "Modal Body"}</ModalDescription>
-        <div className="overflow-auto">
+        <div className="no-scrollbar max-h-[90dvh] overflow-auto sm:max-h-[80dvh]">
           {history.length > 0 && contentType?.showBackButton && (
             <button
               onClick={navigateBack}

package/src/global-account/react/components/ui/dialog.tsx

@@ -50,13 +50,12 @@ const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.
           <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",
+              "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%]",
-              "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",
+              "transition-all ease-out",
               className,
             )}
             {...props}
@@ -65,7 +64,7 @@ const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.
             {!hideCloseButton && (
               <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",
+                  "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,
                 )}
               >

package/src/global-account/react/components/ui/drawer.tsx

@@ -40,9 +40,7 @@ const DrawerContent = React.forwardRef<
         )}
         {...props}
       >
-        {/* <div className="bg-b3-react-muted mx-auto mt-4 h-2 w-[100px] rounded-full" /> */}
         {children}
-        {/* <div className="bg-b3-react-muted mx-auto mt-4 h-2 w-[100px] rounded-full" /> */}
       </DrawerPrimitive.Content>
     </DrawerPortal>
   );

package/src/global-account/react/hooks/index.ts

@@ -20,6 +20,13 @@ 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/src/global-account/react/hooks/useAccountWallet.tsx

@@ -101,10 +101,5 @@ export function useAccountWallet(): {
     ],
   );
 
-  useEffect(() => {
-    console.log(`account`, account);
-    console.log(`useAccountWallet`, res);
-  }, [account, res]);
-
   return res;
 }

package/src/global-account/react/hooks/useProfile.ts

@@ -0,0 +1,141 @@
+import { useQuery } from "@tanstack/react-query";
+
+// TypeScript interface for profile data
+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[];
+}
+
+// TypeScript interface for preference request body
+export interface PreferenceRequestBody {
+  key: string;
+  preferredType: string;
+  signature: string;
+  signer: string;
+  timestamp: number;
+}
+
+const PROFILES_API_URL = "https://profiles.b3.fun";
+
+async function fetchProfile({
+  address,
+  name,
+  fresh = false,
+}: {
+  address?: string;
+  name?: string;
+  fresh?: boolean;
+}): Promise<CombinedProfile> {
+  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,
+}: PreferenceRequestBody): Promise<{ success: boolean }> {
+  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,
+  }: {
+    address?: string;
+    name?: string;
+    fresh?: boolean;
+  },
+  options?: {
+    enabled?: boolean;
+    refetchInterval?: number;
+    staleTime?: number;
+  },
+) {
+  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: string,
+    preferredType: string,
+    signerAddress: string,
+    signMessage: (message: string) => Promise<string>,
+  ) => {
+    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;

package/src/styles/index.css

@@ -169,7 +169,7 @@ html[data-theme="dark"] .b3-root,
 .b3-modal {
   @apply bg-b3-react-background text-b3-react-foreground rounded-2xl border;
   border: 1px solid var(--border);
-  overflow: auto;
+  overflow: hidden;
   outline: none;
 }