@coinbase/cdp-react 0.0.28 → 0.0.30

package/README.md

@@ -8,6 +8,8 @@ the CDP frontend SDK.
  - {@link SignOutButton | `SignOutButton`} - a sign out button
  - {@link AuthButton | `AuthButton`} - the `SignOutButton` when logged in, and the `SignInModal` when logged out
  - {@link SendTransactionButton | `SendTransactionButton`} - a button that signs and sends a transaction
+ - {@link Fund | `Fund`} - the fund flow
+ - {@link FundModal | `FundModal`} - a button that triggers a modal with the fund flow
 
 ## Quickstart
 

package/dist/assets/AmountInput.css

@@ -1 +1 @@
-.AmountInput-module__amount-input___24NlC{box-sizing:border-box;color:var(--cdp-web-colors-page-text-default);font-family:var(--cdp-web-font-family-sans);font-size:var(--cdp-web-font-size-base);line-height:1.2;display:flex;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;position:relative;width:100%}.AmountInput-module__input___Af-R1{appearance:textfield;background-color:transparent;color:var(--cdp-web-colors-page-text-default);border:0;font-size:1em;font-family:var(--cdp-web-font-family-sans);font-weight:600;margin:0;outline:0;padding:0;width:1em}.AmountInput-module__input___Af-R1::placeholder{color:var(--cdp-web-colors-page-text-muted)}.AmountInput-module__amount-unit___48d60{font-size:3.75em;font-weight:600;display:flex;align-items:center;justify-content:flex-start}.AmountInput-module__amount-unit___48d60.AmountInput-module__visible___qmvT0{cursor:text;transform-origin:left center}.AmountInput-module__hidden___cO0sQ{visibility:hidden;position:absolute;pointer-events:none}.AmountInput-module__unit___-zmGz{color:var(--cdp-web-colors-page-text-muted);text-transform:uppercase}
+.AmountInput-module__amount-input___24NlC{box-sizing:border-box;color:var(--cdp-web-colors-page-text-default);font-family:var(--cdp-web-font-family-sans);font-size:var(--cdp-web-font-size-base);line-height:1.2;display:flex;align-items:center;justify-content:flex-start;gap:.25rem;overflow:hidden;position:relative;width:100%}.AmountInput-module__input___Af-R1{appearance:textfield;background-color:transparent;color:var(--cdp-web-colors-page-text-default);border:0;font-size:1em;font-family:var(--cdp-web-font-family-sans);font-weight:500;margin:0;outline:0;padding:0;width:1em}.AmountInput-module__input___Af-R1::placeholder{color:var(--cdp-web-colors-page-text-muted)}.AmountInput-module__amount-unit___48d60{font-size:3.75em;font-weight:500;display:flex;align-items:center;justify-content:flex-start}.AmountInput-module__amount-unit___48d60.AmountInput-module__visible___qmvT0{cursor:text;transform-origin:left center}.AmountInput-module__hidden___cO0sQ{visibility:hidden;position:absolute;pointer-events:none}.AmountInput-module__unit___-zmGz{color:var(--cdp-web-colors-page-text-muted)}

package/dist/assets/Button.css

