@b3dotfun/sdk 0.1.2 → 0.1.5

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

@@ -12,6 +12,7 @@ import { motion } from "motion/react";
 import { memo, useState } from "react";
 
 import { b3 } from "viem/chains";
+import type { OrderDetailsCollapsibleClasses } from "../types/classes";
 
 type Order = components["schemas"]["Order"];
 type Token = components["schemas"]["Token"];
@@ -31,6 +32,7 @@ interface OrderDetailsCollapsibleProps {
   points?: number;
   isOpen?: boolean;
   onOpenChange?: (isOpen: boolean) => void;
+  classes?: OrderDetailsCollapsibleClasses;
 }
 
 export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
@@ -46,6 +48,7 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
   points,
   isOpen,
   onOpenChange,
+  classes,
 }: OrderDetailsCollapsibleProps) {
   const [internalOpen, setInternalOpen] = useState(true);
 
@@ -54,14 +57,13 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
   const setShowOrderDetails = onOpenChange || setInternalOpen;
 
   // Calculate expected amount if not provided
+  // For custom orders, use payload.amount as the expected destination amount
   const expectedDstAmount =
-    order.type === "mint_nft" ||
-    order.type === "join_tournament" ||
-    order.type === "fund_tournament" ||
-    order.type === "custom" ||
-    order.type === "deposit_first"
+    order.type === "mint_nft" || order.type === "join_tournament" || order.type === "fund_tournament"
       ? "0"
-      : order.payload.expectedDstAmount.toString();
+      : order.type === "custom" || order.type === "deposit_first"
+        ? order.payload.amount?.toString() || "0"
+        : order.payload.expectedDstAmount.toString();
 
   const finalFormattedExpectedDstAmount =
     formattedExpectedDstAmount || formatTokenAmount(BigInt(expectedDstAmount), dstToken.decimals);
@@ -69,7 +71,8 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
   return (
     <div
       className={cn(
-        "order-details-collapsible bg-as-surface-secondary border-as-border-secondary rounded-xl border px-4 py-2",
+        classes?.container ||
+          "order-details-collapsible bg-as-surface-secondary border-as-border-secondary rounded-xl border px-4 py-2",
         className,
       )}
     >
@@ -145,6 +148,8 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
                       {formatTokenAmount(BigInt(order.payload.expectedDstAmount), dstToken.decimals)} HYPE
                     </div>
                   </div>
+                ) : order.type === "custom" || order.type === "custom_exact_in" ? (
+                  <span className="order-details-amount-text">{`~${finalFormattedExpectedDstAmount} ${dstToken.symbol}`}</span>
                 ) : null}
 
                 <div className="order-details-chain-info text-as-primary/50 flex items-center gap-2">

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

