@b3dotfun/sdk 0.0.28-alpha.0 → 0.0.28-alpha.1

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

@@ -21,6 +21,7 @@ export function PanelOnramp({
   destinationAmount,
   onDestinationTokenChange,
   onDestinationChainChange,
+  fiatPaymentMethodIndex,
 }: {
   srcAmountOnRamp: string;
   setSrcAmountOnRamp: (amount: string) => void;
@@ -32,6 +33,7 @@ export function PanelOnramp({
   destinationAmount?: string;
   onDestinationTokenChange?: (token: components["schemas"]["Token"]) => void;
   onDestinationChainChange?: (chainId: number) => void;
+  fiatPaymentMethodIndex: number;
 }) {
   // Get geo-based onramp options to access fee information
   const { stripeWeb2Support } = useGeoOnrampOptions(srcAmountOnRamp);
@@ -102,14 +104,14 @@ export function PanelOnramp({
   };
 
   return (
-    <div className="bg-as-surface-primary flex w-full flex-col">
+    <div className="panel-onramp bg-as-surface-primary flex w-full flex-col">
       {/* Pay Section */}
       <div className="border-as-border-secondary bg-as-surface-secondary relative flex w-full flex-col rounded-2xl border p-4">
         <div className="flex h-7 w-full items-center justify-between">
           <span className="text-as-tertiarry flex items-center text-sm font-bold">Pay</span>
           <button
             className="text-as-tertiarry flex h-7 items-center gap-1 text-sm"
-            onClick={() => setActivePanel(7)} // PanelView.FIAT_PAYMENT_METHOD
+            onClick={() => setActivePanel(fiatPaymentMethodIndex)} // PanelView.FIAT_PAYMENT_METHOD
           >
             {selectedPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (
               <>

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

@@ -0,0 +1,222 @@
+import { Input, useAccountWallet, useTokenData } from "@b3dotfun/sdk/global-account/react";
+import { formatUsername } from "@b3dotfun/sdk/shared/utils";
+import { shortenAddress } from "@b3dotfun/sdk/shared/utils/formatAddress";
+import { formatDisplayNumber } from "@b3dotfun/sdk/shared/utils/number";
+import { ChevronRight } from "lucide-react";
+import { motion } from "motion/react";
+import { useEffect, useRef } from "react";
+import { components } from "../../../types/api";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+import { FiatPaymentMethod } from "./FiatPaymentMethod";
+import { OrderTokenAmount } from "./OrderTokenAmount";
+import { TokenBalance } from "./TokenBalance";
+
+interface PaySectionProps {
+  paymentType: "crypto" | "fiat";
+  // Token state
+  selectedSrcChainId: number;
+  setSelectedSrcChainId: (chainId: number) => void;
+  selectedSrcToken: components["schemas"]["Token"];
+  setSelectedSrcToken: (token: components["schemas"]["Token"]) => void;
+  srcAmount: string;
+  setSrcAmount: (amount: string) => void;
+  setIsSrcInputDirty: (dirty: boolean) => void;
+  // Payment method state
+  selectedCryptoPaymentMethod: CryptoPaymentMethodType;
+  selectedFiatPaymentMethod: FiatPaymentMethod;
+  onSelectCryptoPaymentMethod: () => void;
+  onSelectFiatPaymentMethod: () => void;
+  // Quote data
+  anyspendQuote?: any;
+}
+
+export function PaySection({
+  paymentType,
+  selectedSrcChainId,
+  setSelectedSrcChainId,
+  selectedSrcToken,
+  setSelectedSrcToken,
+  srcAmount,
+  setSrcAmount,
+  setIsSrcInputDirty,
+  selectedCryptoPaymentMethod,
+  selectedFiatPaymentMethod,
+  onSelectCryptoPaymentMethod,
+  onSelectFiatPaymentMethod,
+  anyspendQuote,
+}: PaySectionProps) {
+  const { address: globalAddress, wallet: globalWallet, ensName: connectedName } = useAccountWallet();
+  const connectedAddress = globalWallet?.address;
+  const { data: srcTokenMetadata } = useTokenData(selectedSrcToken?.chainId, selectedSrcToken?.address);
+
+  // Add ref to track if we've applied metadata
+  const appliedSrcMetadataRef = useRef(false);
+
+  // Update source token with metadata
+  useEffect(() => {
+    if (selectedSrcToken && srcTokenMetadata && !appliedSrcMetadataRef.current) {
+      // Mark as applied
+      appliedSrcMetadataRef.current = true;
+
+      const enhancedToken = {
+        ...selectedSrcToken,
+        decimals: srcTokenMetadata.decimals || selectedSrcToken.decimals,
+        symbol: srcTokenMetadata.symbol || selectedSrcToken.symbol,
+        name: srcTokenMetadata.name || selectedSrcToken.name,
+        metadata: {
+          ...selectedSrcToken.metadata,
+          logoURI: srcTokenMetadata?.logoURI || selectedSrcToken.metadata.logoURI,
+        },
+      };
+      setSelectedSrcToken(enhancedToken);
+    }
+  }, [srcTokenMetadata, selectedSrcToken, setSelectedSrcToken]);
+
+  // Reset source token ref when address/chain changes
+  useEffect(() => {
+    appliedSrcMetadataRef.current = false;
+  }, [selectedSrcToken.address, selectedSrcToken.chainId]);
+
+  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, ease: "easeInOut" }}
+      className="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 text-sm">Pay</div>
+        {paymentType === "crypto" ? (
+          <button
+            className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors"
+            onClick={onSelectCryptoPaymentMethod}
+          >
+            {selectedCryptoPaymentMethod === CryptoPaymentMethodType.CONNECT_WALLET ? (
+              <>
+                {globalAddress ? (
+                  <div className="flex items-center gap-1">
+                    {connectedName ? formatUsername(connectedName) : shortenAddress(connectedAddress || "")}
+                  </div>
+                ) : (
+                  "Connect wallet"
+                )}
+                <ChevronRight className="h-4 w-4" />
+              </>
+            ) : selectedCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO ? (
+              <>
+                Transfer crypto
+                <ChevronRight className="h-4 w-4" />
+              </>
+            ) : (
+              <>
+                Select payment method
+                <ChevronRight className="h-4 w-4" />
+              </>
+            )}
+          </button>
+        ) : (
+          <button
+            className="text-as-tertiarry flex h-7 items-center gap-2 text-sm transition-colors"
+            onClick={onSelectFiatPaymentMethod}
+          >
+            {selectedFiatPaymentMethod === FiatPaymentMethod.COINBASE_PAY ? (
+              <>
+                <div className="flex items-center gap-2">
+                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
+                    <span className="text-xs font-bold text-white">C</span>
+                  </div>
+                  Coinbase Pay
+                </div>
+                <ChevronRight className="h-4 w-4" />
+              </>
+            ) : selectedFiatPaymentMethod === FiatPaymentMethod.STRIPE ? (
+              <>
+                <div className="flex items-center gap-2">
+                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-600">
+                    <span className="text-xs font-bold text-white">S</span>
+                  </div>
+                  Credit/Debit Card
+                </div>
+                <ChevronRight className="h-4 w-4" />
+              </>
+            ) : (
+              <>
+                Select payment method
+                <ChevronRight className="h-4 w-4" />
+              </>
+            )}
+          </button>
+        )}
+      </div>
+      {paymentType === "crypto" ? (
+        <>
+          <OrderTokenAmount
+            address={globalAddress}
+            context="from"
+            inputValue={srcAmount}
+            onChangeInput={value => {
+              setIsSrcInputDirty(true);
+              setSrcAmount(value);
+            }}
+            chainId={selectedSrcChainId}
+            setChainId={setSelectedSrcChainId}
+            token={selectedSrcToken}
+            setToken={setSelectedSrcToken}
+          />
+          <div className="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",
+                fallback: "",
+              })}
+            </div>
+            <TokenBalance
+              token={selectedSrcToken}
+              walletAddress={globalAddress}
+              onChangeInput={value => {
+                setIsSrcInputDirty(true);
+                setSrcAmount(value);
+              }}
+            />
+          </div>
+        </>
+      ) : (
+        <>
+          {/* Fiat amount input - styled like PanelOnramp */}
+          <div className="flex items-center justify-center pb-2 pt-8">
+            <div className="flex gap-1">
+              <span className="text-as-tertiarry text-2xl font-bold">$</span>
+              <Input
+                type="text"
+                value={srcAmount}
+                onChange={e => setSrcAmount(e.target.value.replace(/[^0-9.]/g, ""))}
+                placeholder="5"
+                className="text-as-primary placeholder:text-as-primary/50 h-auto min-w-[70px] border-0 bg-transparent p-0 px-3 pt-1 text-4xl font-bold focus-visible:ring-0 focus-visible:ring-offset-0"
+                style={{
+                  width: `${Math.max(50, srcAmount.length * 34)}px`,
+                }}
+              />
+            </div>
+          </div>
+
+          {/* Quick Amount Buttons */}
+          <div className="mx-auto mb-6 inline-grid grid-cols-4 gap-2">
+            {["5", "10", "20", "25"].map(value => (
+              <button
+                key={value}
+                onClick={() => setSrcAmount(value)}
+                className={`bg-as-surface-secondary border-as-border-secondary hover:border-as-border-secondary h-7 w-14 rounded-lg border text-sm font-medium transition-all duration-200 ${
+                  srcAmount === value
+                    ? "border-as-border-secondary bg-as-surface-secondary"
+                    : "bg-as-surface-secondary hover:bg-as-surface-secondary"
+                }`}
+              >
+                ${value}
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </motion.div>
+  );
+}

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

@@ -0,0 +1,58 @@
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { CryptoPaymentMethodType } from "./CryptoPaymentMethod";
+import { FiatPaymentMethod } from "./FiatPaymentMethod";
+
+interface TabSectionProps {
+  activeTab: "crypto" | "fiat";
+  setActiveTab: (tab: "crypto" | "fiat") => void;
+  setSelectedCryptoPaymentMethod: (method: CryptoPaymentMethodType) => void;
+  setSelectedFiatPaymentMethod: (method: FiatPaymentMethod) => void;
+}
+
+export function TabSection({
+  activeTab,
+  setActiveTab,
+  setSelectedCryptoPaymentMethod,
+  setSelectedFiatPaymentMethod,
+}: TabSectionProps) {
+  return (
+    <div className="tab-section w-full">
+      <div className="bg-as-surface-secondary relative mb-4 grid h-10 grid-cols-2 rounded-xl">
+        <div
+          className={cn(
+            "bg-as-brand absolute bottom-0 left-0 top-0 z-0 rounded-xl transition-transform duration-100",
+            "h-full w-1/2",
+            activeTab === "fiat" ? "translate-x-full" : "translate-x-0",
+          )}
+          style={{ willChange: "transform" }}
+        />
+        <button
+          className={cn(
+            "relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100",
+            activeTab === "crypto" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent",
+          )}
+          onClick={() => {
+            setActiveTab("crypto");
+            setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset payment method when switching to crypto
+            setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE); // Reset fiat payment method when switching to crypto
+          }}
+        >
+          Pay with crypto
+        </button>
+        <button
+          className={cn(
+            "relative z-10 h-full w-full rounded-xl px-3 text-sm font-medium transition-colors duration-100",
+            activeTab === "fiat" ? "text-white" : "text-as-primary/70 hover:bg-as-on-surface-2 bg-transparent",
+          )}
+          onClick={() => {
+            setActiveTab("fiat");
+            setSelectedCryptoPaymentMethod(CryptoPaymentMethodType.NONE); // Reset crypto payment method when switching to fiat
+            setSelectedFiatPaymentMethod(FiatPaymentMethod.NONE); // Reset fiat payment method when switching to fiat
+          }}
+        >
+          Pay with Fiat
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -12,6 +12,7 @@ export { AnySpendNFTButton } from "./common/AnySpendNFTButton";
 
 // Common Components
 export { ChainTokenIcon } from "./common/ChainTokenIcon";
+export { CryptoReceiveSection } from "./common/CryptoReceiveSection";
 export { OrderDetails } from "./common/OrderDetails";
 export { OrderDetailsCollapsible } from "./common/OrderDetailsCollapsible";
 export { OrderHistory } from "./common/OrderHistory";
@@ -19,6 +20,7 @@ export { OrderHistoryItem } from "./common/OrderHistoryItem";
 export { OrderStatus } from "./common/OrderStatus";
 export { OrderToken } from "./common/OrderToken";
 export { OrderTokenAmount } from "./common/OrderTokenAmount";
+export { PaySection } from "./common/PaySection";
 export { RecipientSelection } from "./common/RecipientSelection";
 export { StepProgress } from "./common/StepProgress";
 export { TokenBalance } from "./common/TokenBalance";

package/src/anyspend/react/hooks/useAnyspendFlow.ts

@@ -0,0 +1,226 @@
+import { B3_TOKEN, getDefaultToken, USDC_BASE } from "@b3dotfun/sdk/anyspend";
+import {
+  useAnyspendCreateOnrampOrder,
+  useAnyspendCreateOrder,
+  useAnyspendOrderAndTransactions,
+  useAnyspendQuote,
+  useGeoOnrampOptions,
+} from "@b3dotfun/sdk/anyspend/react";
+import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
+import { useAccountWallet, useProfile } from "@b3dotfun/sdk/global-account/react";
+import { formatTokenAmount, formatUnits } from "@b3dotfun/sdk/shared/utils/number";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { parseUnits } from "viem";
+import { base, mainnet } from "viem/chains";
+import { components } from "../../types/api";
+import { CryptoPaymentMethodType } from "../components/common/CryptoPaymentMethod";
+import { FiatPaymentMethod } from "../components/common/FiatPaymentMethod";
+
+export enum PanelView {
+  MAIN,
+  CRYPTO_PAYMENT_METHOD,
+  FIAT_PAYMENT_METHOD,
+  RECIPIENT_SELECTION,
+  ORDER_DETAILS,
+  LOADING,
+}
+
+interface UseAnyspendFlowProps {
+  paymentType?: "crypto" | "fiat";
+  recipientAddress?: string;
+  loadOrder?: string;
+  isDepositMode?: boolean;
+  onOrderSuccess?: (orderId: string) => void;
+  onTransactionSuccess?: () => void;
+  sourceTokenAddress?: string;
+  sourceTokenChainId?: number;
+}
+
+export function useAnyspendFlow({
+  paymentType = "crypto",
+  recipientAddress,
+  loadOrder,
+  isDepositMode = false,
+  onOrderSuccess,
+  onTransactionSuccess,
+  sourceTokenAddress,
+  sourceTokenChainId,
+}: UseAnyspendFlowProps) {
+  // Panel and order state
+  const [activePanel, setActivePanel] = useState<PanelView>(loadOrder ? PanelView.ORDER_DETAILS : PanelView.MAIN);
+  const [orderId, setOrderId] = useState<string | undefined>(loadOrder);
+  const { orderAndTransactions: oat } = useAnyspendOrderAndTransactions(orderId);
+
+  // Token selection state - use provided sourceTokenChainId if available
+  const [selectedSrcChainId, setSelectedSrcChainId] = useState<number>(
+    sourceTokenChainId || (paymentType === "fiat" ? base.id : mainnet.id),
+  );
+  const [selectedDstChainId, setSelectedDstChainId] = useState<number>(base.id); // Default to Base for cross-chain swaps
+  const defaultSrcToken = paymentType === "fiat" ? USDC_BASE : getDefaultToken(selectedSrcChainId);
+  const [selectedSrcToken, setSelectedSrcToken] = useState<components["schemas"]["Token"]>(defaultSrcToken);
+  const [srcAmount, setSrcAmount] = useState<string>(paymentType === "fiat" ? "5" : "0.1");
+  const [dstAmount, setDstAmount] = useState<string>("");
+  const [isSrcInputDirty, setIsSrcInputDirty] = useState(true);
+
+  // Payment method state
+  const [selectedCryptoPaymentMethod, setSelectedCryptoPaymentMethod] = useState<CryptoPaymentMethodType>(
+    CryptoPaymentMethodType.NONE,
+  );
+  const [selectedFiatPaymentMethod, setSelectedFiatPaymentMethod] = useState<FiatPaymentMethod>(FiatPaymentMethod.NONE);
+
+  // Recipient state
+  const { address: globalAddress } = useAccountWallet();
+  const [selectedRecipientAddress, setSelectedRecipientAddress] = useState<string | undefined>(recipientAddress);
+  const recipientProfile = useProfile({ address: selectedRecipientAddress, fresh: true });
+  const recipientName = recipientProfile.data?.name;
+
+  // Set default recipient address when wallet changes
+  useEffect(() => {
+    if (!selectedRecipientAddress && globalAddress) {
+      setSelectedRecipientAddress(globalAddress);
+    }
+  }, [selectedRecipientAddress, globalAddress]);
+
+  // Fetch specific token when sourceTokenAddress and sourceTokenChainId are provided
+  useEffect(() => {
+    const fetchSourceToken = async () => {
+      if (sourceTokenAddress && sourceTokenChainId) {
+        try {
+          const token = await anyspendService.getToken(sourceTokenChainId, sourceTokenAddress);
+          setSelectedSrcToken(token);
+        } catch (error) {
+          console.error("Failed to fetch source token:", error);
+          toast.error(`Failed to load token ${sourceTokenAddress} on chain ${sourceTokenChainId}`);
+          // Keep the default token on error
+        }
+      }
+    };
+
+    fetchSourceToken();
+  }, [sourceTokenAddress, sourceTokenChainId]);
+
+  // Helper function for onramp vendor mapping
+  const getOnrampVendor = (paymentMethod: FiatPaymentMethod): "coinbase" | "stripe" | "stripe-web2" | undefined => {
+    switch (paymentMethod) {
+      case FiatPaymentMethod.COINBASE_PAY:
+        return "coinbase";
+      case FiatPaymentMethod.STRIPE:
+        return "stripe-web2";
+      default:
+        return undefined;
+    }
+  };
+
+  // Get quote
+  const activeInputAmountInWei = parseUnits(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals).toString();
+  const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError } = useAnyspendQuote({
+    srcChain: paymentType === "fiat" ? base.id : selectedSrcChainId,
+    dstChain: isDepositMode ? base.id : selectedDstChainId, // For deposits, always Base; for swaps, use selected destination
+    srcTokenAddress: paymentType === "fiat" ? USDC_BASE.address : selectedSrcToken.address,
+    dstTokenAddress: isDepositMode ? B3_TOKEN.address : selectedSrcToken.address, // For deposits, always B3
+    type: "swap",
+    tradeType: "EXACT_INPUT",
+    amount: activeInputAmountInWei,
+    onrampVendor: paymentType === "fiat" ? getOnrampVendor(selectedFiatPaymentMethod) : undefined,
+  });
+
+  // Get geo options for fiat
+  const { geoData, coinbaseAvailablePaymentMethods, stripeWeb2Support } = useGeoOnrampOptions(
+    paymentType === "fiat" ? formatUnits(activeInputAmountInWei, USDC_BASE.decimals) : "0",
+  );
+
+  // Update destination amount when quote changes
+  useEffect(() => {
+    if (anyspendQuote?.data?.currencyOut?.amount && anyspendQuote.data.currencyOut.currency?.decimals) {
+      const amount = anyspendQuote.data.currencyOut.amount;
+      const decimals = anyspendQuote.data.currencyOut.currency.decimals;
+      const formattedAmount = formatTokenAmount(BigInt(amount), decimals, 6, false);
+      setDstAmount(formattedAmount);
+    } else {
+      setDstAmount("");
+    }
+  }, [anyspendQuote]);
+
+  // Order creation hooks
+  const { createOrder, isCreatingOrder } = useAnyspendCreateOrder({
+    onSuccess: data => {
+      const newOrderId = data.data.id;
+      setOrderId(newOrderId);
+      setActivePanel(PanelView.ORDER_DETAILS);
+      onOrderSuccess?.(newOrderId);
+    },
+    onError: error => {
+      console.error(error);
+      toast.error("Failed to create order: " + error.message);
+    },
+  });
+
+  const { createOrder: createOnrampOrder, isCreatingOrder: isCreatingOnrampOrder } = useAnyspendCreateOnrampOrder({
+    onSuccess: data => {
+      const newOrderId = data.data.id;
+      setOrderId(newOrderId);
+      setActivePanel(PanelView.ORDER_DETAILS);
+      onOrderSuccess?.(newOrderId);
+    },
+    onError: error => {
+      console.error(error);
+      toast.error("Failed to create order: " + error.message);
+    },
+  });
+
+  // Handle order completion
+  useEffect(() => {
+    if (oat?.data?.order.status === "executed") {
+      console.log("Order executed successfully");
+      onTransactionSuccess?.();
+    }
+  }, [oat?.data?.order.status, onTransactionSuccess]);
+
+  return {
+    // State
+    activePanel,
+    setActivePanel,
+    orderId,
+    setOrderId,
+    oat,
+    // Token state
+    selectedSrcChainId,
+    setSelectedSrcChainId,
+    selectedDstChainId,
+    setSelectedDstChainId,
+    selectedSrcToken,
+    setSelectedSrcToken,
+    srcAmount,
+    setSrcAmount,
+    dstAmount,
+    setDstAmount,
+    isSrcInputDirty,
+    setIsSrcInputDirty,
+    // Payment methods
+    selectedCryptoPaymentMethod,
+    setSelectedCryptoPaymentMethod,
+    selectedFiatPaymentMethod,
+    setSelectedFiatPaymentMethod,
+    // Recipient
+    selectedRecipientAddress,
+    setSelectedRecipientAddress,
+    recipientName,
+    globalAddress,
+    // Quote data
+    anyspendQuote,
+    isLoadingAnyspendQuote,
+    getAnyspendQuoteError,
+    activeInputAmountInWei,
+    // Geo/onramp data
+    geoData,
+    coinbaseAvailablePaymentMethods,
+    stripeWeb2Support,
+    getOnrampVendor,
+    // Order creation
+    createOrder,
+    isCreatingOrder,
+    createOnrampOrder,
+    isCreatingOnrampOrder,
+  };
+}

package/src/global-account/react/components/B3DynamicModal.tsx

@@ -8,6 +8,7 @@ import {
   AnySpendTournament,
   OrderHistory,
 } from "@b3dotfun/sdk/anyspend/react";
+import { AnySpendDepositHype } from "@b3dotfun/sdk/anyspend/react/components/AnyspendDepositHype";
 import { useIsMobile, useModalStore } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
@@ -107,6 +108,8 @@ export function B3DynamicModal() {
         return <AnySpendBondKit {...contentType} />;
       case "linkAccount":
         return <LinkAccount {...contentType} />;
+      case "anySpendDepositHype":
+        return <AnySpendDepositHype {...contentType} mode="modal" />;
       // Add other modal types here
       default:
         return null;

package/src/global-account/react/stores/useModalStore.ts

@@ -305,6 +305,23 @@ export interface LinkAccountModalProps extends BaseModalProps {
   chain: Chain;
 }
 
+export interface AnySpendDepositHypeProps extends BaseModalProps {
+  /** Modal type identifier */
+  type: "anySpendDepositHype";
+  /** Recipient address to receive the tokens */
+  recipientAddress: string;
+  /** Destination token address */
+  sourceTokenAddress?: string;
+  /** Source token chain ID */
+  sourceTokenChainId?: number;
+  /** Payment type - crypto or fiat */
+  paymentType?: "crypto" | "fiat";
+  /** Deposit contract address */
+  depositContractAddress: string;
+  /** Callback function called when the deposit is successful */
+  onSuccess?: () => void;
+}
+
 /**
  * Union type of all possible modal content types
  */
@@ -323,7 +340,8 @@ export type ModalContentType =
   | AnySpendBuySpinProps
   | AnySpendSignatureMintProps
   | AnySpendBondKitProps
-  | LinkAccountModalProps;
+  | LinkAccountModalProps
+  | AnySpendDepositHypeProps;
 // Add other modal types here like: | OtherModalProps | AnotherModalProps
 
 /**