@rhinestone/deposit-modal 0.16.0 → 0.17.0

package/dist/{chunk-EA5CE2UZ.mjs → chunk-QMGEK623.mjs}

@@ -1,7 +1,7 @@
 import {
   MODAL_VERSION,
   serviceHeaders
-} from "./chunk-3HCCR54R.mjs";
+} from "./chunk-XCBDJPBD.mjs";
 import {
   CHAIN_DISPLAY_ORDER,
   HYPERCORE_CHAIN_ID,
@@ -650,12 +650,37 @@ function parseQuotePreview(raw) {
   );
   if (Math.abs(totalUsd - breakdownTotalUsd) > 1e-6) return null;
   const breakdown = Object.fromEntries(parsedEntries);
+  const timing = parseDepositTiming(obj.timing);
   return {
     settlementLayer: obj.settlementLayer,
     expiresAt: obj.expiresAt,
     estimatedFillTimeSeconds: obj.estimatedFillTimeSeconds,
     fees: { total: { usd: totalUsd }, breakdown },
-    output
+    output,
+    ...timing ? { timing } : {}
+  };
+}
+function parseDepositTiming(raw) {
+  if (typeof raw !== "object" || raw === null) return void 0;
+  const o = raw;
+  const seconds = (value) => typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : void 0;
+  const expectedSeconds = seconds(o.expectedSeconds);
+  const softDelaySeconds = seconds(o.softDelaySeconds);
+  const escalatedDelaySeconds = seconds(o.escalatedDelaySeconds);
+  if (expectedSeconds === void 0 || softDelaySeconds === void 0 || escalatedDelaySeconds === void 0) {
+    return void 0;
+  }
+  return { expectedSeconds, softDelaySeconds, escalatedDelaySeconds };
+}
+function normalizeHistoryTiming(raw) {
+  if (typeof raw !== "object" || raw === null || Array.isArray(raw)) {
+    return raw;
+  }
+  const { timing: rawTiming, ...row } = raw;
+  const timing = parseDepositTiming(rawTiming);
+  return {
+    ...row,
+    ...timing ? { timing } : {}
   };
 }
 function parseQuoteOutput(raw) {
@@ -1197,7 +1222,7 @@ function createDepositService(baseUrl, options) {
         );
       }
       const data = await response.json();
