@b3dotfun/sdk 0.0.87 → 0.0.88-alpha.0

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

@@ -0,0 +1,348 @@
+import { ALL_CHAINS, getAvailableChainIds } from "@b3dotfun/sdk/anyspend";
+import { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { Button, toast } from "@b3dotfun/sdk/global-account/react";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { TokenSelector } from "@relayprotocol/relay-kit-ui";
+import { Check, ChevronsUpDown, Copy, Loader2 } from "lucide-react";
+import { QRCodeSVG } from "qrcode.react";
+import { useEffect, useRef, useState } from "react";
+import { useAnyspendOrderAndTransactions } from "../hooks/useAnyspendOrderAndTransactions";
+import { useCreateDepositFirstOrder } from "../hooks/useCreateDepositFirstOrder";
+import { DepositContractConfig } from "./AnySpendDeposit";
+import { ChainTokenIcon } from "./common/ChainTokenIcon";
+import { OrderDetails } from "./common/OrderDetails";
+import { ChainWarningText, WarningText } from "./common/WarningText";
+
+export interface QRDepositProps {
+  /** Display mode */
+  mode?: "modal" | "page";
+  /** The recipient address (user's wallet) */
+  recipientAddress: string;
+  /** The source token to deposit (defaults to ETH on Base) */
+  sourceToken?: components["schemas"]["Token"];
+  /** The source chain ID (defaults to Base) */
+  sourceChainId?: number;
+  /** The destination token to receive */
+  destinationToken: components["schemas"]["Token"];
+  /** The destination chain ID */
+  destinationChainId: number;
+  /** Creator address (optional) */
+  creatorAddress?: string;
+  /** Contract config for custom execution after deposit */
+  depositContractConfig?: DepositContractConfig;
+  /** Callback when back button is clicked */
+  onBack?: () => void;
+  /** Callback when close button is clicked */
+  onClose?: () => void;
+  /** Callback when order is created successfully */
+  onOrderCreated?: (orderId: string) => void;
+  /** Callback when deposit is completed */
+  onSuccess?: (txHash?: string) => void;
+}
+
+// Default source token: ETH on Base
+const DEFAULT_ETH_ON_BASE: components["schemas"]["Token"] = {
+  chainId: 8453,
+  address: "0x0000000000000000000000000000000000000000",
+  symbol: "ETH",
+  name: "Ethereum",
+  decimals: 18,
+  metadata: {
+    logoURI: "https://assets.relay.link/icons/1/light.png",
+  },
+};
+
+/**
+ * A component for displaying QR code deposit functionality.
+ * Creates a deposit_first order on mount and shows a QR code that can be scanned to deposit tokens.
+ * Users can change the source token/chain using the TokenSelector.
+ *
+ * @example
+ * <QRDeposit
+ *   recipientAddress={userAddress}
+ *   destinationToken={usdcArbitrumToken}
+ *   destinationChainId={42161}
+ *   onBack={() => setStep("select-chain")}
+ *   onSuccess={(txHash) => console.log("Deposit complete:", txHash)}
+ * />
+ */
+export function QRDeposit({
+  mode = "modal",
+  recipientAddress,
+  sourceToken: sourceTokenProp,
+  sourceChainId: sourceChainIdProp,
+  destinationToken,
+  destinationChainId,
+  creatorAddress,
+  depositContractConfig,
+  onBack,
+  onClose,
+  onOrderCreated,
+  onSuccess,
+}: QRDepositProps) {
+  const [copied, setCopied] = useState(false);
+  const [orderId, setOrderId] = useState<string | undefined>();
+  const [globalAddress, setGlobalAddress] = useState<string | undefined>();
+  const orderCreatedRef = useRef(false);
+  const onSuccessCalled = useRef(false);
+
+  // Source token/chain as state (can be changed by user)
+  const [sourceChainId, setSourceChainId] = useState(sourceChainIdProp ?? 8453);
+  const [sourceToken, setSourceToken] = useState<components["schemas"]["Token"]>(
+    sourceTokenProp ?? DEFAULT_ETH_ON_BASE,
+  );
+
+  // Handle token selection from TokenSelector
+  const handleTokenSelect = (newToken: any) => {
+    const token: components["schemas"]["Token"] = {
+      address: newToken.address,
+      chainId: newToken.chainId,
+      decimals: newToken.decimals,
+      metadata: { logoURI: newToken.logoURI },
+      name: newToken.name,
+      symbol: newToken.symbol,
+    };
+
+    // Reset order state when token changes
+    setOrderId(undefined);
+    setGlobalAddress(undefined);
+    orderCreatedRef.current = false;
+
+    // Update token and chain
+    setSourceChainId(newToken.chainId);
+    setSourceToken(token);
+  };
+
+  // Create order hook
+  const { createOrder, isCreatingOrder } = useCreateDepositFirstOrder({
+    onSuccess: data => {
+      const newOrderId = data.data.id;
+      const newGlobalAddress = data.data.globalAddress;
+      setOrderId(newOrderId);
+      setGlobalAddress(newGlobalAddress);
+      onOrderCreated?.(newOrderId);
+    },
+    onError: error => {
+      console.error("Failed to create deposit order:", error);
+      toast.error("Failed to create deposit order: " + error.message);
+    },
+  });
+
+  // Fetch order status
+  const { orderAndTransactions: oat } = useAnyspendOrderAndTransactions(orderId);
+
+  // Create order on mount
+  useEffect(() => {
+    if (orderCreatedRef.current) return;
+    orderCreatedRef.current = true;
+
+    createOrder({
+      recipientAddress,
+      srcChain: sourceChainId,
+      dstChain: destinationChainId,
+      srcToken: sourceToken,
+      dstToken: destinationToken,
+      creatorAddress,
+      contractConfig: depositContractConfig,
+    });
+  }, [
+    recipientAddress,
+    sourceChainId,
+    destinationChainId,
+    sourceToken,
+    destinationToken,
+    creatorAddress,
+    depositContractConfig,
+    createOrder,
+  ]);
+
+  // Call onSuccess when order is executed
+  useEffect(() => {
+    if (oat?.data?.order.status === "executed" && !onSuccessCalled.current) {
+      const txHash = oat?.data?.executeTx?.txHash;
+      onSuccess?.(txHash);
+      onSuccessCalled.current = true;
+    }
+  }, [oat?.data?.order.status, oat?.data?.executeTx?.txHash, onSuccess]);
+
+  // Reset onSuccess flag when orderId changes
+  useEffect(() => {
+    onSuccessCalled.current = false;
+  }, [orderId]);
+
+  const displayAddress = globalAddress || recipientAddress;
+
+  const handleCopyAddress = async () => {
+    if (displayAddress) {
+      await navigator.clipboard.writeText(displayAddress);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const handleBack = () => {
+    setCopied(false);
+    onBack?.();
+  };
+
+  const handleClose = () => {
+    setCopied(false);
+    onClose?.();
+  };
+
+  // Show order details if order has deposits or is being processed
+  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",
+        )}
+      >
+        <div className="anyspend-qr-order-details-content relative flex flex-col gap-4">
+          <OrderDetails
+            mode={mode}
+            order={oat.data.order}
+            depositTxs={oat.data.depositTxs}
+            relayTxs={oat.data.relayTxs}
+            executeTx={oat.data.executeTx}
+            refundTxs={oat.data.refundTxs}
+            onBack={handleBack}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  // Show loading state while creating order (but not if we already have an orderId)
+  if (isCreatingOrder && !orderId) {
+    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",
+        )}
+      >
+        <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>
+      </div>
+    );
+  }
+
+  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",
+      )}
+    >
+      <div className="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">
+            <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>
+          {onClose ? (
+            <button onClick={handleClose} className="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>
+            </button>
+          ) : (
+            <div className="w-5" />
+          )}
+        </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>
+          <TokenSelector
+            chainIdsFilter={getAvailableChainIds("from")}
+            context="from"
+            fromChainWalletVMSupported={true}
+            isValidAddress={true}
+            lockedChainIds={getAvailableChainIds("from")}
+            multiWalletSupportEnabled={true}
+            onAnalyticEvent={undefined}
+            setToken={handleTokenSelect}
+            supportedWalletVMs={["evm"]}
+            token={undefined}
+            trigger={
+              <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"
+              >
+                <div className="flex items-center gap-2">
+                  {sourceToken.metadata?.logoURI ? (
+                    <ChainTokenIcon
+                      chainUrl={ALL_CHAINS[sourceChainId]?.logoUrl}
+                      tokenUrl={sourceToken.metadata.logoURI}
+                      className="h-8 min-h-8 w-8 min-w-8"
+                    />
+                  ) : (
+                    <div className="h-8 w-8 rounded-full bg-gray-700" />
+                  )}
+                  <div className="flex flex-col items-start gap-0">
+                    <div className="text-as-primary font-semibold">{sourceToken.symbol}</div>
+                    <div className="text-as-primary/70 text-xs">{ALL_CHAINS[sourceChainId]?.name ?? "Unknown"}</div>
+                  </div>
+                </div>
+                <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-70" />
+              </Button>
+            }
+          />
+        </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">
+          {/* 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">
+              <QRCodeSVG value={displayAddress} size={120} level="M" marginSize={0} />
+            </div>
+            <span className="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">
+                {displayAddress}
+              </span>
+              <button
+                onClick={handleCopyAddress}
+                className="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>
+            </div>
+          </div>
+        </div>
+
+        {/* Warnings */}
+        <ChainWarningText chainId={destinationChainId} />
+        <WarningText>
+          Only send {sourceToken.symbol} on {ALL_CHAINS[sourceChainId]?.name ?? "the specified chain"}. Other tokens
+          will not be converted.
+        </WarningText>
+
+        {/* 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"
+        >
+          Copy deposit address
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -90,6 +90,7 @@ function getOrderSuccessText({
   let actionText = "";
   switch (order.type) {
     case "swap":
+    case "deposit_first":
       actionText = `sent ${formattedActualDstAmount || "--"} ${dstToken.symbol}`;
       return `Successfully ${actionText} to ${recipient}`;
     case "mint_nft":
@@ -247,6 +248,7 @@ export const OrderDetails = memo(function OrderDetails({
   const { data: walletClient } = useWalletClient();
   const [txHash, setTxHash] = useState<`0x${string}` | undefined>();
   const [showQRCode, setShowQRCode] = useState(false);
+  const [orderDetailsOpen, setOrderDetailsOpen] = useState(true);
   const { isLoading: txLoading, isSuccess: txSuccess } = useWaitForTransactionReceipt({ hash: txHash });
 
   const { switchChainAndExecuteWithEOA, switchChainAndExecute, isSwitchingOrExecuting } =
@@ -443,7 +445,8 @@ export const OrderDetails = memo(function OrderDetails({
     order.type === "mint_nft" ||
     order.type === "join_tournament" ||
     order.type === "fund_tournament" ||
-    order.type === "custom"
+    order.type === "custom" ||
+    order.type === "deposit_first"
       ? "0"
       : order.payload.expectedDstAmount.toString();
   const formattedExpectedDstAmount = formatTokenAmount(BigInt(expectedDstAmount), dstToken.decimals);
@@ -465,6 +468,8 @@ export const OrderDetails = memo(function OrderDetails({
           recipientName={recipientName}
           formattedExpectedDstAmount={formattedExpectedDstAmount}
           points={points}
+          isOpen={orderDetailsOpen}
+          onOpenChange={setOrderDetailsOpen}
         />
         <Accordion type="single" collapsible className="order-details-accordion w-full">
           <AccordionItem value="refund-details" className="order-details-refund-item">
@@ -544,6 +549,8 @@ export const OrderDetails = memo(function OrderDetails({
           recipientName={recipientName}
           formattedExpectedDstAmount={formattedExpectedDstAmount}
           points={points}
+          isOpen={orderDetailsOpen}
+          onOpenChange={setOrderDetailsOpen}
         />
         <Accordion type="single" collapsible className="order-details-accordion w-full">
           <AccordionItem value="execute-details" className="order-details-execute-item">
@@ -577,7 +584,7 @@ export const OrderDetails = memo(function OrderDetails({
                   ? relayTxs.map(relayTx => (
                       <TransactionDetails
                         key={relayTx.txHash}
-                        title="Processed Transaction"
+                        title="Processed Swap"
                         chainId={relayTx.chain}
                         tx={relayTx}
                         delay={0.5}
@@ -588,7 +595,7 @@ export const OrderDetails = memo(function OrderDetails({
 
                 <TransactionDetails
                   title={
-                    order.type === "swap"
+                    order.type === "swap" || order.type === "deposit_first"
                       ? "Processed Swap"
                       : order.type === "mint_nft"
                         ? "Minted NFT"
@@ -672,6 +679,8 @@ export const OrderDetails = memo(function OrderDetails({
           recipientName={recipientName}
           formattedExpectedDstAmount={formattedExpectedDstAmount}
           points={points}
+          isOpen={orderDetailsOpen}
+          onOpenChange={setOrderDetailsOpen}
         />
         <Accordion type="single" collapsible className="order-details-accordion w-full">
           <AccordionItem value="more-details" className="order-details-more-item">
@@ -703,7 +712,12 @@ export const OrderDetails = memo(function OrderDetails({
                   : null}
                 {relayTxs.map(relayTx => (
                   <TransactionDetails
-                    title="Processed Transaction"
+                    key={relayTx.txHash}
+                    title={
+                      relayTx.chain === order.srcChain
+                        ? `Process swap on ${getChainName(relayTx.chain)}`
+                        : `Received on ${getChainName(relayTx.chain)}`
+                    }
                     chainId={relayTx.chain}
                     isProcessing={false}
                     tx={relayTx}
@@ -713,8 +727,8 @@ export const OrderDetails = memo(function OrderDetails({
                 {order.status === "executing" && (
                   <TransactionDetails
                     title={
-                      order.type === "swap" || order.type === "x402_swap"
-                        ? "Processing Swap"
+                      order.type === "swap" || order.type === "x402_swap" || order.type === "deposit_first"
+                        ? "Processing swap"
                         : order.type === "mint_nft"
                           ? "Minting NFT"
                           : order.type === "join_tournament"
@@ -804,6 +818,8 @@ export const OrderDetails = memo(function OrderDetails({
           recipientName={recipientName}
           formattedExpectedDstAmount={formattedExpectedDstAmount}
           points={points}
+          isOpen={orderDetailsOpen}
+          onOpenChange={setOrderDetailsOpen}
         />
         <Accordion type="single" collapsible className="order-details-accordion w-full">
           <AccordionItem value="deposit-details" className="order-details-deposit-item">
@@ -842,8 +858,8 @@ export const OrderDetails = memo(function OrderDetails({
                 ) : depositEnoughAmount ? (
                   <TransactionDetails
                     title={
-                      order.type === "swap"
-                        ? "Processing Swap"
+                      order.type === "swap" || order.type === "deposit_first"
+                        ? "Processing swap"
                         : order.type === "mint_nft"
                           ? "Minting NFT"
                           : order.type === "join_tournament"
@@ -1085,6 +1101,8 @@ export const OrderDetails = memo(function OrderDetails({
           recipientName={recipientName}
           formattedExpectedDstAmount={formattedExpectedDstAmount}
           points={points}
+          isOpen={orderDetailsOpen}
+          onOpenChange={setOrderDetailsOpen}
         />
       )}
 

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

@@ -29,6 +29,8 @@ interface OrderDetailsCollapsibleProps {
   showTotal?: boolean;
   totalAmount?: string;
   points?: number;
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
 }
 
 export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
@@ -42,15 +44,22 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
   showTotal = false,
   totalAmount,
   points,
+  isOpen,
+  onOpenChange,
 }: OrderDetailsCollapsibleProps) {
-  const [showOrderDetails, setShowOrderDetails] = useState(true);
+  const [internalOpen, setInternalOpen] = useState(true);
+
+  // Use controlled mode if isOpen is provided, otherwise use internal state
+  const showOrderDetails = isOpen !== undefined ? isOpen : internalOpen;
+  const setShowOrderDetails = onOpenChange || setInternalOpen;
 
   // Calculate expected amount if not provided
   const expectedDstAmount =
     order.type === "mint_nft" ||
     order.type === "join_tournament" ||
     order.type === "fund_tournament" ||
-    order.type === "custom"
+    order.type === "custom" ||
+    order.type === "deposit_first"
       ? "0"
       : order.payload.expectedDstAmount.toString();
 
@@ -95,9 +104,12 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
             <div className="order-details-divider divider w-full" />
 
             {/* Expected Amount/Action Section */}
