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

package/dist/types/anyspend/react/components/common/TransferCryptoDetails.d.ts

@@ -1,5 +1,6 @@
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+import type { TransferCryptoDetailsClasses } from "../types/classes";
 type Order = components["schemas"]["Order"];
 type Token = components["schemas"]["Token"];
 type Tournament = components["schemas"]["Tournament"];
@@ -13,6 +14,7 @@ interface TransferCryptoDetailsProps {
     onBack: () => void;
     recipientName?: string;
     onPaymentMethodChange?: (method: CryptoPaymentMethodType) => void;
+    classes?: TransferCryptoDetailsClasses;
 }
 export declare const TransferCryptoDetails: import("react").NamedExoticComponent<TransferCryptoDetailsProps>;
 export {};

package/dist/types/anyspend/react/components/common/WarningText.d.ts

@@ -1,8 +1,9 @@
+import type { ChainWarningTextClasses, WarningTextClasses } from "../types/classes";
 export interface WarningTextProps {
     /** The warning message content */
     children: React.ReactNode;
-    /** Additional CSS classes */
-    className?: string;
+    /** Custom classes for styling */
+    classes?: WarningTextClasses;
 }
 /**
  * A generic warning text component with consistent styling.
@@ -12,12 +13,12 @@ export interface WarningTextProps {
  *   Custom warning message
  * </WarningText>
  */
-export declare function WarningText({ children, className }: WarningTextProps): import("react/jsx-runtime").JSX.Element;
+export declare function WarningText({ children, classes }: WarningTextProps): import("react/jsx-runtime").JSX.Element;
 export interface ChainWarningTextProps {
     /** The chain ID to display warning for */
     chainId: number;
-    /** Additional CSS classes */
-    className?: string;
+    /** Custom classes for styling */
+    classes?: ChainWarningTextClasses;
 }
 /**
  * A chain-aware warning text component that displays chain-specific warnings.
@@ -27,6 +28,6 @@ export interface ChainWarningTextProps {
  * <ChainWarningText chainId={HYPERLIQUID_CHAIN_ID} />
  *
  * @example
- * <ChainWarningText chainId={destinationChainId} className="mt-4" />
+ * <ChainWarningText chainId={destinationChainId} classes={{ root: "my-custom-class" }} />
  */