@@ -1 +1 @@
-.Button-module__btn___Wj6Dr{--cdp-web-button-ring-color: transparent;--cdp-web-button-ring-width: 2px;--cdp-web-button-ring-inset-color: transparent;--cdp-web-button-ring-inset-width: 2px;border-radius:9999em}.Button-module__link-primary___6Zgkh,.Button-module__link-secondary___S0Qdo{padding:0 .25em}.Button-module__primary___WGT--{background-color:var(--cdp-web-colors-cta-primary-bg-default);color:var(--cdp-web-colors-cta-primary-text-default)}.Button-module__primary___WGT--:hover{background-color:var(--cdp-web-colors-cta-primary-bg-hover);color:var(--cdp-web-colors-cta-primary-text-hover)}.Button-module__primary___WGT--:focus{outline:none}.Button-module__primary___WGT--:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-cta-primary-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);outline:none}.Button-module__secondary___Fx0LJ{background-color:var(--cdp-web-colors-cta-secondary-bg-default);color:var(--cdp-web-colors-cta-secondary-text-default)}.Button-module__secondary___Fx0LJ:hover{background-color:var(--cdp-web-colors-cta-secondary-bg-hover);color:var(--cdp-web-colors-cta-secondary-text-hover)}.Button-module__secondary___Fx0LJ:focus{outline:none}.Button-module__secondary___Fx0LJ:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-cta-secondary-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);outline:none}.Button-module__link-primary___6Zgkh,.Button-module__transparent-primary___iwWv5{background-color:transparent;color:var(--cdp-web-colors-link-primary-text-default)}.Button-module__link-primary___6Zgkh:hover,.Button-module__transparent-primary___iwWv5:hover{color:var(--cdp-web-colors-link-primary-text-hover)}.Button-module__link-primary___6Zgkh:focus,.Button-module__transparent-primary___iwWv5:focus{outline:none}.Button-module__link-primary___6Zgkh:focus-visible,.Button-module__transparent-primary___iwWv5:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-primary-text-default);outline:none}.Button-module__link-secondary___S0Qdo,.Button-module__transparent-secondary___GfRXu{background-color:transparent;color:var(--cdp-web-colors-link-secondary-text-default)}.Button-module__link-secondary___S0Qdo:hover,.Button-module__transparent-secondary___GfRXu:hover{color:var(--cdp-web-colors-link-secondary-text-hover)}.Button-module__link-secondary___S0Qdo:focus,.Button-module__transparent-secondary___GfRXu:focus{outline:none}.Button-module__link-secondary___S0Qdo:focus-visible,.Button-module__transparent-secondary___GfRXu:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-secondary-text-default);outline:none}.Button-module__control-btn___9Gkoz{--cdp-web-button-ring-inset-color: var(--cdp-web-colors-input-border-default);--cdp-web-button-ring-inset-width: 1px;background-color:var(--cdp-web-colors-input-bg-default);border-radius:.5em;color:var(--cdp-web-colors-input-text-default);font-weight:400}.Button-module__control-btn___9Gkoz:focus{outline:none}.Button-module__control-btn___9Gkoz:focus-visible{--cdp-web-button-ring-inset-color: var(--cdp-web-colors-input-border-focus);--cdp-web-button-ring-inset-width: 2px;outline:none}
+.Button-module__btn___Wj6Dr{--cdp-web-button-ring-color: transparent;--cdp-web-button-ring-width: 2px;--cdp-web-button-ring-inset-color: transparent;--cdp-web-button-ring-inset-width: 2px;border-radius:9999em}.Button-module__link-primary___6Zgkh,.Button-module__link-secondary___S0Qdo{padding:0 .25em}.Button-module__primary___WGT--{background-color:var(--cdp-web-colors-cta-primary-bg-default);color:var(--cdp-web-colors-cta-primary-text-default)}.Button-module__primary___WGT--:hover{background-color:var(--cdp-web-colors-cta-primary-bg-hover);color:var(--cdp-web-colors-cta-primary-text-hover)}.Button-module__primary___WGT--:focus{outline:none}.Button-module__primary___WGT--:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-cta-primary-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);outline:none}.Button-module__secondary___Fx0LJ{background-color:var(--cdp-web-colors-cta-secondary-bg-default);color:var(--cdp-web-colors-cta-secondary-text-default)}.Button-module__secondary___Fx0LJ:hover{background-color:var(--cdp-web-colors-cta-secondary-bg-hover);color:var(--cdp-web-colors-cta-secondary-text-hover)}.Button-module__secondary___Fx0LJ:focus{outline:none}.Button-module__secondary___Fx0LJ:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-cta-secondary-border-focus);--cdp-web-button-ring-inset-color: var(--cdp-web-colors-page-bg-default);outline:none}.Button-module__link-primary___6Zgkh,.Button-module__transparent-primary___iwWv5{background-color:transparent;color:var(--cdp-web-colors-link-primary-text-default)}.Button-module__link-primary___6Zgkh:hover,.Button-module__transparent-primary___iwWv5:hover{color:var(--cdp-web-colors-link-primary-text-hover)}.Button-module__link-primary___6Zgkh:focus,.Button-module__transparent-primary___iwWv5:focus{outline:none}.Button-module__link-primary___6Zgkh:focus-visible,.Button-module__transparent-primary___iwWv5:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-primary-text-default);outline:none}.Button-module__link-secondary___S0Qdo,.Button-module__transparent-secondary___GfRXu{background-color:transparent;color:var(--cdp-web-colors-link-secondary-text-default)}.Button-module__link-secondary___S0Qdo:hover,.Button-module__transparent-secondary___GfRXu:hover{color:var(--cdp-web-colors-link-secondary-text-hover)}.Button-module__link-secondary___S0Qdo:focus,.Button-module__transparent-secondary___GfRXu:focus{outline:none}.Button-module__link-secondary___S0Qdo:focus-visible,.Button-module__transparent-secondary___GfRXu:focus-visible{--cdp-web-button-ring-color: var(--cdp-web-colors-link-secondary-text-default);outline:none}.Button-module__control-btn___9Gkoz{--cdp-web-button-ring-inset-color: var(--cdp-web-colors-select-trigger-border-default);--cdp-web-button-ring-inset-width: 1px;background-color:var(--cdp-web-colors-select-trigger-bg-default);border-radius:.5em;color:var(--cdp-web-colors-select-trigger-text-default);font-weight:400}.Button-module__control-btn___9Gkoz:focus{outline:none}.Button-module__control-btn___9Gkoz:focus-visible{--cdp-web-button-ring-inset-color: var(--cdp-web-colors-input-border-focus);--cdp-web-button-ring-inset-width: 2px;outline:none}

