@rhinestone/deposit-modal 0.14.1 → 0.15.0

package/dist/chunk-QJ7RCCU7.mjs

@@ -0,0 +1,704 @@
+import {
+  AnalyticsSession,
+  BodyHeader,
+  Button,
+  ChainCatalogProvider,
+  ChevronLeftIcon,
+  ClaimAnalyticsControllerProvider,
+  CloseIcon,
+  CoinsIcon,
+  ListRow,
+  Modal,
+  PoweredBy,
+  RECOVERY_LOOKUP_MISS_COPY,
+  RecoveryError,
+  RecoveryLookupScreen,
+  RecoveryOutcomeScreen,
+  RecoveryReviewScreen,
+  RpcUrlsProvider,
+  applyTheme,
+  checkBackendUrl,
+  claimFailureReasonForError,
+  classifyRecoveryLookup,
+  createDepositService,
+  describeRecoveryDeposit,
+  formatTokenAmount,
+  formatUserError,
+  recoverySigningChainId,
+  sourceDepositTxHash,
+  submitSignedRecovery,
+  toRecoverableDeposit,
+  useClaimAnalyticsController,
+  useLatestRef,
+  useStableRpcUrls
+} from "./chunk-5VONFVQN.mjs";
+import {
+  getTokenDecimalsByAddress,
+  getTokenSymbol,
+  tokenIconUrl
+} from "./chunk-EAGMY3QE.mjs";
+
+// src/ClaimModal.tsx
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState
+} from "react";
+import { formatUnits } from "viem";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function evmChainIdFromCaip2(chain) {
+  if (!chain?.startsWith("eip155:")) return null;
+  const id = Number.parseInt(chain.slice("eip155:".length), 10);
+  return Number.isFinite(id) ? id : null;
+}
+function isEligible(row) {
+  return toRecoverableDeposit(row) !== null;
+}
+function describeDeposit(row) {
+  const chainId = evmChainIdFromCaip2(row.chain) ?? 0;
+  return {
+    chainId,
+    ...describeRecoveryDeposit({
+      chainId,
+      token: row.token,
+      amountRaw: row.sourceAmount ?? row.amount
+    })
+  };
+}
+function humanizeStatus(status) {
+  if (!status) return void 0;
+  const spaced = status.replace(/[_-]+/g, " ").trim();
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+var INITIAL_STATE = {
+  step: "lookup",
+  deposits: [],
+  selected: null,
+  result: null,
+  error: null,
+  retryable: true
+};
+function claimReducer(state, action) {
+  switch (action.type) {
+    case "lookup/results":
+      return {
+        ...state,
+        deposits: action.deposits,
+        selected: action.autoSelect,
+        step: action.autoSelect ? "review" : "select",
+        error: null
+      };
+    case "select":
+      return { ...state, selected: action.deposit, step: "review", error: null };
+    case "back":
+      if (state.step === "failed") return { ...state, step: "review", error: null };
+      if (state.step === "review")
+        return {
+          ...state,
+          step: state.deposits.length > 1 ? "select" : "lookup",
+          error: null
+        };
+      if (state.step === "select") return { ...INITIAL_STATE };
+      return state;
+    case "submit":
+      return { ...state, step: "processing", error: null };
+    case "complete":
+      return {
+        ...state,
+        step: "complete",
+        result: {
+          txHash: action.txHash,
+          amount: action.amount,
+          amountDisplay: action.amountDisplay,
+          symbol: action.symbol,
+          destination: action.destination,
+          chain: action.chain
+        }
+      };
+    case "failed":
+      return {
+        ...state,
+        step: "failed",
+        error: action.error,
+        retryable: action.retryable ?? true
+      };
+    case "reset":
+      return { ...INITIAL_STATE };
+    default:
+      return state;
+  }
+}
+function buildClaimAnalyticsSessionProperties({
+  inline = false,
+  closeOnOverlayClick = false,
+  defaultTxHash,
+  defaultRefundDestination
+}) {
+  return {
+    presentation: inline ? "inline" : "overlay",
+    overlay_close_enabled: !inline && closeOnOverlayClick,
+    prefills: {
+      transaction_hash: defaultTxHash !== void 0,
+      refund_destination: defaultRefundDestination !== void 0
+    }
+  };
+}
+var STANDALONE_CORRELATION = {
+  entry_source: "standalone"
+};
+function analyticsStepForClaimStep(step) {
+  if (step === "lookup") return "lookup";
+  if (step === "select") return "select";
+  if (step === "review") return "review";
+  return "submit";
+}
+function ClaimModal({
+  signRecovery,
+  isOpen,
+  onClose,
+  inline,
+  closeOnOverlayClick,
+  backendUrl,
+  rpcUrls: rpcUrlsProp,
+  defaultTxHash,
+  defaultRefundDestination,
+  theme,
+  uiConfig,
+  className,
+  onReady,
+  onLifecycle,
+  onEvent,
+  onError,
+  enableAnalyticsIngest,
+  analyticsIngestUrl,
+  debug,
+  onUiState
+}) {
+  checkBackendUrl("ClaimModal", backendUrl);
+  const modalRef = useRef(null);
+  const onReadyRef = useLatestRef(onReady);
+  const onLifecycleRef = useLatestRef(onLifecycle);
+  const onErrorRef = useLatestRef(onError);
+  const analyticsControllerRef = useRef(null);
+  const lastSubmitFailureRef = useRef(null);
+  const previousOpenRef = useRef(isOpen);
+  const rpcUrls = useStableRpcUrls(rpcUrlsProp);
+  const service = useMemo(
+    () => createDepositService(backendUrl, { debug, debugScope: "service:claim" }),
+    [backendUrl, debug]
+  );
+  const [state, dispatch] = useReducer(claimReducer, INITIAL_STATE);
+  const operationEpochRef = useRef(0);
+  const isOpenRef = useRef(isOpen);
+  isOpenRef.current = isOpen;
+  useEffect(() => {
+    if (!isOpen || !modalRef.current) return;
+    return applyTheme(modalRef.current, theme);
+  }, [isOpen, theme]);
+  useEffect(() => {
+    if (isOpen) {
+      onReadyRef.current?.();
+    }
+  }, [isOpen, onReadyRef]);
+  useEffect(() => {
+    if (previousOpenRef.current && !isOpen) {
+      const analytics = analyticsControllerRef.current;
+      analytics?.abandon("modal_close");
+      analytics?.close("host_controlled");
+    }
+    previousOpenRef.current = isOpen;
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) {
+      operationEpochRef.current += 1;
+      dispatch({ type: "reset" });
+    }
+  }, [isOpen]);
+  const closeWithSource = useCallback(
+    (source) => {
+      const analytics = analyticsControllerRef.current;
+      if (state.step === "processing") {
+        analytics?.friction("modal_close_refused_in_flight", "submit");
+        return;
+      }
+      analytics?.abandon("modal_close");
+      analytics?.close(source);
+      operationEpochRef.current += 1;
+      onClose();
+    },
+    [state.step, onClose]
+  );
+  const handleModalDismiss = useCallback(
+    (reason) => {
+      closeWithSource(
+        reason === "escape" ? "escape" : reason === "overlay" ? "overlay" : "header_button"
+      );
+    },
+    [closeWithSource]
+  );
+  const goBack = useCallback(() => {
+    const analytics = analyticsControllerRef.current;
+    const previousFailure = lastSubmitFailureRef.current;
+    if (state.step === "failed" && previousFailure?.retryable) {
+      lastSubmitFailureRef.current = null;
+      analytics?.retry(previousFailure.reason, "submit");
+    } else {
+      if (state.step === "failed") {
+        lastSubmitFailureRef.current = null;
+        analytics?.rearmStep("submit");
+      }
+      analytics?.abandon("back");
+    }
+    dispatch({ type: "back" });
+  }, [state.step]);
+  const canGoBack = state.step === "select" || state.step === "review" || state.step === "failed";
+  const onUiStateRef = useLatestRef(onUiState);
+  useEffect(() => {
+    onUiStateRef.current?.({
+      screen: state.step,
+      back: canGoBack ? goBack : void 0,
+      submitting: state.step === "processing"
+    });
+  }, [state.step, canGoBack, goBack, onUiStateRef]);
+  const showBackButton = uiConfig?.showBackButton ?? true;
+  return /* @__PURE__ */ jsx(RpcUrlsProvider, { value: rpcUrls, children: /* @__PURE__ */ jsx(ChainCatalogProvider, { service, rpcUrls, children: /* @__PURE__ */ jsx(
+    Modal,
+    {
+      isOpen,
+      onClose: handleModalDismiss,
+      className,
+      inline,
+      closeOnOverlayClick,
+      ariaLabel: "Claim your deposit",
+      children: /* @__PURE__ */ jsx(
+        AnalyticsSession,
+        {
+          modal: "claim",
+          sessionProperties: buildClaimAnalyticsSessionProperties({
+            inline,
+            closeOnOverlayClick,
+            defaultTxHash,
+            defaultRefundDestination
+          }),
+          onEvent,
+          backendUrl,
+          enableIngest: enableAnalyticsIngest,
+          ingestUrl: analyticsIngestUrl,
+          children: /* @__PURE__ */ jsx(
+            ClaimAnalyticsControllerProvider,
+            {
+              controllerRef: analyticsControllerRef,
+              correlation: STANDALONE_CORRELATION,
+              children: /* @__PURE__ */ jsxs("div", { ref: modalRef, className: "rs-modal", children: [
+                /* @__PURE__ */ jsxs("div", { className: "rs-modal-header--redesigned", children: [
+                  /* @__PURE__ */ jsx("div", { className: "rs-modal-header-nav-left", children: showBackButton && canGoBack && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "rs-modal-header-back",
+                      "aria-label": "Go back",
+                      onClick: goBack,
+                      children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { className: "rs-modal-header-nav-right", children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => closeWithSource("header_button"),
+                      disabled: state.step === "processing",
+                      className: "rs-modal-close",
+                      "aria-label": "Close",
+                      children: /* @__PURE__ */ jsx(CloseIcon, {})
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "rs-modal-body", children: /* @__PURE__ */ jsx(
+                  ClaimBody,
+                  {
+                    state,
+                    dispatch,
+                    service,
+                    signRecovery,
+                    backendUrl,
+                    debug,
+                    defaultTxHash,
+                    defaultRefundDestination,
+                    onClose: closeWithSource,
+                    onBack: goBack,
+                    operationEpochRef,
+                    isOpenRef,
+                    lastSubmitFailureRef,
+                    onLifecycleRef,
+                    onErrorRef
+                  }
+                ) })
+              ] })
+            }
+          )
+        }
+      )
+    }
+  ) }) });
+}
+function ClaimBody({
+  state,
+  dispatch,
+  service,
+  signRecovery,
+  backendUrl,
+  debug,
+  defaultTxHash,
+  defaultRefundDestination,
+  onClose,
+  onBack,
+  operationEpochRef,
+  isOpenRef,
+  lastSubmitFailureRef,
+  onLifecycleRef,
+  onErrorRef
+}) {
+  const analytics = useClaimAnalyticsController();
+  useEffect(() => {
+    analytics.openSession();
+    analytics.openStep(analyticsStepForClaimStep(state.step));
+  }, [analytics, state.step]);
+  switch (state.step) {
+    case "lookup":
+      return /* @__PURE__ */ jsx(
+        LookupStep,
+        {
+          service,
+          defaultTxHash,
+          operationEpochRef,
+          isOpenRef,
+          onResults: (deposits) => {
+            const eligible = deposits.filter(isEligible);
+            const autoSelect = deposits.length === 1 && eligible.length === 1 ? deposits[0] : null;
+            analytics.completeStep("lookup");
+            if (autoSelect) reportSelection(autoSelect, true);
+            dispatch({ type: "lookup/results", deposits, autoSelect });
+          },
+          onLifecycleRef,
+          onErrorRef
+        }
+      );
+    case "select":
+      return /* @__PURE__ */ jsx(
+        SelectStep,
+        {
+          deposits: state.deposits,
+          onSelect: (deposit) => {
+            analytics.completeStep("select");
+            reportSelection(deposit, false);
+            dispatch({ type: "select", deposit });
+          }
+        }
+      );
+    case "review":
+    case "processing":
+      return /* @__PURE__ */ jsx(
+        ReviewStep,
+        {
+          deposit: state.selected,
+          submitting: state.step === "processing",
+          defaultRefundDestination,
+          onSubmit: (destination) => submitRecoveryRequest(destination)
+        }
+      );
+    case "complete":
+      return /* @__PURE__ */ jsx(
+        ResultStep,
+        {
+          result: state.result,
+          onClose: () => onClose("success_done"),
+          onReset: () => {
+            analytics.resetAttempt();
+            dispatch({ type: "reset" });
+          }
+        }
+      );
+    case "failed":
+      return /* @__PURE__ */ jsx(
+        ResultStep,
+        {
+          error: state.error,
+          onClose: () => onClose("failure_cancel"),
+          onRetry: state.retryable ? onBack : void 0
+        }
+      );
+    default:
+      return null;
+  }
+  function reportSelection(deposit, autoSelected) {
+    if (!deposit.id) return;
+    analytics.selectDeposit({
+      depositId: deposit.id,
+      transactionHash: deposit.txHash ?? null,
+      autoSelected
+    });
+  }
+  async function submitRecoveryRequest(destination) {
+    const deposit = state.selected;
+    if (!deposit) return;
+    const sourceChainId = evmChainIdFromCaip2(deposit.chain);
+    const signingChainId = recoverySigningChainId(deposit);
+    if (sourceChainId == null || signingChainId == null || !deposit.id || !deposit.recipient || !deposit.depositAddress || !deposit.token || !deposit.chain) {
+      analytics.failure("recovery_deposit_data_incomplete", false, "review");
+      analytics.outcome("failed");
+      dispatch({
+        type: "failed",
+        error: "Deposit is missing data required to recover it.",
+        // The missing fields come off the backend row already in memory, so a
+        // retry re-reads nothing and fails identically. Offering one would be a
+        // dead end, and would also contradict the `retryable` reported above.
+        retryable: false
+      });
+      return;
+    }
+    const signer = deposit.recipient;
+    const account = deposit.depositAddress;
+    const token = deposit.token;
+    const operationEpoch = operationEpochRef.current;
+    const isCurrentOperation = () => isOpenRef.current && operationEpochRef.current === operationEpoch;
+    analytics.completeStep("review");
+    analytics.openStep("submit");
+    dispatch({ type: "submit" });
+    onLifecycleRef.current?.({
+      type: "refund_requested",
+      account,
+      destination,
+      chain: sourceChainId
+    });
+    try {
+      const result = await submitSignedRecovery({
+        backendUrl,
+        chainId: signingChainId,
+        depositId: deposit.id,
+        signer,
+        destination,
+        signRecovery,
+        debug
+      });
+      if (!isCurrentOperation()) return;
+      const paidTo = destination;
+      const decimals = getTokenDecimalsByAddress(token, sourceChainId);
+      const symbol = getTokenSymbol(token, sourceChainId);
+      const refundedRaw = BigInt(
+        result.amount ?? deposit.sourceAmount ?? deposit.amount ?? "0"
+      );
+      const amountDisplay = formatTokenAmount(Number(formatUnits(refundedRaw, decimals)), symbol) ?? formatUnits(refundedRaw, decimals);
+      dispatch({
+        type: "complete",
+        txHash: result.transactionHash,
+        amount: result.amount,
+        amountDisplay,
+        symbol,
+        destination: paidTo,
+        chain: sourceChainId
+      });
+      analytics.handoff(
+        {
+          depositId: deposit.id,
+          transactionHash: deposit.txHash ?? null,
+          refundTransactionHash: result.transactionHash
+        },
+        "submit"
+      );
+      analytics.completeStep("submit");
+      analytics.outcome("completed");
+      onLifecycleRef.current?.({
+        type: "complete",
+        txHash: result.transactionHash,
+        account,
+        destination: paidTo,
+        chain: sourceChainId,
+        token,
+        amount: result.amount
+      });
+    } catch (err) {
+      if (!isCurrentOperation()) return;
+      const recoveryError = err instanceof RecoveryError ? err : void 0;
+      const status = recoveryError?.status;
+      const message = recoveryError?.message ?? formatUserError(
+        err instanceof Error ? err.message : "Recovery failed"
+      );
+      const retryable = recoveryError?.retryable ?? true;
+      dispatch({
+        type: "failed",
+        error: message,
+        retryable
+      });
+      const reason = claimFailureReasonForError(err);
+      lastSubmitFailureRef.current = { reason, retryable };
+      analytics.failure(reason, retryable, "submit");
+      analytics.outcome("failed");
+      onLifecycleRef.current?.({ type: "failed", status, error: message });
+      onErrorRef.current?.({ message, code: "CLAIM_FAILED" });
+    }
+  }
+}
+function LookupStep({
+  service,
+  defaultTxHash,
+  operationEpochRef,
+  isOpenRef,
+  onResults,
+  onLifecycleRef,
+  onErrorRef
+}) {
+  const analytics = useClaimAnalyticsController();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const handleLookup = useCallback(
+    async (txHash) => {
+      const operationEpoch = operationEpochRef.current;
+      const isCurrentOperation = () => isOpenRef.current && operationEpochRef.current === operationEpoch;
+      setError(null);
+      setLoading(true);
+      analytics.rearmStep("lookup");
+      try {
+        const deposits = await service.lookupRecoverableDeposits({ txHash });
+        if (!isCurrentOperation()) return;
+        onLifecycleRef.current?.({
+          type: "lookup",
+          txHash,
+          matches: deposits.length
+        });
+        const { eligible, miss } = classifyRecoveryLookup(deposits);
+        analytics.lookupResult(deposits.length, eligible.length);
+        if (miss) {
+          analytics.friction(
+            miss === "not_found" ? "lookup_no_deposits_found" : "lookup_no_eligible_deposits",
+            "lookup"
+          );
+          setError(RECOVERY_LOOKUP_MISS_COPY[miss]);
+          return;
+        }
+        onResults(deposits);
+      } catch (err) {
+        if (!isCurrentOperation()) return;
+        const message = formatUserError(
+          err instanceof Error ? err.message : "Lookup failed"
+        );
+        analytics.failure("lookup_failed", true, "lookup");
+        setError(message);
+        onErrorRef.current?.({ message, code: "CLAIM_LOOKUP_FAILED" });
+      } finally {
+        if (isCurrentOperation()) setLoading(false);
+      }
+    },
+    [
+      analytics,
+      service,
+      operationEpochRef,
+      isOpenRef,
+      onResults,
+      onLifecycleRef,
+      onErrorRef
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    RecoveryLookupScreen,
+    {
+      title: "Claim a deposit",
+      subtitle: "Get funds from a failed deposit sent back to you on the source chain.",
+      defaultTxHash,
+      loading,
+      error,
+      onSubmit: handleLookup,
+      onInvalid: () => analytics.friction("lookup_transaction_hash_invalid", "lookup")
+    }
+  );
+}
+function SelectStep({
+  deposits,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "rs-screen", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rs-screen-body rs-screen-body--gap-32", children: [
+      /* @__PURE__ */ jsx(
+        BodyHeader,
+        {
+          icon: /* @__PURE__ */ jsx(CoinsIcon, {}),
+          title: "Select a deposit",
+          subtitle: "This transaction produced multiple deposits. Choose the one to claim."
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "rs-list", children: deposits.map((row) => {
+        const { symbol, amount, chainName } = describeDeposit(row);
+        const eligible = isEligible(row);
+        return /* @__PURE__ */ jsx(
+          ListRow,
+          {
+            leadingMedia: tokenIconUrl(symbol),
+            title: `${amount} ${symbol}`,
+            subtitle: chainName,
+            meta: eligible ? void 0 : humanizeStatus(row.status),
+            disabled: !eligible,
+            onClick: () => eligible && onSelect(row)
+          },
+          row.id ?? `${row.depositAddress}:${row.token}`
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ jsx(PoweredBy, {})
+  ] });
+}
+function ReviewStep({
+  deposit,
+  submitting,
+  defaultRefundDestination,
+  onSubmit
+}) {
+  const analytics = useClaimAnalyticsController();
+  return /* @__PURE__ */ jsx(
+    RecoveryReviewScreen,
+    {
+      chainId: evmChainIdFromCaip2(deposit.chain) ?? 0,
+      token: deposit.token,
+      amountRaw: deposit.sourceAmount ?? deposit.amount,
+      txHash: sourceDepositTxHash(deposit),
+      defaultDestination: defaultRefundDestination,
+      submitting,
+      onSubmit,
+      onDestinationInvalid: () => analytics.friction("refund_destination_invalid", "review")
+    }
+  );
+}
+function ResultStep({
+  result,
+  error,
+  onClose,
+  onReset,
+  onRetry
+}) {
+  return /* @__PURE__ */ jsx(
+    RecoveryOutcomeScreen,
+    {
+      result: result ? {
+        amountDisplay: result.amountDisplay,
+        symbol: result.symbol,
+        destination: result.destination,
+        txHash: result.txHash,
+        chainId: result.chain
+      } : null,
+      error,
+      children: result ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        onReset && /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onReset, fullWidth: true, children: "Claim another deposit" }),
+        /* @__PURE__ */ jsx(Button, { onClick: onClose, fullWidth: true, children: "Done" })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: onClose, fullWidth: true, children: "Cancel" }),
+        onRetry && /* @__PURE__ */ jsx(Button, { onClick: onRetry, fullWidth: true, children: "Try again" })
+      ] })
+    }
+  );
+}
+
+export {
+  buildClaimAnalyticsSessionProperties,
+  ClaimModal
+};