-export declare function ChainWarningText({ chainId, className }: ChainWarningTextProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ChainWarningText({ chainId, classes }: ChainWarningTextProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/anyspend/react/components/index.d.ts

@@ -6,6 +6,7 @@ export { AnySpendCustom } from "./AnySpendCustom";
 export { AnySpendCustomExactIn } from "./AnySpendCustomExactIn";
 export { AnySpendDeposit } from "./AnySpendDeposit";
 export type { AnySpendDepositProps, ChainConfig, DepositContractConfig } from "./AnySpendDeposit";
+export type { AnySpendAllClasses, AnySpendClasses, AnySpendCustomExactInClasses, AnySpendDepositClasses, CryptoPaymentMethodClasses, CryptoPaySectionClasses, CryptoReceiveSectionClasses, FiatPaymentMethodClasses, OrderDetailsClasses, PanelOnrampClasses, QRDepositClasses, RecipientSelectionClasses, } from "./types/classes";
 export { AnySpendDepositHype, HYPE_TOKEN_DETAILS } from "./AnyspendDepositHype";
 export * from "./AnySpendFingerprintWrapper";
 export { AnySpendNFT } from "./AnySpendNFT";

package/dist/types/anyspend/react/components/types/classes.d.ts

@@ -0,0 +1,390 @@
+/**
+ * Classes prop types for AnySpend components customization.
+ * Use these to override default styling of specific elements.
+ */
+/** Classes for AnySpendDeposit component */
+export interface AnySpendDepositClasses {
+    root?: string;
+    chainSelection?: string;
+    form?: string;
+    formContent?: string;
+    closeButton?: string;
+    balanceContainer?: string;
+    balanceLabel?: string;
+    balanceValue?: string;
+    optionsContainer?: string;
+    chainsSkeleton?: string;
+    skeletonItem?: string;
+    chainsContainer?: string;
+    chainButton?: string;
+    chainContent?: string;
+    chainInfo?: string;
+    chainName?: string;
+    chainIcon?: string;
+    chainBalance?: string;
+    chainChevron?: string;
+    generalOptions?: string;
+    optionButton?: string;
+    cryptoButton?: string;
+    qrButton?: string;
+    fiatButton?: string;
+    optionContent?: string;
+    optionInfo?: string;
+    optionTitle?: string;
+    optionDescription?: string;
+    optionIcon?: string;
+    optionChevron?: string;
+    divider?: string;
+    dividerLine?: string;
+    dividerText?: string;
+    backButton?: string;
+    backIcon?: string;
+    backText?: string;
+    header?: string;
+    title?: string;
+}
+/** Classes for AnySpend component */
+export interface AnySpendClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    headerLogo?: string;
+    headerTitle?: string;
+    tabSection?: string;
+    tabList?: string;
+    tabTrigger?: string;
+    tabTriggerActive?: string;
+    mainContent?: string;
+    inputSection?: string;
+    swapDirectionButton?: string;
+    mainButton?: string;
+    mainButtonDisabled?: string;
+    mainButtonError?: string;
+    historyButton?: string;
+    bottomNavigation?: string;
+    gasIndicator?: string;
+}
+/** Classes for AnySpendCustomExactIn component */
+export interface AnySpendCustomExactInClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    headerTitle?: string;
+    headerDescription?: string;
+    contentArea?: string;
+    inputSection?: string;
+    swapDirectionButton?: string;
+    mainButton?: string;
+    mainButtonDisabled?: string;
+    mainButtonError?: string;
+    footer?: string;
+    gasIndicator?: string;
+}
+/** Classes for CryptoPaySection component */
+export interface CryptoPaySectionClasses {
+    root?: string;
+    container?: string;
+    label?: string;
+    inputContainer?: string;
+    input?: string;
+    tokenSelector?: string;
+    tokenIcon?: string;
+    tokenSymbol?: string;
+    chainBadge?: string;
+    balanceRow?: string;
+    balanceLabel?: string;
+    balanceValue?: string;
+    maxButton?: string;
+    paymentMethodButton?: string;
+    feeRow?: string;
+}
+/** Classes for CryptoReceiveSection component */
+export interface CryptoReceiveSectionClasses {
+    root?: string;
+    container?: string;
+    label?: string;
+    inputContainer?: string;
+    input?: string;
+    tokenSelector?: string;
+    tokenIcon?: string;
+    tokenSymbol?: string;
+    chainBadge?: string;
+    recipientRow?: string;
+    recipientLabel?: string;
+    recipientValue?: string;
+    recipientButton?: string;
+    pointsRow?: string;
+    feeRow?: string;
+}
+/** Classes for PanelOnramp component */
+export interface PanelOnrampClasses {
+    root?: string;
+    container?: string;
+    amountInput?: string;
+    presetButtons?: string;
+    presetButton?: string;
+    paymentMethodRow?: string;
+    recipientRow?: string;
+    destinationRow?: string;
+    feeRow?: string;
+    pointsRow?: string;
+}
+/** Classes for OrderDetails component */
+export interface OrderDetailsClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    statusBadge?: string;
+    statusPending?: string;
+    statusSuccess?: string;
+    statusFailed?: string;
+    amountSection?: string;
+    detailsSection?: string;
+    detailRow?: string;
+    detailLabel?: string;
+    detailValue?: string;
+    transactionLink?: string;
+    actionButton?: string;
+    backButton?: string;
+    returnButton?: string;
+}
+/** Classes for RecipientSelection component */
+export interface RecipientSelectionClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    searchInput?: string;
+    recipientList?: string;
+    recipientItem?: string;
+    recipientItemActive?: string;
+    recipientAvatar?: string;
+    recipientName?: string;
+    recipientAddress?: string;
+    confirmButton?: string;
+    backButton?: string;
+}
+/** Classes for CryptoPaymentMethod component */
+export interface CryptoPaymentMethodClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    optionsList?: string;
+    optionItem?: string;
+    optionItemActive?: string;
+    optionIcon?: string;
+    optionLabel?: string;
+    optionDescription?: string;
+    backButton?: string;
+}
+/** Classes for FiatPaymentMethod component */
+export interface FiatPaymentMethodClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    optionsList?: string;
+    optionItem?: string;
+    optionItemActive?: string;
+    optionIcon?: string;
+    optionLabel?: string;
+    optionDescription?: string;
+    backButton?: string;
+}
+/** Classes for WarningText component */
+export interface WarningTextClasses {
+    root?: string;
+}
+/** Classes for ChainWarningText component */
+export interface ChainWarningTextClasses {
+    root?: string;
+}
+/** Classes for TabSection component */
+export interface TabSectionClasses {
+    root?: string;
+    container?: string;
+    tabIndicator?: string;
+    tabButton?: string;
+    tabButtonActive?: string;
+}
+/** Classes for FeeDetailPanel component */
+export interface FeeDetailPanelClasses {
+    root?: string;
+    container?: string;
+    title?: string;
+    tierCard?: string;
+    tierCardTitle?: string;
+    tierRow?: string;
+    tierRowActive?: string;
+    tierLabel?: string;
+    tierValue?: string;
+    expandButton?: string;
+    summaryCard?: string;
+    summaryRow?: string;
+    summaryLabel?: string;
+    summaryValue?: string;
+    summaryDivider?: string;
+    totalRow?: string;
+    totalLabel?: string;
+    totalValue?: string;
+    backButton?: string;
+}
+/** Classes for PointsDetailPanel component */
+export interface PointsDetailPanelClasses {
+    root?: string;
+    container?: string;
+    title?: string;
+    description?: string;
+    highlightText?: string;
+    link?: string;
+    infoCard?: string;
+    infoCardTitle?: string;
+    infoList?: string;
+    infoListItem?: string;
+    backButton?: string;
+}
+/** Classes for PanelOnrampPayment component */
+export interface PanelOnrampPaymentClasses {
+    root?: string;
+    container?: string;
+    summaryTitle?: string;
+    summaryCard?: string;
+    summaryRow?: string;
+    summaryLabel?: string;
+    summaryValue?: string;
+    summaryDivider?: string;
+    amountRow?: string;
+    amountValue?: string;
+    feeText?: string;
+    loadingContainer?: string;
+    loadingSpinner?: string;
+    loadingText?: string;
+    paymentMethodTitle?: string;
+    paymentMethodIcons?: string;
+    paymentOption?: string;
+    paymentOptionIcon?: string;
+    paymentOptionContent?: string;
+    paymentOptionTitle?: string;
+    paymentOptionDescription?: string;
+    paymentOptionFee?: string;
+    paymentOptionChevron?: string;
+    backButton?: string;
+}
+/** Classes for OrderDetailsCollapsible component */
+export interface OrderDetailsCollapsibleClasses {
+    root?: string;
+    container?: string;
+    expandedContent?: string;
+    recipientSection?: string;
+    recipientLabel?: string;
+    recipientInfo?: string;
+    recipientName?: string;
+    recipientAddress?: string;
+    recipientCopyIcon?: string;
+    divider?: string;
+    expectedSection?: string;
+    expectedLabel?: string;
+    expectedValue?: string;
+    expectedAmount?: string;
+    chainInfo?: string;
+    chainText?: string;
+    chainLogo?: string;
+    pointsSection?: string;
+    pointsLabel?: string;
+    pointsValue?: string;
+    idSection?: string;
+    idLabel?: string;
+    idValue?: string;
+    collapsedContainer?: string;
+    collapsedButton?: string;
+    collapsedChevron?: string;
+}
+/** Classes for TransferCryptoDetails component */
+export interface TransferCryptoDetailsClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    backButton?: string;
+    title?: string;
+    timer?: string;
+    timerSvg?: string;
+    timerBackground?: string;
+    timerProgress?: string;
+    timerText?: string;
+    cardsContainer?: string;
+    amountCard?: string;
+    amountLabel?: string;
+    amountContainer?: string;
+    amountText?: string;
+    amountCopyIcon?: string;
+    chainCard?: string;
+    chainLabel?: string;
+    chainContainer?: string;
+    chainLogo?: string;
+    chainName?: string;
+    qrDepositCard?: string;
+    qrSection?: string;
+    qrWrapper?: string;
+    qrContainer?: string;
+    qrCode?: string;
+    walletHint?: string;
+    walletText?: string;
+    walletIcon?: string;
+    addressSection?: string;
+    addressLabel?: string;
+    addressCopyContainer?: string;
+    addressText?: string;
+    addressCopyIcon?: string;
+    actionsContainer?: string;
+    copyButton?: string;
+}
+/** Classes for QRDeposit component */
+export interface QRDepositClasses {
+    root?: string;
+    container?: string;
+    content?: string;
+    header?: string;
+    backButton?: string;
+    title?: string;
+    closeButton?: string;
+    tokenSelectorContainer?: string;
+    tokenSelectorLabel?: string;
+    tokenSelectorTrigger?: string;
+    qrContent?: string;
+    qrCodeContainer?: string;
+    qrCode?: string;
+    qrScanHint?: string;
+    addressContainer?: string;
+    addressLabel?: string;
+    addressRow?: string;
+    address?: string;
+    addressCopyIcon?: string;
+    watchingIndicator?: string;
+    copyButton?: string;
+    loadingContainer?: string;
+    loadingContent?: string;
+    loadingSpinner?: string;
+    loadingText?: string;
+    orderDetailsContainer?: string;
+    orderDetailsContent?: string;
+}
+/** Combined classes for all AnySpend-related components */
+export interface AnySpendAllClasses {
+    deposit?: AnySpendDepositClasses;
+    anySpend?: AnySpendClasses;
+    customExactIn?: AnySpendCustomExactInClasses;
+    cryptoPaySection?: CryptoPaySectionClasses;
+    cryptoReceiveSection?: CryptoReceiveSectionClasses;
+    panelOnramp?: PanelOnrampClasses;
+    orderDetails?: OrderDetailsClasses;
+    recipientSelection?: RecipientSelectionClasses;
+    cryptoPaymentMethod?: CryptoPaymentMethodClasses;
+    fiatPaymentMethod?: FiatPaymentMethodClasses;
+    qrDeposit?: QRDepositClasses;
+    warningText?: WarningTextClasses;
+    chainWarningText?: ChainWarningTextClasses;
+    tabSection?: TabSectionClasses;
+    feeDetailPanel?: FeeDetailPanelClasses;
+    pointsDetailPanel?: PointsDetailPanelClasses;
+    panelOnrampPayment?: PanelOnrampPaymentClasses;
+    orderDetailsCollapsible?: OrderDetailsCollapsibleClasses;
+    transferCryptoDetails?: TransferCryptoDetailsClasses;
+}

