@coinbase/cdp-react 0.0.24 → 0.0.26

package/README.md

@@ -48,7 +48,7 @@ Next, you need to wrap your application with the `CDPReactProvider`.
 
 Update your main application file (e.g., `main.tsx` or `App.tsx`) to include the provider:
 
-```tsx
+```tsx lines
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { App } from './App'; // Your main App component
@@ -87,7 +87,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 
 Now you can use the components from the library. Let's add the `AuthButton` component to your application. This component handles both sign-in and sign-out functionality.
 
-```tsx
+```tsx lines
 // In your App.tsx or any other component
 import { AuthButton } from '@coinbase/cdp-react/components/AuthButton';
 

package/dist/assets/AmountInput.css

@@ -1 +1 @@
-.AmountInput-module__amount-input___24NlC{--cdp-web-amount-input-text-size: 3.75em;--cdp-web-amount-input-scale: 1;--cdp-web-amount-input-width: 1em;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-weight:600;margin:0;outline:0;padding:0;width:var(--cdp-web-amount-input-width)}.AmountInput-module__input___Af-R1::placeholder{color:var(--cdp-web-colors-page-text-muted)}.AmountInput-module__amount-unit___48d60{font-size:var(--cdp-web-amount-input-text-size);font-weight:600;display:flex;align-items:center;justify-content:flex-start}.AmountInput-module__amount-unit___48d60.AmountInput-module__visible___qmvT0{cursor:text;transform:scale(var(--cdp-web-amount-input-scale));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)}
+.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}

package/dist/assets/AuthButton.css

@@ -1 +1 @@
-.AuthButton-module__loading___JpDqi{border-radius:9999em;height:3.5em;width:7.5em}
+.AuthButton-module__loading___JpDqi{border-radius:9999em;height:3em;width:7.5em}

package/dist/assets/ExchangeAmountInput.css

@@ -1 +1 @@
-.ExchangeAmountInput-module__flex-row___ZKB-Q{display:flex;flex-direction:row;font-size:var(--cdp-web-font-size-base);align-items:center;justify-content:flex-start}.ExchangeAmountInput-module__gap-1___vuNQW{gap:.5em}.ExchangeAmountInput-module__gap-2___4-s-b{gap:.25em}.ExchangeAmountInput-module__swap-button___i9lSz{background-color:transparent;border:none;display:flex;align-items:center;justify-content:center;padding:0;margin:0;cursor:pointer}.ExchangeAmountInput-module__icon___b5JpF{width:auto;height:1.25em}
+.ExchangeAmountInput-module__flex-row___ZKB-Q{display:flex;flex-direction:row;font-size:var(--cdp-web-font-size-base);align-items:center;justify-content:flex-start}.ExchangeAmountInput-module__gap-1___vuNQW{gap:.5em}.ExchangeAmountInput-module__gap-2___4-s-b{gap:.25em}.ExchangeAmountInput-module__swap-button___i9lSz{border:none;display:flex;align-items:center;justify-content:center;padding-left:.25em;padding-right:.25em;margin:0;cursor:pointer}.ExchangeAmountInput-module__icon___b5JpF{width:auto;height:1.25em}.ExchangeAmountInput-module__output-loading-skeleton___gKMEZ{padding-left:2.25em;border-radius:9999em;height:1.75em;width:max-content}.ExchangeAmountInput-module__output-loading-skeleton-placeholder___1-jT-{visibility:hidden}.ExchangeAmountInput-module__output-currency___vlpC1{text-transform:uppercase}

package/dist/assets/Fund.css

@@ -0,0 +1 @@
+.Fund-module__fund___6j-Og{box-sizing:border-box;color:var(--cdp-web-colors-page-text-default);display:flex;flex-direction:column;font-family:var(--cdp-web-font-family-sans);font-size:var(--cdp-web-font-size-base);gap:1em;width:100%;max-width:28.125em;padding:.75em 2em 1em}.Fund-module__fund___6j-Og *{box-sizing:border-box}

