@nowramp/form 0.1.39 → 0.1.40

package/dist/index.js

@@ -9,12 +9,12 @@
   document.head.appendChild(s);
 })();
 import { jsx as e, jsxs as l, Fragment as J } from "react/jsx-runtime";
-import ke, { useState as C, useRef as F, useCallback as X, useEffect as D, useMemo as K, useReducer as Rt, useContext as kt, createContext as Lt } from "react";
+import ke, { useState as N, useRef as D, useCallback as _, useEffect as U, useMemo as F, useReducer as Rt, useContext as kt, createContext as Lt } from "react";
 import { RampApi as Me } from "@nowramp/sdk";
 function It(t, a) {
-  const [n, s] = C(null), [r, u] = C(!0), [m, i] = C(null), o = F(null);
+  const [n, s] = N(null), [r, u] = N(!0), [m, i] = N(null), o = D(null);
   (!o.current || o.current !== t) && (o.current = new Me({ apiKey: "", ...t }));
-  const d = X(async () => {
+  const d = _(async () => {
     if (!t.projectId) {
       i(new Error("projectId is required")), u(!1);
       return;
@@ -29,15 +29,15 @@ function It(t, a) {
       u(!1);
     }
   }, [t.projectId, a]);
-  return D(() => {
+  return U(() => {
     d();
   }, [d]), { config: n, loading: r, error: m, refetch: d };
 }
 function Mt(t, a) {
-  const [n, s] = C(null), [r, u] = C(!1), [m, i] = C(null), o = F(null), d = F(""), h = `${t.apiUrl}|${t.projectId}`;
+  const [n, s] = N(null), [r, u] = N(!1), [m, i] = N(null), o = D(null), d = D(""), h = `${t.apiUrl}|${t.projectId}`;
   (!o.current || d.current !== h) && (o.current = new Me({ apiKey: "", ...t }), d.current = h);
-  const f = F(0);
-  D(() => {
+  const f = D(0);
+  U(() => {
     const g = ++f.current;
     if (!a || !t.projectId) {
       s(null), u(!1);
@@ -52,7 +52,7 @@ function Mt(t, a) {
       }
     );
   }, [t.projectId, a == null ? void 0 : a.fiatCurrency, a == null ? void 0 : a.fiatAmount, a == null ? void 0 : a.cryptoAmount, a == null ? void 0 : a.cryptoCurrency, a == null ? void 0 : a.network, a == null ? void 0 : a.paymentMethodId, a == null ? void 0 : a.country, a == null ? void 0 : a.orderType]);
-  const x = X(async () => {
+  const x = _(async () => {
     if (!(!a || !t.projectId)) {
       u(!0), i(null);
       try {
@@ -68,9 +68,9 @@ function Mt(t, a) {
   return { quotes: n, loading: r, error: m, refetch: x };
 }
 function Bt(t) {
-  const [a, n] = C(null), [s, r] = C(!1), [u, m] = C(null), i = F(null), o = F(""), d = `${t.apiUrl}|${t.projectId}`;
+  const [a, n] = N(null), [s, r] = N(!1), [u, m] = N(null), i = D(null), o = D(""), d = `${t.apiUrl}|${t.projectId}`;
   (!i.current || o.current !== d) && (i.current = new Me({ apiKey: "", ...t }), o.current = d);
-  const h = X(async (x) => {
+  const h = _(async (x) => {
     r(!0), m(null);
     try {
       const g = await i.current.createCheckoutIntent(x);
@@ -81,15 +81,15 @@ function Bt(t) {
     } finally {
       r(!1);
     }
-  }, []), f = X(() => {
+  }, []), f = _(() => {
     n(null), m(null);
   }, []);
   return { order: a, loading: s, error: u, createOrder: h, reset: f };
 }
 function Ot(t, a, n) {
-  const [s, r] = C(null), [u, m] = C(!1), [i, o] = C(null), d = F(null);
+  const [s, r] = N(null), [u, m] = N(!1), [i, o] = N(null), d = D(null);
   d.current || (d.current = new Me({ apiKey: "", projectId: "", ...t }));
-  const h = X(async () => {
+  const h = _(async () => {
     if (a) {
       m(!0), o(null);
       try {
@@ -102,7 +102,7 @@ function Ot(t, a, n) {
       }
     }
   }, [a]);
-  return D(() => {
+  return U(() => {
     if (!a) return;
     const f = (n == null ? void 0 : n.initialDelay) ?? 0;
     if (f > 0) {
@@ -110,7 +110,7 @@ function Ot(t, a, n) {
       return () => clearTimeout(x);
     }
     h();
-  }, [h, a, n == null ? void 0 : n.initialDelay]), D(() => {
+  }, [h, a, n == null ? void 0 : n.initialDelay]), U(() => {
     if (!a || !(n != null && n.pollInterval) || !s || ["completed", "failed", "cancelled", "expired", "refunded"].includes(s.status))
       return;
     const x = setInterval(h, n.pollInterval);
@@ -217,7 +217,7 @@ function Ht({
   onError: b,
   children: T
 }) {
-  const H = K(() => ({ apiUrl: a, projectId: t }), [a, t]), w = i || (m ? m.toLowerCase() : ""), j = s === "sell", Q = j ? !!d : !!o, z = (j ? !!(Q && m && w) : !!(Q && m && w && h)) && f ? "confirm" : "amount", [c, O] = Rt(Pt, {
+  const P = F(() => ({ apiUrl: a, projectId: t }), [a, t]), w = i || (m ? m.toLowerCase() : ""), G = s === "sell", Q = G ? !!d : !!o, z = (G ? !!(Q && m && w) : !!(Q && m && w && h)) && f ? "confirm" : "amount", [c, O] = Rt(Pt, {
     ...ht,
     step: z,
     flowType: s,
@@ -228,63 +228,63 @@ function Ht({
     cryptoAmount: lt(d, 6),
     walletAddress: h,
     customerId: r
-  }), N = c.flowType === "sell", {
+  }), C = c.flowType === "sell", {
     config: L,
-    loading: _,
-    error: $
-  } = It(H, c.flowType);
+    loading: K,
+    error: X
+  } = It(P, c.flowType);
   ke.useEffect(() => {
-    var S, R, k;
+    var S, k, R;
     if (!L || !c.cryptoCurrency || c.network) return;
-    const v = (S = L.cryptos) == null ? void 0 : S.find((P) => P.code === c.cryptoCurrency), E = ((R = v == null ? void 0 : v.networks) == null ? void 0 : R.find((P) => P.isDefault)) || ((k = v == null ? void 0 : v.networks) == null ? void 0 : k[0]);
+    const v = (S = L.cryptos) == null ? void 0 : S.find((H) => H.code === c.cryptoCurrency), E = ((k = v == null ? void 0 : v.networks) == null ? void 0 : k.find((H) => H.isDefault)) || ((R = v == null ? void 0 : v.networks) == null ? void 0 : R[0]);
     E != null && E.id && O({ type: "SET_NETWORK", network: E.id });
   }, [L, c.cryptoCurrency, c.network]), ke.useEffect(() => {
-    var R, k;
-    if (!((R = L == null ? void 0 : L.paymentMethods) != null && R.length)) return;
+    var k, R;
+    if (!((k = L == null ? void 0 : L.paymentMethods) != null && k.length)) return;
     const v = c.fiatCurrency, E = L.paymentMethods;
     if (c.paymentMethodId && E.some(
-      (U) => U.id === c.paymentMethodId && U.supportedFiats.includes(v)
+      (W) => W.id === c.paymentMethodId && W.supportedFiats.includes(v)
     ))
       return;
-    const S = E.find((P) => P.supportedFiats.includes(v));
-    O({ type: "SET_PAYMENT_METHOD", methodId: (S == null ? void 0 : S.id) || ((k = E[0]) == null ? void 0 : k.id) || "" });
+    const S = E.find((H) => H.supportedFiats.includes(v));
+    O({ type: "SET_PAYMENT_METHOD", methodId: (S == null ? void 0 : S.id) || ((R = E[0]) == null ? void 0 : R.id) || "" });
   }, [L, c.fiatCurrency, c.paymentMethodId]);
-  const G = K(() => {
-    if (N) {
+  const $ = F(() => {
+    if (C) {
       if (!c.cryptoAmount) return null;
-      const k = parseFloat(c.cryptoAmount);
-      return isNaN(k) || k <= 0 ? "Enter a valid amount" : null;
+      const R = parseFloat(c.cryptoAmount);
+      return isNaN(R) || R <= 0 ? "Enter a valid amount" : null;
     }
     if (!L || !c.fiatAmount) return null;
     const v = parseFloat(c.fiatAmount);
     if (isNaN(v)) return null;
-    const E = L.fiats.find((k) => k.code === c.fiatCurrency);
+    const E = L.fiats.find((R) => R.code === c.fiatCurrency);
     if (!E) return null;
-    const S = parseFloat(E.minAmount), R = parseFloat(E.maxAmount);
-    return !isNaN(S) && v < S ? `Minimum amount is ${E.minAmount} ${c.fiatCurrency}` : !isNaN(R) && v > R ? `Maximum amount is ${E.maxAmount} ${c.fiatCurrency}` : null;
-  }, [L, c.fiatAmount, c.fiatCurrency, c.cryptoAmount, N]), Ne = K(() => {
-    const v = N ? !!c.cryptoAmount : !!c.fiatAmount;
-    return !L || !v || !c.cryptoCurrency || !c.network || G ? null : {
+    const S = parseFloat(E.minAmount), k = parseFloat(E.maxAmount);
+    return !isNaN(S) && v < S ? `Minimum amount is ${E.minAmount} ${c.fiatCurrency}` : !isNaN(k) && v > k ? `Maximum amount is ${E.maxAmount} ${c.fiatCurrency}` : null;
+  }, [L, c.fiatAmount, c.fiatCurrency, c.cryptoAmount, C]), Ne = F(() => {
+    const v = C ? !!c.cryptoAmount : !!c.fiatAmount;
+    return !L || !v || !c.cryptoCurrency || !c.network || $ ? null : {
       fiatCurrency: c.fiatCurrency,
-      ...N ? { cryptoAmount: c.cryptoAmount } : { fiatAmount: c.fiatAmount },
+      ...C ? { cryptoAmount: c.cryptoAmount } : { fiatAmount: c.fiatAmount },
       cryptoCurrency: c.cryptoCurrency,
       network: c.network,
       paymentMethodId: c.paymentMethodId || void 0,
       country: c.country || void 0,
       orderType: c.flowType
     };
-  }, [L, c.fiatCurrency, c.fiatAmount, c.cryptoAmount, c.cryptoCurrency, c.network, c.paymentMethodId, c.country, G, N, c.flowType]), {
+  }, [L, c.fiatCurrency, c.fiatAmount, c.cryptoAmount, c.cryptoCurrency, c.network, c.paymentMethodId, c.country, $, C, c.flowType]), {
     quotes: he,
     loading: fe,
-    error: V,
+    error: Y,
     refetch: ye
-  } = Mt(H, Ne), {
+  } = Mt(P, Ne), {
     order: ae,
     loading: Ce,
     error: se,
     createOrder: ce
-  } = Bt(H), be = 15e3, {
-    status: W,
+  } = Bt(P), be = 15e3, {
+    status: V,
     loading: ne
   } = Ot(
     { apiUrl: a },
@@ -292,21 +292,21 @@ function Ht({
     { pollInterval: g, initialDelay: be }
   );
   ke.useEffect(() => {
-    (W == null ? void 0 : W.status) === "completed" && p && p(W);
-  }, [W == null ? void 0 : W.status, p]), ke.useEffect(() => {
-    const v = $ || se;
+    (V == null ? void 0 : V.status) === "completed" && p && p(V);
+  }, [V == null ? void 0 : V.status, p]), ke.useEffect(() => {
+    const v = X || se;
     v && b && b(v);
-  }, [$, se, b]);
-  const re = f || (L == null ? void 0 : L.defaultGateway) || null, Ee = F(re);
+  }, [X, se, b]);
+  const re = f || (L == null ? void 0 : L.defaultGateway) || null, Ee = D(re);
   Ee.current = re;
-  const Ae = F(he);
+  const Ae = D(he);
   Ae.current = he;
-  const we = X(async () => {
-    var S, R, k;
-    const v = ((S = c.selectedQuote) == null ? void 0 : S.gatewayId) || ((k = (R = Ae.current) == null ? void 0 : R.bestQuote) == null ? void 0 : k.gatewayId) || Ee.current, E = c.flowType === "buy";
-    if (!v || E && !c.walletAddress) {
-      const P = [!v && "gateway", E && !c.walletAddress && "walletAddress"].filter(Boolean).join(", ");
-      O({ type: "SET_ERROR", message: `Missing required fields: ${P}` });
+  const we = _(async () => {
+    var E, S, k;
+    const v = ((E = c.selectedQuote) == null ? void 0 : E.gatewayId) || ((k = (S = Ae.current) == null ? void 0 : S.bestQuote) == null ? void 0 : k.gatewayId) || Ee.current;
+    if (!v || !c.walletAddress) {
+      const R = [!v && "gateway", !c.walletAddress && "walletAddress"].filter(Boolean).join(", ");
+      O({ type: "SET_ERROR", message: `Missing required fields: ${R}` });
       return;
     }
     try {
@@ -314,30 +314,30 @@ function Ht({
         gateway: v,
         customerId: c.customerId || void 0,
         fiatCurrency: c.fiatCurrency,
-        ...N ? { cryptoAmount: c.cryptoAmount } : { fiatAmount: c.fiatAmount },
+        ...C ? { cryptoAmount: c.cryptoAmount } : { fiatAmount: c.fiatAmount },
         cryptoCurrency: c.cryptoCurrency,
         network: c.network,
-        walletAddress: c.walletAddress || void 0,
+        walletAddress: c.walletAddress,
         paymentMethodId: c.paymentMethodId || void 0,
         email: c.email || void 0,
         orderType: c.flowType
       }), O({ type: "SET_STEP", step: "checkout" });
-    } catch (P) {
-      const U = P instanceof Error ? P.message : "Failed to create order";
-      /wallet|address/i.test(U) ? O({ type: "SET_WALLET_ERROR", message: U.replace(/^Failed to create checkout intent:\s*/i, "") }) : O({ type: "SET_ERROR", message: U });
+    } catch (R) {
+      const H = R instanceof Error ? R.message : "Failed to create order";
+      /wallet|address/i.test(H) ? O({ type: "SET_WALLET_ERROR", message: H.replace(/^Failed to create checkout intent:\s*/i, "") }) : O({ type: "SET_ERROR", message: H });
     }
-  }, [c, ce, N]), q = X((v) => {
+  }, [c, ce, C]), q = _((v) => {
     O({ type: "SET_STEP", step: v });
-  }, []), ie = X(() => {
+  }, []), ie = _(() => {
     const v = ["confirm", "amount", "quotes", "wallet", "checkout", "processing", "complete"], E = v.indexOf(c.step);
     E > 0 && O({ type: "SET_STEP", step: v[E - 1] });
-  }, [c.step, N]), Oe = K(() => {
-    const v = N ? !!c.cryptoAmount : !!c.fiatAmount;
+  }, [c.step, C]), Oe = F(() => {
+    const v = C ? !!c.cryptoAmount : !!c.fiatAmount;
     switch (c.step) {
       case "confirm":
-        return !!(v && c.cryptoCurrency && c.network && (N || c.walletAddress) && !G);
+        return !!(v && c.cryptoCurrency && c.network && c.walletAddress && !$);
       case "amount":
-        return !!(v && c.cryptoCurrency && c.network && !G);
+        return !!(v && c.cryptoCurrency && c.network && !$);
       case "quotes":
         return !!c.selectedQuote;
       case "wallet":
@@ -345,27 +345,27 @@ function Ht({
       default:
         return !1;
     }
-  }, [c, G, N]), xe = {
-    apiConfig: H,
+  }, [c, $, C]), xe = {
+    apiConfig: P,
     assetBaseUrl: n,
     config: L,
-    configLoading: _,
-    configError: $,
+    configLoading: K,
+    configError: X,
     state: c,
     dispatch: O,
     quotes: he,
     quotesLoading: fe,
-    quotesError: V,
+    quotesError: Y,
     fetchQuotes: ye,
     order: ae,
     orderLoading: Ce,
     orderError: se,
     createOrder: we,
-    orderStatus: W,
+    orderStatus: V,
     orderStatusLoading: ne,
     fieldLocks: x || null,
     defaultGateway: re,
-    amountError: G,
+    amountError: $,
     goToStep: q,
     goBack: ie,
     canProceed: Oe
@@ -942,8 +942,8 @@ function Le({
   onClose: a,
   children: n
 }) {
-  const [s, r] = C(!1), [u, m] = C(!1);
-  D(() => {
+  const [s, r] = N(!1), [u, m] = N(!1);
+  U(() => {
     if (t)
       r(!0), requestAnimationFrame(() => requestAnimationFrame(() => m(!0)));
     else if (s) {
@@ -952,7 +952,7 @@ function Le({
       return () => clearTimeout(o);
     }
   }, [t]);
-  const i = X(() => {
+  const i = _(() => {
     m(!1), setTimeout(() => a(), 250);
   }, [a]);
   return s ? /* @__PURE__ */ e(
@@ -1018,7 +1018,7 @@ function zt({
   onSelect: n,
   onClose: s
 }) {
-  const [r, u] = C(""), m = K(() => {
+  const [r, u] = N(""), m = F(() => {
     const i = r.trim().toLowerCase();
     return i ? t.filter(
       (o) => o.id.toLowerCase().includes(i) || o.name.toLowerCase().includes(i) || o.description && o.description.toLowerCase().includes(i)
@@ -1085,7 +1085,7 @@ function ea({
   onSelect: n,
   fiatCurrency: s
 }) {
-  const [r, u] = C(!1), m = K(
+  const [r, u] = N(!1), m = F(
     () => t.filter((o) => o.supportedFiats.includes(s)),
     [t, s]
   ), i = m.find((o) => o.id === a) || m[0];
@@ -1151,8 +1151,8 @@ function ta({
   redirectDelay: s = 3e3
 }) {
   var g;
-  const { order: r, orderStatus: u, goToStep: m, goBack: i } = pe(), [o, d] = C(!1), [h, f] = C(null), x = r != null && r.checkout.expiresAt ? Date.now() > r.checkout.expiresAt : !1;
-  if (D(() => {
+  const { order: r, orderStatus: u, goToStep: m, goBack: i } = pe(), [o, d] = N(!1), [h, f] = N(null), x = r != null && r.checkout.expiresAt ? Date.now() > r.checkout.expiresAt : !1;
+  if (U(() => {
     if ((r == null ? void 0 : r.checkout.method) === "redirect" && n && !x) {
       f(Math.ceil(s / 1e3));
       const p = setTimeout(() => {
@@ -1164,7 +1164,7 @@ function ta({
         clearTimeout(p), clearInterval(b);
       };
     }
-  }, [r, n, s, x]), D(() => {
+  }, [r, n, s, x]), U(() => {
     u && (u.status === "completed" ? m("complete") : ["failed", "cancelled", "expired"].includes(u.status) && m("error"));
   }, [u == null ? void 0 : u.status, m]), !r)
     return /* @__PURE__ */ l(
@@ -1380,7 +1380,7 @@ function aa(t, a) {
 }
 function na({ className: t = "" }) {
   const { orderStatus: a, orderStatusLoading: n, goToStep: s } = pe();
-  D(() => {
+  U(() => {
     a && (a.status === "completed" ? s("complete") : ["failed", "cancelled", "expired", "refunded"].includes(a.status) && s("error"));
   }, [a == null ? void 0 : a.status, s]);
   const r = () => {
@@ -1697,7 +1697,7 @@ function la({ className: t = "" }) {
     fetchQuotes: u,
     createOrder: m,
     orderLoading: i
-  } = pe(), o = s.flowType === "sell", [d, h] = C(null), f = a == null ? void 0 : a.gateways.find((g) => g.id === r), x = async () => {
+  } = pe(), o = s.flowType === "sell", [d, h] = N(null), f = a == null ? void 0 : a.gateways.find((g) => g.id === r), x = async () => {
     h(null);
     try {
       u(), await m();
@@ -1808,14 +1808,14 @@ function ia() {
   ] });
 }
 function da({ onClose: t, onSelect: a, currencies: n, assetBaseUrl: s = "" }) {
-  const [r, u] = C(""), m = K(() => {
+  const [r, u] = N(""), m = F(() => {
     if (!n || n.length === 0) return st;
     const o = new Map(st.map((d) => [d.code, d.name]));
     return n.map((d) => ({
       code: d.code,
       name: d.name || o.get(d.code) || d.code
     }));
-  }, [n]), i = K(() => {
+  }, [n]), i = F(() => {
     const o = r.trim().toLowerCase();
     return o ? m.filter(
       (d) => d.code.toLowerCase().includes(o) || d.name.toLowerCase().includes(o)
@@ -1854,7 +1854,7 @@ function da({ onClose: t, onSelect: a, currencies: n, assetBaseUrl: s = "" }) {
   ] });
 }
 function ua({ onClose: t, onSelect: a, cryptos: n, assetBaseUrl: s = "" }) {
-  const [r, u] = C(""), m = K(() => {
+  const [r, u] = N(""), m = F(() => {
     if (!n || n.length === 0) return _t;
     const o = [];
     for (const d of n) {
@@ -1874,16 +1874,16 @@ function ua({ onClose: t, onSelect: a, cryptos: n, assetBaseUrl: s = "" }) {
         }
     }
     return o;
-  }, [n]), i = K(() => {
+  }, [n]), i = F(() => {
     var f;
     const o = r.trim().toLowerCase();
     if (!o) return m;
     const d = o.split(/\s+/), h = [];
     for (const x of m) {
-      const g = Ie[x.chain], p = g ? g.name.toLowerCase() : "", b = ((f = g == null ? void 0 : g.shortName) == null ? void 0 : f.toLowerCase()) || "", T = x.chain.toLowerCase(), H = x.code.toLowerCase(), w = x.name.toLowerCase(), j = [H, w, p, b, T];
-      if (!d.every((z) => j.some((c) => c.includes(z)))) continue;
-      let Y = 0;
-      H === o ? Y += 100 : H.startsWith(d[0]) && (Y += 50), x.popular && (Y += 10), d.length > 1 && (p.includes(d[1]) || b.includes(d[1]) || T.includes(d[1])) && (Y += 25), h.push({ item: x, score: Y });
+      const g = Ie[x.chain], p = g ? g.name.toLowerCase() : "", b = ((f = g == null ? void 0 : g.shortName) == null ? void 0 : f.toLowerCase()) || "", T = x.chain.toLowerCase(), P = x.code.toLowerCase(), w = x.name.toLowerCase(), G = [P, w, p, b, T];
+      if (!d.every((z) => G.some((c) => c.includes(z)))) continue;
+      let j = 0;
+      P === o ? j += 100 : P.startsWith(d[0]) && (j += 50), x.popular && (j += 10), d.length > 1 && (p.includes(d[1]) || b.includes(d[1]) || T.includes(d[1])) && (j += 25), h.push({ item: x, score: j });
     }
     return h.sort((x, g) => g.score - x.score), h.map((x) => x.item);
   }, [m, r]);
@@ -2064,24 +2064,24 @@ function fa({
     state: p,
     dispatch: b,
     config: T,
-    configLoading: H,
+    configLoading: P,
     quotes: w,
-    quotesLoading: j,
+    quotesLoading: G,
     quotesError: Q,
-    fetchQuotes: Y,
+    fetchQuotes: j,
     createOrder: z,
     orderLoading: c,
     amountError: O,
-    fieldLocks: N,
+    fieldLocks: C,
     apiConfig: L,
-    assetBaseUrl: _
-  } = pe(), [$, G] = C(a === "dark"), [Ne, he] = C(n), [fe, V] = C(null), [ye, ae] = C(!1), [Ce, se] = C(!1), [ce, be] = C(!1), [W, ne] = C(null), [re, Ee] = C(!0), [Ae, we] = C(!1), [q, ie] = C(!1), Oe = F(null), xe = F(), v = F(p.flowType);
-  D(() => {
-    G(a === "dark");
-  }, [a]), D(() => {
-    const y = setTimeout(() => Ee(!1), H ? 0 : 800);
+    assetBaseUrl: K
+  } = pe(), [X, $] = N(a === "dark"), [Ne, he] = N(n), [fe, Y] = N(null), [ye, ae] = N(!1), [Ce, se] = N(!1), [ce, be] = N(!1), [V, ne] = N(null), [re, Ee] = N(!0), [Ae, we] = N(!1), [q, ie] = N(!1), Oe = D(null), xe = D(), v = D(p.flowType);
+  U(() => {
+    $(a === "dark");
+  }, [a]), U(() => {
+    const y = setTimeout(() => Ee(!1), P ? 0 : 800);
     return () => clearTimeout(y);
-  }, [H]), D(() => {
+  }, [P]), U(() => {
     if (v.current !== p.flowType && !re) {
       v.current = p.flowType, we(!0), ae(!1), se(!1);
       const y = setTimeout(() => we(!1), 350);
@@ -2089,20 +2089,20 @@ function fa({
     }
     v.current = p.flowType;
   }, [p.flowType, re]);
-  const E = p.flowType, S = E === "buy", R = p.cryptoCurrency || "BTC", k = p.fiatCurrency || "USD", P = S ? p.fiatAmount : p.cryptoAmount, U = Kt(P), de = (ze = w == null ? void 0 : w.bestQuote) != null && ze.exchangeRate ? parseFloat(w.bestQuote.exchangeRate) : null, Se = F(null);
-  de && R && k && (Se.current = { rate: de, crypto: R, fiat: k });
-  const gt = K(() => {
+  const E = p.flowType, S = E === "buy", k = p.cryptoCurrency || "BTC", R = p.fiatCurrency || "USD", H = S ? p.fiatAmount : p.cryptoAmount, W = Kt(H), de = (ze = w == null ? void 0 : w.bestQuote) != null && ze.exchangeRate ? parseFloat(w.bestQuote.exchangeRate) : null, Se = D(null);
+  de && k && R && (Se.current = { rate: de, crypto: k, fiat: R });
+  const gt = F(() => {
     if (w != null && w.bestQuote) {
       const y = S ? w.bestQuote.cryptoAmount : w.bestQuote.fiatAmount;
       if (y) return y;
     }
     return "0";
-  }, [w, S]), vt = K(() => {
+  }, [w, S]), vt = F(() => {
     var B, ee, Ue;
-    const y = de || ((B = Se.current) == null ? void 0 : B.rate), A = de ? R : (ee = Se.current) == null ? void 0 : ee.crypto, I = de ? k : (Ue = Se.current) == null ? void 0 : Ue.fiat;
+    const y = de || ((B = Se.current) == null ? void 0 : B.rate), A = de ? k : (ee = Se.current) == null ? void 0 : ee.crypto, I = de ? R : (Ue = Se.current) == null ? void 0 : Ue.fiat;
     return !y || !A || !I ? "" : `1 ${A} ≈ ${y.toFixed(2)} ${I}`;
-  }, [R, k, de]);
-  D(() => {
+  }, [k, R, de]);
+  U(() => {
     const y = p.walletAddress.trim(), A = p.network;
     if (!y || y.length < 10) {
       ne(null), b({ type: "SET_WALLET_ERROR", message: "" });
@@ -2130,33 +2130,33 @@ function fa({
       }
     }, 500), () => clearTimeout(xe.current);
   }, [p.walletAddress, p.network, L.apiUrl]);
-  const Ge = !P || U === 0, je = U > 0 && (S ? U < dt : U < ut), Ye = !!O || je || ye && Ge, Nt = U > 0 && !O && !je, Pe = p.walletAddress.trim().length >= 10 && W !== !1 && !ce, Te = Nt && (S ? Pe : !0) && !!p.cryptoCurrency && !!p.network, Ct = (y) => {
+  const Ge = !H || W === 0, je = W > 0 && (S ? W < dt : W < ut), Ye = !!O || je || ye && Ge, Nt = W > 0 && !O && !je, Pe = p.walletAddress.trim().length >= 10 && V !== !1 && !ce, Te = Nt && Pe && !!p.cryptoCurrency && !!p.network, Ct = (y) => {
     let A = y.target.value.replace(/[^0-9.,]/g, "");
     const I = S ? 2 : 6, B = A.indexOf(".");
     B !== -1 && A.length - B - 1 > I && (A = A.slice(0, B + I + 1)), b(S ? { type: "SET_FIAT_AMOUNT", amount: A } : { type: "SET_CRYPTO_AMOUNT", amount: A });
   }, Ve = (y) => {
     y !== E && b({ type: "SET_FLOW_TYPE", flowType: y });
-  }, bt = X(
+  }, bt = _(
     (y) => {
       b({ type: "SET_FIAT_CURRENCY", currency: y });
     },
     [b]
-  ), Et = X(
+  ), Et = _(
     (y, A) => {
       b({ type: "SET_CRYPTO_CURRENCY", currency: y }), b({ type: "SET_CRYPTO_CHAIN", chain: A });
     },
     [b]
-  ), At = X(
+  ), At = _(
     (y) => {
       b({ type: "SET_PAYMENT_METHOD", methodId: y });
     },
     [b]
   ), wt = () => {
-    Te && (ie(!0), Y());
+    Te && (ie(!0), j());
   };
-  D(() => {
+  U(() => {
     var y;
-    if (!(!q || j)) {
+    if (!(!q || G)) {
       if (w != null && w.bestQuote)
         ie(!1), b({ type: "SELECT_QUOTE", quote: w.bestQuote }), z().catch(() => {
         });
@@ -2168,11 +2168,11 @@ function fa({
         b({ type: "SET_ERROR", message: I });
       }
     }
-  }, [q, w, j, Q, b, z]);
-  const We = $ ? "theme-dark" : "theme-light", He = ct.find((y) => y.id === Ne) || ct[0], St = He.accent === null, Qe = (s ? Ke(s) : !1) ? { "--t-accent": s, "--t-cta-bg": s, "--t-cta-text": "#ffffff" } : St ? {
-    "--t-accent": $ ? "#ffffff" : "#111111",
-    "--t-cta-bg": $ ? "#ffffff" : "#111111",
-    "--t-cta-text": $ ? "#000000" : "#ffffff"
+  }, [q, w, G, Q, b, z]);
+  const We = X ? "theme-dark" : "theme-light", He = ct.find((y) => y.id === Ne) || ct[0], St = He.accent === null, Qe = (s ? Ke(s) : !1) ? { "--t-accent": s, "--t-cta-bg": s, "--t-cta-text": "#ffffff" } : St ? {
+    "--t-accent": X ? "#ffffff" : "#111111",
+    "--t-cta-bg": X ? "#ffffff" : "#111111",
+    "--t-cta-text": X ? "#000000" : "#ffffff"
   } : {
     "--t-accent": He.accent,
     "--t-cta-bg": He.accent,
@@ -2208,7 +2208,7 @@ function fa({
         ...Re
       },
       children: [
-        /* @__PURE__ */ e("div", { className: `flex justify-end items-center px-5 pt-3 ${o ? "pb-1" : "pb-5"}`, children: /* @__PURE__ */ e(Qt, { onClick: () => V("settings") }) }),
+        /* @__PURE__ */ e("div", { className: `flex justify-end items-center px-5 pt-3 ${o ? "pb-1" : "pb-5"}`, children: /* @__PURE__ */ e(Qt, { onClick: () => Y("settings") }) }),
         o ? /* @__PURE__ */ l("div", { className: "flex flex-col items-center pt-3 pb-5", children: [
           /* @__PURE__ */ l("div", { className: "flex", style: { width: 165 }, children: [
             /* @__PURE__ */ e(
@@ -2245,7 +2245,7 @@ function fa({
             )
           ] })
         ] }) : null,
-        re || Ae || H ? /* @__PURE__ */ e(ia, {}) : /* @__PURE__ */ l("div", { className: "flex-1 overflow-hidden px-5 flex flex-col tab-fade-in", children: [
+        re || Ae || P ? /* @__PURE__ */ e(ia, {}) : /* @__PURE__ */ l("div", { className: "flex-1 overflow-hidden px-5 flex flex-col tab-fade-in", children: [
           /* @__PURE__ */ l(
             "div",
             {
@@ -2263,20 +2263,20 @@ function fa({
                     {
                       ref: Oe,
                       type: "text",
-                      value: P,
+                      value: H,
                       onChange: Ct,
                       onBlur: () => ae(!0),
                       placeholder: S ? "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" },
                       inputMode: "decimal",
-                      disabled: !!((qe = N == null ? void 0 : N.sourceAmount) != null && qe.locked)
+                      disabled: !!((qe = C == null ? void 0 : C.sourceAmount) != null && qe.locked)
                     }
                   ),
                   S ? /* @__PURE__ */ l(
                     "button",
                     {
-                      onClick: () => V("fiat"),
+                      onClick: () => Y("fiat"),
                       className: "flex items-center gap-1.5 shrink-0 transition-colors",
                       style: {
                         background: "var(--t-pill-bg)",
@@ -2285,10 +2285,10 @@ function fa({
                         paddingLeft: 10,
                         paddingRight: 10
                       },
-                      disabled: !!((et = N == null ? void 0 : N.sourceCurrency) != null && et.locked),
+                      disabled: !!((et = C == null ? void 0 : C.sourceCurrency) != null && et.locked),
                       children: [
-                        /* @__PURE__ */ e(Xe, { currencyCode: k, size: 16, baseUrl: _ }),
-                        /* @__PURE__ */ e("span", { className: "text-[13px] font-medium", style: { color: "var(--t-text)" }, children: k }),
+                        /* @__PURE__ */ e(Xe, { currencyCode: R, size: 16, baseUrl: K }),
+                        /* @__PURE__ */ e("span", { className: "text-[13px] font-medium", style: { color: "var(--t-text)" }, children: R }),
                         /* @__PURE__ */ e(ge, {})
                       ]
                     }
@@ -2296,7 +2296,7 @@ function fa({
                     /* @__PURE__ */ l(
                       "button",
                       {
-                        onClick: () => V("crypto"),
+                        onClick: () => Y("crypto"),
                         className: "flex items-center gap-1.5 transition-colors",
                         style: {
                           background: "var(--t-pill-bg)",
@@ -2305,10 +2305,10 @@ function fa({
                           paddingLeft: 10,
                           paddingRight: 10
                         },
-                        disabled: !!((tt = N == null ? void 0 : N.destinationCurrency) != null && tt.locked),
+                        disabled: !!((tt = C == null ? void 0 : C.destinationCurrency) != null && tt.locked),
                         children: [
-                          /* @__PURE__ */ e(mt, { ticker: R, size: 16, baseUrl: _ }),
-                          /* @__PURE__ */ e("span", { className: "text-[13px] font-medium", style: { color: "var(--t-text)" }, children: R }),
+                          /* @__PURE__ */ e(mt, { ticker: k, size: 16, baseUrl: K }),
+                          /* @__PURE__ */ e("span", { className: "text-[13px] font-medium", style: { color: "var(--t-text)" }, children: k }),
                           /* @__PURE__ */ e(ge, {})
                         ]
                       }
@@ -2317,7 +2317,7 @@ function fa({
                       /* @__PURE__ */ e(
                         "img",
                         {
-                          src: _e(Z, _),
+                          src: _e(Z, K),
                           alt: Z,
                           width: 14,
                           height: 14,
@@ -2332,7 +2332,7 @@ function fa({
               ]
             }
           ),
-          ye && Ye && /* @__PURE__ */ e("div", { className: "text-[12px] mt-1.5 px-[2px]", style: { color: "#EF4444" }, children: O || (Ge ? "Amount should be more than 0" : S ? `Minimum amount is ${dt} ${k}` : `Minimum amount is ${ut} ${R}`) }),
+          ye && Ye && /* @__PURE__ */ e("div", { className: "text-[12px] mt-1.5 px-[2px]", style: { color: "#EF4444" }, children: O || (Ge ? "Amount should be more than 0" : S ? `Minimum amount is ${dt} ${R}` : `Minimum amount is ${ut} ${k}`) }),
           /* @__PURE__ */ l(
             "div",
             {
@@ -2348,20 +2348,20 @@ function fa({
               children: [
                 /* @__PURE__ */ e("div", { className: "text-[13px] mb-2.5", style: { color: "var(--t-text-secondary)" }, children: "You get" }),
                 /* @__PURE__ */ l("div", { className: "flex items-start justify-between", children: [
-                  j ? /* @__PURE__ */ e(M, { w: 180, h: 32 }) : /* @__PURE__ */ e(
+                  G ? /* @__PURE__ */ e(M, { w: 180, h: 32 }) : /* @__PURE__ */ e(
                     ca,
                     {
-                      value: U > 0 ? gt : "0",
+                      value: W > 0 ? gt : "0",
                       height: 32,
                       className: "font-semibold",
-                      style: { color: U > 0 ? "var(--t-text)" : "var(--t-text-muted)", fontSize: 24 }
+                      style: { color: W > 0 ? "var(--t-text)" : "var(--t-text-muted)", fontSize: 24 }
                     }
                   ),
                   S ? /* @__PURE__ */ l("div", { className: "flex flex-col items-end shrink-0", children: [
                     /* @__PURE__ */ l(
                       "button",
                       {
-                        onClick: () => V("crypto"),
+                        onClick: () => Y("crypto"),
                         className: "flex items-center gap-1.5 transition-colors",
                         style: {
                           background: "var(--t-pill-bg)",
@@ -2370,10 +2370,10 @@ function fa({
                           paddingLeft: 10,
                           paddingRight: 10
                         },
-                        disabled: !!((at = N == null ? void 0 : N.destinationCurrency) != null && at.locked),
+                        disabled: !!((at = C == null ? void 0 : C.destinationCurrency) != null && at.locked),
                         children: [
-                          /* @__PURE__ */ e(mt, { ticker: R, size: 16, baseUrl: _ }),
-                          /* @__PURE__ */ e("span", { className: "text-[13px] font-medium", style: { color: "var(--t-text)" }, children: R }),
+                          /* @__PURE__ */ e(mt, { ticker: k, size: 16, baseUrl: K }),
+                          /* @__PURE__ */ e("span", { className: "text-[13px] font-medium", style: { color: "var(--t-text)" }, children: k }),
                           /* @__PURE__ */ e(ge, {})
                         ]
                       }
@@ -2382,7 +2382,7 @@ function fa({
                       /* @__PURE__ */ e(
                         "img",
                         {
-                          src: _e(Z, _),
+                          src: _e(Z, K),
                           alt: Z,
                           width: 14,
                           height: 14,
@@ -2395,7 +2395,7 @@ function fa({
                   ] }) : /* @__PURE__ */ l(
                     "button",
                     {
-                      onClick: () => V("fiat"),
+                      onClick: () => Y("fiat"),
                       className: "flex items-center gap-1.5 shrink-0 transition-colors",
                       style: {
                         background: "var(--t-pill-bg)",
@@ -2404,10 +2404,10 @@ function fa({
                         paddingLeft: 10,
                         paddingRight: 10
                       },
-                      disabled: !!((nt = N == null ? void 0 : N.sourceCurrency) != null && nt.locked),
+                      disabled: !!((nt = C == null ? void 0 : C.sourceCurrency) != null && nt.locked),
                       children: [
-                        /* @__PURE__ */ e(Xe, { currencyCode: k, size: 16, baseUrl: _ }),
-                        /* @__PURE__ */ e("span", { className: "text-[13px] font-medium", style: { color: "var(--t-text)" }, children: k }),
+                        /* @__PURE__ */ e(Xe, { currencyCode: R, size: 16, baseUrl: K }),
+                        /* @__PURE__ */ e("span", { className: "text-[13px] font-medium", style: { color: "var(--t-text)" }, children: R }),
                         /* @__PURE__ */ e(ge, {})
                       ]
                     }
@@ -2436,8 +2436,8 @@ function fa({
               fiatCurrency: p.fiatCurrency
             }
           ) }),
-          S && /* @__PURE__ */ l("div", { className: "mt-8", children: [
-            /* @__PURE__ */ e("div", { className: "text-[13px] mb-2.5", style: { color: "var(--t-text-secondary)" }, children: "Wallet address" }),
+          /* @__PURE__ */ l("div", { className: "mt-8", children: [
+            /* @__PURE__ */ e("div", { className: "text-[13px] mb-2.5", style: { color: "var(--t-text-secondary)" }, children: S ? "Receiving wallet address" : "Sending wallet address" }),
             /* @__PURE__ */ e(
               "input",
               {
@@ -2445,7 +2445,7 @@ function fa({
                 value: p.walletAddress,
                 onChange: (y) => b({ type: "SET_WALLET_ADDRESS", address: y.target.value }),
                 onBlur: () => se(!0),
-                placeholder: "Enter your wallet address",
+                placeholder: S ? "Enter your receiving address" : "Enter your sending address",
                 spellCheck: !1,
                 autoComplete: "off",
                 className: "w-full bg-transparent text-[13px] outline-none transition-colors",
@@ -2457,7 +2457,7 @@ function fa({
                   paddingRight: 14,
                   color: "var(--t-text)"
                 },
-                disabled: !!((ot = N == null ? void 0 : N.destinationAddress) != null && ot.locked)
+                disabled: !!((ot = C == null ? void 0 : C.destinationAddress) != null && ot.locked)
               }
             ),
             p.walletError ? /* @__PURE__ */ e("div", { className: "text-[12px] mt-1.5", style: { color: "#EF4444" }, children: p.walletError }) : Ce && !Pe && !ce ? /* @__PURE__ */ e("div", { className: "text-[12px] mt-1.5", style: { color: "#EF4444" }, children: "Enter a valid wallet address" }) : ce && p.walletAddress.trim().length >= 10 ? /* @__PURE__ */ e("div", { className: "text-[12px] mt-1.5", style: { color: "var(--t-text-muted)" }, children: "Validating address..." }) : null
@@ -2477,12 +2477,12 @@ function fa({
                 opacity: Te && !c && !q ? 1 : 0.4,
                 cursor: Te && !c && !q ? "pointer" : "not-allowed"
               },
-              children: q ? "Getting best price..." : c ? "Processing..." : S ? `Buy ${R}` : `Sell ${R}`
+              children: q ? "Getting best price..." : c ? "Processing..." : S ? `Buy ${k}` : `Sell ${k}`
             }
           ),
           /* @__PURE__ */ e("div", { className: "text-center py-3", children: /* @__PURE__ */ e("span", { className: "text-[11px]", style: { color: "var(--t-text-tertiary)" }, children: "Powered by NowRamp" }) })
         ] }, E),
-        /* @__PURE__ */ e(Le, { isOpen: fe === "fiat", onClose: () => V(null), children: (y) => {
+        /* @__PURE__ */ e(Le, { isOpen: fe === "fiat", onClose: () => Y(null), children: (y) => {
           var A;
           return /* @__PURE__ */ e(
             da,
@@ -2492,11 +2492,11 @@ function fa({
                 bt(I), y();
               },
               currencies: (A = T == null ? void 0 : T.fiats) == null ? void 0 : A.map((I) => ({ code: I.code, name: I.code })),
-              assetBaseUrl: _
+              assetBaseUrl: K
             }
           );
         } }),
-        /* @__PURE__ */ e(Le, { isOpen: fe === "crypto", onClose: () => V(null), children: (y) => {
+        /* @__PURE__ */ e(Le, { isOpen: fe === "crypto", onClose: () => Y(null), children: (y) => {
           var A;
           return /* @__PURE__ */ e(
             ua,
@@ -2513,16 +2513,16 @@ function fa({
                   networks: (B = I.networks) == null ? void 0 : B.map((ee) => ({ code: ee.id, name: ee.name }))
                 };
               }),
-              assetBaseUrl: _
+              assetBaseUrl: K
             }
           );
         } }),
-        /* @__PURE__ */ e(Le, { isOpen: fe === "settings", onClose: () => V(null), children: (y) => /* @__PURE__ */ e(
+        /* @__PURE__ */ e(Le, { isOpen: fe === "settings", onClose: () => Y(null), children: (y) => /* @__PURE__ */ e(
           ha,
           {
             onClose: y,
-            darkMode: $,
-            onToggleDarkMode: G,
+            darkMode: X,
+            onToggleDarkMode: $,
             skinId: Ne,
             onSelectSkin: (A) => {
               he(A);
@@ -2551,19 +2551,19 @@ function ya({
   onComplete: p,
   onError: b,
   className: T,
-  theme: H,
+  theme: P,
   skinId: w,
-  accentColor: j,
+  accentColor: G,
   bgColor: Q,
-  bgImage: Y,
+  bgImage: j,
   borderColor: z,
   borderRadius: c,
   showFlowToggle: O,
-  autoRedirect: N,
+  autoRedirect: C,
   explorerUrl: L,
-  doneButtonText: _,
-  supportEmail: $,
-  onDone: G
+  doneButtonText: K,
+  supportEmail: X,
+  onDone: $
 }) {
   return /* @__PURE__ */ e(
     Ht,
@@ -2588,19 +2588,19 @@ function ya({
         fa,
         {
           className: T,
-          theme: H,
+          theme: P,
           skinId: w,
-          accentColor: j,
+          accentColor: G,
           bgColor: Q,
-          bgImage: Y,
+          bgImage: j,
           borderColor: z,
           borderRadius: c,
           showFlowToggle: O,
-          autoRedirect: N,
+          autoRedirect: C,
           explorerUrl: L,
-          doneButtonText: _,
-          supportEmail: $,
-          onDone: G
+          doneButtonText: K,
+          supportEmail: X,
+          onDone: $
         }
       )
     }
@@ -2699,7 +2699,7 @@ function ka({
   quotesLoading: s,
   cryptoCurrency: r
 }) {
-  const [u, m] = C(""), i = K(() => {
+  const [u, m] = N(""), i = F(() => {
     if (!(n != null && n.quotes)) return [];
     const o = u.trim().toLowerCase();
     return o ? n.quotes.filter((d) => d.gatewayName.toLowerCase().includes(o)) : n.quotes;