@unifold/react-provider 0.1.1

package/README.md

@@ -0,0 +1,108 @@
+# @unifold/react-provider
+
+Minimal React provider for Unifold SDKs. This package provides only the essential `publishableKey` context and QueryClient setup that is shared across all Unifold React-based SDKs.
+
+## Purpose
+
+This package is designed to be the **universal, minimal provider** for:
+- `@unifold/connect-react` - Full UI SDK with modal components
+- `@unifold/headless-react` - Headless SDK with hooks only (coming soon)
+- Any future React-based Unifold SDKs
+
+## Installation
+
+```bash
+npm install @unifold/react-provider
+# or
+pnpm add @unifold/react-provider
+```
+
+> **Note**: This package is typically installed automatically as a dependency of `@unifold/connect-react` or `@unifold/headless-react`. You don't need to install it directly unless you're building a custom SDK.
+
+## Usage
+
+### Basic Setup
+
+```tsx
+import { UnifoldProvider } from '@unifold/react-provider';
+
+function App() {
+  return (
+    <UnifoldProvider publishableKey="pk_test_...">
+      <YourApp />
+    </UnifoldProvider>
+  );
+}
+```
+
+### Using the Context
+
+```tsx
+import { useUnifold } from '@unifold/react-provider';
+
+function MyComponent() {
+  const { publishableKey } = useUnifold();
+  
+  return <div>Connected with key: {publishableKey}</div>;
+}
+```
+
+## API
+
+### UnifoldProvider
+
+The main provider component that wraps your application.
+
+**Props:**
+
+- `publishableKey` (required): Your Unifold API publishable key
+- `children` (required): Your React components
+
+### useUnifold
+
+Hook to access the Unifold context.
+
+**Returns:**
+
+- `publishableKey`: Your API key
+
+## Features
+
+- ✅ **QueryClient Setup**: Automatically configures React Query for optimal performance
+- ✅ **API Key Validation**: Validates publishable keys on mount
+- ✅ **SSR Support**: Safe to use with server-side rendering
+- ✅ **TypeScript**: Full type definitions included
+- ✅ **Ultra-Lightweight**: Minimal bundle size (~2 KB)
+- ✅ **Zero Configuration**: Only requires `publishableKey`
+
+## Design Philosophy
+
+This package intentionally stays minimal and only handles:
+1. `publishableKey` management
+2. React Query setup
+3. SSR-safe context
+
+All SDK-specific configuration (apiUrl, defaultConfig, etc.) is handled by the higher-level packages (`@unifold/connect-react`, `@unifold/headless-react`) that wrap this provider.
+
+## Architecture
+
+This package sits at the base of the Unifold React ecosystem:
+
+```
+@unifold/react-provider (this package)
+  └─ publishableKey + QueryClient only
+
+@unifold/connect-react
+  ├─ Wraps: @unifold/react-provider
+  ├─ Adds: apiUrl, appName, defaultConfig
+  └─ Provides: UI components, modal flows
+
+@unifold/headless-react (coming soon)
+  ├─ Wraps: @unifold/react-provider
+  ├─ Adds: apiUrl, custom config
+  └─ Provides: Headless hooks, custom UI
+```
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface UnifoldConfig {
+    publishableKey: string;
+}
+interface UnifoldProviderProps {
+    children: React.ReactNode;
+    publishableKey: string;
+}
+declare function UnifoldProvider({ children, publishableKey, }: UnifoldProviderProps): react_jsx_runtime.JSX.Element;
+declare function useUnifold(): {
+    publishableKey: string;
+};
+
+export { type UnifoldConfig, UnifoldProvider, useUnifold };

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface UnifoldConfig {
+    publishableKey: string;
+}
+interface UnifoldProviderProps {
+    children: React.ReactNode;
+    publishableKey: string;
+}
+declare function UnifoldProvider({ children, publishableKey, }: UnifoldProviderProps): react_jsx_runtime.JSX.Element;
+declare function useUnifold(): {
+    publishableKey: string;
+};
+
+export { type UnifoldConfig, UnifoldProvider, useUnifold };

package/dist/index.js

