@coinbase/cdp-react 0.0.24 → 0.0.26

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

@@ -0,0 +1,218 @@
+import { Dispatch, ReactNode } from 'react';
+import { InputType } from '../forms/ExchangeAmountInput/types';
+import { FetchBuyUrlParams } from './hooks/useBuyUrl';
+export type CamelToSnakeCase<T extends string> = T extends `${infer A}${infer B}` ? B extends Uncapitalize<B> ? `${A}${CamelToSnakeCase<B>}` : `${Uncapitalize<A>}_${CamelToSnakeCase<Uncapitalize<B>>}` : T;
+export type CamelToSnakeCaseNested<T> = T extends readonly any[] ? T : T extends object ? {
+    [K in keyof T as K extends string ? CamelToSnakeCase<K> : K]: CamelToSnakeCaseNested<T[K]>;
+} : T;
+export type FundPresetAmountInputs = readonly [number, number, number];
+export interface FundPaymentMethod {
+    id: string;
+    name: string;
+    description: string;
+    icon: ReactNode;
+    minAmount?: number;
+    maxAmount?: number;
+}
+export type OnrampOpenEvent = {
+    eventName: "open";
+    widgetName: string;
+};
+export type OnrampTransitionViewEvent = {
+    eventName: "transition_view";
+    pageRoute: string;
+};
+export type OnrampPublicErrorEvent = {
+    eventName: "error";
+    error: OnrampError;
+};
+export type OnrampExitEvent = {
+    eventName: "exit";
+    error?: OnrampError;
+};
+export type OnrampSuccessEvent = {
+    eventName: "success";
+    data?: OnrampSuccessEventData;
+};
+export type OnrampSuccessEventData = {
+    assetImageUrl: string;
+    assetName: string;
+    assetSymbol: string;
+    chainId: string;
+};
+export type RequestOpenUrlEvent = {
+    eventName: "request_open_url";
+    url: string;
+};
+export type EventMetadata = OnrampOpenEvent | OnrampTransitionViewEvent | OnrampPublicErrorEvent | OnrampExitEvent | OnrampSuccessEvent | RequestOpenUrlEvent;
+export interface OnrampError {
+    errorType: "internal_error" | "handled_error" | "network_error" | "unknown_error";
+    code?: string;
+    debugMessage?: string;
+}
+export type FundLifecycleStatus = {
+    statusName: "init";
+    statusData: null;
+} | {
+    statusName: "exit";
+    statusData: null;
+} | {
+    statusName: "error";
+    statusData: OnrampError;
+} | {
+    statusName: "transactionSuccess";
+    statusData: OnrampSuccessEventData | null;
+} | {
+    statusName: "transactionPending";
+    statusData: null;
+};
+export type FundLifecycleEvents = {
+    onError?: (e: OnrampError | undefined) => void;
+    onStatus?: (lifecycleStatus: FundLifecycleStatus) => void;
+    onSuccess?: (result?: OnrampSuccessEventData) => void;
+};
+export type FundStateError = {
+    code: string;
+    message: string;
+};
+export interface FundState {
+    country: string;
+    cryptoAmount?: number;
+    cryptoCurrency: string;
+    cryptoDecimalPlaces?: number;
+    exchangeRate?: number;
+    exchangeRateError?: FundStateError | null;
+    isExchangeRatePending?: boolean;
+    isPaymentMethodsPending?: boolean;
+    fiatAmount?: number;
+    fiatCurrency: string;
+    fiatDecimalPlaces?: number;
+    locale?: string;
+    network: string;
+    paymentMethods?: FundPaymentMethod[];
+    paymentMethodsError?: FundStateError | null;
+    presetAmountInputs?: FundPresetAmountInputs;
+    selectedInputType: InputType;
+    selectedPaymentMethod?: FundPaymentMethod;
+    subdivision?: string;
+    transactionStatus: FundLifecycleStatus;
+}
+export type FundStateProps = Pick<FundState, "country" | "cryptoCurrency" | "cryptoDecimalPlaces" | "fiatCurrency" | "fiatDecimalPlaces" | "locale" | "network" | "presetAmountInputs" | "subdivision">;
+export interface FundProps extends FundStateProps, FundLifecycleEvents {
+    children?: ReactNode | ((state: FundState) => ReactNode);
+    className?: string;
+    fetchBuyOptions: FetchBuyOptions;
+    fetchBuyQuote: FetchBuyQuote;
+    inputType?: InputType;
+    openIn?: "popup" | "tab";
+    submitLabel?: ReactNode;
+    title?: ReactNode;
+}
+export type FundAction = {
+    type: "SET_FIELD";
+    payload: {
+        [K in keyof FundState]: {
+            field: K;
+            value: FundState[K];
+        };
+    }[keyof FundState];
+} | {
+    type: "SET_AMOUNTS";
+    payload: {
+        cryptoAmount: number;
+        fiatAmount: number;
+    };
+} | {
+    type: "FETCH_EXCHANGE_RATE";
+} | {
+    type: "SET_EXCHANGE_RATE_SUCCESS";
+    payload: {
+        exchangeRate: number | undefined;
+    };
+} | {
+    type: "SET_EXCHANGE_RATE_ERROR";
+    payload: {
+        error: Partial<NonNullable<FundState["exchangeRateError"]>>;
+    };
+} | {
+    type: "FETCH_PAYMENT_METHODS";
+} | {
+    type: "SET_PAYMENT_METHODS_SUCCESS";
+    payload: {
+        paymentMethods: FundPaymentMethod[];
+    };
+} | {
+    type: "SET_PAYMENT_METHODS_ERROR";
+    payload: {
+        error: Partial<NonNullable<FundState["paymentMethodsError"]>>;
+    };
+} | {
+    type: "SET_TRANSACTION_STATUS";
+    payload: {
+        transactionStatus: FundLifecycleStatus;
+    };
+} | {
+    type: "SYNC_WITH_PROPS";
+    payload: FundStateProps;
+};
+export type FundContextType = {
+    state: FundState;
+    dispatch: Dispatch<FundAction>;
+    fetchBuyUrl: (params: FetchBuyUrlParams, onError?: (e: OnrampError | undefined) => void) => Promise<string>;
+};
+export type OnrampPaymentMethodLimit = {
+    id: string;
+    min: string;
+    max: string;
+};
+export type OnrampPaymentCurrency = {
+    id: string;
+    limits: OnrampPaymentMethodLimit[];
+};
+export type OnrampNetwork = {
+    name: string;
+    displayName: string;
+    chainId: string;
+    contractAddress: string;
+    iconUrl: string;
+};
+export type OnrampPurchaseCurrency = {
+    id: string;
+    name: string;
+    symbol: string;
+    iconUrl: string;
+    networks: OnrampNetwork[];
+};
+export type OnrampAmount = {
+    value: string;
+    currency: string;
+};
+export type OnrampBuyOptionsResponse = {
+    paymentCurrencies: OnrampPaymentCurrency[];
+    purchaseCurrencies: OnrampPurchaseCurrency[];
+};
+export type OnrampBuyOptionsSnakeCaseResponse = CamelToSnakeCaseNested<OnrampBuyOptionsResponse>;
+export type OnrampBuyQuoteResponse = {
+    paymentTotal: OnrampAmount;
+    paymentSubtotal: OnrampAmount;
+    purchaseAmount: OnrampAmount;
+    coinbaseFee: OnrampAmount;
+    networkFee: OnrampAmount;
+    quoteId: string;
+    onrampUrl?: string;
+};
+export type OnrampBuyQuoteSnakeCaseResponse = CamelToSnakeCaseNested<OnrampBuyQuoteResponse>;
+export type FetchBuyOptions = (params: {
+    country: string;
+    subdivision?: string;
+}) => Promise<OnrampBuyOptionsResponse>;
+export type FetchBuyQuote = (params: {
+    destinationAddress: string;
+    purchaseCurrency: string;
+    purchaseNetwork: string;
+    paymentAmount: string;
+    paymentCurrency: string;
+    paymentMethod: string;
+    country: string;
+    subdivision?: string;
+}) => Promise<OnrampBuyQuoteResponse>;

