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

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

@@ -3,11 +3,13 @@ import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { ChevronDown } from "lucide-react";
 import { useState } from "react";
 import { components } from "../../../types/api";
+import type { FeeDetailPanelClasses } from "../types/classes";
 
 interface FeeDetailPanelProps {
   fee: components["schemas"]["Fee"];
   transactionAmountUsd?: number;
   onBack: () => void;
+  classes?: FeeDetailPanelClasses;
 }
 
 // Fee tier definitions
@@ -32,7 +34,7 @@ const WHALE_DISCOUNT_TIERS = [
   { minAny: 1000000, discountPercent: 100, label: "Tier 3: 1M+ $ANY" },
 ];
 
-export function FeeDetailPanel({ fee, transactionAmountUsd, onBack }: FeeDetailPanelProps) {
+export function FeeDetailPanel({ fee, transactionAmountUsd, onBack, classes }: FeeDetailPanelProps) {
   // Detect if this is a fiat onramp order (Stripe) vs regular crypto swap
   // stripeweb2_fee = Stripe/fiat onramp (uses FIAT_FEE_TIERS)
   // standard_fee = Regular crypto swap (uses CRYPTO_FEE_TIERS)
@@ -83,15 +85,17 @@ export function FeeDetailPanel({ fee, transactionAmountUsd, onBack }: FeeDetailP
   const [showAllDiscountTiers, setShowAllDiscountTiers] = useState(false);
 
   return (
-    <div className="mx-auto flex w-[460px] max-w-full flex-col items-center gap-3 px-5">
+    <div className={classes?.container || "mx-auto flex w-[460px] max-w-full flex-col items-center gap-3 px-5"}>
       <div className="flex w-full flex-col gap-3">
         <div className="text-center">
-          <h3 className="text-as-primary text-lg font-bold">Fee Breakdown</h3>
+          <h3 className={classes?.title || "text-as-primary text-lg font-bold"}>Fee Breakdown</h3>
         </div>
 
         {/* Base Fee Schedule Section */}
-        <div className="bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4">
-          <h4 className="text-as-primary mb-3 text-sm font-semibold">
+        <div
+          className={classes?.tierCard || "bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4"}
+        >
+          <h4 className={classes?.tierCardTitle || "text-as-primary mb-3 text-sm font-semibold"}>
             {isStripeFee ? "Fiat Fee Schedule" : "Base Fee Schedule"}
           </h4>
           <div className="space-y-1.5">
@@ -109,12 +113,15 @@ export function FeeDetailPanel({ fee, transactionAmountUsd, onBack }: FeeDetailP
                     <div
                       key={idx}
                       className={cn(
-                        "flex items-center justify-between rounded-lg px-3 py-2.5 text-sm transition-colors",
-                        isCurrentTier ? "bg-as-brand/10 text-as-brand font-semibold" : "text-as-primary/60",
+                        isCurrentTier
+                          ? classes?.tierRowActive ||
+                              "bg-as-brand/10 text-as-brand flex items-center justify-between rounded-lg px-3 py-2.5 text-sm font-semibold transition-colors"
+                          : classes?.tierRow ||
+                              "text-as-primary/60 flex items-center justify-between rounded-lg px-3 py-2.5 text-sm transition-colors",
                       )}
                     >
-                      <span>{tier.label}</span>
-                      <span>Credit Card Fee + {tier.fee}</span>
+                      <span className={classes?.tierLabel}>{tier.label}</span>
+                      <span className={classes?.tierValue}>Credit Card Fee + {tier.fee}</span>
                     </div>
                   );
                 })
@@ -131,12 +138,15 @@ export function FeeDetailPanel({ fee, transactionAmountUsd, onBack }: FeeDetailP
                     <div
                       key={idx}
                       className={cn(
-                        "flex items-center justify-between rounded-lg px-3 py-2.5 text-sm transition-colors",
-                        isCurrentTier ? "bg-as-brand/10 text-as-brand font-semibold" : "text-as-primary/60",
+                        isCurrentTier
+                          ? classes?.tierRowActive ||
+                              "bg-as-brand/10 text-as-brand flex items-center justify-between rounded-lg px-3 py-2.5 text-sm font-semibold transition-colors"
+                          : classes?.tierRow ||
+                              "text-as-primary/60 flex items-center justify-between rounded-lg px-3 py-2.5 text-sm transition-colors",
                       )}
                     >
-                      <span>{tier.label}</span>
-                      <span>{bpsToPercent(tier.bps)}%</span>
+                      <span className={classes?.tierLabel}>{tier.label}</span>
+                      <span className={classes?.tierValue}>{bpsToPercent(tier.bps)}%</span>
                     </div>
                   );
                 })}
