Getting Started
This guide will walk you through the essential steps to integrate the Pulsar engine into your existing React application.
By the end of this guide, you will have a fully functional system for tracking and displaying user transactions, including:
- A headless state management store powered by
@tuwaio/pulsar-core. - EVM chain support via
@tuwaio/pulsar-evm.
Let’s begin.
Choose your preferred wallet connector:
Step 1: Wallet Connector Setup
The Pulsar engine works with any wagmi-based setup. This guide uses RainbowKit as an example.
First, install the necessary Pulsar packages for transaction tracking and state management.
Terminal
Step 2: Contract ABI
You'll need the Application Binary Interface (ABI) for the smart contract you wish to interact with. The ABI defines the contract's methods and structures. For this demonstration, we will use the ABI from a standard Counter contract.
CounterAbi.ts
Step 3: Create a Contract Action
The next step involves wrapping a smart contract function into a reusable 'action'. This approach makes the function compatible with the Pulsar engine. While this step isn't strictly necessary, creating actions is a powerful pattern for simplifying code and avoiding repetition, especially in larger applications. This example demonstrates creating an action for the `increment` function:
increment.ts
Step 4: Handle Transaction Callbacks
To handle logic after a transaction succeeds, you can define typed transactions and a callback handler. This allows you to run specific code, like updating your UI or logging, based on the transaction type. This feature is optional but highly recommended for managing post-transaction side effects.
onSucceedCallbacks.ts
Step 5: Create the Transaction Store
Next, create the central Zustand store that will manage the state of all transactions. This is where the Pulsar engine is initialized. The `createPulsarStore` function takes your configuration, including the `onSucceedCallbacks` handler and, most importantly, the `evmAdapter`. The adapter is configured by passing it your `wagmi` config, linking Pulsar to your app's wallet connection.
txTrackingHooks.ts
Step 6: Trigger the Transaction
Finally, create a component to trigger the transaction. When a user clicks 'Increment,' the `handleTransaction` function orchestrates the entire process. It dispatches the transaction, adds it to the pool, and from this point on, the Pulsar engine automatically handles all status updates.
Increment.tsx