0xtrails 0.16.2 → 0.17.0

package/dist/widget/components/MeldForm.js

@@ -1,447 +0,0 @@
-import { getFullErrorMessage as we } from "../../error.js";
-import { logger as n } from "../../logger/index.js";
-import { normalizeAddress as Ne } from "../../utils/address.js";
-import { ScreenHeader as Ee } from "./ScreenHeader.js";
-import ke from "./TokenImage.js";
-import { useTrails as Ie } from "../providers/TrailsProvider.js";
-import { useCountryList as Ae } from "../../query/geo.hooks.js";
-import { meldQueries as Me } from "../../query/meld.queries.js";
-import { ErrorDisplay as Pe } from "./ErrorDisplay.js";
-import { getCountryFlag as De, getCountryName as Te } from "../utils/countryUtils.js";
-import { getMeldOnrampClient as Ue } from "../../meld/utils/meld.js";
-import { useOnRampCountryDefaults as Re } from "../../hooks/useOnRampCountryDefaults.js";
-import { getCenteredWindowParams as _e } from "../utils/windowUtils.js";
-import { MeldTransactionStatus as Oe } from "./MeldTransactionStatus.js";
-import { zeroAddress as Fe } from "viem";
-import { useCallback as re, useEffect as x, useMemo as O, useRef as Be, useState as s } from "react";
-import { useQuery as Le } from "@tanstack/react-query";
-import { useAccount as We } from "@0xtrails/wallet";
-import { Fragment as oe, jsx as r, jsxs as t } from "react/jsx-runtime";
-import { Building2 as ae, ChevronDown as I, CreditCard as F, DollarSign as qe, ExternalLink as He, History as je, Smartphone as te } from "lucide-react";
-var ne = [
-  {
-    countryCode: "US",
-    name: "United States"
-  },
-  {
-    countryCode: "CA",
-    name: "Canada"
-  },
-  {
-    countryCode: "GB",
-    name: "United Kingdom"
-  },
-  {
-    countryCode: "EU",
-    name: "European Union"
-  },
-  {
-    countryCode: "AU",
-    name: "Australia"
-  }
-], $e = [
-  {
-    code: "CREDIT_DEBIT_CARD",
-    label: "Credit Card",
-    icon: F
-  },
-  {
-    code: "DEBIT_CARD",
-    label: "Debit Card",
-    icon: F
-  },
-  {
-    code: "APPLE_PAY",
-    label: "Apple Pay",
-    icon: te
-  },
-  {
-    code: "GOOGLE_PAY",
-    label: "Google Pay",
-    icon: te
-  },
-  {
-    code: "EXCHANGE",
-    label: "Exchange",
-    icon: ae
-  }
-], Ge = [
-  {
-    code: "USDC_BASE",
-    name: "USD Coin",
-    symbol: "USDC",
-    chain: "BASE",
-    chainName: "Base",
-    chainId: 8453,
-    contractAddress: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913"
-  },
-  {
-    code: "DAI_BASE",
-    name: "Dai Stablecoin",
-    symbol: "DAI",
-    chain: "BASE",
-    chainName: "Base",
-    chainId: 8453,
-    contractAddress: "0x50c5725949a6f0c72e6c4a641f24049a917db0cb"
-  },
-  {
-    code: "USDC_ETH",
-    name: "USD Coin",
-    symbol: "USDC",
-    chain: "ETH",
-    chainName: "Ethereum",
-    chainId: 1,
-    contractAddress: "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"
-  },
-  {
-    code: "ETH",
-    name: "Ethereum",
-    symbol: "ETH",
-    chain: "ETH",
-    chainName: "Ethereum",
-    chainId: 1,
-    contractAddress: Fe
-  }
-], Ye = [
-  10,
-  25,
-  50,
-  100
-], se = "meld-current-session-id", Qe = "meld-current-external-session-id";
-function ze(b) {
-  return b ? {
-    ETH: 1,
-    BASE: 8453,
-    ARBITRUM: 42161,
-    OPTIMISM: 10,
-    POLYGON: 137,
-    BSC: 56,
-    AVAX: 43114
-  }[b.toUpperCase()] : void 0;
-}
-var br = ({ trailsApiKey: b, onBack: le, onTransactionStatus: A, onNavigateToCountries: de, onNavigateToPaymentMethods: ie, onNavigateToTokens: ce, onNavigateToProviders: me, onNavigateToHistory: B, onSelectProvider: M, onProvidersLoaded: L, selectedCountry: v, selectedPaymentMethod: ue, selectedToken: ge, selectedProvider: pe }) => {
-  const { address: g } = We(), W = Ie(), { data: P = [] } = Ae(), { countryCode: f } = Re({ enabled: !v }), i = O(() => {
-    if (v) return v;
-    if (f) {
-      const e = ne.find((o) => o.countryCode === f);
-      return e || {
-        countryCode: f,
-        name: Te(f, P)
-      };
-    }
-    return ne[0] || {
-      countryCode: "US",
-      name: "United States"
-    };
-  }, [
-    v,
-    f,
-    P
-  ]), c = ue || "CREDIT_DEBIT_CARD", [m, q] = s(() => localStorage.getItem("meld-form-amount") || "25"), [y] = s("USD"), h = O(() => Ue(b, W?.trailsApiUrl), [b, W?.trailsApiUrl]), { data: D = [] } = Le(Me.paymentMethodList(h, y)), u = O(() => !c || !D.length ? null : D.find((e) => e.paymentMethod === c), [c, D]), a = ge || Ge[0] || {
-    code: "USDC_BASE",
-    name: "USD Coin",
-    symbol: "USDC",
-    chain: "BASE",
-    chainName: "Base"
-  }, [p, H] = s([]), l = pe, [ye, S] = s(!1), [w, j] = s(""), [T, $] = s(!1), [N, U] = s(null), [C, E] = s(!1), [R, G] = s(null), [Ke, Y] = s(null), [Q, z] = s(null), [be, fe] = s(null), [he, K] = s(!1), [X, Ce] = s(null), J = Be(A);
-  x(() => {
-    J.current = A;
-  }, [A]);
-  const xe = (e) => {
-    J.current?.({
-      type: e.state === "success" ? "success" : e.state === "failed" || e.state === "error" ? "error" : e.state === "polling" ? "pending" : null,
-      message: e.message
-    });
-  }, ve = () => {
-    n.console.log("[MeldForm] Popup window was closed"), Y(null), E(!1), K(!1);
-  };
-  x(() => {
-    const e = new URLSearchParams(window.location.search), o = e.get("sessionId") || e.get("externalSessionId") || e.get("orderId");
-    o && !R && (n.console.log("[MeldForm] Found session ID in URL parameters:", o), G(o), z(o), localStorage.setItem(se, o));
-  }, [R]);
-  const V = re(async () => {
-    if (!i || !a || !m) {
-      n.console.log("[MeldForm] Missing required parameters for loadProviders:", {
-        selectedCountry: i,
-        selectedToken: a,
-        amount: m
-      });
-      return;
-    }
-    n.console.log("[MeldForm] Loading providers with params:", {
-      walletAddress: g || "fallback",
-      countryCode: i.countryCode,
-      sourceCurrencyCode: y,
-      sourceAmount: m,
-      destinationCurrencyCode: a.code,
-      paymentMethodType: c
-    }), S(!0), H([]), j(""), E(!1);
-    try {
-      const e = await h.getMeldQuote({
-        walletAddress: g || "0x1234567890123456789012345678901234567890",
-        countryCode: i.countryCode,
-        sourceCurrencyCode: y,
-        sourceAmount: m,
-        destinationCurrencyCode: a.code
-      });
-      n.console.log("[MeldForm] Quote response:", e);
-      let o;
-      try {
-        const d = e.QuoteResponse?.quotes;
-        d ? o = d : o = (typeof e.quoteResponse == "string" ? JSON.parse(e.quoteResponse) : e.quoteResponse)?.quotes;
-      } catch (d) {
-        n.console.error("[MeldForm] Error parsing quote response:", d), S(!1);
-        return;
-      }
-      if (n.console.log("[MeldForm] Extracted quotes:", o), !o || o.length === 0) {
-        n.console.log("[MeldForm] No quotes available"), S(!1);
-        return;
-      }
-      H(o), n.console.log("[MeldForm] Set providers:", o.length, "quotes");
-    } catch (e) {
-      n.console.error("[MeldForm] Error loading providers:", e);
-    } finally {
-      S(!1);
-    }
-  }, [
-    i,
-    a,
-    m,
-    y,
-    c,
-    h,
-    g
-  ]), Z = re(async () => {
-    if (!(!l || !g)) {
-      $(!0), U(null);
-      try {
-        const e = `meld-${Date.now()}-${Math.random().toString(36).substring(2, 8)}`, o = Ne(g), d = (await h.createMeldWidgetSession({
-          sessionData: {
-            walletAddress: g,
-            countryCode: i.countryCode,
-            sourceCurrencyCode: y,
-            sourceAmount: m,
-            destinationCurrencyCode: a.code,
-            serviceProvider: l.serviceProvider,
-            paymentMethodType: c || void 0
-          },
-          sessionType: "BUY",
-          externalCustomerId: o,
-          externalSessionId: e
-        })).WidgetSession;
-        if (!d) throw new Error("No widget session data received");
-        const ee = d.serviceProviderWidgetUrl || d.widgetUrl || d.url;
-        if (!ee) throw new Error("No widget URL found in session data");
-        j(ee);
-        const k = d.sessionId || d.id || e, _ = d.externalSessionId || e;
-        n.console.log("[MeldForm] Session data from response:", {
-          sessionId: k,
-          externalSessionId: _,
-          generatedExternalSessionId: e
-        }), z(k), fe(_), G(k), localStorage.setItem(se, k), localStorage.setItem(Qe, _);
-      } catch (e) {
-        n.console.error("Error creating widget session:", e), U(we(e));
-      } finally {
-        $(!1);
-      }
-    }
-  }, [
-    l,
-    g,
-    i,
-    y,
-    m,
-    a,
-    c,
-    h
-  ]);
-  x(() => {
-    V(), U(null);
-  }, [V]), x(() => {
-    p.length > 0 && (L?.(p), !l && M && p[0] && (n.console.log("[MeldForm] Auto-selecting first provider:", p[0]), M(p[0])));
-  }, [
-    p,
-    l,
-    L,
-    M
-  ]), x(() => {
-    l && Z();
-  }, [l, Z]);
-  const Se = () => {
-    if (w && !C) {
-      E(!0);
-      const e = window.open(w, "_blank", _e(800, 600));
-      if (!e) {
-        n.console.error("[MeldForm] Popup blocked by browser"), E(!1);
-        return;
-      }
-      Y(e), K(!0), X && X(e), n.console.log("[MeldForm] Payment window opened, session ID:", Q);
-    }
-  };
-  return /* @__PURE__ */ t("div", {
-    className: "max-w-md mx-auto p-6 space-y-4",
-    children: [
-      /* @__PURE__ */ r(Ee, {
-        onBack: le,
-        headerContent: "Buy Crypto",
-        rightSideContent: /* @__PURE__ */ t("div", {
-          className: "flex items-center gap-2",
-          children: [B && /* @__PURE__ */ r("button", {
-            type: "button",
-            onClick: B,
-            className: "flex items-center justify-center w-8 h-8 bg-transparent border border-gray-300 dark:border-gray-600 rounded-lg trails-text-primary hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors cursor-pointer",
-            title: "Onramp History",
-            children: /* @__PURE__ */ r(je, { className: "w-4 h-4" })
-          }), /* @__PURE__ */ t("button", {
-            type: "button",
-            onClick: de,
-            className: "flex items-center gap-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded-lg px-2 py-1 text-sm trails-text-primary hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors cursor-pointer",
-            children: [
-              /* @__PURE__ */ r("span", {
-                className: "text-base",
-                children: De(i.countryCode, P)
-              }),
-              /* @__PURE__ */ r("span", {
-                className: "font-medium",
-                children: i.countryCode
-              }),
-              /* @__PURE__ */ r(I, { className: "w-4 h-4 text-gray-500" })
-            ]
-          })]
-        })
-      }),
-      /* @__PURE__ */ t("div", { children: [/* @__PURE__ */ r("span", {
-        className: "block text-sm font-medium trails-text-primary mb-2",
-        children: "Payment Method"
-      }), /* @__PURE__ */ t("button", {
-        type: "button",
-        onClick: ie,
-        className: "w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-3 trails-text-primary bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors cursor-pointer flex items-center justify-between",
-        children: [/* @__PURE__ */ t("div", {
-          className: "flex items-center gap-3",
-          children: [u?.logos?.light || u?.logos?.dark ? /* @__PURE__ */ r("div", {
-            className: "w-8 h-8 rounded-lg flex items-center justify-center bg-gray-100 dark:bg-gray-700 p-1",
-            children: /* @__PURE__ */ r("img", {
-              src: u.logos?.light || u.logos?.dark || "",
-              alt: `${u.name} logo`,
-              className: "max-w-full max-h-full object-cover"
-            })
-          }) : /* @__PURE__ */ r(F, { className: "w-5 h-5 text-gray-500" }), /* @__PURE__ */ t("div", {
-            className: "text-left",
-            children: [/* @__PURE__ */ r("div", {
-              className: "font-medium",
-              children: u?.name || $e.find((e) => e.code === c)?.label || c || "Select Payment Method"
-            }), u?.paymentType && /* @__PURE__ */ r("div", {
-              className: "text-xs text-gray-500 dark:text-gray-400",
-              children: u.paymentType
-            })]
-          })]
-        }), /* @__PURE__ */ r(I, { className: "w-5 h-5 text-gray-500" })]
-      })] }),
-      /* @__PURE__ */ t("div", { children: [/* @__PURE__ */ r("label", {
-        htmlFor: "meld-amount-input",
-        className: "block text-sm font-medium trails-text-primary mb-2",
-        children: "Amount"
-      }), /* @__PURE__ */ t("div", {
-        className: "space-y-3",
-        children: [/* @__PURE__ */ t("div", {
-          className: "relative",
-          children: [/* @__PURE__ */ r(qe, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-500" }), /* @__PURE__ */ r("input", {
-            id: "meld-amount-input",
-            type: "number",
-            value: m,
-            onChange: (e) => {
-              const o = e.target.value;
-              q(o), o && localStorage.setItem("meld-form-amount", o);
-            },
-            placeholder: "Enter amount",
-            className: "w-full border border-gray-300 dark:border-gray-600 rounded-lg pl-10 pr-3 py-3 trails-text-primary bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"
-          })]
-        }), /* @__PURE__ */ r("div", {
-          className: "flex gap-2",
-          children: Ye.map((e) => /* @__PURE__ */ t("button", {
-            type: "button",
-            onClick: () => {
-              const o = e.toString();
-              q(o), localStorage.setItem("meld-form-amount", o);
-            },
-            className: `px-3 py-1 text-sm rounded-md border transition-colors ${m === e.toString() ? "bg-blue-100 border-blue-500 text-blue-700 dark:bg-blue-900/30 dark:border-blue-400 dark:text-blue-300" : "border-gray-300 dark:border-gray-600 trails-text-secondary hover:bg-gray-50 dark:hover:bg-gray-800"}`,
-            children: ["$", e]
-          }, e))
-        })]
-      })] }),
-      /* @__PURE__ */ t("div", { children: [/* @__PURE__ */ r("span", {
-        className: "block text-sm font-medium trails-text-primary mb-2",
-        children: "Token"
-      }), /* @__PURE__ */ t("button", {
-        type: "button",
-        onClick: ce,
-        className: "w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-3 trails-text-primary bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors cursor-pointer flex items-center justify-between",
-        children: [/* @__PURE__ */ t("div", {
-          className: "flex items-center gap-3",
-          children: [/* @__PURE__ */ r(ke, {
-            symbol: a.symbol,
-            chainId: a.chainId || ze(a.chain),
-            contractAddress: a.contractAddress,
-            size: 24
-          }), /* @__PURE__ */ t("div", {
-            className: "text-left",
-            children: [/* @__PURE__ */ r("div", {
-              className: "font-medium",
-              children: a.symbol
-            }), /* @__PURE__ */ r("div", {
-              className: "text-xs text-gray-500 dark:text-gray-400",
-              children: a.chainName
-            })]
-          })]
-        }), /* @__PURE__ */ r(I, { className: "w-5 h-5 text-gray-500" })]
-      })] }),
-      /* @__PURE__ */ t("div", { children: [/* @__PURE__ */ r("span", {
-        className: "block text-sm font-medium trails-text-primary mb-2",
-        children: "Provider"
-      }), ye ? /* @__PURE__ */ t("div", {
-        className: "border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-3 flex items-center",
-        children: [/* @__PURE__ */ r("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500 mr-2" }), /* @__PURE__ */ r("span", {
-          className: "text-gray-600 dark:text-gray-400",
-          children: "Loading providers..."
-        })]
-      }) : p.length === 0 ? /* @__PURE__ */ r("div", {
-        className: "border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-3 text-gray-600 dark:text-gray-400",
-        children: "No providers available"
-      }) : /* @__PURE__ */ t("button", {
-        type: "button",
-        onClick: me,
-        className: "w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-3 trails-text-primary bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors cursor-pointer flex items-center justify-between",
-        children: [/* @__PURE__ */ t("div", {
-          className: "flex items-center gap-3",
-          children: [/* @__PURE__ */ r(ae, { className: "w-5 h-5 text-gray-500" }), /* @__PURE__ */ r("span", { children: l ? `${l.serviceProvider} - $${l.totalFee.toFixed(2)} fee` : "Select Provider" })]
-        }), /* @__PURE__ */ r(I, { className: "w-5 h-5 text-gray-500" })]
-      })] }),
-      N && /* @__PURE__ */ r(Pe, {
-        error: N,
-        severity: "error"
-      }),
-      /* @__PURE__ */ r("button", {
-        type: "button",
-        onClick: Se,
-        disabled: T || !w || C || !l || !!N,
-        className: `w-full flex items-center justify-center py-3 px-4 font-semibold rounded-lg transition-colors ${T || !w || C || !l || N ? "bg-gray-400 text-gray-200 cursor-not-allowed" : "bg-blue-600 hover:bg-blue-700 text-white cursor-pointer"}`,
-        children: T ? /* @__PURE__ */ t(oe, { children: [/* @__PURE__ */ r("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2" }), /* @__PURE__ */ r("span", { children: "Preparing..." })] }) : /* @__PURE__ */ t(oe, { children: [/* @__PURE__ */ r("span", { children: C ? "Provider Opened" : "Continue to Provider" }), /* @__PURE__ */ r(He, { className: "w-4 h-4 ml-2" })] })
-      }),
-      /* @__PURE__ */ r(Oe, {
-        sessionId: Q,
-        transactionId: R,
-        externalSessionId: be,
-        onStatusChange: xe,
-        onWindowClosed: ve,
-        showTimeElapsed: !0,
-        showPopupOpened: C,
-        isPopupOpen: he,
-        onSetWindowRef: Ce
-      })
-    ]
-  });
-};
-export {
-  br as MeldForm
-};

package/dist/widget/components/MeldHistory.d.ts

@@ -1,13 +0,0 @@
-import { default as React } from 'react';
-import { MeldTransactionData } from '../../hooks/useMeldTransactionHistory.js';
-export interface MeldHistoryProps {
-    limit?: number;
-    autoRefetch?: boolean;
-    refetchInterval?: number;
-    onTransactionClick?: (transaction: MeldTransactionData) => void;
-    onBack?: () => void;
-    className?: string;
-}
-export declare const MeldHistory: React.FC<MeldHistoryProps>;
-export default MeldHistory;
-//# sourceMappingURL=MeldHistory.d.ts.map

package/dist/widget/components/MeldHistory.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MeldHistory.d.ts","sourceRoot":"","sources":["../../../src/widget/components/MeldHistory.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,OAAO,EAEL,KAAK,mBAAmB,EAEzB,MAAM,0CAA0C,CAAA;AAOjD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,kBAAkB,CAAC,EAAE,CAAC,WAAW,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAC/D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAuSD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2GlD,CAAA;AAED,eAAe,WAAW,CAAA"}