@b3dotfun/sdk 0.0.5-alpha.0 → 0.0.5-alpha.2

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

@@ -1,16 +1,65 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { getChainName, OnrampVendor, OrderType, useAnyspendCreateOnrampOrder, useGeoOnrampOptions } from "../../../../anyspend/index.js";
-import { Button } from "../../../../global-account/react/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getChainName, OnrampVendor, OrderType, STRIPE_CONFIG, useAnyspendCreateOnrampOrder, useGeoOnrampOptions, useStripeClientSecret } from "../../../../anyspend/index.js";
 import centerTruncate from "../../../../shared/utils/centerTruncate.js";
+import { 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";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { formatUnits } from "viem";
-export function WebviewOnrampPayment({ srcAmountOnRamp, recipientAddress, destinationToken, anyspendQuote, onOrderCreated, userId }) {
-    // Use a stable amount for geo onramp options to prevent unnecessary refetches
+const stripePromise = loadStripe(STRIPE_CONFIG.publishableKey);
+// Stripe Payment Form Component
+function StripePaymentForm({ order, onPaymentSuccess }) {
+    const stripe = useStripe();
+    const elements = useElements();
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [error, setError] = useState(null);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!stripe || !elements) {
+            return;
+        }
+        setIsProcessing(true);
+        setError(null);
+        try {
+            const { error: submitError } = await stripe.confirmPayment({
+                elements,
+                redirect: "if_required"
+            });
+            if (submitError) {
+                setError(submitError.message || "An error occurred");
+                console.error("Payment error:", submitError);
+            }
+            else {
+                console.log("Payment successful");
+                onPaymentSuccess(order.id);
+            }
+        }
+        catch (err) {
+            setError(err.message || "An error occurred");
+            console.error("Payment error:", err);
+        }
+        finally {
+            setIsProcessing(false);
+        }
+    };
+    const stripeElementOptions = {
+        layout: "tabs",
+        defaultValues: {
+            billingDetails: {
+                name: "",
+                email: ""
+            }
+        }
+    };
+    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" })) })] }) }) }));
+}
+export function WebviewOnrampPayment({ srcAmountOnRamp, recipientAddress, destinationToken, anyspendQuote, onPaymentSuccess, userId, partnerId }) {
     const [stableAmountForGeo, setStableAmountForGeo] = useState(srcAmountOnRamp);
     const hasInitialized = useRef(false);
+    const [createdOrder, setCreatedOrder] = useState(null);
+    const orderCreationAttempted = useRef(false);
     // Only update the stable amount on first render or when explicitly needed
     useEffect(() => {
         if (!hasInitialized.current && srcAmountOnRamp) {
@@ -19,69 +68,100 @@ export function WebviewOnrampPayment({ srcAmountOnRamp, recipientAddress, destin
         }
     }, [srcAmountOnRamp]);
     const { geoData, isStripeWeb2Supported, isLoading: isLoadingGeoOnramp } = useGeoOnrampOptions(true, stableAmountForGeo);
-    console.log("isStripeWeb2Supported", isStripeWeb2Supported);
     const { createOrder, isCreatingOrder } = useAnyspendCreateOnrampOrder({
         onSuccess: data => {
             const orderId = data.data.id;
-            window.location.href = `${window.location.origin}/?orderId=${orderId}`;
+            setCreatedOrder(data.data);
         },
         onError: error => {
             console.error(error);
             toast.error("Failed to create order: " + error.message);
         }
     });
-    const handleContinueToPayment = async () => {
-        try {
-            if (!recipientAddress) {
-                toast.error("Please select a recipient");
-                return;
-            }
-            if (!srcAmountOnRamp || parseFloat(srcAmountOnRamp) <= 0) {
-                toast.error("Please enter a valid amount");
-                return;
-            }
-            if (!isStripeWeb2Supported) {
-                toast.error("Stripe credit card not available");
-                return;
-            }
-            if (!anyspendQuote) {
-                toast.error("Failed to get quote");
-                return;
+    const { clientSecret, isLoadingStripeClientSecret } = useStripeClientSecret(true, createdOrder?.stripePaymentIntentId || "");
+    // Create order when component mounts and all required data is available
+    useEffect(() => {
+        const createOrderIfPossible = async () => {
+            if (!orderCreationAttempted.current &&
+                recipientAddress &&
+                srcAmountOnRamp &&
+                parseFloat(srcAmountOnRamp) > 0 &&
+                isStripeWeb2Supported &&
+                anyspendQuote &&
+                geoData) {
+                orderCreationAttempted.current = true;
+                try {
+                    const getDstToken = () => {
+                        return {
+                            ...destinationToken,
+                            chainId: destinationToken.chainId,
+                            address: destinationToken.address
+                        };
+                    };
+                    createOrder({
+                        isMainnet: true,
+                        recipientAddress,
+                        orderType: OrderType.Swap,
+                        dstChain: getDstToken().chainId,
+                        dstToken: getDstToken(),
+                        srcFiatAmount: srcAmountOnRamp,
+                        onramp: {
+                            vendor: OnrampVendor.StripeWeb2,
+                            paymentMethod: "",
+                            country: geoData.country || "US",
+                            ipAddress: geoData.ip,
+                            redirectUrl: `${window.location.origin}${userId ? `?userId=${userId}` : ""}`
+                        },
+                        expectedDstAmount: anyspendQuote.data?.currencyOut?.amount?.toString() || "0",
+                        partnerId
+                    });
+                }
+                catch (err) {
+                    console.error(err);
+                    toast.error("Failed to create order: " + err.message);
+                }
             }
-            const getDstToken = () => {
-                return {
-                    ...destinationToken,
-                    chainId: destinationToken.chainId,
-                    address: destinationToken.address
-                };
-            };
-            createOrder({
-                isMainnet: true,
-                recipientAddress,
-                orderType: OrderType.Swap,
-                dstChain: getDstToken().chainId,
-                dstToken: getDstToken(),
-                srcFiatAmount: srcAmountOnRamp,
-                onramp: {
-                    vendor: OnrampVendor.StripeWeb2,
-                    paymentMethod: "",
-                    country: geoData?.country || "US",
-                    ipAddress: geoData?.ip,
-                    redirectUrl: `${window.location.origin}${userId ? `?userId=${userId}` : ""}`
-                },
-                expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount?.toString() || "0"
-            });
-        }
-        catch (err) {
-            console.error(err);
-            toast.error("Failed to create order: " + err.message);
-        }
-    };
-    return (_jsxs("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-6", children: [_jsxs(_Fragment, { children: [_jsx("h2", { className: "-mb-3 text-lg font-semibold", children: "Order summary" }), _jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex flex-col gap-3 rounded-lg border p-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-b3-react-foreground/60", children: "Receiving" }), _jsxs("div", { className: "flex items-center gap-2", children: [destinationToken.metadata?.logoURI && (_jsx("img", { src: destinationToken.metadata.logoURI, alt: destinationToken.symbol, className: "h-6 w-6 rounded-full" })), _jsxs("span", { className: "text-b3-react-foreground/80", children: [anyspendQuote?.data?.currencyOut?.amount
+        };
+        createOrderIfPossible();
+    }, [
+        recipientAddress,
+        srcAmountOnRamp,
+        isStripeWeb2Supported,
+        anyspendQuote,
+        geoData,
+        createOrder,
+        destinationToken,
+        userId,
+        partnerId
+    ]);
+    // Check if all required data is loaded
+    const isLoading = isLoadingGeoOnramp || !anyspendQuote || !destinationToken.metadata?.logoURI;
+    // Show loading state while data is being fetched or order is being created
+    if (isLoading || isCreatingOrder || isLoadingStripeClientSecret) {
+        return (_jsxs("div", { className: "mx-auto flex w-full max-w-[460px] flex-col items-center justify-center gap-3 py-12", children: [_jsx(Loader2, { className: "text-as-brand h-8 w-8 animate-spin" }), _jsx("span", { className: "text-as-primary/70", children: isCreatingOrder
+                        ? "Creating payment session..."
+                        : isLoadingStripeClientSecret
+                            ? "Loading payment form..."
+                            : "Loading payment details..." })] }));
+    }
+    // If we have a created order and client secret, show the payment form
+    if (createdOrder && clientSecret) {
+        return (_jsxs("div", { className: "mx-auto flex w-full max-w-[460px] flex-col gap-6", 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: "Order summary" }), _jsxs("div", { className: "flex flex-col divide-y", children: [_jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "Receiving" }), _jsxs("div", { className: "flex items-center gap-2", children: [destinationToken.metadata?.logoURI && (_jsx("img", { src: destinationToken.metadata.logoURI, alt: destinationToken.symbol, className: "h-5 w-5 rounded-full" })), _jsxs("span", { className: "font-medium", children: [anyspendQuote?.data?.currencyOut?.amount
+                                                                ? Number(formatUnits(BigInt(anyspendQuote.data.currencyOut.amount), destinationToken.decimals)).toFixed(4)
+                                                                : "0", " ", destinationToken.symbol] })] })] }), _jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "Network" }), _jsx("span", { className: "font-medium", children: getChainName(destinationToken.chainId) })] }), recipientAddress && (_jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "Recipient" }), _jsx("span", { className: "font-medium", children: centerTruncate(recipientAddress) })] })), _jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "You Pay" }), _jsxs("span", { className: "text-lg font-semibold", children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] })] })] })] }) }), _jsx(Elements, { stripe: stripePromise, options: {
+                        clientSecret,
+                        appearance: {
+                            theme: "flat",
+                            variables: {
+                                colorPrimary: "#2563eb",
+                                colorBackground: "#ffffff",
+                                borderRadius: "12px"
+                            }
+                        }
+                    }, children: _jsx(StripePaymentForm, { order: createdOrder, onPaymentSuccess: onPaymentSuccess }) })] }));
+    }
+    // Show initial order summary while waiting for order creation
+    return (_jsx(motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, className: "mx-auto w-full max-w-[460px]", 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: "Order summary" }), _jsxs("div", { className: "flex flex-col divide-y", children: [_jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "Receiving" }), _jsxs("div", { className: "flex items-center gap-2", children: [destinationToken.metadata?.logoURI && (_jsx("img", { src: destinationToken.metadata.logoURI, alt: destinationToken.symbol, className: "h-5 w-5 rounded-full" })), _jsxs("span", { className: "font-medium", children: [anyspendQuote?.data?.currencyOut?.amount
                                                         ? Number(formatUnits(BigInt(anyspendQuote.data.currencyOut.amount), destinationToken.decimals)).toFixed(4)
-                                                        : "0", " ", destinationToken.symbol] })] })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-b3-react-foreground/60", children: "Network" }), _jsx("span", { className: "text-b3-react-foreground/80", children: getChainName(destinationToken.chainId) })] }), recipientAddress && (_jsxs(motion.div, { initial: false, animate: {
-                                    opacity: 1,
-                                    y: 0,
-                                    filter: "blur(0px)"
-                                }, transition: { duration: 0.3, delay: 0.2, ease: "easeInOut" }, className: "flex items-center justify-between", children: [_jsx("p", { className: "text-b3-react-foreground/60", children: "Recipient" }), _jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: "text-b3-react-foreground/80", children: centerTruncate(recipientAddress) }) })] })), _jsx("div", { className: "border-b3-react-border border-t pt-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-b3-react-foreground font-semibold", children: "You Pay" }), _jsxs("p", { className: "text-b3-react-foreground text-xl font-semibold", children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] })] }) })] })] }), isCreatingOrder ? (_jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), _jsx("span", { className: "text-as-primary/70", children: "Creating payment session..." })] })) : isLoadingGeoOnramp ? (_jsxs("div", { className: "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), _jsx("span", { className: "text-as-primary/70", children: "Loading payment options..." })] })) : (_jsx("div", { className: "flex flex-col gap-4", children: _jsx(Button, { onClick: handleContinueToPayment, disabled: isCreatingOrder || !isStripeWeb2Supported, className: "bg-as-brand hover:bg-as-brand/90 text-as-primary h-14 w-full rounded-xl text-lg font-medium", children: isCreatingOrder ? "Creating Payment..." : "Continue to Payment" }) }))] }));
+                                                        : "0", " ", destinationToken.symbol] })] })] }), _jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "Network" }), _jsx("span", { className: "font-medium", children: getChainName(destinationToken.chainId) })] }), recipientAddress && (_jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "Recipient" }), _jsx("span", { className: "font-medium", children: centerTruncate(recipientAddress) })] })), _jsxs("div", { className: "flex items-center justify-between py-3", children: [_jsx("span", { className: "text-gray-600", children: "You Pay" }), _jsxs("span", { className: "text-lg font-semibold", children: ["$", parseFloat(srcAmountOnRamp).toFixed(2)] })] })] })] }) }) }));
 }

