@nowramp/form 0.1.31 → 0.1.33

package/dist/index.js

@@ -12,93 +12,93 @@ import { jsx as e, jsxs as o, Fragment as le } from "react/jsx-runtime";
 import Ue, { useState as C, useRef as U, useCallback as $, useEffect as H, useMemo as X, useReducer as St, useContext as wt, createContext as Tt } from "react";
 import { RampApi as ke } from "@nowramp/sdk";
 function Rt(t, a) {
-  const [n, l] = C(null), [r, i] = C(!0), [m, d] = C(null), c = U(null);
+  const [n, l] = C(null), [r, d] = C(!0), [u, m] = C(null), c = U(null);
   (!c.current || c.current !== t) && (c.current = new ke({ apiKey: "", ...t }));
-  const u = $(async () => {
+  const i = $(async () => {
     if (!t.projectId) {
-      d(new Error("projectId is required")), i(!1);
+      m(new Error("projectId is required")), d(!1);
       return;
     }
-    i(!0), d(null);
+    d(!0), m(null);
     try {
       const p = await c.current.getSupported(a);
       l(p);
     } catch (p) {
-      d(p instanceof Error ? p : new Error("Failed to fetch config"));
+      m(p instanceof Error ? p : new Error("Failed to fetch config"));
     } finally {
-      i(!1);
+      d(!1);
     }
   }, [t.projectId, a]);
   return H(() => {
-    u();
-  }, [u]), { config: n, loading: r, error: m, refetch: u };
+    i();
+  }, [i]), { config: n, loading: r, error: u, refetch: i };
 }
 function kt(t, a) {
-  const [n, l] = C(null), [r, i] = C(!1), [m, d] = C(null), c = U(null), u = U(""), p = `${t.apiUrl}|${t.projectId}`;
-  (!c.current || u.current !== p) && (c.current = new ke({ apiKey: "", ...t }), u.current = p);
+  const [n, l] = C(null), [r, d] = C(!1), [u, m] = C(null), c = U(null), i = U(""), p = `${t.apiUrl}|${t.projectId}`;
+  (!c.current || i.current !== p) && (c.current = new ke({ apiKey: "", ...t }), i.current = p);
   const f = U(0);
   H(() => {
     const g = ++f.current;
     if (!a || !t.projectId) {
-      l(null), i(!1);
+      l(null), d(!1);
       return;
     }
-    i(!0), d(null), c.current.getQuotes(a).then(
+    d(!0), m(null), c.current.getQuotes(a).then(
       (h) => {
-        f.current === g && (l(h), i(!1));
+        f.current === g && (l(h), d(!1));
       },
       (h) => {
-        f.current === g && (d(h instanceof Error ? h : new Error("Failed to fetch quotes")), l(null), i(!1));
+        f.current === g && (m(h instanceof Error ? h : new Error("Failed to fetch quotes")), l(null), d(!1));
       }
     );
   }, [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 = $(async () => {
     if (!(!a || !t.projectId)) {
-      i(!0), d(null);
+      d(!0), m(null);
       try {
         const g = await c.current.getQuotes(a);
         l(g);
       } catch (g) {
-        d(g instanceof Error ? g : new Error("Failed to fetch quotes"));
+        m(g instanceof Error ? g : new Error("Failed to fetch quotes"));
       } finally {
-        i(!1);
+        d(!1);
       }
     }
   }, [t.projectId, a]);
-  return { quotes: n, loading: r, error: m, refetch: x };
+  return { quotes: n, loading: r, error: u, refetch: x };
 }
 function Lt(t) {
-  const [a, n] = C(null), [l, r] = C(!1), [i, m] = C(null), d = U(null), c = U(""), u = `${t.apiUrl}|${t.projectId}`;
-  (!d.current || c.current !== u) && (d.current = new ke({ apiKey: "", ...t }), c.current = u);
+  const [a, n] = C(null), [l, r] = C(!1), [d, u] = C(null), m = U(null), c = U(""), i = `${t.apiUrl}|${t.projectId}`;
+  (!m.current || c.current !== i) && (m.current = new ke({ apiKey: "", ...t }), c.current = i);
   const p = $(async (x) => {
-    r(!0), m(null);
+    r(!0), u(null);
     try {
-      const g = await d.current.createCheckoutIntent(x);
+      const g = await m.current.createCheckoutIntent(x);
       return n(g), g;
     } catch (g) {
       const h = g instanceof Error ? g : new Error("Failed to create checkout intent");
-      throw m(h), h;
+      throw u(h), h;
     } finally {
       r(!1);
     }
   }, []), f = $(() => {
-    n(null), m(null);
+    n(null), u(null);
   }, []);
-  return { order: a, loading: l, error: i, createOrder: p, reset: f };
+  return { order: a, loading: l, error: d, createOrder: p, reset: f };
 }
 function It(t, a, n) {
-  const [l, r] = C(null), [i, m] = C(!1), [d, c] = C(null), u = U(null);
-  u.current || (u.current = new ke({ apiKey: "", projectId: "", ...t }));
+  const [l, r] = C(null), [d, u] = C(!1), [m, c] = C(null), i = U(null);
+  i.current || (i.current = new ke({ apiKey: "", projectId: "", ...t }));
   const p = $(async () => {
     if (a) {
-      m(!0), c(null);
+      u(!0), c(null);
       try {
-        const f = await u.current.getTransaction(a);
+        const f = await i.current.getTransaction(a);
         r(f);
       } catch (f) {
         c(f instanceof Error ? f : new Error("Failed to fetch status"));
       } finally {
-        m(!1);
+        u(!1);
       }
     }
   }, [a]);
@@ -115,7 +115,7 @@ function It(t, a, n) {
       return;
     const x = setInterval(p, n.pollInterval);
     return () => clearInterval(x);
-  }, [a, n == null ? void 0 : n.pollInterval, l == null ? void 0 : l.status, p]), { status: l, loading: i, error: d, refetch: p };
+  }, [a, n == null ? void 0 : n.pollInterval, l == null ? void 0 : l.status, p]), { status: l, loading: d, error: m, refetch: p };
 }
 function rt(t, a) {
   if (!t) return t;
@@ -203,11 +203,11 @@ function Mt({
   assetBaseUrl: n = "",
   flowType: l = "buy",
   customerId: r = "",
-  defaultFiatCurrency: i = "USD",
-  defaultCryptoCurrency: m = "BTC",
-  defaultNetwork: d = "",
+  defaultFiatCurrency: d = "USD",
+  defaultCryptoCurrency: u = "BTC",
+  defaultNetwork: m = "",
   defaultFiatAmount: c = "",
-  defaultCryptoAmount: u = "",
+  defaultCryptoAmount: i = "",
   defaultWalletAddress: p = "",
   defaultGateway: f,
   fieldLocks: x,
@@ -216,15 +216,15 @@ function Mt({
   onError: b,
   children: L
 }) {
-  const O = X(() => ({ apiUrl: a, projectId: t }), [a, t]), A = d || (m ? m.toLowerCase() : ""), G = l === "sell", j = G ? !!u : !!c, Z = (G ? !!(j && m && A) : !!(j && m && A && p)) && f ? "confirm" : "amount", [s, P] = St(Bt, {
+  const O = X(() => ({ apiUrl: a, projectId: t }), [a, t]), A = m || (u ? u.toLowerCase() : ""), G = l === "sell", j = G ? !!i : !!c, Z = (G ? !!(j && u && A) : !!(j && u && A && p)) && f ? "confirm" : "amount", [s, P] = St(Bt, {
     ...mt,
     step: Z,
     flowType: l,
-    fiatCurrency: i,
-    cryptoCurrency: m,
+    fiatCurrency: d,
+    cryptoCurrency: u,
     network: A,
     fiatAmount: rt(c, 2),
-    cryptoAmount: rt(u, 6),
+    cryptoAmount: rt(i, 6),
     walletAddress: p,
     customerId: r
   }), v = s.flowType === "sell", {
@@ -374,7 +374,7 @@ function Ot({
   redirectDelay: l = 3e3
 }) {
   var g;
-  const { order: r, orderStatus: i, goToStep: m, goBack: d } = he(), [c, u] = C(!1), [p, f] = C(null), x = r != null && r.checkout.expiresAt ? Date.now() > r.checkout.expiresAt : !1;
+  const { order: r, orderStatus: d, goToStep: u, goBack: m } = he(), [c, i] = C(!1), [p, f] = C(null), x = r != null && r.checkout.expiresAt ? Date.now() > r.checkout.expiresAt : !1;
   if (H(() => {
     if ((r == null ? void 0 : r.checkout.method) === "redirect" && n && !x) {
       f(Math.ceil(l / 1e3));
@@ -388,8 +388,8 @@ function Ot({
       };
     }
   }, [r, n, l, x]), H(() => {
-    i && (i.status === "completed" ? m("complete") : ["failed", "cancelled", "expired"].includes(i.status) && m("error"));
-  }, [i == null ? void 0 : i.status, m]), !r)
+    d && (d.status === "completed" ? u("complete") : ["failed", "cancelled", "expired"].includes(d.status) && u("error"));
+  }, [d == null ? void 0 : d.status, u]), !r)
     return /* @__PURE__ */ o("div", { className: `flex flex-col items-center justify-center p-8 ${t}`, style: { color: "var(--t-text)" }, children: [
       /* @__PURE__ */ e("p", { className: "text-[15px] mb-4", children: "No order found" }),
       /* @__PURE__ */ e(
@@ -397,7 +397,7 @@ function Ot({
         {
           className: "font-semibold text-[14px] transition-all",
           style: { height: 48, borderRadius: 5, background: "var(--t-surface)", color: "var(--t-text)", paddingLeft: 24, paddingRight: 24 },
-          onClick: d,
+          onClick: m,
           children: "Go Back"
         }
       )
@@ -412,7 +412,7 @@ function Ot({
         {
           className: "w-full font-semibold text-[16px] transition-all",
           style: { height: 60, borderRadius: 5, background: "var(--t-cta-bg)", color: "var(--t-cta-text)" },
-          onClick: d,
+          onClick: m,
           children: "Start Over"
         }
       )
@@ -434,7 +434,7 @@ function Ot({
             border: "none"
           },
           allow: ((g = r.checkout.allowedFeatures) == null ? void 0 : g.join("; ")) || "payment; camera; microphone; geolocation; clipboard-read; clipboard-write; accelerometer; gyroscope; magnetometer; fullscreen; autoplay; encrypted-media; web-share",
-          onLoad: () => u(!0),
+          onLoad: () => i(!0),
           title: "Provider Checkout"
         }
       )
@@ -472,7 +472,7 @@ function Ot({
         {
           className: "w-full font-semibold text-[14px] mt-2 transition-all",
           style: { height: 48, borderRadius: 5, background: "var(--t-surface)", color: "var(--t-text)" },
-          onClick: d,
+          onClick: m,
           children: "Cancel"
         }
       )
@@ -495,7 +495,7 @@ function Ot({
             border: "none"
           },
           allow: "payment; camera; microphone; geolocation; clipboard-read; clipboard-write; accelerometer; gyroscope; magnetometer; fullscreen; autoplay; encrypted-media; web-share",
-          onLoad: () => u(!0),
+          onLoad: () => i(!0),
           title: "Payment Checkout"
         }
       )
@@ -508,7 +508,7 @@ function Ot({
       {
         className: "font-semibold text-[14px] transition-all",
         style: { height: 48, borderRadius: 5, background: "var(--t-surface)", color: "var(--t-text)", paddingLeft: 24, paddingRight: 24 },
-        onClick: d,
+        onClick: m,
         children: "Go Back"
       }
     )
@@ -599,7 +599,7 @@ function Ut({
   onDone: n,
   doneButtonText: l = "Done"
 }) {
-  const { orderStatus: r, state: i, dispatch: m } = he(), d = i.flowType === "sell", c = () => {
+  const { orderStatus: r, state: d, dispatch: u } = he(), m = d.flowType === "sell", c = () => {
     if (!(r != null && r.transactionHash)) return null;
     if (!a) {
       const f = {
@@ -613,11 +613,11 @@ function Ut({
         avalanche: "https://snowtrace.io/tx/{txHash}",
         fantom: "https://ftmscan.com/tx/{txHash}"
       };
-      return (f[i.network] || f.ethereum).replace("{txHash}", r.transactionHash);
+      return (f[d.network] || f.ethereum).replace("{txHash}", r.transactionHash);
     }
     return a.replace("{txHash}", r.transactionHash);
-  }, u = () => {
-    n ? n() : m({ type: "RESET" });
+  }, i = () => {
+    n ? n() : u({ type: "RESET" });
   }, p = c();
   return /* @__PURE__ */ o("div", { className: `flex flex-col items-center px-8 py-12 text-center ${t}`, children: [
     /* @__PURE__ */ e(
@@ -628,13 +628,13 @@ function Ut({
         children: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", width: "32", height: "32", fill: "white", children: /* @__PURE__ */ e("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" }) })
       }
     ),
-    /* @__PURE__ */ e("h2", { className: "text-[20px] font-semibold mb-2", style: { color: "var(--t-text)" }, children: d ? "Sale Complete!" : "Purchase Complete!" }),
-    /* @__PURE__ */ e("p", { className: "text-[14px] mb-6", style: { color: "var(--t-text-secondary)" }, children: d ? `Your ${(r == null ? void 0 : r.fiatCurrency) || i.fiatCurrency} payout is being processed.` : `Your ${(r == null ? void 0 : r.cryptoCurrency) || i.cryptoCurrency} has been sent to your wallet.` }),
+    /* @__PURE__ */ e("h2", { className: "text-[20px] font-semibold mb-2", style: { color: "var(--t-text)" }, children: m ? "Sale Complete!" : "Purchase Complete!" }),
+    /* @__PURE__ */ e("p", { className: "text-[14px] mb-6", style: { color: "var(--t-text-secondary)" }, children: m ? `Your ${(r == null ? void 0 : r.fiatCurrency) || d.fiatCurrency} payout is being processed.` : `Your ${(r == null ? void 0 : r.cryptoCurrency) || d.cryptoCurrency} has been sent to your wallet.` }),
     r && /* @__PURE__ */ o("div", { className: "w-full text-left mb-6", style: { background: "var(--t-surface)", borderRadius: 5, padding: 16 }, children: [
       /* @__PURE__ */ e(
         q,
         {
-          label: d ? "Amount Sold" : "Amount Received",
+          label: m ? "Amount Sold" : "Amount Received",
           value: `${r.cryptoAmount} ${r.cryptoCurrency}`,
           highlight: !0
         }
@@ -642,7 +642,7 @@ function Ut({
       /* @__PURE__ */ e(
         q,
         {
-          label: d ? "Payout Amount" : "Amount Paid",
+          label: m ? "Payout Amount" : "Amount Paid",
           value: `${r.fiatAmount} ${r.fiatCurrency}`
         }
       ),
@@ -690,7 +690,7 @@ function Ut({
         {
           className: "w-full font-semibold text-[16px] transition-all",
           style: { height: 60, borderRadius: 5, background: "var(--t-cta-bg)", color: "var(--t-cta-text)" },
-          onClick: u,
+          onClick: i,
           children: l
         }
       )
@@ -722,7 +722,7 @@ function Dt({
   onRetry: a,
   supportEmail: n = "support@nowramp.com"
 }) {
-  const { state: l, orderStatus: r, dispatch: i, goToStep: m } = he(), d = l.flowType === "sell", c = () => {
+  const { state: l, orderStatus: r, dispatch: d, goToStep: u } = he(), m = l.flowType === "sell", c = () => {
     if (r)
       switch (r.status) {
         case "failed":
@@ -737,26 +737,26 @@ function Dt({
           return "Something Went Wrong";
       }
     return "Something Went Wrong";
-  }, u = () => {
+  }, i = () => {
     if (l.errorMessage) return l.errorMessage;
     if (r)
       switch (r.status) {
         case "failed":
-          return d ? "Your sale could not be processed. Please try again." : "Your payment could not be processed. Please try again or use a different payment method.";
+          return m ? "Your sale could not be processed. Please try again." : "Your payment could not be processed. Please try again or use a different payment method.";
         case "cancelled":
-          return d ? "Your sale was cancelled. No crypto was transferred." : "Your order was cancelled. No payment was processed.";
+          return m ? "Your sale was cancelled. No crypto was transferred." : "Your order was cancelled. No payment was processed.";
         case "expired":
-          return d ? "Your order has expired. Please start a new sale." : "Your order has expired. Please start a new purchase.";
+          return m ? "Your order has expired. Please start a new sale." : "Your order has expired. Please start a new purchase.";
         case "refunded":
-          return d ? "Your crypto has been returned. The funds should appear in your wallet shortly." : "Your payment has been refunded. The funds should appear in your account within 5-10 business days.";
+          return m ? "Your crypto has been returned. The funds should appear in your wallet shortly." : "Your payment has been refunded. The funds should appear in your account within 5-10 business days.";
         default:
           return "An unexpected error occurred. Please try again.";
       }
     return "An unexpected error occurred. Please try again.";
   }, p = () => {
-    i({ type: "CLEAR_ERROR" }), a ? a() : (i({ type: "RESET" }), m("amount"));
+    d({ type: "CLEAR_ERROR" }), a ? a() : (d({ type: "RESET" }), u("amount"));
   }, f = () => {
-    i({ type: "RESET" }), m("amount");
+    d({ type: "RESET" }), u("amount");
   };
   return /* @__PURE__ */ o("div", { className: `flex flex-col items-center px-8 py-12 text-center ${t}`, children: [
     /* @__PURE__ */ e(
@@ -768,7 +768,7 @@ function Dt({
       }
     ),
     /* @__PURE__ */ e("h2", { className: "text-[20px] font-semibold mb-2", style: { color: "var(--t-text)" }, children: c() }),
-    /* @__PURE__ */ e("p", { className: "text-[14px] mb-6", style: { color: "var(--t-text-secondary)" }, children: u() }),
+    /* @__PURE__ */ e("p", { className: "text-[14px] mb-6", style: { color: "var(--t-text-secondary)" }, children: i() }),
     r && /* @__PURE__ */ o("div", { className: "w-full text-left mb-6", style: { background: "var(--t-surface)", borderRadius: 5, padding: 16 }, children: [
       /* @__PURE__ */ o("div", { className: "flex justify-between items-center py-2", style: { borderBottom: "1px solid var(--t-divider)" }, children: [
         /* @__PURE__ */ e("span", { className: "text-[13px]", style: { color: "var(--t-text-secondary)" }, children: "Order ID" }),
@@ -836,13 +836,13 @@ function Ft({ className: t = "" }) {
     configLoading: n,
     state: l,
     defaultGateway: r,
-    fetchQuotes: i,
-    createOrder: m,
-    orderLoading: d
-  } = he(), c = l.flowType === "sell", [u, p] = C(null), f = a == null ? void 0 : a.gateways.find((g) => g.id === r), x = async () => {
+    fetchQuotes: d,
+    createOrder: u,
+    orderLoading: m
+  } = he(), c = l.flowType === "sell", [i, p] = C(null), f = a == null ? void 0 : a.gateways.find((g) => g.id === r), x = async () => {
     p(null);
     try {
-      i(), await m();
+      d(), await u();
     } catch (g) {
       const h = g instanceof Error ? g.message : "Failed to create order";
       p(h);
@@ -872,15 +872,15 @@ function Ft({ className: t = "" }) {
       /* @__PURE__ */ e(oe, { label: "Network", value: l.network }),
       c && l.walletAddress && /* @__PURE__ */ e(oe, { label: "Refund address", value: ot(l.walletAddress), mono: !0 })
     ] }),
-    u && /* @__PURE__ */ e("p", { className: "text-[12px] mb-4", style: { color: "#EF4444" }, children: u }),
+    i && /* @__PURE__ */ e("p", { className: "text-[12px] mb-4", style: { color: "#EF4444" }, children: i }),
     /* @__PURE__ */ e(
       "button",
       {
         className: "w-full font-semibold text-[16px] transition-all flex items-center justify-center gap-2",
-        style: { height: 60, borderRadius: 5, background: "var(--t-cta-bg)", color: "var(--t-cta-text)", opacity: d ? 0.7 : 1 },
-        disabled: d,
+        style: { height: 60, borderRadius: 5, background: "var(--t-cta-bg)", color: "var(--t-cta-text)", opacity: m ? 0.7 : 1 },
+        disabled: m,
         onClick: x,
-        children: d ? /* @__PURE__ */ o(le, { children: [
+        children: m ? /* @__PURE__ */ o(le, { children: [
           /* @__PURE__ */ e("span", { className: "nramp-spinner-inline" }),
           "Processing..."
         ] }) : c ? "Confirm & Sell" : "Confirm & Pay"
@@ -906,30 +906,30 @@ function De({
   onClose: a,
   children: n
 }) {
-  const [l, r] = C(!1), [i, m] = C(!1);
+  const [l, r] = C(!1), [d, u] = C(!1);
   H(() => {
     if (t)
-      r(!0), requestAnimationFrame(() => requestAnimationFrame(() => m(!0)));
+      r(!0), requestAnimationFrame(() => requestAnimationFrame(() => u(!0)));
     else if (l) {
-      m(!1);
+      u(!1);
       const c = setTimeout(() => r(!1), 250);
       return () => clearTimeout(c);
     }
   }, [t]);
-  const d = $(() => {
-    m(!1), setTimeout(() => a(), 250);
+  const m = $(() => {
+    u(!1), setTimeout(() => a(), 250);
   }, [a]);
   return l ? /* @__PURE__ */ e(
     "div",
     {
       className: "absolute inset-0 z-20 transition-opacity duration-250",
-      style: { opacity: i ? 1 : 0 },
+      style: { opacity: d ? 1 : 0 },
       children: /* @__PURE__ */ e(
         "div",
         {
           className: "absolute inset-0 flex flex-col transition-transform duration-250 ease-out",
-          style: { background: "var(--t-modal-bg)", transform: i ? "translateY(0)" : "translateY(24px)" },
-          children: typeof n == "function" ? n(d) : n
+          style: { background: "var(--t-modal-bg)", transform: d ? "translateY(0)" : "translateY(24px)" },
+          children: typeof n == "function" ? n(m) : n
         }
       )
     }
@@ -945,7 +945,7 @@ function _t({
   className: n = "",
   style: l = {}
 }) {
-  return /* @__PURE__ */ e("span", { className: n, style: { display: "inline-flex", ...l }, children: t.split("").map((r, i) => /* @__PURE__ */ e(Kt, { char: r, height: a }, i)) });
+  return /* @__PURE__ */ e("span", { className: n, style: { display: "inline-flex", ...l }, children: t.split("").map((r, d) => /* @__PURE__ */ e(Kt, { char: r, height: a }, d)) });
 }
 function B({
   w: t,
@@ -1583,20 +1583,20 @@ function Xe({
     )
   ] });
 }
-function na({ onClose: t, onSelect: a, currencies: n }) {
-  const [l, r] = C(""), i = X(() => {
+function na({ onClose: t, onSelect: a, currencies: n, assetBaseUrl: l = "" }) {
+  const [r, d] = C(""), u = X(() => {
     if (!n || n.length === 0) return lt;
-    const d = new Map(lt.map((c) => [c.code, c.name]));
-    return n.map((c) => ({
-      code: c.code,
-      name: c.name || d.get(c.code) || c.code
+    const c = new Map(lt.map((i) => [i.code, i.name]));
+    return n.map((i) => ({
+      code: i.code,
+      name: i.name || c.get(i.code) || i.code
     }));
   }, [n]), m = X(() => {
-    const d = l.trim().toLowerCase();
-    return d ? i.filter(
-      (c) => c.code.toLowerCase().includes(d) || c.name.toLowerCase().includes(d)
-    ) : i;
-  }, [i, l]);
+    const c = r.trim().toLowerCase();
+    return c ? u.filter(
+      (i) => i.code.toLowerCase().includes(c) || i.name.toLowerCase().includes(c)
+    ) : u;
+  }, [u, r]);
   return /* @__PURE__ */ o(le, { children: [
     /* @__PURE__ */ e("div", { className: "flex justify-end px-5 pt-5", children: /* @__PURE__ */ e(Le, { onClick: t }) }),
     /* @__PURE__ */ e(
@@ -1607,42 +1607,42 @@ function na({ onClose: t, onSelect: a, currencies: n }) {
         children: "Select fiat currency"
       }
     ),
-    /* @__PURE__ */ e(Xe, { value: l, onChange: r }),
+    /* @__PURE__ */ e(Xe, { value: r, onChange: d }),
     /* @__PURE__ */ o("div", { className: "flex-1 overflow-y-auto custom-scroll px-5", children: [
-      m.map((d) => /* @__PURE__ */ o(
+      m.map((c) => /* @__PURE__ */ o(
         "button",
         {
-          onClick: () => a(d.code),
+          onClick: () => a(c.code),
           className: "flex items-center gap-3.5 w-full py-3.5 transition-colors",
           style: { color: "var(--t-text)" },
           children: [
-            /* @__PURE__ */ e(_e, { currencyCode: d.code, size: 32 }),
+            /* @__PURE__ */ e(_e, { currencyCode: c.code, size: 32, baseUrl: l }),
             /* @__PURE__ */ o("div", { className: "text-left", children: [
-              /* @__PURE__ */ e("div", { className: "font-semibold text-[15px] leading-tight", children: d.code }),
-              /* @__PURE__ */ e("div", { className: "text-[13px] mt-0.5", style: { color: "var(--t-text-secondary)" }, children: d.name })
+              /* @__PURE__ */ e("div", { className: "font-semibold text-[15px] leading-tight", children: c.code }),
+              /* @__PURE__ */ e("div", { className: "text-[13px] mt-0.5", style: { color: "var(--t-text-secondary)" }, children: c.name })
             ] })
           ]
         },
-        d.code
+        c.code
       )),
       m.length === 0 && /* @__PURE__ */ e("div", { className: "text-center py-10 text-[14px]", style: { color: "var(--t-text-muted)" }, children: "No currencies found" })
     ] })
   ] });
 }
 function ra({ onClose: t, onSelect: a, cryptos: n, assetBaseUrl: l = "" }) {
-  const [r, i] = C(""), m = X(() => {
+  const [r, d] = C(""), u = X(() => {
     if (!n || n.length === 0) return Vt;
     const c = [];
-    for (const u of n) {
-      const p = u.networks || [];
+    for (const i of n) {
+      const p = i.networks || [];
       if (p.length === 0)
-        c.push({ code: u.code, name: u.name || u.code, chain: u.code, popular: !1 });
+        c.push({ code: i.code, name: i.name || i.code, chain: i.code, popular: !1 });
       else
         for (const f of p) {
-          const x = f.code || f.id || f.name || u.code;
+          const x = f.code || f.id || f.name || i.code;
           c.push({
-            code: u.code,
-            name: u.name || u.code,
+            code: i.code,
+            name: i.name || i.code,
             chain: x,
             chainName: f.name,
             popular: !1
@@ -1650,19 +1650,19 @@ function ra({ onClose: t, onSelect: a, cryptos: n, assetBaseUrl: l = "" }) {
         }
     }
     return c;
-  }, [n]), d = X(() => {
+  }, [n]), m = X(() => {
     var f;
     const c = r.trim().toLowerCase();
-    if (!c) return m;
-    const u = c.split(/\s+/), p = [];
-    for (const x of m) {
+    if (!c) return u;
+    const i = c.split(/\s+/), p = [];
+    for (const x of u) {
       const g = Re[x.chain], h = g ? g.name.toLowerCase() : "", b = ((f = g == null ? void 0 : g.shortName) == null ? void 0 : f.toLowerCase()) || "", L = x.chain.toLowerCase(), O = x.code.toLowerCase(), A = x.name.toLowerCase(), G = [O, A, h, b, L];
-      if (!u.every((Z) => G.some((s) => s.includes(Z)))) continue;
+      if (!i.every((Z) => G.some((s) => s.includes(Z)))) continue;
       let W = 0;
-      O === c ? W += 100 : O.startsWith(u[0]) && (W += 50), x.popular && (W += 10), u.length > 1 && (h.includes(u[1]) || b.includes(u[1]) || L.includes(u[1])) && (W += 25), p.push({ item: x, score: W });
+      O === c ? W += 100 : O.startsWith(i[0]) && (W += 50), x.popular && (W += 10), i.length > 1 && (h.includes(i[1]) || b.includes(i[1]) || L.includes(i[1])) && (W += 25), p.push({ item: x, score: W });
     }
     return p.sort((x, g) => g.score - x.score), p.map((x) => x.item);
-  }, [m, r]);
+  }, [u, r]);
   return /* @__PURE__ */ o(le, { children: [
     /* @__PURE__ */ e("div", { className: "flex justify-end px-5 pt-5", children: /* @__PURE__ */ e(Le, { onClick: t }) }),
     /* @__PURE__ */ e(
@@ -1673,10 +1673,10 @@ function ra({ onClose: t, onSelect: a, cryptos: n, assetBaseUrl: l = "" }) {
         children: "Select crypto currency"
       }
     ),
-    /* @__PURE__ */ e(Xe, { value: r, onChange: i }),
+    /* @__PURE__ */ e(Xe, { value: r, onChange: d }),
     /* @__PURE__ */ o("div", { className: "flex-1 overflow-y-auto custom-scroll px-5", children: [
-      d.map((c) => {
-        const u = Re[c.chain], p = (u == null ? void 0 : u.name) || c.chainName || c.chain;
+      m.map((c) => {
+        const i = Re[c.chain], p = (i == null ? void 0 : i.name) || c.chainName || c.chain;
         return /* @__PURE__ */ o(
           "button",
           {
@@ -1730,7 +1730,7 @@ function ra({ onClose: t, onSelect: a, cryptos: n, assetBaseUrl: l = "" }) {
           `${c.code}-${c.chain}`
         );
       }),
-      d.length === 0 && /* @__PURE__ */ e("div", { className: "text-center py-10 text-[14px]", style: { color: "var(--t-text-muted)" }, children: "No currencies found" })
+      m.length === 0 && /* @__PURE__ */ e("div", { className: "text-center py-10 text-[14px]", style: { color: "var(--t-text-muted)" }, children: "No currencies found" })
     ] })
   ] });
 }
@@ -1793,11 +1793,11 @@ function ca({
         /* @__PURE__ */ e(oa, { checked: a, onChange: n, accentColor: "#4CD964" })
       ] }) }),
       /* @__PURE__ */ e("div", { style: { height: 1, background: "var(--t-divider)" } }),
-      la.map((i) => /* @__PURE__ */ o("div", { children: [
+      la.map((d) => /* @__PURE__ */ o("div", { children: [
         /* @__PURE__ */ o(
           "a",
           {
-            href: i.href,
+            href: d.href,
             target: "_blank",
             rel: "noopener noreferrer",
             className: "flex items-center justify-between w-full py-5 transition-colors",
@@ -1807,7 +1807,7 @@ function ca({
                 {
                   className: "font-medium text-[15px]",
                   style: { color: "var(--t-text)" },
-                  children: i.label
+                  children: d.label
                 }
               ),
               /* @__PURE__ */ e(ea, {})
@@ -1815,7 +1815,7 @@ function ca({
           }
         ),
         /* @__PURE__ */ e("div", { style: { height: 1, background: "var(--t-divider)" } })
-      ] }, i.label))
+      ] }, d.label))
     ] })
   ] });
 }
@@ -1825,11 +1825,11 @@ function sa({
   skinId: n = "mono",
   accentColor: l,
   bgColor: r,
-  bgImage: i,
-  borderColor: m,
-  borderRadius: d,
+  bgImage: d,
+  borderColor: u,
+  borderRadius: m,
   showFlowToggle: c = !0,
-  autoRedirect: u = !1,
+  autoRedirect: i = !1,
   explorerUrl: p,
   doneButtonText: f = "Done",
   supportEmail: x,
@@ -1949,10 +1949,10 @@ function sa({
     "--t-cta-bg": Me.accent,
     "--t-cta-text": "#ffffff"
   }, re = {};
-  r && Fe(r) ? re.backgroundColor = r : re.backgroundColor = "var(--t-bg)", i && (re.backgroundImage = `url(${i})`, re.backgroundSize = "cover", re.backgroundPosition = "center");
+  r && Fe(r) ? re.backgroundColor = r : re.backgroundColor = "var(--t-bg)", d && (re.backgroundImage = `url(${d})`, re.backgroundSize = "cover", re.backgroundPosition = "center");
   const we = {};
-  m && Fe(m) && (we.border = `1px solid ${m}`), d && (we.borderRadius = d);
-  const Qe = h.step === "checkout" ? /* @__PURE__ */ e(Ot, { autoRedirect: u }) : h.step === "processing" ? /* @__PURE__ */ e(Ht, {}) : h.step === "complete" ? /* @__PURE__ */ e(Ut, { explorerUrl: p, doneButtonText: f, onDone: g }) : h.step === "error" ? /* @__PURE__ */ e(Dt, { supportEmail: x }) : h.step === "confirm" ? /* @__PURE__ */ e(Ft, {}) : null;
+  u && Fe(u) && (we.border = `1px solid ${u}`), m && (we.borderRadius = m);
+  const Qe = h.step === "checkout" ? /* @__PURE__ */ e(Ot, { autoRedirect: i }) : h.step === "processing" ? /* @__PURE__ */ e(Ht, {}) : h.step === "complete" ? /* @__PURE__ */ e(Ut, { explorerUrl: p, doneButtonText: f, onDone: g }) : h.step === "error" ? /* @__PURE__ */ e(Dt, { supportEmail: x }) : h.step === "confirm" ? /* @__PURE__ */ e(Ft, {}) : null;
   if (Qe)
     return /* @__PURE__ */ e(
       "div",
@@ -2250,7 +2250,8 @@ function sa({
               onSelect: (T) => {
                 Nt(T), y();
               },
-              currencies: (E = L == null ? void 0 : L.fiats) == null ? void 0 : E.map((T) => ({ code: T.code, name: T.code }))
+              currencies: (E = L == null ? void 0 : L.fiats) == null ? void 0 : E.map((T) => ({ code: T.code, name: T.code })),
+              assetBaseUrl: D
             }
           );
         } }),
@@ -2297,11 +2298,11 @@ function ia({
   assetBaseUrl: n,
   flowType: l,
   customerId: r,
-  defaultFiatCurrency: i,
-  defaultCryptoCurrency: m,
-  defaultNetwork: d,
+  defaultFiatCurrency: d,
+  defaultCryptoCurrency: u,
+  defaultNetwork: m,
   defaultFiatAmount: c,
-  defaultCryptoAmount: u,
+  defaultCryptoAmount: i,
   defaultWalletAddress: p,
   defaultGateway: f,
   fieldLocks: x,
@@ -2331,11 +2332,11 @@ function ia({
       assetBaseUrl: n,
       flowType: l,
       customerId: r,
-      defaultFiatCurrency: i,
-      defaultCryptoCurrency: m,
-      defaultNetwork: d,
+      defaultFiatCurrency: d,
+      defaultCryptoCurrency: u,
+      defaultNetwork: m,
       defaultFiatAmount: c,
-      defaultCryptoAmount: u,
+      defaultCryptoAmount: i,
       defaultWalletAddress: p,
       defaultGateway: f,
       fieldLocks: x,
@@ -2378,21 +2379,21 @@ function ba({
   darkMode: l,
   dimmed: r
 }) {
-  const i = t.accent === null, m = 32;
+  const d = t.accent === null, u = 32;
   return /* @__PURE__ */ o(
     "button",
     {
       onClick: n,
       className: "relative shrink-0",
-      style: { width: m, height: m, opacity: r ? 0.4 : 1, transition: "opacity 0.2s" },
+      style: { width: u, height: u, opacity: r ? 0.4 : 1, transition: "opacity 0.2s" },
       children: [
-        i ? /* @__PURE__ */ o("svg", { width: m, height: m, viewBox: "0 0 32 32", children: [
+        d ? /* @__PURE__ */ o("svg", { width: u, height: u, viewBox: "0 0 32 32", children: [
           /* @__PURE__ */ e("clipPath", { id: "mono-left", children: /* @__PURE__ */ e("rect", { x: "0", y: "0", width: "16", height: "32" }) }),
           /* @__PURE__ */ e("clipPath", { id: "mono-right", children: /* @__PURE__ */ e("rect", { x: "16", y: "0", width: "16", height: "32" }) }),
           /* @__PURE__ */ e("circle", { cx: "16", cy: "16", r: "15", fill: "#111111", clipPath: "url(#mono-left)" }),
           /* @__PURE__ */ e("circle", { cx: "16", cy: "16", r: "15", fill: "#ffffff", clipPath: "url(#mono-right)" }),
           /* @__PURE__ */ e("circle", { cx: "16", cy: "16", r: "15", fill: "none", stroke: l ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.1)", strokeWidth: "1" })
-        ] }) : /* @__PURE__ */ e("svg", { width: m, height: m, viewBox: "0 0 32 32", children: /* @__PURE__ */ e("circle", { cx: "16", cy: "16", r: "15", fill: t.accent }) }),
+        ] }) : /* @__PURE__ */ e("svg", { width: u, height: u, viewBox: "0 0 32 32", children: /* @__PURE__ */ e("circle", { cx: "16", cy: "16", r: "15", fill: t.accent }) }),
         a && !r && /* @__PURE__ */ e(
           "div",
           {
@@ -2457,11 +2458,11 @@ function Ea({
   quotesLoading: l,
   cryptoCurrency: r
 }) {
-  const [i, m] = C(""), d = X(() => {
+  const [d, u] = C(""), m = X(() => {
     if (!(n != null && n.quotes)) return [];
-    const c = i.trim().toLowerCase();
-    return c ? n.quotes.filter((u) => u.gatewayName.toLowerCase().includes(c)) : n.quotes;
-  }, [n, i]);
+    const c = d.trim().toLowerCase();
+    return c ? n.quotes.filter((i) => i.gatewayName.toLowerCase().includes(c)) : n.quotes;
+  }, [n, d]);
   return /* @__PURE__ */ o(le, { children: [
     /* @__PURE__ */ e("div", { className: "flex justify-end px-5 pt-5", children: /* @__PURE__ */ e(Le, { onClick: t }) }),
     /* @__PURE__ */ e(
@@ -2472,10 +2473,10 @@ function Ea({
         children: "Choose Ramp"
       }
     ),
-    /* @__PURE__ */ e(Xe, { value: i, onChange: m }),
+    /* @__PURE__ */ e(Xe, { value: d, onChange: u }),
     /* @__PURE__ */ o("div", { className: "flex-1 overflow-y-auto custom-scroll px-5 space-y-2", children: [
-      l ? /* @__PURE__ */ e(ma, {}) : d.length === 0 ? /* @__PURE__ */ e("div", { className: "text-center py-10 text-[14px]", style: { color: "var(--t-text-muted)" }, children: n && n.quotes.length === 0 ? "No quotes available for this request" : "No providers found" }) : d.map((c, u) => {
-        const p = u === 0, f = parseFloat(c.cryptoAmount), x = f >= 1 ? f.toFixed(4) : f.toPrecision(6);
+      l ? /* @__PURE__ */ e(ma, {}) : m.length === 0 ? /* @__PURE__ */ e("div", { className: "text-center py-10 text-[14px]", style: { color: "var(--t-text-muted)" }, children: n && n.quotes.length === 0 ? "No quotes available for this request" : "No providers found" }) : m.map((c, i) => {
+        const p = i === 0, f = parseFloat(c.cryptoAmount), x = f >= 1 ? f.toFixed(4) : f.toPrecision(6);
         return /* @__PURE__ */ o(
           "button",
           {