@coinbase/cdp-react-native 0.0.0 → 0.0.82

package/README.md

@@ -0,0 +1,4 @@
+# cdp-react-native
+
+This package contains ready-made, customizable React Native UI components that wrap
+the CDP frontend SDK. 

package/dist/esm/index.js

@@ -0,0 +1,8 @@
+import { ApplePayProvider as o } from "./index2.js";
+import { useApplePay as t } from "./index3.js";
+import { ApplePayButton as a } from "./index4.js";
+export {
+  a as ApplePayButton,
+  o as ApplePayProvider,
+  t as useApplePay
+};

package/dist/esm/index2.js

@@ -0,0 +1,146 @@
+import { createEndUserApplePayOnrampOrder as y, APIError as h } from "@coinbase/cdp-api-client";
+import { useCurrentUser as f, useConfig as g } from "@coinbase/cdp-hooks";
+import v, { createContext as b, useReducer as k, useCallback as n, useEffect as C } from "react";
+import { checkUserVerification as U } from "./index5.js";
+const x = b(null);
+function q({ children: t }) {
+  const [s, r] = k(A, p), { currentUser: o } = f(), { config: i } = g(), c = n(() => {
+    if (!o)
+      return r({
+        type: "validation_error",
+        error: {
+          code: "user_not_authenticated"
+        }
+      }), null;
+    const { missingVerification: e } = U(o);
+    return e ? (r({
+      type: "validation_error",
+      error: {
+        code: e === "email" ? "requires_email" : "requires_sms"
+      }
+    }), null) : (r({ type: "reset" }), o);
+  }, [o]);
+  C(() => {
+    c();
+  }, [c]);
+  const d = n(
+    async (e) => {
+      const u = c();
+      if (u)
+        try {
+          r({ type: "purchase_requested" });
+          const a = await y(i.projectId, u.userId, {
+            agreementAcceptedAt: (/* @__PURE__ */ new Date()).toISOString(),
+            // TODO: Do we need to verify the user owns the destination address?
+            destination: e.destination,
+            payment: {
+              currency: e.payment.currency.toUpperCase()
+            },
+            purchase: {
+              amount: e.purchase.amount,
+              currency: e.purchase.currency.toUpperCase()
+            },
+            isSandbox: e.isSandbox
+          });
+          r({ type: "purchase_started", data: a });
+        } catch (a) {
+          a instanceof h ? r({
+            type: "purchase_error",
+            error: {
+              code: "api_error",
+              correlationId: a.correlationId,
+              message: a.errorMessage
+            }
+          }) : r({
+            type: "purchase_error",
+            error: {
+              message: a instanceof Error ? a.message : "Failed to create order"
+            }
+          });
+        }
+    },
+    [c]
+  ), l = n((e) => {
+    switch (e.type) {
+      case "onramp_api.load_error":
+        r({
+          type: "purchase_error",
+          error: e.error
+        });
+        break;
+      case "onramp_api.commit_error":
+        r({
+          type: "purchase_error",
+          error: e.error
+        });
+        break;
+      case "onramp_api.polling_error":
+        r({
+          type: "purchase_error",
+          error: e.error
+        });
+        break;
+      case "onramp_api.polling_success":
+        r({ type: "purchase_success" });
+        break;
+      case "onramp_api.cancel":
+        r({ type: "reset" });
+        break;
+    }
+  }, []), m = n(() => {
+    r({ type: "reset" });
+  }, []), _ = {
+    ...s,
+    createOrder: d,
+    paymentEventHandler: l,
+    reset: m
+  };
+  return /* @__PURE__ */ v.createElement(x.Provider, { value: _ }, t);
+}
+const p = {
+  status: "idle",
+  data: void 0,
+  error: void 0
+};
+function A(t, s) {
+  switch (s.type) {
+    case "validation_error":
+      return {
+        ...t,
+        status: "error",
+        error: s.error
+      };
+    case "purchase_requested":
+      return {
+        ...t,
+        status: "pending",
+        error: void 0
+      };
+    case "purchase_started":
+      return {
+        ...t,
+        status: "pending",
+        data: s.data,
+        error: void 0
+      };
+    case "purchase_success":
+      return {
+        ...t,
+        status: "success"
+      };
+    case "purchase_error":
+      return {
+        ...t,
+        status: "error",
+        error: s.error
+      };
+    case "reset":
+      return p;
+    default:
+      return t;
+  }
+}
+export {
+  x as ApplePayContext,
+  q as ApplePayProvider
+};

package/dist/esm/index3.js

@@ -0,0 +1,17 @@
+import { useContext as r } from "react";
+import { ApplePayContext as t } from "./index2.js";
+function s() {
+  const e = r(t);
+  if (!e)
+    throw new Error("useApplePay must be used within an ApplePayProvider");
+  return {
+    createOrder: e.createOrder,
+    data: e.data,
+    status: e.status,
+    error: e.error,
+    reset: e.reset
+  };
+}
+export {
+  s as useApplePay
+};

package/dist/esm/index4.js

