Відстеження транзакцій у React за допомогою Pulsar

pnpm add @tuwaio/pulsar-core @tuwaio/pulsar-evm @tuwaio/pulsar-react \  @tuwaio/orbit-core @tuwaio/orbit-evm @wagmi/core viem zustand immer dayjs

pnpm add @tuwaio/pulsar-core @tuwaio/pulsar-solana @tuwaio/pulsar-react \  @tuwaio/orbit-core @tuwaio/orbit-solana @solana/kit \  @wallet-standard/app @wallet-standard/ui-core @wallet-standard/ui-registry zustand immer dayjs

// A Counter contract deployed on Sepolia.export const COUNTER_ADDRESS = '0xAe7f46914De82028eCB7E2bF97Feb3D3dDCc2BAB'; export const CounterAbi = [  {    inputs: [],    name: 'decrement',    outputs: [],    stateMutability: 'nonpayable',    type: 'function',  },  {    inputs: [],    name: 'getCurrentNumber',    outputs: [      {        internalType: 'uint256',        name: '',        type: 'uint256',      },    ],    stateMutability: 'view',    type: 'function',  },  {    inputs: [],    name: 'increment',    outputs: [],    stateMutability: 'nonpayable',    type: 'function',  },] as const;

{  "address": "<your program address>",  "version": "0.1.0",  "name": "solanatest",  "instructions": [    {      "name": "increment",      "accounts": [        {          "name": "solanatest",          "isMut": true,          "isSigner": false        }      ],      "args": []    }  ]}

pnpm add -D @codama/cli @codama/renderers-js

{  "idl": "src/targets/solanatest/idl/solanatest.json",  "scripts": {    "js": {      "from": "@codama/renderers-js",      "args": [        "src/programs/solanatest/generated",        {          "generatedFolder": "",          "syncPackageJson": false,          "deleteFolderBeforeRendering": true,          "kitImportStrategy": "rootOnly"        }      ]    }  }}

pnpm exec codama run js

import { type Config, writeContract } from '@wagmi/core';import { sepolia } from 'viem/chains'; import { COUNTER_ADDRESS, CounterAbi } from '@/abis/CounterAbi'; // Returns the transaction hash, which Pulsar uses as the txKey.export function increment({ wagmiConfig }: { wagmiConfig: Config }) {  return writeContract(wagmiConfig, {    abi: CounterAbi,    address: COUNTER_ADDRESS,    functionName: 'increment',    chainId: sepolia.id,  });}

import { createPimlicoSmartAccountClient } from '@tuwaio/orbit-evm';import type { Config } from '@wagmi/core';import { encodeFunctionData } from 'viem';import { sepolia } from 'viem/chains'; import { COUNTER_ADDRESS, CounterAbi } from '@/abis/CounterAbi'; // Returns the userOpHash, which Pulsar uses as the txKey.export async function incrementWithSmartAccount({  wagmiConfig,  pimlicoApiKey,}: {  wagmiConfig: Config;  pimlicoApiKey?: string;}) {  // A Solady smart account owned by the connected wallet, sent through the Pimlico bundler.  // With an API key, gas is sponsored by the Pimlico paymaster by default.  const { account, bundlerClient } = await createPimlicoSmartAccountClient({    chain: sepolia,    wagmiConfig,    apiKey: pimlicoApiKey,  });   return bundlerClient.sendUserOperation({    account,    calls: [      {        to: COUNTER_ADDRESS,        data: encodeFunctionData({ abi: CounterAbi, functionName: 'increment' }),      },    ],  });}

import { address, type TransactionSendingSigner } from '@solana/kit';import type { SolanaClient } from '@tuwaio/orbit-solana';import { signAndSendSolanaTx } from '@tuwaio/pulsar-solana'; import { getIncrementInstruction } from '@/programs'; const PROGRAM_ADDRESS = address('<your program address>');const COUNTER_ACCOUNT = address('<your counter account>'); // Returns the transaction signature, which Pulsar uses as the txKey.export function increment({ client, signer }: { client: SolanaClient; signer: TransactionSendingSigner }) {  return signAndSendSolanaTx({    client,    signer,    instruction: getIncrementInstruction({ solanatest: COUNTER_ACCOUNT }, { programAddress: PROGRAM_ADDRESS }),  });}

'use client'; import { createBoundedUseStore, createPulsarStore, type EvmTransaction } from '@tuwaio/pulsar-core';import { pulsarEvmAdapter } from '@tuwaio/pulsar-evm'; import { appChains, wagmiConfig } from '@/configs/wagmiConfig'; // Typed transactions of your apptype IncrementTx = EvmTransaction & {  type: 'increment';  payload: {    value: number;  };}; export type TransactionUnion = IncrementTx; export const pulsarStore = createPulsarStore<TransactionUnion>({  name: 'transactions-tracking-storage', // localStorage key  adapter: pulsarEvmAdapter(wagmiConfig, appChains),  beforeTxProcess: () => {    if (!navigator.onLine) throw new Error('You are offline.');  },}); export const usePulsarStore = createBoundedUseStore(pulsarStore);

