@b3dotfun/sdk 0.1.2 → 0.1.5

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

@@ -14,6 +14,7 @@ import { b3 } from "viem/chains";
 import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
 import { OrderDetailsCollapsible } from "./OrderDetailsCollapsible";
 import { PaymentMethodSwitch } from "./PaymentMethodSwitch";
+import type { TransferCryptoDetailsClasses } from "../types/classes";
 
 type Order = components["schemas"]["Order"];
 type Token = components["schemas"]["Token"];
@@ -29,6 +30,7 @@ interface TransferCryptoDetailsProps {
   onBack: () => void;
   recipientName?: string;
   onPaymentMethodChange?: (method: CryptoPaymentMethodType) => void;
+  classes?: TransferCryptoDetailsClasses;
 }
 
 export const TransferCryptoDetails = memo(function TransferCryptoDetails({
@@ -40,6 +42,7 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
   onBack,
   recipientName,
   onPaymentMethodChange,
+  classes,
 }: TransferCryptoDetailsProps) {
   const [timeLeft, setTimeLeft] = useState(0);
 
@@ -102,17 +105,22 @@ export const TransferCryptoDetails = memo(function TransferCryptoDetails({
   };
 
   return (
-    <div className="order-transfer-crypto flex w-full flex-col gap-6">
+    <div className={classes?.container || "order-transfer-crypto flex w-full flex-col gap-6"}>
       {/* Header */}
-      <div className="order-transfer-crypto-header flex items-center justify-between">
+      <div className={classes?.header || "order-transfer-crypto-header flex items-center justify-between"}>
         <button
           onClick={onBack}
-          className="order-transfer-crypto-back-btn text-as-primary/60 hover:text-as-primary flex h-10 w-10 items-center justify-center rounded-full transition-colors"
+          className={
+            classes?.backButton ||
+            "order-transfer-crypto-back-btn text-as-primary/60 hover:text-as-primary flex h-10 w-10 items-center justify-center rounded-full transition-colors"
+          }
         >
           <ChevronLeft size={24} className="text-as-quaternary" />
         </button>
 
-        <h2 className="order-transfer-crypto-title text-as-primary text-lg font-semibold">Transfer crypto</h2>
+        <h2 className={classes?.title || "order-transfer-crypto-title text-as-primary text-lg font-semibold"}>
+          Transfer crypto
+        </h2>
 
         {/* Countdown Timer */}
         <div className="order-transfer-crypto-timer relative flex h-11 w-11 items-center justify-center">

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

@@ -1,11 +1,11 @@
 import { HYPERLIQUID_CHAIN_ID } from "@b3dotfun/sdk/anyspend";
-import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+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;
 }
 
 /**
@@ -16,15 +16,15 @@ export interface WarningTextProps {
  *   Custom warning message
  * </WarningText>
  */
-export function WarningText({ children, className }: WarningTextProps) {
-  return <p className={cn("anyspend-warning text-center text-xs italic text-red-500", className)}>{children}</p>;
+export function WarningText({ children, classes }: WarningTextProps) {
+  return <p className={classes?.root || "anyspend-warning text-center text-xs italic text-red-500"}>{children}</p>;
 }
 
 export interface ChainWarningTextProps {
   /** The chain ID to display warning for */
   chainId: number;
-  /** Additional CSS classes */
-  className?: string;
+  /** Custom classes for styling */
+  classes?: ChainWarningTextClasses;
 }
 
 /**
@@ -35,13 +35,13 @@ export interface ChainWarningTextProps {
  * <ChainWarningText chainId={HYPERLIQUID_CHAIN_ID} />
  *
  * @example
- * <ChainWarningText chainId={destinationChainId} className="mt-4" />
+ * <ChainWarningText chainId={destinationChainId} classes={{ root: "my-custom-class" }} />
  */
-export function ChainWarningText({ chainId, className }: ChainWarningTextProps) {
+export function ChainWarningText({ chainId, classes }: ChainWarningTextProps) {
   // Chain-specific warning messages
   if (chainId === HYPERLIQUID_CHAIN_ID) {
     return (
-      <WarningText className={className}>
+      <WarningText classes={classes}>
         Minimum deposit amount: <b>$1</b>
       </WarningText>
     );

package/src/anyspend/react/components/index.ts

@@ -7,6 +7,22 @@ export { AnySpendCustom } from "./AnySpendCustom";
 export { AnySpendCustomExactIn } from "./AnySpendCustomExactIn";
 export { AnySpendDeposit } from "./AnySpendDeposit";
 export type { AnySpendDepositProps, ChainConfig, DepositContractConfig } from "./AnySpendDeposit";
+
+// Classes types for styling customization
+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/src/anyspend/react/components/types/classes.ts

@@ -0,0 +1,476 @@
+/**
+ * Classes prop types for AnySpend components customization.
+ * Use these to override default styling of specific elements.
+ */
+
+/** Classes for AnySpendDeposit component */
+export interface AnySpendDepositClasses {
+  // Root containers
+  root?: string;
+  chainSelection?: string;
+  form?: string;
+  formContent?: string;
+
+  // Close button
+  closeButton?: string;
+
+  // Balance header
+  balanceContainer?: string;
+  balanceLabel?: string;
+  balanceValue?: string;
+
+  // Options container
+  optionsContainer?: string;
+
+  // Loading skeleton
+  chainsSkeleton?: string;
+  skeletonItem?: string;
+
+  // Chains list
+  chainsContainer?: string;
+  chainButton?: string;
+  chainContent?: string;
+  chainInfo?: string;
+  chainName?: string;
+  chainIcon?: string;
+  chainBalance?: string;
+  chainChevron?: string;
+
+  // General options
+  generalOptions?: string;
+  optionButton?: string;
+  cryptoButton?: string;
+  qrButton?: string;
+  fiatButton?: string;
+  optionContent?: string;
+  optionInfo?: string;
+  optionTitle?: string;
+  optionDescription?: string;
+  optionIcon?: string;
+  optionChevron?: string;
+
+  // Divider
+  divider?: string;
+  dividerLine?: string;
+  dividerText?: string;
+
+  // Back button
+  backButton?: string;
+  backIcon?: string;
+  backText?: string;
+
+  // Header
+  header?: string;
+  title?: string;
+}
+
+/** Classes for AnySpend component */
+export interface AnySpendClasses {
+  // Root container
+  root?: string;
+  container?: string;
+
+  // Header
+  header?: string;
+  headerLogo?: string;
+  headerTitle?: string;
+
+  // Tab section
+  tabSection?: string;
+  tabList?: string;
+  tabTrigger?: string;
+  tabTriggerActive?: string;
+
+  // Main content area
+  mainContent?: string;
+  inputSection?: string;
+
+  // Swap direction button
+  swapDirectionButton?: string;
+
+  // Main action button
+  mainButton?: string;
+  mainButtonDisabled?: string;
+  mainButtonError?: string;
+
+  // Transaction history button
+  historyButton?: string;
+
+  // Bottom navigation
+  bottomNavigation?: string;
+
+  // Gas indicator
+  gasIndicator?: string;
+}
+
+/** Classes for AnySpendCustomExactIn component */
+export interface AnySpendCustomExactInClasses {
+  // Root container
+  root?: string;
+  container?: string;
+
+  // Header
+  header?: string;
+  headerTitle?: string;
+  headerDescription?: string;
+
+  // Content area
+  contentArea?: string;
+  inputSection?: string;
+
+  // Swap direction button
+  swapDirectionButton?: string;
+
+  // Main action button
+  mainButton?: string;
+  mainButtonDisabled?: string;
+  mainButtonError?: string;
+
+  // Footer
+  footer?: string;
+
+  // Gas indicator
+  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 containers
+  root?: string;
+  container?: string;
+  content?: string;
+
+  // Header
+  header?: string;
+  backButton?: string;
+  title?: string;
+  closeButton?: string;
+
+  // Token selector
+  tokenSelectorContainer?: string;
+  tokenSelectorLabel?: string;
+  tokenSelectorTrigger?: string;
+
+  // QR Code area
+  qrContent?: string;
+  qrCodeContainer?: string;
+  qrCode?: string;
+  qrScanHint?: string;
+
+  // Address area
+  addressContainer?: string;
+  addressLabel?: string;
+  addressRow?: string;
+  address?: string;
+  addressCopyIcon?: string;
+
+  // Watching indicator
+  watchingIndicator?: string;
+
+  // Copy button
+  copyButton?: string;
+
+  // Loading state
+  loadingContainer?: string;
+  loadingContent?: string;
+  loadingSpinner?: string;
+  loadingText?: string;
+
+  // Order details wrapper
+  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/src/anyspend/react/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from "./useAnyspendCreateOnrampOrder";
+export * from "./useDirectTransfer";
 export * from "./useAnyspendCreateOrder";
 export * from "./useCreateDepositFirstOrder";
 export * from "./useAnyspendOrderAndTransactions";