package/dist/assets/FundAmountInput.css

@@ -0,0 +1 @@
+.FundAmountInput-module__input-wrapper___6r-sX{padding-bottom:1.5em}.FundAmountInput-module__error___lMqzh{margin-top:-1.25em}

package/dist/assets/FundErrorScreen.css

@@ -0,0 +1 @@
+.FundErrorScreen-module__icon___Mf6ck{width:4em;height:4em;color:var(--cdp-web-colors-fg-warning)}.FundErrorScreen-module__title___8Qv6o{font-size:1.25em;font-weight:600;line-height:1.4;margin:.5em 0 .25em}.FundErrorScreen-module__body___-p-r9{color:var(--cdp-web-colors-fg-muted);line-height:1.5;margin:0 0 .25em}.FundErrorScreen-module__body___-p-r9:last-child{margin-bottom:0}.FundErrorScreen-module__docs-link___mzeH8{white-space:nowrap}.FundErrorScreen-module__keywords___u85Do span[data-part=keyword]{background-color:var(--cdp-web-colors-code-bg-default);border:1px solid var(--cdp-web-colors-code-border-default);border-radius:.25em;color:var(--cdp-web-colors-code-text-default);font-size:.875em;line-height:1;padding:.2em .25em;font-family:var(--cdp-web-font-family-mono)}

package/dist/assets/FundForm.css

@@ -0,0 +1 @@
+.FundForm-module__view___5V1qO,.FundForm-module__form___TIzVJ{display:flex;flex-direction:column;gap:1em}

package/dist/assets/FundModal.css

@@ -0,0 +1 @@
+.FundModal-module__trigger___2IuXj{padding-left:2em;padding-right:2em}.FundModal-module__fund___1AmQa{height:100%;overflow:hidden}.FundModal-module__fund___1AmQa.FundModal-module__no-footer___WKV78{padding-bottom:2em}.FundModal-module__title-buttons___Lctf7{display:flex;justify-content:space-between;align-items:center}.FundModal-module__close-button___jzdFM{transform:translate(.75em);margin-left:auto;margin-right:0}.FundModal-module__close-icon___WoA4a{height:auto;width:1.5em}.FundModal-module__fund-inner___UuOq3{text-align:left}.FundModal-module__fund-inner___UuOq3.FundModal-module__tx-status___fc-3f{text-align:center}.FundModal-module__title___lNsoT{flex-grow:1}.FundModal-module__tx-status___fc-3f .FundModal-module__title___lNsoT{padding-left:3em}.FundModal-module__content___9f3ze{margin-top:1.5em}.FundModal-module__tx-status___fc-3f .FundModal-module__content___9f3ze{margin-top:4em}.FundModal-module__tx-status___fc-3f .FundModal-module__content___9f3ze p:last-child{margin-bottom:4em}.FundModal-module__tx-status___fc-3f .FundModal-module__content___9f3ze button:last-child{margin-top:4em}

package/dist/assets/FundPaymentMethods.css

@@ -0,0 +1 @@
+.FundPaymentMethods-module__select-loading-skeleton___ZuD3n{width:100%;border-radius:.5em;height:3em}.FundPaymentMethods-module__select-item___9VyxH{display:flex;align-items:center;line-height:1.25em;gap:.5em}.FundPaymentMethods-module__select-item-icon___28unQ{display:flex;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0;width:2.25em}.FundPaymentMethods-module__select-item-name___5vLc0{display:block;font-weight:600;font-size:.875em}.FundPaymentMethods-module__select-item-description___C5mTB{color:var(--cdp-web-colors-select-list-item-text-muted);display:block;font-size:.875em}.FundPaymentMethods-module__select-trigger___ypebl .FundPaymentMethods-module__select-item___9VyxH{line-height:1.5em;gap:.75em}.FundPaymentMethods-module__select-trigger___ypebl .FundPaymentMethods-module__select-item-icon___28unQ{width:auto}.FundPaymentMethods-module__select-trigger___ypebl .FundPaymentMethods-module__select-item-name___5vLc0{font-size:1em}.FundPaymentMethods-module__select-trigger___ypebl .FundPaymentMethods-module__select-item-description___C5mTB{display:none}

