@rhinestone/deposit-modal 0.18.0 → 0.20.0

package/dist/BankOnrampStep-JG32OCM2.mjs

@@ -0,0 +1,435 @@
+import {
+  BankIcon,
+  BodyHeader,
+  CheckIcon,
+  CopyIcon,
+  Spinner,
+  useLatestRef
+} from "./chunk-YY4ZOAH5.mjs";
+import {
+  createOnrampService
+} from "./chunk-6CTJFR3T.mjs";
+import {
+  getComplianceStatus,
+  startComplianceVerification
+} from "./chunk-5QUWEFD4.mjs";
+import {
+  ScopedRequestError
+} from "./chunk-XBJCZYBX.mjs";
+import "./chunk-B2LZQIGB.mjs";
+
+// src/components/steps/BankOnrampStep.tsx
+import { useCallback, useEffect, useMemo, useRef, useState as useState2 } from "react";
+
+// src/core/noah-hosted.ts
+var NOAH_HOSTED_ORIGINS = [
+  "https://checkout.noah.com",
+  "https://checkout.sandbox.noah.com"
+];
+function isTrustedNoahHostedUrl(url) {
+  let parsed;
+  try {
+    parsed = new URL(url);
+  } catch {
+    return false;
+  }
+  return NOAH_HOSTED_ORIGINS.includes(parsed.origin);
+}
+function hostedSessionRemainingMs(expiresAt, now = Date.now()) {
+  if (!expiresAt) return null;
+  const expiry = Date.parse(expiresAt);
+  if (!Number.isFinite(expiry)) return null;
+  return Math.max(0, expiry - now);
+}
+
+// src/components/steps/BankDetailsView.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var RAILS = { BankAch: "ACH", BankFedwire: "Wire", BankSwift: "SWIFT", BankSepa: "SEPA" };
+function Detail({ label, value }) {
+  const [copied, setCopied] = useState(false);
+  const [failed, setFailed] = useState(false);
+  if (!value) return null;
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setFailed(false);
+    } catch {
+      setFailed(true);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "rs-bank-detail", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rs-bank-detail-text", children: [
+      /* @__PURE__ */ jsx("div", { className: "rs-bank-detail-label", children: label }),
+      /* @__PURE__ */ jsx("div", { className: "rs-bank-detail-value", children: value }),
+      failed && /* @__PURE__ */ jsx("span", { role: "status", className: "rs-bank-detail-label", children: "Could not copy. Select the value to copy it." })
+    ] }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "rs-bank-copy", "aria-label": `Copy ${label.toLowerCase()}`, onClick: () => void copy(), children: copied ? /* @__PURE__ */ jsx(CheckIcon, { size: 16 }) : /* @__PURE__ */ jsx(CopyIcon, { size: 16 }) })
+  ] });
+}
+function BankDetailsView({ details }) {
+  const [selected, setSelected] = useState(0);
+  const rail = details.rails[selected] ?? details.rails[0];
+  const address = details.bankAddress;
+  const bankAddress = address && [address.street, address.street2, address.city, address.state, address.postCode, address.country].filter(Boolean).join(", ");
+  return /* @__PURE__ */ jsxs("div", { className: "rs-bank-native", children: [
+    /* @__PURE__ */ jsx("div", { className: "rs-bank-rails", role: "group", "aria-label": "Transfer method", children: details.rails.map((item, index) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "rs-bank-rail",
+        "aria-pressed": index === selected,
+        onClick: () => setSelected(index),
+        children: RAILS[item.type]
+      },
+      item.type
+    )) }),
+    /* @__PURE__ */ jsxs("p", { className: "rs-bank-detail-label", children: [
+      "Send ",
+      details.currency,
+      " using the selected transfer method."
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "rs-bank-fields", children: [
+      /* @__PURE__ */ jsx(Detail, { label: "Account holder", value: details.accountHolderName }),
+      /* @__PURE__ */ jsx(Detail, { label: rail.type === "BankSepa" ? "IBAN" : "Account number", value: rail.accountNumber }),
+      /* @__PURE__ */ jsx(Detail, { label: rail.type === "BankAch" || rail.type === "BankFedwire" ? "Routing number" : "SWIFT / BIC", value: rail.bankCode }),
+      /* @__PURE__ */ jsx(Detail, { label: "Bank name", value: details.bankName }),
+      /* @__PURE__ */ jsx(Detail, { label: "Bank address", value: bankAddress }),
+      /* @__PURE__ */ jsx(Detail, { label: "Payment reference", value: details.reference })
+    ] }, rail.type),
+    details.reference && /* @__PURE__ */ jsx("p", { className: "rs-bank-detail-label", children: "Include this payment reference with your transfer." }),
+    /* @__PURE__ */ jsxs("div", { className: "rs-bank-fee", children: [
+      /* @__PURE__ */ jsxs("div", { className: "rs-bank-detail-label", children: [
+        "Last quoted fee \xB7 ",
+        new Date(details.capturedAt).toLocaleDateString()
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        rail.fee.base,
+        " ",
+        rail.fee.currency,
+        " + ",
+        rail.fee.percent,
+        "% \xB7 minimum ",
+        rail.fee.minimum,
+        " ",
+        rail.fee.currency
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "rs-bank-detail-label", children: "Fees may change before your transfer arrives." })
+    ] })
+  ] });
+}
+
+// src/components/steps/BankOnrampStep.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SAFE_ERROR = "Bank details are unavailable. Try again.";
+var PENDING_ERROR = "Bank details are not ready yet. Check back shortly.";
+var OPTIONS_ERROR = "Bank transfer options are unavailable. Try again.";
+var VERIFICATION_POLL_MS = 5e3;
+var MAX_TIMEOUT_MS = 2147483647;
+function BankOnrampStep({
+  backendUrl,
+  smartAccount,
+  bankOnramp,
+  onError,
+  openExternally,
+  onUnavailable,
+  onJourney
+}) {
+  const getSessionRef = useLatestRef(bankOnramp.getSession);
+  const sessionOptions = useMemo(
+    () => ({
+      backendUrl,
+      getSession: () => getSessionRef.current(smartAccount)
+    }),
+    [backendUrl, getSessionRef, smartAccount]
+  );
+  const service = useMemo(
+    () => createOnrampService(sessionOptions),
+    [sessionOptions]
+  );
+  const [availableForHistory, setAvailableForHistory] = useState2(false);
+  useEffect(() => {
+    onJourney?.({ source: availableForHistory ? service : null });
+    return () => onJourney?.(null);
+  }, [service, onJourney, availableForHistory]);
+  const [noOptions, setNoOptions] = useState2(false);
+  const [loading, setLoading] = useState2(true);
+  const [selectedAccount, setSelectedAccount] = useState2(
+    null
+  );
+  const [hostedUrl, setHostedUrl] = useState2(null);
+  const [bankDetails, setBankDetails] = useState2(
+    null
+  );
+  const [verificationExpired, setVerificationExpired] = useState2(false);
+  const [verificationExpiresAt, setVerificationExpiresAt] = useState2(null);
+  const [iframeLoaded, setIframeLoaded] = useState2(false);
+  const [externalOpened, setExternalOpened] = useState2(false);
+  const [error, setError] = useState2(null);
+  const [verifying, setVerifying] = useState2(null);
+  const requestGenerationRef = useRef(0);
+  const verificationResumedRef = useRef(false);
+  const isCurrentRequest = useCallback(
+    (generation) => requestGenerationRef.current === generation,
+    []
+  );
+  const startVerification = useCallback(async () => {
+    const session = await startComplianceVerification(sessionOptions);
+    if (session.status === "failed") return "declined";
+    if (!session.nextAction) return "reviewing";
+    if (!isTrustedNoahHostedUrl(session.nextAction.url)) return "reviewing";
+    if (openExternally) {
+      await openExternally(session.nextAction.url);
+      setExternalOpened(true);
+      return "action_required";
+    }
+    setHostedUrl(session.nextAction.url);
+    setVerificationExpiresAt(session.expiresAt);
+    setVerificationExpired(false);
+    setIframeLoaded(false);
+    return "action_required";
+  }, [openExternally, sessionOptions]);
+  const ensureVerified = useCallback(async () => {
+    const current = await getComplianceStatus(sessionOptions);
+    if (current.status === "approved") return "approved";
+    if (current.status === "declined") return "declined";
+    return startVerification();
+  }, [sessionOptions, startVerification]);
+  const loadAccounts = useCallback(async () => {
+    const generation = ++requestGenerationRef.current;
+    setLoading(true);
+    setError(null);
+    setNoOptions(false);
+    try {
+      const discover = () => service.getOptions().catch((error2) => {
+        if (error2 instanceof ScopedRequestError && error2.status === 404 && onUnavailable) {
+          if (isCurrentRequest(generation)) onUnavailable();
+          return null;
+        }
+        throw error2;
+      });
+      const available = await discover();
+      if (!available || !isCurrentRequest(generation)) return;
+      setAvailableForHistory(true);
+      const verification = await ensureVerified();
+      if (!isCurrentRequest(generation)) return;
+      if (verification !== "approved") {
+        setVerifying(verification);
+        return;
+      }
+      setVerifying(null);
+      setExternalOpened(false);
+      const [current, existing] = await Promise.all([
+        discover(),
+        service.listAccounts()
+      ]);
+      if (!current || !isCurrentRequest(generation)) return;
+      const [option] = current.options;
+      if (!option) {
+        setNoOptions(true);
+        return;
+      }
+      void selectOptionRef.current(
+        option,
+        existing.items.find(
+          (account) => account.status === "active" && account.currency === option.currency
+        )
+      );
+    } catch {
+      if (!isCurrentRequest(generation)) return;
+      setError(OPTIONS_ERROR);
+      onError?.(OPTIONS_ERROR, "BANK_ONRAMP_OPTIONS_FAILED");
+    } finally {
+      if (isCurrentRequest(generation)) setLoading(false);
+    }
+  }, [ensureVerified, isCurrentRequest, onError, onUnavailable, service]);
+  useEffect(() => {
+    setSelectedAccount(null);
+    setBankDetails(null);
+    setHostedUrl(null);
+    setExternalOpened(false);
+    void loadAccounts();
+    return () => {
+      requestGenerationRef.current += 1;
+    };
+  }, [loadAccounts]);
+  const openDetails = useCallback(
+    async (account) => {
+      const generation = ++requestGenerationRef.current;
+      setLoading(true);
+      setError(null);
+      setBankDetails(null);
+      try {
+        const { bankDetails: details } = await service.getAccountDetails(
+          account.id
+        );
+        if (!isCurrentRequest(generation)) return;
+        if (details.currency !== account.currency)
+          throw new Error("Bank currency mismatch");
+        setBankDetails(details);
+      } catch (error2) {
+        if (!isCurrentRequest(generation)) return;
+        const pending = error2 instanceof ScopedRequestError && error2.status === 409;
+        const message = pending ? PENDING_ERROR : SAFE_ERROR;
+        setError(message);
+        onError?.(
+          message,
+          pending ? "BANK_ONRAMP_DETAILS_PENDING" : "BANK_ONRAMP_DETAILS_FAILED"
+        );
+      } finally {
+        if (isCurrentRequest(generation)) setLoading(false);
+      }
+    },
+    [isCurrentRequest, onError, service]
+  );
+  const selectOption = useCallback(
+    async (option, account) => {
+      if (account) {
+        setSelectedAccount(account);
+        await openDetails(account);
+        return;
+      }
+      const generation = ++requestGenerationRef.current;
+      setLoading(true);
+      setError(null);
+      try {
+        const request = {
+          currency: option.currency,
+          optionId: option.optionId
+        };
+        const nextAccount = (await service.createAccount(request)).account;
+        if (!isCurrentRequest(generation)) return;
+        setSelectedAccount(nextAccount);
+        await openDetails(nextAccount);
+      } catch (error2) {
+        if (!isCurrentRequest(generation)) return;
+        if (error2 instanceof ScopedRequestError && error2.status === 409 && error2.code === "VERIFICATION_REQUIRED" && !verificationResumedRef.current) {
+          verificationResumedRef.current = true;
+          try {
+            const verification = await startVerification();
+            if (!isCurrentRequest(generation)) return;
+            setVerifying(verification);
+            setLoading(false);
+            return;
+          } catch {
+            if (!isCurrentRequest(generation)) return;
+          }
+        }
+        setError(SAFE_ERROR);
+        onError?.(SAFE_ERROR, "BANK_ONRAMP_SETUP_FAILED");
+        setLoading(false);
+      }
+    },
+    [isCurrentRequest, onError, openDetails, service, startVerification]
+  );
+  const selectOptionRef = useLatestRef(selectOption);
+  useEffect(() => {
+    if (verifying !== "action_required" || !hostedUrl) return;
+    const remaining = hostedSessionRemainingMs(
+      verificationExpiresAt ?? void 0
+    );
+    if (remaining === null) return;
+    if (remaining > MAX_TIMEOUT_MS) return;
+    const timer = setTimeout(() => setVerificationExpired(true), remaining);
+    return () => clearTimeout(timer);
+  }, [hostedUrl, verificationExpiresAt, verifying]);
+  useEffect(() => {
+    if (verifying !== "action_required" && verifying !== "reviewing") return;
+    let active = true;
+    const timer = setInterval(() => {
+      void (async () => {
+        try {
+          const status = await getComplianceStatus(sessionOptions);
+          if (!active) return;
+          if (status.status === "approved") {
+            setHostedUrl(null);
+            void loadAccounts();
+          } else if (status.status === "declined") {
+            setVerifying("declined");
+          }
+        } catch {
+        }
+      })();
+    }, VERIFICATION_POLL_MS);
+    return () => {
+      active = false;
+      clearInterval(timer);
+    };
+  }, [verifying, sessionOptions, loadAccounts]);
+  const restartVerification = useCallback(() => {
+    setVerificationExpired(false);
+    setVerificationExpiresAt(null);
+    setHostedUrl(null);
+    void loadAccounts();
+  }, [loadAccounts]);
+  const hostedFrameMounted = Boolean(hostedUrl) && !verificationExpired;
+  return /* @__PURE__ */ jsx2("div", { className: "rs-screen rs-bank-onramp", children: /* @__PURE__ */ jsxs2("div", { className: "rs-screen-body rs-screen-body--gap-32", children: [
+    !hostedFrameMounted && /* @__PURE__ */ jsx2(
+      BodyHeader,
+      {
+        icon: /* @__PURE__ */ jsx2(BankIcon, {}),
+        title: "Bank transfer",
+        subtitle: "Your bank transfer details"
+      }
+    ),
+    loading && /* @__PURE__ */ jsxs2("div", { className: "rs-loading-state", "aria-live": "polite", children: [
+      /* @__PURE__ */ jsx2(Spinner, {}),
+      /* @__PURE__ */ jsx2("div", { className: "rs-loading-title", children: "Preparing bank details\u2026" })
+    ] }),
+    !loading && error && /* @__PURE__ */ jsx2("div", { className: "rs-loading-state", "aria-live": "polite", children: /* @__PURE__ */ jsx2("div", { className: "rs-loading-title", children: error }) }),
+    !loading && !error && verifying === "declined" && /* @__PURE__ */ jsxs2("div", { className: "rs-loading-state", "aria-live": "polite", children: [
+      /* @__PURE__ */ jsx2("div", { className: "rs-loading-title", children: "Verification unsuccessful" }),
+      /* @__PURE__ */ jsx2("div", { className: "rs-loading-subtitle", children: "Your provider could not verify these details. Contact support to continue." })
+    ] }),
+    !loading && !error && verifying === "reviewing" && /* @__PURE__ */ jsxs2("div", { className: "rs-loading-state", "aria-live": "polite", children: [
+      /* @__PURE__ */ jsx2(Spinner, {}),
+      /* @__PURE__ */ jsx2("div", { className: "rs-loading-title", children: "Checking your details" }),
+      /* @__PURE__ */ jsx2("div", { className: "rs-loading-subtitle", children: "This usually takes a moment. You can close this and come back." })
+    ] }),
+    !loading && !error && verifying === "action_required" && externalOpened && /* @__PURE__ */ jsxs2("div", { className: "rs-loading-state", "aria-live": "polite", children: [
+      /* @__PURE__ */ jsx2("div", { className: "rs-loading-title", children: "Verification opened" }),
+      /* @__PURE__ */ jsx2("div", { className: "rs-loading-subtitle", children: "Finish verifying in your browser, then return here." })
+    ] }),
+    !loading && !error && verifying === "action_required" && verificationExpired && /* @__PURE__ */ jsxs2("div", { className: "rs-loading-state", "aria-live": "polite", children: [
+      /* @__PURE__ */ jsx2("div", { className: "rs-loading-title", children: "Verification expired" }),
+      /* @__PURE__ */ jsx2("div", { className: "rs-loading-subtitle", children: "That verification session timed out. Start a new one to pick up where you left off." }),
+      /* @__PURE__ */ jsx2("div", { className: "rs-screen-button-row", children: /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "rs-button rs-button--primary",
+          onClick: restartVerification,
+          children: "Start again"
+        }
+      ) })
+    ] }),
+    !loading && !error && verifying === "action_required" && !verificationExpired && hostedUrl && /* @__PURE__ */ jsxs2("div", { className: "rs-bank-onramp-hosted", children: [
+      !iframeLoaded && /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: "rs-bank-onramp-frame-loading",
+          "aria-live": "polite",
+          children: /* @__PURE__ */ jsx2(Spinner, {})
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "iframe",
+        {
+          title: "Verify your details",
+          src: hostedUrl,
+          sandbox: "allow-forms allow-scripts allow-same-origin",
+          referrerPolicy: "no-referrer",
+          allow: "camera; microphone; clipboard-write",
+          onLoad: () => setIframeLoaded(true)
+        }
+      )
+    ] }),
+    !loading && !error && !verifying && noOptions && /* @__PURE__ */ jsx2("div", { className: "rs-loading-state", children: /* @__PURE__ */ jsx2("div", { className: "rs-loading-title", children: "No bank transfer options are available." }) }),
+    !loading && !error && !verifying && selectedAccount && bankDetails && /* @__PURE__ */ jsx2(Fragment, { children: /* @__PURE__ */ jsx2(BankDetailsView, { details: bankDetails }, selectedAccount.id) })
+  ] }) });
+}
+BankOnrampStep.displayName = "BankOnrampStep";
+export {
+  BankOnrampStep
+};