-            <div className="order-details-expected-section flex w-full items-center justify-between gap-2">
-              <div className="order-details-expected-label text-as-tertiarry">
-                {order.type === "swap" || order.type === "mint_nft" || order.type === "hype_duel"
+            <div className="order-details-expected-section flex w-full items-start justify-between gap-2">
+              <div className="order-details-expected-label text-as-tertiarry shrink-0">
+                {order.type === "swap" ||
+                order.type === "deposit_first" ||
+                order.type === "mint_nft" ||
+                order.type === "hype_duel"
                   ? "Expected to receive"
                   : order.type === "join_tournament"
                     ? "Join tournament"
@@ -110,9 +122,9 @@ export const OrderDetailsCollapsible = memo(function OrderDetailsCollapsible({
                         : ""}
               </div>
 
-              <div className="order-details-expected-value flex items-end gap-2">
-                {order.type === "swap" ? (
-                  `~${finalFormattedExpectedDstAmount} ${dstToken.symbol}`
+              <div className="order-details-expected-value flex flex-wrap items-center justify-end gap-2">
+                {order.type === "swap" || order.type === "deposit_first" ? (
+                  <span className="order-details-amount-text">{`~${finalFormattedExpectedDstAmount} ${dstToken.symbol}`}</span>
                 ) : order.type === "mint_nft" ? (
                   <div className="order-details-nft-info flex items-center gap-2">
                     <img src={nft?.imageUrl} alt={nft?.name || "NFT"} className="order-details-nft-image h-5 w-5" />

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

@@ -13,7 +13,7 @@ export const OrderStatus = memo(function OrderStatus({
   order: components["schemas"]["Order"];
   selectedCryptoPaymentMethod?: CryptoPaymentMethodType;
 }) {
-  const isComplete = order.status === "executed";
+  const showCheck = order.status === "executed" || order.status === "quoting_after_deposit";
   const { text, status: displayStatus, description } = getStatusDisplay(order);
   const searchParams = useSearchParams();
   const cryptoPaymentMethod = selectedCryptoPaymentMethod || searchParams.get("cryptoPaymentMethod");
@@ -51,7 +51,7 @@ export const OrderStatus = memo(function OrderStatus({
 
   return (
     <div className="flex items-center justify-center gap-2">
-      {isComplete ? (
+      {showCheck ? (
         <div className="flex flex-col items-center">
           <div className={`bg-as-success-secondary relative flex h-10 w-10 items-center justify-center rounded-full`}>
             <Check className="text-as-content-icon-success h-6 w-6" />

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

@@ -0,0 +1,52 @@
+import { HYPERLIQUID_CHAIN_ID } from "@b3dotfun/sdk/anyspend";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+
+export interface WarningTextProps {
+  /** The warning message content */
+  children: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * A generic warning text component with consistent styling.
+ *
+ * @example
+ * <WarningText>
+ *   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 interface ChainWarningTextProps {
+  /** The chain ID to display warning for */
+  chainId: number;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * A chain-aware warning text component that displays chain-specific warnings.
+ * Returns null if there's no warning for the given chain.
+ *
+ * @example
+ * <ChainWarningText chainId={HYPERLIQUID_CHAIN_ID} />
+ *
+ * @example
+ * <ChainWarningText chainId={destinationChainId} className="mt-4" />
+ */
+export function ChainWarningText({ chainId, className }: ChainWarningTextProps) {
+  // Chain-specific warning messages
+  if (chainId === HYPERLIQUID_CHAIN_ID) {
+    return (
+      <WarningText className={className}>
+        Minimum deposit amount: <b>$1</b>
+      </WarningText>
+    );
+  }
+
+  // No warning for this chain
+  return null;
+}

package/src/anyspend/react/components/icons/CreditCardIcon.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+interface CreditCardIconProps {
+  className?: string;
+}
+
+export const CreditCardIcon: React.FC<CreditCardIconProps> = ({ className }) => (
+  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path
+      d="M8 0.5H32C36.1421 0.5 39.5 3.85786 39.5 8V32C39.5 36.1421 36.1421 39.5 32 39.5H8C3.85786 39.5 0.5 36.1421 0.5 32V8C0.5 3.85786 3.85786 0.5 8 0.5Z"
+      fill="#F4F4F5"
+    />
+    <path
+      d="M8 0.5H32C36.1421 0.5 39.5 3.85786 39.5 8V32C39.5 36.1421 36.1421 39.5 32 39.5H8C3.85786 39.5 0.5 36.1421 0.5 32V8C0.5 3.85786 3.85786 0.5 8 0.5Z"
+      stroke="#E4E4E7"
+    />
+    <path
+      d="M30 18H10M19 22H14M10 16.2L10 23.8C10 24.9201 10 25.4802 10.218 25.908C10.4097 26.2843 10.7157 26.5903 11.092 26.782C11.5198 27 12.0799 27 13.2 27L26.8 27C27.9201 27 28.4802 27 28.908 26.782C29.2843 26.5903 29.5903 26.2843 29.782 25.908C30 25.4802 30 24.9201 30 23.8V16.2C30 15.0799 30 14.5198 29.782 14.092C29.5903 13.7157 29.2843 13.4097 28.908 13.218C28.4802 13 27.9201 13 26.8 13L13.2 13C12.0799 13 11.5198 13 11.092 13.218C10.7157 13.4097 10.4097 13.7157 10.218 14.092C10 14.5198 10 15.0799 10 16.2Z"
+      stroke="#51525C"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/anyspend/react/components/icons/QrCodeIcon.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+interface QrCodeIconProps {
+  className?: string;
+}
+
+export const QrCodeIcon: React.FC<QrCodeIconProps> = ({ className }) => (
+  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path
+      d="M8 0.5H32C36.1421 0.5 39.5 3.85786 39.5 8V32C39.5 36.1421 36.1421 39.5 32 39.5H8C3.85786 39.5 0.5 36.1421 0.5 32V8C0.5 3.85786 3.85786 0.5 8 0.5Z"
+      fill="#F4F4F5"
+    />
+    <path
+      d="M8 0.5H32C36.1421 0.5 39.5 3.85786 39.5 8V32C39.5 36.1421 36.1421 39.5 32 39.5H8C3.85786 39.5 0.5 36.1421 0.5 32V8C0.5 3.85786 3.85786 0.5 8 0.5Z"
+      stroke="#E4E4E7"
+    />
+    <path
+      d="M15 20H20V25M11.01 20H11M16.01 25H16M20.01 29H20M29.01 20H29M11 25H12.5M23.5 20H25.5M11 29H16M20 10V16M25.6 29H27.4C27.9601 29 28.2401 29 28.454 28.891C28.6422 28.7951 28.7951 28.6422 28.891 28.454C29 28.2401 29 27.9601 29 27.4V25.6C29 25.0399 29 24.7599 28.891 24.546C28.7951 24.3578 28.6422 24.2049 28.454 24.109C28.2401 24 27.9601 24 27.4 24H25.6C25.0399 24 24.7599 24 24.546 24.109C24.3578 24.2049 24.2049 24.3578 24.109 24.546C24 24.7599 24 25.0399 24 25.6V27.4C24 27.9601 24 28.2401 24.109 28.454C24.2049 28.6422 24.3578 28.7951 24.546 28.891C24.7599 29 25.0399 29 25.6 29ZM25.6 16H27.4C27.9601 16 28.2401 16 28.454 15.891C28.6422 15.7951 28.7951 15.6422 28.891 15.454C29 15.2401 29 14.9601 29 14.4V12.6C29 12.0399 29 11.7599 28.891 11.546C28.7951 11.3578 28.6422 11.2049 28.454 11.109C28.2401 11 27.9601 11 27.4 11H25.6C25.0399 11 24.7599 11 24.546 11.109C24.3578 11.2049 24.2049 11.3578 24.109 11.546C24 11.7599 24 12.0399 24 12.6V14.4C24 14.9601 24 15.2401 24.109 15.454C24.2049 15.6422 24.3578 15.7951 24.546 15.891C24.7599 16 25.0399 16 25.6 16ZM12.6 16H14.4C14.9601 16 15.2401 16 15.454 15.891C15.6422 15.7951 15.7951 15.6422 15.891 15.454C16 15.2401 16 14.9601 16 14.4V12.6C16 12.0399 16 11.7599 15.891 11.546C15.7951 11.3578 15.6422 11.2049 15.454 11.109C15.2401 11 14.9601 11 14.4 11H12.6C12.0399 11 11.7599 11 11.546 11.109C11.3578 11.2049 11.2049 11.3578 11.109 11.546C11 11.7599 11 12.0399 11 12.6V14.4C11 14.9601 11 15.2401 11.109 15.454C11.2049 15.6422 11.3578 15.7951 11.546 15.891C11.7599 16 12.0399 16 12.6 16Z"
+      stroke="#51525C"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/anyspend/react/components/icons/credit-card.svg

@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0.5H32C36.1421 0.5 39.5 3.85786 39.5 8V32C39.5 36.1421 36.1421 39.5 32 39.5H8C3.85786 39.5 0.5 36.1421 0.5 32V8C0.5 3.85786 3.85786 0.5 8 0.5Z" fill="#F4F4F5"/>
+<path d="M8 0.5H32C36.1421 0.5 39.5 3.85786 39.5 8V32C39.5 36.1421 36.1421 39.5 32 39.5H8C3.85786 39.5 0.5 36.1421 0.5 32V8C0.5 3.85786 3.85786 0.5 8 0.5Z" stroke="#E4E4E7"/>
+<path d="M30 18H10M19 22H14M10 16.2L10 23.8C10 24.9201 10 25.4802 10.218 25.908C10.4097 26.2843 10.7157 26.5903 11.092 26.782C11.5198 27 12.0799 27 13.2 27L26.8 27C27.9201 27 28.4802 27 28.908 26.782C29.2843 26.5903 29.5903 26.2843 29.782 25.908C30 25.4802 30 24.9201 30 23.8V16.2C30 15.0799 30 14.5198 29.782 14.092C29.5903 13.7157 29.2843 13.4097 28.908 13.218C28.4802 13 27.9201 13 26.8 13L13.2 13C12.0799 13 11.5198 13 11.092 13.218C10.7157 13.4097 10.4097 13.7157 10.218 14.092C10 14.5198 10 15.0799 10 16.2Z" stroke="#51525C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>