package/dist/types/global-account/react/stores/useModalStore.d.ts

@@ -1,3 +1,4 @@
+import { AnySpendAllClasses } from "@b3dotfun/sdk/anyspend/react";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { GenerateSigMintResponse } from "@b3dotfun/sdk/anyspend/types/signatureMint";
 import { AllowedStrategy } from "@b3dotfun/sdk/global-account/react";
@@ -541,6 +542,8 @@ export interface AnySpendDepositModalProps extends BaseModalProps {
     returnHomeLabel?: string;
     /** Whether the deposit requires a custom function (uses AnySpendCustomExactIn). Defaults to false. */
     isCustomDeposit?: boolean;
+    /** Custom class names for styling specific elements */
+    classes?: AnySpendAllClasses;
 }
 /**
  * Union type of all possible modal content types

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.1.2-alpha.0",
+  "version": "0.1.2-alpha.2",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

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

@@ -64,6 +64,7 @@ import { PanelOnrampPayment } from "./common/PanelOnrampPayment";
 import { PointsDetailPanel } from "./common/PointsDetailPanel";
 import { RecipientSelection } from "./common/RecipientSelection";
 import { TabSection } from "./common/TabSection";
+import type { AnySpendClasses } from "./types/classes";
 
 const baseChain = getThirdwebChain(8453);
 
@@ -115,6 +116,8 @@ export function AnySpend(props: {
   customRecipientLabel?: string;
   /** Custom label for the return home button (overrides "Return to Home" / "Close") */
   returnHomeLabel?: string;
