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

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>

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

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

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

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

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

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