@@ -13,7 +13,8 @@ interface OrderHistoryProps {
 }
 
 export function OrderHistory({ mode, onBack, onSelectOrder }: OrderHistoryProps) {
-  const { address } = useAccountWallet();
+  const { connectedEOAWallet, address: smartWalletAddress } = useAccountWallet();
+  const address = connectedEOAWallet?.getAccount()?.address || smartWalletAddress;
   const { orderHistory, isLoadingOrderHistory, refetchOrderHistory } = useAnyspendOrderHistory(address);
 
   return (

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

@@ -11,6 +11,7 @@ import { useRef } from "react";
 import { FIAT_PAYMENT_METHOD_DISPLAY, FiatPaymentMethod } from "./FiatPaymentMethod";
 import { OrderTokenAmountFiat } from "./OrderTokenAmountFiat";
 import { PointsBadge } from "./PointsBadge";
+import type { PanelOnrampClasses } from "../types/classes";
 
 const ONE_CHAR_WIDTH = 30;
 
@@ -34,6 +35,7 @@ export function PanelOnramp({
   onShowFeeDetail,
   customUsdInputValues = ["5", "10", "20", "25"],
   customRecipientLabel,
+  classes,
 }: {
   srcAmountOnRamp: string;
   setSrcAmountOnRamp: (amount: string) => void;
@@ -55,6 +57,7 @@ export function PanelOnramp({
   customUsdInputValues?: string[];
   /** Custom label for recipient display (overrides recipientName) */
   customRecipientLabel?: string;
+  classes?: PanelOnrampClasses;
 }) {
   // Helper function to get fees from anyspend quote
   const getFeeFromApi = (paymentMethod: FiatPaymentMethod): number | null => {
@@ -135,7 +138,7 @@ export function PanelOnramp({
   };
 
   return (
-    <div className="panel-onramp bg-as-surface-primary flex w-full flex-col">
+    <div className={classes?.container || "panel-onramp bg-as-surface-primary flex w-full flex-col"}>
       {/* Pay Section */}
       <div className="border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4">
         <div className="flex h-7 w-full items-center justify-between">

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

@@ -8,6 +8,7 @@ import { ChevronLeft, ChevronRight, Landmark, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 
 import { AnySpendFingerprintWrapper, getFingerprintConfig } from "../AnySpendFingerprintWrapper";
+import type { PanelOnrampPaymentClasses } from "../types/classes";
 
 interface PanelOnrampPaymentProps {
   srcAmountOnRamp: string;
@@ -28,6 +29,7 @@ interface PanelOnrampPaymentProps {
   payload?: any;
   recipientEnsName?: string;
   recipientImageUrl?: string;
+  classes?: PanelOnrampPaymentClasses;
 }
 
 export function PanelOnrampPayment(props: PanelOnrampPaymentProps) {
@@ -59,6 +61,7 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
     payload,
     recipientEnsName,
     recipientImageUrl,
+    classes,
   } = props;
 
   const {
@@ -151,11 +154,16 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
   };
 
   return (
-    <div className="mx-auto flex w-full max-w-[460px] flex-col gap-6 px-5 pt-5">
+    <div className={classes?.container || "mx-auto flex w-full max-w-[460px] flex-col gap-6 px-5 pt-5"}>
       {/* Order Summary Section */}
       <>
-        <h2 className="-mb-3 text-lg font-semibold">Order summary</h2>
-        <div className="bg-b3-react-background border-b3-react-border flex flex-col gap-3 rounded-lg border p-4">
+        <h2 className={classes?.summaryTitle || "-mb-3 text-lg font-semibold"}>Order summary</h2>
+        <div
+          className={
+            classes?.summaryCard ||
+            "bg-b3-react-background border-b3-react-border flex flex-col gap-3 rounded-lg border p-4"
+          }
+        >
           {/* Recipient Section */}
           {recipientAddress && (
             <motion.div
@@ -166,9 +174,9 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
                 filter: "blur(0px)",
               }}
               transition={{ duration: 0.3, delay: 0.2, ease: "easeInOut" }}
-              className="flex items-center justify-between"
+              className={classes?.summaryRow || "flex items-center justify-between"}
             >
-              <p className="text-b3-react-foreground/60">
+              <p className={classes?.summaryLabel || "text-b3-react-foreground/60"}>
                 {orderType === "swap"
                   ? "Recipient"
                   : orderType === "mint_nft"
@@ -186,18 +194,25 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
                   />
                 )}
                 <div className="flex flex-col items-end gap-1">
-                  {recipientEnsName && <span className="text-b3-react-foreground/80">@{recipientEnsName}</span>}
-                  <span className="text-b3-react-foreground/80">{centerTruncate(recipientAddress)}</span>
+                  {recipientEnsName && (
+                    <span className={classes?.summaryValue || "text-b3-react-foreground/80"}>@{recipientEnsName}</span>
+                  )}
+                  <span className={classes?.summaryValue || "text-b3-react-foreground/80"}>
+                    {centerTruncate(recipientAddress)}
+                  </span>
                 </div>
               </div>
             </motion.div>
           )}
-          <div className="border-b3-react-border border-t pt-3">
-            <div className="flex items-center justify-between">
-              <p className="text-b3-react-foreground font-semibold">Amount</p>
+          <div className={classes?.summaryDivider || "border-b3-react-border border-t pt-3"}>
+            <div className={classes?.amountRow || "flex items-center justify-between"}>
+              <p className={classes?.summaryLabel || "text-b3-react-foreground font-semibold"}>Amount</p>
               <div className="flex flex-col items-end gap-0.5">
                 <p
-                  className="text-b3-react-foreground hover:text-b3-react-foreground/80 cursor-pointer text-xl font-semibold transition-colors"
+                  className={
+                    classes?.amountValue ||
+                    "text-b3-react-foreground hover:text-b3-react-foreground/80 cursor-pointer text-xl font-semibold transition-colors"
+                  }
                   onClick={onBack}
                 >
                   ${parseFloat(srcAmountOnRamp).toFixed(2)}
@@ -221,19 +236,29 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
       </>
 
       {isCreatingOrder ? (
-        <div className="bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6">
-          <Loader2 className="h-4 w-4 animate-spin" />
-          <span className="text-as-primary/70">Creating onramp order...</span>
+        <div
+          className={
+            classes?.loadingContainer ||
+            "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6"
+          }
+        >
+          <Loader2 className={classes?.loadingSpinner || "h-4 w-4 animate-spin"} />
+          <span className={classes?.loadingText || "text-as-primary/70"}>Creating onramp order...</span>
         </div>
       ) : isLoading ? (
-        <div className="bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6">
-          <Loader2 className="h-4 w-4 animate-spin" />
-          <span className="text-as-primary/70">Loading payment options...</span>
+        <div
+          className={
+            classes?.loadingContainer ||
+            "bg-b3-react-background border-b3-react-border flex items-center justify-center gap-3 rounded-lg border p-6"
+          }
+        >
+          <Loader2 className={classes?.loadingSpinner || "h-4 w-4 animate-spin"} />
+          <span className={classes?.loadingText || "text-as-primary/70"}>Loading payment options...</span>
         </div>
       ) : (
         <>
           <div className="mb-3 flex items-center justify-between">
-            <h2 className="text-lg font-semibold">Payment method</h2>
+            <h2 className={classes?.paymentMethodTitle || "text-lg font-semibold"}>Payment method</h2>
             <div className="flex items-center gap-1">
               {coinbaseAvailablePaymentMethods.length > 0 &&
                 (() => {
@@ -290,26 +315,43 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
                   <button
                     onClick={() => handlePaymentMethodClick("coinbase", method.id)}
                     disabled={isCreatingOrder}
-                    className="bg-b3-react-background border-b3-react-border hover:border-as-brand disabled:hover:border-b3-react-border group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50"
+                    className={
+                      classes?.paymentOption ||
+                      "bg-b3-react-background border-b3-react-border hover:border-as-brand disabled:hover:border-b3-react-border group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50"
+                    }
                   >
-                    <div className="flex items-center gap-4">
-                      <div className="flex h-12 w-12 items-center justify-center rounded-full bg-blue-50">
+                    <div className={classes?.paymentOptionContent || "flex items-center gap-4"}>
+                      <div
+                        className={
+                          classes?.paymentOptionIcon ||
+                          "flex h-12 w-12 items-center justify-center rounded-full bg-blue-50"
+                        }
+                      >
                         <img src="https://cdn.b3.fun/coinbase-wordmark-blue.svg" alt="Coinbase" className="h-6" />
                       </div>
                       <div className="flex flex-col items-start text-left">
-                        <h4 className="text-b3-react-foreground text-lg font-semibold">Coinbase Pay</h4>
-                        <p className="text-b3-react-foreground/60 text-sm">
+                        <h4 className={classes?.paymentOptionTitle || "text-b3-react-foreground text-lg font-semibold"}>
+                          Coinbase Pay
+                        </h4>
+                        <p className={classes?.paymentOptionDescription || "text-b3-react-foreground/60 text-sm"}>
                           {method.id === "CARD" && "Debit card, bank account, or Coinbase Account"}
                           {method.id === "FIAT_WALLET" && "Pay with your Coinbase account balance"}
                           {method.id === "APPLE_PAY" && "Quick payment with Apple Pay"}
                           {method.id === "ACH_BANK_ACCOUNT" && "Direct bank account transfer"}
                         </p>
                         <div className="mt-1 flex items-center gap-1">
-                          <span className="text-xs font-medium text-green-600">Free</span>
+                          <span className={classes?.paymentOptionFee || "text-xs font-medium text-green-600"}>
+                            Free
+                          </span>
                         </div>
                       </div>
                     </div>
-                    <ChevronRight className="text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" />
+                    <ChevronRight
+                      className={
+                        classes?.paymentOptionChevron ||
+                        "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors"
+                      }
+                    />
                   </button>
                 );
               })()}
@@ -318,10 +360,18 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
             {stripeOnrampSupport && (
               <button
                 onClick={() => handlePaymentMethodClick("stripe")}
-                className="bg-b3-react-background border-b3-react-border hover:border-as-brand group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md"
+                className={
+                  classes?.paymentOption ||
+                  "bg-b3-react-background border-b3-react-border hover:border-as-brand group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md"
+                }
               >
-                <div className="flex items-center gap-4">
-                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-purple-50">
+                <div className={classes?.paymentOptionContent || "flex items-center gap-4"}>
+                  <div
+                    className={
+                      classes?.paymentOptionIcon ||
+                      "flex h-12 w-12 items-center justify-center rounded-full bg-purple-50"
+                    }
+                  >
                     <img
                       src="https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg"
                       alt="Stripe"
@@ -329,18 +379,27 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
                     />
                   </div>
                   <div className="flex flex-col items-start text-left">
-                    <h4 className="text-b3-react-foreground text-lg font-semibold">Credit/Debit Card</h4>
-                    <p className="text-b3-react-foreground/60 text-sm">Pay via Stripe checkout</p>
+                    <h4 className={classes?.paymentOptionTitle || "text-b3-react-foreground text-lg font-semibold"}>
+                      Credit/Debit Card
+                    </h4>
+                    <p className={classes?.paymentOptionDescription || "text-b3-react-foreground/60 text-sm"}>
+                      Pay via Stripe checkout
+                    </p>
                     {stripeWeb2Support?.isSupport && stripeWeb2Support.formattedFeeUsd && (
                       <div className="mt-1">
-                        <span className="text-xs text-gray-500">
+                        <span className={classes?.paymentOptionFee || "text-xs text-gray-500"}>
                           ${Number(stripeWeb2Support.formattedFeeUsd).toFixed(2)} fee
                         </span>
                       </div>
                     )}
                   </div>
                 </div>
-                <ChevronRight className="text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" />
+                <ChevronRight
+                  className={
+                    classes?.paymentOptionChevron ||
+                    "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors"
+                  }
+                />
               </button>
             )}
 
@@ -348,10 +407,18 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
             {stripeWeb2Support.isSupport && (
               <button
                 onClick={() => handlePaymentMethodClick("stripe-web2")}
-                className="bg-b3-react-background border-b3-react-border hover:border-as-brand group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md"
+                className={
+                  classes?.paymentOption ||
+                  "bg-b3-react-background border-b3-react-border hover:border-as-brand group flex w-full items-center justify-between gap-4 rounded-xl border p-5 transition-all duration-200 hover:shadow-md"
+                }
               >
-                <div className="flex items-center gap-4">
-                  <div className="flex h-12 w-12 items-center justify-center rounded-full bg-purple-50">
+                <div className={classes?.paymentOptionContent || "flex items-center gap-4"}>
+                  <div
+                    className={
+                      classes?.paymentOptionIcon ||
+                      "flex h-12 w-12 items-center justify-center rounded-full bg-purple-50"
+                    }
+                  >
                     <img
                       src="https://raw.githubusercontent.com/stripe/stripe.github.io/455f506a628dc3f6c505e3001db45a64e29e9fc3/images/stripe-logo.svg"
                       alt="Stripe"
@@ -359,25 +426,36 @@ function PanelOnrampPaymentInner(props: PanelOnrampPaymentProps) {
                     />
                   </div>
                   <div className="flex flex-col items-start text-left">
-                    <h4 className="text-b3-react-foreground text-lg font-semibold">Quick Pay</h4>
-                    <p className="text-b3-react-foreground/60 text-sm">Credit or debit card</p>
+                    <h4 className={classes?.paymentOptionTitle || "text-b3-react-foreground text-lg font-semibold"}>
+                      Quick Pay
+                    </h4>
+                    <p className={classes?.paymentOptionDescription || "text-b3-react-foreground/60 text-sm"}>
+                      Credit or debit card
+                    </p>
                     {stripeWeb2Support.formattedFeeUsd && (
                       <div className="mt-1">
-                        <span className="text-xs text-gray-500">
+                        <span className={classes?.paymentOptionFee || "text-xs text-gray-500"}>
                           ${Number(stripeWeb2Support.formattedFeeUsd).toFixed(2)} fee
                         </span>
                       </div>
                     )}
                   </div>
                 </div>
-                <ChevronRight className="text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors" />
+                <ChevronRight
+                  className={
+                    classes?.paymentOptionChevron ||
+                    "text-b3-react-foreground/40 group-hover:text-b3-react-foreground/60 h-5 w-5 transition-colors"
+                  }
+                />
               </button>
             )}
 
             <Button
               variant="link"
               onClick={onBack}
-              className="text-b3-react-foreground/70 hover:text-b3-react-foreground/90 mt-2 w-full"
+              className={
+                classes?.backButton || "text-b3-react-foreground/70 hover:text-b3-react-foreground/90 mt-2 w-full"
+              }
             >
               <ChevronLeft className="mr-2 h-4 w-4" />
               Back

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

@@ -1,38 +1,52 @@
 import { ShinyButton } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import Link from "next/link";
+import type { PointsDetailPanelClasses } from "../types/classes";
 
 interface PointsDetailPanelProps {
   pointsAmount?: number;
   onBack: () => void;
+  classes?: PointsDetailPanelClasses;
 }
 
-export function PointsDetailPanel({ pointsAmount = 0, onBack }: PointsDetailPanelProps) {
+export function PointsDetailPanel({ pointsAmount = 0, onBack, classes }: PointsDetailPanelProps) {
   return (
-    <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-4 px-5">
+    <div className={classes?.container || "mx-auto flex w-[460px] max-w-full flex-col items-center gap-4 px-5"}>
       <div className="flex flex-col items-center gap-4 text-center">
-        <h3 className="text-as-primary text-xl font-bold">Earn Points with Every Swap</h3>
-        <p className="text-as-primary/70 text-balance text-sm leading-relaxed">
-          You'll earn <span className="text-as-brand font-semibold">+{pointsAmount.toLocaleString()} points</span>{" "}
+        <h3 className={classes?.title || "text-as-primary text-xl font-bold"}>Earn Points with Every Swap</h3>
+        <p className={classes?.description || "text-as-primary/70 text-balance text-sm leading-relaxed"}>
+          You'll earn{" "}
+          <span className={classes?.highlightText || "text-as-brand font-semibold"}>
+            +{pointsAmount.toLocaleString()} points
+          </span>{" "}
           towards the{" "}
-          <Link href="https://anyspend.com/points" target="_blank" className="text-as-brand underline">
+          <Link
+            href="https://anyspend.com/points"
+            target="_blank"
+            className={classes?.link || "text-as-brand underline"}
+          >
             next AnySpend airdrop
           </Link>{" "}
           when you complete this transaction.
         </p>
-        <div className="bg-as-surface-primary border-as-border-secondary mt-2 w-full rounded-lg border p-4 text-left">
-          <h4 className="text-as-primary mb-2 font-semibold">How it works:</h4>
-          <ul className="text-as-primary/70 space-y-1 text-sm">
-            <li>• Points are earned based on transaction volume</li>
-            <li>• Higher volume = more points</li>
-            <li>• Points contribute to future airdrops</li>
-            <li>• Keep swapping to maximize your rewards</li>
+        <div
+          className={
+            classes?.infoCard ||
+            "bg-as-surface-primary border-as-border-secondary mt-2 w-full rounded-lg border p-4 text-left"
+          }
+        >
+          <h4 className={classes?.infoCardTitle || "text-as-primary mb-2 font-semibold"}>How it works:</h4>
+          <ul className={classes?.infoList || "text-as-primary/70 space-y-1 text-sm"}>
+            <li className={classes?.infoListItem}>• Points are earned based on transaction volume</li>
+            <li className={classes?.infoListItem}>• Higher volume = more points</li>
+            <li className={classes?.infoListItem}>• Points contribute to future airdrops</li>
+            <li className={classes?.infoListItem}>• Keep swapping to maximize your rewards</li>
           </ul>
         </div>
         <ShinyButton
           accentColor={"hsl(var(--as-brand))"}
           onClick={onBack}
-          className={cn("as-main-button !bg-as-brand relative w-full")}
+          className={classes?.backButton || cn("as-main-button !bg-as-brand relative w-full")}
           textClassName={cn("text-white")}
         >
           Back to Swap

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

@@ -2,6 +2,7 @@
 
 import { ChevronLeft } from "lucide-react";
 import { useEffect, useState } from "react";
+import type { RecipientSelectionClasses } from "../types/classes";
 
 export interface RecipientSelectionProps {
   /**
@@ -43,6 +44,10 @@ export interface RecipientSelectionProps {
    * @returns true if valid, false otherwise
    */
   validateAddress?: (address: string) => boolean;
+  /**
+   * Custom classes for styling
+   */
+  classes?: RecipientSelectionClasses;
 }
 
 export function RecipientSelection({
@@ -55,6 +60,7 @@ export function RecipientSelection({
   onConfirm,
   autoFocus = true,
   validateAddress,
+  classes,
 }: RecipientSelectionProps) {
   const [recipientAddress, setRecipientAddress] = useState<string>(initialValue);
 
@@ -88,13 +94,16 @@ export function RecipientSelection({
   const canConfirm = recipientAddress && isAddressValid;
 
   return (
-    <div className="recipient-selection mx-auto w-[460px] max-w-full p-5">
+    <div className={classes?.container || "recipient-selection mx-auto w-[460px] max-w-full p-5"}>
       <div className="flex flex-col gap-6">
         {/* Header */}
-        <div className="flex justify-around">
+        <div className={classes?.header || "flex justify-around"}>
           <button
             onClick={onBack}
-            className="text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors"
+            className={
+              classes?.backButton ||
+              "text-as-quaternary hover:text-as-primary flex h-8 w-8 items-center justify-center rounded-lg transition-colors"
+            }
           >
             <ChevronLeft className="h-6 w-6" />
           </button>
@@ -113,7 +122,10 @@ export function RecipientSelection({
               value={recipientAddress}
               onChange={e => setRecipientAddress(e.target.value)}
               onKeyDown={handleKeyDown}
-              className="text-as-primary placeholder:text-as-primary/50 flex-1 bg-transparent px-4 text-base focus:outline-none"
+              className={
+                classes?.searchInput ||
+                "text-as-primary placeholder:text-as-primary/50 flex-1 bg-transparent px-4 text-base focus:outline-none"
+              }
               autoFocus={autoFocus}
             />
             <div className="border-as-border-secondary border-l">
@@ -135,7 +147,10 @@ export function RecipientSelection({
           <button
             onClick={handleConfirm}
             disabled={!canConfirm}
-            className="bg-as-brand hover:bg-as-brand/90 disabled:bg-as-on-surface-2 disabled:text-as-secondary h-12 w-full rounded-xl font-medium text-white transition-colors disabled:cursor-not-allowed"
+            className={
+              classes?.confirmButton ||
+              "bg-as-brand hover:bg-as-brand/90 disabled:bg-as-on-surface-2 disabled:text-as-secondary h-12 w-full rounded-xl font-medium text-white transition-colors disabled:cursor-not-allowed"
+            }
           >
             {confirmText}
           </button>

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

@@ -1,12 +1,14 @@
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { FiatPaymentMethod } from "./FiatPaymentMethod";
+import type { TabSectionClasses } from "../types/classes";
 
 interface TabSectionProps {
   activeTab: "crypto" | "fiat";
   setActiveTab: (tab: "crypto" | "fiat") => void;
   setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
   setSelectedFiatPaymentMethod: (method: FiatPaymentMethod) => void;
+  classes?: TabSectionClasses;
 }
 
 export function TabSection({
@@ -14,40 +16,47 @@ export function TabSection({
   setActiveTab,
   setSelectedCryptoPaymentMethod,
   setSelectedFiatPaymentMethod,
+  classes,
 }: TabSectionProps) {
   return (
-    <div className="tab-section w-full">
-      <div className="bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl">
+    <div className={classes?.root || "tab-section w-full"}>
+      <div className={classes?.container || "bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl"}>
         <div
           className={cn(
-            "bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100",
-            "h-full w-1/2",
+            classes?.tabIndicator ||
+              "bg-as-brand absolute bottom-0 left-0 top-0 z-0 h-full w-1/2 rounded-xl transition-transform duration-100",
             activeTab === "fiat" ? "translate-x-full" : "translate-x-0",
           )}
           style={{ willChange: "transform" }}
         />
         <button
           className={cn(
-            "relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100",
-            activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent",
+            activeTab === "crypto"
+              ? classes?.tabButtonActive ||
+                  "relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium text-white transition-colors duration-100"
+              : classes?.tabButton ||
+                  "text-as-primary/70 hover:bg-as-on-surface-2 relative z-10 h-full w-full rounded-xl bg-transparent px-3 text-sm font-medium transition-colors duration-100",
           )}
           onClick={() => {
             setActiveTab("crypto");
-            setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when switching to crypto
-            setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE); // Reset fiat payment method when switching to crypto
+            setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE);
+            setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
           }}
         >
           Pay with crypto
         </button>
         <button
           className={cn(
-            "relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100",
-            activeTab === "fiat" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent",
+            activeTab === "fiat"
+              ? classes?.tabButtonActive ||
+                  "relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium text-white transition-colors duration-100"
+              : classes?.tabButton ||
+                  "text-as-primary/70 hover:bg-as-on-surface-2 relative z-10 h-full w-full rounded-xl bg-transparent px-3 text-sm font-medium transition-colors duration-100",
           )}
           onClick={() => {
             setActiveTab("fiat");
-            setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset crypto payment method when switching to fiat
-            setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE); // Reset fiat payment method when switching to fiat
+            setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE);
+            setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE);
           }}
         >
           Pay with Fiat