@nowramp/form 0.1.65 → 0.1.67

package/dist/index.js

@@ -9,13 +9,13 @@
   document.head.appendChild(s);
 })();
 import { jsx as e, jsxs as r, Fragment as le } from "react/jsx-runtime";
-import Xe, { useState as N, useRef as X, useCallback as O, useEffect as D, useMemo as G, useReducer as nn, useContext as an, createContext as rn } from "react";
+import Xe, { useState as N, useRef as X, useCallback as H, useEffect as D, useMemo as G, useReducer as nn, useContext as an, createContext as rn } from "react";
 import { RampApi as We } from "@nowramp/sdk";
 import { createPortal as St } from "react-dom";
 function on(t, n) {
   const [a, o] = N(null), [l, i] = N(!0), [m, c] = N(null), d = X(null);
   (!d.current || d.current !== t) && (d.current = new We({ apiKey: "", ...t }));
-  const p = O(async () => {
+  const p = H(async () => {
     if (!t.projectId) {
       c(new Error("projectId is required")), i(!1);
       return;
@@ -53,7 +53,7 @@ function ln(t, n) {
       }
     );
   }, [t.projectId, n == null ? void 0 : n.fiatCurrency, n == null ? void 0 : n.fiatAmount, n == null ? void 0 : n.cryptoAmount, n == null ? void 0 : n.cryptoCurrency, n == null ? void 0 : n.network, n == null ? void 0 : n.paymentMethodId, n == null ? void 0 : n.country, n == null ? void 0 : n.orderType]);
-  const f = O(async () => {
+  const f = H(async () => {
     if (!(!n || !t.projectId)) {
       i(!0), c(null);
       try {
@@ -71,7 +71,7 @@ function ln(t, n) {
 function sn(t) {
   const [n, a] = N(null), [o, l] = N(!1), [i, m] = N(null), c = X(null), d = X(""), p = `${t.apiUrl}|${t.projectId}`;
   (!c.current || d.current !== p) && (c.current = new We({ apiKey: "", ...t }), d.current = p);
-  const h = O(async (f) => {
+  const h = H(async (f) => {
     l(!0), m(null);
     try {
       const g = await c.current.createCheckoutIntent(f);
@@ -82,7 +82,7 @@ function sn(t) {
     } finally {
       l(!1);
     }
-  }, []), u = O(() => {
+  }, []), u = H(() => {
     a(null), m(null);
   }, []);
   return { order: n, loading: o, error: i, createOrder: h, reset: u };
@@ -90,7 +90,7 @@ function sn(t) {
 function cn(t, n, a) {
   const [o, l] = N(null), [i, m] = N(!1), [c, d] = N(null), p = X(null);
   p.current || (p.current = new We({ apiKey: "", projectId: "", ...t }));
-  const h = O(async () => {
+  const h = H(async () => {
     if (n) {
       m(!0), d(null);
       try {
@@ -230,7 +230,7 @@ function un({
     cryptoAmount: Rt(h, 6),
     walletAddress: u,
     customerId: l
-  }), H = s.flowType === "sell", {
+  }), O = s.flowType === "sell", {
     config: C,
     loading: pe,
     error: ie
@@ -254,7 +254,7 @@ function un({
     A({ type: "SET_PAYMENT_METHOD", methodId: (K == null ? void 0 : K.id) || ((I = T[0]) == null ? void 0 : I.id) || "" });
   }, [C, s.fiatCurrency, s.paymentMethodId]);
   const ne = G(() => {
-    if (H) {
+    if (O) {
       if (!s.cryptoAmount) return null;
       const L = parseFloat(s.cryptoAmount);
       return isNaN(L) || L <= 0 ? "Enter a valid amount" : null;
@@ -266,18 +266,18 @@ function un({
     if (!T) return null;
     const J = parseFloat(T.minAmount), K = parseFloat(T.maxAmount);
     return !isNaN(J) && v < J ? `Minimum amount is ${T.minAmount} ${s.fiatCurrency}` : !isNaN(K) && v > K ? `Maximum amount is ${T.maxAmount} ${s.fiatCurrency}` : null;
-  }, [C, s.fiatAmount, s.fiatCurrency, s.cryptoAmount, H]), ve = G(() => {
-    const v = H ? !!s.cryptoAmount : !!s.fiatAmount;
+  }, [C, s.fiatAmount, s.fiatCurrency, s.cryptoAmount, O]), ve = G(() => {
+    const v = O ? !!s.cryptoAmount : !!s.fiatAmount;
     return !C || !v || !s.cryptoCurrency || !s.network || ne ? null : {
       fiatCurrency: s.fiatCurrency,
-      ...H ? { cryptoAmount: s.cryptoAmount } : { fiatAmount: s.fiatAmount },
+      ...O ? { cryptoAmount: s.cryptoAmount } : { fiatAmount: s.fiatAmount },
       cryptoCurrency: s.cryptoCurrency,
       network: s.network,
       paymentMethodId: s.paymentMethodId || void 0,
       country: s.country || void 0,
       orderType: s.flowType
     };
-  }, [C, s.fiatCurrency, s.fiatAmount, s.cryptoAmount, s.cryptoCurrency, s.network, s.paymentMethodId, s.country, ne, H, s.flowType]), {
+  }, [C, s.fiatCurrency, s.fiatAmount, s.cryptoAmount, s.cryptoCurrency, s.network, s.paymentMethodId, s.country, ne, O, s.flowType]), {
     quotes: ae,
     loading: fe,
     error: k,
@@ -307,7 +307,7 @@ function un({
   Te.current = ae;
   const Ne = X(i);
   Ne.current = i;
-  const Ze = O(async () => {
+  const Ze = H(async () => {
     var T, J, K;
     const v = ((T = s.selectedQuote) == null ? void 0 : T.gatewayId) || ((K = (J = Te.current) == null ? void 0 : J.bestQuote) == null ? void 0 : K.gatewayId) || Re.current;
     if (!v || !s.walletAddress) {
@@ -320,7 +320,7 @@ function un({
         gateway: v,
         customerId: s.customerId || void 0,
         fiatCurrency: s.fiatCurrency,
-        ...H ? { cryptoAmount: s.cryptoAmount } : { fiatAmount: s.fiatAmount },
+        ...O ? { cryptoAmount: s.cryptoAmount } : { fiatAmount: s.fiatAmount },
         cryptoCurrency: s.cryptoCurrency,
         network: s.network,
         walletAddress: s.walletAddress,
@@ -333,13 +333,13 @@ function un({
       const I = L instanceof Error ? L.message : "Failed to create order";
       /wallet|address/i.test(I) ? A({ type: "SET_WALLET_ERROR", message: I.replace(/^Failed to create checkout intent:\s*/i, "") }) : A({ type: "SET_ERROR", message: I });
     }
-  }, [s, ye, H]), Oe = O((v) => {
+  }, [s, ye, O]), He = H((v) => {
     A({ type: "SET_STEP", step: v });
-  }, []), ke = O(() => {
+  }, []), ke = H(() => {
     const v = ["confirm", "amount", "quotes", "wallet", "checkout", "processing", "complete"], T = v.indexOf(s.step);
     T > 0 && A({ type: "SET_STEP", step: v[T - 1] });
-  }, [s.step, H]), He = G(() => {
-    const v = H ? !!s.cryptoAmount : !!s.fiatAmount;
+  }, [s.step, O]), Oe = G(() => {
+    const v = O ? !!s.cryptoAmount : !!s.fiatAmount;
     switch (s.step) {
       case "confirm":
         return !!(v && s.cryptoCurrency && s.network && s.walletAddress && !ne);
@@ -352,7 +352,7 @@ function un({
       default:
         return !1;
     }
-  }, [s, ne, H]), Qe = {
+  }, [s, ne, O]), Qe = {
     apiConfig: $,
     assetBaseUrl: a,
     config: C,
@@ -373,9 +373,9 @@ function un({
     fieldLocks: g || null,
     defaultGateway: xe,
     amountError: ne,
-    goToStep: Oe,
+    goToStep: He,
     goBack: ke,
-    canProceed: He
+    canProceed: Oe
   };
   return /* @__PURE__ */ e(Pt.Provider, { value: Qe, children: P });
 }
@@ -883,7 +883,7 @@ function _t({
   D(() => {
     m(!1), d(!1);
   }, [t]);
-  const p = O(() => m(!0), []), h = O(() => d(!0), []);
+  const p = H(() => m(!0), []), h = H(() => d(!0), []);
   return /* @__PURE__ */ r(
     "div",
     {
@@ -1466,7 +1466,7 @@ function Bn({
       }
     );
   if (o.checkout.method === "widget" && o.widgetConfig) {
-    const g = On(o.checkout.url, o.widgetConfig);
+    const g = Hn(o.checkout.url, o.widgetConfig);
     return St(
       /* @__PURE__ */ r(
         "div",
@@ -1584,13 +1584,13 @@ function Bn({
     }
   );
 }
-function On(t, n) {
+function Hn(t, n) {
   const a = new URL("/en/partner/widget", t);
   for (const [o, l] of Object.entries(n))
     l != null && l !== "" && a.searchParams.set(o, String(l));
   return a.toString();
 }
-function Hn({ className: t = "" }) {
+function On({ className: t = "" }) {
   const { orderStatus: n, orderStatusLoading: a, goToStep: o } = Se();
   D(() => {
     n && (n.status === "completed" ? o("complete") : ["failed", "cancelled", "expired", "refunded"].includes(n.status) && o("error"));
@@ -1884,7 +1884,7 @@ function Pn({
     ] })
   ] });
 }
-function Ot(t) {
+function Ht(t) {
   return t.length <= 12 ? t : `${t.slice(0, 6)}...${t.slice(-6)}`;
 }
 function Un({ className: t = "", stablecoinParity: n, partnerName: a }) {
@@ -1932,7 +1932,7 @@ function Un({ className: t = "", stablecoinParity: n, partnerName: a }) {
             value: U ? `${U} ${i.cryptoCurrency}` : `${i.cryptoCurrency} on ${i.network}`
           }
         ),
-        /* @__PURE__ */ e(Ce, { label: "Wallet", value: Ot(i.walletAddress), mono: !0 }),
+        /* @__PURE__ */ e(Ce, { label: "Wallet", value: Ht(i.walletAddress), mono: !0 }),
         P && U && /* @__PURE__ */ r("div", { className: "py-2 text-[11px]", style: { color: "var(--t-text-muted)", lineHeight: "15px" }, children: [
           "Charged amount from provider may differ. The rest up to ",
           U,
@@ -1944,7 +1944,7 @@ function Un({ className: t = "", stablecoinParity: n, partnerName: a }) {
         ] })
       ] }),
       /* @__PURE__ */ e(Ce, { label: "Network", value: i.network }),
-      u && i.walletAddress && /* @__PURE__ */ e(Ce, { label: "Refund address", value: Ot(i.walletAddress), mono: !0 })
+      u && i.walletAddress && /* @__PURE__ */ e(Ce, { label: "Refund address", value: Ht(i.walletAddress), mono: !0 })
     ] }),
     f && /* @__PURE__ */ e("p", { className: "text-[12px] mb-4", style: { color: "#EF4444" }, children: f }),
     /* @__PURE__ */ e(
@@ -1990,7 +1990,7 @@ function $e({
       return () => clearTimeout(d);
     }
   }, [t]);
-  const c = O(() => {
+  const c = H(() => {
     m(!1), setTimeout(() => n(), 250);
   }, [n]);
   return D(() => {
@@ -2192,12 +2192,12 @@ function Vn({
     ] })
   ] });
 }
-function Ht({ src: t, alt: n, size: a, className: o, style: l }) {
+function Ot({ src: t, alt: n, size: a, className: o, style: l }) {
   const [i, m] = N(!1), [c, d] = N(!1);
   D(() => {
     m(!1), d(!1);
   }, [t]);
-  const p = O(() => m(!0), []), h = O(() => d(!0), []);
+  const p = H(() => m(!0), []), h = H(() => d(!0), []);
   return /* @__PURE__ */ r("div", { className: o, style: { ...l, width: a, height: a, position: "relative" }, children: [
     !i && !c && /* @__PURE__ */ e(
       "div",
@@ -2250,7 +2250,7 @@ function Xn({ onClose: t, onSelect: n, cryptos: a, assetBaseUrl: o = "", selecte
         }
     }
     return u;
-  }, [a]), p = O((u, f) => l === u && i === f, [l, i]), h = G(() => {
+  }, [a]), p = H((u, f) => l === u && i === f, [l, i]), h = G(() => {
     var w;
     const u = m.trim().toLowerCase();
     if (!u) {
@@ -2301,7 +2301,7 @@ function Xn({ onClose: t, onSelect: n, cryptos: a, assetBaseUrl: o = "", selecte
                       className: "absolute top-0 left-0",
                       style: { background: "#ffffff", borderRadius: "50%" },
                       children: /* @__PURE__ */ e(
-                        Ht,
+                        Ot,
                         {
                           src: Ft(u.code, o),
                           alt: u.code,
@@ -2322,7 +2322,7 @@ function Xn({ onClose: t, onSelect: n, cryptos: a, assetBaseUrl: o = "", selecte
                         background: "#ffffff"
                       },
                       children: /* @__PURE__ */ e(
-                        Ht,
+                        Ot,
                         {
                           src: at(u.chain, o),
                           alt: u.chain,
@@ -2583,7 +2583,7 @@ function Yn({
     state: y,
     dispatch: s,
     config: A,
-    configLoading: H,
+    configLoading: O,
     quotes: C,
     quotesLoading: pe,
     quotesError: ie,
@@ -2594,13 +2594,13 @@ function Yn({
     fieldLocks: k,
     apiConfig: be,
     assetBaseUrl: F
-  } = Se(), [re, ue] = N(n === "dark"), [ye, Ye] = N(a), [W, Z] = N(null), [xe, Re] = N(!1), [Te, Ne] = N(!1), [Ze, Oe] = N(!1), [ke, He] = N(!1), [Qe, v] = N(null), [T, J] = N(!0), [K, L] = N(!1), [I, q] = N(!1), De = X(null), ze = X(), Je = X(y.flowType);
+  } = Se(), [re, ue] = N(n === "dark"), [ye, Ye] = N(a), [W, Z] = N(null), [xe, Re] = N(!1), [Te, Ne] = N(!1), [Ze, He] = N(!1), [ke, Oe] = N(!1), [Qe, v] = N(null), [T, J] = N(!0), [K, L] = N(!1), [I, q] = N(!1), De = X(null), ze = X(), Je = X(y.flowType);
   D(() => {
     ue(n === "dark");
   }, [n]), D(() => {
-    const x = setTimeout(() => J(!1), H ? 0 : 800);
+    const x = setTimeout(() => J(!1), O ? 0 : 800);
     return () => clearTimeout(x);
-  }, [H]), D(() => {
+  }, [O]), D(() => {
     if (Je.current !== y.flowType && !T) {
       Je.current = y.flowType, L(!0), Re(!1), Ne(!1);
       const x = setTimeout(() => L(!1), 350);
@@ -2627,7 +2627,7 @@ function Yn({
       v(null), s({ type: "SET_WALLET_ERROR", message: "" });
       return;
     }
-    return He(!0), v(null), clearTimeout(ze.current), ze.current = setTimeout(async () => {
+    return Oe(!0), v(null), clearTimeout(ze.current), ze.current = setTimeout(async () => {
       var R, M, oe;
       try {
         const tt = await (await fetch(`${be.apiUrl}/public/validate/address`, {
@@ -2645,7 +2645,7 @@ function Yn({
       } catch {
         v(null);
       } finally {
-        He(!1);
+        Oe(!1);
       }
     }, 500), () => clearTimeout(ze.current);
   }, [y.walletAddress, y.network, be.apiUrl]);
@@ -2655,17 +2655,17 @@ function Yn({
     M !== -1 && E.length - M - 1 > R && (E = E.slice(0, M + R + 1)), s(_ ? { type: "SET_FIAT_AMOUNT", amount: E } : { type: "SET_CRYPTO_AMOUNT", amount: E });
   }, mt = (x) => {
     x !== Ee && s({ type: "SET_FLOW_TYPE", flowType: x });
-  }, Zt = O(
+  }, Zt = H(
     (x) => {
       s({ type: "SET_FIAT_CURRENCY", currency: x });
     },
     [s]
-  ), Qt = O(
+  ), Qt = H(
     (x, E) => {
       s({ type: "SET_CRYPTO_CURRENCY", currency: x }), s({ type: "SET_CRYPTO_CHAIN", chain: E });
     },
     [s]
-  ), zt = O(
+  ), zt = H(
     (x) => {
       s({ type: "SET_PAYMENT_METHOD", methodId: x });
     },
@@ -2705,7 +2705,7 @@ function Yn({
   l && ce(l) ? ge.backgroundColor = l : ge.backgroundColor = "var(--t-bg)", i && (ge.backgroundImage = `url(${i})`, ge.backgroundSize = "cover", ge.backgroundPosition = "center");
   const Ke = re ? "#ffffff" : "#111111", _e = {};
   m && ce(m) && (_e.border = `1px solid ${m}`), c && (_e.borderRadius = c);
-  const yt = y.step === "checkout" ? /* @__PURE__ */ e(Bn, { autoRedirect: P }) : y.step === "processing" ? /* @__PURE__ */ e(Hn, {}) : y.step === "complete" ? /* @__PURE__ */ e(Dn, { explorerUrl: $, doneButtonText: U, onDone: de }) : y.step === "error" ? /* @__PURE__ */ e(Pn, { supportEmail: Y }) : y.step === "confirm" ? /* @__PURE__ */ e(Un, { stablecoinParity: Le, partnerName: j }) : null;
+  const yt = y.step === "checkout" ? /* @__PURE__ */ e(Bn, { autoRedirect: P }) : y.step === "processing" ? /* @__PURE__ */ e(On, {}) : y.step === "complete" ? /* @__PURE__ */ e(Dn, { explorerUrl: $, doneButtonText: U, onDone: de }) : y.step === "error" ? /* @__PURE__ */ e(Pn, { supportEmail: Y }) : y.step === "confirm" ? /* @__PURE__ */ e(Un, { stablecoinParity: Le, partnerName: j }) : null;
   if (yt)
     return /* @__PURE__ */ e(
       "div",
@@ -2771,7 +2771,7 @@ function Yn({
             )
           ] })
         ] }) : null,
-        T || K || H ? /* @__PURE__ */ e(_n, {}) : /* @__PURE__ */ r("div", { className: "flex-1 overflow-hidden px-5 flex flex-col tab-fade-in", children: [
+        T || K || O ? /* @__PURE__ */ e(_n, {}) : /* @__PURE__ */ r("div", { className: "flex-1 overflow-hidden px-5 flex flex-col tab-fade-in", children: [
           /* @__PURE__ */ r(
             "div",
             {
@@ -2852,7 +2852,7 @@ function Yn({
                           style: { width: 14, height: 14 }
                         }
                       ) }),
-                      /* @__PURE__ */ e("span", { className: "text-[12px]", style: { color: "var(--t-text-muted)" }, children: xt })
+                      /* @__PURE__ */ e("span", { className: "text-[12px]", style: { color: "var(--t-text-secondary)" }, children: xt })
                     ] })
                   ] })
                 ] })
@@ -2918,7 +2918,7 @@ function Yn({
                           style: { width: 14, height: 14 }
                         }
                       ) }),
-                      /* @__PURE__ */ e("span", { className: "text-[12px]", style: { color: "var(--t-text-muted)" }, children: xt })
+                      /* @__PURE__ */ e("span", { className: "text-[12px]", style: { color: "var(--t-text-secondary)" }, children: xt })
                     ] })
                   ] }) : /* @__PURE__ */ r(
                     "button",
@@ -2998,9 +2998,9 @@ function Yn({
                 type: "text",
                 value: y.walletAddress,
                 onChange: (x) => s({ type: "SET_WALLET_ADDRESS", address: x.target.value }),
-                onFocus: () => Oe(!0),
+                onFocus: () => He(!0),
                 onBlur: () => {
-                  Oe(!1), Ne(!0);
+                  He(!1), Ne(!0);
                 },
                 placeholder: _ ? "Enter your receiving address" : "Enter your sending address",
                 spellCheck: !1,
@@ -3008,6 +3008,8 @@ function Yn({
                 className: "w-full bg-transparent text-[13px] outline-none transition-colors",
                 style: {
                   border: y.walletError || Te && !et ? "1px solid #EF4444" : Ze ? "1px solid var(--t-border-focus)" : "1px solid var(--t-border)",
+                  outline: "none",
+                  boxShadow: "none",
                   borderRadius: 3.5,
                   height: 47,
                   padding: "0 14px",
@@ -3020,13 +3022,13 @@ function Yn({
             ),
             y.walletError ? /* @__PURE__ */ e("div", { className: "text-[12px] mt-1.5", style: { color: "#EF4444" }, children: y.walletError }) : Te && !et && !ke ? /* @__PURE__ */ e("div", { className: "text-[12px] mt-1.5", style: { color: "#EF4444" }, children: "Enter a valid wallet address" }) : ke && y.walletAddress.trim().length >= 10 ? /* @__PURE__ */ e("div", { className: "text-[12px] mt-1.5", style: { color: "var(--t-text-muted)" }, children: "Validating address..." }) : null
           ] }),
-          /* @__PURE__ */ e("div", { className: "flex-1" }),
+          /* @__PURE__ */ e("div", { className: "flex-1", style: { minHeight: 16 } }),
           /* @__PURE__ */ e(
             "button",
             {
               disabled: !Ue || ae || I,
               onClick: Jt,
-              className: "w-full font-semibold text-[16px] transition-all mt-4",
+              className: "w-full font-semibold text-[16px] transition-all",
               style: {
                 height: 60,
                 borderRadius: 5,
@@ -3137,7 +3139,7 @@ function Zn({
   borderRadius: y,
   surfaceColor: s,
   inputBgColor: A,
-  textColor: H,
+  textColor: O,
   textSecondaryColor: C,
   textMutedColor: pe,
   successColor: ie,
@@ -3185,7 +3187,7 @@ function Zn({
           borderRadius: y,
           surfaceColor: s,
           inputBgColor: A,
-          textColor: H,
+          textColor: O,
           textSecondaryColor: C,
           textMutedColor: pe,
           successColor: ie,
@@ -3397,7 +3399,7 @@ export {
   $e as Modal,
   Nn as PayPalIcon,
   Mn as PaymentMethodSelector,
-  Hn as ProcessingStep,
+  On as ProcessingStep,
   Zn as RampForm,
   un as RampProvider,
   Cn as RevolutIcon,