package/dist/assets/FundPresetAmountInputs.css

@@ -0,0 +1 @@
+.FundPresetAmountInputs-module__preset-amount-inputs___Skjnm{align-items:center;display:flex;gap:.5em;justify-content:center}.FundPresetAmountInputs-module__preset-amount-input___eyNqU{flex-grow:1}

package/dist/assets/FundTitle.css

@@ -0,0 +1 @@
+.FundTitle-module__title___K6czk{font-size:var(--cdp-web-font-size-base);font-weight:600;line-height:1.5;margin:0}

package/dist/assets/FundTransactionStatus.css

@@ -0,0 +1 @@
+.FundTransactionStatus-module__graphic___cam38{display:flex;align-items:center;justify-content:center;position:relative}.FundTransactionStatus-module__status___2zKJu{text-align:center}.FundTransactionStatus-module__pad___-9rGO{padding:.5em}.FundTransactionStatus-module__spinner___94rMk{width:5em;height:5em;color:var(--cdp-web-colors-line-primary)}.FundTransactionStatus-module__icon___0hBQO{color:var(--cdp-web-colors-page-text-default);position:absolute;display:flex;align-items:center;justify-content:center;width:2em;height:2em;top:50%;left:50%;transform:translate(-50%,-50%)}.FundTransactionStatus-module__icon___0hBQO svg{width:100%;height:auto}.FundTransactionStatus-module__icon-success___893VG svg{color:var(--cdp-web-colors-fg-positive)}.FundTransactionStatus-module__icon-error___-aQvD svg{color:var(--cdp-web-colors-fg-negative)}.FundTransactionStatus-module__subhead___0sHIM{font-size:1.25em;line-height:1.2;font-weight:600;margin:1em 0 .25em}.FundTransactionStatus-module__description___W7kK2{font-size:1.125em;color:var(--cdp-web-colors-page-text-muted);line-height:1.5;font-weight:400;margin:0 0 1em}.FundTransactionStatus-module__description___W7kK2:last-child{margin-bottom:0}.FundTransactionStatus-module__ring___1vnCu{border-radius:9999em;border:3px solid transparent;display:block;width:4em;height:4em}.FundTransactionStatus-module__ring-success___Bxudq{border-color:var(--cdp-web-colors-line-positive)}.FundTransactionStatus-module__ring-error___WmTaE{border-color:var(--cdp-web-colors-line-negative)}

package/dist/assets/Input.css

@@ -1 +1 @@
-.Input-module__input___-mK8z{--cdp-web-input-ring-width: 1px;--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-default);box-sizing:border-box;font-family:var(--cdp-web-font-family-sans);font-size:var(--cdp-web-font-size-base);line-height:1.5;padding:1em;border-radius:.5em;border:0;background-color:var(--cdp-web-colors-input-bg-default);box-shadow:0 0 0 var(--cdp-web-input-ring-width) var(--cdp-web-input-ring-color) inset;color:var(--cdp-web-colors-input-text-default);transition:box-shadow .15s ease-in-out;width:100%}.Input-module__input___-mK8z::placeholder{color:var(--cdp-web-colors-input-placeholder-default)}.Input-module__input___-mK8z:focus-visible{outline:none;--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-focus);--cdp-web-input-ring-width: 2px}.Input-module__input___-mK8z[aria-invalid=true]{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-error)}.Input-module__input___-mK8z[data-success=true]{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-success)}
+.Input-module__input___-mK8z{--cdp-web-input-ring-width: 1px;--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-default);box-sizing:border-box;font-family:var(--cdp-web-font-family-sans);font-size:var(--cdp-web-font-size-base);line-height:1.5;padding:1em;border-radius:.5em;border:0;background-color:var(--cdp-web-colors-input-bg-default);box-shadow:0 0 0 var(--cdp-web-input-ring-width) var(--cdp-web-input-ring-color) inset;color:var(--cdp-web-colors-input-text-default);transition:box-shadow .15s ease-in-out;width:100%}.Input-module__size-lg___IYoRG{padding:1em}.Input-module__size-md___8hkn5{padding:.75em}.Input-module__size-sm___cnynF{padding:.5em .75em}.Input-module__size-xs___aK-NH{padding:.25em .75em}.Input-module__input___-mK8z::placeholder{color:var(--cdp-web-colors-input-placeholder-default)}.Input-module__input___-mK8z:focus-visible{outline:none;--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-focus);--cdp-web-input-ring-width: 2px}.Input-module__input___-mK8z[aria-invalid=true]{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-error)}.Input-module__input___-mK8z[data-success=true]{--cdp-web-input-ring-color: var(--cdp-web-colors-input-border-success)}