package/dist/components/Fund/types.js

@@ -0,0 +1 @@
+import "react";

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

@@ -0,0 +1,9 @@
+import { FundAction, FundState } from './types';
+export declare const useFundReducer: (initialState: FundState) => [FundState, import('react').ActionDispatch<[action: FundAction]>];
+export declare const createSetFieldAction: <K extends keyof FundState>(field: K, value: FundState[K]) => {
+    type: "SET_FIELD";
+    payload: {
+        field: K;
+        value: FundState[K];
+    };
+};

package/dist/components/Fund/useFundReducer.js

@@ -0,0 +1,104 @@
+import { useReducer as t } from "react";
+const n = (a, e) => {
+  if (e.statusName === "init" || e.statusName === "exit" || e.statusName === "transactionPending")
+    return e;
+  if (e.statusName === "error" || e.statusName === "transactionSuccess") {
+    if (a.statusName === "error")
+      return e;
+    if (a.statusName === "transactionSuccess" && e.statusName === "transactionSuccess" && a.statusData)
+      return {
+        ...e,
+        statusData: {
+          ...a.statusData,
+          ...e.statusData
+        }
+      };
+  }
+  return e;
+};
+function s(a, e) {
+  const { type: r } = e;
+  switch (r) {
+    case "SET_AMOUNTS":
+      return {
+        ...a,
+        cryptoAmount: e.payload.cryptoAmount,
+        fiatAmount: e.payload.fiatAmount
+      };
+    case "SET_FIELD":
+      return e.payload ? { ...a, [e.payload.field]: e.payload.value } : a;
+    case "FETCH_EXCHANGE_RATE":
+      return {
+        ...a,
+        isExchangeRatePending: !0,
+        exchangeRateError: null
+      };
+    case "SET_EXCHANGE_RATE_SUCCESS":
+      return {
+        ...a,
+        isExchangeRatePending: !1,
+        exchangeRate: e.payload.exchangeRate,
+        exchangeRateError: null
+      };
+    case "SET_EXCHANGE_RATE_ERROR":
+      return {
+        ...a,
+        exchangeRate: void 0,
+        isExchangeRatePending: !1,
+        exchangeRateError: {
+          code: e.payload.error.code || "UNKNOWN_EXCHANGE_RATE_ERROR",
+          message: e.payload.error.message || "Something went wrong fetching exchange rate"
+        }
+      };
+    case "FETCH_PAYMENT_METHODS":
+      return {
+        ...a,
+        isPaymentMethodsPending: !0,
+        paymentMethodsError: null
+      };
+    case "SET_PAYMENT_METHODS_SUCCESS":
+      return {
+        ...a,
+        isPaymentMethodsPending: !1,
+        paymentMethods: e.payload.paymentMethods,
+        selectedPaymentMethod: e.payload.paymentMethods[0],
+        paymentMethodsError: null
+      };
+    case "SET_PAYMENT_METHODS_ERROR":
+      return {
+        ...a,
+        paymentMethods: void 0,
+        isPaymentMethodsPending: !1,
+        paymentMethodsError: {
+          code: e.payload.error.code || "UNKNOWN_PAYMENT_METHODS_ERROR",
+          message: e.payload.error.message || "Something went wrong fetching payment methods"
+        }
+      };
+    case "SET_TRANSACTION_STATUS":
+      return {
+        ...a,
+        transactionStatus: n(
+          a.transactionStatus,
+          e.payload.transactionStatus
+        )
+      };
+    case "SYNC_WITH_PROPS":
+      return {
+        ...a,
+        ...e.payload
+      };
+    default:
+      throw new Error("Unknown action type");
+  }
+}
+const d = (a) => t(s, a), E = (a, e) => ({
+  type: "SET_FIELD",
+  payload: {
+    field: a,
+    value: e
+  }
+});
+export {
+  E as createSetFieldAction,
+  d as useFundReducer
+};