@@ -0,0 +1,125 @@
+import a, { useContext as c, useCallback as d } from "react";
+import { StyleSheet as p, Platform as l, View as g } from "react-native";
+import { WebView as v } from "react-native-webview";
+import { ApplePayContext as w } from "./index2.js";
+import { parseWebViewMessage as f } from "./index6.js";
+function N({ style: o }) {
+  const e = c(w);
+  if (!e)
+    throw new Error("ApplePayButton must be used within an ApplePayProvider");
+  const t = e.data?.paymentLink.url, s = d(
+    (r) => {
+      const n = f(r.nativeEvent.data);
+      n.success && e.paymentEventHandler(n.event);
+    },
+    [e.paymentEventHandler]
+  );
+  return l.OS !== "ios" ? (__DEV__ && console.warn("ApplePayButton is only available on iOS"), null) : t ? /* @__PURE__ */ a.createElement(g, { style: [i.container, o] }, /* @__PURE__ */ a.createElement(
+    v,
+    {
+      source: { uri: t },
+      injectedJavaScriptBeforeContentLoaded: u,
+      injectedJavaScript: m,
+      onMessage: s,
+      startInLoadingState: !0,
+      style: i.webView,
+      originWhitelist: ["https://*", "apple-pay://*"],
+      mixedContentMode: "compatibility"
+    }
+  )) : null;
+}
+const i = p.create({
+  container: {
+    height: 48,
+    width: "100%",
+    overflow: "hidden",
+    borderRadius: 8
+  },
+  webView: {
+    flex: 1,
+    backgroundColor: "transparent"
+  }
+}), u = `
+(function() {
+  // Flag to prevent duplicate installations
+  window.__cdpEventForwarderInstalled = true;
+
+  // Store original postMessage to intercept outgoing messages
+  var originalPostMessage = window.postMessage;
+  window.postMessage = function(message, targetOrigin, transfer) {
+    try {
+      if (message && (typeof message === 'object' || typeof message === 'string')) {
+        var msgStr = typeof message === 'object' ? JSON.stringify(message) : message;
+        if (window.ReactNativeWebView) {
+          window.ReactNativeWebView.postMessage(msgStr);
+        }
+      }
+    } catch (e) {
+      console.error('[CDP] Error intercepting postMessage:', e);
+    }
+    return originalPostMessage.apply(window, arguments);
+  };
+
+  // Listen for incoming postMessage events
+  window.addEventListener('message', function(event) {
+    try {
+      if (event.data && typeof event.data === 'object') {
+        window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
+      } else if (typeof event.data === 'string') {
+        window.ReactNativeWebView.postMessage(event.data);
+      }
+    } catch (e) {
+      console.error('[CDP] Error forwarding message:', e);
+    }
+  }, true);
+
+  // Listen for custom onramp events
+  document.addEventListener('onramp_event', function(event) {
+    if (event.detail) {
+      window.ReactNativeWebView.postMessage(JSON.stringify(event.detail));
+    }
+  }, true);
+
+  // Override dispatchEvent to catch custom events
+  var originalDispatchEvent = EventTarget.prototype.dispatchEvent;
+  EventTarget.prototype.dispatchEvent = function(event) {
+    if (event.type && event.type.includes('onramp')) {
+      try {
+        if (window.ReactNativeWebView) {
+          window.ReactNativeWebView.postMessage(JSON.stringify({
+            eventName: event.type,
+            data: event.detail
+          }));
+        }
+      } catch (e) {}
+    }
+    return originalDispatchEvent.apply(this, arguments);
+  };
+
+  true;
+})();
+`, m = `
+(function() {
+  if (window.__cdpEventForwarderInstalled) {
+    return true;
+  }
+
+  // Fallback installation if beforeContentLoaded didn't run
+  window.addEventListener('message', function(event) {
+    try {
+      if (event.data && typeof event.data === 'object') {
+        window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
+      } else if (typeof event.data === 'string') {
+        window.ReactNativeWebView.postMessage(event.data);
+      }
+    } catch (e) {
+      console.error('[CDP] Error forwarding message:', e);
+    }
+  }, true);
+
+  true;
+})();
+`;
+export {
+  N as ApplePayButton
+};

package/dist/esm/index5.js

@@ -0,0 +1,7 @@
+function s(i) {
+  const n = i.authenticationMethods?.email !== void 0, t = i.authenticationMethods?.sms !== void 0;
+  return n ? t ? { missingVerification: null } : { missingVerification: "sms" } : { missingVerification: "email" };
+}
+export {
+  s as checkUserVerification
+};

package/dist/esm/index6.js

