@tuwaio/pulsar-react 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +31 -24
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,14 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@tuwaio/pulsar-react)
|
|
4
4
|
[](./LICENSE)
|
|
5
|
-
[](https://github.com/TuwaIO/pulsar-core/actions)
|
|
6
6
|
|
|
7
|
-
Official React bindings for the Pulsar Engine. This package currently provides the essential
|
|
7
|
+
Official React bindings for the Pulsar Engine. This package currently provides the essential **`useInitializeTransactionsPool`** hook to resume tracking pending transactions after a page reload.
|
|
8
8
|
|
|
9
9
|
## 🏛️ Architecture
|
|
10
10
|
|
|
11
11
|
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.
|
|
12
12
|
|
|
13
|
+
---
|
|
14
|
+
|
|
13
15
|
## 💾 Installation
|
|
14
16
|
|
|
15
17
|
To use this package, you need the core Pulsar stack.
|
|
@@ -18,35 +20,37 @@ To use this package, you need the core Pulsar stack.
|
|
|
18
20
|
pnpm add @tuwaio/pulsar-react @tuwaio/pulsar-core @tuwaio/pulsar-evm
|
|
19
21
|
```
|
|
20
22
|
|
|
23
|
+
---
|
|
24
|
+
|
|
21
25
|
## 🚀 Getting Started
|
|
22
26
|
|
|
23
|
-
The
|
|
27
|
+
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.
|
|
28
|
+
|
|
29
|
+
Here is a complete example of the recommended setup:
|
|
24
30
|
|
|
25
31
|
### Step 1: Create Your `usePulsar` Hook
|
|
26
32
|
|
|
27
|
-
In your application
|
|
33
|
+
In your application, create a custom hook to access the Pulsar store, which is created by a function from `@tuwaio/pulsar-core`.
|
|
28
34
|
|
|
29
35
|
```tsx
|
|
30
36
|
// hooks/usePulsar.ts
|
|
31
37
|
import { createBoundedUseStore, createPulsarStore } from '@tuwaio/pulsar-core';
|
|
32
|
-
import { appChains } from './wagmi';
|
|
33
|
-
import { onSucceedCallbacks } from './onSucceedCallbacks';
|
|
34
|
-
|
|
35
|
-
// Define your custom transaction types if any
|
|
36
|
-
// type TransactionUnion = ...;
|
|
37
38
|
|
|
38
39
|
export const usePulsar = createBoundedUseStore(
|
|
39
|
-
createPulsarStore
|
|
40
|
+
createPulsarStore({
|
|
40
41
|
name: 'pulsar-storage',
|
|
41
|
-
|
|
42
|
-
|
|
42
|
+
// Plug in the EVM adapter with its config for example
|
|
43
|
+
adapters: [
|
|
44
|
+
evmAdapter(wagmiConfig, [mainnet, sepolia]),
|
|
45
|
+
],
|
|
46
|
+
// ... other configurations
|
|
43
47
|
}),
|
|
44
48
|
);
|
|
45
49
|
```
|
|
46
50
|
|
|
47
51
|
### Step 2: Create an Initializer Component
|
|
48
52
|
|
|
49
|
-
Create a small, client-side component
|
|
53
|
+
Create a small, client-side component that uses the hook from this package to initialize the store.
|
|
50
54
|
|
|
51
55
|
```tsx
|
|
52
56
|
// components/TransactionInitializer.tsx
|
|
@@ -56,32 +60,31 @@ import { useInitializeTransactionsPool } from '@tuwaio/pulsar-react';
|
|
|
56
60
|
import { usePulsar } from '../hooks/usePulsar';
|
|
57
61
|
|
|
58
62
|
export const TransactionInitializer = () => {
|
|
59
|
-
// Get the initialization function from
|
|
63
|
+
// 1. Get the initialization function from the core store hook
|
|
60
64
|
const { initializeTransactionsPool } = usePulsar();
|
|
61
65
|
|
|
62
|
-
// Pass it to the hook from this package to run on mount
|
|
66
|
+
// 2. Pass it to the hook from this package to run on mount
|
|
63
67
|
useInitializeTransactionsPool(initializeTransactionsPool);
|
|
64
68
|
|
|
65
69
|
return null; // This component renders nothing
|
|
66
70
|
};
|
|
67
71
|
```
|
|
68
72
|
|
|
69
|
-
### Step 3: Add the Initializer to Your App
|
|
73
|
+
### Step 3: Add the Initializer to Your App
|
|
70
74
|
|
|
71
|
-
|
|
75
|
+
Place the `TransactionInitializer` component at a high level in your application tree so it runs on every page load.
|
|
72
76
|
|
|
73
77
|
```tsx
|
|
74
|
-
// app/providers.tsx
|
|
75
|
-
'use client';
|
|
76
|
-
|
|
78
|
+
// app/layout.tsx or app/providers.tsx
|
|
77
79
|
import { WagmiProvider } from 'wagmi';
|
|
78
80
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
81
|
+
|
|
79
82
|
import { wagmiConfig } from './wagmi';
|
|
80
83
|
import { TransactionInitializer } from '../components/TransactionInitializer';
|
|
81
84
|
|
|
82
85
|
const queryClient = new QueryClient();
|
|
83
86
|
|
|
84
|
-
export function Providers({ children }
|
|
87
|
+
export function Providers({ children }) {
|
|
85
88
|
return (
|
|
86
89
|
<WagmiProvider config={wagmiConfig}>
|
|
87
90
|
<QueryClientProvider client={queryClient}>
|
|
@@ -93,14 +96,18 @@ export function Providers({ children }: { children: React.ReactNode }) {
|
|
|
93
96
|
}
|
|
94
97
|
```
|
|
95
98
|
|
|
96
|
-
|
|
99
|
+
---
|
|
97
100
|
|
|
98
|
-
|
|
101
|
+
## 📖 API: `useInitializeTransactionsPool`
|
|
102
|
+
|
|
103
|
+
This is the only hook exported by this package. Its purpose is to re-initialize the transaction store on page load.
|
|
99
104
|
|
|
100
105
|
### Parameters
|
|
101
|
-
- `initializeTransactionsPool`: The initialization function obtained from your
|
|
106
|
+
- `initializeTransactionsPool`: The initialization function obtained from your `usePulsar` hook.
|
|
102
107
|
- `customErrorHandler?`: (Optional) A callback function to handle any errors during initialization.
|
|
103
108
|
|
|
109
|
+
---
|
|
110
|
+
|
|
104
111
|
## 🤝 Contributing
|
|
105
112
|
|
|
106
113
|
As this package grows, contributions will be welcome! Please read our main **[Contribution Guidelines](https://github.com/TuwaIO/workflows/blob/main/CONTRIBUTING.md)**.
|