package/dist/assets/Modal.css

@@ -1 +1 @@
-.Modal-module__modal___MUsZA{--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);box-sizing:border-box;box-shadow:var(--shadow-md);width:100%;max-width:28.125em;min-width:0;background:var(--cdp-web-colors-page-bg-default);border-radius:.5em;outline:1px solid var(--cdp-web-colors-page-border-default);position:relative}.Modal-module__modal___MUsZA[data-state=open]{animation:Modal-module__slide-in___p-A8u .2s ease-out,Modal-module__fade-in___NfUjS .2s ease-out}.Modal-module__modal___MUsZA[data-state=closed]{animation:Modal-module__slide-out___hrRK1 .2s ease-in,Modal-module__fade-out___LpBNV .2s ease-in}.Modal-module__overlay___-RqGQ{background:var(--cdp-web-colors-bg-overlay);box-sizing:border-box;-webkit-backdrop-filter:blur(.5em);backdrop-filter:blur(.5em);display:grid;grid-template-rows:auto 1fr;inset:0;overflow-y:auto;place-items:end center;position:fixed;z-index:1000}.Modal-module__overlay___-RqGQ[data-state=open]{animation:Modal-module__fade-in___NfUjS .2s ease-out}.Modal-module__overlay___-RqGQ[data-state=closed]{animation:Modal-module__fade-out___LpBNV .2s ease-in}.Modal-module__spacer___dIfOA{height:1em}@keyframes Modal-module__fade-in___NfUjS{0%{opacity:0}to{opacity:1}}@keyframes Modal-module__fade-out___LpBNV{0%{opacity:1}to{opacity:0}}@keyframes Modal-module__slide-in___p-A8u{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes Modal-module__slide-out___hrRK1{0%{transform:translateY(0)}to{transform:translateY(100%)}}@media (min-width: 400px){.Modal-module__overlay___-RqGQ{padding:.5rem}}@media (min-width: 450px){.Modal-module__overlay___-RqGQ{place-items:center;padding:1rem;grid-template-rows:1fr}.Modal-module__modal___MUsZA{height:auto}.Modal-module__spacer___dIfOA{display:none}@keyframes Modal-module__slide-in___p-A8u{0%{transform:translateY(10%)}to{transform:translateY(0)}}@keyframes Modal-module__slide-out___hrRK1{0%{transform:translateY(0)}to{transform:translateY(10%)}}}
+.Modal-module__modal___MUsZA{--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);box-sizing:border-box;box-shadow:var(--shadow-md);width:100%;max-width:28.125em;min-width:0;background:var(--cdp-web-colors-page-bg-default);border-radius:.5em;outline:1px solid var(--cdp-web-colors-page-border-default);position:relative}.Modal-module__modal___MUsZA[data-state=open]{animation:Modal-module__slide-in___p-A8u .2s ease-out,Modal-module__fade-in___NfUjS .2s ease-out}.Modal-module__modal___MUsZA[data-state=closed]{animation:Modal-module__slide-out___hrRK1 .2s ease-in,Modal-module__fade-out___LpBNV .2s ease-in}.Modal-module__overlay___-RqGQ{background:var(--cdp-web-colors-bg-overlay);box-sizing:border-box;-webkit-backdrop-filter:blur(.5em);backdrop-filter:blur(.5em);display:grid;grid-template-rows:auto 1fr;inset:0;overflow-y:auto;place-items:end center;position:fixed;z-index:auto}.Modal-module__overlay___-RqGQ[data-state=open]{animation:Modal-module__fade-in___NfUjS .2s ease-out}.Modal-module__overlay___-RqGQ[data-state=closed]{animation:Modal-module__fade-out___LpBNV .2s ease-in}.Modal-module__spacer___dIfOA{height:1em}@keyframes Modal-module__fade-in___NfUjS{0%{opacity:0}to{opacity:1}}@keyframes Modal-module__fade-out___LpBNV{0%{opacity:1}to{opacity:0}}@keyframes Modal-module__slide-in___p-A8u{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes Modal-module__slide-out___hrRK1{0%{transform:translateY(0)}to{transform:translateY(100%)}}@media (min-width: 400px){.Modal-module__overlay___-RqGQ{padding:.5rem}}@media (min-width: 450px){.Modal-module__overlay___-RqGQ{place-items:center;padding:1rem;grid-template-rows:1fr}.Modal-module__modal___MUsZA{height:auto}.Modal-module__spacer___dIfOA{display:none}@keyframes Modal-module__slide-in___p-A8u{0%{transform:translateY(10%)}to{transform:translateY(0)}}@keyframes Modal-module__slide-out___hrRK1{0%{transform:translateY(0)}to{transform:translateY(10%)}}}

package/dist/assets/ThemeProvider.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap";.ThemeProvider-module__wrapper___aXwhZ{width:100%}
+@import"https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap";.ThemeProvider-module__wrapper___aXwhZ{width:100%}

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

@@ -0,0 +1,18 @@
+import { FormHTMLAttributes, ReactNode } from 'react';
+import { FundProps } from './types';
+export declare const VIEWS: readonly ["form", "error", "transaction-status"];
+export type View = (typeof VIEWS)[number];
+export interface FundFormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "children"> {
+    children?: (params: {
+        view: View;
+        Content: ReactNode;
+    }) => ReactNode;
+    openIn?: FundProps["openIn"];
+    submitLabel?: FundProps["submitLabel"];
+    onPopupOpen?: (popup: Window) => void;
+    onPopupClose?: () => void;
+    unmountOnTransactionError?: boolean;
+    unmountOnTransactionSuccess?: boolean;
+    unmount?: () => void;
+}
+export declare const FundForm: ({ className, children, onPopupClose, onPopupOpen, onSubmit, openIn, submitLabel, unmountOnTransactionError, unmountOnTransactionSuccess, unmount, ...props }: FundFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Fund/FundForm.js

@@ -0,0 +1,156 @@
+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 { 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 { usePopupMonitor as it } from "./hooks/usePopupMonitor.js";
+import '../../assets/FundForm.css';const at = "FundForm-module__view___5V1qO", st = "FundForm-module__form___TIzVJ", B = {
+  view: at,
+  form: st
+}, mt = ["form", "error", "transaction-status"], _t = ({
+  className: E = "",
+  children: y,
+  onPopupClose: A,
+  onPopupOpen: M,
+  onSubmit: I,
+  openIn: V,
+  submitLabel: D,
+  unmountOnTransactionError: s = !1,
+  unmountOnTransactionSuccess: m = !1,
+  unmount: u,
+  ...T
+}) => {
+  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({
+      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(() => {
+    t.paymentMethodsError?.message && n("error");
+  }, [t.paymentMethodsError?.message, n]);
+  const { startPopupMonitor: b } = it(L), W = a(
+    (e) => {
+      e && (n("transaction-status"), b(e), M?.(e));
+    },
+    [M, b, n]
+  ), q = a(() => {
+    (t.fiatAmount === void 0 || isNaN(t.fiatAmount)) && isNaN(g.current) || t.fiatAmount === g.current || S(!0);
+  }, [t.fiatAmount]), x = J(() => {
+    if (t.fiatAmount === void 0 || isNaN(t.fiatAmount))
+      return "Enter an amount";
+    if (t.fiatAmount < (t.selectedPaymentMethod?.minAmount ?? 0))
+      return `Minimum amount is ${w(t.selectedPaymentMethod?.minAmount ?? 0, t.fiatCurrency, t.fiatDecimalPlaces, t.locale)}`;
+    if (t.selectedPaymentMethod?.maxAmount !== void 0 && t.fiatAmount > t.selectedPaymentMethod.maxAmount)
+      return `Maximum amount is ${w(t.selectedPaymentMethod?.maxAmount, t.fiatCurrency, t.fiatDecimalPlaces, t.locale)}`;
+  }, [
+    t.fiatAmount,
+    t.fiatCurrency,
+    t.fiatDecimalPlaces,
+    t.locale,
+    t.selectedPaymentMethod?.minAmount,
+    t.selectedPaymentMethod?.maxAmount
+  ]), z = a(async () => {
+    if (!(t.fiatAmount === void 0 || isNaN(t.fiatAmount) || !t.selectedPaymentMethod?.id))
+      return P(
+        {
+          paymentMethod: t.selectedPaymentMethod?.id,
+          paymentAmount: t.fiatAmount
+        },
+        (e) => {
+          K({
+            code: e?.code || "UNKNOWN_BUY_URL_ERROR",
+            message: e?.debugMessage || "Something went wrong fetching the buy url"
+          }), n("error");
+        }
+      );
+  }, [t.fiatAmount, t.selectedPaymentMethod?.id, P, n]), G = async (e) => {
+    if (e.preventDefault(), x) {
+      S(!0), F.current?.focus();
+      return;
+    }
+    I?.(e), _(!0);
+    const c = await z();
+    if (_(!1), c)
+      if (V === "tab")
+        window.open(c, "_blank");
+      else {
+        const i = Z({ url: c, width: 460, height: 720 });
+        W(i);
+      }
+  };
+  return /* @__PURE__ */ r(
+    Q,
+    {
+      animateHeight: !0,
+      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: [
+          /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+            O,
+            {
+              ref: F,
+              error: $ ? x : void 0,
+              onBlur: q
+            }
+          ) }),
+          /* @__PURE__ */ r(rt, {}),
+          /* @__PURE__ */ r(et, {}),
+          /* @__PURE__ */ r(
+            Y,
+            {
+              variant: "primary",
+              type: "submit",
+              isPending: k,
+              pendingLabel: "Getting purchase link",
+              children: D || "Deposit"
+            }
+          )
+        ] })), e === "error" && (i = /* @__PURE__ */ r(tt, { error: t.paymentMethodsError || j })), e === "transaction-status" && (i = /* @__PURE__ */ r(
+          nt,
+          {
+            unmountOnSuccess: m,
+            unmountOnError: s,
+            reset: l,
+            timeRemaining: d
+          }
+        )), /* @__PURE__ */ r("div", { ...c, className: B.view, children: y ? y({ view: e, Content: i }) : i });
+      }
+    }
+  );
+};
+export {
+  _t as FundForm,
+  mt as VIEWS
+};

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { FundContextType, FundProps } from './types';
+export declare const FundProvider: ({ children, fetchBuyOptions, fetchBuyQuote, inputType, onError, onStatus, onSuccess, ...props }: Omit<FundProps, "children"> & {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useFundContext: () => FundContextType;

package/dist/components/Fund/FundProvider.js

@@ -0,0 +1,128 @@
+import { jsx as E } from "react/jsx-runtime";
+import { useEvmAddress as T } from "@coinbase/cdp-hooks";
+import { createContext as R, useContext as U, useEffect as l, useMemo as b } from "react";
+import { useBuyUrl as M } from "./hooks/useBuyUrl.js";
+import { useEmitLifecycleStatus as g } from "./hooks/useEmitLifecycleStatus.js";
+import { useExchangeRate as k } from "./hooks/useExchangeRate.js";
+import { usePaymentMethods as H } from "./hooks/usePaymentMethods.js";
+import { useFundReducer as N } from "./useFundReducer.js";
+const x = {
+  country: "US",
+  cryptoCurrency: "ETH",
+  cryptoDecimalPlaces: 8,
+  fiatCurrency: "USD",
+  fiatDecimalPlaces: 2,
+  network: "base",
+  presetAmountInputs: void 0,
+  selectedInputType: "fiat",
+  transactionStatus: {
+    statusName: "init",
+    statusData: null
+  }
+}, C = R(void 0), z = ({
+  children: c,
+  fetchBuyOptions: h,
+  fetchBuyQuote: f,
+  inputType: S,
+  onError: u,
+  onStatus: D,
+  onSuccess: F,
+  ...I
+}) => {
+  const {
+    country: t,
+    cryptoCurrency: e,
+    cryptoDecimalPlaces: a,
+    fiatCurrency: s,
+    fiatDecimalPlaces: i,
+    locale: d,
+    network: o,
+    presetAmountInputs: m,
+    subdivision: n
+  } = I, { evmAddress: w } = T(), [p, r] = N({
+    ...x,
+    country: t,
+    cryptoCurrency: e,
+    cryptoDecimalPlaces: a,
+    fiatCurrency: s,
+    fiatDecimalPlaces: i,
+    locale: d,
+    network: o,
+    presetAmountInputs: m,
+    subdivision: n,
+    selectedInputType: S || x.selectedInputType
+  });
+  l(() => {
+    r({
+      type: "SYNC_WITH_PROPS",
+      payload: {
+        country: t,
+        cryptoCurrency: e,
+        cryptoDecimalPlaces: a,
+        fiatCurrency: s,
+        fiatDecimalPlaces: i,
+        locale: d,
+        network: o,
+        presetAmountInputs: m,
+        subdivision: n
+      }
+    });
+  }, [
+    t,
+    e,
+    a,
+    s,
+    i,
+    d,
+    o,
+    m,
+    n,
+    r
+  ]), g({
+    lifecycleStatus: p.transactionStatus,
+    onError: u,
+    onStatus: D,
+    onSuccess: F
+  });
+  const { fetchExchangeRate: y } = k({
+    cryptoCurrency: e,
+    country: t,
+    dispatch: r,
+    fetchBuyQuote: f,
+    fiatCurrency: s,
+    network: o,
+    onError: u,
+    subdivision: n
+  }), { fetchPaymentMethods: P } = H({
+    country: t,
+    cryptoCurrency: e,
+    dispatch: r,
+    fetchBuyOptions: h,
+    fiatCurrency: s,
+    network: o,
+    onError: u,
+    subdivision: n
+  }), { fetchBuyUrl: v } = M({
+    cryptoCurrency: e,
+    destinationAddress: w || void 0,
+    fiatCurrency: s,
+    fetchBuyQuote: f,
+    country: t,
+    network: o,
+    subdivision: n
+  }), A = b(() => ({ state: p, dispatch: r, fetchBuyUrl: v }), [p, r, v]);
+  return l(() => {
+    y();
+  }, [y]), l(() => {
+    P();
+  }, [P]), /* @__PURE__ */ E(C.Provider, { value: A, children: c });
+}, G = () => {
+  const c = U(C);
+  if (!c)
+    throw new Error("useFundContext must be used within a FundProvider");
+  return c;
+};
+export {
+  z as FundProvider,
+  G as useFundContext
+};

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

@@ -0,0 +1,5 @@
+import { ElementType, HTMLAttributes } from 'react';
+export interface FundTitleProps extends HTMLAttributes<HTMLDivElement> {
+    as?: ElementType;
+}
+export declare const FundTitle: ({ children, as: Component, className, ...props }: FundTitleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Fund/FundTitle.js

@@ -0,0 +1,17 @@
+import { jsx as i } from "react/jsx-runtime";
+import "react";
+import { useFundContext as n } from "./FundProvider.js";
+import '../../assets/FundTitle.css';const l = "FundTitle-module__title___K6czk", c = {
+  title: l
+}, a = ({
+  children: t,
+  as: e = "h2",
+  className: o = "",
+  ...s
+}) => {
+  const { state: r } = n();
+  return /* @__PURE__ */ i(e, { ...s, className: `${c.title} ${o}`, children: t || `Deposit ${r.cryptoCurrency.toUpperCase()}` });
+};
+export {
+  a as FundTitle
+};

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

@@ -0,0 +1,5 @@
+import { InputHTMLAttributes } from 'react';
+export interface FundAmountInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "min" | "max" | "value"> {
+    error?: string;
+}
+export declare const FundAmountInput: import('react').ForwardRefExoticComponent<FundAmountInputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Fund/components/FundAmountInput.js

@@ -0,0 +1,58 @@
+import { jsxs as I, Fragment as _, jsx as o } from "react/jsx-runtime";
+import { forwardRef as x, useId as g, useCallback as i } from "react";
+import { ExchangeAmountInput as F } from "../../forms/ExchangeAmountInput/index.js";
+import { Error as b } from "../../ui/Error/index.js";
+import { useFundContext as v } from "../FundProvider.js";
+import { createSetFieldAction as a } from "../useFundReducer.js";
+import '../../../assets/FundAmountInput.css';const C = "FundAmountInput-module__error___lMqzh", s = {
+  "input-wrapper": "FundAmountInput-module__input-wrapper___6r-sX",
+  error: C
+}, P = x(
+  ({ "aria-describedby": u, "aria-invalid": p, error: r, ...m }, d) => {
+    const { state: t, dispatch: e } = v(), c = g(), l = i(
+      (n) => {
+        e(a("cryptoAmount", n));
+      },
+      [e]
+    ), y = i(
+      (n) => {
+        e(a("fiatAmount", n));
+      },
+      [e]
+    ), f = i(
+      (n) => {
+        e(a("selectedInputType", n));
+      },
+      [e]
+    ), A = [r ? c : void 0, u].filter(Boolean).join(" "), h = !!(r || p);
+    return /* @__PURE__ */ I(_, { children: [
+      /* @__PURE__ */ o("div", { className: s["input-wrapper"], children: /* @__PURE__ */ o(
+        F,
+        {
+          ...m,
+          ref: d,
+          "aria-describedby": A || void 0,
+          "aria-invalid": h || void 0,
+          cryptoAmount: t.cryptoAmount,
+          cryptoCurrency: t.cryptoCurrency,
+          cryptoDecimalPlaces: t.cryptoDecimalPlaces,
+          exchangeRate: t.exchangeRate,
+          fiatAmount: t.fiatAmount,
+          fiatCurrency: t.fiatCurrency,
+          fiatDecimalPlaces: t.fiatDecimalPlaces,
+          inputType: t.selectedInputType,
+          isExchangeRatePending: t.isExchangeRatePending,
+          min: 0,
+          setCryptoAmount: l,
+          setFiatAmount: y,
+          setInputType: f
+        }
+      ) }),
+      r && /* @__PURE__ */ o(b, { id: c, className: s.error, children: r })
+    ] });
+  }
+);
+P.displayName = "FundAmountInput";
+export {
+  P as FundAmountInput
+};

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

@@ -0,0 +1,6 @@
+import { FundStateError } from '../types';
+interface FundErrorScreenProps {
+    error: FundStateError | null;
+}
+export declare const FundErrorScreen: ({ error }: FundErrorScreenProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

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 {};