@rhinestone/deposit-modal 0.1.16 → 0.1.17

package/dist/index.cjs

@@ -1476,6 +1476,33 @@ var init_deposit_service = __esm({
 });
 
 // src/core/formatters.ts
+function formatUserError(raw) {
+  const lower = raw.toLowerCase();
+  if (lower.includes("user rejected") || lower.includes("user denied")) {
+    return "Transaction cancelled";
+  }
+  if (lower.includes("insufficient funds")) {
+    return "Insufficient funds for this transaction";
+  }
+  if (lower.includes("nonce too low") || lower.includes("nonce too high")) {
+    return "Transaction conflict \u2014 please try again";
+  }
+  if (lower.includes("execution reverted")) {
+    return "Transaction would fail on-chain";
+  }
+  if (lower.includes("network") || lower.includes("disconnected")) {
+    return "Network error \u2014 check your connection";
+  }
+  const detailsCut = raw.indexOf("\n\nRequest Arguments:");
+  if (detailsCut !== -1) {
+    const short = raw.slice(0, detailsCut).trim();
+    return short.length > 80 ? short.slice(0, 80) + "..." : short;
+  }
+  if (raw.length > 80) {
+    return raw.slice(0, 80) + "...";
+  }
+  return raw;
+}
 var currencyFormatter, tokenFormatter;
 var init_formatters = __esm({
   "src/core/formatters.ts"() {
@@ -2294,7 +2321,8 @@ function ConfirmStep({
       onDepositSubmitted?.(hash, asset.chainId, amountUnits.toString());
       onConfirm(hash, asset.chainId, amountUnits.toString(), asset.token);
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Transfer failed";
+      const raw = err instanceof Error ? err.message : "Transfer failed";
+      const message = formatUserError(raw);
       setError(message);
       onError?.(message, "TRANSFER_ERROR");
     } finally {
@@ -2307,8 +2335,8 @@ function ConfirmStep({
     try {
       await switchChain(asset.chainId);
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Failed to switch chain";
-      setError(message);
+      const raw = err instanceof Error ? err.message : "Failed to switch chain";
+      setError(formatUserError(raw));
     } finally {
       setIsSwitching(false);
     }
@@ -2452,19 +2480,7 @@ function ConfirmStep({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          "span",
-          {
-            className: "rs-alert-text",
-            style: {
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              display: "block"
-            },
-            children: error.includes("User rejected") || error.includes("User denied") ? "Transaction rejected by user" : error.length > 60 ? error.slice(0, 60) + "..." : error
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "rs-alert-text", children: error })
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "rs-step-footer", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -4474,8 +4490,8 @@ function WithdrawFormStep({
       hasAttemptedSwitch.current = true;
       setIsSwitching(true);
       switchChain(asset.chainId).catch((err) => {
-        const message = err instanceof Error ? err.message : "Failed to switch chain";
-        setError(message);
+        const raw = err instanceof Error ? err.message : "Failed to switch chain";
+        setError(formatUserError(raw));
       }).finally(() => {
         setIsSwitching(false);
       });
@@ -4593,8 +4609,8 @@ function WithdrawFormStep({
     try {
       await onSubmit(recipient, amount);
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Withdrawal failed";
-      setError(message);
+      const raw = err instanceof Error ? err.message : "Withdrawal failed";
+      setError(formatUserError(raw));
     } finally {
       setIsSubmitting(false);
     }
@@ -4605,8 +4621,8 @@ function WithdrawFormStep({
     try {
       await switchChain(asset.chainId);
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Failed to switch chain";
-      setError(message);
+      const raw = err instanceof Error ? err.message : "Failed to switch chain";
+      setError(formatUserError(raw));
     } finally {
       setIsSwitching(false);
     }
@@ -5421,8 +5437,8 @@ function WithdrawFlow({
           amount: amountUnits.toString()
         });
       } catch (err) {
-        const message = err instanceof Error ? err.message : "Withdraw failed";
-        handleError(message, "WITHDRAW_FLOW_ERROR");
+        const raw = err instanceof Error ? err.message : "Withdraw failed";
+        handleError(formatUserError(raw), "WITHDRAW_FLOW_ERROR");
         throw err;
       } finally {
         setIsSubmitting(false);
@@ -5598,6 +5614,7 @@ var init_WithdrawFlow = __esm({
     init_session_owner();
     init_safe();
     import_viem10 = require("viem");
+    init_formatters();
     import_jsx_runtime19 = require("react/jsx-runtime");
   }
 });

package/dist/index.mjs

@@ -1462,6 +1462,33 @@ var init_deposit_service = __esm({
 });
 
 // src/core/formatters.ts
+function formatUserError(raw) {
+  const lower = raw.toLowerCase();
+  if (lower.includes("user rejected") || lower.includes("user denied")) {
+    return "Transaction cancelled";
+  }
+  if (lower.includes("insufficient funds")) {
+    return "Insufficient funds for this transaction";
+  }
+  if (lower.includes("nonce too low") || lower.includes("nonce too high")) {
+    return "Transaction conflict \u2014 please try again";
+  }
+  if (lower.includes("execution reverted")) {
+    return "Transaction would fail on-chain";
+  }
+  if (lower.includes("network") || lower.includes("disconnected")) {
+    return "Network error \u2014 check your connection";
+  }
+  const detailsCut = raw.indexOf("\n\nRequest Arguments:");
+  if (detailsCut !== -1) {
+    const short = raw.slice(0, detailsCut).trim();
+    return short.length > 80 ? short.slice(0, 80) + "..." : short;
+  }
+  if (raw.length > 80) {
+    return raw.slice(0, 80) + "...";
+  }
+  return raw;
+}
 var currencyFormatter, tokenFormatter;
 var init_formatters = __esm({
   "src/core/formatters.ts"() {
@@ -2281,7 +2308,8 @@ function ConfirmStep({
       onDepositSubmitted?.(hash, asset.chainId, amountUnits.toString());
       onConfirm(hash, asset.chainId, amountUnits.toString(), asset.token);
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Transfer failed";
+      const raw = err instanceof Error ? err.message : "Transfer failed";
+      const message = formatUserError(raw);
       setError(message);
       onError?.(message, "TRANSFER_ERROR");
     } finally {
@@ -2294,8 +2322,8 @@ function ConfirmStep({
     try {
       await switchChain(asset.chainId);
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Failed to switch chain";
-      setError(message);
+      const raw = err instanceof Error ? err.message : "Failed to switch chain";
+      setError(formatUserError(raw));
     } finally {
       setIsSwitching(false);
     }
@@ -2439,19 +2467,7 @@ function ConfirmStep({
             )
           }
         ),
-        /* @__PURE__ */ jsx10(
-          "span",
-          {
-            className: "rs-alert-text",
-            style: {
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              display: "block"
-            },
-            children: error.includes("User rejected") || error.includes("User denied") ? "Transaction rejected by user" : error.length > 60 ? error.slice(0, 60) + "..." : error
-          }
-        )
+        /* @__PURE__ */ jsx10("span", { className: "rs-alert-text", children: error })
       ] })
     ] }),
     /* @__PURE__ */ jsx10("div", { className: "rs-step-footer", children: /* @__PURE__ */ jsx10(
@@ -4473,8 +4489,8 @@ function WithdrawFormStep({
       hasAttemptedSwitch.current = true;
       setIsSwitching(true);
       switchChain(asset.chainId).catch((err) => {
-        const message = err instanceof Error ? err.message : "Failed to switch chain";
-        setError(message);
+        const raw = err instanceof Error ? err.message : "Failed to switch chain";
+        setError(formatUserError(raw));
       }).finally(() => {
         setIsSwitching(false);
       });
@@ -4592,8 +4608,8 @@ function WithdrawFormStep({
     try {
       await onSubmit(recipient, amount);
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Withdrawal failed";
-      setError(message);
+      const raw = err instanceof Error ? err.message : "Withdrawal failed";
+      setError(formatUserError(raw));
     } finally {
       setIsSubmitting(false);
     }
@@ -4604,8 +4620,8 @@ function WithdrawFormStep({
     try {
       await switchChain(asset.chainId);
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Failed to switch chain";
-      setError(message);
+      const raw = err instanceof Error ? err.message : "Failed to switch chain";
+      setError(formatUserError(raw));
     } finally {
       setIsSwitching(false);
     }
@@ -5428,8 +5444,8 @@ function WithdrawFlow({
           amount: amountUnits.toString()
         });
       } catch (err) {
-        const message = err instanceof Error ? err.message : "Withdraw failed";
-        handleError(message, "WITHDRAW_FLOW_ERROR");
+        const raw = err instanceof Error ? err.message : "Withdraw failed";
+        handleError(formatUserError(raw), "WITHDRAW_FLOW_ERROR");
         throw err;
       } finally {
         setIsSubmitting(false);
@@ -5601,6 +5617,7 @@ var init_WithdrawFlow = __esm({
     init_account();
     init_session_owner();
     init_safe();
+    init_formatters();
   }
 });
 

package/dist/styles.css

@@ -103,30 +103,30 @@
    ============================================================================= */
 
 .rs-modal[data-theme="dark"] {
-  --color-gray1: #050505;
-  --color-gray2: #0a0a0a;
-  --color-gray3: #131313;
-  --color-gray4: #1a1a1a;
-  --color-gray5: #232323;
-  --color-gray6: #2c2c2c;
-  --color-gray7: #3b3b3b;
-  --color-gray8: #525252;
-  --color-gray9: #6e6e6e;
-  --color-gray10: #9a9a9a;
-  --color-gray11: #b0b0b0;
-  --color-gray12: #ededed;
+  --color-gray1: #141414;
+  --color-gray2: #1a1a1a;
+  --color-gray3: #212121;
+  --color-gray4: #282828;
+  --color-gray5: #303030;
+  --color-gray6: #393939;
+  --color-gray7: #474747;
+  --color-gray8: #5e5e5e;
+  --color-gray9: #7a7a7a;
+  --color-gray10: #a0a0a0;
+  --color-gray11: #b8b8b8;
+  --color-gray12: #eeeeee;
 
   /* Dark mode tints: translucent overlays instead of light pastels */
-  --color-blue3: rgba(0, 144, 255, 0.10);
+  --color-blue3: rgba(0, 144, 255, 0.1);
   --color-blue4: rgba(0, 144, 255, 0.16);
   --color-blue10: #3b9eff;
-  --color-green3: rgba(48, 164, 108, 0.10);
+  --color-green3: rgba(48, 164, 108, 0.1);
   --color-green4: rgba(48, 164, 108, 0.16);
   --color-green10: #3cb179;
-  --color-red3: rgba(229, 72, 77, 0.10);
+  --color-red3: rgba(229, 72, 77, 0.1);
   --color-red4: rgba(229, 72, 77, 0.16);
   --color-red10: #f16a6e;
-  --color-amber3: rgba(226, 163, 54, 0.10);
+  --color-amber3: rgba(226, 163, 54, 0.1);
 
   --rs-shadow-dropdown:
     0 4px 20px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4);
@@ -608,6 +608,7 @@
 
 .rs-step-footer--connect-empty {
   padding-bottom: 14px;
+  margin-top: auto;
 }
 
 .rs-step-footer-buttons {

package/package.json

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