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

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

@@ -12,6 +12,7 @@ import {
 } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatUnits } from "@b3dotfun/sdk/shared/utils/number";
+import type { AnySpendCustomExactInClasses } from "./types/classes";
 import invariant from "invariant";
 import { ArrowDown, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
@@ -74,6 +75,8 @@ export interface AnySpendCustomExactInProps {
   customRecipientLabel?: string;
   /** Custom label for the return home button (overrides "Return to Home" / "Close") */
   returnHomeLabel?: string;
+  /** Custom class names for styling specific elements */
+  classes?: AnySpendCustomExactInClasses;
 }
 
 export function AnySpendCustomExactIn(props: AnySpendCustomExactInProps) {
@@ -108,6 +111,7 @@ function AnySpendCustomExactInInner({
   returnToHomeUrl,
   customRecipientLabel,
   returnHomeLabel,
+  classes,
 }: AnySpendCustomExactInProps) {
   const actionLabel = customExactInConfig?.action ?? "Custom Execution";
 
@@ -327,7 +331,12 @@ function AnySpendCustomExactInInner({
   );
 
   const mainView = (
-    <div className="anyspend-custom-exact-in-container mx-auto flex w-[460px] max-w-full flex-col items-center gap-2">
+    <div
+      className={
+        classes?.container ||
+        "anyspend-custom-exact-in-container mx-auto flex w-[460px] max-w-full flex-col items-center gap-2"
+      }
+    >
       {headerContent}
 
       <div className="relative flex w-full max-w-[calc(100vw-32px)] flex-col gap-2">
@@ -382,9 +391,10 @@ function AnySpendCustomExactInInner({
           >
             <Button
               variant="ghost"
-              className={cn(
-                "swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl",
-              )}
+              className={
+                classes?.swapDirectionButton ||
+                "swap-direction-button border-as-stroke bg-as-surface-primary z-10 h-10 w-10 cursor-default rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl"
+              }
             >
               <div className="relative flex items-center justify-center transition-opacity">
                 <ArrowDown className="text-as-primary/50 h-5 w-5" />
@@ -430,10 +440,15 @@ function AnySpendCustomExactInInner({
           accentColor={"hsl(var(--as-brand))"}
           disabled={btnInfo.disable}
           onClick={onMainButtonClick}
-          className={cn(
-            "as-main-button relative w-full",
-            btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand",
-          )}
+          className={
+            (btnInfo.error && classes?.mainButtonError) ||
+            (btnInfo.disable && classes?.mainButtonDisabled) ||
+            classes?.mainButton ||
+            cn(
+              "as-main-button relative w-full",
+              btnInfo.error ? "!bg-as-red" : btnInfo.disable ? "!bg-as-on-surface-2" : "!bg-as-brand",
+            )
+          }
           textClassName={cn(btnInfo.error ? "text-white" : btnInfo.disable ? "text-as-secondary" : "text-white")}
         >
           <div className="flex items-center justify-center gap-2">
@@ -445,7 +460,7 @@ function AnySpendCustomExactInInner({
 
       {/* Gas indicator - show when source chain has gas data */}
       {gasPriceData && !isLoadingGas && paymentType === "crypto" && (
-        <GasIndicator gasPrice={gasPriceData} className="mt-2 w-full" />
+        <GasIndicator gasPrice={gasPriceData} className={classes?.gasIndicator || "mt-2 w-full"} />
       )}
 
       {mainFooter ? mainFooter : null}
@@ -628,10 +643,13 @@ function AnySpendCustomExactInInner({
   return (
     <StyleRoot>
       <div
-        className={cn(
-          "anyspend-container 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?.root ||
+          cn(
+            "anyspend-container 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",
+          )
+        }
       >
         <TransitionPanel
           activeIndex={

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,8 @@ export interface AnySpendDepositProps {
    * Defaults to false.
    */
   isCustomDeposit?: boolean;
+  /** Custom class names for styling specific elements */
+  classes?: AnySpendAllClasses;
 }
 
 // Default supported chains
@@ -238,7 +241,10 @@ export function AnySpendDeposit({
   customRecipientLabel,
   returnHomeLabel,
   isCustomDeposit = false,
+  classes,
 }: AnySpendDepositProps) {
+  // Extract deposit-specific classes for convenience
+  const depositClasses = classes?.deposit;
   const { connectedEOAWallet } = useAccountWallet();
   const eoaAddress = connectedEOAWallet?.getAccount()?.address;
 
@@ -368,16 +374,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 +398,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 +442,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 +615,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 +648,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 +659,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 +688,7 @@ export function AnySpendDeposit({
             returnToHomeUrl={returnToHomeUrl}
             customRecipientLabel={customRecipientLabel}
             returnHomeLabel={returnHomeLabel}
+            classes={classes?.customExactIn}
           />
         ) : (
           <AnySpend
@@ -594,12 +709,16 @@ export function AnySpendDeposit({
             returnToHomeUrl={returnToHomeUrl}
             customRecipientLabel={customRecipientLabel}
             returnHomeLabel={returnHomeLabel}
+            classes={classes?.anySpend}
           />
         )}
       </div>
 
       {/* Chain-specific warning */}
-      <ChainWarningText chainId={destinationTokenChainId} className="px-4 pb-4" />
+      <ChainWarningText
+        chainId={destinationTokenChainId}
+        classes={classes?.chainWarningText || { root: "px-4 pb-4" }}
+      />
     </div>
   );
 }