@rhinestone/deposit-modal 0.19.0 → 0.20.1

package/dist/BankOnrampStep-3SNUX6V2.cjs

@@ -0,0 +1,435 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+
+
+
+
+
+var _chunkG264OM23cjs = require('./chunk-G264OM23.cjs');
+
+
+var _chunkIPHKBBUVcjs = require('./chunk-IPHKBBUV.cjs');
+
+
+
+var _chunkO5OW4S7Lcjs = require('./chunk-O5OW4S7L.cjs');
+
+
+var _chunkLVMNNMOZcjs = require('./chunk-LVMNNMOZ.cjs');
+require('./chunk-D3R3O4CY.cjs');
+
+// src/components/steps/BankOnrampStep.tsx
+var _react = require('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 (e) {
+    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
+
+var _jsxruntime = require('react/jsx-runtime');
+var RAILS = { BankAch: "ACH", BankFedwire: "Wire", BankSwift: "SWIFT", BankSepa: "SEPA" };
+function Detail({ label, value }) {
+  const [copied, setCopied] = _react.useState.call(void 0, false);
+  const [failed, setFailed] = _react.useState.call(void 0, false);
+  if (!value) return null;
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setFailed(false);
+    } catch (e2) {
+      setFailed(true);
+    }
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-bank-detail", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-bank-detail-text", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-bank-detail-label", children: label }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-bank-detail-value", children: value }),
+      failed && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { role: "status", className: "rs-bank-detail-label", children: "Could not copy. Select the value to copy it." })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type: "button", className: "rs-bank-copy", "aria-label": `Copy ${label.toLowerCase()}`, onClick: () => void copy(), children: copied ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkG264OM23cjs.CheckIcon, { size: 16 }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkG264OM23cjs.CopyIcon, { size: 16 }) })
+  ] });
+}
+function BankDetailsView({ details }) {
+  const [selected, setSelected] = _react.useState.call(void 0, 0);
+  const rail = _nullishCoalesce(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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-bank-native", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-bank-rails", role: "group", "aria-label": "Transfer method", children: details.rails.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        type: "button",
+        className: "rs-bank-rail",
+        "aria-pressed": index === selected,
+        onClick: () => setSelected(index),
+        children: RAILS[item.type]
+      },
+      item.type
+    )) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "rs-bank-detail-label", children: [
+      "Send ",
+      details.currency,
+      " using the selected transfer method."
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-bank-fields", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Detail, { label: "Account holder", value: details.accountHolderName }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Detail, { label: rail.type === "BankSepa" ? "IBAN" : "Account number", value: rail.accountNumber }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Detail, { label: rail.type === "BankAch" || rail.type === "BankFedwire" ? "Routing number" : "SWIFT / BIC", value: rail.bankCode }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Detail, { label: "Bank name", value: details.bankName }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Detail, { label: "Bank address", value: bankAddress }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Detail, { label: "Payment reference", value: details.reference })
+    ] }, rail.type),
+    details.reference && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "rs-bank-detail-label", children: "Include this payment reference with your transfer." }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-bank-fee", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-bank-detail-label", children: [
+        "Last quoted fee \xB7 ",
+        new Date(details.capturedAt).toLocaleDateString()
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+        rail.fee.base,
+        " ",
+        rail.fee.currency,
+        " + ",
+        rail.fee.percent,
+        "% \xB7 minimum ",
+        rail.fee.minimum,
+        " ",
+        rail.fee.currency
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "rs-bank-detail-label", children: "Fees may change before your transfer arrives." })
+    ] })
+  ] });
+}
+
+// src/components/steps/BankOnrampStep.tsx
+
+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 = _chunkG264OM23cjs.useLatestRef.call(void 0, bankOnramp.getSession);
+  const sessionOptions = _react.useMemo.call(void 0, 
+    () => ({
+      backendUrl,
+      getSession: () => getSessionRef.current(smartAccount)
+    }),
+    [backendUrl, getSessionRef, smartAccount]
+  );
+  const service = _react.useMemo.call(void 0, 
+    () => _chunkIPHKBBUVcjs.createOnrampService.call(void 0, sessionOptions),
+    [sessionOptions]
+  );
+  const [availableForHistory, setAvailableForHistory] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    _optionalChain([onJourney, 'optionalCall', _ => _({ source: availableForHistory ? service : null })]);
+    return () => _optionalChain([onJourney, 'optionalCall', _2 => _2(null)]);
+  }, [service, onJourney, availableForHistory]);
+  const [noOptions, setNoOptions] = _react.useState.call(void 0, false);
+  const [loading, setLoading] = _react.useState.call(void 0, true);
+  const [selectedAccount, setSelectedAccount] = _react.useState.call(void 0, 
+    null
+  );
+  const [hostedUrl, setHostedUrl] = _react.useState.call(void 0, null);
+  const [bankDetails, setBankDetails] = _react.useState.call(void 0, 
+    null
+  );
+  const [verificationExpired, setVerificationExpired] = _react.useState.call(void 0, false);
+  const [verificationExpiresAt, setVerificationExpiresAt] = _react.useState.call(void 0, null);
+  const [iframeLoaded, setIframeLoaded] = _react.useState.call(void 0, false);
+  const [externalOpened, setExternalOpened] = _react.useState.call(void 0, false);
+  const [error, setError] = _react.useState.call(void 0, null);
+  const [verifying, setVerifying] = _react.useState.call(void 0, null);
+  const requestGenerationRef = _react.useRef.call(void 0, 0);
+  const verificationResumedRef = _react.useRef.call(void 0, false);
+  const isCurrentRequest = _react.useCallback.call(void 0, 
+    (generation) => requestGenerationRef.current === generation,
+    []
+  );
+  const startVerification = _react.useCallback.call(void 0, async () => {
+    const session = await _chunkO5OW4S7Lcjs.startComplianceVerification.call(void 0, 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 = _react.useCallback.call(void 0, async () => {
+    const current = await _chunkO5OW4S7Lcjs.getComplianceStatus.call(void 0, sessionOptions);
+    if (current.status === "approved") return "approved";
+    if (current.status === "declined") return "declined";
+    return startVerification();
+  }, [sessionOptions, startVerification]);
+  const loadAccounts = _react.useCallback.call(void 0, async () => {
+    const generation = ++requestGenerationRef.current;
+    setLoading(true);
+    setError(null);
+    setNoOptions(false);
+    try {
+      const discover = () => service.getOptions().catch((error2) => {
+        if (error2 instanceof _chunkLVMNNMOZcjs.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 (e3) {
+      if (!isCurrentRequest(generation)) return;
+      setError(OPTIONS_ERROR);
+      _optionalChain([onError, 'optionalCall', _3 => _3(OPTIONS_ERROR, "BANK_ONRAMP_OPTIONS_FAILED")]);
+    } finally {
+      if (isCurrentRequest(generation)) setLoading(false);
+    }
+  }, [ensureVerified, isCurrentRequest, onError, onUnavailable, service]);
+  _react.useEffect.call(void 0, () => {
+    setSelectedAccount(null);
+    setBankDetails(null);
+    setHostedUrl(null);
+    setExternalOpened(false);
+    void loadAccounts();
+    return () => {
+      requestGenerationRef.current += 1;
+    };
+  }, [loadAccounts]);
+  const openDetails = _react.useCallback.call(void 0, 
+    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 _chunkLVMNNMOZcjs.ScopedRequestError && error2.status === 409;
+        const message = pending ? PENDING_ERROR : SAFE_ERROR;
+        setError(message);
+        _optionalChain([onError, 'optionalCall', _4 => _4(
+          message,
+          pending ? "BANK_ONRAMP_DETAILS_PENDING" : "BANK_ONRAMP_DETAILS_FAILED"
+        )]);
+      } finally {
+        if (isCurrentRequest(generation)) setLoading(false);
+      }
+    },
+    [isCurrentRequest, onError, service]
+  );
+  const selectOption = _react.useCallback.call(void 0, 
+    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 _chunkLVMNNMOZcjs.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 (e4) {
+            if (!isCurrentRequest(generation)) return;
+          }
+        }
+        setError(SAFE_ERROR);
+        _optionalChain([onError, 'optionalCall', _5 => _5(SAFE_ERROR, "BANK_ONRAMP_SETUP_FAILED")]);
+        setLoading(false);
+      }
+    },
+    [isCurrentRequest, onError, openDetails, service, startVerification]
+  );
+  const selectOptionRef = _chunkG264OM23cjs.useLatestRef.call(void 0, selectOption);
+  _react.useEffect.call(void 0, () => {
+    if (verifying !== "action_required" || !hostedUrl) return;
+    const remaining = hostedSessionRemainingMs(
+      _nullishCoalesce(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]);
+  _react.useEffect.call(void 0, () => {
+    if (verifying !== "action_required" && verifying !== "reviewing") return;
+    let active = true;
+    const timer = setInterval(() => {
+      void (async () => {
+        try {
+          const status = await _chunkO5OW4S7Lcjs.getComplianceStatus.call(void 0, sessionOptions);
+          if (!active) return;
+          if (status.status === "approved") {
+            setHostedUrl(null);
+            void loadAccounts();
+          } else if (status.status === "declined") {
+            setVerifying("declined");
+          }
+        } catch (e5) {
+        }
+      })();
+    }, VERIFICATION_POLL_MS);
+    return () => {
+      active = false;
+      clearInterval(timer);
+    };
+  }, [verifying, sessionOptions, loadAccounts]);
+  const restartVerification = _react.useCallback.call(void 0, () => {
+    setVerificationExpired(false);
+    setVerificationExpiresAt(null);
+    setHostedUrl(null);
+    void loadAccounts();
+  }, [loadAccounts]);
+  const hostedFrameMounted = Boolean(hostedUrl) && !verificationExpired;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-screen rs-bank-onramp", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-screen-body rs-screen-body--gap-32", children: [
+    !hostedFrameMounted && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkG264OM23cjs.BodyHeader,
+      {
+        icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkG264OM23cjs.BankIcon, {}),
+        title: "Bank transfer",
+        subtitle: "Your bank transfer details"
+      }
+    ),
+    loading && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-loading-state", "aria-live": "polite", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkG264OM23cjs.Spinner, {}),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-loading-title", children: "Preparing bank details\u2026" })
+    ] }),
+    !loading && error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-loading-state", "aria-live": "polite", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-loading-title", children: error }) }),
+    !loading && !error && verifying === "declined" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-loading-state", "aria-live": "polite", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-loading-title", children: "Verification unsuccessful" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-loading-subtitle", children: "Your provider could not verify these details. Contact support to continue." })
+    ] }),
+    !loading && !error && verifying === "reviewing" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-loading-state", "aria-live": "polite", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkG264OM23cjs.Spinner, {}),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-loading-title", children: "Checking your details" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-loading-state", "aria-live": "polite", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-loading-title", children: "Verification opened" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-loading-subtitle", children: "Finish verifying in your browser, then return here." })
+    ] }),
+    !loading && !error && verifying === "action_required" && verificationExpired && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-loading-state", "aria-live": "polite", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-loading-title", children: "Verification expired" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-loading-subtitle", children: "That verification session timed out. Start a new one to pick up where you left off." }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-screen-button-row", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          type: "button",
+          className: "rs-button rs-button--primary",
+          onClick: restartVerification,
+          children: "Start again"
+        }
+      ) })
+    ] }),
+    !loading && !error && verifying === "action_required" && !verificationExpired && hostedUrl && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rs-bank-onramp-hosted", children: [
+      !iframeLoaded && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          className: "rs-bank-onramp-frame-loading",
+          "aria-live": "polite",
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkG264OM23cjs.Spinner, {})
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "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__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-loading-state", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rs-loading-title", children: "No bank transfer options are available." }) }),
+    !loading && !error && !verifying && selectedAccount && bankDetails && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BankDetailsView, { details: bankDetails }, selectedAccount.id) })
+  ] }) });
+}
+BankOnrampStep.displayName = "BankOnrampStep";
+
+
+exports.BankOnrampStep = BankOnrampStep;