@rhinestone/deposit-modal 0.1.3 → 0.1.4

package/dist/index.cjs

@@ -1955,6 +1955,7 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 var INITIAL_POLL_INTERVAL = 3e3;
 var MAX_POLL_INTERVAL = 3e4;
 var BACKOFF_MULTIPLIER = 1.5;
+var PROCESS_TIMEOUT_MS = 10 * 60 * 1e3;
 function ProcessingStep({
   publicClient,
   smartAccount,
@@ -2010,6 +2011,13 @@ function ProcessingStep({
       }
       try {
         await publicClient.waitForTransactionReceipt({ hash: txHash });
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Transaction not confirmed";
+        setState({ type: "error", message });
+        onError?.(message, "PROCESS_ERROR");
+        return;
+      }
+      try {
         const result = await service.processDeposit(smartAccount, {
           chainId: sourceChain,
           token: sourceToken,
@@ -2017,22 +2025,24 @@ function ProcessingStep({
           txHash,
           sender
         });
-        if (result.status === 202 || result.message.includes("Funds are already on the target chain")) {
+        if (result.message.includes("Funds are already on the target chain")) {
           if (sameChainAndToken) {
             setState({ type: "complete" });
             onDepositComplete?.(txHash);
-          } else {
-            const message = `Processor returned same-chain response. Re-register the account for target chain ${targetChain}.`;
-            setState({ type: "error", message });
-            onError?.(message, "TARGET_CHAIN_MISMATCH");
+            return;
           }
+          setState({ type: "processing" });
+          return;
+        }
+        if (result.status === 202) {
+          setState({ type: "processing" });
           return;
         }
         setState({ type: "processing" });
       } catch (error) {
         const message = error instanceof Error ? error.message : "Process failed";
-        setState({ type: "error", message });
-        onError?.(message, "PROCESS_ERROR");
+        setState({ type: "processing", warning: message });
+        onError?.(message, "PROCESS_FALLBACK");
       }
     }
     triggerProcess();
@@ -2051,7 +2061,8 @@ function ProcessingStep({
     onError
   ]);
   const pollIntervalRef = (0, import_react6.useRef)(INITIAL_POLL_INTERVAL);
-  const timeoutRef = (0, import_react6.useRef)(null);
+  const pollTimeoutRef = (0, import_react6.useRef)(null);
+  const processTimeoutRef = (0, import_react6.useRef)(null);
   (0, import_react6.useEffect)(() => {
     if (state.type !== "processing") {
       pollIntervalRef.current = INITIAL_POLL_INTERVAL;
@@ -2099,7 +2110,7 @@ function ProcessingStep({
     }
     function scheduleNextPoll() {
       if (!isMounted) return;
-      timeoutRef.current = setTimeout(() => {
+      pollTimeoutRef.current = setTimeout(() => {
         pollIntervalRef.current = Math.min(
           pollIntervalRef.current * BACKOFF_MULTIPLIER,
           MAX_POLL_INTERVAL
@@ -2110,8 +2121,8 @@ function ProcessingStep({
     pollStatus();
     return () => {
       isMounted = false;
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
+      if (pollTimeoutRef.current) {
+        clearTimeout(pollTimeoutRef.current);
       }
     };
   }, [
@@ -2124,6 +2135,26 @@ function ProcessingStep({
     onDepositComplete,
     onDepositFailed
   ]);
+  (0, import_react6.useEffect)(() => {
+    if (state.type !== "processing") {
+      if (processTimeoutRef.current) {
+        clearTimeout(processTimeoutRef.current);
+        processTimeoutRef.current = null;
+      }
+      return;
+    }
+    processTimeoutRef.current = setTimeout(() => {
+      const message = "We couldn't confirm your transfer. Please contact support if funds do not arrive.";
+      setState({ type: "error", message });
+      onError?.(message, "PROCESS_TIMEOUT");
+    }, PROCESS_TIMEOUT_MS);
+    return () => {
+      if (processTimeoutRef.current) {
+        clearTimeout(processTimeoutRef.current);
+        processTimeoutRef.current = null;
+      }
+    };
+  }, [state.type, onError]);
   const isError = state.type === "error" || state.type === "failed";
   const isComplete = state.type === "complete";
   const isProcessing = state.type === "triggering" || state.type === "processing";
@@ -2376,6 +2407,27 @@ function ProcessingStep({
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "rs-step-body rs-space-y-3", children: [
       isProcessing && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "rs-progress-bar", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "rs-progress-bar-fill rs-progress-bar-fill--indeterminate" }) }),
+        state.type === "processing" && state.warning && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "rs-alert rs-alert--warning", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "svg",
+            {
+              className: "rs-alert-icon",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "rs-alert-text", children: "We couldn't reach the processor. We'll keep checking for a webhook update." })
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "rs-alert rs-alert--info", children: [
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             "svg",
@@ -2513,6 +2565,7 @@ function DepositFlow({
   amount: defaultAmount,
   recipient,
   signerAddress = DEFAULT_SIGNER_ADDRESS,
+  forceRegister = true,
   waitForFinalTx = true,
   onRequestConnect,
   connectButtonLabel,
@@ -2529,6 +2582,16 @@ function DepositFlow({
   const [step, setStep] = (0, import_react7.useState)({ type: "setup" });
   const [totalBalanceUsd, setTotalBalanceUsd] = (0, import_react7.useState)(0);
   const targetChainObj = (0, import_react7.useMemo)(() => CHAIN_BY_ID[targetChain], [targetChain]);
+  const lastTargetRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    const prev = lastTargetRef.current;
+    if (prev && (prev.chain !== targetChain || prev.token.toLowerCase() !== targetToken.toLowerCase())) {
+      if (step.type !== "processing") {
+        setStep({ type: "setup" });
+      }
+    }
+    lastTargetRef.current = { chain: targetChain, token: targetToken };
+  }, [targetChain, targetToken, step.type]);
   const handleBackFromAmount = (0, import_react7.useCallback)(() => {
     setStep((prev) => {
       if (prev.type !== "amount") return prev;
@@ -2658,6 +2721,7 @@ function DepositFlow({
         targetToken,
         signerAddress,
         recipient,
+        forceRegister,
         service,
         onSetupComplete: handleSetupComplete,
         onConnected: handleConnected,
@@ -2795,6 +2859,7 @@ function DepositModal({
   recipient,
   backendUrl = DEFAULT_BACKEND_URL,
   signerAddress = DEFAULT_SIGNER_ADDRESS,
+  forceRegister = true,
   waitForFinalTx = true,
   onRequestConnect,
   connectButtonLabel,
@@ -2960,6 +3025,7 @@ function DepositModal({
             amount: defaultAmount,
             recipient,
             signerAddress,
+            forceRegister,
             waitForFinalTx,
             onRequestConnect,
             connectButtonLabel,
@@ -3494,13 +3560,6 @@ var import_sdk3 = require("@rhinestone/sdk");
 // src/core/safe.ts
 var import_viem8 = require("viem");
 var SAFE_ABI = [
-  {
-    type: "function",
-    name: "nonce",
-    stateMutability: "view",
-    inputs: [],
-    outputs: [{ name: "", type: "uint256" }]
-  },
   {
     type: "function",
     name: "isOwner",
@@ -3545,20 +3604,88 @@ var SAFE_ABI = [
     anonymous: false
   }
 ];
-var SAFE_TX_TYPES = {
-  SafeTx: [
-    { name: "to", type: "address" },
-    { name: "value", type: "uint256" },
-    { name: "data", type: "bytes" },
-    { name: "operation", type: "uint8" },
-    { name: "safeTxGas", type: "uint256" },
-    { name: "baseGas", type: "uint256" },
-    { name: "gasPrice", type: "uint256" },
-    { name: "gasToken", type: "address" },
-    { name: "refundReceiver", type: "address" },
-    { name: "nonce", type: "uint256" }
-  ]
-};
+async function executeSafeEthTransfer(params) {
+  const {
+    walletClient,
+    publicClient,
+    safeAddress,
+    recipient,
+    amount,
+    chainId
+  } = params;
+  const account = walletClient.account;
+  const chain = walletClient.chain;
+  if (!account || !chain) {
+    throw new Error("Wallet not connected");
+  }
+  if (chain.id !== chainId) {
+    throw new Error(`Switch to ${getChainName(chainId)} to sign`);
+  }
+  const isOwner = await publicClient.readContract({
+    address: safeAddress,
+    abi: SAFE_ABI,
+    functionName: "isOwner",
+    args: [account.address]
+  });
+  if (!isOwner) {
+    throw new Error("Connected wallet is not a Safe owner");
+  }
+  const safeTx = {
+    to: recipient,
+    value: amount,
+    data: "0x",
+    operation: 0,
+    safeTxGas: 0n,
+    baseGas: 0n,
+    gasPrice: 0n,
+    gasToken: import_viem8.zeroAddress,
+    refundReceiver: import_viem8.zeroAddress
+  };
+  const signature = (0, import_viem8.concat)([
+    (0, import_viem8.pad)(account.address, { size: 32 }),
+    (0, import_viem8.pad)((0, import_viem8.toHex)(0), { size: 32 }),
+    (0, import_viem8.toHex)(1, { size: 1 })
+  ]);
+  const txHash = await walletClient.writeContract({
+    account,
+    chain,
+    address: safeAddress,
+    abi: SAFE_ABI,
+    functionName: "execTransaction",
+    args: [
+      safeTx.to,
+      safeTx.value,
+      safeTx.data,
+      safeTx.operation,
+      safeTx.safeTxGas,
+      safeTx.baseGas,
+      safeTx.gasPrice,
+      safeTx.gasToken,
+      safeTx.refundReceiver,
+      signature
+    ]
+  });
+  const receipt = await publicClient.waitForTransactionReceipt({
+    hash: txHash
+  });
+  const safeLogs = receipt.logs.filter(
+    (log) => log.address.toLowerCase() === safeAddress.toLowerCase()
+  );
+  const parsed = (0, import_viem8.parseEventLogs)({
+    abi: SAFE_ABI,
+    logs: safeLogs,
+    strict: false
+  });
+  const failed = parsed.find((log) => log.eventName === "ExecutionFailure");
+  if (failed) {
+    throw new Error("Safe transaction failed");
+  }
+  const succeeded = parsed.find((log) => log.eventName === "ExecutionSuccess");
+  if (!succeeded) {
+    throw new Error("Safe transaction status unavailable");
+  }
+  return { txHash };
+}
 async function executeSafeErc20Transfer(params) {
   const {
     walletClient,
@@ -3577,19 +3704,12 @@ async function executeSafeErc20Transfer(params) {
   if (chain.id !== chainId) {
     throw new Error(`Switch to ${getChainName(chainId)} to sign`);
   }
-  const [isOwner, nonce] = await Promise.all([
-    publicClient.readContract({
-      address: safeAddress,
-      abi: SAFE_ABI,
-      functionName: "isOwner",
-      args: [account.address]
-    }),
-    publicClient.readContract({
-      address: safeAddress,
-      abi: SAFE_ABI,
-      functionName: "nonce"
-    })
-  ]);
+  const isOwner = await publicClient.readContract({
+    address: safeAddress,
+    abi: SAFE_ABI,
+    functionName: "isOwner",
+    args: [account.address]
+  });
   if (!isOwner) {
     throw new Error("Connected wallet is not a Safe owner");
   }
@@ -3607,19 +3727,13 @@ async function executeSafeErc20Transfer(params) {
     baseGas: 0n,
     gasPrice: 0n,
     gasToken: import_viem8.zeroAddress,
-    refundReceiver: import_viem8.zeroAddress,
-    nonce
+    refundReceiver: import_viem8.zeroAddress
   };
-  const signature = await walletClient.signTypedData({
-    account,
-    domain: {
-      chainId,
-      verifyingContract: safeAddress
-    },
-    types: SAFE_TX_TYPES,
-    primaryType: "SafeTx",
-    message: safeTx
-  });
+  const signature = (0, import_viem8.concat)([
+    (0, import_viem8.pad)(account.address, { size: 32 }),
+    (0, import_viem8.pad)((0, import_viem8.toHex)(0), { size: 32 }),
+    (0, import_viem8.toHex)(1, { size: 1 })
+  ]);
   const txHash = await walletClient.writeContract({
     account,
     chain,
@@ -3713,6 +3827,7 @@ function WithdrawFlow({
       decimals
     };
   }, [sourceChain, sourceToken]);
+  const isSourceNative = sourceToken.toLowerCase() === NATIVE_TOKEN_ADDRESS.toLowerCase();
   const stepIndex = step.type === "form" ? 0 : 1;
   const currentBackHandler = void 0;
   (0, import_react10.useEffect)(() => {
@@ -3789,7 +3904,14 @@ function WithdrawFlow({
         });
         handleConnected(address, smartAccount);
         const amountUnits = (0, import_viem9.parseUnits)(amountValue, asset.decimals);
-        const result = await executeSafeErc20Transfer({
+        const result = isSourceNative ? await executeSafeEthTransfer({
+          walletClient,
+          publicClient,
+          safeAddress,
+          recipient: smartAccount,
+          amount: amountUnits,
+          chainId: sourceChain
+        }) : await executeSafeErc20Transfer({
           walletClient,
           publicClient,
           safeAddress,
@@ -3836,6 +3958,7 @@ function WithdrawFlow({
       sourceToken,
       sourceChain,
       onWithdrawSubmitted,
+      isSourceNative,
       handleError
     ]
   );
@@ -3852,15 +3975,23 @@ function WithdrawFlow({
     [onWithdrawFailed]
   );
   const targetChainOptions = (0, import_react10.useMemo)(() => {
+    if (isSourceNative) return SOURCE_CHAINS;
     return SOURCE_CHAINS.filter((chain) => Boolean(getUsdcAddress(chain.id)));
-  }, []);
-  const handleTargetChainChange = (0, import_react10.useCallback)((chainId) => {
-    setTargetChain(chainId);
-    const nextToken = getUsdcAddress(chainId);
-    if (nextToken) {
-      setTargetToken(nextToken);
-    }
-  }, []);
+  }, [isSourceNative]);
+  const handleTargetChainChange = (0, import_react10.useCallback)(
+    (chainId) => {
+      setTargetChain(chainId);
+      if (isSourceNative) {
+        setTargetToken(NATIVE_TOKEN_ADDRESS);
+        return;
+      }
+      const nextToken = getUsdcAddress(chainId);
+      if (nextToken) {
+        setTargetToken(nextToken);
+      }
+    },
+    [isSourceNative]
+  );
   const handleTargetTokenChange = (0, import_react10.useCallback)((token) => {
     setTargetToken(token);
   }, []);

package/dist/index.d.cts

@@ -77,6 +77,7 @@ interface DepositModalProps {
     recipient?: Address;
     backendUrl?: string;
     signerAddress?: Address;
+    forceRegister?: boolean;
     waitForFinalTx?: boolean;
     onRequestConnect?: () => void;
     connectButtonLabel?: string;
@@ -135,7 +136,7 @@ interface AssetOption {
     balanceUsd?: number;
 }
 
-declare function DepositModal({ walletClient, publicClient, address, targetChain: targetChainProp, targetToken, isOpen, onClose, inline, switchChain, sourceChain: sourceChainProp, sourceToken, defaultAmount, recipient, backendUrl, signerAddress, waitForFinalTx, onRequestConnect, connectButtonLabel, theme, branding, uiConfig, className, onReady, onConnected, onDepositSubmitted, onDepositComplete, onDepositFailed, onError, }: DepositModalProps): react_jsx_runtime.JSX.Element;
+declare function DepositModal({ walletClient, publicClient, address, targetChain: targetChainProp, targetToken, isOpen, onClose, inline, switchChain, sourceChain: sourceChainProp, sourceToken, defaultAmount, recipient, backendUrl, signerAddress, forceRegister, waitForFinalTx, onRequestConnect, connectButtonLabel, theme, branding, uiConfig, className, onReady, onConnected, onDepositSubmitted, onDepositComplete, onDepositFailed, onError, }: DepositModalProps): react_jsx_runtime.JSX.Element;
 declare namespace DepositModal {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -77,6 +77,7 @@ interface DepositModalProps {
     recipient?: Address;
     backendUrl?: string;
     signerAddress?: Address;
+    forceRegister?: boolean;
     waitForFinalTx?: boolean;
     onRequestConnect?: () => void;
     connectButtonLabel?: string;
@@ -135,7 +136,7 @@ interface AssetOption {
     balanceUsd?: number;
 }
 
-declare function DepositModal({ walletClient, publicClient, address, targetChain: targetChainProp, targetToken, isOpen, onClose, inline, switchChain, sourceChain: sourceChainProp, sourceToken, defaultAmount, recipient, backendUrl, signerAddress, waitForFinalTx, onRequestConnect, connectButtonLabel, theme, branding, uiConfig, className, onReady, onConnected, onDepositSubmitted, onDepositComplete, onDepositFailed, onError, }: DepositModalProps): react_jsx_runtime.JSX.Element;
+declare function DepositModal({ walletClient, publicClient, address, targetChain: targetChainProp, targetToken, isOpen, onClose, inline, switchChain, sourceChain: sourceChainProp, sourceToken, defaultAmount, recipient, backendUrl, signerAddress, forceRegister, waitForFinalTx, onRequestConnect, connectButtonLabel, theme, branding, uiConfig, className, onReady, onConnected, onDepositSubmitted, onDepositComplete, onDepositFailed, onError, }: DepositModalProps): react_jsx_runtime.JSX.Element;
 declare namespace DepositModal {
     var displayName: string;
 }

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/DepositModal.tsx
-import { useMemo as useMemo5, useEffect as useEffect7, useRef as useRef5, useState as useState7, useCallback as useCallback4 } from "react";
+import { useMemo as useMemo5, useEffect as useEffect7, useRef as useRef6, useState as useState7, useCallback as useCallback4 } from "react";
 
 // src/components/ui/Modal.tsx
 import {
@@ -132,7 +132,7 @@ function Modal({
 Modal.displayName = "Modal";
 
 // src/DepositFlow.tsx
-import { useState as useState6, useCallback as useCallback3, useMemo as useMemo4, useEffect as useEffect6 } from "react";
+import { useState as useState6, useCallback as useCallback3, useMemo as useMemo4, useEffect as useEffect6, useRef as useRef5 } from "react";
 
 // src/components/ui/Spinner.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
@@ -1915,6 +1915,7 @@ import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-ru
 var INITIAL_POLL_INTERVAL = 3e3;
 var MAX_POLL_INTERVAL = 3e4;
 var BACKOFF_MULTIPLIER = 1.5;
+var PROCESS_TIMEOUT_MS = 10 * 60 * 1e3;
 function ProcessingStep({
   publicClient,
   smartAccount,
@@ -1970,6 +1971,13 @@ function ProcessingStep({
       }
       try {
         await publicClient.waitForTransactionReceipt({ hash: txHash });
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Transaction not confirmed";
+        setState({ type: "error", message });
+        onError?.(message, "PROCESS_ERROR");
+        return;
+      }
+      try {
         const result = await service.processDeposit(smartAccount, {
           chainId: sourceChain,
           token: sourceToken,
@@ -1977,22 +1985,24 @@ function ProcessingStep({
           txHash,
           sender
         });
-        if (result.status === 202 || result.message.includes("Funds are already on the target chain")) {
+        if (result.message.includes("Funds are already on the target chain")) {
           if (sameChainAndToken) {
             setState({ type: "complete" });
             onDepositComplete?.(txHash);
-          } else {
-            const message = `Processor returned same-chain response. Re-register the account for target chain ${targetChain}.`;
-            setState({ type: "error", message });
-            onError?.(message, "TARGET_CHAIN_MISMATCH");
+            return;
           }
+          setState({ type: "processing" });
+          return;
+        }
+        if (result.status === 202) {
+          setState({ type: "processing" });
           return;
         }
         setState({ type: "processing" });
       } catch (error) {
         const message = error instanceof Error ? error.message : "Process failed";
-        setState({ type: "error", message });
-        onError?.(message, "PROCESS_ERROR");
+        setState({ type: "processing", warning: message });
+        onError?.(message, "PROCESS_FALLBACK");
       }
     }
     triggerProcess();
@@ -2011,7 +2021,8 @@ function ProcessingStep({
     onError
   ]);
   const pollIntervalRef = useRef4(INITIAL_POLL_INTERVAL);
-  const timeoutRef = useRef4(null);
+  const pollTimeoutRef = useRef4(null);
+  const processTimeoutRef = useRef4(null);
   useEffect5(() => {
     if (state.type !== "processing") {
       pollIntervalRef.current = INITIAL_POLL_INTERVAL;
@@ -2059,7 +2070,7 @@ function ProcessingStep({
     }
     function scheduleNextPoll() {
       if (!isMounted) return;
-      timeoutRef.current = setTimeout(() => {
+      pollTimeoutRef.current = setTimeout(() => {
         pollIntervalRef.current = Math.min(
           pollIntervalRef.current * BACKOFF_MULTIPLIER,
           MAX_POLL_INTERVAL
@@ -2070,8 +2081,8 @@ function ProcessingStep({
     pollStatus();
     return () => {
       isMounted = false;
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
+      if (pollTimeoutRef.current) {
+        clearTimeout(pollTimeoutRef.current);
       }
     };
   }, [
@@ -2084,6 +2095,26 @@ function ProcessingStep({
     onDepositComplete,
     onDepositFailed
   ]);
+  useEffect5(() => {
+    if (state.type !== "processing") {
+      if (processTimeoutRef.current) {
+        clearTimeout(processTimeoutRef.current);
+        processTimeoutRef.current = null;
+      }
+      return;
+    }
+    processTimeoutRef.current = setTimeout(() => {
+      const message = "We couldn't confirm your transfer. Please contact support if funds do not arrive.";
+      setState({ type: "error", message });
+      onError?.(message, "PROCESS_TIMEOUT");
+    }, PROCESS_TIMEOUT_MS);
+    return () => {
+      if (processTimeoutRef.current) {
+        clearTimeout(processTimeoutRef.current);
+        processTimeoutRef.current = null;
+      }
+    };
+  }, [state.type, onError]);
   const isError = state.type === "error" || state.type === "failed";
   const isComplete = state.type === "complete";
   const isProcessing = state.type === "triggering" || state.type === "processing";
@@ -2336,6 +2367,27 @@ function ProcessingStep({
     /* @__PURE__ */ jsxs9("div", { className: "rs-step-body rs-space-y-3", children: [
       isProcessing && /* @__PURE__ */ jsxs9(Fragment2, { children: [
         /* @__PURE__ */ jsx10("div", { className: "rs-progress-bar", children: /* @__PURE__ */ jsx10("div", { className: "rs-progress-bar-fill rs-progress-bar-fill--indeterminate" }) }),
+        state.type === "processing" && state.warning && /* @__PURE__ */ jsxs9("div", { className: "rs-alert rs-alert--warning", children: [
+          /* @__PURE__ */ jsx10(
+            "svg",
+            {
+              className: "rs-alert-icon",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              children: /* @__PURE__ */ jsx10(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx10("p", { className: "rs-alert-text", children: "We couldn't reach the processor. We'll keep checking for a webhook update." })
+        ] }),
         /* @__PURE__ */ jsxs9("div", { className: "rs-alert rs-alert--info", children: [
           /* @__PURE__ */ jsx10(
             "svg",
@@ -2473,6 +2525,7 @@ function DepositFlow({
   amount: defaultAmount,
   recipient,
   signerAddress = DEFAULT_SIGNER_ADDRESS,
+  forceRegister = true,
   waitForFinalTx = true,
   onRequestConnect,
   connectButtonLabel,
@@ -2489,6 +2542,16 @@ function DepositFlow({
   const [step, setStep] = useState6({ type: "setup" });
   const [totalBalanceUsd, setTotalBalanceUsd] = useState6(0);
   const targetChainObj = useMemo4(() => CHAIN_BY_ID[targetChain], [targetChain]);
+  const lastTargetRef = useRef5(null);
+  useEffect6(() => {
+    const prev = lastTargetRef.current;
+    if (prev && (prev.chain !== targetChain || prev.token.toLowerCase() !== targetToken.toLowerCase())) {
+      if (step.type !== "processing") {
+        setStep({ type: "setup" });
+      }
+    }
+    lastTargetRef.current = { chain: targetChain, token: targetToken };
+  }, [targetChain, targetToken, step.type]);
   const handleBackFromAmount = useCallback3(() => {
     setStep((prev) => {
       if (prev.type !== "amount") return prev;
@@ -2618,6 +2681,7 @@ function DepositFlow({
         targetToken,
         signerAddress,
         recipient,
+        forceRegister,
         service,
         onSetupComplete: handleSetupComplete,
         onConnected: handleConnected,
@@ -2755,6 +2819,7 @@ function DepositModal({
   recipient,
   backendUrl = DEFAULT_BACKEND_URL,
   signerAddress = DEFAULT_SIGNER_ADDRESS,
+  forceRegister = true,
   waitForFinalTx = true,
   onRequestConnect,
   connectButtonLabel,
@@ -2769,10 +2834,10 @@ function DepositModal({
   onDepositFailed,
   onError
 }) {
-  const modalRef = useRef5(null);
+  const modalRef = useRef6(null);
   const [currentStepIndex, setCurrentStepIndex] = useState7(0);
   const [totalBalanceUsd, setTotalBalanceUsd] = useState7(null);
-  const backHandlerRef = useRef5(void 0);
+  const backHandlerRef = useRef6(void 0);
   const targetChain = getChainId(targetChainProp);
   const sourceChain = sourceChainProp ? getChainId(sourceChainProp) : void 0;
   const service = useMemo5(() => createDepositService(backendUrl), [backendUrl]);
@@ -2781,7 +2846,7 @@ function DepositModal({
       applyTheme(modalRef.current, theme);
     }
   }, [isOpen, theme]);
-  const hasCalledReady = useRef5(false);
+  const hasCalledReady = useRef6(false);
   useEffect7(() => {
     if (isOpen && !hasCalledReady.current) {
       hasCalledReady.current = true;
@@ -2920,6 +2985,7 @@ function DepositModal({
             amount: defaultAmount,
             recipient,
             signerAddress,
+            forceRegister,
             waitForFinalTx,
             onRequestConnect,
             connectButtonLabel,
@@ -2941,13 +3007,13 @@ function DepositModal({
 DepositModal.displayName = "DepositModal";
 
 // src/WithdrawModal.tsx
-import { useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo8, useRef as useRef7, useState as useState10 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo8, useRef as useRef8, useState as useState10 } from "react";
 
 // src/WithdrawFlow.tsx
 import { useCallback as useCallback6, useEffect as useEffect9, useMemo as useMemo7, useState as useState9 } from "react";
 
 // src/components/steps/WithdrawFormStep.tsx
-import { useCallback as useCallback5, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef6, useState as useState8 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef7, useState as useState8 } from "react";
 import { erc20Abi as erc20Abi3, formatUnits as formatUnits5, parseUnits as parseUnits3 } from "viem";
 import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function useClickOutside(ref, onClose) {
@@ -2989,9 +3055,9 @@ function WithdrawFormStep({
   const [showChainDropdown, setShowChainDropdown] = useState8(false);
   const [showTokenDropdown, setShowTokenDropdown] = useState8(false);
   const [isSubmitting, setIsSubmitting] = useState8(false);
-  const hasAttemptedSwitch = useRef6(false);
-  const chainDropdownRef = useRef6(null);
-  const tokenDropdownRef = useRef6(null);
+  const hasAttemptedSwitch = useRef7(false);
+  const chainDropdownRef = useRef7(null);
+  const tokenDropdownRef = useRef7(null);
   const publicClientChainId = publicClient.chain?.id;
   useClickOutside(chainDropdownRef, () => setShowChainDropdown(false));
   useClickOutside(tokenDropdownRef, () => setShowTokenDropdown(false));
@@ -3453,19 +3519,15 @@ import { walletClientToAccount as walletClientToAccount2 } from "@rhinestone/sdk
 
 // src/core/safe.ts
 import {
+  concat,
   encodeFunctionData,
   erc20Abi as erc20Abi4,
+  pad,
   parseEventLogs,
+  toHex,
   zeroAddress as zeroAddress2
 } from "viem";
 var SAFE_ABI = [
-  {
-    type: "function",
-    name: "nonce",
-    stateMutability: "view",
-    inputs: [],
-    outputs: [{ name: "", type: "uint256" }]
-  },
   {
     type: "function",
     name: "isOwner",
@@ -3510,20 +3572,88 @@ var SAFE_ABI = [
     anonymous: false
   }
 ];
-var SAFE_TX_TYPES = {
-  SafeTx: [
-    { name: "to", type: "address" },
-    { name: "value", type: "uint256" },
-    { name: "data", type: "bytes" },
-    { name: "operation", type: "uint8" },
-    { name: "safeTxGas", type: "uint256" },
-    { name: "baseGas", type: "uint256" },
-    { name: "gasPrice", type: "uint256" },
-    { name: "gasToken", type: "address" },
-    { name: "refundReceiver", type: "address" },
-    { name: "nonce", type: "uint256" }
-  ]
-};
+async function executeSafeEthTransfer(params) {
+  const {
+    walletClient,
+    publicClient,
+    safeAddress,
+    recipient,
+    amount,
+    chainId
+  } = params;
+  const account = walletClient.account;
+  const chain = walletClient.chain;
+  if (!account || !chain) {
+    throw new Error("Wallet not connected");
+  }
+  if (chain.id !== chainId) {
+    throw new Error(`Switch to ${getChainName(chainId)} to sign`);
+  }
+  const isOwner = await publicClient.readContract({
+    address: safeAddress,
+    abi: SAFE_ABI,
+    functionName: "isOwner",
+    args: [account.address]
+  });
+  if (!isOwner) {
+    throw new Error("Connected wallet is not a Safe owner");
+  }
+  const safeTx = {
+    to: recipient,
+    value: amount,
+    data: "0x",
+    operation: 0,
+    safeTxGas: 0n,
+    baseGas: 0n,
+    gasPrice: 0n,
+    gasToken: zeroAddress2,
+    refundReceiver: zeroAddress2
+  };
+  const signature = concat([
+    pad(account.address, { size: 32 }),
+    pad(toHex(0), { size: 32 }),
+    toHex(1, { size: 1 })
+  ]);
+  const txHash = await walletClient.writeContract({
+    account,
+    chain,
+    address: safeAddress,
+    abi: SAFE_ABI,
+    functionName: "execTransaction",
+    args: [
+      safeTx.to,
+      safeTx.value,
+      safeTx.data,
+      safeTx.operation,
+      safeTx.safeTxGas,
+      safeTx.baseGas,
+      safeTx.gasPrice,
+      safeTx.gasToken,
+      safeTx.refundReceiver,
+      signature
+    ]
+  });
+  const receipt = await publicClient.waitForTransactionReceipt({
+    hash: txHash
+  });
+  const safeLogs = receipt.logs.filter(
+    (log) => log.address.toLowerCase() === safeAddress.toLowerCase()
+  );
+  const parsed = parseEventLogs({
+    abi: SAFE_ABI,
+    logs: safeLogs,
+    strict: false
+  });
+  const failed = parsed.find((log) => log.eventName === "ExecutionFailure");
+  if (failed) {
+    throw new Error("Safe transaction failed");
+  }
+  const succeeded = parsed.find((log) => log.eventName === "ExecutionSuccess");
+  if (!succeeded) {
+    throw new Error("Safe transaction status unavailable");
+  }
+  return { txHash };
+}
 async function executeSafeErc20Transfer(params) {
   const {
     walletClient,
@@ -3542,19 +3672,12 @@ async function executeSafeErc20Transfer(params) {
   if (chain.id !== chainId) {
     throw new Error(`Switch to ${getChainName(chainId)} to sign`);
   }
-  const [isOwner, nonce] = await Promise.all([
-    publicClient.readContract({
-      address: safeAddress,
-      abi: SAFE_ABI,
-      functionName: "isOwner",
-      args: [account.address]
-    }),
-    publicClient.readContract({
-      address: safeAddress,
-      abi: SAFE_ABI,
-      functionName: "nonce"
-    })
-  ]);
+  const isOwner = await publicClient.readContract({
+    address: safeAddress,
+    abi: SAFE_ABI,
+    functionName: "isOwner",
+    args: [account.address]
+  });
   if (!isOwner) {
     throw new Error("Connected wallet is not a Safe owner");
   }
@@ -3572,19 +3695,13 @@ async function executeSafeErc20Transfer(params) {
     baseGas: 0n,
     gasPrice: 0n,
     gasToken: zeroAddress2,
-    refundReceiver: zeroAddress2,
-    nonce
+    refundReceiver: zeroAddress2
   };
-  const signature = await walletClient.signTypedData({
-    account,
-    domain: {
-      chainId,
-      verifyingContract: safeAddress
-    },
-    types: SAFE_TX_TYPES,
-    primaryType: "SafeTx",
-    message: safeTx
-  });
+  const signature = concat([
+    pad(account.address, { size: 32 }),
+    pad(toHex(0), { size: 32 }),
+    toHex(1, { size: 1 })
+  ]);
   const txHash = await walletClient.writeContract({
     account,
     chain,
@@ -3678,6 +3795,7 @@ function WithdrawFlow({
       decimals
     };
   }, [sourceChain, sourceToken]);
+  const isSourceNative = sourceToken.toLowerCase() === NATIVE_TOKEN_ADDRESS.toLowerCase();
   const stepIndex = step.type === "form" ? 0 : 1;
   const currentBackHandler = void 0;
   useEffect9(() => {
@@ -3754,7 +3872,14 @@ function WithdrawFlow({
         });
         handleConnected(address, smartAccount);
         const amountUnits = parseUnits4(amountValue, asset.decimals);
-        const result = await executeSafeErc20Transfer({
+        const result = isSourceNative ? await executeSafeEthTransfer({
+          walletClient,
+          publicClient,
+          safeAddress,
+          recipient: smartAccount,
+          amount: amountUnits,
+          chainId: sourceChain
+        }) : await executeSafeErc20Transfer({
           walletClient,
           publicClient,
           safeAddress,
@@ -3801,6 +3926,7 @@ function WithdrawFlow({
       sourceToken,
       sourceChain,
       onWithdrawSubmitted,
+      isSourceNative,
       handleError
     ]
   );
@@ -3817,15 +3943,23 @@ function WithdrawFlow({
     [onWithdrawFailed]
   );
   const targetChainOptions = useMemo7(() => {
+    if (isSourceNative) return SOURCE_CHAINS;
     return SOURCE_CHAINS.filter((chain) => Boolean(getUsdcAddress(chain.id)));
-  }, []);
-  const handleTargetChainChange = useCallback6((chainId) => {
-    setTargetChain(chainId);
-    const nextToken = getUsdcAddress(chainId);
-    if (nextToken) {
-      setTargetToken(nextToken);
-    }
-  }, []);
+  }, [isSourceNative]);
+  const handleTargetChainChange = useCallback6(
+    (chainId) => {
+      setTargetChain(chainId);
+      if (isSourceNative) {
+        setTargetToken(NATIVE_TOKEN_ADDRESS);
+        return;
+      }
+      const nextToken = getUsdcAddress(chainId);
+      if (nextToken) {
+        setTargetToken(nextToken);
+      }
+    },
+    [isSourceNative]
+  );
   const handleTargetTokenChange = useCallback6((token) => {
     setTargetToken(token);
   }, []);
@@ -3918,10 +4052,10 @@ function WithdrawModal({
   onWithdrawFailed,
   onError
 }) {
-  const modalRef = useRef7(null);
+  const modalRef = useRef8(null);
   const [currentStepIndex, setCurrentStepIndex] = useState10(0);
   const [totalBalanceUsd, setTotalBalanceUsd] = useState10(null);
-  const backHandlerRef = useRef7(void 0);
+  const backHandlerRef = useRef8(void 0);
   const targetChain = getChainId(targetChainProp);
   const sourceChain = getChainId(sourceChainProp);
   const service = useMemo8(() => createDepositService(backendUrl), [backendUrl]);
@@ -3930,7 +4064,7 @@ function WithdrawModal({
       applyTheme(modalRef.current, theme);
     }
   }, [isOpen, theme]);
-  const hasCalledReady = useRef7(false);
+  const hasCalledReady = useRef8(false);
   useEffect10(() => {
     if (isOpen && !hasCalledReady.current) {
       hasCalledReady.current = true;

package/package.json

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