@@ -0,0 +1,42 @@
+const n = [
+  "onramp_api.load_pending",
+  "onramp_api.load_success",
+  "onramp_api.load_error",
+  "onramp_api.polling_success",
+  "onramp_api.commit_error",
+  "onramp_api.cancel"
+];
+function o(s) {
+  let e;
+  try {
+    e = JSON.parse(s);
+  } catch {
+    return { success: !1, reason: "Invalid JSON" };
+  }
+  if (!a(e))
+    return { success: !1, reason: "Invalid message structure" };
+  const r = e.eventName ?? e.type;
+  return r ? t(r) ? {
+    success: !0,
+    event: {
+      type: r,
+      message: e.message,
+      error: {
+        code: e.data?.errorCode,
+        message: e.data?.errorMessage
+      }
+    }
+  } : { success: !1, reason: "Unknown event type" } : { success: !1, reason: "Missing event type" };
+}
+function a(s) {
+  if (typeof s != "object" || s === null)
+    return !1;
+  const e = s;
+  return typeof e.eventName == "string" || typeof e.type == "string";
+}
+function t(s) {
+  return n.includes(s);
+}
+export {
+  o as parseWebViewMessage
+};

package/dist/types/index.d.ts

@@ -0,0 +1,75 @@
+import { EndUserApplePayOnrampOrderCreateResponse } from '@coinbase/cdp-api-client';
+import { JSX } from 'react';
+import { Network } from '@coinbase/cdp-api-client';
+import { ReactNode } from 'react';
+
+export declare function ApplePayButton({ style }: ApplePayButtonProps): JSX.Element | null;
+
+export declare interface ApplePayButtonProps {
+    style?: object;
+}
+
+export declare interface ApplePayContextValue {
+    createOrder: (options: CreateOrderOptions) => Promise<void>;
+    data: EndUserApplePayOnrampOrderCreateResponse | undefined;
+    status: ApplePayOnrampStatus;
+    error: OnrampError | undefined;
+    reset: () => void;
+    paymentEventHandler: (event: OnrampEvent) => void;
+}
+
+export declare type ApplePayOnrampStatus = "idle" | "pending" | "error" | "success";
+
+export declare function ApplePayProvider({ children }: ApplePayProviderProps): JSX.Element;
+
+export declare interface ApplePayProviderProps {
+    children: ReactNode;
+}
+
+export declare interface CreateOrderOptions {
+    destination: {
+        address: string;
+        network: Network;
+    };
+    purchase: {
+        amount: string;
+        currency: "usdc" | string;
+    };
+    payment: {
+        currency: "usd" | string;
+    };
+    isSandbox?: boolean;
+}
+
+export declare interface OnrampError {
+    correlationId?: string;
+    message?: string;
+    code?: string;
+}
+
+declare type OnrampErrorEvent = {
+    type: Extract<OnrampEventType, "onramp_api.load_error" | "onramp_api.commit_error" | "onramp_api.polling_error">;
+    error: {
+        code?: string;
+        message?: string;
+    };
+};
+
+declare type OnrampEvent = {
+    type: Exclude<OnrampEventType, "onramp_api.load_error" | "onramp_api.commit_error" | "onramp_api.polling_error">;
+    message?: string;
+} | OnrampErrorEvent;
+
+declare type OnrampEventType = "onramp_api.load_pending" | "onramp_api.load_success" | "onramp_api.load_error" | "onramp_api.commit_success" | "onramp_api.commit_error" | "onramp_api.cancel" | "onramp_api.polling_start" | "onramp_api.polling_success" | "onramp_api.polling_error";
+
+export declare function useApplePay(): UseApplePayReturn;
+
+export declare interface UseApplePayReturn {
+    createOrder: (options: CreateOrderOptions) => Promise<void>;
+    data: EndUserApplePayOnrampOrderCreateResponse | undefined;
+    status: ApplePayOnrampStatus;
+    error: OnrampError | undefined;
+    reset: () => void;
+}
+
+export { }

package/package.json

@@ -1,8 +1,45 @@
 {
   "name": "@coinbase/cdp-react-native",
-  "version": "0.0.0",
-  "description": "Placeholder package",
-  "main": "index.js",
-  "author": "Coinbase Inc.",
-  "license": "Apache-2.0"
-}
+  "version": "0.0.82",
+  "type": "module",
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-native": ">=0.70.0",
+    "react-native-webview": ">=13.0.0",
+    "@coinbase/cdp-core": "^0.0.82",
+    "@coinbase/cdp-hooks": "^0.0.82",
+    "@coinbase/cdp-api-client": "^0.0.82"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^19.0.0",
+    "react": "^19.1.2",
+    "react-dom": "^19.1.2",
+    "react-native": "^0.79.6",
+    "react-native-webview": "^13.13.5",
+    "@coinbase/cdp-api-client": "0.0.82",
+    "@coinbase/cdp-core": "0.0.82",
+    "@coinbase/cdp-hooks": "0.0.82"
+  },
+  "files": [
+    "dist/**",
+    "!dist/**/*.tsbuildinfo"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/esm/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "pnpm run check:types && vite build --config ../../vite.config.base.ts",
+    "build:watch": "vite build --config ../../vite.config.base.ts --watch",
+    "check:types": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "clean:all": "pnpm clean && rm -rf node_modules",
+    "size-limit": "size-limit",
+    "test": "vitest",
+    "test:run": "vitest --run"
+  }
+}

package/index.js

@@ -1 +0,0 @@
-console.log("Temporary package");