package/dist/components/Fund/utils/buildPaymentMethods.d.ts

@@ -0,0 +1,5 @@
+import { OnrampBuyOptionsResponse, FundPaymentMethod } from '../types';
+export declare const buildCoinbasePaymentMethodDescription: (paymentMethodLimits: Array<{
+    id: string;
+}>) => string;
+export declare const buildPaymentMethods: (paymentOptions: OnrampBuyOptionsResponse, currency: string, country: string) => FundPaymentMethod[];

package/dist/components/Fund/utils/buildPaymentMethods.js

@@ -0,0 +1,57 @@
+import { jsx as r } from "react/jsx-runtime";
+import { IconAppleLogo as u } from "../../../icons/IconAppleLogo.js";
+import { IconCoinbaseMark as A } from "../../../icons/IconCoinbaseMark.js";
+import { IconCreditCard as C } from "../../../icons/IconCreditCard.js";
+const s = 2, c = 500, M = (n) => [
+  // Check API-provided methods
+  n.some((e) => e.id === "ACH_BANK_ACCOUNT") && "ACH",
+  n.some((e) => e.id === "CARD") && "debit",
+  n.some((e) => e.id === "FIAT_WALLET") && "cash",
+  // Always include these methods
+  "crypto balance"
+].filter(Boolean).join(", "), b = ({ limits: n }) => {
+  const o = n.flatMap((t) => t.min ? [Number(t.min)] : []), e = n.flatMap((t) => t.max ? [Number(t.max)] : []);
+  return {
+    id: n[0].id,
+    // use the first limit id as the coinbase payment method id to avoid passing in an invalid option
+    name: "Coinbase",
+    description: M(n),
+    icon: /* @__PURE__ */ r(A, {}),
+    minAmount: o.length > 0 ? Math.min(...o) : s,
+    maxAmount: e.length > 0 ? Math.max(...e) : c
+  };
+}, l = (n) => [
+  {
+    id: "APPLE_PAY_GUEST",
+    name: "Apple Pay",
+    icon: /* @__PURE__ */ r(u, {})
+  },
+  {
+    id: "CARD_GUEST",
+    name: "Debit card",
+    icon: /* @__PURE__ */ r(C, {})
+  }
+].map((e) => {
+  const t = n.limits.find(
+    (a) => a.id === e.id.replace("_GUEST", "")
+  );
+  return {
+    ...e,
+    description: "Up to $500/week. No sign up required.",
+    minAmount: Number(t?.min) || s,
+    maxAmount: Number(t?.max) || c
+  };
+}), N = (n, o, e) => {
+  const t = o.toUpperCase(), a = e.toUpperCase(), i = n.paymentCurrencies.find(
+    (p) => p.id.toUpperCase() === t
+  );
+  if (!i)
+    return [];
+  const d = b(i);
+  let m = [];
+  return a === "US" && t === "USD" && (m = l(i)), [d, ...m];
+};
+export {
+  M as buildCoinbasePaymentMethodDescription,
+  N as buildPaymentMethods
+};