package/dist/components/Fund/FundForm.js

@@ -1,68 +1,64 @@
 import { jsx as r, jsxs as H } from "react/jsx-runtime";
-import { useRef as f, useState as p, useCallback as a, useEffect as h, useMemo as J } from "react";
+import { useRef as c, useState as h, useCallback as s, useEffect as y, useMemo as J } from "react";
 import { Button as Y } from "../ui/Button/index.js";
 import { SwitchFadeTransition as Q } from "../ui/SwitchFadeTransition/index.js";
 import { useTimer as X } from "../../hooks/useTimer.js";
 import { formatFiat as w } from "../../utils/formatFiat.js";
 import { openPopup as Z } from "../../utils/openPopup.js";
-import { FundAmountInput as O } from "./components/FundAmountInput.js";
-import { FundErrorScreen as tt } from "./components/FundErrorScreen.js";
-import { FundPaymentMethods as et } from "./components/FundPaymentMethods.js";
-import { FundPresetAmountInputs as rt } from "./components/FundPresetAmountInputs.js";
-import { FundTransactionStatus as nt } from "./components/FundTransactionStatus.js";
-import { useFundContext as ot } from "./FundProvider.js";
+import { FundAmountInput as tt } from "./components/FundAmountInput.js";
+import { FundErrorScreen as et } from "./components/FundErrorScreen.js";
+import { FundPaymentMethods as rt } from "./components/FundPaymentMethods.js";
+import { FundPresetAmountInputs as nt } from "./components/FundPresetAmountInputs.js";
+import { FundTransactionStatus as ot } from "./components/FundTransactionStatus.js";
+import { useFundContext as st } from "./FundProvider.js";
 import { usePopupMonitor as it } from "./hooks/usePopupMonitor.js";
