@phantom/react-sdk 0.0.2

package/README.md

@@ -0,0 +1,77 @@
+# Phantom React SDK
+
+React hooks and components for integrating with Phantom wallet.
+
+## Installation
+
+```bash
+npm install @phantom/react-sdk @phantom/browser-sdk
+```
+
+## Quick Start
+
+```tsx
+import React from 'react';
+import { PhantomProvider } from '@phantom/react-sdk';
+import { createSolanaPlugin } from '@phantom/browser-sdk/solana';
+import { useProvider } from '@phantom/react-sdk/solana';
+
+function App() {
+  return (
+    <PhantomProvider config={{ chainPlugins: [createSolanaPlugin()] }}>
+      <WalletComponent />
+    </PhantomProvider>
+  );
+}
+
+function WalletComponent() {
+  const { status, provider } = useProvider();
+
+  if (status === 'loading') {
+    return <div>Loading wallet...</div>;
+  }
+
+  if (status === 'error') {
+    return <div>Error</div>;
+  }
+
+  if (status === 'success') {
+    return (
+      <div>
+        <div>Wallet connected!</div>
+        <button onClick={() => provider.connect()}>
+          Connect to Solana
+        </button>
+      </div>
+    );
+  }
+
+  return null;
+}
+```
+
+## API Reference
+
+### PhantomProvider
+
+The PhantomProvider component provides the Phantom context to child components.
+
+```tsx
+import { PhantomProvider } from '@phantom/react-sdk';
+import { createSolanaPlugin } from '@phantom/browser-sdk/solana';
+
+<PhantomProvider config={{ chainPlugins: [createSolanaPlugin()] }}>
+  {children}
+</PhantomProvider>
+```
+
+### useProvider (Solana)
+
+The `useProvider` hook provides access to the Solana provider with automatic retry logic and state management.
+
+#### Return Value
+
+The hook returns an object with the following properties:
+
+- `status: 'loading' | 'success' | 'error'` - Current status of the provider
+- `provider: NonNullable<unknown> | null` - The Solana provider instance (null when not available)

package/dist/chunk-5KSEZ3MC.mjs

@@ -0,0 +1,25 @@
+// src/PhantomContext.tsx
+import { createPhantom } from "@phantom/browser-sdk";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var PhantomContext = React.createContext({ phantom: void 0, isReady: false });
+var PhantomProvider = ({ children, config }) => {
+  const [context, setContext] = React.useState({ phantom: void 0, isReady: false });
+  React.useEffect(() => {
+    const phantom = createPhantom(config);
+    setContext({ phantom, isReady: true });
+  }, [config]);
+  return /* @__PURE__ */ jsx(PhantomContext.Provider, { value: context, children });
+};
+function usePhantom() {
+  const context = React.useContext(PhantomContext);
+  if (!context) {
+    throw new Error("usePhantom must be used within a PhantomProvider");
+  }
+  return context;
+}
+
+export {
+  PhantomProvider,
+  usePhantom
+};

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CreatePhantomConfig, Phantom } from '@phantom/browser-sdk';
+import * as React from 'react';
+
+type PhantomContextType = {
+    phantom: undefined;
+    isReady: false;
+} | {
+    phantom: Phantom;
+    isReady: true;
+};
+declare const PhantomProvider: ({ children, config }: {
+    children: React.ReactNode;
+    config: CreatePhantomConfig;
+}) => react_jsx_runtime.JSX.Element;
+declare function usePhantom(): PhantomContextType;
+
+export { PhantomProvider, usePhantom };

package/dist/index.js

@@ -0,0 +1,62 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  PhantomProvider: () => PhantomProvider,
+  usePhantom: () => usePhantom
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/PhantomContext.tsx
+var import_browser_sdk = require("@phantom/browser-sdk");
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var PhantomContext = React.createContext({ phantom: void 0, isReady: false });
+var PhantomProvider = ({ children, config }) => {
+  const [context, setContext] = React.useState({ phantom: void 0, isReady: false });
+  React.useEffect(() => {
+    const phantom = (0, import_browser_sdk.createPhantom)(config);
+    setContext({ phantom, isReady: true });
+  }, [config]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PhantomContext.Provider, { value: context, children });
+};
+function usePhantom() {
+  const context = React.useContext(PhantomContext);
+  if (!context) {
+    throw new Error("usePhantom must be used within a PhantomProvider");
+  }
+  return context;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PhantomProvider,
+  usePhantom
+});

package/dist/index.mjs

@@ -0,0 +1,8 @@
+import {
+  PhantomProvider,
+  usePhantom
+} from "./chunk-5KSEZ3MC.mjs";
+export {
+  PhantomProvider,
+  usePhantom
+};

package/dist/solana/index.d.ts

@@ -0,0 +1,17 @@
+type ProviderState = {
+    status: "loading";
+    provider: null;
+} | {
+    status: "success";
+    provider: NonNullable<unknown>;
+} | {
+    status: "error";
+    provider: null;
+};
+/**
+ * Retrieves the Phantom injected provider. If for some reason the provider is not available, it will retry up to 10 times with exponential backoff.
+ * @returns Object containing the provider status, provider instance, and any error.
+ */
+declare function useProvider(): ProviderState;
+
+export { useProvider };

