@b3dotfun/sdk 0.0.1-alpha.1

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

@@ -0,0 +1,368 @@
+import { Order, USDC_BASE, useStripeClientSecret } from "@b3dotfun/sdk/anyspend";
+import { STRIPE_CONFIG } from "@b3dotfun/sdk/anyspend/constants";
+import { useB3 } from "@b3dotfun/sdk/global-account/react/components/B3Provider";
+import ShinyButton from "@b3dotfun/sdk/global-account/react/components/ui/ShinyButton";
+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 { HelpCircle, Info, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import HowItWorks from "./HowItWorks";
+import PaymentMethodIcons from "./PaymentMethodIcons";
+
+const stripePromise = loadStripe(STRIPE_CONFIG.publishableKey);
+
+interface PaymentStripeWeb2Props {
+  isMainnet: boolean;
+  order: Order;
+  onPaymentSuccess?: (paymentIntent: any) => void;
+}
+
+export default function PaymentStripeWeb2({ isMainnet, order, onPaymentSuccess }: PaymentStripeWeb2Props) {
+  const { theme } = useB3();
+
+  const { clientSecret, isLoadingStripeClientSecret, stripeClientSecretError } = useStripeClientSecret(
+    isMainnet,
+    order.stripePaymentIntentId!
+  );
+
+  if (isLoadingStripeClientSecret) {
+    return <StripeLoadingState />;
+  }
+
+  if (stripeClientSecretError) {
+    return <StripeErrorState error={stripeClientSecretError.message} />;
+  }
+
+  return (
+    <Elements
+      stripe={stripePromise}
+      options={{
+        clientSecret: clientSecret || undefined,
+        appearance: { theme: theme === "light" ? "stripe" : "night" }
+      }}
+    >
+      <StripePaymentForm order={order} clientSecret={clientSecret} onPaymentSuccess={onPaymentSuccess} />
+    </Elements>
+  );
+}
+
+function StripeLoadingState() {
+  return (
+    <div className="relative my-8 flex w-full flex-1 flex-col items-center justify-center">
+      <div className="bg-as-on-surface-1 flex w-full flex-col items-center justify-center gap-4 rounded-2xl p-8">
+        <div className="bg-as-brand/20 flex h-16 w-16 items-center justify-center rounded-full">
+          <div className="text-as-brand h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent" />
+        </div>
+        <div className="text-as-primary/70 text-center">
+          <div className="text-lg font-medium">Initializing payment</div>
+          <div className="text-as-primary/50 mt-2 text-sm">Setting up secure payment form...</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StripeErrorState({ error }: { error: string }) {
+  return (
+    <div className="relative my-8 flex w-full flex-1 flex-col items-center justify-center">
+      <div className="bg-as-red/10 border-as-red/20 flex w-full items-center gap-3 rounded-2xl border p-4">
+        <div className="bg-as-red flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
+          <svg className="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </div>
+        <div className="text-as-red text-sm font-medium">Error: {error}</div>
+      </div>
+    </div>
+  );
+}
+
+function StripePaymentForm({
+  order,
+  clientSecret,
+  onPaymentSuccess
+}: {
+  order: Order;
+  clientSecret: string | null;
+  onPaymentSuccess?: (paymentIntent: any) => void;
+}) {
+  const stripe = useStripe();
+  const elements = useElements();
+
+  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);
+
+  useEffect(() => {
+    if (stripe && elements) {
+      setStripeReady(true);
+      console.log("@@stripe-web2-payment:initialized:", JSON.stringify({ orderId: order.id }, null, 2));
+    }
+  }, [stripe, elements, order.id]);
+
+  useEffect(() => {
+    const fetchPaymentIntent = async () => {
+      if (!stripe || !clientSecret) return;
+
+      try {
+        const paymentIntent = await stripe.retrievePaymentIntent(clientSecret);
+        const amount = paymentIntent.paymentIntent?.amount
+          ? formatStripeAmount(paymentIntent.paymentIntent.amount)
+          : null;
+        setAmount(amount);
+      } catch (error) {
+        console.error("@@stripe-web2-payment:retrieve-intent-error:", JSON.stringify(error, null, 2));
+      }
+    };
+
+    fetchPaymentIntent();
+  }, [clientSecret, stripe]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!stripe || !elements) {
+      setMessage("Stripe is not initialized");
+      return;
+    }
+
+    setLoading(true);
+    setMessage(null);
+
+    try {
+      console.log("@@stripe-web2-payment:confirming-payment:", JSON.stringify({ orderId: order.id }, null, 2));
+      const { error, paymentIntent } = 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);
+      }
+    } catch (error) {
+      console.error("@@stripe-web2-payment:confirmation-error:", JSON.stringify(error, null, 2));
+      setMessage("Payment failed. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!stripeReady) {
+    return <StripeLoadingState />;
+  }
+
+  const stripeElementOptions = {
+    layout: "tabs" as const,
+    defaultValues: {
+      billingDetails: {
+        name: "",
+        email: ""
+      }
+    },
+    fields: {
+      billingDetails: "auto" as const
+    },
+    wallets: {
+      applePay: "auto" as const,
+      googlePay: "auto" as const
+    }
+  };
+
+  const howItWorksSteps = [
+    {
+      number: 1,
+      description: "Enter your payment details securely using Stripe's encrypted form"
+    },
+    {
+      number: 2,
+      description: "Your payment is processed instantly and securely through our payment partner"
+    },
+    {
+      number: 3,
+      description: "After payment confirmation, your order will be processed and completed automatically"
+    }
+  ];
+
+  return (
+    <div className="relative my-8 flex w-full flex-1 flex-col items-center justify-center">
+      <form onSubmit={handleSubmit} className="w-full space-y-6">
+        {/* Combined Header with Security and Amount */}
+        <div className="bg-as-on-surface-1 w-full rounded-2xl p-6">
+          {/* Security Badge */}
+          <div className="mb-4 flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="bg-as-brand/20 flex h-8 w-8 shrink-0 items-center justify-center rounded-full">
+                <svg className="text-as-brand h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+                  />
+                </svg>
+              </div>
+              <div>
+                <div className="text-as-primary text-sm font-medium">Secured by Stripe</div>
+                <div className="text-as-primary/50 text-xs">End-to-end encrypted payment</div>
+              </div>
+            </div>
+
+            {/* How it works button */}
+            <button
+              type="button"
+              onClick={() => setShowHowItWorks(true)}
+              className="text-as-primary/60 hover:text-as-primary flex items-center gap-1 text-xs transition-colors"
+            >
+              <HelpCircle className="h-4 w-4" />
+              <span>How it works</span>
+            </button>
+          </div>
+
+          {/* Amount Display */}
+          {amount && (
+            <div className="border-as-stroke border-t pt-4">
+              <div className="text-as-primary/50 mb-3 text-sm">Payment Breakdown</div>
+
+              {/* Calculate fee breakdown */}
+              {(() => {
+                const originalAmount = Number(order.srcAmount) / 10 ** USDC_BASE.decimals;
+                const finalAmount = Number(amount);
+                const calculatedFee = finalAmount - originalAmount;
+
+                return (
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-as-primary/60">Amount</span>
+                      <span className="text-as-primary">${originalAmount.toFixed(2)}</span>
+                    </div>
+                    <div className="flex items-center justify-between text-sm">
+                      <div className="flex items-center gap-1">
+                        <span className="text-as-primary/60">Processing fee</span>
+                        <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.`}
+                        >
+                          <Info className="text-as-primary/40 hover:text-as-primary/60 h-3 w-3 transition-colors" />
+                        </Tooltip>
+                      </div>
+                      <span className="text-as-primary">${calculatedFee.toFixed(2)}</span>
+                    </div>
+                    <div className="border-as-stroke border-t pt-2">
+                      <div className="flex items-center justify-between">
+                        <span className="text-as-primary font-semibold">Total Amount</span>
+                        <span className="text-as-primary text-2xl font-bold">${finalAmount.toFixed(2)} USD</span>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })()}
+            </div>
+          )}
+        </div>
+
+        {/* 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} />
+        </div>
+
+        {/* Error Message */}
+        {message && (
+          <div className="bg-as-red/10 border-as-red/20 flex w-full items-center gap-3 rounded-2xl border p-4">
+            <div className="bg-as-red flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
+              <svg className="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </div>
+            <div className="text-as-red text-sm font-medium">{message}</div>
+          </div>
+        )}
+
+        {/* Submit Button */}
+        <ShinyButton
+          type="submit"
+          accentColor="hsl(var(--as-brand))"
+          disabled={!stripe || !elements || loading}
+          className="relative w-full py-4 text-lg font-semibold"
+        >
+          {loading ? (
+            <div className="flex items-center justify-center gap-3">
+              <div className="h-5 w-5 animate-spin rounded-full border-2 border-current border-t-transparent" />
+              <span className="text-white">Processing Payment...</span>
+            </div>
+          ) : (
+            <div className="flex items-center justify-center gap-2">
+              <span className="text-white">Complete Payment</span>
+              {amount && <span className="text-white/90">${Number(amount).toFixed(2)}</span>}
+            </div>
+          )}
+        </ShinyButton>
+      </form>
+
+      {/* How it works modal */}
+      {showHowItWorks && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
+          <div className="bg-as-on-surface-1 relative max-h-[80vh] w-full max-w-2xl overflow-y-auto rounded-2xl p-6">
+            {/* Modal header */}
+            <div className="mb-6 flex items-center justify-between">
+              <h2 className="text-as-primary text-xl font-semibold">How it works</h2>
+              <button
+                onClick={() => setShowHowItWorks(false)}
+                className="text-as-primary/60 hover:text-as-primary transition-colors"
+              >
+                <X className="h-6 w-6" />
+              </button>
+            </div>
+
+            {/* Modal content */}
+            <div className="space-y-6">
+              <PaymentMethodIcons />
+              <HowItWorks steps={howItWorksSteps} />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Add tooltip component
+function Tooltip({ children, content }: { children: React.ReactNode; content: string }) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  return (
+    <div className="relative inline-block">
+      <div onMouseEnter={() => setIsVisible(true)} onMouseLeave={() => setIsVisible(false)} className="cursor-help">
+        {children}
+      </div>
+      {isVisible && (
+        <div className="absolute bottom-full left-1/2 z-50 mb-2 w-80 -translate-x-1/2">
+          <div className="bg-as-on-surface-1 border-as-stroke text-as-primary rounded-lg border p-3 text-sm shadow-lg">
+            <div className="whitespace-pre-line">{content}</div>
+            <div className="absolute left-1/2 top-full -translate-x-1/2">
+              <div className="border-t-as-on-surface-1 border-l-4 border-r-4 border-t-4 border-transparent"></div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,26 @@
+import { OnrampVendor, Order } from "@b3dotfun/sdk/anyspend";
+import PaymentOneClick from "./PaymentOneClick";
+import PaymentStripeWeb2 from "./PaymentStripeWeb2";
+
+interface PaymentVendorUIProps {
+  isMainnet: boolean;
+  order: Order;
+  dstTokenSymbol: string;
+}
+
+export default function PaymentVendorUI({ isMainnet, order, dstTokenSymbol }: PaymentVendorUIProps) {
+  const vendor = order.onrampMetadata?.vendor;
+
+  // Handle one-click payment flows (Coinbase, Stripe redirect)
+  if (order.oneClickBuyUrl) {
+    return <PaymentOneClick order={order} dstTokenSymbol={dstTokenSymbol} />;
+  }
+
+  // Handle Stripe Web2 payment flow
+  if (vendor === OnrampVendor.StripeWeb2) {
+    return <PaymentStripeWeb2 isMainnet={isMainnet} order={order} />;
+  }
+
+  // Return null for unsupported vendors
+  return null;
+}

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

@@ -0,0 +1,63 @@
+import { Token } from "@b3dotfun/sdk/anyspend";
+import { useTokenBalance } from "@b3dotfun/sdk/global-account/react/hooks/useTokenBalance";
+import { formatUnits } from "viem";
+
+export default function TokenBalance({
+  token,
+  walletAddress,
+  onChangeInput
+}: {
+  token: Token;
+  walletAddress: string | undefined;
+  onChangeInput: (value: string) => void;
+}) {
+  const { rawBalance, formattedBalance, isLoading } = useTokenBalance({
+    token,
+    address: walletAddress
+  });
+
+  const handlePercentageClick = (percentage: number) => {
+    if (!rawBalance) return;
+
+    // Calculate the amount based on percentage of balance
+    // Multiply first, then divide to avoid BigInt truncation
+    const amount = percentage === 100 ? rawBalance : (rawBalance * BigInt(percentage)) / 100n;
+
+    onChangeInput(formatUnits(amount, token.decimals));
+  };
+
+  return (
+    <div className="flex h-7 items-center justify-end gap-1" key={`balance-${token.address}-${token.chainId}`}>
+      {!isLoading && (
+        <>
+          <div className="text-as-primary/50 inline-flex rounded-lg text-sm">
+            {rawBalance ? `Balance: ${formattedBalance}` : `Balance: 0`}
+          </div>
+
+          {!!rawBalance && (
+            <>
+              <button
+                onClick={() => handlePercentageClick(20)}
+                className="text-as-primary/50 bg-as-on-surface-2 hover:bg-as-on-surface-3 inline-flex rounded-lg px-2 py-1 text-xs transition-colors sm:hidden"
+              >
+                20%
+              </button>
+              <button
+                onClick={() => handlePercentageClick(50)}
+                className="text-as-primary/50 bg-as-on-surface-2 hover:bg-as-on-surface-3 inline-flex rounded-lg px-2 py-1 text-xs transition-colors"
+              >
+                50%
+              </button>
+              <button
+                onClick={() => handlePercentageClick(100)}
+                className="text-as-primary/50 bg-as-on-surface-2 hover:bg-as-on-surface-3 inline-flex rounded-lg px-2 py-1 text-xs transition-colors"
+              >
+                MAX
+              </button>
+            </>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

package/src/anyspend/react/components/icons/EthIcon.tsx

@@ -0,0 +1,31 @@
+export function EthIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path fill="#8FFCF3" d="M12 3v6.65l5.625 2.516z" />
+      <path fill="#CABCF8" d="m12 3-5.625 9.166L12 9.651z" />
+      <path fill="#CBA7F5" d="M12 16.477v4.522l5.625-7.784z" />
+      <path fill="#74A0F3" d="M12 21v-4.523l-5.625-3.262z" />
+      <path fill="#CBA7F5" d="m12 15.43 5.625-3.263L12 9.65z" />
+      <path fill="#74A0F3" d="M6.375 12.167 12 15.429V9.651z" />
+      <path
+        fill="#202699"
+        fillRule="evenodd"
+        d="m12 15.429-5.625-3.263L12 3l5.625 9.166zM6.749 11.9l5.16-8.41v6.115zm-.077.23 5.238-2.327v5.364zm5.418-2.327v5.364l5.233-3.038zm0-.198 5.16 2.295-5.16-8.41z"
+        clipRule="evenodd"
+      />
+      <path
+        fill="#202699"
+        fillRule="evenodd"
+        d="M12 16.406 6.375 13.21 12 21l5.625-7.79zm-4.995-2.633 4.905 2.79v4.005zm5.085 2.79v4.005l4.905-6.795z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

package/src/anyspend/react/components/icons/SolIcon.tsx

@@ -0,0 +1,39 @@
+export function SolIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path
+        fill="url(#SOL__a)"
+        d="M18.413 7.903a.62.62 0 0 1-.411.164H3.58c-.512 0-.77-.585-.416-.929l2.368-2.283a.6.6 0 0 1 .41-.169h14.479c.517 0 .77.59.41.934z"
+      />
+      <path
+        fill="url(#SOL__b)"
+        d="M18.413 19.157a.6.6 0 0 1-.411.157H3.58c-.512 0-.77-.58-.416-.923l2.368-2.289a.6.6 0 0 1 .41-.163h14.479c.517 0 .77.585.41.928z"
+      />
+      <path
+        fill="url(#SOL__c)"
+        d="M18.413 10.472a.6.6 0 0 0-.411-.158H3.58c-.512 0-.77.58-.416.922l2.368 2.29a.62.62 0 0 0 .41.163h14.479c.517 0 .77-.585.41-.928z"
+      />
+      <defs>
+        <linearGradient id="SOL__a" x1="3.001" x2="21.431" y1="16.322" y2="15.591" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#599DB0" />
+          <stop offset="1" stopColor="#47F8C3" />
+        </linearGradient>
+        <linearGradient id="SOL__b" x1="3.001" x2="21.323" y1="16.973" y2="16.366" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#C44FE2" />
+          <stop offset="1" stopColor="#73B0D0" />
+        </linearGradient>
+        <linearGradient id="SOL__c" x1="4.035" x2="20.302" y1="12.002" y2="12.002" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#778CBF" />
+          <stop offset="1" stopColor="#5DCDC9" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}

package/src/anyspend/react/components/icons/USDCIcon.tsx

@@ -0,0 +1,19 @@
+export function UsdcIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path
+        fill="#2775CA"
+        fillRule="evenodd"
+        d="M12 21c4.99 0 9-4.01 9-9s-4.01-9-9-9-9 4.01-9 9 4.01 9 9 9m2.475-7.578c0-1.31-.787-1.76-2.362-1.946-1.125-.152-1.35-.45-1.35-.978 0-.523.377-.86 1.125-.86.675 0 1.052.224 1.237.787.04.112.152.185.265.185h.596a.256.256 0 0 0 .264-.259v-.039c-.152-.827-.827-1.614-1.687-1.687v-.827c0-.152-.113-.265-.298-.298h-.495c-.152 0-.293.112-.332.298v.827c-1.125.151-1.873 1.012-1.873 1.951 0 1.238.748 1.722 2.323 1.913 1.052.185 1.39.41 1.39 1.012 0 .597-.53 1.013-1.238 1.013-.98 0-1.316-.416-1.429-.979-.034-.146-.146-.225-.259-.225h-.641a.256.256 0 0 0-.259.264v.04c.146.934.748 1.575 1.986 1.76v.833c0 .152.112.253.298.293h.54c.146 0 .248-.102.287-.293v-.833c1.125-.185 1.912-.939 1.912-1.952m-6.262 2.803a5.6 5.6 0 0 0 1.875 1.135c.112.079.225.225.225.338v.528c0 .073 0 .113-.04.146-.033.152-.185.225-.337.152a6.751 6.751 0 0 1 0-12.864c.04-.034.112-.034.152-.034.152.034.225.147.225.298v.524c0 .19-.073.303-.225.376a5.55 5.55 0 0 0-3.336 3.336 5.59 5.59 0 0 0 1.46 6.065m5.514-10.413c.034-.152.186-.225.338-.152a6.8 6.8 0 0 1 4.387 4.427c1.125 3.56-.827 7.352-4.387 8.477-.04.033-.113.033-.152.033-.152-.033-.225-.146-.225-.298v-.523c0-.191.073-.303.225-.377a5.55 5.55 0 0 0 3.335-3.335 5.585 5.585 0 0 0-3.335-7.2c-.113-.079-.225-.225-.225-.377v-.523c0-.079 0-.113.04-.152"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

package/src/anyspend/react/components/modals/EnterRecipientModal.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import { Dialog, DialogContent } from "@b3dotfun/sdk/global-account/react/components/ui/dialog";
+import { Input } from "@b3dotfun/sdk/global-account/react/components/ui/input";
+import ShinyButton from "@b3dotfun/sdk/global-account/react/components/ui/ShinyButton";
+
+export function EnterRecipientModal({
+  isOpenPasteRecipientAddress,
+  setIsOpenPasteRecipientAddress,
+  recipientAddress,
+  setRecipientAddress
+}: {
+  isOpenPasteRecipientAddress: boolean;
+  setIsOpenPasteRecipientAddress: (isOpen: boolean) => void;
+  recipientAddress: string | undefined;
+  setRecipientAddress: (address: string) => void;
+}) {
+  const [modalRecipientAddress, setModalRecipientAddress] = useState(recipientAddress || "");
+
+  useEffect(() => {
+    setModalRecipientAddress(recipientAddress || "");
+  }, [recipientAddress]);
+
+  return (
+    <Dialog open={isOpenPasteRecipientAddress} onOpenChange={setIsOpenPasteRecipientAddress}>
+      <DialogContent className="w-[420px] max-w-[calc(100vw-32px)] rounded-2xl p-3.5">
+        <div className="flex flex-col gap-3">
+          <div className="text-as-primary font-semibold">To address</div>
+          <Input
+            value={modalRecipientAddress}
+            onChange={e => setModalRecipientAddress(e.target.value)}
+            placeholder="Enter address"
+            className="h-12 rounded-lg"
+            spellCheck={false}
+          />
+          <ShinyButton
+            accentColor={"hsl(var(--as-brand))"}
+            textColor="text-white"
+            className="w-full rounded-lg"
+            onClick={() => {
+              setIsOpenPasteRecipientAddress(false);
+              setRecipientAddress(modalRecipientAddress);
+            }}
+          >
+            Save
+          </ShinyButton>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/anyspend/react/hooks/index.ts

@@ -0,0 +1,13 @@
+export * from "./useAnyspendCreateOnrampOrder";
+export * from "./useAnyspendCreateOrder";
+export * from "./useAnyspendOrderAndTransactions";
+export * from "./useAnyspendOrderHistory";
+export * from "./useAnyspendQuote";
+export * from "./useAnyspendSendPermitData";
+export * from "./useAnyspendTokens";
+export * from "./useCoinbaseOnrampOptions";
+export * from "./useGeoOnrampOptions";
+export * from "./useGetGeo";
+export * from "./usePermitData";
+export * from "./useStripeClientSecret";
+export * from "./useStripeSupport";