@b3dotfun/sdk 0.1.2 → 0.1.5

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

@@ -5,6 +5,7 @@ import { motion } from "motion/react";
 import { useEffect, useRef } from "react";
 import { components } from "../../../types/api";
 import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay";
+import type { CryptoPaySectionClasses } from "../types/classes";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { CryptoPaymentMethodDisplay } from "./CryptoPaymentMethodDisplay";
 import { OrderTokenAmount } from "./OrderTokenAmount";
@@ -29,6 +30,8 @@ interface CryptoPaySectionProps {
   onTokenSelect?: (token: components["schemas"]["Token"], event: { preventDefault: () => void }) => void;
   // Fee detail callback
   onShowFeeDetail?: () => void;
+  // Custom classes for styling
+  classes?: CryptoPaySectionClasses;
 }
 
 export function CryptoPaySection({
@@ -45,6 +48,7 @@ export function CryptoPaySection({
   anyspendQuote,
   onTokenSelect,
   onShowFeeDetail,
+  classes,
 }: CryptoPaySectionProps) {
   const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
 
@@ -87,10 +91,13 @@ export function CryptoPaySection({
       initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
       animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
       transition={{ duration: 0.3, delay: 0, ease: "easeInOut" }}
-      className="pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6"
+      className={
+        classes?.container ||
+        "pay-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6"
+      }
     >
       <div className="flex items-center justify-between">
-        <div className="text-as-primary/50 flex h-7 items-center gap-1.5 text-sm">
+        <div className={classes?.label || "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm"}>
           Pay
           {!isSrcInputDirty && anyspendQuote?.data?.fee && onShowFeeDetail && (
             <button onClick={onShowFeeDetail} className="text-as-primary/40 hover:text-as-primary/60 transition-colors">
@@ -99,7 +106,10 @@ export function CryptoPaySection({
           )}
         </div>
         <button
-          className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none"
+          className={
+            classes?.paymentMethodButton ||
+            "text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors focus:!outline-none"
+          }
           onClick={onSelectCryptoPaymentMethod}
         >
           <CryptoPaymentMethodDisplay
@@ -109,22 +119,24 @@ export function CryptoPaySection({
           />
         </button>
       </div>
-      <OrderTokenAmount
-        address={walletAddress}
-        walletAddress={walletAddress}
-        context="from"
-        inputValue={srcAmount}
-        onChangeInput={value => {
-          setIsSrcInputDirty(true);
-          setSrcAmount(value);
-        }}
-        chainId={selectedSrcChainId}
-        setChainId={setSelectedSrcChainId}
-        token={selectedSrcToken}
-        setToken={setSelectedSrcToken}
-        onTokenSelect={onTokenSelect}
-      />
-      <div className="flex items-center justify-between">
+      <div className={classes?.inputContainer}>
+        <OrderTokenAmount
+          address={walletAddress}
+          walletAddress={walletAddress}
+          context="from"
+          inputValue={srcAmount}
+          onChangeInput={value => {
+            setIsSrcInputDirty(true);
+            setSrcAmount(value);
+          }}
+          chainId={selectedSrcChainId}
+          setChainId={setSelectedSrcChainId}
+          token={selectedSrcToken}
+          setToken={setSelectedSrcToken}
+          onTokenSelect={onTokenSelect}
+        />
+      </div>
+      <div className={classes?.balanceRow || "flex items-center justify-between"}>
         <div className="text-as-primary/50 flex h-5 items-center text-sm">
           {formatDisplayNumber(anyspendQuote?.data?.currencyIn?.amountUsd, {
             style: "currency",

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

@@ -8,6 +8,7 @@ import { ChevronLeft, ChevronRightCircle, Wallet, X, ZapIcon } from "lucide-reac
 import { useConnectModal, useDisconnect, useWalletInfo } from "thirdweb/react";
 import { createWallet } from "thirdweb/wallets";
 import { useConnectedWalletDisplay } from "../../hooks/useConnectedWalletDisplay";
+import type { CryptoPaymentMethodClasses } from "../types/classes";
 
 export enum CryptoPaymentMethodType {
   NONE = "none",
@@ -29,6 +30,7 @@ interface CryptoPaymentMethodProps {
   isCreatingOrder: boolean;
   onBack: () => void;
   onSelectPaymentMethod: (method: CryptoPaymentMethodType) => void;
+  classes?: CryptoPaymentMethodClasses;
 }
 
 export function CryptoPaymentMethod({
@@ -37,6 +39,7 @@ export function CryptoPaymentMethod({
   isCreatingOrder,
   onBack,
   onSelectPaymentMethod,
+  classes,
 }: CryptoPaymentMethodProps) {
   const { connectedEOAWallet, connectedSmartWallet } = useAccountWallet();
   const { disconnect } = useDisconnect();
@@ -96,16 +99,23 @@ export function CryptoPaymentMethod({
   };
 
   return (
-    <div className="crypto-payment-method mx-auto h-fit w-[460px] max-w-full px-5 pb-5 pt-5 sm:px-0 sm:pt-5">
+    <div
+      className={
+        classes?.container || "crypto-payment-method mx-auto h-fit w-[460px] max-w-full px-5 pb-5 pt-5 sm:px-0 sm:pt-5"
+      }
+    >
       <div className={cn("relative flex flex-col gap-10")}>
         {/* Header */}
         <button
           onClick={onBack}
-          className="text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors"
+          className={
+            classes?.backButton ||
+            "text-as-quaternary hover:text-as-primary absolute flex h-8 w-8 items-center justify-center rounded-lg transition-colors"
+          }
         >
           <ChevronLeft className="h-6 w-6" />
         </button>
-        <div className="flex items-center justify-around gap-4">
+        <div className={classes?.header || "flex items-center justify-around gap-4"}>
           <div className="flex-1 text-center">
             <h2 className="text-as-primary text-lg font-semibold">Select a payment method</h2>
           </div>
@@ -155,7 +165,7 @@ export function CryptoPaymentMethod({
         )}
 
         {/* Payment Methods */}
-        <div className="crypto-payment-methods flex flex-col gap-4">
+        <div className={classes?.optionsList || "crypto-payment-methods flex flex-col gap-4"}>
           {/* Installed Wallets Section */}
           {(shouldShowConnectedEOA || globalAddress) && (
             <div className="installed-wallets">

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

@@ -1,11 +1,11 @@
 import { ALL_CHAINS } from "@b3dotfun/sdk/anyspend";
 import { formatUsername } from "@b3dotfun/sdk/shared/utils";
-import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
 import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
 import { ChevronRight, Info } from "lucide-react";
 import { motion } from "motion/react";
 import { components } from "../../../types/api";
+import type { CryptoReceiveSectionClasses } from "../types/classes";
 import { OrderTokenAmount } from "./OrderTokenAmount";
 import { PointsBadge } from "./PointsBadge";
 
@@ -36,6 +36,8 @@ interface CryptoReceiveSectionProps {
   onShowPointsDetail?: () => void;
   // Fee detail navigation
   onShowFeeDetail?: () => void;
+  // Custom classes for styling
+  classes?: CryptoReceiveSectionClasses;
 }
 
 export function CryptoReceiveSection({
@@ -57,16 +59,20 @@ export function CryptoReceiveSection({
   dstTokenLogoURI,
   onShowPointsDetail,
   onShowFeeDetail,
+  classes,
 }: CryptoReceiveSectionProps) {
   return (
     <motion.div
       initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
       animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
       transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
-      className="receive-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6"
+      className={
+        classes?.container ||
+        "receive-section bg-as-surface-secondary border-as-border-secondary relative flex w-full flex-col gap-2 rounded-2xl border p-4 sm:p-6"
+      }
     >
       <div className="flex w-full items-center justify-between">
-        <div className="text-as-primary/50 flex h-7 items-center gap-1.5 text-sm">
+        <div className={classes?.label || "text-as-primary/50 flex h-7 items-center gap-1.5 text-sm"}>
           {isDepositMode ? "Deposit" : "Receive"}
           {isSrcInputDirty && anyspendQuote?.data?.fee && onShowFeeDetail && (
             <button onClick={onShowFeeDetail} className="text-as-primary/40 hover:text-as-primary/60 transition-colors">
@@ -76,11 +82,11 @@ export function CryptoReceiveSection({
         </div>
         {effectiveRecipientAddress ? (
           <button
-            className={cn("text-as-tertiarry flex h-7 items-center gap-2 rounded-lg")}
+            className={classes?.recipientButton || "text-as-tertiarry flex h-7 items-center gap-2 rounded-lg"}
             onClick={onSelectRecipient}
           >
             <>
-              <span className="text-as-tertiarry flex items-center gap-1 text-sm">
+              <span className={classes?.recipientValue || "text-as-tertiarry flex items-center gap-1 text-sm"}>
                 {customRecipientLabel ||
                   (recipientName ? formatUsername(recipientName) : shortenAddress(effectiveRecipientAddress || ""))}
               </span>
@@ -88,50 +94,64 @@ export function CryptoReceiveSection({
             </>
           </button>
         ) : (
-          <button className="text-as-primary/70 flex items-center gap-1 rounded-lg" onClick={onSelectRecipient}>
+          <button
+            className={classes?.recipientButton || "text-as-primary/70 flex items-center gap-1 rounded-lg"}
+            onClick={onSelectRecipient}
+          >
             <div className="text-sm font-medium">Select recipient</div>
           </button>
         )}
       </div>
       {isBuyMode || isDepositMode ? (
         // Fixed destination token display for buy mode and deposit mode
-        <div className="flex items-center justify-between">
-          <div className="text-as-primary text-2xl font-bold">{dstAmount || "0"}</div>
-          <div className="bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3">
+        <div className={classes?.inputContainer || "flex items-center justify-between"}>
+          <div className={classes?.input || "text-as-primary text-2xl font-bold"}>{dstAmount || "0"}</div>
+          <div
+            className={
+              classes?.tokenSelector ||
+              "bg-as-brand/10 border-as-brand/30 flex items-center gap-3 rounded-xl border px-4 py-3"
+            }
+          >
             {(dstTokenLogoURI || dstToken.metadata?.logoURI) && (
               <div className="relative">
                 <img
                   src={dstTokenLogoURI || dstToken.metadata?.logoURI}
                   alt={dstTokenSymbol || dstToken.symbol}
-                  className="h-8 w-8 rounded-full"
+                  className={classes?.tokenIcon || "h-8 w-8 rounded-full"}
                 />
                 {/* Chain logo overlay */}
                 {ALL_CHAINS[dstToken.chainId]?.logoUrl && (
                   <img
                     src={ALL_CHAINS[dstToken.chainId].logoUrl}
                     alt="Chain"
-                    className="absolute -bottom-1 -right-1 h-4 w-4 rounded-full border border-white"
+                    className={
+                      classes?.chainBadge || "absolute -bottom-1 -right-1 h-4 w-4 rounded-full border border-white"
+                    }
                   />
                 )}
               </div>
             )}
-            <span className="text-as-brand text-lg font-bold">{dstTokenSymbol || dstToken.symbol}</span>
+            <span className={classes?.tokenSymbol || "text-as-brand text-lg font-bold"}>
+              {dstTokenSymbol || dstToken.symbol}
+            </span>
           </div>
         </div>
       ) : (
         // Token selection for regular swap mode
-        <OrderTokenAmount
-          address={effectiveRecipientAddress}
-          context="to"
-          inputValue={dstAmount}
-          onChangeInput={onChangeDstAmount || (() => {})}
-          chainId={selectedDstChainId || dstToken.chainId}
-          setChainId={setSelectedDstChainId || (() => {})}
-          token={dstToken}
-          setToken={setSelectedDstToken || (() => {})}
-        />
+        <div className={classes?.inputContainer}>
+          <OrderTokenAmount
+            address={effectiveRecipientAddress}
+            context="to"
+            inputValue={dstAmount}
+            onChangeInput={onChangeDstAmount || (() => {})}
+            chainId={selectedDstChainId || dstToken.chainId}
+            setChainId={setSelectedDstChainId || (() => {})}
+            token={dstToken}
+            setToken={setSelectedDstToken || (() => {})}
+          />
+        </div>
       )}
-      <div className="text-as-primary/50 flex h-5 items-center justify-start gap-2 text-sm">
+      <div className={classes?.feeRow || "text-as-primary/50 flex h-5 items-center justify-start gap-2 text-sm"}>
         <div className="flex items-center gap-2">
           {formatDisplayNumber(anyspendQuote?.data?.currencyOut?.amountUsd, {
             style: "currency",

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 ? (
@@ -491,13 +498,11 @@ export const OrderDetails = memo(function OrderDetails({
   }
 
   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 formattedExpectedDstAmount = formatTokenAmount(BigInt(expectedDstAmount), dstToken.decimals);
 
   const actualDstAmount = order.settlement?.actualDstAmount;
@@ -918,7 +923,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 +1133,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