@rhinestone/deposit-modal 0.8.1 → 0.9.0

package/dist/chunk-4WB2FHGC.mjs

@@ -0,0 +1,865 @@
+import {
+  ListRow
+} from "./chunk-LGVJWVSS.mjs";
+import {
+  AlertTriangleIcon,
+  BodyHeader,
+  Button,
+  Callout,
+  CdnIcon,
+  CheckIcon,
+  ChevronLeftIcon,
+  CloseIcon,
+  CoinsIcon,
+  ExternalLinkIcon,
+  HandCoinsIcon,
+  Modal,
+  PoweredBy,
+  RpcUrlsProvider,
+  TokenIcon,
+  applyTheme,
+  checkBackendUrl,
+  createDepositService,
+  debugError,
+  debugLog,
+  formatTokenAmount,
+  formatUserError,
+  useLatestRef,
+  useStableRpcUrls
+} from "./chunk-VOGZAZB2.mjs";
+import {
+  SERVICE_HEADERS
+} from "./chunk-OSI2CFGL.mjs";
+import {
+  getChainIcon,
+  getChainName,
+  getExplorerTxUrl,
+  getTokenDecimalsByAddress,
+  getTokenSymbol,
+  tokenIconUrl
+} from "./chunk-A223BLVC.mjs";
+
+// src/ClaimModal.tsx
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState
+} from "react";
+import { formatUnits, isAddress } from "viem";
+
+// src/components/ui/Input.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Input = forwardRef(
+  ({ label, error, variant, className = "", ...props }, ref) => {
+    const inputVariant = error ? "error" : variant || "default";
+    return /* @__PURE__ */ jsxs("div", { className: "rs-input-wrapper", children: [
+      label && /* @__PURE__ */ jsx("label", { className: "rs-input-label", children: label }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          className: `rs-input rs-input--${inputVariant} ${className}`,
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsxs("p", { className: "rs-input-error", children: [
+        /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "rs-input-error-icon" }),
+        error
+      ] })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/core/recovery.ts
+var RECOVER_DOMAIN = {
+  name: "Rhinestone Deposit Recovery",
+  version: "1"
+};
+var RECOVER_TYPES = {
+  RecoverDeposit: [
+    { name: "depositId", type: "uint256" },
+    { name: "destination", type: "address" }
+  ]
+};
+var RecoveryError = class extends Error {
+  constructor(message, status, code, retryable = false) {
+    super(message);
+    this.name = "RecoveryError";
+    this.status = status;
+    this.code = code;
+    this.retryable = retryable;
+  }
+};
+function formatRecoveryError(status, code, serverMessage) {
+  switch (code) {
+    case "DEPOSIT_NOT_RECOVERABLE":
+      return {
+        message: "This deposit can't be recovered \u2014 it may already have been claimed.",
+        retryable: false
+      };
+    case "RECOVERY_UNSUPPORTED":
+      return {
+        message: "This deposit can't be recovered automatically. Contact support to get your funds back.",
+        retryable: false
+      };
+    case "SIGNATURE_INVALID":
+      return {
+        message: "That signature wasn't accepted for this wallet. Contact support to recover this deposit.",
+        retryable: false
+      };
+    case "VERIFICATION_UNAVAILABLE":
+      return {
+        message: "Couldn't verify your signature just now. Try again shortly.",
+        retryable: true
+      };
+    case "REFUND_RECONCILIATION_REQUIRED":
+      return {
+        message: "Your recovery is being reviewed. Contact support with this deposit if it doesn't arrive.",
+        retryable: false
+      };
+    case "REFUND_FAILED":
+      return {
+        message: serverMessage ?? "The recovery couldn't be completed. Please try again or contact support.",
+        retryable: true
+      };
+    default:
+      if (status === 0) {
+        return {
+          message: "Couldn't reach the recovery service. Check your connection and try again.",
+          retryable: true
+        };
+      }
+      return {
+        message: serverMessage ?? "The recovery couldn't be completed. Please try again or contact support.",
+        retryable: true
+      };
+  }
+}
+async function submitSignedRecovery(params) {
+  const { backendUrl, depositId, signer, destination, signRecovery, debug } = params;
+  const scope = "service:recovery";
+  const typedData = {
+    domain: RECOVER_DOMAIN,
+    types: RECOVER_TYPES,
+    primaryType: "RecoverDeposit",
+    message: { depositId: BigInt(depositId), destination }
+  };
+  let signature;
+  try {
+    signature = await signRecovery({ typedData, signer, depositId, destination });
+  } catch (error) {
+    debugError(debug, scope, "signRecovery:failed", error);
+    throw new RecoveryError(
+      "Signature request was declined. Approve it in your wallet to recover this deposit.",
+      0,
+      void 0,
+      true
+    );
+  }
+  if (!signature) {
+    throw new RecoveryError(
+      "Signature request was declined. Approve it in your wallet to recover this deposit.",
+      0,
+      void 0,
+      true
+    );
+  }
+  const url = `${backendUrl.replace(/\/$/, "")}/deposits/recover`;
+  debugLog(debug, scope, "submitSignedRecovery:request", {
+    url,
+    depositId,
+    signer
+  });
+  let response;
+  try {
+    response = await fetch(url, {
+      method: "POST",
+      // The shared const, so recovery carries `x-deposit-modal-version` like
+      // every other backend call. Without it this path would be invisible in the
+      // per-client version telemetry the processor records.
+      headers: SERVICE_HEADERS,
+      // `depositId` as a string: it is a uint256 upstream and JSON numbers lose
+      // precision well before that range.
+      body: JSON.stringify({ depositId, destination, signature })
+    });
+  } catch (error) {
+    debugError(debug, scope, "submitSignedRecovery:network", error);
+    const { message, retryable } = formatRecoveryError(0);
+    throw new RecoveryError(message, 0, void 0, retryable);
+  }
+  if (!response.ok) {
+    const body = await response.json().catch(() => ({}));
+    debugError(debug, scope, "submitSignedRecovery:failed", body, {
+      status: response.status
+    });
+    const { message, retryable } = formatRecoveryError(
+      response.status,
+      body.code,
+      body.error
+    );
+    throw new RecoveryError(message, response.status, body.code, retryable);
+  }
+  const result = await response.json();
+  debugLog(debug, scope, "submitSignedRecovery:success", {
+    transactionHash: result.transactionHash
+  });
+  return result;
+}
+
+// src/ClaimModal.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } 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 row.status === "failed" || row.status === "rejected";
+}
+function describeDeposit(row) {
+  const chainId = evmChainIdFromCaip2(row.chain) ?? 0;
+  const decimals = getTokenDecimalsByAddress(row.token, chainId);
+  const symbol = getTokenSymbol(row.token, chainId);
+  const raw = BigInt(row.sourceAmount ?? row.amount ?? "0");
+  const human = Number(formatUnits(raw, decimals));
+  const amount = formatTokenAmount(human, symbol) ?? formatUnits(raw, decimals);
+  return {
+    chainId,
+    symbol,
+    amount,
+    chainName: getChainName(chainId),
+    chainIcon: getChainIcon(chainId)
+  };
+}
+function shortenHash(hash) {
+  return `${hash.slice(0, 10)}\u2026${hash.slice(-8)}`;
+}
+function shortenAddress(addr) {
+  return addr.length > 12 ? `${addr.slice(0, 6)}\u2026${addr.slice(-4)}` : addr;
+}
+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 ClaimModal({
+  signRecovery,
+  isOpen,
+  onClose,
+  inline,
+  closeOnOverlayClick,
+  backendUrl,
+  rpcUrls: rpcUrlsProp,
+  defaultTxHash,
+  defaultRefundDestination,
+  theme,
+  uiConfig,
+  className,
+  onReady,
+  onLifecycle,
+  onEvent,
+  onError,
+  debug
+}) {
+  checkBackendUrl("ClaimModal", backendUrl);
+  const modalRef = useRef(null);
+  const onReadyRef = useLatestRef(onReady);
+  const onLifecycleRef = useLatestRef(onLifecycle);
+  const onEventRef = useLatestRef(onEvent);
+  const onErrorRef = useLatestRef(onError);
+  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) applyTheme(modalRef.current, theme);
+  }, [isOpen, theme]);
+  useEffect(() => {
+    if (isOpen) {
+      onReadyRef.current?.();
+      onEventRef.current?.({ type: "claim_modal_open" });
+    }
+  }, [isOpen, onReadyRef, onEventRef]);
+  useEffect(() => {
+    if (!isOpen) {
+      operationEpochRef.current += 1;
+      dispatch({ type: "reset" });
+    }
+  }, [isOpen]);
+  const handleClose = useCallback(() => {
+    if (state.step !== "processing") {
+      operationEpochRef.current += 1;
+      onClose();
+    }
+  }, [state.step, onClose]);
+  const canGoBack = state.step === "select" || state.step === "review" || state.step === "failed";
+  const showBackButton = uiConfig?.showBackButton ?? true;
+  return /* @__PURE__ */ jsx2(RpcUrlsProvider, { value: rpcUrls, children: /* @__PURE__ */ jsx2(
+    Modal,
+    {
+      isOpen,
+      onClose: handleClose,
+      className,
+      inline,
+      closeOnOverlayClick,
+      children: /* @__PURE__ */ jsxs2("div", { ref: modalRef, className: "rs-modal", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "rs-modal-header--redesigned", children: [
+          /* @__PURE__ */ jsx2("div", { className: "rs-modal-header-nav-left", children: showBackButton && canGoBack && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              className: "rs-modal-header-back",
+              "aria-label": "Go back",
+              onClick: () => dispatch({ type: "back" }),
+              children: /* @__PURE__ */ jsx2(ChevronLeftIcon, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx2("div", { className: "rs-modal-header-nav-right", children: /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: handleClose,
+              disabled: state.step === "processing",
+              className: "rs-modal-close",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx2(CloseIcon, {})
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: "rs-modal-body", children: /* @__PURE__ */ jsx2(
+          ClaimBody,
+          {
+            state,
+            dispatch,
+            service,
+            signRecovery,
+            backendUrl,
+            debug,
+            defaultTxHash,
+            defaultRefundDestination,
+            onClose: handleClose,
+            operationEpochRef,
+            isOpenRef,
+            onLifecycleRef,
+            onEventRef,
+            onErrorRef
+          }
+        ) })
+      ] })
+    }
+  ) });
+}
+function ClaimBody({
+  state,
+  dispatch,
+  service,
+  signRecovery,
+  backendUrl,
+  debug,
+  defaultTxHash,
+  defaultRefundDestination,
+  onClose,
+  operationEpochRef,
+  isOpenRef,
+  onLifecycleRef,
+  onEventRef,
+  onErrorRef
+}) {
+  switch (state.step) {
+    case "lookup":
+      return /* @__PURE__ */ jsx2(
+        LookupStep,
+        {
+          service,
+          defaultTxHash,
+          operationEpochRef,
+          isOpenRef,
+          onResults: (deposits) => {
+            const eligible = deposits.filter(isEligible);
+            const autoSelect = deposits.length === 1 && eligible.length === 1 ? deposits[0] : null;
+            dispatch({ type: "lookup/results", deposits, autoSelect });
+          },
+          onLifecycleRef,
+          onEventRef,
+          onErrorRef
+        }
+      );
+    case "select":
+      return /* @__PURE__ */ jsx2(
+        SelectStep,
+        {
+          deposits: state.deposits,
+          onSelect: (deposit) => dispatch({ type: "select", deposit })
+        }
+      );
+    case "review":
+    case "processing":
+      return /* @__PURE__ */ jsx2(
+        ReviewStep,
+        {
+          deposit: state.selected,
+          submitting: state.step === "processing",
+          defaultRefundDestination,
+          onSubmit: (destination) => submitRecoveryRequest(destination)
+        }
+      );
+    case "complete":
+      return /* @__PURE__ */ jsx2(ResultStep, { result: state.result, onClose, onReset: () => dispatch({ type: "reset" }) });
+    case "failed":
+      return /* @__PURE__ */ jsx2(
+        ResultStep,
+        {
+          error: state.error,
+          onClose,
+          onRetry: state.retryable ? () => dispatch({ type: "back" }) : void 0
+        }
+      );
+    default:
+      return null;
+  }
+  async function submitRecoveryRequest(destination) {
+    const deposit = state.selected;
+    if (!deposit) return;
+    const sourceChainId = evmChainIdFromCaip2(deposit.chain);
+    if (sourceChainId == null || !deposit.id || !deposit.recipient || !deposit.depositAddress || !deposit.token || !deposit.chain) {
+      dispatch({
+        type: "failed",
+        error: "Deposit is missing data required to recover it."
+      });
+      return;
+    }
+    const signer = deposit.recipient;
+    const account = deposit.depositAddress;
+    const token = deposit.token;
+    const operationEpoch = operationEpochRef.current;
+    const isCurrentOperation = () => isOpenRef.current && operationEpochRef.current === operationEpoch;
+    dispatch({ type: "submit" });
+    onEventRef.current?.({
+      type: "claim_modal_refund_click",
+      chain: `eip155:${sourceChainId}`
+    });
+    onLifecycleRef.current?.({
+      type: "refund_requested",
+      account,
+      destination,
+      chain: sourceChainId
+    });
+    try {
+      const result = await submitSignedRecovery({
+        backendUrl,
+        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
+      });
+      onEventRef.current?.({
+        type: "claim_modal_complete",
+        chain: `eip155:${sourceChainId}`
+      });
+      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"
+      );
+      dispatch({
+        type: "failed",
+        error: message,
+        retryable: recoveryError?.retryable ?? true
+      });
+      onEventRef.current?.({
+        type: "claim_modal_failed",
+        chain: `eip155:${sourceChainId}`,
+        status
+      });
+      onLifecycleRef.current?.({ type: "failed", status, error: message });
+      onErrorRef.current?.({ message, code: "CLAIM_FAILED" });
+    }
+  }
+}
+function LookupStep({
+  service,
+  defaultTxHash,
+  operationEpochRef,
+  isOpenRef,
+  onResults,
+  onLifecycleRef,
+  onEventRef,
+  onErrorRef
+}) {
+  const [txHash, setTxHash] = useState(defaultTxHash ?? "");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const trimmed = txHash.trim();
+  const validTxHash = /^0x[a-fA-F0-9]{64}$/.test(trimmed);
+  const handleLookup = useCallback(async () => {
+    const operationEpoch = operationEpochRef.current;
+    const isCurrentOperation = () => isOpenRef.current && operationEpochRef.current === operationEpoch;
+    setError(null);
+    setLoading(true);
+    try {
+      const deposits = await service.lookupRecoverableDeposits({
+        txHash: trimmed
+      });
+      if (!isCurrentOperation()) return;
+      onLifecycleRef.current?.({
+        type: "lookup",
+        txHash: trimmed,
+        matches: deposits.length
+      });
+      onEventRef.current?.({
+        type: "claim_modal_lookup",
+        matches: deposits.length
+      });
+      if (deposits.length === 0) {
+        setError("No deposits found for this transaction.");
+        return;
+      }
+      if (!deposits.some(isEligible)) {
+        setError(
+          "This transaction has no failed or rejected deposits available to recover."
+        );
+        return;
+      }
+      onResults(deposits);
+    } catch (err) {
+      if (!isCurrentOperation()) return;
+      const message = formatUserError(
+        err instanceof Error ? err.message : "Lookup failed"
+      );
+      setError(message);
+      onErrorRef.current?.({ message, code: "CLAIM_LOOKUP_FAILED" });
+    } finally {
+      if (isCurrentOperation()) setLoading(false);
+    }
+  }, [
+    trimmed,
+    service,
+    operationEpochRef,
+    isOpenRef,
+    onResults,
+    onLifecycleRef,
+    onEventRef,
+    onErrorRef
+  ]);
+  return /* @__PURE__ */ jsxs2("div", { className: "rs-screen", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "rs-screen-body rs-screen-body--gap-32", children: [
+      /* @__PURE__ */ jsx2(
+        BodyHeader,
+        {
+          icon: /* @__PURE__ */ jsx2(HandCoinsIcon, {}),
+          title: "Claim a deposit",
+          subtitle: "Get funds from a failed deposit sent back to you on the source chain."
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        Input,
+        {
+          label: "Transaction hash",
+          placeholder: "0x\u2026",
+          value: txHash,
+          onChange: (e) => setTxHash(e.target.value),
+          error: trimmed.length > 0 && !validTxHash ? "Enter a valid transaction hash" : void 0
+        }
+      ),
+      error && /* @__PURE__ */ jsx2(Callout, { variant: "error", children: error }),
+      /* @__PURE__ */ jsx2(
+        Button,
+        {
+          onClick: handleLookup,
+          loading,
+          loadingText: "Searching\u2026",
+          disabled: !validTxHash,
+          fullWidth: true,
+          children: "Find deposit"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2(PoweredBy, {})
+  ] });
+}
+function SelectStep({
+  deposits,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs2("div", { className: "rs-screen", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "rs-screen-body rs-screen-body--gap-32", children: [
+      /* @__PURE__ */ jsx2(
+        BodyHeader,
+        {
+          icon: /* @__PURE__ */ jsx2(CoinsIcon, {}),
+          title: "Select a deposit",
+          subtitle: "This transaction produced multiple deposits. Choose the one to claim."
+        }
+      ),
+      /* @__PURE__ */ jsx2("div", { className: "rs-list", children: deposits.map((row) => {
+        const { symbol, amount, chainName } = describeDeposit(row);
+        const eligible = isEligible(row);
+        return /* @__PURE__ */ jsx2(
+          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__ */ jsx2(PoweredBy, {})
+  ] });
+}
+function ReviewStep({
+  deposit,
+  submitting,
+  defaultRefundDestination,
+  onSubmit
+}) {
+  const { chainId, symbol, amount, chainName, chainIcon } = describeDeposit(deposit);
+  const [destination, setDestination] = useState(defaultRefundDestination ?? "");
+  const destinationValid = isAddress(destination);
+  return /* @__PURE__ */ jsxs2("div", { className: "rs-screen", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "rs-screen-body rs-screen-body--gap-32", children: [
+      /* @__PURE__ */ jsx2(
+        BodyHeader,
+        {
+          icon: /* @__PURE__ */ jsx2(HandCoinsIcon, {}),
+          title: "Review refund",
+          subtitle: "This returns the funds on the source chain. It does not retry the original bridge."
+        }
+      ),
+      /* @__PURE__ */ jsxs2("div", { className: "rs-review-details", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "rs-review-detail-row", children: [
+          /* @__PURE__ */ jsx2("span", { children: "Amount" }),
+          /* @__PURE__ */ jsxs2("span", { className: "rs-review-detail-value", children: [
+            /* @__PURE__ */ jsxs2("span", { children: [
+              amount,
+              " ",
+              symbol
+            ] }),
+            /* @__PURE__ */ jsx2("span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ jsx2(TokenIcon, { symbol }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "rs-review-detail-row", children: [
+          /* @__PURE__ */ jsx2("span", { children: "Source chain" }),
+          /* @__PURE__ */ jsxs2("span", { className: "rs-review-detail-value", children: [
+            /* @__PURE__ */ jsx2("span", { children: chainName }),
+            chainIcon && /* @__PURE__ */ jsx2("span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ jsx2(CdnIcon, { src: chainIcon }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "rs-review-detail-row", children: [
+          /* @__PURE__ */ jsx2("span", { children: "Deposit transaction" }),
+          (() => {
+            const url = deposit.txHash ? getExplorerTxUrl(chainId, deposit.txHash) : null;
+            const short = deposit.txHash ? shortenHash(deposit.txHash) : "\u2014";
+            return url ? /* @__PURE__ */ jsxs2(
+              "a",
+              {
+                className: "rs-review-detail-value rs-link",
+                href: url,
+                target: "_blank",
+                rel: "noreferrer",
+                children: [
+                  short,
+                  /* @__PURE__ */ jsx2(ExternalLinkIcon, {})
+                ]
+              }
+            ) : /* @__PURE__ */ jsx2("span", { className: "rs-review-detail-value", children: short });
+          })()
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx2(
+        Input,
+        {
+          label: "Send to",
+          placeholder: "0x\u2026",
+          value: destination,
+          onChange: (e) => setDestination(e.target.value),
+          error: destination.length > 0 && !destinationValid ? "Enter a valid address" : void 0
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        Button,
+        {
+          onClick: () => destinationValid && onSubmit(destination),
+          loading: submitting,
+          loadingText: "Refunding\u2026",
+          disabled: !destinationValid,
+          fullWidth: true,
+          children: "Claim refund"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2(PoweredBy, {})
+  ] });
+}
+function ResultStep({
+  result,
+  error,
+  onClose,
+  onReset,
+  onRetry
+}) {
+  const success = !!result;
+  return /* @__PURE__ */ jsxs2("div", { className: "rs-screen", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "rs-screen-body rs-screen-body--gap-32", children: [
+      /* @__PURE__ */ jsx2(
+        BodyHeader,
+        {
+          icon: success ? /* @__PURE__ */ jsx2(CheckIcon, {}) : /* @__PURE__ */ jsx2(AlertTriangleIcon, {}),
+          variant: success ? "success" : "error",
+          title: success ? "Refund submitted" : "Refund failed",
+          subtitle: success ? "Your funds are being returned on the source chain." : void 0
+        }
+      ),
+      success ? /* @__PURE__ */ jsxs2("div", { className: "rs-review-details", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "rs-review-detail-row", children: [
+          /* @__PURE__ */ jsx2("span", { children: "Amount" }),
+          /* @__PURE__ */ jsxs2("span", { className: "rs-review-detail-value", children: [
+            /* @__PURE__ */ jsxs2("span", { children: [
+              result.amountDisplay,
+              " ",
+              result.symbol
+            ] }),
+            /* @__PURE__ */ jsx2("span", { className: "rs-review-detail-icon", children: /* @__PURE__ */ jsx2(TokenIcon, { symbol: result.symbol }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "rs-review-detail-row", children: [
+          /* @__PURE__ */ jsx2("span", { children: "Sent to" }),
+          /* @__PURE__ */ jsx2("span", { className: "rs-review-detail-value", children: shortenAddress(result.destination) })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "rs-review-detail-row", children: [
+          /* @__PURE__ */ jsx2("span", { children: "Transaction" }),
+          (() => {
+            const url = getExplorerTxUrl(result.chain, result.txHash);
+            const short = shortenHash(result.txHash);
+            return url ? /* @__PURE__ */ jsxs2(
+              "a",
+              {
+                className: "rs-review-detail-value rs-link",
+                href: url,
+                target: "_blank",
+                rel: "noreferrer",
+                children: [
+                  short,
+                  /* @__PURE__ */ jsx2(ExternalLinkIcon, {})
+                ]
+              }
+            ) : /* @__PURE__ */ jsx2("span", { className: "rs-review-detail-value", children: short });
+          })()
+        ] })
+      ] }) : /* @__PURE__ */ jsx2(Callout, { variant: "error", children: error }),
+      /* @__PURE__ */ jsx2("div", { className: "rs-screen-button-row", children: success ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+        onReset && /* @__PURE__ */ jsx2(Button, { variant: "outline", onClick: onReset, fullWidth: true, children: "Claim another deposit" }),
+        /* @__PURE__ */ jsx2(Button, { onClick: onClose, fullWidth: true, children: "Done" })
+      ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2(Button, { variant: "outline", onClick: onClose, fullWidth: true, children: "Cancel" }),
+        onRetry && /* @__PURE__ */ jsx2(Button, { onClick: onRetry, fullWidth: true, children: "Try again" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx2(PoweredBy, {})
+  ] });
+}
+
+export {
+  ClaimModal
+};