package/dist/esm/anyspend/react/hooks/useAnyspendCreateOnrampOrder.d.ts

@@ -14,6 +14,7 @@ export type CreateOnrampOrderParams = {
     dstToken: Token;
     srcFiatAmount: string;
     onramp: OnrampOptions;
+    partnerId?: string;
     expectedDstAmount: string;
     creatorAddress?: string;
     nft?: Nft & {

package/dist/esm/anyspend/react/hooks/useAnyspendCreateOnrampOrder.js

@@ -1,10 +1,10 @@
+import { USDC_BASE } from "../../../anyspend/constants/index.js";
 import { anyspendService } from "../../../anyspend/services/anyspend.js";
-import { normalizeAddress, buildMetadata, buildPayload } from "../../../anyspend/utils/index.js";
+import { buildMetadata, buildPayload, normalizeAddress } from "../../../anyspend/utils/index.js";
 import { useMutation } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { parseUnits } from "viem";
 import { base } from "viem/chains";
-import { USDC_BASE } from "../../../anyspend/constants/index.js";
 /**
  * Hook for creating onramp orders in the Anyspend protocol
  * Specifically handles orders that involve fiat-to-crypto onramp functionality
@@ -12,7 +12,7 @@ import { USDC_BASE } from "../../../anyspend/constants/index.js";
 export function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
     const { mutate: createOrder, isPending } = useMutation({
         mutationFn: async (params) => {
-            const { isMainnet, recipientAddress, orderType, dstChain, dstToken, srcFiatAmount, onramp, creatorAddress, expectedDstAmount, nft, tournament, payload } = params;
+            const { isMainnet, recipientAddress, orderType, dstChain, dstToken, srcFiatAmount, onramp, creatorAddress, expectedDstAmount, nft, tournament, payload, partnerId } = params;
             try {
                 // Validate Stripe onramp options
                 if (onramp.vendor === "stripe" && !onramp.ipAddress) {
@@ -54,7 +54,8 @@ export function useAnyspendCreateOnrampOrder({ onSuccess, onError } = {}) {
                         tournament,
                         payload
                     }),
-                    creatorAddress: creatorAddress ? normalizeAddress(creatorAddress) : undefined
+                    creatorAddress: creatorAddress ? normalizeAddress(creatorAddress) : undefined,
+                    partnerId
                 });
             }
             catch (error) {

package/dist/esm/anyspend/services/anyspend.d.ts

@@ -4,7 +4,7 @@ export declare const anyspendService: {
     getTokenList: (isMainnet: boolean, chainId: number, query: string) => Promise<Token[]>;
     getToken: (isMainnet: boolean, chainId: number, tokenAddress: string) => Promise<Token>;
     getQuote: (isMainnet: boolean, req: GetQuoteRequest) => Promise<GetQuoteResponse>;
-    createOrder: ({ isMainnet, recipientAddress, type, srcChain, dstChain, srcTokenAddress, dstTokenAddress, srcAmount, payload, onramp, metadata, creatorAddress }: {
+    createOrder: ({ isMainnet, recipientAddress, type, srcChain, dstChain, srcTokenAddress, dstTokenAddress, srcAmount, payload, onramp, metadata, creatorAddress, partnerId }: {
         isMainnet: boolean;
         recipientAddress: string;
         type: string;
@@ -17,6 +17,7 @@ export declare const anyspendService: {
         onramp?: OnrampOptions;
         metadata: Record<string, any>;
         creatorAddress?: string;
+        partnerId?: string;
     }) => Promise<any>;
     getOrderAndTransactions: (isMainnet: boolean, orderId: string | undefined) => Promise<GetOrderAndTxsResponse>;
     getOrderHistory: (isMainnet: boolean, creatorAddress: string | undefined, limit?: number, offset?: number) => Promise<{

package/dist/esm/anyspend/services/anyspend.js

@@ -37,7 +37,7 @@ export const anyspendService = {
         return data;
     },
     // Order related
-    createOrder: async ({ isMainnet, recipientAddress, type, srcChain, dstChain, srcTokenAddress, dstTokenAddress, srcAmount, payload, onramp, metadata, creatorAddress }) => {
+    createOrder: async ({ isMainnet, recipientAddress, type, srcChain, dstChain, srcTokenAddress, dstTokenAddress, srcAmount, payload, onramp, metadata, creatorAddress, partnerId }) => {
         const response = await fetch(`${isMainnet ? ANYSPEND_MAINNET_BASE_URL : ANYSPEND_TESTNET_BASE_URL}/orders`, {
             method: "POST",
             headers: {
@@ -54,7 +54,8 @@ export const anyspendService = {
                 payload,
                 onramp,
                 metadata,
-                creatorAddress
+                creatorAddress,
+                partnerId
             })
         });
         const data = await response.json();

package/dist/esm/global-account/react/hooks/useTokenFromUrl.d.ts

@@ -14,4 +14,8 @@ interface UseTokenFromUrlOptions {
  * Looks for parameters: [prefix]Currency
  */
 export declare function useTokenFromUrl({ defaultToken, prefix }: UseTokenFromUrlOptions): Token;
+export declare function useTokenFromAddress({ address, chainId }: {
+    address: string;
+    chainId: number;
+}): Token | undefined;
 export {};

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

@@ -63,3 +63,25 @@ export function useTokenFromUrl({ defaultToken, prefix }) {
         }
     };
 }
+export function useTokenFromAddress({ address, chainId }) {
+    const { data: tokenInfo, isError } = useQuery({
+        queryKey: ["tokenInfo", address, chainId],
+        queryFn: () => fetchTokenInfo(getCoingeckoChainInfo(chainId).coingecko_id, address),
+        enabled: Boolean(address),
+        staleTime: Infinity,
+        gcTime: Infinity
+    });
+    if (isError || !tokenInfo) {
+        return undefined;
+    }
+    return {
+        address,
+        chainId,
+        name: tokenInfo?.data.attributes.name || "",
+        symbol: tokenInfo?.data.attributes.symbol || "",
+        decimals: tokenInfo?.data.attributes.decimals || 18,
+        metadata: {
+            logoURI: tokenInfo?.data.attributes.image_url
+        }
+    };
+}