@coinbase/cdp-react 0.0.23 → 0.0.25

package/dist/components/Fund/components/FundErrorScreen.js

@@ -0,0 +1,118 @@
+import { jsxs as d, jsx as o, Fragment as y } from "react/jsx-runtime";
+import { useMemo as i, Fragment as E } from "react";
+import { IconExclamationTriangle as m } from "../../../icons/IconExclamationTriangle.js";
+import { useFundContext as h } from "../FundProvider.js";
+import '../../../assets/FundErrorScreen.css';const f = "FundErrorScreen-module__icon___Mf6ck", O = "FundErrorScreen-module__title___8Qv6o", g = "FundErrorScreen-module__body___-p-r9", U = "FundErrorScreen-module__keywords___u85Do", c = {
+  icon: f,
+  title: O,
+  body: g,
+  "docs-link": "FundErrorScreen-module__docs-link___mzeH8",
+  keywords: U
+}, C = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), b = ({
+  message: s,
+  keywords: e,
+  className: t = ""
+}) => {
+  if (!s || !e?.length)
+    return /* @__PURE__ */ o(y, { children: s });
+  const a = new RegExp(`(${e.map(C).join("|")})\\b`, "g"), r = s.split(a);
+  return /* @__PURE__ */ o(y, { children: r.map((n, u) => n ? e.includes(n) ? /* @__PURE__ */ o("span", { className: t, "data-part": "keyword", children: n }, u) : /* @__PURE__ */ o(E, { children: n }, u) : null) });
+}, T = ({ error: s }) => {
+  const { state: e } = h(), { code: t, message: a } = s || {}, r = process.env.NODE_ENV === "development", n = e.network.charAt(0).toUpperCase() + e.network.slice(1), u = i(() => {
+    switch (t) {
+      case "NO_ONRAMP_URL":
+      case "BUY_URL_ERROR":
+      case "UNKNOWN_BUY_URL_ERROR":
+        return "https://docs.cdp.coinbase.com/onramp-&-offramp/onramp-apis/generating-quotes#example-request%2Fresponse-with-one-click-buy-url";
+      case "EXCHANGE_RATE_ERROR":
+      case "UNKNOWN_EXCHANGE_RATE_ERROR":
+        return "https://docs.cdp.coinbase.com/onramp-&-offramp/onramp-apis/generating-quotes#onramp-quote";
+      default:
+        return "https://docs.cdp.coinbase.com/onramp-&-offramp/onramp-apis/countries-&-currencies#fiat-currencies-and-crypto-assets-supported";
+    }
+  }, [t]), l = i(() => {
+    if (!r || !t)
+      return "";
+    switch (t) {
+      case "NO_ONRAMP_URL":
+      case "BUY_URL_ERROR":
+      case "UNKNOWN_BUY_URL_ERROR":
+        return "Use the Onramp Quote API with a destination address to get a one-click-buy URL.";
+      case "EXCHANGE_RATE_ERROR":
+      case "UNKNOWN_EXCHANGE_RATE_ERROR":
+        return "Use the Onramp Quote API to calculate the exchange rate.";
+      default:
+        return "Use the Buy Options API to see the full list of crypto assets that can be bought for each region your app supports.";
+    }
+  }, [t, r]), R = i(() => {
+    switch (t) {
+      case "INVALID_PURCHASE_CURRENCY":
+        return r ? "Invalid parameters" : `${e.cryptoCurrency} is not available`;
+      case "INVALID_NETWORK":
+        return r ? "Invalid parameters" : `${n} network is not available`;
+      case "NO_ONRAMP_URL":
+      case "BUY_URL_ERROR":
+      case "UNKNOWN_BUY_URL_ERROR":
+        return r ? "Onramp URL error" : "Something went wrong";
+      case "EXCHANGE_RATE_ERROR":
+      case "UNKNOWN_EXCHANGE_RATE_ERROR":
+        return "No exchange rate";
+      default:
+        return "No payment methods";
+    }
+  }, [t, e.cryptoCurrency, n, r]), _ = i(() => {
+    switch (t) {
+      case "PAYMENT_METHODS_ERROR":
+      case "UNKNOWN_PAYMENT_METHODS_ERROR":
+        return r ? a || "There was an error fetching the payment methods." : `Unfortunately there's no available payment method to purchase ${e.cryptoCurrency} with ${e.fiatCurrency} on ${n} in your region. Please select a different asset to buy.`;
+      case "INVALID_PURCHASE_CURRENCY":
+        return r ? `${e.cryptoCurrency} crypto asset is not available.` : "Please select a different asset to buy.";
+      case "INVALID_NETWORK":
+        return r ? `${e.network} is not available for buying ${e.cryptoCurrency} in your region.` : `Coinbase doesn’t support buying ${e.cryptoCurrency} on ${n} in your region. Please select a different network to buy ${e.cryptoCurrency} on.`;
+      case "NO_ONRAMP_URL":
+        return r ? "An onramp url was unable to be created" : "We’re running into some issues. Please try again later.";
+      case "BUY_URL_ERROR":
+      case "UNKNOWN_BUY_URL_ERROR":
+        return r ? a || "There was an error creating the onramp url." : "We’re running into some issues. Please try again later.";
+      case "EXCHANGE_RATE_ERROR":
+      case "UNKNOWN_EXCHANGE_RATE_ERROR":
+        return r ? a || "There was an error fetching the exchange rate." : `No exchange rate found for ${e.fiatCurrency}<>${e.cryptoCurrency} on ${n} in your region.`;
+      default:
+        return r ? `There's no available payment method to purchase ${e.cryptoCurrency} with ${e.fiatCurrency} on ${e.network} in your region.` : `Unfortunately there's no available payment method to purchase ${e.cryptoCurrency} with ${e.fiatCurrency} on ${n} in your region. Please select a different asset to buy.`;
+    }
+  }, [
+    t,
+    a,
+    e.cryptoCurrency,
+    e.network,
+    n,
+    r,
+    e.fiatCurrency
+  ]), N = i(() => {
+    const p = [e.cryptoCurrency, e.network, e.country, e.fiatCurrency];
+    return e.subdivision && p.push(e.subdivision), p;
+  }, [e.cryptoCurrency, e.network, e.country, e.fiatCurrency, e.subdivision]);
+  return !R || !_ ? null : /* @__PURE__ */ d("div", { children: [
+    /* @__PURE__ */ o(m, { className: c.icon }),
+    /* @__PURE__ */ o("p", { className: `${c.title}`, children: R }),
+    /* @__PURE__ */ o("p", { className: `${c.body} ${r ? c.keywords : ""}`, children: /* @__PURE__ */ o(b, { message: _, keywords: N }) }),
+    l && /* @__PURE__ */ d("p", { className: `${c.body}`, children: [
+      " ",
+      l,
+      " ",
+      /* @__PURE__ */ o(
+        "a",
+        {
+          className: c["docs-link"],
+          href: u,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: "View docs"
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  T as FundErrorScreen
+};

package/dist/components/Fund/components/FundPaymentMethods.d.ts

@@ -0,0 +1,6 @@
+import { ElementType, HTMLAttributes } from 'react';
+interface FundPaymentMethodsProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    as?: ElementType;
+}
+export declare const FundPaymentMethods: ({ as: Component, ...props }: FundPaymentMethodsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Fund/components/FundPaymentMethods.js

@@ -0,0 +1,55 @@
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { useCallback as r } from "react";
+import { Select as _, SelectTrigger as h, SelectContent as p, SelectItem as u } from "../../forms/Select/index.js";
+import { LoadingSkeleton as y } from "../../ui/LoadingSkeleton/index.js";
+import { useFundContext as g } from "../FundProvider.js";
+import { createSetFieldAction as P } from "../useFundReducer.js";
+import '../../../assets/FundPaymentMethods.css';const s = {
+  "select-loading-skeleton": "FundPaymentMethods-module__select-loading-skeleton___ZuD3n",
+  "select-item": "FundPaymentMethods-module__select-item___9VyxH",
+  "select-item-icon": "FundPaymentMethods-module__select-item-icon___28unQ",
+  "select-item-name": "FundPaymentMethods-module__select-item-name___5vLc0",
+  "select-item-description": "FundPaymentMethods-module__select-item-description___C5mTB",
+  "select-trigger": "FundPaymentMethods-module__select-trigger___ypebl"
+}, k = ({
+  as: a = "div",
+  ...c
+}) => {
+  const { state: e, dispatch: i } = g(), m = r(
+    (t) => {
+      const d = e.paymentMethods?.find((o) => o.id === t);
+      d && i(P("selectedPaymentMethod", d));
+    },
+    [i, e.paymentMethods]
+  );
+  return /* @__PURE__ */ l(a, { ...c, children: [
+    e.isPaymentMethodsPending && /* @__PURE__ */ n(y, { className: s["select-loading-skeleton"] }),
+    !e.isPaymentMethodsPending && /* @__PURE__ */ l(
+      _,
+      {
+        defaultValue: e.selectedPaymentMethod?.id || e.paymentMethods?.[0]?.id,
+        onValueChange: m,
+        children: [
+          /* @__PURE__ */ n(
+            h,
+            {
+              "aria-label": "Select a payment method",
+              placeholder: "Select a payment method",
+              className: s["select-trigger"]
+            }
+          ),
+          /* @__PURE__ */ n(p, { children: e.paymentMethods?.map((t) => /* @__PURE__ */ n(u, { value: t.id, children: /* @__PURE__ */ l("span", { className: s["select-item"], children: [
+            /* @__PURE__ */ n("span", { className: s["select-item-icon"], children: t.icon }),
+            /* @__PURE__ */ l("span", { children: [
+              /* @__PURE__ */ n("span", { className: s["select-item-name"], children: t.name }),
+              /* @__PURE__ */ n("span", { className: s["select-item-description"], children: t.description })
+            ] })
+          ] }) }, t.id)) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  k as FundPaymentMethods
+};

package/dist/components/Fund/components/FundPresetAmountInputs.d.ts

@@ -0,0 +1,6 @@
+import { ElementType, HTMLAttributes } from 'react';
+interface FundPresetAmountInputsProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    as?: ElementType;
+}
+export declare const FundPresetAmountInputs: ({ as: Component, className, ...props }: FundPresetAmountInputsProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/Fund/components/FundPresetAmountInputs.js

@@ -0,0 +1,41 @@
+import { jsx as s } from "react/jsx-runtime";
+import { Big as c } from "big.js";
+import { useCallback as l } from "react";
+import { Button as d } from "../../ui/Button/index.js";
+import { formatFiat as f } from "../../../utils/formatFiat.js";
+import { useFundContext as y } from "../FundProvider.js";
+import '../../../assets/FundPresetAmountInputs.css';const a = {
+  "preset-amount-inputs": "FundPresetAmountInputs-module__preset-amount-inputs___Skjnm",
+  "preset-amount-input": "FundPresetAmountInputs-module__preset-amount-input___eyNqU"
+}, P = ({
+  as: r = "div",
+  className: m = "",
+  ...u
+}) => {
+  const { state: t, dispatch: o } = y(), i = l(
+    (e) => {
+      const n = c(e).times(t.exchangeRate ?? 0), p = n.eq(0) ? 0 : +n.toFixed(t.cryptoDecimalPlaces);
+      o({
+        type: "SET_AMOUNTS",
+        payload: { cryptoAmount: p, fiatAmount: e }
+      });
+    },
+    [o, t.exchangeRate, t.cryptoDecimalPlaces]
+  );
+  return t.presetAmountInputs?.length ? /* @__PURE__ */ s(r, { className: `${a["preset-amount-inputs"]} ${m}`, ...u, children: t.presetAmountInputs.map((e) => /* @__PURE__ */ s(
+    d,
+    {
+      size: "xs",
+      variant: "control",
+      "aria-label": `Deposit ${e}`,
+      className: a["preset-amount-input"],
+      onClick: () => i(e),
+      type: "button",
+      children: f(e, t.fiatCurrency, t.fiatDecimalPlaces, t.locale)
+    },
+    e
+  )) }) : null;
+};
+export {
+  P as FundPresetAmountInputs
+};

package/dist/components/Fund/components/FundTransactionStatus.d.ts

@@ -0,0 +1,8 @@
+type StatusComponentProps = {
+    reset?: () => void;
+    timeRemaining?: number | null;
+    unmountOnSuccess?: boolean;
+    unmountOnError?: boolean;
+};
+export declare const FundTransactionStatus: (props: StatusComponentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Fund/components/FundTransactionStatus.js

@@ -0,0 +1,106 @@
+import { jsx as s, jsxs as r, Fragment as i } from "react/jsx-runtime";
+import { useRef as d, useCallback as h, useEffect as S, useMemo as g } from "react";
+import { Button as l } from "../../ui/Button/index.js";
+import { LoadingSpinner as T } from "../../ui/LoadingSpinner/index.js";
+import { SwitchFadeTransition as N } from "../../ui/SwitchFadeTransition/index.js";
+import { IconCheck as f } from "../../../icons/IconCheck.js";
+import { IconXMark as F } from "../../../icons/IconXMark.js";
+import { useFundContext as m } from "../FundProvider.js";
+import '../../../assets/FundTransactionStatus.css';const y = "FundTransactionStatus-module__graphic___cam38", $ = "FundTransactionStatus-module__status___2zKJu", k = "FundTransactionStatus-module__pad___-9rGO", w = "FundTransactionStatus-module__spinner___94rMk", C = "FundTransactionStatus-module__icon___0hBQO", b = "FundTransactionStatus-module__subhead___0sHIM", M = "FundTransactionStatus-module__description___W7kK2", v = "FundTransactionStatus-module__ring___1vnCu", t = {
+  graphic: y,
+  status: $,
+  pad: k,
+  spinner: w,
+  icon: C,
+  "icon-success": "FundTransactionStatus-module__icon-success___893VG",
+  "icon-error": "FundTransactionStatus-module__icon-error___-aQvD",
+  subhead: b,
+  description: M,
+  ring: v,
+  "ring-success": "FundTransactionStatus-module__ring-success___Bxudq",
+  "ring-error": "FundTransactionStatus-module__ring-error___WmTaE"
+}, W = ["waiting", "transactionSuccess", "error"], q = (a) => {
+  const { state: n } = m(), e = d(null), o = d(null), u = h((c) => {
+    o.current !== c && (o.current = c, e.current?.transition.toggle(c));
+  }, []);
+  return S(() => {
+    (n.transactionStatus.statusName === "transactionSuccess" || n.transactionStatus.statusName === "error") && u(n.transactionStatus.statusName);
+  }, [n.transactionStatus.statusName, u]), /* @__PURE__ */ s(
+    N,
+    {
+      animateHeight: !1,
+      timeout: 250,
+      items: W,
+      initialEntered: !0,
+      transitionRef: e,
+      children: ({ itemKey: c, ..._ }) => {
+        const p = E[c];
+        return /* @__PURE__ */ s("div", { ..._, className: t.status, children: /* @__PURE__ */ s(p, { ...a }) });
+      }
+    }
+  );
+}, x = () => {
+  const { state: a } = m(), n = g(
+    () => a.paymentMethods?.find((e) => e.id === a.selectedPaymentMethod?.id),
+    [a.paymentMethods, a.selectedPaymentMethod?.id]
+  );
+  return /* @__PURE__ */ r(i, { children: [
+    /* @__PURE__ */ r("div", { className: t.graphic, children: [
+      /* @__PURE__ */ s(
+        T,
+        {
+          strokeWidth: "5%",
+          staticStroke: !0,
+          staticStrokeColor: "var(--cdp-web-colors-line-default)",
+          className: t.spinner
+        }
+      ),
+      n && /* @__PURE__ */ s("span", { className: t.icon, children: n.icon })
+    ] }),
+    /* @__PURE__ */ s("p", { className: t.subhead, children: "Waiting" }),
+    /* @__PURE__ */ r("p", { className: t.description, children: [
+      "Deposit ",
+      a.cryptoAmount,
+      " ",
+      a.cryptoCurrency,
+      n ? ` via ${n.name}` : ""
+    ] })
+  ] });
+}, P = ({
+  reset: a,
+  timeRemaining: n,
+  unmountOnSuccess: e
+}) => /* @__PURE__ */ r(i, { children: [
+  /* @__PURE__ */ r("div", { className: `${t.graphic} ${t.pad}`, children: [
+    /* @__PURE__ */ s("span", { className: `${t.ring} ${t["ring-success"]}` }),
+    /* @__PURE__ */ s("span", { className: `${t.icon} ${t["icon-success"]}`, children: /* @__PURE__ */ s(f, {}) })
+  ] }),
+  /* @__PURE__ */ s("p", { className: t.subhead, children: "Success" }),
+  e && /* @__PURE__ */ r("p", { className: t.description, children: [
+    "This window will automatically close",
+    " ",
+    n === null ? "soon" : `in ${n}`
+  ] }),
+  !e && /* @__PURE__ */ s("p", { className: t.description, children: "Your transaction was successful." }),
+  !e && a !== void 0 && /* @__PURE__ */ s(l, { fullWidth: !0, onClick: a, children: "Go back" })
+] }), B = ({ reset: a, timeRemaining: n, unmountOnError: e }) => /* @__PURE__ */ r(i, { children: [
+  /* @__PURE__ */ r("div", { className: `${t.graphic} ${t.pad}`, children: [
+    /* @__PURE__ */ s("span", { className: `${t.ring} ${t["ring-error"]}` }),
+    /* @__PURE__ */ s("span", { className: `${t.icon} ${t["icon-error"]}`, children: /* @__PURE__ */ s(F, {}) })
+  ] }),
+  /* @__PURE__ */ s("p", { className: t.subhead, children: "Payment failed" }),
+  e && /* @__PURE__ */ r("p", { className: t.description, children: [
+    "This window will automatically close",
+    " ",
+    n === null ? "soon" : `in ${n}`
+  ] }),
+  !e && /* @__PURE__ */ s("p", { className: t.description, children: "Something went wrong. Please try again." }),
+  !e && a !== void 0 && /* @__PURE__ */ s(l, { fullWidth: !0, onClick: a, children: "Try again" })
+] }), E = {
+  waiting: x,
+  transactionSuccess: P,
+  error: B
+};
+export {
+  q as FundTransactionStatus
+};

package/dist/components/Fund/hooks/useBuyUrl.d.ts

@@ -0,0 +1,14 @@
+import { OnrampError, FundProps, FundState } from '../types';
+export type UseBuyUrlParams = Pick<FundState, "country" | "cryptoCurrency" | "fiatCurrency" | "network" | "subdivision"> & {
+    fetchBuyQuote: FundProps["fetchBuyQuote"];
+    onError?: (e: OnrampError | undefined) => void;
+    destinationAddress?: string;
+};
+export interface FetchBuyUrlParams {
+    paymentMethod: NonNullable<FundState["selectedPaymentMethod"]>["id"];
+    paymentAmount: number;
+}
+export type UseBuyUrlReturn = {
+    fetchBuyUrl: (params: FetchBuyUrlParams) => Promise<string>;
+};
+export declare const useBuyUrl: ({ country, cryptoCurrency, destinationAddress, fetchBuyQuote, fiatCurrency, network, onError: onErrorProp, subdivision, }: UseBuyUrlParams) => UseBuyUrlReturn;

package/dist/components/Fund/hooks/useBuyUrl.js

@@ -0,0 +1,65 @@
+import { useCallback as f, useMemo as y } from "react";
+const R = ({
+  country: a,
+  cryptoCurrency: n,
+  destinationAddress: o,
+  fetchBuyQuote: s,
+  fiatCurrency: t,
+  network: u,
+  onError: c,
+  subdivision: d
+}) => {
+  const l = f(
+    async ({ paymentMethod: m, paymentAmount: p }, U) => {
+      if (isNaN(p) || !o || !m)
+        return "";
+      try {
+        const e = (await s({
+          purchaseCurrency: n,
+          purchaseNetwork: u,
+          paymentCurrency: t,
+          paymentAmount: p.toFixed(),
+          paymentMethod: m.replace("_GUEST", ""),
+          // remove "_GUEST" from the payment method since it is not valid in the Buy Quote API
+          country: a,
+          subdivision: d,
+          destinationAddress: o
+        })).onrampUrl;
+        if (!e) {
+          const _ = {
+            errorType: "handled_error",
+            code: "NO_ONRAMP_URL",
+            debugMessage: "No payment methods found for the selected country and currency. See docs for more information: https://docs.cdp.coinbase.com/onramp/docs/api-configurations"
+          };
+          return U?.(_), c?.(_), "";
+        }
+        return e;
+      } catch (r) {
+        let e;
+        return r instanceof Error ? e = {
+          errorType: "handled_error",
+          code: "BUY_URL_ERROR",
+          debugMessage: r.message
+        } : e = {
+          errorType: "unknown_error",
+          code: "UNKNOWN_BUY_URL_ERROR",
+          debugMessage: JSON.stringify(r)
+        }, U?.(e), c?.(e), "";
+      }
+    },
+    [
+      a,
+      n,
+      o,
+      s,
+      t,
+      u,
+      c,
+      d
+    ]
+  );
+  return y(() => ({ fetchBuyUrl: l }), [l]);
+};
+export {
+  R as useBuyUrl
+};

package/dist/components/Fund/hooks/useEmitLifecycleStatus.d.ts

@@ -0,0 +1,5 @@
+import { FundLifecycleEvents, FundLifecycleStatus } from '../types';
+export type UseEmitLifecycleStatusProps = FundLifecycleEvents & {
+    lifecycleStatus: FundLifecycleStatus;
+};
+export declare const useEmitLifecycleStatus: ({ lifecycleStatus, onError, onSuccess, onStatus, }: UseEmitLifecycleStatusProps) => void;

package/dist/components/Fund/hooks/useEmitLifecycleStatus.js

@@ -0,0 +1,14 @@
+import { useEffect as r } from "react";
+const i = ({
+  lifecycleStatus: a,
+  onError: s,
+  onSuccess: t,
+  onStatus: m
+}) => {
+  r(() => {
+    a.statusName === "error" && s?.(a.statusData), a.statusName === "transactionSuccess" && t?.(a.statusData || void 0), m?.(a);
+  }, [s, m, t, a]);
+};
+export {
+  i as useEmitLifecycleStatus
+};

package/dist/components/Fund/hooks/useExchangeRate.d.ts

@@ -0,0 +1,11 @@
+import { Dispatch } from 'react';
+import { OnrampError, FundAction, FundProps } from '../types';
+type UseExchangeRateParams = Pick<FundProps, "country" | "fetchBuyQuote" | "cryptoCurrency" | "fiatCurrency" | "subdivision" | "network"> & {
+    dispatch: Dispatch<FundAction>;
+    onError?: (e: OnrampError | undefined) => void;
+};
+type UseExchangeRateReturn = {
+    fetchExchangeRate: () => Promise<void>;
+};
+export declare const useExchangeRate: ({ country, cryptoCurrency, fetchBuyQuote, fiatCurrency, network, onError, dispatch, subdivision, }: UseExchangeRateParams) => UseExchangeRateReturn;
+export {};

package/dist/components/Fund/hooks/useExchangeRate.js

@@ -0,0 +1,62 @@
+import { Big as _ } from "big.js";
+import { useCallback as m, useMemo as i } from "react";
+const N = ({
+  country: t,
+  cryptoCurrency: a,
+  fetchBuyQuote: s,
+  fiatCurrency: n,
+  network: p,
+  onError: c,
+  dispatch: o,
+  subdivision: u
+}) => {
+  const E = m(async () => {
+    const C = a.toUpperCase(), R = n.toUpperCase(), d = p.toLowerCase(), g = t.toUpperCase(), y = u?.toUpperCase();
+    o({ type: "FETCH_EXCHANGE_RATE" });
+    try {
+      const r = await s({
+        purchaseCurrency: C,
+        paymentCurrency: R,
+        paymentAmount: "100",
+        paymentMethod: "CARD",
+        country: g,
+        subdivision: y,
+        purchaseNetwork: d,
+        destinationAddress: ""
+      }), e = _(r.purchaseAmount.value).div(r.paymentSubtotal.value).toNumber();
+      o({ type: "SET_EXCHANGE_RATE_SUCCESS", payload: { exchangeRate: e } });
+    } catch (r) {
+      let e;
+      r instanceof Error ? e = {
+        errorType: "handled_error",
+        code: "EXCHANGE_RATE_ERROR",
+        debugMessage: r.message
+      } : e = {
+        errorType: "unknown_error",
+        code: "UNKNOWN_EXCHANGE_RATE_ERROR",
+        debugMessage: JSON.stringify(r)
+      }, c?.(e), o({
+        type: "SET_EXCHANGE_RATE_ERROR",
+        payload: {
+          error: {
+            code: e?.code,
+            message: e.errorType === "handled_error" ? e?.debugMessage : "Something went wrong fetching the exchange rate"
+          }
+        }
+      });
+    }
+  }, [
+    t,
+    a,
+    o,
+    s,
+    n,
+    p,
+    c,
+    u
+  ]);
+  return i(() => ({ fetchExchangeRate: E }), [E]);
+};
+export {
+  N as useExchangeRate
+};

package/dist/components/Fund/hooks/usePaymentMethods.d.ts

@@ -0,0 +1,11 @@
+import { Dispatch } from 'react';
+import { OnrampError, FundAction, FundProps } from '../types';
+type UsePaymentMethodsParams = Pick<FundProps, "country" | "cryptoCurrency" | "fetchBuyOptions" | "fiatCurrency" | "subdivision" | "network"> & {
+    dispatch: Dispatch<FundAction>;
+    onError?: (e: OnrampError | undefined) => void;
+};
+type UsePaymentMethodsReturn = {
+    fetchPaymentMethods: () => Promise<void>;
+};
+export declare const usePaymentMethods: ({ country, cryptoCurrency, fetchBuyOptions, fiatCurrency, network, subdivision, dispatch, onError, }: UsePaymentMethodsParams) => UsePaymentMethodsReturn;
+export {};

package/dist/components/Fund/hooks/usePaymentMethods.js

@@ -0,0 +1,112 @@
+import { useCallback as m, useMemo as N } from "react";
+import { buildPaymentMethods as R } from "../utils/buildPaymentMethods.js";
+const h = ({
+  country: a,
+  cryptoCurrency: c,
+  fetchBuyOptions: p,
+  fiatCurrency: _,
+  network: n,
+  subdivision: u,
+  dispatch: o,
+  onError: t
+}) => {
+  const M = m(async () => {
+    const d = c.toUpperCase(), T = n.toLowerCase(), g = a.toUpperCase(), y = u?.toUpperCase();
+    o({ type: "FETCH_PAYMENT_METHODS" });
+    try {
+      const s = await p({
+        country: g,
+        subdivision: y
+      }), r = s.purchaseCurrencies.find(
+        (e) => e.symbol.toUpperCase() === d
+      );
+      if (!r) {
+        const e = {
+          errorType: "handled_error",
+          code: "INVALID_PURCHASE_CURRENCY",
+          debugMessage: `You cannot purchase ${d} in your region.`
+        };
+        t?.(e), o({
+          type: "SET_PAYMENT_METHODS_ERROR",
+          payload: {
+            error: {
+              code: e?.code,
+              message: e?.debugMessage
+            }
+          }
+        });
+        return;
+      }
+      if (!r.networks.find(
+        (e) => e.name.toLowerCase() === T
+      )) {
+        const e = {
+          errorType: "handled_error",
+          code: "INVALID_NETWORK",
+          debugMessage: `You cannot purchase ${d} on ${n} in your region.`
+        };
+        t?.(e), o({
+          type: "SET_PAYMENT_METHODS_ERROR",
+          payload: {
+            error: {
+              code: e?.code,
+              message: e?.debugMessage
+            }
+          }
+        });
+        return;
+      }
+      const E = R(s, _, a);
+      if (E.length === 0) {
+        const e = {
+          errorType: "handled_error",
+          code: "NO_PAYMENT_METHODS",
+          debugMessage: "No payment methods found for the selected country and currency."
+        };
+        t?.(e), o({
+          type: "SET_PAYMENT_METHODS_ERROR",
+          payload: {
+            error: {
+              code: e?.code,
+              message: e?.debugMessage
+            }
+          }
+        });
+        return;
+      }
+      o({ type: "SET_PAYMENT_METHODS_SUCCESS", payload: { paymentMethods: E } });
+    } catch (s) {
+      let r;
+      s instanceof Error ? r = {
+        errorType: "handled_error",
+        code: "PAYMENT_METHODS_ERROR",
+        debugMessage: s.message
+      } : r = {
+        errorType: "unknown_error",
+        code: "UNKNOWN_PAYMENT_METHODS_ERROR",
+        debugMessage: JSON.stringify(s)
+      }, t?.(r), o({
+        type: "SET_PAYMENT_METHODS_ERROR",
+        payload: {
+          error: {
+            code: r?.code,
+            message: r.errorType === "handled_error" ? r?.debugMessage : "Something went wrong fetching the payment methods"
+          }
+        }
+      });
+    }
+  }, [
+    a,
+    c,
+    o,
+    p,
+    _,
+    n,
+    t,
+    u
+  ]);
+  return N(() => ({ fetchPaymentMethods: M }), [M]);
+};
+export {
+  h as usePaymentMethods
+};

package/dist/components/Fund/hooks/usePopupMonitor.d.ts

@@ -0,0 +1,3 @@
+export declare const usePopupMonitor: (onClose?: () => void) => {
+    startPopupMonitor: (popupWindow: Window) => void;
+};