+  /** Custom class names for styling specific elements */
+  classes?: AnySpendClasses;
 }) {
   const fingerprintConfig = getFingerprintConfig();
 
@@ -143,6 +146,7 @@ function AnySpendInner({
   returnToHomeUrl,
   customRecipientLabel,
   returnHomeLabel,
+  classes,
 }: {
   sourceChainId?: number;
   destinationTokenAddress?: string;
@@ -161,6 +165,7 @@ function AnySpendInner({
   returnToHomeUrl?: string;
   customRecipientLabel?: string;
   returnHomeLabel?: string;
+  classes?: AnySpendClasses;
 }) {
   const searchParams = useSearchParamsSSR();
   const router = useRouter();
@@ -1098,22 +1103,24 @@ function AnySpendInner({
   );
 
   const mainView = (
-    <div className={"mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5"}>
+    <div className={classes?.mainContent || "mx-auto flex w-[460px] max-w-full flex-col items-center gap-2 pt-5"}>
       <div className={"flex w-full max-w-full flex-col items-center gap-2 px-5"}>
         {/* Token Header - Show when in buy mode */}
         {isBuyMode && !hideHeader && (
-          <div className="mb-4 flex flex-col items-center gap-3 text-center">
+          <div className={classes?.header || "mb-4 flex flex-col items-center gap-3 text-center"}>
             {selectedDstToken.metadata?.logoURI && (
               <div className="relative">
                 <img
                   src={selectedDstToken.metadata.logoURI}
                   alt={selectedDstToken.symbol}
-                  className="border-as-stroke h-12 w-12 rounded-full border-2 shadow-md"
+                  className={classes?.headerLogo || "border-as-stroke h-12 w-12 rounded-full border-2 shadow-md"}
                 />
               </div>
             )}
             <div>
-              <h1 className="text-as-primary text-xl font-bold">Buy {selectedDstToken.symbol}</h1>
+              <h1 className={classes?.headerTitle || "text-as-primary text-xl font-bold"}>
+                Buy {selectedDstToken.symbol}
+              </h1>
             </div>
           </div>
         )}
@@ -1191,11 +1198,14 @@ function AnySpendInner({
             <div className="z-10 -my-6 flex justify-center">
               <Button
                 variant="ghost"
-                className={cn(
-                  "border-as-stroke bg-as-surface-primary h-10 w-10 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl",
-                  isBuyMode && "cursor-default",
-                  selectedDstChainId === HYPERLIQUID_CHAIN_ID && "cursor-not-allowed opacity-50",
-                )}
+                className={
+                  classes?.swapDirectionButton ||
+                  cn(
+                    "border-as-stroke bg-as-surface-primary h-10 w-10 rounded-xl border-2 sm:h-8 sm:w-8 sm:rounded-xl",
+                    isBuyMode && "cursor-default",
+                    selectedDstChainId === HYPERLIQUID_CHAIN_ID && "cursor-not-allowed opacity-50",
+                  )
+                }
                 onClick={() => {
                   if (isBuyMode) {
                     return;
@@ -1255,7 +1265,7 @@ function AnySpendInner({
 
         {/* Gas indicator - show when source chain has gas data */}
         {gasPriceData && !isLoadingGas && activeTab === "crypto" && (
-          <GasIndicator gasPrice={gasPriceData} className="mt-2 w-full" />
+          <GasIndicator gasPrice={gasPriceData} className={classes?.gasIndicator || "mt-2 w-full"} />
         )}
 
         {/* Main button section */}
@@ -1269,10 +1279,15 @@ function AnySpendInner({
             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">
@@ -1285,7 +1300,10 @@ function AnySpendInner({
             <Button
               variant="link"
               onClick={onClickHistory}
-              className="text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors"
+              className={
+                classes?.historyButton ||
+                "text-as-primary/50 hover:text-as-primary flex items-center gap-1 transition-colors"
+              }
             >
               <HistoryIcon className="h-4 w-4" /> <span className="pr-4">Transaction History</span>
             </Button>
@@ -1412,11 +1430,14 @@ function AnySpendInner({
   return (
     <StyleRoot>
       <div
-        className={cn(
-          "anyspend-container font-inter mx-auto w-full max-w-[460px]",
-          mode === "page" &&
-            "bg-as-surface-primary border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl",
-        )}
+        className={
+          classes?.container ||
+          cn(
+            "anyspend-container font-inter mx-auto w-full max-w-[460px]",
+            mode === "page" &&
+              "bg-as-surface-primary border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl",
+          )
+        }
       >
         <TransitionPanel
           activeIndex={