Failed to load Arbitrum chain configuration
;
+ }
+
+ if (!destinationToken) {
+ return Could not find USDC token for Arbitrum
;
+ }
+
+ if (!effectiveAddress) {
+ return Connect wallet to deposit
;
+ }
+
+ if (!depositContractConfig) {
+ return Loading deposit configuration...
;
+ }
+
+ // Custom header for Orderly deposit
+ const defaultHeader = () => (
+
+
+ );
+
+ return (
+
+
+ Deposit to Orderly
+Swap any token and deposit to Arbitrum
+
+ <>{header} : defaultHeader}
+ />
+
+ );
+}
+
+export default AnySpendOrderlyDeposit;
diff --git a/packages/sdk/src/anyspend/react/components/OrderlyDeposit.tsx b/packages/sdk/src/anyspend/react/components/OrderlyDeposit.tsx
new file mode 100644
index 00000000..f233392f
--- /dev/null
+++ b/packages/sdk/src/anyspend/react/components/OrderlyDeposit.tsx
@@ -0,0 +1,351 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useAccount, useChainId, useSendTransaction, useSwitchChain, useWaitForTransactionReceipt } from "wagmi";
+import { encodeFunctionData, erc20Abi, parseUnits } from "viem";
+import { Loader2, CheckCircle2, AlertCircle } from "lucide-react";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { ShinyButton, StyleRoot } from "@b3dotfun/sdk/global-account/react";
+
+import {
+ ORDERLY_VAULT_ABI,
+ ORDERLY_HASHES,
+ computeOrderlyAccountId,
+ computeBrokerHash,
+ getOrderlyChainConfig,
+ isOrderlyChainSupported,
+} from "../../constants/orderly";
+import { useOrderlyDepositFee } from "../hooks/useOrderlyDepositFee";
+
+export interface OrderlyDepositProps {
+ /** The broker ID for Orderly Network */
+ brokerId: string;
+ /** The chain ID to deposit on */
+ chainId: number;
+ /** The amount to deposit in USDC (e.g., "100" for $100) */
+ amount: string;
+ /** The beneficiary wallet address (defaults to connected wallet) */
+ beneficiaryAddress?: `0x${string}`;
+ /** Callback when deposit succeeds */
+ onSuccess?: (txHash: string) => void;
+ /** Callback when deposit fails */
+ onError?: (error: Error) => void;
+ /** Custom button text */
+ buttonText?: string;
+ /** Whether to show the fee breakdown */
+ showFeeBreakdown?: boolean;
+ /** Custom class name for the container */
+ className?: string;
+}
+
+type DepositState = "idle" | "switching-chain" | "approving" | "depositing" | "success" | "error";
+
+/**
+ * OrderlyDeposit - Single-screen deposit component for Orderly Network
+ *
+ * Receives chain and amount as props, fetches deposit fee automatically,
+ * and executes the deposit in one click.
+ *
+ * @example
+ * ```tsx
+ * Chain {chainId} is not supported by Orderly
;
+ }
+
+ if (!effectiveAddress) {
+ return Connect wallet to deposit
;
+ }
+
+ const isProcessing = depositState !== "idle" && depositState !== "success" && depositState !== "error";
+
+ return (
+
+ {/* Fee breakdown */}
+ {showFeeBreakdown && (
+
+
+
+
+
+ )}
+
+ {/* Success state */}
+ {depositState === "success" && txHash && (
+
+
+
+ Amount
+
+ {amount} {chainConfig?.usdcSymbol}
+
+
+
+ Network
+
+
+ {chainConfig?.logoUri && 
}
+ {chainConfig?.name}
+
+
+ Deposit Fee
+
+ {isFeeLoading ? (
+
+
+
+ )}
+
+ {/* Error state */}
+ {depositState === "error" && errorMessage && (
+
+
+ Deposit successful!
+ + View transaction + +
+
+ )}
+
+ {/* Deposit button */}
+ {errorMessage}
+
+ {isProcessing &&
+