package/dist/components/Fund/utils/setupOnrampEventListeners.d.ts

@@ -0,0 +1,9 @@
+import { EventMetadata, OnrampError, OnrampSuccessEventData } from '../types';
+type SetupOnrampEventListenersParams = {
+    host?: string;
+    onEvent?: (event: EventMetadata) => void;
+    onExit?: (error?: OnrampError) => void;
+    onSuccess?: (data?: OnrampSuccessEventData) => void;
+};
+export declare function setupOnrampEventListeners({ host, onEvent, onExit, onSuccess, }: SetupOnrampEventListenersParams): () => void;
+export {};

package/dist/components/Fund/utils/setupOnrampEventListeners.js

@@ -0,0 +1,19 @@
+import "react";
+import { subscribeToWindowMessage as o, DEFAULT_ONRAMP_URL as a } from "./subscribeToWindowMessage.js";
+function b({
+  host: s = a,
+  onEvent: t,
+  onExit: n,
+  onSuccess: r
+}) {
+  return o({
+    allowedOrigin: s,
+    onMessage: (i) => {
+      const e = i;
+      e.eventName === "success" && r?.(e.data), e.eventName === "exit" && n?.(e.error), t?.(e);
+    }
+  });
+}
+export {
+  b as setupOnrampEventListeners
+};

package/dist/components/Fund/utils/subscribeToWindowMessage.d.ts

@@ -0,0 +1,14 @@
+export type JsonObject = {
+    [Key in string]?: JsonValue;
+};
+export type JsonArray = JsonValue[];
+export type JsonPrimitive = string | number | boolean | null;
+export type JsonValue = JsonPrimitive | JsonObject | JsonArray;
+export declare const DEFAULT_ONRAMP_URL = "https://pay.coinbase.com";
+type MessageData = JsonObject;
+export declare function subscribeToWindowMessage({ onMessage, allowedOrigin, onValidateOrigin, }: {
+    onMessage: (data?: MessageData) => void;
+    allowedOrigin: string;
+    onValidateOrigin?: (origin: string) => Promise<boolean>;
+}): () => void;
+export {};

package/dist/components/Fund/utils/subscribeToWindowMessage.js

@@ -0,0 +1,24 @@
+const a = "https://pay.coinbase.com";
+function d({
+  onMessage: s,
+  allowedOrigin: e = a,
+  onValidateOrigin: n = () => Promise.resolve(!0)
+}) {
+  const o = (i) => {
+    if (!c({ event: i, allowedOrigin: e }))
+      return;
+    const { eventName: t, data: r } = JSON.parse(i.data);
+    t === "event" && (async () => await n(i.origin) && s(r))();
+  };
+  return window.addEventListener("message", o), () => {
+    window.removeEventListener("message", o);
+  };
+}
+const c = ({
+  event: s,
+  allowedOrigin: e
+}) => !e || s.origin === e;
+export {
+  a as DEFAULT_ONRAMP_URL,
+  d as subscribeToWindowMessage
+};

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { unstable_FundProps as FundProps } from '../Fund';
+interface FundModalProps extends FundProps {
+    children?: ReactNode;
+    open?: boolean;
+    setIsOpen?: (value: boolean) => void;
+}
+declare const FundModal: ({ children, open, setIsOpen, openIn, submitLabel, title, ...fundProps }: FundModalProps) => import("react/jsx-runtime").JSX.Element;
+export { FundModal as unstable_FundModal, type FundModalProps as unstable_FundModalProps };

