@rhinestone/deposit-modal 0.1.15 → 0.1.17

package/README.md

@@ -76,6 +76,7 @@ Notes:
 | `defaultAmount` | `string` | No | Pre-filled amount |
 | `recipient` | `Address` | No | Custom recipient address |
 | `backendUrl` | `string` | No | Backend URL |
+| `rhinestoneApiKey` | `string` | No | Optional SDK api key forwarded to `RhinestoneSDK` during smart-account setup |
 | `signerAddress` | `Address` | No | Session signer address |
 | `waitForFinalTx` | `boolean` | No | Wait for destination tx (default: true) |
 | `onRequestConnect` | `() => void` | No | Called when wallet connection needed |

package/dist/index.cjs

@@ -816,8 +816,10 @@ function buildSession(chain, signerAddress) {
     chain
   };
 }
-async function createSmartAccount(userSigner, sessionSigner) {
-  const rhinestone = new import_sdk.RhinestoneSDK();
+async function createSmartAccount(userSigner, sessionSigner, sdkApiKey) {
+  const rhinestone = new import_sdk.RhinestoneSDK({
+    apiKey: sdkApiKey ?? ""
+  });
   const ownerAccounts = sessionSigner ? [userSigner, sessionSigner] : [userSigner];
   const config = {
     account: {
@@ -886,7 +888,10 @@ async function getSessionDetails(rhinestoneAccount, targetChain, signerAddress,
     }
   }
   if (targetToken) {
-    const targetSymbol = getTokenSymbol(targetToken, targetChain.id).toUpperCase();
+    const targetSymbol = getTokenSymbol(
+      targetToken,
+      targetChain.id
+    ).toUpperCase();
     if (targetSymbol && targetSymbol !== "TOKEN") {
       const chainsForToken = selectedChains.filter(
         (chain) => getSupportedTokenSymbolsForChain(chain.id).includes(targetSymbol)
@@ -1004,6 +1009,7 @@ function SetupStep({
   targetChain,
   targetChainObj,
   targetToken,
+  rhinestoneApiKey,
   signerAddress,
   sessionChainIds,
   recipient,
@@ -1028,7 +1034,8 @@ function SetupStep({
       const sessionOwner = await resolveSessionOwner(address);
       const account = await createSmartAccount(
         signerAccount,
-        sessionOwner.account
+        sessionOwner.account,
+        rhinestoneApiKey
       );
       const smartAccount = getAccountAddress(account);
       setState({ type: "checking" });
@@ -1082,6 +1089,7 @@ function SetupStep({
     targetChainObj,
     targetChain,
     targetToken,
+    rhinestoneApiKey,
     signerAddress,
     sessionChainIds,
     recipient,
@@ -1468,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"() {
@@ -2286,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 {
@@ -2299,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);
     }
@@ -2444,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)(
@@ -3531,6 +3555,7 @@ function DepositFlow({
   sourceToken: defaultSourceToken,
   amount: defaultAmount,
   recipient,
+  rhinestoneApiKey,
   signerAddress = DEFAULT_SIGNER_ADDRESS,
   sessionChainIds,
   forceRegister = false,
@@ -3851,6 +3876,7 @@ function DepositFlow({
           targetChain,
           targetChainObj,
           targetToken,
+          rhinestoneApiKey,
           signerAddress,
           sessionChainIds,
           recipient,
@@ -3911,6 +3937,7 @@ function DepositFlow({
         targetChain,
         targetChainObj,
         targetToken,
+        rhinestoneApiKey,
         signerAddress,
         sessionChainIds,
         recipient,
@@ -4190,6 +4217,7 @@ function DepositModalInner({
   defaultAmount,
   recipient,
   backendUrl = DEFAULT_BACKEND_URL,
+  rhinestoneApiKey,
   signerAddress = DEFAULT_SIGNER_ADDRESS,
   sessionChainIds,
   forceRegister = false,
@@ -4358,6 +4386,7 @@ function DepositModalInner({
             sourceToken,
             amount: defaultAmount,
             recipient,
+            rhinestoneApiKey,
             signerAddress,
             sessionChainIds,
             forceRegister,
@@ -4461,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);
       });
@@ -4580,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);
     }
@@ -4592,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);
     }
@@ -5158,6 +5187,7 @@ function WithdrawFlow({
   recipient: defaultRecipient,
   amount: defaultAmount,
   service,
+  rhinestoneApiKey,
   signerAddress = DEFAULT_SIGNER_ADDRESS,
   sessionChainIds,
   forceRegister = false,
@@ -5334,7 +5364,8 @@ function WithdrawFlow({
         const sessionOwner = await resolveSessionOwner2(ownerAddress2);
         const account = await createSmartAccount(
           signerAccount,
-          sessionOwner.account
+          sessionOwner.account,
+          rhinestoneApiKey
         );
         const smartAccount = getAccountAddress(account);
         const checkResult = await service.checkAccount(smartAccount);
@@ -5406,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);
@@ -5423,6 +5454,7 @@ function WithdrawFlow({
       targetChain,
       targetToken,
       service,
+      rhinestoneApiKey,
       handleConnected,
       asset.decimals,
       safeAddress,
@@ -5582,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");
   }
 });
@@ -5642,6 +5675,7 @@ function WithdrawModalInner({
   onClose,
   inline,
   backendUrl = DEFAULT_BACKEND_URL,
+  rhinestoneApiKey,
   signerAddress = DEFAULT_SIGNER_ADDRESS,
   sessionChainIds,
   forceRegister = false,
@@ -5809,6 +5843,7 @@ function WithdrawModalInner({
             recipient,
             amount: defaultAmount,
             service,
+            rhinestoneApiKey,
             signerAddress,
             sessionChainIds,
             forceRegister,

package/dist/index.d.cts

@@ -73,6 +73,7 @@ interface DepositModalProps {
     defaultAmount?: string;
     recipient?: Address;
     backendUrl?: string;
+    rhinestoneApiKey?: string;
     signerAddress?: Address;
     sessionChainIds?: number[];
     forceRegister?: boolean;
@@ -114,6 +115,7 @@ interface WithdrawModalProps {
     onClose: () => void;
     inline?: boolean;
     backendUrl?: string;
+    rhinestoneApiKey?: string;
     signerAddress?: Address;
     sessionChainIds?: number[];
     forceRegister?: boolean;

package/dist/index.d.ts

@@ -73,6 +73,7 @@ interface DepositModalProps {
     defaultAmount?: string;
     recipient?: Address;
     backendUrl?: string;
+    rhinestoneApiKey?: string;
     signerAddress?: Address;
     sessionChainIds?: number[];
     forceRegister?: boolean;
@@ -114,6 +115,7 @@ interface WithdrawModalProps {
     onClose: () => void;
     inline?: boolean;
     backendUrl?: string;
+    rhinestoneApiKey?: string;
     signerAddress?: Address;
     sessionChainIds?: number[];
     forceRegister?: boolean;

package/dist/index.mjs

@@ -805,8 +805,10 @@ function buildSession(chain, signerAddress) {
     chain
   };
 }
-async function createSmartAccount(userSigner, sessionSigner) {
-  const rhinestone = new RhinestoneSDK();
+async function createSmartAccount(userSigner, sessionSigner, sdkApiKey) {
+  const rhinestone = new RhinestoneSDK({
+    apiKey: sdkApiKey ?? ""
+  });
   const ownerAccounts = sessionSigner ? [userSigner, sessionSigner] : [userSigner];
   const config = {
     account: {
@@ -875,7 +877,10 @@ async function getSessionDetails(rhinestoneAccount, targetChain, signerAddress,
     }
   }
   if (targetToken) {
-    const targetSymbol = getTokenSymbol(targetToken, targetChain.id).toUpperCase();
+    const targetSymbol = getTokenSymbol(
+      targetToken,
+      targetChain.id
+    ).toUpperCase();
     if (targetSymbol && targetSymbol !== "TOKEN") {
       const chainsForToken = selectedChains.filter(
         (chain) => getSupportedTokenSymbolsForChain(chain.id).includes(targetSymbol)
@@ -995,6 +1000,7 @@ function SetupStep({
   targetChain,
   targetChainObj,
   targetToken,
+  rhinestoneApiKey,
   signerAddress,
   sessionChainIds,
   recipient,
@@ -1019,7 +1025,8 @@ function SetupStep({
       const sessionOwner = await resolveSessionOwner(address);
       const account = await createSmartAccount(
         signerAccount,
-        sessionOwner.account
+        sessionOwner.account,
+        rhinestoneApiKey
       );
       const smartAccount = getAccountAddress(account);
       setState({ type: "checking" });
@@ -1073,6 +1080,7 @@ function SetupStep({
     targetChainObj,
     targetChain,
     targetToken,
+    rhinestoneApiKey,
     signerAddress,
     sessionChainIds,
     recipient,
@@ -1454,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"() {
@@ -2273,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 {
@@ -2286,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);
     }
@@ -2431,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(
@@ -3516,6 +3540,7 @@ function DepositFlow({
   sourceToken: defaultSourceToken,
   amount: defaultAmount,
   recipient,
+  rhinestoneApiKey,
   signerAddress = DEFAULT_SIGNER_ADDRESS,
   sessionChainIds,
   forceRegister = false,
@@ -3836,6 +3861,7 @@ function DepositFlow({
           targetChain,
           targetChainObj,
           targetToken,
+          rhinestoneApiKey,
           signerAddress,
           sessionChainIds,
           recipient,
@@ -3896,6 +3922,7 @@ function DepositFlow({
         targetChain,
         targetChainObj,
         targetToken,
+        rhinestoneApiKey,
         signerAddress,
         sessionChainIds,
         recipient,
@@ -4188,6 +4215,7 @@ function DepositModalInner({
   defaultAmount,
   recipient,
   backendUrl = DEFAULT_BACKEND_URL,
+  rhinestoneApiKey,
   signerAddress = DEFAULT_SIGNER_ADDRESS,
   sessionChainIds,
   forceRegister = false,
@@ -4356,6 +4384,7 @@ function DepositModalInner({
             sourceToken,
             amount: defaultAmount,
             recipient,
+            rhinestoneApiKey,
             signerAddress,
             sessionChainIds,
             forceRegister,
@@ -4460,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);
       });
@@ -4579,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);
     }
@@ -4591,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);
     }
@@ -5165,6 +5194,7 @@ function WithdrawFlow({
   recipient: defaultRecipient,
   amount: defaultAmount,
   service,
+  rhinestoneApiKey,
   signerAddress = DEFAULT_SIGNER_ADDRESS,
   sessionChainIds,
   forceRegister = false,
@@ -5341,7 +5371,8 @@ function WithdrawFlow({
         const sessionOwner = await resolveSessionOwner2(ownerAddress2);
         const account = await createSmartAccount(
           signerAccount,
-          sessionOwner.account
+          sessionOwner.account,
+          rhinestoneApiKey
         );
         const smartAccount = getAccountAddress(account);
         const checkResult = await service.checkAccount(smartAccount);
@@ -5413,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);
@@ -5430,6 +5461,7 @@ function WithdrawFlow({
       targetChain,
       targetToken,
       service,
+      rhinestoneApiKey,
       handleConnected,
       asset.decimals,
       safeAddress,
@@ -5585,6 +5617,7 @@ var init_WithdrawFlow = __esm({
     init_account();
     init_session_owner();
     init_safe();
+    init_formatters();
   }
 });
 
@@ -5653,6 +5686,7 @@ function WithdrawModalInner({
   onClose,
   inline,
   backendUrl = DEFAULT_BACKEND_URL,
+  rhinestoneApiKey,
   signerAddress = DEFAULT_SIGNER_ADDRESS,
   sessionChainIds,
   forceRegister = false,
@@ -5820,6 +5854,7 @@ function WithdrawModalInner({
             recipient,
             amount: defaultAmount,
             service,
+            rhinestoneApiKey,
             signerAddress,
             sessionChainIds,
             forceRegister,

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.15",
+  "version": "0.1.17",
   "description": "React modal component for Rhinestone cross-chain deposits",
   "author": "Rhinestone <dev@rhinestone.wtf>",
   "bugs": {
@@ -39,7 +39,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@rhinestone/sdk": "^1.2.10",
+    "@rhinestone/sdk": "^1.2.11",
     "@rhinestone/shared-configs": "^1.4.93",
     "@reown/appkit": "^1.8.17",
     "@reown/appkit-adapter-wagmi": "^1.8.17",