-import '../../assets/FundForm.css';const at = "FundForm-module__view___5V1qO", st = "FundForm-module__form___TIzVJ", B = {
+import '../../assets/FundForm.css';const at = "FundForm-module__view___5V1qO", ut = "FundForm-module__form___TIzVJ", B = {
   view: at,
-  form: st
-}, mt = ["form", "error", "transaction-status"], _t = ({
-  className: E = "",
-  children: y,
-  onPopupClose: A,
-  onPopupOpen: M,
+  form: ut
+}, mt = ["form", "error", "transaction-status"], Ft = ({
+  className: T = "",
+  children: A,
+  onPopupClose: N,
+  onPopupOpen: S,
   onSubmit: I,
   openIn: V,
   submitLabel: D,
-  unmountOnTransactionError: s = !1,
-  unmountOnTransactionSuccess: m = !1,
-  unmount: u,
-  ...T
+  unmountOnTransactionError: d = !1,
+  unmountOnTransactionSuccess: p = !1,
+  unmount: a,
+  ...$
 }) => {
-  const { state: t, dispatch: N, fetchBuyUrl: P } = ot(), g = f(t.fiatAmount === void 0 ? NaN : t.fiatAmount), [$, S] = p(!1), [k, _] = p(!1), F = f(null), [j, K] = p(null), v = f(null), C = f(null), o = f(null), {
-    timeRemaining: d,
-    start: R,
-    reset: U
-  } = X(), n = a((e) => {
-    C.current !== e && (C.current = e, v.current?.transition.toggle(e));
-  }, []), l = a(() => {
-    u && (o.current === "transactionSuccess" && m || o.current === "error" && s) ? u() : n("form"), o.current = null, N({
+  const { state: t, dispatch: M, fetchBuyUrl: P } = st(), g = c(t.fiatAmount === void 0 ? NaN : t.fiatAmount), [k, _] = h(!1), [j, F] = h(!1), E = c(null), [K, L] = h(null), b = c(null), U = c(null), u = c(null), l = s(
+    (e) => (e === "transactionSuccess" || e === "transactionSubmitted") && p || e === "error" && d,
+    [p, d]
+  ), {
+    timeRemaining: f,
+    start: v,
+    reset: C
+  } = X(), n = s((e) => {
+    U.current !== e && (U.current = e, b.current?.transition.toggle(e));
+  }, []), m = s(() => {
+    a && l(u.current) ? a() : n("form"), u.current = null, M({
       type: "SET_TRANSACTION_STATUS",
       payload: { transactionStatus: { statusName: "init", statusData: null } }
     });
-  }, [n, N, u, m, s]), L = a(() => {
-    u && (o.current === "transactionSuccess" && m || o.current === "error" && s) ? R(3) : o.current === null && l(), A?.();
-  }, [
-    R,
-    A,
-    l,
-    u,
-    m,
-    s
-  ]);
-  h(() => {
-    d !== null && d <= 0 && (l(), U());
-  }, [d, l, U]), h(() => {
-    (t.transactionStatus.statusName === "transactionSuccess" || t.transactionStatus.statusName === "error") && (o.current = t.transactionStatus.statusName);
-  }, [t.transactionStatus.statusName]), h(() => {
+  }, [n, M, a, l]), O = s(() => {
+    a && l(u.current) ? v(3) : u.current === null && m(), N?.();
+  }, [v, N, m, a, l]);
+  y(() => {
+    f !== null && f <= 0 && (m(), C());
+  }, [f, m, C]), y(() => {
+    (t.transactionStatus.statusName === "transactionSubmitted" || t.transactionStatus.statusName === "transactionSuccess" || t.transactionStatus.statusName === "error") && (u.current = t.transactionStatus.statusName);
+  }, [t.transactionStatus.statusName]), y(() => {
     t.paymentMethodsError?.message && n("error");
   }, [t.paymentMethodsError?.message, n]);
-  const { startPopupMonitor: b } = it(L), W = a(
+  const { startPopupMonitor: R } = it(O), W = s(
     (e) => {
-      e && (n("transaction-status"), b(e), M?.(e));
+      e && (n("transaction-status"), R(e), S?.(e));
     },
-    [M, b, n]
-  ), q = a(() => {
-    (t.fiatAmount === void 0 || isNaN(t.fiatAmount)) && isNaN(g.current) || t.fiatAmount === g.current || S(!0);
+    [S, R, n]
+  ), q = s(() => {
+    (t.fiatAmount === void 0 || isNaN(t.fiatAmount)) && isNaN(g.current) || t.fiatAmount === g.current || _(!0);
   }, [t.fiatAmount]), x = J(() => {
     if (t.fiatAmount === void 0 || isNaN(t.fiatAmount))
       return "Enter an amount";
@@ -77,7 +73,7 @@ import '../../assets/FundForm.css';const at = "FundForm-module__view___5V1qO", s
     t.locale,
     t.selectedPaymentMethod?.minAmount,
     t.selectedPaymentMethod?.maxAmount
-  ]), z = a(async () => {
+  ]), z = s(async () => {
     if (!(t.fiatAmount === void 0 || isNaN(t.fiatAmount) || !t.selectedPaymentMethod?.id))
       return P(
         {
@@ -85,7 +81,7 @@ import '../../assets/FundForm.css';const at = "FundForm-module__view___5V1qO", s
           paymentAmount: t.fiatAmount
         },
         (e) => {
-          K({
+          L({
             code: e?.code || "UNKNOWN_BUY_URL_ERROR",
             message: e?.debugMessage || "Something went wrong fetching the buy url"
           }), n("error");
@@ -93,17 +89,17 @@ import '../../assets/FundForm.css';const at = "FundForm-module__view___5V1qO", s
       );
   }, [t.fiatAmount, t.selectedPaymentMethod?.id, P, n]), G = async (e) => {
     if (e.preventDefault(), x) {
-      S(!0), F.current?.focus();
+      _(!0), E.current?.focus();
       return;
     }
-    I?.(e), _(!0);
-    const c = await z();
-    if (_(!1), c)
+    I?.(e), F(!0);
+    const i = await z();
+    if (F(!1), i)
       if (V === "tab")
-        window.open(c, "_blank");
+        window.open(i, "_blank");
       else {
-        const i = Z({ url: c, width: 460, height: 720 });
-        W(i);
+        const o = Z({ url: i, width: 460, height: 720 });
+        W(o);
       }
   };
   return /* @__PURE__ */ r(
@@ -113,44 +109,44 @@ import '../../assets/FundForm.css';const at = "FundForm-module__view___5V1qO", s
       timeout: 250,
       items: mt,
       initialEntered: !0,
-      transitionRef: v,
-      children: ({ itemKey: e, ...c }) => {
-        let i = null;
-        return e === "form" && (i = /* @__PURE__ */ H("form", { className: `${B.form} ${E}`, onSubmit: G, ...T, children: [
+      transitionRef: b,
+      children: ({ itemKey: e, ...i }) => {
+        let o = null;
+        return e === "form" && (o = /* @__PURE__ */ H("form", { className: `${B.form} ${T}`, onSubmit: G, ...$, children: [
           /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-            O,
+            tt,
             {
-              ref: F,
-              error: $ ? x : void 0,
+              ref: E,
+              error: k ? x : void 0,
               onBlur: q
             }
           ) }),
+          /* @__PURE__ */ r(nt, {}),
           /* @__PURE__ */ r(rt, {}),
-          /* @__PURE__ */ r(et, {}),
           /* @__PURE__ */ r(
             Y,
             {
               variant: "primary",
               type: "submit",
-              isPending: k,
+              isPending: j,
               pendingLabel: "Getting purchase link",
               children: D || "Deposit"
             }
           )
-        ] })), e === "error" && (i = /* @__PURE__ */ r(tt, { error: t.paymentMethodsError || j })), e === "transaction-status" && (i = /* @__PURE__ */ r(
-          nt,
+        ] })), e === "error" && (o = /* @__PURE__ */ r(et, { error: t.paymentMethodsError || K })), e === "transaction-status" && (o = /* @__PURE__ */ r(
+          ot,
           {
-            unmountOnSuccess: m,
-            unmountOnError: s,
-            reset: l,
-            timeRemaining: d
+            unmountOnSuccess: p,
+            unmountOnError: d,
+            reset: m,
+            timeRemaining: f
           }
-        )), /* @__PURE__ */ r("div", { ...c, className: B.view, children: y ? y({ view: e, Content: i }) : i });
+        )), /* @__PURE__ */ r("div", { ...i, className: B.view, children: A ? A({ view: e, Content: o }) : o });
       }
     }
   );
 };
 export {
-  _t as FundForm,
+  Ft as FundForm,
   mt as VIEWS
 };

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

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

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

@@ -1,37 +1,37 @@
-import { useCallback as f, useMemo as y } from "react";
-const R = ({
-  country: a,
-  cryptoCurrency: n,
+import { useCallback as y, useMemo as _ } from "react";
+const N = ({
+  country: t,
+  cryptoCurrency: a,
   destinationAddress: o,
-  fetchBuyQuote: s,
-  fiatCurrency: t,
+  fetchBuyQuote: c,
+  fiatCurrency: n,
   network: u,
-  onError: c,
-  subdivision: d
+  onError: s,
+  subdivision: p
 }) => {
-  const l = f(
-    async ({ paymentMethod: m, paymentAmount: p }, U) => {
-      if (isNaN(p) || !o || !m)
+  const U = y(
+    async ({ paymentMethod: d, paymentAmount: i }, l) => {
+      if (isNaN(i) || !o || !d)
         return "";
       try {
-        const e = (await s({
-          purchaseCurrency: n,
-          purchaseNetwork: u,
-          paymentCurrency: t,
-          paymentAmount: p.toFixed(),
-          paymentMethod: m.replace("_GUEST", ""),
+        const e = (await c({
+          purchaseCurrency: a.toUpperCase(),
+          purchaseNetwork: u.toLowerCase(),
+          paymentCurrency: n.toUpperCase(),
+          paymentAmount: i.toFixed(),
+          paymentMethod: d.replace("_GUEST", ""),
           // remove "_GUEST" from the payment method since it is not valid in the Buy Quote API
-          country: a,
-          subdivision: d,
+          country: t.toUpperCase(),
+          subdivision: p?.toUpperCase(),
           destinationAddress: o
         })).onrampUrl;
         if (!e) {
-          const _ = {
+          const m = {
             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 l?.(m), s?.(m), "";
         }
         return e;
       } catch (r) {
@@ -44,22 +44,22 @@ const R = ({
           errorType: "unknown_error",
           code: "UNKNOWN_BUY_URL_ERROR",
           debugMessage: JSON.stringify(r)
-        }, U?.(e), c?.(e), "";
+        }, l?.(e), s?.(e), "";
       }
     },
     [
+      t,
       a,
-      n,
       o,
-      s,
-      t,
-      u,
       c,
-      d
+      n,
+      u,
+      s,
+      p
     ]
   );
-  return y(() => ({ fetchBuyUrl: l }), [l]);
+  return _(() => ({ fetchBuyUrl: U }), [U]);
 };
 export {
-  R as useBuyUrl
+  N as useBuyUrl
 };

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

@@ -1,53 +1,58 @@
-import { useCallback as n, useEffect as u } from "react";
-import { useFundContext as c } from "../FundProvider.js";
-import { setupOnrampEventListeners as i } from "../utils/setupOnrampEventListeners.js";
-const e = (t) => ({
+import { useCallback as n, useEffect as o } from "react";
+import { useFundContext as i } from "../FundProvider.js";
+import { setupOnrampEventListeners as c } from "../utils/setupOnrampEventListeners.js";
+const s = (t) => ({
   type: "SET_TRANSACTION_STATUS",
   payload: {
     transactionStatus: t
   }
 }), S = () => {
-  const { dispatch: t } = c(), a = n(
-    (s) => {
-      s.eventName === "transition_view" ? t(
-        e({
+  const { dispatch: t } = i(), a = n(
+    (e) => {
+      e.eventName === "transition_view" ? e.pageRoute.endsWith("/order-submitted") ? t(
+        s({
+          statusName: "transactionSubmitted",
+          statusData: null
+        })
+      ) : t(
+        s({
           statusName: "transactionPending",
           statusData: null
         })
-      ) : s.eventName === "error" && t(
-        e({
+      ) : e.eventName === "error" && t(
+        s({
           statusName: "error",
-          statusData: s.error
+          statusData: e.error
         })
       );
     },
     [t]
   ), r = n(
-    (s) => {
+    (e) => {
       t(
-        e({
+        s({
           statusName: "transactionSuccess",
-          statusData: s || null
+          statusData: e || null
         })
       );
     },
     [t]
-  ), o = n(() => {
+  ), u = n(() => {
     t(
-      e({
+      s({
         statusName: "exit",
         statusData: null
       })
     );
   }, [t]);
-  u(() => {
-    const s = i({
+  o(() => {
+    const e = c({
       onEvent: a,
-      onExit: o,
+      onExit: u,
       onSuccess: r
     });
     return () => {
-      s();
+      e();
     };
   }, []);
 };

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

@@ -7,4 +7,4 @@ import { FetchBuyUrlParams } from './hooks/useBuyUrl';
 import { CamelToSnakeCase, CamelToSnakeCaseNested, FundAction, FetchBuyOptions, FetchBuyQuote, FundPaymentMethod, FundPresetAmountInputs, FundProps, FundState, FundStateError, FundStateProps, FundContextType, FundLifecycleStatus, OnrampAmount, OnrampBuyQuoteResponse, OnrampBuyOptionsResponse, OnrampBuyOptionsSnakeCaseResponse, OnrampBuyQuoteSnakeCaseResponse, OnrampError, OnrampNetwork, OnrampPaymentCurrency, OnrampPaymentMethodLimit, OnrampPurchaseCurrency, OnrampSuccessEventData } from './types';
 declare const Fund: ({ className, children, openIn, submitLabel, title, ...props }: FundProps) => import("react/jsx-runtime").JSX.Element;
 declare const FundFooter: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-export { Fund as unstable_Fund, FundFooter as unstable_FundFooter, FundForm as unstable_FundForm, FundTitle as unstable_FundTitle, useFundContext as unstable_useFundContext, type CamelToSnakeCase as unstable_CamelToSnakeCase, type CamelToSnakeCaseNested as unstable_CamelToSnakeCaseNested, type FundAction as unstable_FundAction, type FetchBuyOptions as unstable_FetchBuyOptions, type FetchBuyQuote as unstable_FetchBuyQuote, type FetchBuyUrlParams as unstable_FetchBuyUrlParams, type FundContextType as unstable_FundContextType, type FundFormProps as unstable_FundFormProps, type FundLifecycleStatus as unstable_FundLifecycleStatus, type FundPaymentMethod as unstable_FundPaymentMethod, type FundPresetAmountInputs as unstable_FundPresetAmountInputs, type FundProps as unstable_FundProps, type FundState as unstable_FundState, type FundStateError as unstable_FundStateError, type FundStateProps as unstable_FundStateProps, type FundTitleProps as unstable_FundTitleProps, type InputType as unstable_InputType, type OnrampAmount as unstable_OnrampAmount, type OnrampBuyQuoteResponse as unstable_OnrampBuyQuoteResponse, type OnrampBuyOptionsResponse as unstable_OnrampBuyOptionsResponse, type OnrampBuyOptionsSnakeCaseResponse as unstable_OnrampBuyOptionsSnakeCaseResponse, type OnrampBuyQuoteSnakeCaseResponse as unstable_OnrampBuyQuoteSnakeCaseResponse, type OnrampError as unstable_OnrampError, type OnrampNetwork as unstable_OnrampNetwork, type OnrampPaymentCurrency as unstable_OnrampPaymentCurrency, type OnrampPaymentMethodLimit as unstable_OnrampPaymentMethodLimit, type OnrampPurchaseCurrency as unstable_OnrampPurchaseCurrency, type OnrampSuccessEventData as unstable_OnrampSuccessEventData, };
+export { Fund, FundFooter, FundForm, FundTitle, useFundContext, type CamelToSnakeCase, type CamelToSnakeCaseNested, type FundAction, type FetchBuyOptions, type FetchBuyQuote, type FetchBuyUrlParams, type FundContextType, type FundFormProps, type FundLifecycleStatus, type FundPaymentMethod, type FundPresetAmountInputs, type FundProps, type FundState, type FundStateError, type FundStateProps, type FundTitleProps, type InputType, type OnrampAmount, type OnrampBuyQuoteResponse, type OnrampBuyOptionsResponse, type OnrampBuyOptionsSnakeCaseResponse, type OnrampBuyQuoteSnakeCaseResponse, type OnrampError, type OnrampNetwork, type OnrampPaymentCurrency, type OnrampPaymentMethodLimit, type OnrampPurchaseCurrency, type OnrampSuccessEventData, };