@tuwaio/pulsar-react 0.0.2 → 0.0.4

package/README.md

@@ -2,116 +2,141 @@
 
 [![NPM Version](https://img.shields.io/npm/v/@tuwaio/pulsar-react.svg)](https://www.npmjs.com/package/@tuwaio/pulsar-react)
 [![License](https://img.shields.io/npm/l/@tuwaio/pulsar-react.svg)](./LICENSE)
-[![Build Status](https://img.shields.io/github/actions/workflow/status/Tuwaio/pulsar-core/main.yml?branch=main)](https://github.com/TuwaIO/pulsar-core/actions)
+[![Build Status](https://img.shields.io/github/actions/workflow/status/TuwaIO/pulsar-core/release.yml?branch=main)](https://github.com/TuwaIO/pulsar-core/actions)
 
-Official React bindings for the Pulsar Engine. This package currently provides the essential **`useInitializeTransactionsPool`** hook to resume tracking pending transactions after a page reload.
+Official React bindings for the Pulsar Engine. This package provides the essential **`useInitializeTransactionsPool`** hook to seamlessly integrate Pulsar's state with your application's lifecycle.
 
-## 🏛️ Architecture
+---
+
+## 🏛️ What is `@tuwaio/pulsar-react`?
+
+This package is the official bridge between the framework-agnostic `@tuwaio/pulsar-core` and a React application. It provides hooks and utilities that simplify the process of connecting Pulsar's state management to the React component lifecycle.
 
-This package acts as a lightweight connector between the framework-agnostic Pulsar engine and a React application. It helps integrate Pulsar's state with the React component lifecycle.
+Its primary role is to ensure that transaction tracking can resume reliably after a page reload.
 
 ---
 
 ## 💾 Installation
 
-To use this package, you need the core Pulsar stack.
+To use this package, you need the complete Pulsar stack, including `wagmi` for EVM interactions.
 
 ```bash
-pnpm add @tuwaio/pulsar-react @tuwaio/pulsar-core @tuwaio/pulsar-evm
+# Using pnpm
+pnpm add @tuwaio/pulsar-react @tuwaio/pulsar-core @tuwaio/pulsar-evm wagmi viem zustand immer
+
+# Using npm
+npm install @tuwaio/pulsar-react @tuwaio/pulsar-core @tuwaio/pulsar-evm wagmi viem zustand immer
+
+# Using yarn
+yarn add @tuwaio/pulsar-react @tuwaio/pulsar-core @tuwaio/pulsar-evm wagmi viem zustand immer
 ```
 
 ---
 
 ## 🚀 Getting Started
 
-The `useInitializeTransactionsPool` hook is designed to be called once when your application loads. It requires the `initializeTransactionsPool` function, which is provided by the main Pulsar store.
+The recommended way to integrate Pulsar with React is to create a vanilla store instance, create a bounded hook for it, and then use `useInitializeTransactionsPool` in your main layout component.
 
-Here is a complete example of the recommended setup:
+Here is a complete step-by-step example:
 
-### Step 1: Create Your `usePulsar` Hook
+### Step 1: Create the Pulsar Store and Hook
 
-In your application, create a custom hook to access the Pulsar store, which is created by a function from `@tuwaio/pulsar-core`.
+First, create your vanilla Pulsar store and a reusable, bounded hook to access it. This pattern is recommended by Zustand for type safety and ease of use.
 
 ```tsx
-// hooks/usePulsar.ts
+// src/store/pulsar.ts
 import { createBoundedUseStore, createPulsarStore } from '@tuwaio/pulsar-core';
+import { evmAdapter } from '@tuwaio/pulsar-evm';
+import { wagmiConfig, chains } from '../configs/wagmi'; // Your wagmi config
+
+// 1. Create the vanilla store instance
+const pulsarStore = createPulsarStore({
+  name: 'my-app-pulsar-storage',
+  adapters: [evmAdapter(wagmiConfig, chains)],
+  // ... other configurations
+});
 
-export const usePulsar = createBoundedUseStore(
-  createPulsarStore({
-    name: 'pulsar-storage',
-    // Plug in the EVM adapter with its config for example
-    adapters: [
-      evmAdapter(wagmiConfig, [mainnet, sepolia]),
-    ],
-    // ... other configurations
-  }),
-);
+// 2. Create and export the bounded hook for React components
+export const usePulsar = createBoundedUseStore(pulsarStore);
+
+// 3. Export the vanilla store for non-React usage if needed
+export default pulsarStore;
 ```
 
-### Step 2: Create an Initializer Component
+### Step 2: Initialize the Store in Your App
 
-Create a small, client-side component that uses the hook from this package to initialize the store.
+Create a small, client-side component that uses the `useInitializeTransactionsPool` hook. This component's job is to re-activate trackers for pending transactions when the app loads.
 
 ```tsx
-// components/TransactionInitializer.tsx
+// src/components/PulsarInitializer.tsx
 'use client';
 
 import { useInitializeTransactionsPool } from '@tuwaio/pulsar-react';
-import { usePulsar } from '../hooks/usePulsar';
+import { usePulsar } from '../store/pulsar';
 
-export const TransactionInitializer = () => {
-  // 1. Get the initialization function from the core store hook
-  const { initializeTransactionsPool } = usePulsar();
+export const PulsarInitializer = () => {
+  // Get the initialization function from the store via our custom hook
+  const initializeTransactionsPool = usePulsar((state) => state.initializeTransactionsPool);
 
-  // 2. Pass it to the hook from this package to run on mount
-  useInitializeTransactionsPool(initializeTransactionsPool);
+  // Pass the function to the hook from this package
+  useInitializeTransactionsPool({ initializeTransactionsPool });
 
-  return null; // This component renders nothing
+  return null; // This component renders nothing to the DOM
 };
 ```
 
-### Step 3: Add the Initializer to Your App
+### Step 3: Add the Initializer to Your Root Layout
 
-Place the `TransactionInitializer` component at a high level in your application tree so it runs on every page load.
+Finally, place the `PulsarInitializer` component at a high level in your application tree (e.g., in your root layout or providers component) so it runs on every page load.
 
 ```tsx
-// app/layout.tsx or app/providers.tsx
+// src/app/layout.tsx (Next.js example)
 import { WagmiProvider } from 'wagmi';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-
-import { wagmiConfig } from './wagmi';
-import { TransactionInitializer } from '../components/TransactionInitializer';
+import { wagmiConfig } from '../configs/wagmi';
+import { PulsarInitializer } from '../components/PulsarInitializer';
 
 const queryClient = new QueryClient();
 
-export function Providers({ children }) {
+export default function RootLayout({ children }) {
   return (
-    <WagmiProvider config={wagmiConfig}>
-      <QueryClientProvider client={queryClient}>
-        <TransactionInitializer />
-        {children}
-      </QueryClientProvider>
-    </WagmiProvider>
+    <html lang="en">
+      <body>
+        <WagmiProvider config={wagmiConfig}>
+          <QueryClientProvider client={queryClient}>
+            <PulsarInitializer />
+            {children}
+          </QueryClientProvider>
+        </WagmiProvider>
+      </body>
+    </html>
   );
 }
 ```
 
+With this setup, your application is now fully configured to track transactions and resume tracking across page reloads.
+
 ---
 
-## 📖 API: `useInitializeTransactionsPool`
+## 📖 API Reference
+
+### `useInitializeTransactionsPool(params)`
+
+This is the primary hook exported by this package. Its sole purpose is to re-initialize the transaction store on component mount.
+
+#### **Parameters**
 
-This is the only hook exported by this package. Its purpose is to re-initialize the transaction store on page load.
+The hook accepts a single object with the following properties:
 
-### Parameters
--   `initializeTransactionsPool`: The initialization function obtained from your `usePulsar` hook.
--   `customErrorHandler?`: (Optional) A callback function to handle any errors during initialization.
+- `initializeTransactionsPool: () => Promise<void>`: **(Required)** The initialization function obtained from your Pulsar store.
+- `onError?: (error: Error) => void`: **(Optional)** A callback function to handle any errors that occur during initialization. If not provided, errors will be logged to the console.
 
 ---
 
 ## 🤝 Contributing
 
-As this package grows, contributions will be welcome! Please read our main **[Contribution Guidelines](https://github.com/TuwaIO/workflows/blob/main/CONTRIBUTING.md)**.
+Contributions are welcome\! Please read our main **[Contribution Guidelines](https://github.com/TuwaIO/workflows/blob/main/CONTRIBUTING.md)**.
 
 ## 📄 License
 
-This project is licensed under the **Apache-2.0 License**.
+This project is licensed under the **Apache-2.0 License** - see the [LICENSE](./LICENSE) file for details.

package/dist/index.d.mts

@@ -4,11 +4,35 @@
  */
 /**
  * A React hook that triggers the initialization of the transaction pool when the component mounts.
- * This ensures that any pending transactions from a previous session are picked up and tracked again.
  *
- * @param {() => Promise<void>} initializeTransactionsPool - The `initializeTransactionsPool` function from the Zustand store.
- * @param {(error: Error) => void} [customErrorHandler] - An optional custom function to handle errors during initialization. Defaults to console.error.
+ * This should be used once in your application's layout or root component. It ensures that any
+ * pending transactions from a previous session (stored in `localStorage`) are picked up and
+
+ * their trackers are re-activated.
+ *
+ * @param {object} params - The parameters for the hook.
+ * @param {() => Promise<void>} params.initializeTransactionsPool - The `initializeTransactionsPool` function from your Pulsar store instance.
+ * @param {(error: Error) => void} [params.onError] - An optional custom function to handle any errors that occur during initialization. Defaults to `console.error`.
+ *
+ * @example
+ * ```tsx
+ * import { useInitializeTransactionsPool } from '@tuwaio/pulsar-react';
+ * import { pulsarStore } from './path/to/your/store';
+ *
+ * function AppLayout({ children }) {
+ * // This hook will run once when the layout mounts.
+ * useInitializeTransactionsPool({
+ * initializeTransactionsPool: pulsarStore.getState().initializeTransactionsPool,
+ * onError: (err) => console.warn('Failed to re-initialize trackers:', err),
+ * });
+ *
+ * return <div>{children}</div>;
+ * }
+ * ```
  */
-declare const useInitializeTransactionsPool: (initializeTransactionsPool: () => Promise<void>, customErrorHandler?: (error: Error) => void) => void;
+declare const useInitializeTransactionsPool: ({ initializeTransactionsPool, onError, }: {
+    initializeTransactionsPool: () => Promise<void>;
+    onError?: (error: Error) => void;
+}) => void;
 
 export { useInitializeTransactionsPool };

package/dist/index.d.ts

@@ -4,11 +4,35 @@
  */
 /**
  * A React hook that triggers the initialization of the transaction pool when the component mounts.
- * This ensures that any pending transactions from a previous session are picked up and tracked again.
  *
- * @param {() => Promise<void>} initializeTransactionsPool - The `initializeTransactionsPool` function from the Zustand store.
- * @param {(error: Error) => void} [customErrorHandler] - An optional custom function to handle errors during initialization. Defaults to console.error.
+ * This should be used once in your application's layout or root component. It ensures that any
+ * pending transactions from a previous session (stored in `localStorage`) are picked up and
+
+ * their trackers are re-activated.
+ *
+ * @param {object} params - The parameters for the hook.
+ * @param {() => Promise<void>} params.initializeTransactionsPool - The `initializeTransactionsPool` function from your Pulsar store instance.
+ * @param {(error: Error) => void} [params.onError] - An optional custom function to handle any errors that occur during initialization. Defaults to `console.error`.
+ *
+ * @example
+ * ```tsx
+ * import { useInitializeTransactionsPool } from '@tuwaio/pulsar-react';
+ * import { pulsarStore } from './path/to/your/store';
+ *
+ * function AppLayout({ children }) {
+ * // This hook will run once when the layout mounts.
+ * useInitializeTransactionsPool({
+ * initializeTransactionsPool: pulsarStore.getState().initializeTransactionsPool,
+ * onError: (err) => console.warn('Failed to re-initialize trackers:', err),
+ * });
+ *
+ * return <div>{children}</div>;
+ * }
+ * ```
  */
-declare const useInitializeTransactionsPool: (initializeTransactionsPool: () => Promise<void>, customErrorHandler?: (error: Error) => void) => void;
+declare const useInitializeTransactionsPool: ({ initializeTransactionsPool, onError, }: {
+    initializeTransactionsPool: () => Promise<void>;
+    onError?: (error: Error) => void;
+}) => void;
 
 export { useInitializeTransactionsPool };

package/dist/index.js

@@ -1,2 +1,2 @@
-'use strict';var react=require('react');var t=async(r,o)=>{try{await r();}catch(i){o(i);}},n=(r,o)=>{let i=e=>{o?o(e):console.error("Failed to initialize transactions pool:",e);};react.useEffect(()=>{t(r,i);},[r,o]);};exports.useInitializeTransactionsPool=n;//# sourceMappingURL=index.js.map
+'use strict';var react=require('react');var c=({initializeTransactionsPool:r,onError:o})=>{react.useEffect(()=>{(async()=>{try{await r();}catch(e){(o??(i=>console.error("Failed to initialize transactions pool:",i)))(e);}})();},[r,o]);};exports.useInitializeTransactionsPool=c;//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useInitializeTransactionsPool.tsx"],"names":["loadTransactions","initializeTransactionsPool","errorHandler","error","useInitializeTransactionsPool","customErrorHandler","handleError","useEffect"],"mappings":"wCAeA,IAAMA,CAAAA,CAAmB,MACvBC,CAAAA,CACAC,CAAAA,GACkB,CAClB,GAAI,CACF,MAAMD,IACR,CAAA,MAASE,CAAAA,CAAO,CACdD,CAAAA,CAAaC,CAAc,EAC7B,CACF,CAAA,CASaC,CAAAA,CAAgC,CAC3CH,CAAAA,CACAI,CAAAA,GACG,CACH,IAAMC,CAAAA,CAAeH,CAAAA,EAAiB,CAChCE,CAAAA,CACFA,CAAAA,CAAmBF,CAAK,CAAA,CAExB,OAAA,CAAQ,KAAA,CAAM,yCAAA,CAA2CA,CAAK,EAElE,EAEAI,eAAAA,CAAU,IAAM,CAGdP,CAAAA,CAAiBC,CAAAA,CAA4BK,CAAW,EAC1D,CAAA,CAAG,CAACL,CAAAA,CAA4BI,CAAkB,CAAC,EACrD","file":"index.js","sourcesContent":["/**\n * @file This file defines a React hook for initializing the transaction pool.\n * This hook is crucial for resuming the tracking of pending transactions after a page reload.\n */\n\nimport { useEffect } from 'react';\n\n/**\n * An internal helper function to safely execute the initialization process.\n * It wraps the call in a try-catch block to handle any potential errors.\n *\n * @param {() => Promise<void>} initializeTransactionsPool - The async function from the store that starts the tracking process for pending transactions.\n * @param {(error: Error) => void} errorHandler - A callback function to handle any errors that occur during initialization.\n * @returns {Promise<void>}\n */\nconst loadTransactions = async (\n  initializeTransactionsPool: () => Promise<void>,\n  errorHandler: (error: Error) => void,\n): Promise<void> => {\n  try {\n    await initializeTransactionsPool();\n  } catch (error) {\n    errorHandler(error as Error);\n  }\n};\n\n/**\n * A React hook that triggers the initialization of the transaction pool when the component mounts.\n * This ensures that any pending transactions from a previous session are picked up and tracked again.\n *\n * @param {() => Promise<void>} initializeTransactionsPool - The `initializeTransactionsPool` function from the Zustand store.\n * @param {(error: Error) => void} [customErrorHandler] - An optional custom function to handle errors during initialization. Defaults to console.error.\n */\nexport const useInitializeTransactionsPool = (\n  initializeTransactionsPool: () => Promise<void>,\n  customErrorHandler?: (error: Error) => void,\n) => {\n  const handleError = (error: Error) => {\n    if (customErrorHandler) {\n      customErrorHandler(error);\n    } else {\n      console.error('Failed to initialize transactions pool:', error);\n    }\n  };\n\n  useEffect(() => {\n    // The dependency array ensures this effect runs only when the function reference changes,\n    // which should typically be only on the initial render.\n    loadTransactions(initializeTransactionsPool, handleError);\n  }, [initializeTransactionsPool, customErrorHandler]);\n};\n"]}
+{"version":3,"sources":["../src/hooks/useInitializeTransactionsPool.tsx"],"names":["useInitializeTransactionsPool","initializeTransactionsPool","onError","useEffect","error","e"],"mappings":"4CAmCaA,CAAAA,CAAgC,CAAC,CAC5C,0BAAA,CAAAC,CAAAA,CACA,QAAAC,CACF,CAAA,GAGM,CACJC,eAAAA,CAAU,IAAM,EACe,SAAY,CACvC,GAAI,CACF,MAAMF,IACR,CAAA,MAASG,EAAO,CAAA,CACOF,CAAAA,GAAaG,GAAa,OAAA,CAAQ,KAAA,CAAM,0CAA2CA,CAAC,CAAA,CAAA,EAC5FD,CAAc,EAC7B,CACF,KAOF,CAAA,CAAG,CAACH,CAAAA,CAA4BC,CAAO,CAAC,EAC1C","file":"index.js","sourcesContent":["/**\n * @file This file defines a React hook for initializing the transaction pool.\n * This hook is crucial for resuming the tracking of pending transactions after a page reload.\n */\n\nimport { useEffect } from 'react';\n\n/**\n * A React hook that triggers the initialization of the transaction pool when the component mounts.\n *\n * This should be used once in your application's layout or root component. It ensures that any\n * pending transactions from a previous session (stored in `localStorage`) are picked up and\n\n * their trackers are re-activated.\n *\n * @param {object} params - The parameters for the hook.\n * @param {() => Promise<void>} params.initializeTransactionsPool - The `initializeTransactionsPool` function from your Pulsar store instance.\n * @param {(error: Error) => void} [params.onError] - An optional custom function to handle any errors that occur during initialization. Defaults to `console.error`.\n *\n * @example\n * ```tsx\n * import { useInitializeTransactionsPool } from '@tuwaio/pulsar-react';\n * import { pulsarStore } from './path/to/your/store';\n *\n * function AppLayout({ children }) {\n * // This hook will run once when the layout mounts.\n * useInitializeTransactionsPool({\n * initializeTransactionsPool: pulsarStore.getState().initializeTransactionsPool,\n * onError: (err) => console.warn('Failed to re-initialize trackers:', err),\n * });\n *\n * return <div>{children}</div>;\n * }\n * ```\n */\nexport const useInitializeTransactionsPool = ({\n  initializeTransactionsPool,\n  onError,\n}: {\n  initializeTransactionsPool: () => Promise<void>;\n  onError?: (error: Error) => void;\n}) => {\n  useEffect(() => {\n    const reinitializeTrackers = async () => {\n      try {\n        await initializeTransactionsPool();\n      } catch (error) {\n        const errorHandler = onError ?? ((e: Error) => console.error('Failed to initialize transactions pool:', e));\n        errorHandler(error as Error);\n      }\n    };\n\n    // Run the initialization process.\n    reinitializeTrackers();\n\n    // The dependency array is empty to ensure this effect runs only once on mount.\n    // The functions from a vanilla Zustand store are stable and do not need to be in the array.\n  }, [initializeTransactionsPool, onError]);\n};\n"]}

package/dist/index.mjs

@@ -1,2 +1,2 @@
-import {useEffect}from'react';var t=async(r,o)=>{try{await r();}catch(i){o(i);}},n=(r,o)=>{let i=e=>{o?o(e):console.error("Failed to initialize transactions pool:",e);};useEffect(()=>{t(r,i);},[r,o]);};export{n as useInitializeTransactionsPool};//# sourceMappingURL=index.mjs.map
+import {useEffect}from'react';var c=({initializeTransactionsPool:r,onError:o})=>{useEffect(()=>{(async()=>{try{await r();}catch(e){(o??(i=>console.error("Failed to initialize transactions pool:",i)))(e);}})();},[r,o]);};export{c as useInitializeTransactionsPool};//# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useInitializeTransactionsPool.tsx"],"names":["loadTransactions","initializeTransactionsPool","errorHandler","error","useInitializeTransactionsPool","customErrorHandler","handleError","useEffect"],"mappings":"8BAeA,IAAMA,CAAAA,CAAmB,MACvBC,CAAAA,CACAC,CAAAA,GACkB,CAClB,GAAI,CACF,MAAMD,IACR,CAAA,MAASE,CAAAA,CAAO,CACdD,CAAAA,CAAaC,CAAc,EAC7B,CACF,CAAA,CASaC,CAAAA,CAAgC,CAC3CH,CAAAA,CACAI,CAAAA,GACG,CACH,IAAMC,CAAAA,CAAeH,CAAAA,EAAiB,CAChCE,CAAAA,CACFA,CAAAA,CAAmBF,CAAK,CAAA,CAExB,OAAA,CAAQ,KAAA,CAAM,yCAAA,CAA2CA,CAAK,EAElE,EAEAI,SAAAA,CAAU,IAAM,CAGdP,CAAAA,CAAiBC,CAAAA,CAA4BK,CAAW,EAC1D,CAAA,CAAG,CAACL,CAAAA,CAA4BI,CAAkB,CAAC,EACrD","file":"index.mjs","sourcesContent":["/**\n * @file This file defines a React hook for initializing the transaction pool.\n * This hook is crucial for resuming the tracking of pending transactions after a page reload.\n */\n\nimport { useEffect } from 'react';\n\n/**\n * An internal helper function to safely execute the initialization process.\n * It wraps the call in a try-catch block to handle any potential errors.\n *\n * @param {() => Promise<void>} initializeTransactionsPool - The async function from the store that starts the tracking process for pending transactions.\n * @param {(error: Error) => void} errorHandler - A callback function to handle any errors that occur during initialization.\n * @returns {Promise<void>}\n */\nconst loadTransactions = async (\n  initializeTransactionsPool: () => Promise<void>,\n  errorHandler: (error: Error) => void,\n): Promise<void> => {\n  try {\n    await initializeTransactionsPool();\n  } catch (error) {\n    errorHandler(error as Error);\n  }\n};\n\n/**\n * A React hook that triggers the initialization of the transaction pool when the component mounts.\n * This ensures that any pending transactions from a previous session are picked up and tracked again.\n *\n * @param {() => Promise<void>} initializeTransactionsPool - The `initializeTransactionsPool` function from the Zustand store.\n * @param {(error: Error) => void} [customErrorHandler] - An optional custom function to handle errors during initialization. Defaults to console.error.\n */\nexport const useInitializeTransactionsPool = (\n  initializeTransactionsPool: () => Promise<void>,\n  customErrorHandler?: (error: Error) => void,\n) => {\n  const handleError = (error: Error) => {\n    if (customErrorHandler) {\n      customErrorHandler(error);\n    } else {\n      console.error('Failed to initialize transactions pool:', error);\n    }\n  };\n\n  useEffect(() => {\n    // The dependency array ensures this effect runs only when the function reference changes,\n    // which should typically be only on the initial render.\n    loadTransactions(initializeTransactionsPool, handleError);\n  }, [initializeTransactionsPool, customErrorHandler]);\n};\n"]}
+{"version":3,"sources":["../src/hooks/useInitializeTransactionsPool.tsx"],"names":["useInitializeTransactionsPool","initializeTransactionsPool","onError","useEffect","error","e"],"mappings":"kCAmCaA,CAAAA,CAAgC,CAAC,CAC5C,0BAAA,CAAAC,CAAAA,CACA,QAAAC,CACF,CAAA,GAGM,CACJC,SAAAA,CAAU,IAAM,EACe,SAAY,CACvC,GAAI,CACF,MAAMF,IACR,CAAA,MAASG,EAAO,CAAA,CACOF,CAAAA,GAAaG,GAAa,OAAA,CAAQ,KAAA,CAAM,0CAA2CA,CAAC,CAAA,CAAA,EAC5FD,CAAc,EAC7B,CACF,KAOF,CAAA,CAAG,CAACH,CAAAA,CAA4BC,CAAO,CAAC,EAC1C","file":"index.mjs","sourcesContent":["/**\n * @file This file defines a React hook for initializing the transaction pool.\n * This hook is crucial for resuming the tracking of pending transactions after a page reload.\n */\n\nimport { useEffect } from 'react';\n\n/**\n * A React hook that triggers the initialization of the transaction pool when the component mounts.\n *\n * This should be used once in your application's layout or root component. It ensures that any\n * pending transactions from a previous session (stored in `localStorage`) are picked up and\n\n * their trackers are re-activated.\n *\n * @param {object} params - The parameters for the hook.\n * @param {() => Promise<void>} params.initializeTransactionsPool - The `initializeTransactionsPool` function from your Pulsar store instance.\n * @param {(error: Error) => void} [params.onError] - An optional custom function to handle any errors that occur during initialization. Defaults to `console.error`.\n *\n * @example\n * ```tsx\n * import { useInitializeTransactionsPool } from '@tuwaio/pulsar-react';\n * import { pulsarStore } from './path/to/your/store';\n *\n * function AppLayout({ children }) {\n * // This hook will run once when the layout mounts.\n * useInitializeTransactionsPool({\n * initializeTransactionsPool: pulsarStore.getState().initializeTransactionsPool,\n * onError: (err) => console.warn('Failed to re-initialize trackers:', err),\n * });\n *\n * return <div>{children}</div>;\n * }\n * ```\n */\nexport const useInitializeTransactionsPool = ({\n  initializeTransactionsPool,\n  onError,\n}: {\n  initializeTransactionsPool: () => Promise<void>;\n  onError?: (error: Error) => void;\n}) => {\n  useEffect(() => {\n    const reinitializeTrackers = async () => {\n      try {\n        await initializeTransactionsPool();\n      } catch (error) {\n        const errorHandler = onError ?? ((e: Error) => console.error('Failed to initialize transactions pool:', e));\n        errorHandler(error as Error);\n      }\n    };\n\n    // Run the initialization process.\n    reinitializeTrackers();\n\n    // The dependency array is empty to ensure this effect runs only once on mount.\n    // The functions from a vanilla Zustand store are stable and do not need to be in the array.\n  }, [initializeTransactionsPool, onError]);\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuwaio/pulsar-react",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "private": false,
   "author": "Oleksandr Tkach",
   "license": "Apache-2.0",
@@ -41,7 +41,7 @@
     "react": ">=19"
   },
   "devDependencies": {
-    "@types/react": "^19.1.10",
+    "@types/react": "^19.1.12",
     "react": "^19.1.1",
     "tsup": "^8.5.0",
     "typescript": "^5.9.2"