package/dist/components/FundModal/index.js

@@ -0,0 +1,92 @@
+import { jsxs as t, jsx as o, Fragment as x } from "react/jsx-runtime";
+import { useId as O, useState as v, useCallback as h } from "react";
+import { useAppConfig as T } from "../CDPReactProvider/index.js";
+import { unstable_Fund as j, unstable_FundFooter as I } from "../Fund/index.js";
+import { Button as p } from "../ui/Button/index.js";
+import { Modal as $, ModalTrigger as z, ModalContent as A, ModalTitle as S, ModalClose as k } from "../ui/Modal/index.js";
+import { VisuallyHidden as M } from "../ui/VisuallyHidden/index.js";
+import { IconXMark as U } from "../../icons/IconXMark.js";
+import { FundTitle as a } from "../Fund/FundTitle.js";
+import { FundForm as V } from "../Fund/FundForm.js";
+import '../../assets/FundModal.css';const W = "FundModal-module__trigger___2IuXj", X = "FundModal-module__fund___1AmQa", q = "FundModal-module__title___lNsoT", B = "FundModal-module__content___9f3ze", n = {
+  trigger: W,
+  fund: X,
+  "no-footer": "FundModal-module__no-footer___WKV78",
+  "title-buttons": "FundModal-module__title-buttons___Lctf7",
+  "close-button": "FundModal-module__close-button___jzdFM",
+  "close-icon": "FundModal-module__close-icon___WoA4a",
+  "fund-inner": "FundModal-module__fund-inner___UuOq3",
+  "tx-status": "FundModal-module__tx-status___fc-3f",
+  title: q,
+  content: B
+}, Y = ({
+  children: b,
+  open: i,
+  setIsOpen: c,
+  openIn: u,
+  submitLabel: _,
+  title: d,
+  ...m
+}) => {
+  const { showCoinbaseFooter: f } = T(), l = O(), r = i !== void 0, [g, F] = v(!1), C = r ? i : g, s = h(
+    (e) => r ? c?.(e) : F(e),
+    [r, c, F]
+  ), N = h(() => {
+    s(!1);
+  }, [s]);
+  return /* @__PURE__ */ t($, { open: C, onOpenChange: s, children: [
+    /* @__PURE__ */ o(z, { asChild: !0, children: b || /* @__PURE__ */ t(p, { variant: "primary", className: n.trigger, children: [
+      "Deposit ",
+      m.cryptoCurrency.toUpperCase()
+    ] }) }),
+    /* @__PURE__ */ o(A, { "aria-describedby": void 0, children: /* @__PURE__ */ o(
+      j,
+      {
+        className: `${n.fund} ${f ? "" : n["no-footer"]}`,
+        openIn: u,
+        submitLabel: _,
+        title: d,
+        ...m,
+        children: /* @__PURE__ */ t(x, { children: [
+          /* @__PURE__ */ o(M, { children: /* @__PURE__ */ o(S, { asChild: !0, children: /* @__PURE__ */ o(a, { as: "span", children: d }) }) }),
+          /* @__PURE__ */ o(
+            V,
+            {
+              "aria-labelledby": l,
+              openIn: u,
+              unmountOnTransactionSuccess: !0,
+              unmount: N,
+              submitLabel: _,
+              children: ({ view: e, Content: y }) => /* @__PURE__ */ t(
+                "div",
+                {
+                  className: `${n["fund-inner"]} ${e === "transaction-status" ? n["tx-status"] : ""}`,
+                  children: [
+                    /* @__PURE__ */ t("div", { className: n["title-buttons"], children: [
+                      e === "error" ? /* @__PURE__ */ o(M, { children: /* @__PURE__ */ o(a, { id: l, children: d }) }) : /* @__PURE__ */ o(a, { className: n.title, id: l, children: d }),
+                      /* @__PURE__ */ o(k, { asChild: !0, children: /* @__PURE__ */ o(
+                        p,
+                        {
+                          className: n["close-button"],
+                          "aria-label": "Close",
+                          size: "md",
+                          variant: "transparentSecondary",
+                          children: /* @__PURE__ */ o(U, { className: n["close-icon"] })
+                        }
+                      ) })
+                    ] }),
+                    /* @__PURE__ */ o("div", { className: n.content, children: y })
+                  ]
+                }
+              )
+            }
+          ),
+          f && /* @__PURE__ */ o(I, {})
+        ] })
+      }
+    ) })
+  ] });
+};
+export {
+  Y as unstable_FundModal
+};