@b3dotfun/sdk 0.1.2 → 0.1.5

package/src/anyspend/react/components/AnySpendDeposit.tsx

@@ -18,6 +18,7 @@ import { ChainWarningText } from "./common/WarningText";
 import { CreditCardIcon } from "./icons/CreditCardIcon";
 import { QrCodeIcon } from "./icons/QrCodeIcon";
 import { QRDeposit } from "./QRDeposit";
+import type { AnySpendAllClasses } from "./types/classes";
 
 export interface DepositContractConfig {
   /** Custom function ABI JSON string */
@@ -116,6 +117,10 @@ export interface AnySpendDepositProps {
    * Defaults to false.
    */
   isCustomDeposit?: boolean;
+  /** Custom class names for styling specific elements */
+  classes?: AnySpendAllClasses;
+  /** When true, allows direct transfer without swap if source and destination token/chain are the same */
+  allowDirectTransfer?: boolean;
 }
 
 // Default supported chains
@@ -238,7 +243,11 @@ export function AnySpendDeposit({
   customRecipientLabel,
   returnHomeLabel,
   isCustomDeposit = false,
+  classes,
+  allowDirectTransfer = false,
 }: AnySpendDepositProps) {
+  // Extract deposit-specific classes for convenience
+  const depositClasses = classes?.deposit;
   const { connectedEOAWallet } = useAccountWallet();
   const eoaAddress = connectedEOAWallet?.getAccount()?.address;
 
@@ -368,16 +377,22 @@ export function AnySpendDeposit({
   if (step === "select-chain") {
     return (
       <div
-        className={cn(
-          "anyspend-deposit anyspend-deposit-chain-selection font-inter bg-as-surface-primary relative mx-auto w-full max-w-[460px]",
-          mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl",
-        )}
+        className={
+          depositClasses?.chainSelection ||
+          cn(
+            "anyspend-deposit anyspend-deposit-chain-selection font-inter bg-as-surface-primary relative mx-auto w-full max-w-[460px]",
+            mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl",
+          )
+        }
       >
         {/* Close button */}
         {onClose && (
           <button
             onClick={onClose}
-            className="anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10"
+            className={
+              depositClasses?.closeButton ||
+              "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10"
+            }
           >
             <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -386,19 +401,35 @@ export function AnySpendDeposit({
         )}
         {/* Balance header */}
         {!isBalanceLoading && totalBalance > 0 && (
-          <div className="anyspend-deposit-balance border-theme-border-secondary border-b p-5">
-            <p className="anyspend-deposit-balance-label text-as-secondary text-sm">Your Balance</p>
-            <p className="anyspend-deposit-balance-value text-as-primary text-3xl font-semibold">
+          <div
+            className={
+              depositClasses?.balanceContainer || "anyspend-deposit-balance border-theme-border-secondary border-b p-5"
+            }
+          >
+            <p className={depositClasses?.balanceLabel || "anyspend-deposit-balance-label text-as-secondary text-sm"}>
+              Your Balance
+            </p>
+            <p
+              className={
+                depositClasses?.balanceValue || "anyspend-deposit-balance-value text-as-primary text-3xl font-semibold"
+              }
+            >
               {formatDecimal(totalBalance)} <span className="text-sm">USD</span>
             </p>
           </div>
         )}
-        <div className="anyspend-deposit-options flex flex-col gap-2 p-6">
+        <div className={depositClasses?.optionsContainer || "anyspend-deposit-options flex flex-col gap-2 p-6"}>
           {/* Loading state */}
           {isBalanceLoading && (
-            <div className="anyspend-deposit-chains-skeleton flex flex-col gap-2">
+            <div className={depositClasses?.chainsSkeleton || "anyspend-deposit-chains-skeleton flex flex-col gap-2"}>
               {[1, 2].map((_, i) => (
-                <div key={i} className="border-border-primary flex items-center justify-between rounded-xl border p-4">
+                <div
+                  key={i}
+                  className={
+                    depositClasses?.skeletonItem ||
+                    "border-border-primary flex items-center justify-between rounded-xl border p-4"
+                  }
+                >
                   <div className="flex items-center gap-3">
                     <Skeleton className="h-6 w-6 rounded-full" />
                     <div className="flex flex-col gap-1">
@@ -414,93 +445,163 @@ export function AnySpendDeposit({
 
           {/* Top chains with balance */}
           {topChainsWithBalance.length > 0 && (
-            <div className="anyspend-deposit-chains flex flex-col gap-2">
+            <div className={depositClasses?.chainsContainer || "anyspend-deposit-chains flex flex-col gap-2"}>
               {topChainsWithBalance.map(chain => (
                 <button
                   key={chain.id}
                   onClick={() => handleSelectChain(chain.id)}
-                  className="anyspend-deposit-chain-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all"
+                  className={
+                    depositClasses?.chainButton ||
+                    "anyspend-deposit-chain-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all"
+                  }
                 >
-                  <div className="anyspend-deposit-chain-content">
-                    <div className="anyspend-deposit-chain-info">
-                      <span className="anyspend-deposit-chain-name text-as-primary flex items-center gap-1.5 font-medium">
+                  <div className={depositClasses?.chainContent || "anyspend-deposit-chain-content"}>
+                    <div className={depositClasses?.chainInfo || "anyspend-deposit-chain-info"}>
+                      <span
+                        className={
+                          depositClasses?.chainName ||
+                          "anyspend-deposit-chain-name text-as-primary flex items-center gap-1.5 font-medium"
+                        }
+                      >
                         Deposit from {chain.name}
-                        <ChainIcon chainId={chain.id} className="h-5 w-5" />
+                        <ChainIcon chainId={chain.id} className={depositClasses?.chainIcon || "h-5 w-5"} />
                       </span>
-                      <p className="anyspend-deposit-chain-balance text-as-secondary text-xs">
+                      <p
+                        className={
+                          depositClasses?.chainBalance || "anyspend-deposit-chain-balance text-as-secondary text-xs"
+                        }
+                      >
                         {formatUsd(chain.balance)} available
                       </p>
                     </div>
                   </div>
-                  <ChevronRight className="anyspend-deposit-chain-chevron text-as-secondary h-5 w-5" />
+                  <ChevronRight
+                    className={
+                      depositClasses?.chainChevron || "anyspend-deposit-chain-chevron text-as-secondary h-5 w-5"
+                    }
+                  />
                 </button>
               ))}
             </div>
           )}
 
           {/* General deposit options */}
-          <div className="anyspend-deposit-general-options flex flex-col gap-2">
+          <div className={depositClasses?.generalOptions || "anyspend-deposit-general-options flex flex-col gap-2"}>
             {/* Deposit Crypto - any chain */}
             <button
               onClick={handleSelectCrypto}
-              className="anyspend-deposit-option-button anyspend-deposit-crypto-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all"
+              className={
+                depositClasses?.cryptoButton ||
+                "anyspend-deposit-option-button anyspend-deposit-crypto-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all"
+              }
             >
-              <div className="anyspend-deposit-option-content">
-                <div className="anyspend-deposit-option-info">
-                  <span className="anyspend-deposit-option-title text-as-primary font-medium">Deposit Crypto</span>
-                  <p className="anyspend-deposit-option-description text-as-secondary text-xs">
+              <div className={depositClasses?.optionContent || "anyspend-deposit-option-content"}>
+                <div className={depositClasses?.optionInfo || "anyspend-deposit-option-info"}>
+                  <span
+                    className={
+                      depositClasses?.optionTitle || "anyspend-deposit-option-title text-as-primary font-medium"
+                    }
+                  >
+                    Deposit Crypto
+                  </span>
+                  <p
+                    className={
+                      depositClasses?.optionDescription ||
+                      "anyspend-deposit-option-description text-as-secondary text-xs"
+                    }
+                  >
                     Swap from any token on any chain
                   </p>
                 </div>
               </div>
-              <ChevronRight className="anyspend-deposit-option-chevron text-as-secondary h-5 w-5" />
+              <ChevronRight
+                className={depositClasses?.optionChevron || "anyspend-deposit-option-chevron text-as-secondary h-5 w-5"}
+              />
             </button>
 
-            <div className="anyspend-deposit-divider flex items-center gap-3">
-              <div className="bg-as-stroke h-px flex-1" />
-              <span className="anyspend-deposit-divider-text text-as-secondary text-sm">More options</span>
-              <div className="bg-as-stroke h-px flex-1" />
+            <div className={depositClasses?.divider || "anyspend-deposit-divider flex items-center gap-3"}>
+              <div className={depositClasses?.dividerLine || "bg-as-stroke h-px flex-1"} />
+              <span
+                className={depositClasses?.dividerText || "anyspend-deposit-divider-text text-as-secondary text-sm"}
+              >
+                More options
+              </span>
+              <div className={depositClasses?.dividerLine || "bg-as-stroke h-px flex-1"} />
             </div>
 
             {/* Deposit with QR Code */}
             <button
               onClick={handleSelectQrDeposit}
-              className="anyspend-deposit-option-button anyspend-deposit-qr-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all"
+              className={
+                depositClasses?.qrButton ||
+                "anyspend-deposit-option-button anyspend-deposit-qr-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left shadow-sm transition-all"
+              }
             >
-              <div className="anyspend-deposit-option-content flex items-center gap-3">
-                <QrCodeIcon className="anyspend-deposit-option-icon h-10 w-10" />
-                <div className="anyspend-deposit-option-info">
-                  <span className="anyspend-deposit-option-title text-as-primary font-medium">
+              <div
+                className={depositClasses?.optionContent || "anyspend-deposit-option-content flex items-center gap-3"}
+              >
+                <QrCodeIcon className={depositClasses?.optionIcon || "anyspend-deposit-option-icon h-10 w-10"} />
+                <div className={depositClasses?.optionInfo || "anyspend-deposit-option-info"}>
+                  <span
+                    className={
+                      depositClasses?.optionTitle || "anyspend-deposit-option-title text-as-primary font-medium"
+                    }
+                  >
                     Deposit with QR Code
                   </span>
-                  <p className="anyspend-deposit-option-description text-as-secondary text-xs">
+                  <p
+                    className={
+                      depositClasses?.optionDescription ||
+                      "anyspend-deposit-option-description text-as-secondary text-xs"
+                    }
+                  >
                     Send tokens directly to deposit address
                   </p>
                 </div>
               </div>
-              <ChevronRight className="anyspend-deposit-option-chevron text-as-secondary h-5 w-5" />
+              <ChevronRight
+                className={depositClasses?.optionChevron || "anyspend-deposit-option-chevron text-as-secondary h-5 w-5"}
+              />
             </button>
 
             {/* Fund with Fiat */}
             <button
               onClick={handleSelectFiat}
-              className="anyspend-deposit-option-button anyspend-deposit-fiat-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left transition-all"
+              className={
+                depositClasses?.fiatButton ||
+                "anyspend-deposit-option-button anyspend-deposit-fiat-button border-border-primary hover:border-as-brand hover:bg-as-surface-secondary flex w-full items-center justify-between rounded-xl border p-4 text-left transition-all"
+              }
             >
-              <div className="anyspend-deposit-option-content flex items-center gap-3">
-                <CreditCardIcon className="anyspend-deposit-option-icon h-10 w-10" />
-                <div className="anyspend-deposit-option-info">
-                  <span className="anyspend-deposit-option-title text-as-primary font-medium">Fund with Fiat</span>
-                  <p className="anyspend-deposit-option-description text-as-secondary text-xs">
+              <div
+                className={depositClasses?.optionContent || "anyspend-deposit-option-content flex items-center gap-3"}
+              >
+                <CreditCardIcon className={depositClasses?.optionIcon || "anyspend-deposit-option-icon h-10 w-10"} />
+                <div className={depositClasses?.optionInfo || "anyspend-deposit-option-info"}>
+                  <span
+                    className={
+                      depositClasses?.optionTitle || "anyspend-deposit-option-title text-as-primary font-medium"
+                    }
+                  >
+                    Fund with Fiat
+                  </span>
+                  <p
+                    className={
+                      depositClasses?.optionDescription ||
+                      "anyspend-deposit-option-description text-as-secondary text-xs"
+                    }
+                  >
                     Pay with card or bank transfer
                   </p>
                 </div>
               </div>
-              <ChevronRight className="anyspend-deposit-option-chevron text-as-secondary h-5 w-5" />
+              <ChevronRight
+                className={depositClasses?.optionChevron || "anyspend-deposit-option-chevron text-as-secondary h-5 w-5"}
+              />
             </button>
           </div>
 
           {/* Chain-specific warning */}
-          <ChainWarningText chainId={destinationTokenChainId} className="mt-2" />
+          <ChainWarningText chainId={destinationTokenChainId} classes={classes?.chainWarningText || { root: "mt-2" }} />
         </div>
       </div>
     );
@@ -517,23 +618,32 @@ export function AnySpendDeposit({
         depositContractConfig={depositContractConfig}
         onBack={handleBack}
         onClose={onClose ?? handleBack}
+        classes={classes?.qrDeposit}
       />
     );
   }
 
   // Deposit view
   return (
-    <div className="anyspend-deposit anyspend-deposit-form relative">
+    <div className={depositClasses?.form || "anyspend-deposit anyspend-deposit-form relative"}>
       {/* Back button - only show if we came from chain selection */}
       {shouldShowChainSelection && (
         <button
           onClick={handleBack}
-          className="anyspend-deposit-back-button text-as-secondary hover:text-as-primary absolute left-4 top-4 z-10 flex items-center gap-1"
+          className={
+            depositClasses?.backButton ||
+            "anyspend-deposit-back-button text-as-secondary hover:text-as-primary absolute left-4 top-4 z-10 flex items-center gap-1"
+          }
         >
-          <svg className="anyspend-deposit-back-icon h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <svg
+            className={depositClasses?.backIcon || "anyspend-deposit-back-icon h-5 w-5"}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
           </svg>
-          <span className="anyspend-deposit-back-text text-sm">Back</span>
+          <span className={depositClasses?.backText || "anyspend-deposit-back-text text-sm"}>Back</span>
         </button>
       )}
 
@@ -541,7 +651,10 @@ export function AnySpendDeposit({
       {onClose && (
         <button
           onClick={onClose}
-          className="anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10"
+          className={
+            depositClasses?.closeButton ||
+            "anyspend-deposit-close-button text-as-secondary hover:text-as-primary absolute right-4 top-4 z-10"
+          }
         >
           <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -549,7 +662,11 @@ export function AnySpendDeposit({
         </button>
       )}
 
-      <div className={cn("anyspend-deposit-form-content", shouldShowChainSelection && "pt-8")}>
+      <div
+        className={
+          depositClasses?.formContent || cn("anyspend-deposit-form-content", shouldShowChainSelection && "pt-8")
+        }
+      >
         {isCustomDeposit ? (
           <AnySpendCustomExactIn
             key={selectedChainId}
@@ -574,6 +691,8 @@ export function AnySpendDeposit({
             returnToHomeUrl={returnToHomeUrl}
             customRecipientLabel={customRecipientLabel}
             returnHomeLabel={returnHomeLabel}
+            classes={classes?.customExactIn}
+            allowDirectTransfer={allowDirectTransfer}
           />
         ) : (
           <AnySpend
@@ -594,12 +713,17 @@ export function AnySpendDeposit({
             returnToHomeUrl={returnToHomeUrl}
             customRecipientLabel={customRecipientLabel}
             returnHomeLabel={returnHomeLabel}
+            classes={classes?.anySpend}
+            allowDirectTransfer={allowDirectTransfer}
           />
         )}
       </div>
 
       {/* Chain-specific warning */}
-      <ChainWarningText chainId={destinationTokenChainId} className="px-4 pb-4" />
+      <ChainWarningText
+        chainId={destinationTokenChainId}
+        classes={classes?.chainWarningText || { root: "px-4 pb-4" }}
+      />
     </div>
   );
 }

package/src/anyspend/react/components/AnySpendStakeUpsideExactIn.tsx

@@ -22,6 +22,7 @@ export function AnySpendStakeUpsideExactIn({
   recipientAddress,
   sourceTokenAddress,
   sourceTokenChainId,
+  destinationTokenAmount,
   stakingContractAddress,
   token,
   onSuccess,
@@ -33,6 +34,7 @@ export function AnySpendStakeUpsideExactIn({
   sourceTokenChainId?: number;
   stakingContractAddress: string;
   token: components["schemas"]["Token"];
+  destinationTokenAmount?: string;
   onSuccess?: (amount: string) => void;
 }) {
   if (!recipientAddress) return null;
@@ -65,6 +67,7 @@ export function AnySpendStakeUpsideExactIn({
       sourceTokenChainId={sourceTokenChainId}
       destinationToken={token}
       destinationChainId={base.id}
+      destinationTokenAmount={destinationTokenAmount}
       customExactInConfig={customExactInConfig}
       header={header}
       onSuccess={onSuccess}

package/src/anyspend/react/components/QRDeposit.tsx

@@ -14,6 +14,7 @@ import { ChainTokenIcon } from "./common/ChainTokenIcon";
 import { OrderDetails } from "./common/OrderDetails";
 import { TransferResultScreen } from "./common/TransferResultScreen";
 import { ChainWarningText, WarningText } from "./common/WarningText";
+import type { QRDepositClasses } from "./types/classes";
 
 export interface QRDepositProps {
   /** Display mode */
@@ -40,6 +41,8 @@ export interface QRDepositProps {
   onOrderCreated?: (orderId: string) => void;
   /** Callback when deposit is completed */
   onSuccess?: (txHash?: string) => void;
+  /** Custom classes for styling */
+  classes?: QRDepositClasses;
 }
 
 // Default source token: ETH on Base
@@ -81,6 +84,7 @@ export function QRDeposit({
   onClose,
   onOrderCreated,
   onSuccess,
+  classes,
 }: QRDepositProps) {
   const [copied, setCopied] = useState(false);
   const [orderId, setOrderId] = useState<string | undefined>();
@@ -238,12 +242,17 @@ export function QRDeposit({
   if (oat?.data && oat.data.depositTxs && oat.data.depositTxs.length > 0) {
     return (
       <div
-        className={cn(
-          "anyspend-container anyspend-qr-order-details font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6",
-          mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl",
-        )}
+        className={
+          classes?.orderDetailsContainer ||
+          cn(
+            "anyspend-container anyspend-qr-order-details font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6",
+            mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl",
+          )
+        }
       >
-        <div className="anyspend-qr-order-details-content relative flex flex-col gap-4">
+        <div
+          className={classes?.orderDetailsContent || "anyspend-qr-order-details-content relative flex flex-col gap-4"}
+        >
           <OrderDetails
             mode={mode}
             order={oat.data.order}
@@ -262,14 +271,26 @@ export function QRDeposit({
   if (isCreatingOrder && !orderId && !isPureTransfer) {
     return (
       <div
-        className={cn(
-          "anyspend-container anyspend-qr-loading font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6",
-          mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl",
-        )}
+        className={
+          classes?.loadingContainer ||
+          cn(
+            "anyspend-container anyspend-qr-loading font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6",
+            mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl",
+          )
+        }
       >
-        <div className="anyspend-qr-loading-content flex flex-col items-center justify-center gap-4 py-12">
-          <Loader2 className="anyspend-qr-loading-spinner text-as-brand h-8 w-8 animate-spin" />
-          <p className="anyspend-qr-loading-text text-as-secondary text-sm">Creating deposit order...</p>
+        <div
+          className={
+            classes?.loadingContent ||
+            "anyspend-qr-loading-content flex flex-col items-center justify-center gap-4 py-12"
+          }
+        >
+          <Loader2
+            className={classes?.loadingSpinner || "anyspend-qr-loading-spinner text-as-brand h-8 w-8 animate-spin"}
+          />
+          <p className={classes?.loadingText || "anyspend-qr-loading-text text-as-secondary text-sm"}>
+            Creating deposit order...
+          </p>
         </div>
       </div>
     );
@@ -277,22 +298,31 @@ export function QRDeposit({
 
   return (
     <div
-      className={cn(
-        "anyspend-container anyspend-qr-deposit font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6",
-        mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl",
-      )}
+      className={
+        classes?.container ||
+        cn(
+          "anyspend-container anyspend-qr-deposit font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6",
+          mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl",
+        )
+      }
     >
-      <div className="anyspend-qr-deposit-content flex flex-col gap-4">
+      <div className={classes?.content || "anyspend-qr-deposit-content flex flex-col gap-4"}>
         {/* Header with back button and close button */}
-        <div className="anyspend-qr-header flex items-center justify-between">
-          <button onClick={handleBack} className="anyspend-qr-back-button text-as-secondary hover:text-as-primary">
+        <div className={classes?.header || "anyspend-qr-header flex items-center justify-between"}>
+          <button
+            onClick={handleBack}
+            className={classes?.backButton || "anyspend-qr-back-button text-as-secondary hover:text-as-primary"}
+          >
             <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
             </svg>
           </button>
-          <h2 className="anyspend-qr-title text-as-primary text-base font-semibold">Deposit</h2>
+          <h2 className={classes?.title || "anyspend-qr-title text-as-primary text-base font-semibold"}>Deposit</h2>
           {onClose ? (
-            <button onClick={handleClose} className="anyspend-qr-close-button text-as-secondary hover:text-as-primary">
+            <button
+              onClick={handleClose}
+              className={classes?.closeButton || "anyspend-qr-close-button text-as-secondary hover:text-as-primary"}
+            >
               <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
               </svg>
@@ -303,8 +333,10 @@ export function QRDeposit({
         </div>
 
         {/* Token selector */}
-        <div className="anyspend-qr-token-selector flex flex-col gap-1.5">
-          <label className="anyspend-qr-token-label text-as-secondary text-sm">Send</label>
+        <div className={classes?.tokenSelectorContainer || "anyspend-qr-token-selector flex flex-col gap-1.5"}>
+          <label className={classes?.tokenSelectorLabel || "anyspend-qr-token-label text-as-secondary text-sm"}>
+            Send
+          </label>
           <TokenSelector
             chainIdsFilter={getAvailableChainIds("from")}
             context="from"
@@ -320,7 +352,10 @@ export function QRDeposit({
               <Button
                 variant="outline"
                 role="combobox"
-                className="anyspend-qr-token-trigger border-as-stroke bg-as-surface-secondary flex h-auto w-full items-center justify-between gap-2 rounded-xl border px-3 py-2.5"
+                className={
+                  classes?.tokenSelectorTrigger ||
+                  "anyspend-qr-token-trigger border-as-stroke bg-as-surface-secondary flex h-auto w-full items-center justify-between gap-2 rounded-xl border px-3 py-2.5"
+                }
               >
                 <div className="flex items-center gap-2">
                   {sourceToken.metadata?.logoURI ? (
@@ -344,27 +379,40 @@ export function QRDeposit({
         </div>
 
         {/* QR Code and Address - horizontal layout */}
-        <div className="anyspend-qr-content border-as-stroke flex items-start gap-4 rounded-xl border p-4">
+        <div
+          className={
+            classes?.qrContent || "anyspend-qr-content border-as-stroke flex items-start gap-4 rounded-xl border p-4"
+          }
+        >
           {/* QR Code */}
-          <div className="anyspend-qr-code-container flex flex-col items-center gap-2">
-            <div className="anyspend-qr-code rounded-lg bg-white p-2">
+          <div className={classes?.qrCodeContainer || "anyspend-qr-code-container flex flex-col items-center gap-2"}>
+            <div className={classes?.qrCode || "anyspend-qr-code rounded-lg bg-white p-2"}>
               <QRCodeSVG value={displayAddress} size={120} level="M" marginSize={0} />
             </div>
-            <span className="anyspend-qr-scan-hint text-as-secondary text-xs">
+            <span className={classes?.qrScanHint || "anyspend-qr-scan-hint text-as-secondary text-xs"}>
               SCAN WITH <span className="inline-block">🦊</span>
             </span>
           </div>
 
           {/* Address info */}
-          <div className="anyspend-qr-address-container flex flex-1 flex-col gap-1">
-            <span className="anyspend-qr-address-label text-as-secondary text-sm">Deposit address:</span>
-            <div className="anyspend-qr-address-row flex items-start gap-1">
-              <span className="anyspend-qr-address text-as-primary break-all font-mono text-sm leading-relaxed">
+          <div className={classes?.addressContainer || "anyspend-qr-address-container flex flex-1 flex-col gap-1"}>
+            <span className={classes?.addressLabel || "anyspend-qr-address-label text-as-secondary text-sm"}>
+              Deposit address:
+            </span>
+            <div className={classes?.addressRow || "anyspend-qr-address-row flex items-start gap-1"}>
+              <span
+                className={
+                  classes?.address || "anyspend-qr-address text-as-primary break-all font-mono text-sm leading-relaxed"
+                }
+              >
                 {displayAddress}
               </span>
               <button
                 onClick={handleCopyAddress}
-                className="anyspend-qr-copy-icon text-as-secondary hover:text-as-primary mt-0.5 shrink-0"
+                className={
+                  classes?.addressCopyIcon ||
+                  "anyspend-qr-copy-icon text-as-secondary hover:text-as-primary mt-0.5 shrink-0"
+                }
               >
                 {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
               </button>
@@ -381,7 +429,12 @@ export function QRDeposit({
 
         {/* Watching indicator for pure transfers */}
         {isPureTransfer && isWatchingTransfer && (
-          <div className="anyspend-qr-watching flex items-center justify-center gap-2 rounded-lg bg-blue-500/10 p-3">
+          <div
+            className={
+              classes?.watchingIndicator ||
+              "anyspend-qr-watching flex items-center justify-center gap-2 rounded-lg bg-blue-500/10 p-3"
+            }
+          >
             <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
             <span className="text-sm text-blue-500">Watching for incoming transfer...</span>
           </div>
@@ -390,7 +443,10 @@ export function QRDeposit({
         {/* Copy button */}
         <button
           onClick={handleCopyAddress}
-          className="anyspend-qr-copy-button flex w-full items-center justify-center gap-2 rounded-xl bg-blue-500 py-3.5 font-medium text-white transition-all hover:bg-blue-600"
+          className={
+            classes?.copyButton ||
+            "anyspend-qr-copy-button flex w-full items-center justify-center gap-2 rounded-xl bg-blue-500 py-3.5 font-medium text-white transition-all hover:bg-blue-600"
+          }
         >
           Copy deposit address
         </button>