package/dist/solana/index.js

@@ -0,0 +1,123 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/solana/index.ts
+var solana_exports = {};
+__export(solana_exports, {
+  useProvider: () => useProvider
+});
+module.exports = __toCommonJS(solana_exports);
+var import_solana = require("@phantom/browser-sdk/solana");
+
+// src/solana/useProvider.ts
+var React2 = __toESM(require("react"));
+
+// src/PhantomContext.tsx
+var import_browser_sdk = require("@phantom/browser-sdk");
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var PhantomContext = React.createContext({ phantom: void 0, isReady: false });
+function usePhantom() {
+  const context = React.useContext(PhantomContext);
+  if (!context) {
+    throw new Error("usePhantom must be used within a PhantomProvider");
+  }
+  return context;
+}
+
+// src/solana/useProvider.ts
+var MAX_RETRIES = 10;
+var BASE_DELAY = 100;
+function useProvider() {
+  const { phantom, isReady } = usePhantom();
+  const [state, setState] = React2.useState({
+    status: "loading",
+    provider: null
+  });
+  const tryResolvingProvider = React2.useCallback(() => {
+    if (!phantom) {
+      setState({
+        status: "error",
+        provider: null
+      });
+      return false;
+    }
+    if (!phantom.solana) {
+      setState({
+        status: "error",
+        provider: null
+      });
+      return false;
+    }
+    try {
+      const provider = phantom.solana.getProvider();
+      if (provider != null) {
+        setState({ status: "success", provider });
+        return true;
+      } else {
+        return false;
+      }
+    } catch (error) {
+      return false;
+    }
+  }, [phantom]);
+  React2.useEffect(() => {
+    if (!isReady) {
+      setState({ status: "loading", provider: null });
+      return;
+    }
+    if (tryResolvingProvider()) {
+      return;
+    }
+    let retryCount = 0;
+    const scheduleRetry = () => {
+      const delay = BASE_DELAY * Math.pow(2, Math.min(retryCount, 5));
+      setTimeout(() => {
+        if (tryResolvingProvider()) {
+          return;
+        }
+        retryCount++;
+        if (retryCount >= MAX_RETRIES) {
+          setState({
+            status: "error",
+            provider: null
+          });
+        } else {
+          scheduleRetry();
+        }
+      }, delay);
+    };
+    scheduleRetry();
+  }, [isReady, tryResolvingProvider]);
+  return state;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useProvider
+});

package/dist/solana/index.mjs

@@ -0,0 +1,77 @@
+import {
+  usePhantom
+} from "../chunk-5KSEZ3MC.mjs";
+
+// src/solana/index.ts
+import "@phantom/browser-sdk/solana";
+
+// src/solana/useProvider.ts
+import * as React from "react";
+var MAX_RETRIES = 10;
+var BASE_DELAY = 100;
+function useProvider() {
+  const { phantom, isReady } = usePhantom();
+  const [state, setState] = React.useState({
+    status: "loading",
+    provider: null
+  });
+  const tryResolvingProvider = React.useCallback(() => {
+    if (!phantom) {
+      setState({
+        status: "error",
+        provider: null
+      });
+      return false;
+    }
+    if (!phantom.solana) {
+      setState({
+        status: "error",
+        provider: null
+      });
+      return false;
+    }
+    try {
+      const provider = phantom.solana.getProvider();
+      if (provider != null) {
+        setState({ status: "success", provider });
+        return true;
+      } else {
+        return false;
+      }
+    } catch (error) {
+      return false;
+    }
+  }, [phantom]);
+  React.useEffect(() => {
+    if (!isReady) {
+      setState({ status: "loading", provider: null });
+      return;
+    }
+    if (tryResolvingProvider()) {
+      return;
+    }
+    let retryCount = 0;
+    const scheduleRetry = () => {
+      const delay = BASE_DELAY * Math.pow(2, Math.min(retryCount, 5));
+      setTimeout(() => {
+        if (tryResolvingProvider()) {
+          return;
+        }
+        retryCount++;
+        if (retryCount >= MAX_RETRIES) {
+          setState({
+            status: "error",
+            provider: null
+          });
+        } else {
+          scheduleRetry();
+        }
+      }, delay);
+    };
+    scheduleRetry();
+  }, [isReady, tryResolvingProvider]);
+  return state;
+}
+export {
+  useProvider
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@phantom/react-sdk",
+  "version": "0.0.2",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./solana": {
+      "import": "./dist/solana/index.mjs",
+      "require": "./dist/solana/index.js",
+      "types": "./dist/solana/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "rm -rf dist && tsup src/index.ts src/solana/index.ts --format cjs,esm --dts",
+    "dev": "rm -rf dist && tsup src/index.ts src/solana/index.ts --format cjs,esm --dts --watch",
+    "lint": "tsc --noEmit && eslint --cache . --ext .ts,.tsx",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@phantom/browser-sdk": "workspace:^"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.5",
+    "@types/react-dom": "^19.1.5",
+    "eslint": "8.53.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "ts-jest": "^29",
+    "tsup": "^6.7.0",
+    "typescript": "^5.0.4"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  }
+}