@@ -0,0 +1,94 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  UnifoldProvider: () => UnifoldProvider,
+  useUnifold: () => useUnifold
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider.tsx
+var import_react = require("react");
+var import_react_query = require("@tanstack/react-query");
+var import_jsx_runtime = require("react/jsx-runtime");
+var UnifoldContext = (0, import_react.createContext)(null);
+var createQueryClient = () => new import_react_query.QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 6e4,
+      retry: 1
+    }
+  }
+});
+function UnifoldProvider({
+  children,
+  publishableKey
+}) {
+  const [queryClient] = (0, import_react.useState)(() => createQueryClient());
+  (0, import_react.useEffect)(() => {
+    if (!publishableKey || publishableKey.trim() === "") {
+      throw new Error(
+        "Unifold: publishableKey is required. Please provide a valid publishable key."
+      );
+    }
+    if (!publishableKey.startsWith("pk_test_") && !publishableKey.startsWith("pk_live_")) {
+      console.warn(
+        'Unifold: publishableKey should start with "pk_test_" or "pk_live_". Please ensure you are using a valid publishable key.'
+      );
+    }
+  }, [publishableKey]);
+  const prevPublishableKeyRef = (0, import_react.useRef)(publishableKey);
+  (0, import_react.useEffect)(() => {
+    if (prevPublishableKeyRef.current !== publishableKey) {
+      console.log(
+        "Unifold: Reinitializing with new publishable key:",
+        publishableKey
+      );
+      prevPublishableKeyRef.current = publishableKey;
+    }
+  }, [publishableKey]);
+  const contextValue = (0, import_react.useMemo)(
+    () => ({
+      publishableKey
+    }),
+    [publishableKey]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UnifoldContext.Provider, { value: contextValue, children }) });
+}
+function useUnifold() {
+  const context = (0, import_react.useContext)(UnifoldContext);
+  if (typeof window === "undefined") {
+    return {
+      publishableKey: ""
+    };
+  }
+  if (!context) {
+    throw new Error("useUnifold must be used within UnifoldProvider");
+  }
+  return {
+    publishableKey: context.publishableKey
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  UnifoldProvider,
+  useUnifold
+});

package/dist/index.mjs

@@ -0,0 +1,73 @@
+// src/provider.tsx
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useMemo,
+  useRef
+} from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { jsx } from "react/jsx-runtime";
+var UnifoldContext = createContext(null);
+var createQueryClient = () => new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 6e4,
+      retry: 1
+    }
+  }
+});
+function UnifoldProvider({
+  children,
+  publishableKey
+}) {
+  const [queryClient] = useState(() => createQueryClient());
+  useEffect(() => {
+    if (!publishableKey || publishableKey.trim() === "") {
+      throw new Error(
+        "Unifold: publishableKey is required. Please provide a valid publishable key."
+      );
+    }
+    if (!publishableKey.startsWith("pk_test_") && !publishableKey.startsWith("pk_live_")) {
+      console.warn(
+        'Unifold: publishableKey should start with "pk_test_" or "pk_live_". Please ensure you are using a valid publishable key.'
+      );
+    }
+  }, [publishableKey]);
+  const prevPublishableKeyRef = useRef(publishableKey);
+  useEffect(() => {
+    if (prevPublishableKeyRef.current !== publishableKey) {
+      console.log(
+        "Unifold: Reinitializing with new publishable key:",
+        publishableKey
+      );
+      prevPublishableKeyRef.current = publishableKey;
+    }
+  }, [publishableKey]);
+  const contextValue = useMemo(
+    () => ({
+      publishableKey
+    }),
+    [publishableKey]
+  );
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(UnifoldContext.Provider, { value: contextValue, children }) });
+}
+function useUnifold() {
+  const context = useContext(UnifoldContext);
+  if (typeof window === "undefined") {
+    return {
+      publishableKey: ""
+    };
+  }
+  if (!context) {
+    throw new Error("useUnifold must be used within UnifoldProvider");
+  }
+  return {
+    publishableKey: context.publishableKey
+  };
+}
+export {
+  UnifoldProvider,
+  useUnifold
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@unifold/react-provider",
+  "version": "0.1.1",
+  "description": "Unifold React Provider - Core provider and context for Unifold React SDKs",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.62.15"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "unifold",
+    "react",
+    "provider",
+    "context",
+    "crypto",
+    "web3"
+  ],
+  "author": "Unifold",
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "type-check": "tsc --noEmit"
+  }
+}