@rhinestone/deposit-modal 0.1.19 → 0.1.21

package/README.md

@@ -124,6 +124,28 @@ import "@rhinestone/deposit-modal/styles.css";
 />
 ```
 
+### Withdrawal flow
+
+Prerequisites:
+- A 1/1 Safe (single owner) with ERC20 token balance on a supported source chain
+- The connected wallet must be the sole owner of the Safe
+
+End-to-end steps:
+1. User connects wallet (must be the Safe owner)
+2. Modal creates a Rhinestone smart account and signs session authorization
+3. Modal registers the smart account with the backend (`/register`)
+4. User enters withdrawal amount
+5. User signs an EIP-712 `execTransaction` authorizing the ERC20 transfer from the Safe to the smart account
+6. Modal calls `/process/:address` to trigger the bridge intent
+7. Modal polls `/status/:address` for webhook events until the bridge completes on the destination chain
+
+To test with the demo configurator:
+1. Switch flow to "Withdraw"
+2. Enter the Safe address
+3. Select the source chain/token matching the Safe's holdings
+4. Select the destination chain/token
+5. The connected wallet (Privy embedded or Reown) must be the Safe's sole owner
+
 ### Additional Props (beyond shared DepositModal props)
 
 | Prop | Type | Required | Description |
@@ -156,7 +178,7 @@ Also supports `onReady`, `onConnected`, and `onError` (same as DepositModal).
 
 **Branding**: `logoUrl`, `title`
 
-**UI Config**: `showLogo`, `showStepper`, `showBackButton`, `balanceTitle`, `maxDepositUsd`
+**UI Config**: `showLogo`, `showStepper`, `showBackButton`, `balanceTitle`, `maxDepositUsd`, `minDepositUsd`
 
 ## Utility Exports
 

package/dist/index.cjs

@@ -1937,6 +1937,12 @@ function AmountStep({
       );
       return;
     }
+    if (uiConfig?.minDepositUsd && usdValue < uiConfig.minDepositUsd) {
+      setError(
+        `Minimum deposit is ${currencyFormatter.format(uiConfig.minDepositUsd)}`
+      );
+      return;
+    }
     if (tokenPriceUsd === null || tokenPriceUsd === 0) {
       setError("Unable to determine token price");
       return;
@@ -2210,6 +2216,7 @@ function ConfirmStep({
   walletClient,
   address,
   smartAccount,
+  recipient,
   asset,
   amount,
   balance,
@@ -2305,10 +2312,11 @@ function ConfirmStep({
       if (!account || !chain) {
         throw new Error("Wallet not properly connected");
       }
+      const transferTo = sameRoute ? recipient : smartAccount;
       const hash = isNativeAsset(asset) ? await walletClient.sendTransaction({
         account,
         chain,
-        to: smartAccount,
+        to: transferTo,
         value: amountUnits
       }) : await walletClient.writeContract({
         account,
@@ -2316,7 +2324,7 @@ function ConfirmStep({
         address: asset.token,
         abi: import_viem5.erc20Abi,
         functionName: "transfer",
-        args: [smartAccount, amountUnits]
+        args: [transferTo, amountUnits]
       });
       onDepositSubmitted?.(hash, asset.chainId, amountUnits.toString());
       onConfirm(hash, asset.chainId, amountUnits.toString(), asset.token);
@@ -2525,8 +2533,8 @@ function getEventTxHash(event) {
     return asString(event.data?.transactionHash);
   }
   if (event.type === "bridge-started" || event.type === "bridge-complete") {
-    const source = isRecord(event.data?.source) ? event.data.source : void 0;
-    return asString(source?.transactionHash);
+    const deposit = isRecord(event.data?.deposit) ? event.data.deposit : void 0;
+    return asString(deposit?.transactionHash);
   }
   if (event.type === "bridge-failed" || event.type === "error") {
     const deposit = isRecord(event.data?.deposit) ? event.data.deposit : void 0;
@@ -2574,19 +2582,29 @@ function ProcessingStep({
   amount,
   waitForFinalTx,
   service,
+  directTransfer,
   flowLabel = "deposit",
+  debug,
   onClose,
   onNewDeposit,
   onDepositComplete,
   onDepositFailed,
   onError
 }) {
-  const [state, setState] = (0, import_react6.useState)({ type: "processing" });
+  const [state, setState] = (0, import_react6.useState)(
+    directTransfer ? { type: "complete" } : { type: "processing" }
+  );
   const [elapsedSeconds, setElapsedSeconds] = (0, import_react6.useState)(0);
   const startTimeRef = (0, import_react6.useRef)(Date.now());
   const intervalRef = (0, import_react6.useRef)(null);
-  const sameChainAndToken = targetChain === sourceChain && targetToken.toLowerCase() === sourceToken.toLowerCase();
   (0, import_react6.useEffect)(() => {
+    if (directTransfer) {
+      onDepositComplete?.(txHash);
+      return;
+    }
+  }, [directTransfer, txHash, onDepositComplete]);
+  (0, import_react6.useEffect)(() => {
+    if (directTransfer) return;
     startTimeRef.current = Date.now();
     intervalRef.current = setInterval(() => {
       setElapsedSeconds(Math.floor((Date.now() - startTimeRef.current) / 1e3));
@@ -2594,7 +2612,7 @@ function ProcessingStep({
     return () => {
       if (intervalRef.current) clearInterval(intervalRef.current);
     };
-  }, []);
+  }, [directTransfer]);
   (0, import_react6.useEffect)(() => {
     if (state.type === "complete" || state.type === "failed" || state.type === "error") {
       if (intervalRef.current) {
@@ -2607,6 +2625,7 @@ function ProcessingStep({
   const pollTimeoutRef = (0, import_react6.useRef)(null);
   const processTimeoutRef = (0, import_react6.useRef)(null);
   (0, import_react6.useEffect)(() => {
+    if (directTransfer) return;
     if (state.type !== "processing") {
       pollIntervalRef.current = INITIAL_POLL_INTERVAL;
       return;
@@ -2618,6 +2637,15 @@ function ProcessingStep({
         const lastEvent2 = data.lastEvent;
         const eventMatchesTx = isEventForTx(lastEvent2, txHash);
         const eventForCurrentTx = eventMatchesTx ? lastEvent2 : void 0;
+        if (debug && lastEvent2) {
+          const eventData = lastEvent2.data;
+          console.log("[deposit-modal] status poll", {
+            type: lastEvent2.type,
+            matchesTx: eventMatchesTx,
+            intentId: eventData?.intentId,
+            data: eventData
+          });
+        }
         if (!isMounted) return;
         if (eventForCurrentTx?.type === "bridge-complete") {
           setState({ type: "complete", lastEvent: eventForCurrentTx });
@@ -2630,11 +2658,6 @@ function ProcessingStep({
           onDepositComplete?.(txHash);
           return;
         }
-        if (eventForCurrentTx?.type === "deposit-received" && sameChainAndToken) {
-          setState({ type: "complete", lastEvent: eventForCurrentTx });
-          onDepositComplete?.(txHash);
-          return;
-        }
         if (eventForCurrentTx?.type === "bridge-failed") {
           const formatted = formatBridgeFailedMessage(eventForCurrentTx);
           setState({
@@ -2679,16 +2702,17 @@ function ProcessingStep({
       }
     };
   }, [
+    directTransfer,
     state.type,
     smartAccount,
     txHash,
     service,
-    sameChainAndToken,
     waitForFinalTx,
     onDepositComplete,
     onDepositFailed
   ]);
   (0, import_react6.useEffect)(() => {
+    if (directTransfer) return;
     if (state.type !== "processing") {
       if (processTimeoutRef.current) {
         clearTimeout(processTimeoutRef.current);
@@ -2707,7 +2731,7 @@ function ProcessingStep({
         processTimeoutRef.current = null;
       }
     };
-  }, [state.type, onError]);
+  }, [directTransfer, state.type, onError]);
   const isError = state.type === "error" || state.type === "failed";
   const isComplete = state.type === "complete";
   const isProcessing = state.type === "processing";
@@ -2761,7 +2785,7 @@ function ProcessingStep({
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rs-success-title", children: isEarlyComplete ? `${flowCapitalized} confirmed` : `${flowCapitalized} successful` }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rs-success-subtitle", children: isEarlyComplete ? "Your transfer has been confirmed and funds will arrive shortly." : `Your funds have been successfully bridged.` })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "rs-success-subtitle", children: directTransfer ? "Your transfer is complete." : isEarlyComplete ? "Your transfer has been confirmed and funds will arrive shortly." : "Your funds have been successfully bridged." })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rs-card", children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "rs-card-row", children: [
@@ -3544,6 +3568,9 @@ var init_public_client = __esm({
 });
 
 // src/DepositFlow.tsx
+function isSameRoute(sourceChain, sourceToken, targetChain, targetToken) {
+  return sourceChain === targetChain && sourceToken.toLowerCase() === targetToken.toLowerCase();
+}
 function DepositFlow({
   dappWalletClient,
   dappPublicClient,
@@ -3572,7 +3599,8 @@ function DepositFlow({
   onDepositSubmitted,
   onDepositComplete,
   onDepositFailed,
-  onError
+  onError,
+  debug
 }) {
   const [step, setStep] = (0, import_react9.useState)({ type: "setup" });
   const [flowMode, setFlowMode] = (0, import_react9.useState)(null);
@@ -3743,12 +3771,13 @@ function DepositFlow({
           txHash,
           sourceChain: chainId,
           sourceToken: token,
-          amount
+          amount,
+          directTransfer: isSameRoute(chainId, token, targetChain, targetToken)
         };
       });
       onDepositSubmitted?.({ txHash, sourceChain: chainId, amount });
     },
-    [onDepositSubmitted]
+    [onDepositSubmitted, targetChain, targetToken]
   );
   const handleConnected = (0, import_react9.useCallback)(
     (addr, smartAccount) => {
@@ -3795,11 +3824,12 @@ function DepositFlow({
           txHash,
           sourceChain: chainId,
           sourceToken: token,
-          amount
+          amount,
+          directTransfer: isSameRoute(chainId, token, targetChain, targetToken)
         };
       });
     },
-    []
+    [targetChain, targetToken]
   );
   const handleDepositSubmittedCallback = (0, import_react9.useCallback)(
     (txHash, sourceChain, amount) => {
@@ -3908,11 +3938,13 @@ function DepositFlow({
           amount: step.amount,
           waitForFinalTx,
           service,
+          directTransfer: step.directTransfer,
           onClose,
           onNewDeposit: handleNewDeposit,
           onDepositComplete: handleDepositComplete,
           onDepositFailed: handleDepositFailed,
-          onError: handleError
+          onError: handleError,
+          debug
         }
       )
     ] });
@@ -3981,6 +4013,7 @@ function DepositFlow({
         walletClient: signerContext.walletClient,
         address: ownerAddress,
         smartAccount: step.smartAccount,
+        recipient,
         asset: step.asset,
         amount: step.amount,
         balance: step.balance,
@@ -4004,6 +4037,7 @@ function DepositFlow({
         amount: step.amount,
         waitForFinalTx,
         service,
+        directTransfer: step.directTransfer,
         onClose,
         onNewDeposit: handleNewDeposit,
         onDepositComplete: handleDepositComplete,
@@ -4238,7 +4272,8 @@ function DepositModalInner({
   onDepositSubmitted,
   onDepositComplete,
   onDepositFailed,
-  onError
+  onError,
+  debug
 }) {
   const modalRef = (0, import_react13.useRef)(null);
   const [currentStepIndex, setCurrentStepIndex] = (0, import_react13.useState)(0);
@@ -4406,7 +4441,8 @@ function DepositModalInner({
             onDepositSubmitted,
             onDepositComplete,
             onDepositFailed,
-            onError
+            onError,
+            debug
           }
         )
       ] })
@@ -5207,7 +5243,8 @@ function WithdrawFlow({
   onWithdrawSubmitted,
   onWithdrawComplete,
   onWithdrawFailed,
-  onError
+  onError,
+  debug
 }) {
   const [step, setStep] = (0, import_react15.useState)({ type: "form" });
   const [isSubmitting, setIsSubmitting] = (0, import_react15.useState)(false);
@@ -5596,7 +5633,8 @@ function WithdrawFlow({
         onNewDeposit: () => setStep({ type: "form" }),
         onDepositComplete: handleWithdrawComplete,
         onDepositFailed: handleWithdrawFailed,
-        onError: handleError
+        onError: handleError,
+        debug
       }
     )
   ] });
@@ -5697,7 +5735,8 @@ function WithdrawModalInner({
   onWithdrawSubmitted,
   onWithdrawComplete,
   onWithdrawFailed,
-  onError
+  onError,
+  debug
 }) {
   const modalRef = (0, import_react17.useRef)(null);
   const [currentStepIndex, setCurrentStepIndex] = (0, import_react17.useState)(0);
@@ -5863,7 +5902,8 @@ function WithdrawModalInner({
             onWithdrawSubmitted,
             onWithdrawComplete,
             onWithdrawFailed,
-            onError
+            onError,
+            debug
           }
         )
       ] })

package/dist/index.d.cts

@@ -19,6 +19,7 @@ interface DepositModalUIConfig {
     showBackButton?: boolean;
     balanceTitle?: string;
     maxDepositUsd?: number;
+    minDepositUsd?: number;
 }
 interface DepositModalBranding {
     logoUrl?: string;
@@ -71,7 +72,7 @@ interface DepositModalProps {
     sourceChain?: Chain | number;
     sourceToken?: Address;
     defaultAmount?: string;
-    recipient?: Address;
+    recipient: Address;
     backendUrl?: string;
     rhinestoneApiKey?: string;
     signerAddress?: Address;
@@ -91,6 +92,7 @@ interface DepositModalProps {
     onDepositComplete?: (data: DepositCompleteEventData) => void;
     onDepositFailed?: (data: DepositFailedEventData) => void;
     onError?: (data: ErrorEventData) => void;
+    debug?: boolean;
 }
 interface WithdrawSignParams {
     safeAddress: Address;
@@ -136,6 +138,7 @@ interface WithdrawModalProps {
     onWithdrawComplete?: (data: WithdrawCompleteEventData) => void;
     onWithdrawFailed?: (data: WithdrawFailedEventData) => void;
     onError?: (data: ErrorEventData) => void;
+    debug?: boolean;
 }
 interface AssetOption {
     id: string;

package/dist/index.d.ts

@@ -19,6 +19,7 @@ interface DepositModalUIConfig {
     showBackButton?: boolean;
     balanceTitle?: string;
     maxDepositUsd?: number;
+    minDepositUsd?: number;
 }
 interface DepositModalBranding {
     logoUrl?: string;
@@ -71,7 +72,7 @@ interface DepositModalProps {
     sourceChain?: Chain | number;
     sourceToken?: Address;
     defaultAmount?: string;
-    recipient?: Address;
+    recipient: Address;
     backendUrl?: string;
     rhinestoneApiKey?: string;
     signerAddress?: Address;
@@ -91,6 +92,7 @@ interface DepositModalProps {
     onDepositComplete?: (data: DepositCompleteEventData) => void;
     onDepositFailed?: (data: DepositFailedEventData) => void;
     onError?: (data: ErrorEventData) => void;
+    debug?: boolean;
 }
 interface WithdrawSignParams {
     safeAddress: Address;
@@ -136,6 +138,7 @@ interface WithdrawModalProps {
     onWithdrawComplete?: (data: WithdrawCompleteEventData) => void;
     onWithdrawFailed?: (data: WithdrawFailedEventData) => void;
     onError?: (data: ErrorEventData) => void;
+    debug?: boolean;
 }
 interface AssetOption {
     id: string;

package/dist/index.mjs

@@ -1925,6 +1925,12 @@ function AmountStep({
       );
       return;
     }
+    if (uiConfig?.minDepositUsd && usdValue < uiConfig.minDepositUsd) {
+      setError(
+        `Minimum deposit is ${currencyFormatter.format(uiConfig.minDepositUsd)}`
+      );
+      return;
+    }
     if (tokenPriceUsd === null || tokenPriceUsd === 0) {
       setError("Unable to determine token price");
       return;
@@ -2197,6 +2203,7 @@ function ConfirmStep({
   walletClient,
   address,
   smartAccount,
+  recipient,
   asset,
   amount,
   balance,
@@ -2292,10 +2299,11 @@ function ConfirmStep({
       if (!account || !chain) {
         throw new Error("Wallet not properly connected");
       }
+      const transferTo = sameRoute ? recipient : smartAccount;
       const hash = isNativeAsset(asset) ? await walletClient.sendTransaction({
         account,
         chain,
-        to: smartAccount,
+        to: transferTo,
         value: amountUnits
       }) : await walletClient.writeContract({
         account,
@@ -2303,7 +2311,7 @@ function ConfirmStep({
         address: asset.token,
         abi: erc20Abi2,
         functionName: "transfer",
-        args: [smartAccount, amountUnits]
+        args: [transferTo, amountUnits]
       });
       onDepositSubmitted?.(hash, asset.chainId, amountUnits.toString());
       onConfirm(hash, asset.chainId, amountUnits.toString(), asset.token);
@@ -2509,8 +2517,8 @@ function getEventTxHash(event) {
     return asString(event.data?.transactionHash);
   }
   if (event.type === "bridge-started" || event.type === "bridge-complete") {
-    const source = isRecord(event.data?.source) ? event.data.source : void 0;
-    return asString(source?.transactionHash);
+    const deposit = isRecord(event.data?.deposit) ? event.data.deposit : void 0;
+    return asString(deposit?.transactionHash);
   }
   if (event.type === "bridge-failed" || event.type === "error") {
     const deposit = isRecord(event.data?.deposit) ? event.data.deposit : void 0;
@@ -2561,19 +2569,29 @@ function ProcessingStep({
   amount,
   waitForFinalTx,
   service,
+  directTransfer,
   flowLabel = "deposit",
+  debug,
   onClose,
   onNewDeposit,
   onDepositComplete,
   onDepositFailed,
   onError
 }) {
-  const [state, setState] = useState5({ type: "processing" });
+  const [state, setState] = useState5(
+    directTransfer ? { type: "complete" } : { type: "processing" }
+  );
   const [elapsedSeconds, setElapsedSeconds] = useState5(0);
   const startTimeRef = useRef4(Date.now());
   const intervalRef = useRef4(null);
-  const sameChainAndToken = targetChain === sourceChain && targetToken.toLowerCase() === sourceToken.toLowerCase();
   useEffect5(() => {
+    if (directTransfer) {
+      onDepositComplete?.(txHash);
+      return;
+    }
+  }, [directTransfer, txHash, onDepositComplete]);
+  useEffect5(() => {
+    if (directTransfer) return;
     startTimeRef.current = Date.now();
     intervalRef.current = setInterval(() => {
       setElapsedSeconds(Math.floor((Date.now() - startTimeRef.current) / 1e3));
@@ -2581,7 +2599,7 @@ function ProcessingStep({
     return () => {
       if (intervalRef.current) clearInterval(intervalRef.current);
     };
-  }, []);
+  }, [directTransfer]);
   useEffect5(() => {
     if (state.type === "complete" || state.type === "failed" || state.type === "error") {
       if (intervalRef.current) {
@@ -2594,6 +2612,7 @@ function ProcessingStep({
   const pollTimeoutRef = useRef4(null);
   const processTimeoutRef = useRef4(null);
   useEffect5(() => {
+    if (directTransfer) return;
     if (state.type !== "processing") {
       pollIntervalRef.current = INITIAL_POLL_INTERVAL;
       return;
@@ -2605,6 +2624,15 @@ function ProcessingStep({
         const lastEvent2 = data.lastEvent;
         const eventMatchesTx = isEventForTx(lastEvent2, txHash);
         const eventForCurrentTx = eventMatchesTx ? lastEvent2 : void 0;
+        if (debug && lastEvent2) {
+          const eventData = lastEvent2.data;
+          console.log("[deposit-modal] status poll", {
+            type: lastEvent2.type,
+            matchesTx: eventMatchesTx,
+            intentId: eventData?.intentId,
+            data: eventData
+          });
+        }
         if (!isMounted) return;
         if (eventForCurrentTx?.type === "bridge-complete") {
           setState({ type: "complete", lastEvent: eventForCurrentTx });
@@ -2617,11 +2645,6 @@ function ProcessingStep({
           onDepositComplete?.(txHash);
           return;
         }
-        if (eventForCurrentTx?.type === "deposit-received" && sameChainAndToken) {
-          setState({ type: "complete", lastEvent: eventForCurrentTx });
-          onDepositComplete?.(txHash);
-          return;
-        }
         if (eventForCurrentTx?.type === "bridge-failed") {
           const formatted = formatBridgeFailedMessage(eventForCurrentTx);
           setState({
@@ -2666,16 +2689,17 @@ function ProcessingStep({
       }
     };
   }, [
+    directTransfer,
     state.type,
     smartAccount,
     txHash,
     service,
-    sameChainAndToken,
     waitForFinalTx,
     onDepositComplete,
     onDepositFailed
   ]);
   useEffect5(() => {
+    if (directTransfer) return;
     if (state.type !== "processing") {
       if (processTimeoutRef.current) {
         clearTimeout(processTimeoutRef.current);
@@ -2694,7 +2718,7 @@ function ProcessingStep({
         processTimeoutRef.current = null;
       }
     };
-  }, [state.type, onError]);
+  }, [directTransfer, state.type, onError]);
   const isError = state.type === "error" || state.type === "failed";
   const isComplete = state.type === "complete";
   const isProcessing = state.type === "processing";
@@ -2748,7 +2772,7 @@ function ProcessingStep({
             }
           ) }),
           /* @__PURE__ */ jsx11("div", { className: "rs-success-title", children: isEarlyComplete ? `${flowCapitalized} confirmed` : `${flowCapitalized} successful` }),
-          /* @__PURE__ */ jsx11("div", { className: "rs-success-subtitle", children: isEarlyComplete ? "Your transfer has been confirmed and funds will arrive shortly." : `Your funds have been successfully bridged.` })
+          /* @__PURE__ */ jsx11("div", { className: "rs-success-subtitle", children: directTransfer ? "Your transfer is complete." : isEarlyComplete ? "Your transfer has been confirmed and funds will arrive shortly." : "Your funds have been successfully bridged." })
         ] }),
         /* @__PURE__ */ jsxs10("div", { className: "rs-card", children: [
           /* @__PURE__ */ jsxs10("div", { className: "rs-card-row", children: [
@@ -3529,6 +3553,9 @@ var init_public_client = __esm({
 // src/DepositFlow.tsx
 import { useState as useState7, useCallback as useCallback4, useMemo as useMemo6, useEffect as useEffect7, useRef as useRef6 } from "react";
 import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+function isSameRoute(sourceChain, sourceToken, targetChain, targetToken) {
+  return sourceChain === targetChain && sourceToken.toLowerCase() === targetToken.toLowerCase();
+}
 function DepositFlow({
   dappWalletClient,
   dappPublicClient,
@@ -3557,7 +3584,8 @@ function DepositFlow({
   onDepositSubmitted,
   onDepositComplete,
   onDepositFailed,
-  onError
+  onError,
+  debug
 }) {
   const [step, setStep] = useState7({ type: "setup" });
   const [flowMode, setFlowMode] = useState7(null);
@@ -3728,12 +3756,13 @@ function DepositFlow({
           txHash,
           sourceChain: chainId,
           sourceToken: token,
-          amount
+          amount,
+          directTransfer: isSameRoute(chainId, token, targetChain, targetToken)
         };
       });
       onDepositSubmitted?.({ txHash, sourceChain: chainId, amount });
     },
-    [onDepositSubmitted]
+    [onDepositSubmitted, targetChain, targetToken]
   );
   const handleConnected = useCallback4(
     (addr, smartAccount) => {
@@ -3780,11 +3809,12 @@ function DepositFlow({
           txHash,
           sourceChain: chainId,
           sourceToken: token,
-          amount
+          amount,
+          directTransfer: isSameRoute(chainId, token, targetChain, targetToken)
         };
       });
     },
-    []
+    [targetChain, targetToken]
   );
   const handleDepositSubmittedCallback = useCallback4(
     (txHash, sourceChain, amount) => {
@@ -3893,11 +3923,13 @@ function DepositFlow({
           amount: step.amount,
           waitForFinalTx,
           service,
+          directTransfer: step.directTransfer,
           onClose,
           onNewDeposit: handleNewDeposit,
           onDepositComplete: handleDepositComplete,
           onDepositFailed: handleDepositFailed,
-          onError: handleError
+          onError: handleError,
+          debug
         }
       )
     ] });
@@ -3966,6 +3998,7 @@ function DepositFlow({
         walletClient: signerContext.walletClient,
         address: ownerAddress,
         smartAccount: step.smartAccount,
+        recipient,
         asset: step.asset,
         amount: step.amount,
         balance: step.balance,
@@ -3989,6 +4022,7 @@ function DepositFlow({
         amount: step.amount,
         waitForFinalTx,
         service,
+        directTransfer: step.directTransfer,
         onClose,
         onNewDeposit: handleNewDeposit,
         onDepositComplete: handleDepositComplete,
@@ -4236,7 +4270,8 @@ function DepositModalInner({
   onDepositSubmitted,
   onDepositComplete,
   onDepositFailed,
-  onError
+  onError,
+  debug
 }) {
   const modalRef = useRef7(null);
   const [currentStepIndex, setCurrentStepIndex] = useState9(0);
@@ -4404,7 +4439,8 @@ function DepositModalInner({
             onDepositSubmitted,
             onDepositComplete,
             onDepositFailed,
-            onError
+            onError,
+            debug
           }
         )
       ] })
@@ -5214,7 +5250,8 @@ function WithdrawFlow({
   onWithdrawSubmitted,
   onWithdrawComplete,
   onWithdrawFailed,
-  onError
+  onError,
+  debug
 }) {
   const [step, setStep] = useState11({ type: "form" });
   const [isSubmitting, setIsSubmitting] = useState11(false);
@@ -5603,7 +5640,8 @@ function WithdrawFlow({
         onNewDeposit: () => setStep({ type: "form" }),
         onDepositComplete: handleWithdrawComplete,
         onDepositFailed: handleWithdrawFailed,
-        onError: handleError
+        onError: handleError,
+        debug
       }
     )
   ] });
@@ -5708,7 +5746,8 @@ function WithdrawModalInner({
   onWithdrawSubmitted,
   onWithdrawComplete,
   onWithdrawFailed,
-  onError
+  onError,
+  debug
 }) {
   const modalRef = useRef9(null);
   const [currentStepIndex, setCurrentStepIndex] = useState12(0);
@@ -5874,7 +5913,8 @@ function WithdrawModalInner({
             onWithdrawSubmitted,
             onWithdrawComplete,
             onWithdrawFailed,
-            onError
+            onError,
+            debug
           }
         )
       ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rhinestone/deposit-modal",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "description": "React modal component for Rhinestone cross-chain deposits",
   "author": "Rhinestone <dev@rhinestone.wtf>",
   "bugs": {