@rhinestone/deposit-modal 0.1.19 → 0.1.20

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;
@@ -2525,8 +2531,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;
@@ -2575,6 +2581,7 @@ function ProcessingStep({
   waitForFinalTx,
   service,
   flowLabel = "deposit",
+  debug,
   onClose,
   onNewDeposit,
   onDepositComplete,
@@ -2585,7 +2592,6 @@ function ProcessingStep({
   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)(() => {
     startTimeRef.current = Date.now();
     intervalRef.current = setInterval(() => {
@@ -2618,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 });
@@ -2630,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({
@@ -2683,7 +2693,6 @@ function ProcessingStep({
     smartAccount,
     txHash,
     service,
-    sameChainAndToken,
     waitForFinalTx,
     onDepositComplete,
     onDepositFailed
@@ -3572,7 +3581,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);
@@ -3912,7 +3922,8 @@ function DepositFlow({
           onNewDeposit: handleNewDeposit,
           onDepositComplete: handleDepositComplete,
           onDepositFailed: handleDepositFailed,
-          onError: handleError
+          onError: handleError,
+          debug
         }
       )
     ] });
@@ -4238,7 +4249,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 +4418,8 @@ function DepositModalInner({
             onDepositSubmitted,
             onDepositComplete,
             onDepositFailed,
-            onError
+            onError,
+            debug
           }
         )
       ] })
@@ -5207,7 +5220,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 +5610,8 @@ function WithdrawFlow({
         onNewDeposit: () => setStep({ type: "form" }),
         onDepositComplete: handleWithdrawComplete,
         onDepositFailed: handleWithdrawFailed,
-        onError: handleError
+        onError: handleError,
+        debug
       }
     )
   ] });
@@ -5697,7 +5712,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 +5879,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;
@@ -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;
@@ -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;
@@ -2509,8 +2515,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;
@@ -2562,6 +2568,7 @@ function ProcessingStep({
   waitForFinalTx,
   service,
   flowLabel = "deposit",
+  debug,
   onClose,
   onNewDeposit,
   onDepositComplete,
@@ -2572,7 +2579,6 @@ function ProcessingStep({
   const [elapsedSeconds, setElapsedSeconds] = useState5(0);
   const startTimeRef = useRef4(Date.now());
   const intervalRef = useRef4(null);
-  const sameChainAndToken = targetChain === sourceChain && targetToken.toLowerCase() === sourceToken.toLowerCase();
   useEffect5(() => {
     startTimeRef.current = Date.now();
     intervalRef.current = setInterval(() => {
@@ -2605,6 +2611,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 +2632,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({
@@ -2670,7 +2680,6 @@ function ProcessingStep({
     smartAccount,
     txHash,
     service,
-    sameChainAndToken,
     waitForFinalTx,
     onDepositComplete,
     onDepositFailed
@@ -3557,7 +3566,8 @@ function DepositFlow({
   onDepositSubmitted,
   onDepositComplete,
   onDepositFailed,
-  onError
+  onError,
+  debug
 }) {
   const [step, setStep] = useState7({ type: "setup" });
   const [flowMode, setFlowMode] = useState7(null);
@@ -3897,7 +3907,8 @@ function DepositFlow({
           onNewDeposit: handleNewDeposit,
           onDepositComplete: handleDepositComplete,
           onDepositFailed: handleDepositFailed,
-          onError: handleError
+          onError: handleError,
+          debug
         }
       )
     ] });
@@ -4236,7 +4247,8 @@ function DepositModalInner({
   onDepositSubmitted,
   onDepositComplete,
   onDepositFailed,
-  onError
+  onError,
+  debug
 }) {
   const modalRef = useRef7(null);
   const [currentStepIndex, setCurrentStepIndex] = useState9(0);
@@ -4404,7 +4416,8 @@ function DepositModalInner({
             onDepositSubmitted,
             onDepositComplete,
             onDepositFailed,
-            onError
+            onError,
+            debug
           }
         )
       ] })
@@ -5214,7 +5227,8 @@ function WithdrawFlow({
   onWithdrawSubmitted,
   onWithdrawComplete,
   onWithdrawFailed,
-  onError
+  onError,
+  debug
 }) {
   const [step, setStep] = useState11({ type: "form" });
   const [isSubmitting, setIsSubmitting] = useState11(false);
@@ -5603,7 +5617,8 @@ function WithdrawFlow({
         onNewDeposit: () => setStep({ type: "form" }),
         onDepositComplete: handleWithdrawComplete,
         onDepositFailed: handleWithdrawFailed,
-        onError: handleError
+        onError: handleError,
+        debug
       }
     )
   ] });
@@ -5708,7 +5723,8 @@ function WithdrawModalInner({
   onWithdrawSubmitted,
   onWithdrawComplete,
   onWithdrawFailed,
-  onError
+  onError,
+  debug
 }) {
   const modalRef = useRef9(null);
   const [currentStepIndex, setCurrentStepIndex] = useState12(0);
@@ -5874,7 +5890,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.20",
   "description": "React modal component for Rhinestone cross-chain deposits",
   "author": "Rhinestone <dev@rhinestone.wtf>",
   "bugs": {