@nowramp/form 0.1.45 → 0.1.47

package/dist/index.js

@@ -216,9 +216,9 @@ function Kt({
   statusPollInterval: x = 5e3,
   onComplete: p,
   onError: N,
-  children: T
+  children: R
 }) {
-  const P = F(() => ({ apiUrl: n, projectId: t }), [n, t]), w = u || (d ? d.toLowerCase() : ""), j = r === "sell", Q = j ? !!i : !!s, q = (j ? !!(Q && d && w) : !!(Q && d && w && h)) && f ? "confirm" : "amount", [c, O] = It(Ut, {
+  const P = F(() => ({ apiUrl: n, projectId: t }), [n, t]), w = u || (d ? d.toLowerCase() : ""), W = r === "sell", Q = W ? !!i : !!s, q = (W ? !!(Q && d && w) : !!(Q && d && w && h)) && f ? "confirm" : "amount", [c, O] = It(Ut, {
     ...yt,
     step: q,
     flowType: r,
@@ -373,7 +373,7 @@ function Kt({
     goBack: ue,
     canProceed: Oe
   };
-  return /* @__PURE__ */ e(xt.Provider, { value: xe, children: T });
+  return /* @__PURE__ */ e(xt.Provider, { value: xe, children: R });
 }
 function he() {
   const t = Mt(xt);
@@ -851,7 +851,7 @@ function Gt({ size: t = 24 }) {
     /* @__PURE__ */ e("rect", { x: "8", y: "22", width: "16", height: "2", rx: "0.5", fill: "white" })
   ] });
 }
-function jt({ size: t = 32 }) {
+function Wt({ size: t = 32 }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -861,7 +861,7 @@ function jt({ size: t = 32 }) {
     }
   );
 }
-function Wt({ size: t = 32 }) {
+function jt({ size: t = 32 }) {
   return /* @__PURE__ */ e(
     "div",
     {
@@ -948,9 +948,9 @@ function qt({ size: t = 40 }) {
 function en(t, n = 32) {
   switch (t) {
     case "revolut":
-      return /* @__PURE__ */ e(jt, { size: n });
-    case "applepay":
       return /* @__PURE__ */ e(Wt, { size: n });
+    case "applepay":
+      return /* @__PURE__ */ e(jt, { size: n });
     case "card":
       return /* @__PURE__ */ e(Zt, { size: n });
     case "googlepay":
@@ -1881,8 +1881,8 @@ function Be({
         value: t,
         onChange: (r) => n(r.target.value),
         placeholder: a,
-        style: { height: 47, borderRadius: 4.5, borderColor: "var(--t-border)", color: "var(--t-text)", paddingLeft: 14, paddingRight: t ? 40 : 14, fontSize: 14 },
-        className: "w-full bg-transparent border outline-none transition-colors"
+        style: { height: 47, borderRadius: 4.5, border: "1px solid var(--t-border)", color: "var(--t-text)", padding: `0 ${t ? 40 : 14}px 0 14px`, fontSize: 14, backgroundColor: "transparent" },
+        className: "w-full outline-none transition-colors"
       }
     ),
     t && /* @__PURE__ */ e(
@@ -1916,7 +1916,7 @@ function hn({ onClose: t, onSelect: n, currencies: a, assetBaseUrl: r = "" }) {
       "h2",
       {
         className: "text-center text-[17px] font-medium mt-2 mb-6",
-        style: { color: "var(--t-text)" },
+        style: { color: "var(--t-text)", fontSize: 17, fontWeight: 500, marginTop: 8, marginBottom: 24 },
         children: "Select fiat currency"
       }
     ),
@@ -1969,10 +1969,10 @@ function fn({ onClose: t, onSelect: n, cryptos: a, assetBaseUrl: r = "" }) {
     if (!s) return d;
     const i = s.split(/\s+/), h = [];
     for (const v of d) {
-      const x = Ie(v.chain), p = x ? x.name.toLowerCase() : "", N = ((f = x == null ? void 0 : x.shortName) == null ? void 0 : f.toLowerCase()) || "", T = v.chain.toLowerCase(), P = v.code.toLowerCase(), w = v.name.toLowerCase(), j = [P, w, p, N, T];
-      if (!i.every((q) => j.some((c) => c.includes(q)))) continue;
-      let W = 0;
-      P === s ? W += 100 : P.startsWith(i[0]) && (W += 50), v.popular && (W += 10), i.length > 1 && (p.includes(i[1]) || N.includes(i[1]) || T.includes(i[1])) && (W += 25), h.push({ item: v, score: W });
+      const x = Ie(v.chain), p = x ? x.name.toLowerCase() : "", N = ((f = x == null ? void 0 : x.shortName) == null ? void 0 : f.toLowerCase()) || "", R = v.chain.toLowerCase(), P = v.code.toLowerCase(), w = v.name.toLowerCase(), W = [P, w, p, N, R];
+      if (!i.every((q) => W.some((c) => c.includes(q)))) continue;
+      let j = 0;
+      P === s ? j += 100 : P.startsWith(i[0]) && (j += 50), v.popular && (j += 10), i.length > 1 && (p.includes(i[1]) || N.includes(i[1]) || R.includes(i[1])) && (j += 25), h.push({ item: v, score: j });
     }
     return h.sort((v, x) => x.score - v.score), h.map((v) => v.item);
   }, [d, l]);
@@ -1982,7 +1982,7 @@ function fn({ onClose: t, onSelect: n, cryptos: a, assetBaseUrl: r = "" }) {
       "h2",
       {
         className: "text-center text-[17px] font-medium mt-2 mb-6",
-        style: { color: "var(--t-text)" },
+        style: { color: "var(--t-text)", fontSize: 17, fontWeight: 500, marginTop: 8, marginBottom: 24 },
         children: "Select crypto currency"
       }
     ),
@@ -2065,7 +2065,7 @@ function yn({
       "h2",
       {
         className: "text-center text-[17px] font-medium mt-2 mb-6",
-        style: { color: "var(--t-text)" },
+        style: { color: "var(--t-text)", fontSize: 17, fontWeight: 500, marginTop: 8, marginBottom: 24 },
         children: "Choose payment method"
       }
     ),
@@ -2185,6 +2185,7 @@ function vn({
             target: "_blank",
             rel: "noopener noreferrer",
             className: "flex items-center justify-between w-full py-5 transition-colors",
+            style: { color: "inherit", textDecoration: "none" },
             children: [
               /* @__PURE__ */ e(
                 "span",
@@ -2223,12 +2224,12 @@ function Nn({
   const {
     state: p,
     dispatch: N,
-    config: T,
+    config: R,
     configLoading: P,
     quotes: w,
-    quotesLoading: j,
+    quotesLoading: W,
     quotesError: Q,
-    fetchQuotes: W,
+    fetchQuotes: j,
     createOrder: q,
     orderLoading: c,
     amountError: O,
@@ -2259,8 +2260,8 @@ function Nn({
     return "0";
   }, [w, L]), bt = F(() => {
     var B, te, De;
-    const y = Z || ((B = Se.current) == null ? void 0 : B.rate), E = Z ? k : (te = Se.current) == null ? void 0 : te.crypto, R = Z ? S : (De = Se.current) == null ? void 0 : De.fiat;
-    return !y || !E || !R ? "" : `1 ${E} ≈ ${y.toFixed(2)} ${R}`;
+    const y = Z || ((B = Se.current) == null ? void 0 : B.rate), E = Z ? k : (te = Se.current) == null ? void 0 : te.crypto, T = Z ? S : (De = Se.current) == null ? void 0 : De.fiat;
+    return !y || !E || !T ? "" : `1 ${E} ≈ ${y.toFixed(2)} ${T}`;
   }, [k, S, Z]);
   U(() => {
     const y = p.walletAddress.trim(), E = p.network;
@@ -2269,13 +2270,13 @@ function Nn({
       return;
     }
     return be(!0), re(null), clearTimeout(xe.current), xe.current = setTimeout(async () => {
-      var R, B, te;
+      var T, B, te;
       try {
         const Ue = await (await fetch(`${I.apiUrl}/public/validate/address`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({ address: y, ...E ? { network: E } : {} })
-        })).json(), Ke = ((R = Ue.data) == null ? void 0 : R.attributes) || Ue.data || Ue;
+        })).json(), Ke = ((T = Ue.data) == null ? void 0 : T.attributes) || Ue.data || Ue;
         if (Ke.isValid)
           re(!0), N({ type: "SET_WALLET_ERROR", message: "" });
         else {
@@ -2290,10 +2291,10 @@ function Nn({
       }
     }, 500), () => clearTimeout(xe.current);
   }, [p.walletAddress, p.network, I.apiUrl]);
-  const Ge = !H || D === 0, je = D > 0 && (L ? D < mt : D < pt), We = !!O || je || ye && Ge, Et = D > 0 && !O && !je, Pe = p.walletAddress.trim().length >= 10 && Y !== !1 && !de, Re = Et && Pe && !!p.cryptoCurrency && !!p.network, At = (y) => {
+  const Ge = !H || D === 0, We = D > 0 && (L ? D < mt : D < pt), je = !!O || We || ye && Ge, Et = D > 0 && !O && !We, Pe = p.walletAddress.trim().length >= 10 && Y !== !1 && !de, Te = Et && Pe && !!p.cryptoCurrency && !!p.network, At = (y) => {
     let E = y.target.value.replace(/[^0-9.,]/g, "");
-    const R = L ? 2 : 6, B = E.indexOf(".");
-    B !== -1 && E.length - B - 1 > R && (E = E.slice(0, B + R + 1)), N(L ? { type: "SET_FIAT_AMOUNT", amount: E } : { type: "SET_CRYPTO_AMOUNT", amount: E });
+    const T = L ? 2 : 6, B = E.indexOf(".");
+    B !== -1 && E.length - B - 1 > T && (E = E.slice(0, B + T + 1)), N(L ? { type: "SET_FIAT_AMOUNT", amount: E } : { type: "SET_CRYPTO_AMOUNT", amount: E });
   }, Ye = (y) => {
     y !== A && N({ type: "SET_FLOW_TYPE", flowType: y });
   }, wt = $(
@@ -2306,17 +2307,17 @@ function Nn({
       N({ type: "SET_CRYPTO_CURRENCY", currency: y }), N({ type: "SET_CRYPTO_CHAIN", chain: E });
     },
     [N]
-  ), Rt = $(
+  ), Tt = $(
     (y) => {
       N({ type: "SET_PAYMENT_METHOD", methodId: y });
     },
     [N]
-  ), Tt = () => {
-    Re && (ue(!0), W());
+  ), Rt = () => {
+    Te && (ue(!0), j());
   };
   U(() => {
     var y;
-    if (!(!ee || j)) {
+    if (!(!ee || W)) {
       if (w != null && w.bestQuote)
         ue(!1), N({ type: "SELECT_QUOTE", quote: w.bestQuote }), q().catch(() => {
         });
@@ -2324,11 +2325,11 @@ function Nn({
         ue(!1), N({ type: "SET_ERROR", message: Q.message || "No quotes available" });
       else if (w && !w.bestQuote) {
         ue(!1);
-        const E = (y = w.unavailableGateways) == null ? void 0 : y.map((B) => B.reason).filter(Boolean), R = E != null && E.length ? `No providers available: ${E.join("; ")}` : "No providers available for this currency/network combination";
-        N({ type: "SET_ERROR", message: R });
+        const E = (y = w.unavailableGateways) == null ? void 0 : y.map((B) => B.reason).filter(Boolean), T = E != null && E.length ? `No providers available: ${E.join("; ")}` : "No providers available for this currency/network combination";
+        N({ type: "SET_ERROR", message: T });
       }
     }
-  }, [ee, w, j, Q, N, q]);
+  }, [ee, w, W, Q, N, q]);
   const Qe = V ? "theme-dark" : "theme-light", He = dt.find((y) => y.id === Ne) || dt[0], kt = He.accent === null, Ze = (r ? _e(r) : !1) ? { "--t-accent": r, "--t-cta-bg": r, "--t-cta-text": "#ffffff" } : kt ? {
     "--t-accent": V ? "#ffffff" : "#111111",
     "--t-cta-bg": V ? "#ffffff" : "#111111",
@@ -2339,8 +2340,8 @@ function Nn({
     "--t-cta-text": "#ffffff"
   }, le = {};
   l && _e(l) ? le.backgroundColor = l : le.backgroundColor = "var(--t-bg)", m && (le.backgroundImage = `url(${m})`, le.backgroundSize = "cover", le.backgroundPosition = "center");
-  const Te = {};
-  d && _e(d) && (Te.border = `1px solid ${d}`), u && (Te.borderRadius = u);
+  const Re = {};
+  d && _e(d) && (Re.border = `1px solid ${d}`), u && (Re.borderRadius = u);
   const ze = p.step === "checkout" ? /* @__PURE__ */ e(rn, { autoRedirect: i }) : p.step === "processing" ? /* @__PURE__ */ e(ln, {}) : p.step === "complete" ? /* @__PURE__ */ e(sn, { explorerUrl: h, doneButtonText: f, onDone: x }) : p.step === "error" ? /* @__PURE__ */ e(cn, { supportEmail: v }) : p.step === "confirm" ? /* @__PURE__ */ e(dn, {}) : null;
   if (ze)
     return /* @__PURE__ */ e(
@@ -2351,7 +2352,7 @@ function Nn({
           fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
           ...le,
           ...Ze,
-          ...Te
+          ...Re
         },
         children: ze
       }
@@ -2365,7 +2366,7 @@ function Nn({
         fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
         ...le,
         ...Ze,
-        ...Te
+        ...Re
       },
       children: [
         /* @__PURE__ */ e("div", { className: `flex justify-end items-center px-5 pt-3 ${s ? "pb-1" : "pb-5"}`, children: /* @__PURE__ */ e(Jt, { onClick: () => X("settings") }) }),
@@ -2413,7 +2414,7 @@ function Nn({
               style: {
                 background: "var(--t-surface)",
                 borderRadius: 5,
-                border: ye && We ? "1px solid #EF4444" : "1px solid transparent",
+                border: ye && je ? "1px solid #EF4444" : "1px solid transparent",
                 minHeight: 102
               },
               children: [
@@ -2429,7 +2430,7 @@ function Nn({
                       onBlur: () => ae(!0),
                       placeholder: L ? "250" : "0.01",
                       className: "bg-transparent outline-none w-0 flex-1 mr-3",
-                      style: { color: "var(--t-text)", fontSize: 24, fontWeight: 600, lineHeight: "32px" },
+                      style: { color: "var(--t-text)", fontSize: 24, fontWeight: 600, lineHeight: "32px", padding: 0, border: "none", borderRadius: 0, backgroundColor: "transparent", height: "auto", width: 0 },
                       inputMode: "decimal",
                       disabled: !!((et = C == null ? void 0 : C.sourceAmount) != null && et.locked)
                     }
@@ -2493,7 +2494,7 @@ function Nn({
               ]
             }
           ),
-          ye && We && /* @__PURE__ */ e("div", { className: "text-[12px] mt-1.5 px-[2px]", style: { color: "#EF4444" }, children: O || (Ge ? "Amount should be more than 0" : L ? `Minimum amount is ${mt} ${S}` : `Minimum amount is ${pt} ${k}`) }),
+          ye && je && /* @__PURE__ */ e("div", { className: "text-[12px] mt-1.5 px-[2px]", style: { color: "#EF4444" }, children: O || (Ge ? "Amount should be more than 0" : L ? `Minimum amount is ${mt} ${S}` : `Minimum amount is ${pt} ${k}`) }),
           /* @__PURE__ */ o(
             "div",
             {
@@ -2510,7 +2511,7 @@ function Nn({
               children: [
                 /* @__PURE__ */ e("div", { className: "text-[13px] mb-2.5", style: { color: "var(--t-text-secondary)" }, children: "You get" }),
                 /* @__PURE__ */ o("div", { className: "flex items-start justify-between", children: [
-                  j ? /* @__PURE__ */ e(M, { w: 180, h: 32 }) : /* @__PURE__ */ e(
+                  W ? /* @__PURE__ */ e(M, { w: 180, h: 32 }) : /* @__PURE__ */ e(
                     mn,
                     {
                       value: D > 0 ? Ct : "0",
@@ -2584,15 +2585,15 @@ function Nn({
               className: "flex items-center justify-between mt-[2px] px-[18px] pt-[12px] pb-[14px]",
               style: {
                 background: "var(--t-surface)",
-                ...(ot = T == null ? void 0 : T.paymentMethods) != null && ot.length ? {} : { borderBottomLeftRadius: 5, borderBottomRightRadius: 5 }
+                ...(ot = R == null ? void 0 : R.paymentMethods) != null && ot.length ? {} : { borderBottomLeftRadius: 5, borderBottomRightRadius: 5 }
               },
               children: /* @__PURE__ */ e("span", { className: "text-[12px]", style: { color: "var(--t-text-secondary)" }, children: bt || " " })
             }
           ),
-          (T == null ? void 0 : T.paymentMethods) && T.paymentMethods.length > 0 && /* @__PURE__ */ e("div", { className: "mt-[2px]", children: /* @__PURE__ */ e(
+          (R == null ? void 0 : R.paymentMethods) && R.paymentMethods.length > 0 && /* @__PURE__ */ e("div", { className: "mt-[2px]", children: /* @__PURE__ */ e(
             an,
             {
-              methods: T.paymentMethods,
+              methods: R.paymentMethods,
               selectedId: p.paymentMethodId,
               onOpenModal: () => X("payment"),
               fiatCurrency: p.fiatCurrency
@@ -2615,9 +2616,10 @@ function Nn({
                   border: p.walletError || Ce && !Pe ? "1px solid #EF4444" : "1px solid var(--t-border)",
                   borderRadius: 3.5,
                   height: 47,
-                  paddingLeft: 14,
-                  paddingRight: 14,
-                  color: "var(--t-text)"
+                  padding: "0 14px",
+                  color: "var(--t-text)",
+                  fontSize: 13,
+                  backgroundColor: "transparent"
                 },
                 disabled: !!((lt = C == null ? void 0 : C.destinationAddress) != null && lt.locked)
               }
@@ -2628,16 +2630,16 @@ function Nn({
           /* @__PURE__ */ e(
             "button",
             {
-              disabled: !Re || c || ee,
-              onClick: Tt,
+              disabled: !Te || c || ee,
+              onClick: Rt,
               className: "w-full font-semibold text-[16px] transition-all",
               style: {
                 height: 60,
                 borderRadius: 5,
                 background: "var(--t-cta-bg)",
                 color: "var(--t-cta-text)",
-                opacity: Re && !c && !ee ? 1 : 0.4,
-                cursor: Re && !c && !ee ? "pointer" : "not-allowed"
+                opacity: Te && !c && !ee ? 1 : 0.4,
+                cursor: Te && !c && !ee ? "pointer" : "not-allowed"
               },
               children: ee ? "Getting best price..." : c ? "Processing..." : L ? `Buy ${k}` : `Sell ${k}`
             }
@@ -2650,10 +2652,10 @@ function Nn({
             hn,
             {
               onClose: y,
-              onSelect: (R) => {
-                wt(R), y();
+              onSelect: (T) => {
+                wt(T), y();
               },
-              currencies: (E = T == null ? void 0 : T.fiats) == null ? void 0 : E.map((R) => ({ code: R.code, name: R.code })),
+              currencies: (E = R == null ? void 0 : R.fiats) == null ? void 0 : E.map((T) => ({ code: T.code, name: T.code })),
               assetBaseUrl: _
             }
           );
@@ -2664,15 +2666,15 @@ function Nn({
             fn,
             {
               onClose: y,
-              onSelect: (R, B) => {
-                St(R, B), y();
+              onSelect: (T, B) => {
+                St(T, B), y();
               },
-              cryptos: (E = T == null ? void 0 : T.cryptos) == null ? void 0 : E.map((R) => {
+              cryptos: (E = R == null ? void 0 : R.cryptos) == null ? void 0 : E.map((T) => {
                 var B;
                 return {
-                  code: R.code,
-                  name: R.code,
-                  networks: (B = R.networks) == null ? void 0 : B.map((te) => ({ code: te.id, name: te.name }))
+                  code: T.code,
+                  name: T.code,
+                  networks: (B = T.networks) == null ? void 0 : B.map((te) => ({ code: te.id, name: te.name }))
                 };
               }),
               assetBaseUrl: _
@@ -2684,10 +2686,10 @@ function Nn({
           return /* @__PURE__ */ e(
             yn,
             {
-              methods: ((E = T == null ? void 0 : T.paymentMethods) == null ? void 0 : E.filter((R) => R.supportedFiats.includes(p.fiatCurrency))) || [],
+              methods: ((E = R == null ? void 0 : R.paymentMethods) == null ? void 0 : E.filter((T) => T.supportedFiats.includes(p.fiatCurrency))) || [],
               selectedId: p.paymentMethodId,
-              onSelect: (R) => {
-                Rt(R), y();
+              onSelect: (T) => {
+                Tt(T), y();
               },
               onClose: y
             }
@@ -2726,12 +2728,12 @@ function Cn({
   statusPollInterval: x,
   onComplete: p,
   onError: N,
-  className: T,
+  className: R,
   theme: P,
   skinId: w,
-  accentColor: j,
+  accentColor: W,
   bgColor: Q,
-  bgImage: W,
+  bgImage: j,
   borderColor: q,
   borderRadius: c,
   showFlowToggle: O,
@@ -2763,12 +2765,12 @@ function Cn({
       children: /* @__PURE__ */ e(
         Nn,
         {
-          className: T,
+          className: R,
           theme: P,
           skinId: w,
-          accentColor: j,
+          accentColor: W,
           bgColor: Q,
-          bgImage: W,
+          bgImage: j,
           borderColor: q,
           borderRadius: c,
           showFlowToggle: O,
@@ -2886,7 +2888,7 @@ function Pn({
       "h2",
       {
         className: "text-center text-[17px] font-medium mt-2 mb-6",
-        style: { color: "var(--t-text)" },
+        style: { color: "var(--t-text)", fontSize: 17, fontWeight: 500, marginTop: 8, marginBottom: 24 },
         children: "Choose Ramp"
       }
     ),
@@ -2944,7 +2946,7 @@ function Pn({
 export {
   un as AnimatedDigit,
   mn as AnimatedNumber,
-  Wt as ApplePayIcon,
+  jt as ApplePayIcon,
   Fe as BLOCKCHAINS,
   Gt as BankIcon,
   Vt as CRYPTO_CHAIN_COMBOS,
@@ -2978,7 +2980,7 @@ export {
   ln as ProcessingStep,
   Cn as RampForm,
   Kt as RampProvider,
-  jt as RevolutIcon,
+  Wt as RevolutIcon,
   dt as SKINS,
   Be as SearchInput,
   vn as SettingsScreen,