@rhinestone/deposit-modal 0.1.16 → 0.1.18

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)(
@@ -4032,8 +4048,11 @@ function applyTheme(element, theme) {
   if (theme?.ctaColor) {
     element.style.setProperty("--rs-primary", theme.ctaColor);
     element.style.setProperty("--rs-border-accent", theme.ctaColor);
-  }
-  if (theme?.ctaHoverColor) {
+    element.style.setProperty(
+      "--rs-primary-hover",
+      theme.ctaHoverColor ?? theme.ctaColor
+    );
+  } else if (theme?.ctaHoverColor) {
     element.style.setProperty("--rs-primary-hover", theme.ctaHoverColor);
   }
   if (theme?.borderColor) {
@@ -4474,8 +4493,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 +4612,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 +4624,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 +5440,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 +5617,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(
@@ -4014,8 +4030,11 @@ function applyTheme(element, theme) {
   if (theme?.ctaColor) {
     element.style.setProperty("--rs-primary", theme.ctaColor);
     element.style.setProperty("--rs-border-accent", theme.ctaColor);
-  }
-  if (theme?.ctaHoverColor) {
+    element.style.setProperty(
+      "--rs-primary-hover",
+      theme.ctaHoverColor ?? theme.ctaColor
+    );
+  } else if (theme?.ctaHoverColor) {
     element.style.setProperty("--rs-primary-hover", theme.ctaHoverColor);
   }
   if (theme?.borderColor) {
@@ -4473,8 +4492,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 +4611,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 +4623,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 +5447,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 +5620,7 @@ var init_WithdrawFlow = __esm({
     init_account();
     init_session_owner();
     init_safe();
+    init_formatters();
   }
 });
 

package/dist/styles.css

@@ -20,13 +20,19 @@
   --color-gray11: #646464;
   --color-gray12: #202020;
 
-  /* Blue accent (primary action) */
+  /* Blue (info) */
   --color-blue3: #e6f4fe;
   --color-blue4: #d5efff;
   --color-blue9: #0090ff;
   --color-blue10: #0588f0;
   --color-blue11: #0d74ce;
 
+  /* Neutral accent (primary action) */
+  --color-neutral3: #f4f4f5;
+  --color-neutral4: #e4e4e7;
+  --color-neutral9: #18181b;
+  --color-neutral10: #27272a;
+
   /* Green (success) */
   --color-green3: #e6f6eb;
   --color-green4: #d6f1df;
@@ -48,9 +54,9 @@
   --rs-background-secondary: var(--color-gray2);
   --rs-surface: var(--color-gray3);
   --rs-surface-hover: var(--color-gray4);
-  --rs-primary: var(--color-blue9);
-  --rs-primary-hover: var(--color-blue10);
-  --rs-primary-tint: var(--color-blue3);
+  --rs-primary: var(--color-neutral9);
+  --rs-primary-hover: var(--color-neutral10);
+  --rs-primary-tint: var(--color-neutral3);
   --rs-primary-foreground: #ffffff;
   --rs-success: var(--color-green9);
   --rs-success-tint: var(--color-green3);
@@ -65,7 +71,7 @@
 
   --rs-border: var(--color-gray5);
   --rs-border-surface: var(--color-gray4);
-  --rs-border-accent: var(--color-blue9);
+  --rs-border-accent: var(--color-neutral9);
 
   --rs-secondary: var(--color-gray3);
   --rs-secondary-hover: var(--color-gray4);
@@ -103,30 +109,37 @@
    ============================================================================= */
 
 .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);
+
+  --color-neutral3: rgba(244, 244, 245, 0.08);
+  --color-neutral4: rgba(244, 244, 245, 0.14);
+  --color-neutral9: #f4f4f5;
+  --color-neutral10: #e4e4e7;
+
+  --rs-primary-foreground: #18181b;
 
   --rs-shadow-dropdown:
     0 4px 20px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4);
@@ -608,6 +621,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.18",
   "description": "React modal component for Rhinestone cross-chain deposits",
   "author": "Rhinestone <dev@rhinestone.wtf>",
   "bugs": {