@@ -154,7 +164,10 @@ export function FeeDetailPanel({ fee, transactionAmountUsd, onBack }: FeeDetailP
               return (
                 <button
                   onClick={() => setShowAllFeeTiers(!showAllFeeTiers)}
-                  className="text-as-primary/60 hover:text-as-primary mt-2 flex w-full items-center justify-center gap-1 text-xs transition-colors"
+                  className={
+                    classes?.expandButton ||
+                    "text-as-primary/60 hover:text-as-primary mt-2 flex w-full items-center justify-center gap-1 text-xs transition-colors"
+                  }
                 >
                   <span>{showAllFeeTiers ? "Show less" : "Show higher tiers"}</span>
                   <ChevronDown className={cn("h-3.5 w-3.5 transition-transform", showAllFeeTiers && "rotate-180")} />
@@ -237,11 +250,17 @@ export function FeeDetailPanel({ fee, transactionAmountUsd, onBack }: FeeDetailP
 
         {/* Transaction Summary */}
         {transactionAmountUsd && (
-          <div className="bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4">
+          <div
+            className={
+              classes?.summaryCard || "bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-4"
+            }
+          >
             <div className="space-y-2 text-sm">
-              <div className="flex items-center justify-between">
-                <span className="text-as-secondary">Transaction</span>
-                <span className="text-as-primary font-semibold">${transactionAmountUsd.toFixed(2)}</span>
+              <div className={classes?.summaryRow || "flex items-center justify-between"}>
+                <span className={classes?.summaryLabel || "text-as-secondary"}>Transaction</span>
+                <span className={classes?.summaryValue || "text-as-primary font-semibold"}>
+                  ${transactionAmountUsd.toFixed(2)}
+                </span>
               </div>
 
               {isStripeFee && (
@@ -267,10 +286,10 @@ export function FeeDetailPanel({ fee, transactionAmountUsd, onBack }: FeeDetailP
                       )}
                     </span>
                   </div>
-                  <div className="border-as-border-secondary border-t pt-2">
-                    <div className="flex items-center justify-between">
-                      <span className="text-as-primary font-semibold">Total Fee</span>
-                      <span className="text-as-brand font-semibold">
+                  <div className={classes?.summaryDivider || "border-as-border-secondary border-t pt-2"}>
+                    <div className={classes?.totalRow || "flex items-center justify-between"}>
+                      <span className={classes?.totalLabel || "text-as-primary font-semibold"}>Total Fee</span>
+                      <span className={classes?.totalValue || "text-as-brand font-semibold"}>
                         ${((transactionAmountUsd * (fee.finalFeeBps || 0)) / 10000 + (fee.finalFeeUsd || 0)).toFixed(2)}
                       </span>
                     </div>
@@ -280,15 +299,17 @@ export function FeeDetailPanel({ fee, transactionAmountUsd, onBack }: FeeDetailP
 
               {!isStripeFee && currentCryptoTier && (
                 <>
-                  <div className="flex items-center justify-between">
-                    <span className="text-as-secondary">Base Fee ({bpsToPercent(currentCryptoTier.bps)}%)</span>
-                    <span className="text-as-primary font-medium">
+                  <div className={classes?.summaryRow || "flex items-center justify-between"}>
+                    <span className={classes?.summaryLabel || "text-as-secondary"}>
+                      Base Fee ({bpsToPercent(currentCryptoTier.bps)}%)
+                    </span>
+                    <span className={classes?.summaryValue || "text-as-primary font-medium"}>
                       ${((transactionAmountUsd * currentCryptoTier.bps) / 10000).toFixed(2)}
                     </span>
                   </div>
 
                   {hasWhaleDiscount && currentWhaleTier && (
-                    <div className="flex items-center justify-between">
+                    <div className={classes?.summaryRow || "flex items-center justify-between"}>
                       <span className="text-green-600">Discount ({currentWhaleTier.discountPercent}% off)</span>
                       <span className="font-medium text-green-600">
                         -$
@@ -298,7 +319,7 @@ export function FeeDetailPanel({ fee, transactionAmountUsd, onBack }: FeeDetailP
                   )}
 
                   {hasPartnerDiscount && (
-                    <div className="flex items-center justify-between">
+                    <div className={classes?.summaryRow || "flex items-center justify-between"}>
                       <span className="text-green-600">Partner Discount ({partnerDiscountPercent}% off)</span>
                       <span className="font-medium text-green-600">
                         -${((transactionAmountUsd * baseFee * partnerDiscountPercent) / 100 / 10000).toFixed(2)}
@@ -306,10 +327,10 @@ export function FeeDetailPanel({ fee, transactionAmountUsd, onBack }: FeeDetailP
                     </div>
                   )}
 
-                  <div className="border-as-border-secondary border-t pt-2">
-                    <div className="flex items-center justify-between">
-                      <span className="text-as-primary font-semibold">Total Fee</span>
-                      <span className="text-as-brand font-semibold">
+                  <div className={classes?.summaryDivider || "border-as-border-secondary border-t pt-2"}>
+                    <div className={classes?.totalRow || "flex items-center justify-between"}>
+                      <span className={classes?.totalLabel || "text-as-primary font-semibold"}>Total Fee</span>
+                      <span className={classes?.totalValue || "text-as-brand font-semibold"}>
                         ${((transactionAmountUsd * fee.finalFeeBps) / 10000).toFixed(2)}
                       </span>
                     </div>
@@ -323,7 +344,7 @@ export function FeeDetailPanel({ fee, transactionAmountUsd, onBack }: FeeDetailP
         <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 {isStripeFee ? "Payment" : "Swap"}

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

@@ -3,6 +3,7 @@
 import { useGeoOnrampOptions } from "@b3dotfun/sdk/anyspend/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { ChevronLeft, ChevronRight, Loader2 } from "lucide-react";
+import type { FiatPaymentMethodClasses } from "../types/classes";
 
 export enum FiatPaymentMethod {
   NONE = "none",
@@ -25,6 +26,7 @@ interface FiatPaymentMethodProps {
   onBack: () => void;
   onSelectPaymentMethod: (method: FiatPaymentMethod) => void;
   srcAmountOnRamp: string;
+  classes?: FiatPaymentMethodClasses;
 }
 
 export function FiatPaymentMethodComponent({
@@ -33,6 +35,7 @@ export function FiatPaymentMethodComponent({
   onBack,
   onSelectPaymentMethod,
   srcAmountOnRamp,
+  classes,
 }: FiatPaymentMethodProps) {
   // Load geo-based onramp options like in PanelOnramp
   const {
@@ -107,12 +110,15 @@ export function FiatPaymentMethodComponent({
   // Show loading state while checking geo availability
   if (isLoadingGeoOnramp) {
     return (
-      <div className="fiat-payment-method mx-auto w-[460px] max-w-full p-5">
+      <div className={classes?.container || "fiat-payment-method mx-auto w-[460px] max-w-full p-5"}>
         <div className="flex flex-col gap-6">
-          <div className="flex items-center gap-4">
+          <div className={classes?.header || "flex items-center gap-4"}>
             <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>
@@ -130,13 +136,16 @@ export function FiatPaymentMethodComponent({
   }
 
   return (
-    <div className="fiat-payment-method mx-auto w-[460px] max-w-full p-5">
+    <div className={classes?.container || "fiat-payment-method mx-auto w-[460px] max-w-full p-5"}>
       <div className="flex flex-col gap-6">
         {/* Header */}
-        <div className="flex items-center gap-4">
+        <div className={classes?.header || "flex items-center gap-4"}>
           <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>
@@ -146,7 +155,7 @@ export function FiatPaymentMethodComponent({
         </div>
 
         {/* Payment Methods */}
-        <div className="flex flex-col gap-3">
+        <div className={classes?.optionsList || "flex flex-col gap-3"}>
           {availablePaymentMethods.length === 0 ? (
             <div className="fiat-payment-method-no-methods bg-as-surface-secondary border-as-border-secondary rounded-2xl border p-6 text-center">
               <p className="text-as-secondary text-sm">
@@ -161,12 +170,16 @@ export function FiatPaymentMethodComponent({
                   setSelectedPaymentMethod(method.id);
                   onSelectPaymentMethod(method.id);
                 }}
-                className={cn(
-                  "fiat-payment-method-item bg-as-surface-secondary border-as-border-secondary flex w-full items-center gap-4 rounded-2xl border p-4 transition-all duration-200",
-                  selectedPaymentMethod === method.id
-                    ? "border-as-brand bg-as-brand/10"
-                    : "hover:border-as-brand/50 hover:bg-as-brand/5",
-                )}
+                className={
+                  (selectedPaymentMethod === method.id && classes?.optionItemActive) ||
+                  classes?.optionItem ||
+                  cn(
+                    "fiat-payment-method-item bg-as-surface-secondary border-as-border-secondary flex w-full items-center gap-4 rounded-2xl border p-4 transition-all duration-200",
+                    selectedPaymentMethod === method.id
+                      ? "border-as-brand bg-as-brand/10"
+                      : "hover:border-as-brand/50 hover:bg-as-brand/5",
+                  )
+                }
               >
                 {/* Icon - matching PanelOnramp style */}
                 <div className="flex h-12 w-12 items-center justify-center rounded-full bg-blue-600 text-2xl text-white">

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

@@ -43,6 +43,7 @@ import { encodeFunctionData, erc20Abi } from "viem";
 import { b3 } from "viem/chains";
 import { useWaitForTransactionReceipt, useWalletClient } from "wagmi";
 import { usePhantomTransfer } from "../../hooks/usePhantomTransfer";
+import type { OrderDetailsClasses } from "../types/classes";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./Accordion";
 import ConnectWalletPayment from "./ConnectWalletPayment";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
@@ -69,6 +70,8 @@ interface OrderDetailsProps {
   returnToHomeUrl?: string;
   /** Custom label for the return home button (overrides "Return to Home" / "Close") */
   returnHomeLabel?: string;
+  /** Custom class names for styling specific elements */
+  classes?: OrderDetailsClasses;
 }
 
 // Add this helper function near the top or just above the component
@@ -223,6 +226,7 @@ export const OrderDetails = memo(function OrderDetails({
   points,
   returnToHomeUrl,
   returnHomeLabel,
+  classes,
 }: OrderDetailsProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -411,7 +415,10 @@ export const OrderDetails = memo(function OrderDetails({
   // Reusable "Return to Home" / "Close" button
   const returnHomeOrCloseButton = (
     <button
-      className="order-close-button order-details-close-btn bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white"
+      className={
+        classes?.returnButton ||
+        "order-close-button order-details-close-btn bg-as-brand flex w-full items-center justify-center gap-2 rounded-lg p-2 font-semibold text-white"
+      }
       onClick={returnToHomeUrl ? handleReturnToHome : mode === "page" ? handleBack : handleCloseModal}
     >
       {returnHomeLabel ? (
@@ -918,7 +925,10 @@ export const OrderDetails = memo(function OrderDetails({
 
         {/* <DelayedSupportMessage /> */}
         <button
-          className="text-b3-primary-blue hover:text-b3-primary-blue/50 order-details-cancel-btn flex w-full items-center justify-center gap-2 underline"
+          className={
+            classes?.backButton ||
+            "text-b3-primary-blue hover:text-b3-primary-blue/50 order-details-cancel-btn flex w-full items-center justify-center gap-2 underline"
+          }
           onClick={handleBack}
         >
           <RefreshCcw className="ml-2 h-4 w-4" /> Cancel and start over
@@ -1125,7 +1135,10 @@ export const OrderDetails = memo(function OrderDetails({
       )}
 
       <button
-        className="text-b3-primary-blue hover:text-b3-primary-blue/50 order-details-cancel-btn flex w-full items-center justify-center gap-2 underline"
+        className={
+          classes?.backButton ||
+          "text-b3-primary-blue hover:text-b3-primary-blue/50 order-details-cancel-btn flex w-full items-center justify-center gap-2 underline"
+        }
         onClick={handleBack}
       >
         <RefreshCcw className="ml-2 h-4 w-4" /> Cancel and start over

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);
 
@@ -69,7 +72,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,
       )}
     >

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">