'use client'; import { createBoundedUseStore, createPulsarStore, type SolanaTransaction } from '@tuwaio/pulsar-core';import { pulsarSolanaAdapter } from '@tuwaio/pulsar-solana'; import { solanaRPCUrls } from '@/configs/appConfig'; // Typed transactions of your apptype IncrementTx = SolanaTransaction & {  type: 'increment';  payload: {    value: number;  };}; export type TransactionUnion = IncrementTx; export const pulsarStore = createPulsarStore<TransactionUnion>({  name: 'transactions-tracking-storage', // localStorage key  adapter: pulsarSolanaAdapter({ rpcUrls: solanaRPCUrls }),  beforeTxProcess: () => {    if (!navigator.onLine) throw new Error('You are offline.');  },}); export const usePulsarStore = createBoundedUseStore(pulsarStore);

'use client'; import { ConnectButton } from '@tuwaio/nova-connect/components';import { OrbitAdapter } from '@tuwaio/orbit-core';import { TransactionTracker } from '@tuwaio/pulsar-core';import { sepolia } from 'viem/chains'; import { wagmiConfig } from '@/configs/wagmiConfig';import { usePulsarStore } from '@/hooks/txTrackingHooks';import { increment } from '@/transactions/actions/increment';import { incrementWithSmartAccount } from '@/transactions/actions/incrementWithSmartAccount'; const pimlicoApiKey = process.env.NEXT_PUBLIC_PIMLICO_API_KEY; export const Increment = () => {  const executeTxAction = usePulsarStore((state) => state.executeTxAction);  const pendingCount = usePulsarStore(    (state) => Object.values(state.transactionsPool).filter((tx) => tx.pending).length,  );   const handleIncrement = async () => {    try {      await executeTxAction({        actionFunction: () => increment({ wagmiConfig }),        params: {          type: 'increment',          adapter: OrbitAdapter.EVM,          desiredChainID: sepolia.id, // the wallet is asked to switch to Sepolia if needed          title: ['Incrementing', 'Incremented', 'Increment failed', 'Increment replaced'],          description: 'Increment the counter by 1.',          payload: { value: 1 },          withTrackedModal: true, // opens the tracking modal of Nova Transactions        },        onSuccess: (tx) => console.log('Incremented in', tx.hash),      });    } catch (error) {      // Rejected signature, declined network switch, failed preflight... Also saved in `initialTx.error`.      console.error(error);    }  };   const handleIncrementWithSmartAccount = async () => {    try {      await executeTxAction({        actionFunction: () => incrementWithSmartAccount({ wagmiConfig, pimlicoApiKey }),        params: {          type: 'increment',          adapter: OrbitAdapter.EVM,          desiredChainID: sepolia.id,          title: 'Increment with a smart account',          payload: { value: 1 },          tracker: TransactionTracker.ERC4337, // required: UserOperations are not detected automatically          pimlicoApiKey, // saved with the transaction to resume tracking after a reload        },      });    } catch (error) {      console.error(error);    }  };   return (    <div className="flex flex-col items-start gap-4">      <ConnectButton />      <button type="button" onClick={handleIncrement}>        Increment      </button>      <button type="button" onClick={handleIncrementWithSmartAccount}>        Increment with a smart account      </button>      {pendingCount > 0 && <p>{pendingCount} pending transaction(s)</p>}    </div>  );};

'use client'; import { ConnectButton } from '@tuwaio/nova-connect/components';import { useSatelliteConnectStore } from '@tuwaio/nova-connect/satellite';import { OrbitAdapter } from '@tuwaio/orbit-core';import { createSolanaClientWithCache, createSolanaTransactionSendingSigner } from '@tuwaio/orbit-solana';import type { SolanaConnection } from '@tuwaio/satellite-solana'; import { usePulsarStore } from '@/hooks/txTrackingHooks';import { increment } from '@/transactions/actions/increment'; export const Increment = () => {  const activeConnection = useSatelliteConnectStore((state) => state.activeConnection) as SolanaConnection | undefined;  const executeTxAction = usePulsarStore((state) => state.executeTxAction);  const account = activeConnection?.connectedAccount;   const handleIncrement = async () => {    if (!activeConnection || !account) return;    const cluster = String(activeConnection.chainId); // the cluster moniker of the connection, e.g. 'devnet'    const rpcUrl = activeConnection.rpcURL;    try {      await executeTxAction({        actionFunction: () =>          increment({            client: createSolanaClientWithCache({ rpcUrlOrMoniker: rpcUrl }),            signer: createSolanaTransactionSendingSigner(account, cluster),          }),        params: {          type: 'increment',          adapter: OrbitAdapter.SOLANA,          desiredChainID: cluster,          title: ['Incrementing', 'Incremented', 'Increment failed', 'Increment replaced'],          description: 'Increment the counter by 1.',          payload: { value: 1 },          withTrackedModal: true, // opens the tracking modal of Nova Transactions        },        onSuccess: (tx) => console.log('Finalized in slot', tx.slot),      });    } catch (error) {      // Rejected signature, wrong cluster, failed preflight... Also saved in `initialTx.error`.      console.error(error);    }  };   return (    <div className="flex flex-col items-start gap-4">      <ConnectButton />      {activeConnection?.isConnected && account && (        <button type="button" onClick={handleIncrement}>          Increment        </button>      )}    </div>  );};