-      const deposits = Array.isArray(data?.deposits) ? data.deposits : [];
+      const deposits = Array.isArray(data?.deposits) ? data.deposits.map(normalizeHistoryTiming) : [];
       const nextCursor = data?.nextCursor ?? data?.next_cursor ?? null;
       debugLog(debug, scope, "fetchDepositHistory:success", {
         recipient: shortRef(params.recipient),
@@ -3351,8 +3376,84 @@ function TokenIcon({ symbol, className, fallback }) {
 }
 TokenIcon.displayName = "TokenIcon";
 
+// src/core/deposit-timing.ts
+var FALLBACK_SOFT_DELAY_MS = {
+  confirming: 90 * 1e3,
+  received: 90 * 1e3,
+  bridging: 4 * 60 * 1e3
+};
+var FALLBACK_ESCALATED_DELAY_MS = 10 * 60 * 1e3;
+var MIN_SOFT_DELAY_MS = 90 * 1e3;
+function formatExpectedDuration(seconds) {
+  if (!Number.isFinite(seconds) || seconds <= 0) return "a few seconds";
+  if (seconds < 60) {
+    const whole = Math.round(seconds);
+    return `~${whole} second${whole === 1 ? "" : "s"}`;
+  }
+  return `~${Math.max(1, Math.round(seconds / 60))} min`;
+}
+function resolveServedThresholds(timing) {
+  const softMs = Math.max(timing.softDelaySeconds * 1e3, MIN_SOFT_DELAY_MS);
+  return {
+    softMs,
+    escalatedMs: Math.max(timing.escalatedDelaySeconds * 1e3, softMs)
+  };
+}
+function resolveServedTimingState(timing, totalElapsedMs) {
+  const { softMs, escalatedMs } = resolveServedThresholds(timing);
+  if (totalElapsedMs >= escalatedMs) return "escalated";
+  if (totalElapsedMs >= softMs) return "soft";
+  return "expected";
+}
+function resolvePendingTimingState({
+  timing,
+  totalElapsedMs,
+  phaseId,
+  phaseElapsedMs
+}) {
+  if (timing) return resolveServedTimingState(timing, totalElapsedMs);
+  if (totalElapsedMs >= FALLBACK_ESCALATED_DELAY_MS) return "escalated";
+  if (phaseId && phaseElapsedMs >= FALLBACK_SOFT_DELAY_MS[phaseId]) {
+    return "soft";
+  }
+  return "expected";
+}
+var STATE_ORDER = {
+  expected: 0,
+  soft: 1,
+  escalated: 2
+};
+function advancePendingTimingState(previous, next) {
+  return STATE_ORDER[next] > STATE_ORDER[previous] ? next : previous;
+}
+
+// src/core/history-timing.ts
+var TIMED_HISTORY_STATUSES = /* @__PURE__ */ new Set(["pending", "processing", "delayed"]);
+function resolveHistoryTiming({
+  status,
+  timing,
+  createdAt,
+  nowMs
+}) {
+  if (!TIMED_HISTORY_STATUSES.has(status) || !timing || !createdAt) {
+    return void 0;
+  }
+  const createdAtMs = Date.parse(createdAt);
+  if (!Number.isFinite(createdAtMs)) return void 0;
+  const elapsedMs = Math.max(0, nowMs - createdAtMs);
+  const state = resolveServedTimingState(timing, elapsedMs);
+  const { softMs, escalatedMs } = resolveServedThresholds(timing);
+  const nextTransitionAtMs = state === "expected" ? createdAtMs + softMs : state === "soft" ? createdAtMs + escalatedMs : void 0;
+  return {
+    state,
+    expectedDuration: formatExpectedDuration(timing.expectedSeconds),
+    ...nextTransitionAtMs !== void 0 ? { nextTransitionAtMs } : {}
+  };
+}
+
 // src/components/history/DepositHistoryPanel.tsx
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var MAX_TIMER_DELAY_MS = 2147e6;
 function shortenHash(hash) {
   if (hash.length <= 14) return hash;
   return `${hash.slice(0, 6)}\u2026${hash.slice(-4)}`;
@@ -3472,6 +3573,48 @@ function DepositHistoryPanel({
     () => filterVisibleDeposits(deposits),
     [deposits]
   );
+  const [nowMs, setNowMs] = useState3(() => Date.now());
+  const timingPresentations = useMemo4(
+    () => visibleDeposits.map(
+      (deposit) => resolveHistoryTiming({
+        status: deposit.status,
+        timing: deposit.timing,
+        createdAt: deposit.createdAt,
+        nowMs
+      })
+    ),
+    [nowMs, visibleDeposits]
+  );
+  useEffect5(() => {
+    setNowMs(Date.now());
+  }, [visibleDeposits]);
+  useEffect5(() => {
+    const nextBoundary = timingPresentations.reduce(
+      (earliest, presentation) => {
+        const next = presentation?.nextTransitionAtMs;
+        if (next === void 0) return earliest;
+        return earliest === void 0 || next < earliest ? next : earliest;
+      },
+      void 0
+    );
+    if (nextBoundary === void 0) return;
+    let timeout;
+    const updateAtBoundary = () => {
+      const current = Date.now();
+      if (current < nextBoundary) {
+        timeout = setTimeout(
+          updateAtBoundary,
+          Math.min(nextBoundary - current, MAX_TIMER_DELAY_MS)
+        );
+        return;
+      }
+      setNowMs(current);
+    };
+    updateAtBoundary();
+    return () => {
+      if (timeout !== void 0) clearTimeout(timeout);
+    };
+  }, [timingPresentations]);
   return /* @__PURE__ */ jsxs8(
     "div",
     {
@@ -3548,6 +3691,7 @@ function DepositHistoryPanel({
                 HistoryCard,
                 {
                   deposit,
+                  timing: timingPresentations[i],
                   position: i,
                   recipient,
                   onRecover,
@@ -3575,6 +3719,7 @@ function DepositHistoryPanel({
 }
 function HistoryCard({
   deposit,
+  timing,
   position,
   recipient,
   onRecover,
@@ -3682,6 +3827,16 @@ function HistoryCard({
               }
             )
           ] }),
+          timing && /* @__PURE__ */ jsx13(
+            "span",
+            {
+              className: "rs-history-card-timing",
+              "data-state": timing.state,
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              children: timing.state === "expected" ? `Usually arrives in ${timing.expectedDuration}` : timing.state === "soft" ? "Taking longer than usual" : "Taking much longer than usual"
+            }
+          ),
           recoverable && /* @__PURE__ */ jsxs8(
             Button,
             {
@@ -6325,12 +6480,6 @@ var MAX_POLL_INTERVAL = 3e4;
 var BACKOFF_MULTIPLIER = 1.5;
 var SWAPPED_RECEIPT_STATUS_RETRY_INTERVAL_MS = 1e3;
 var SWAPPED_FIAT_STATUS_MAX_ATTEMPTS = 12;
-var ESCALATED_DELAY_MS = 10 * 60 * 1e3;
-var SOFT_DELAY_MS = {
-  confirming: 90 * 1e3,
-  received: 90 * 1e3,
-  bridging: 4 * 60 * 1e3
-};
 var PHASE_TIMINGS_PREFIX = "rhinestone:phase-timings";
 var PAYMENT_METHOD_LABELS = {
   creditcard: "Card",
@@ -6610,7 +6759,6 @@ function ProcessingStep({
     }
     return { type: "processing" };
   });
-  const [elapsedSeconds, setElapsedSeconds] = useState13(0);
   const [phaseTimings, setPhaseTimings] = useState13(() => {
     const saved = loadPhaseTimings(txHash);
     if (saved) {
@@ -6619,7 +6767,15 @@ function ProcessingStep({
     }
     return { startedAt: startTimeRef.current };
   });
-  const [hasEscalatedDelay, setHasEscalatedDelay] = useState13(false);
+  const [elapsedSeconds, setElapsedSeconds] = useState13(
+    () => Math.max(0, Math.floor((Date.now() - startTimeRef.current) / 1e3))
+  );
+  const [latchedTiming, setLatchedTiming] = useState13(quote?.timing);
+  if (latchedTiming === void 0 && quote?.timing !== void 0) {
+    setLatchedTiming(quote.timing);
+  }
+  const timingStateRef = useRef10("expected");
+  const servedTimingLatchRef = useRef10(false);
   const updatePhaseTimings = useCallback9(
     (updater) => {
       setPhaseTimings((previous) => {
@@ -6925,21 +7081,6 @@ function ProcessingStep({
     state.type,
     txHash
   ]);
-  useEffect14(() => {
-    if (directTransfer || state.type !== "processing") return;
-    const timeoutId = setTimeout(() => {
-      if (escalatedDelayRef.current) return;
-      escalatedDelayRef.current = true;
-      setHasEscalatedDelay(true);
-      const message = "Transfer is taking longer than expected. Your funds are safe and processing will continue automatically.";
-      debugLog(debug, "processing", "state:delay-escalated", {
-        txHash,
-        timeoutMs: ESCALATED_DELAY_MS
-      });
-      onErrorRef.current?.(message, "PROCESS_TIMEOUT");
-    }, ESCALATED_DELAY_MS);
-    return () => clearTimeout(timeoutId);
-  }, [debug, directTransfer, onErrorRef, state.type, txHash]);
   const isComplete = state.type === "complete";
   const isFailed = state.type === "failed";
   const isProcessing = state.type === "processing";
@@ -7039,9 +7180,43 @@ function ProcessingStep({
   const currentPhaseId = getCurrentPhaseId(state, phaseTimings);
   const activePhaseStartedAt = currentPhaseId ? getPhaseStartTime(currentPhaseId, phaseTimings) : void 0;
   const activePhaseElapsedMs = isProcessing && activePhaseStartedAt !== void 0 ? timelineNowMs - activePhaseStartedAt : 0;
-  const delayPhaseId = isProcessing && currentPhaseId && activePhaseElapsedMs >= SOFT_DELAY_MS[currentPhaseId] ? currentPhaseId : void 0;
-  void delayPhaseId;
-  void hasEscalatedDelay;
+  if (latchedTiming !== void 0 && !servedTimingLatchRef.current) {
+    servedTimingLatchRef.current = true;
+    timingStateRef.current = "expected";
+  }
+  const timingState = isProcessing ? advancePendingTimingState(
+    timingStateRef.current,
+    resolvePendingTimingState({
+      timing: latchedTiming,
+      totalElapsedMs: elapsedSeconds * 1e3,
+      phaseId: currentPhaseId,
+      phaseElapsedMs: activePhaseElapsedMs
+    })
+  ) : timingStateRef.current;
+  timingStateRef.current = timingState;
+  const expectedDuration = latchedTiming && timingState === "expected" ? formatExpectedDuration(latchedTiming.expectedSeconds) : void 0;
+  useEffect14(() => {
+    if (directTransfer || !isProcessing || timingState !== "escalated") return;
+    if (escalatedDelayRef.current) return;
+    escalatedDelayRef.current = true;
+    debugLog(debug, "processing", "state:delay-escalated", {
+      txHash,
+      timeoutMs: latchedTiming ? resolveServedThresholds(latchedTiming).escalatedMs : FALLBACK_ESCALATED_DELAY_MS,
+      served: latchedTiming !== void 0
+    });
+    onErrorRef.current?.(
+      "Transfer is taking longer than expected. Your funds are safe and processing will continue automatically.",
+      "PROCESS_TIMEOUT"
+    );
+  }, [
+    debug,
+    directTransfer,
+    isProcessing,
+    latchedTiming,
+    onErrorRef,
+    timingState,
+    txHash
+  ]);
   const sourceChainIcon = getChainIcon(displaySourceChain);
   const targetChainIcon = getChainIcon(targetChainId);
   const sourceChainName = getChainName(displaySourceChain);
@@ -7270,6 +7445,11 @@ function ProcessingStep({
         })()
       ] }),
       isFailed && failureMessage && /* @__PURE__ */ jsx27(Callout, { variant: "error", children: failureMessage }),
+      isProcessing && expectedDuration !== void 0 && /* @__PURE__ */ jsxs20("p", { className: "rs-pending-expectation", children: [
+        "Usually arrives in ",
+        expectedDuration
+      ] }),
+      isProcessing && latchedTiming !== void 0 && timingState !== "expected" && /* @__PURE__ */ jsx27(Callout, { variant: "warning", children: timingState === "soft" ? "Taking longer than usual. Your funds are safe and this will complete automatically." : "This is taking much longer than usual. Your funds are safe and processing continues automatically." }),
       isProcessing && /* @__PURE__ */ jsx27(
         Button,
         {
@@ -7559,6 +7739,7 @@ export {
   isUnsupportedChainSwitchError,
   formatUserError,
   Tooltip,
+  formatExpectedDuration,
   markSubmissionUncertain,
   isSubmissionUncertain,
   formatTokenAmount,

package/dist/{chunk-3HCCR54R.mjs → chunk-XCBDJPBD.mjs}

@@ -1,5 +1,5 @@
 // src/core/version.ts
-var MODAL_VERSION = "0.16.0";
+var MODAL_VERSION = "0.17.0";
 var SERVICE_HEADERS = {
   "Content-Type": "application/json",
   "x-deposit-modal-version": MODAL_VERSION