Tx builder allows your React application to easily make transactions with JavaScript lifecycle functions baked-in to trigger error and success messages, along with other cool features. Transactions are at the core of our platform, so we designed this library to provide helper utilities for this purpose.

The core element is a React Context that bundles together generic transaction calls with subgraph polling within the function. This provides lifecycle methods that we can use to control UI based on synchronized events from within the React component.

The package uses viem (opens in a new tab).

Github (opens in a new tab)

Related Packages

NPM (opens in a new tab)



yarn add @daohaus/tx-builder


Graph API Keys

If you are trying to query for data on Etheruem Mainnet or Gnosis Chain (and more to come) you will need to provide an API key from Th Graph. Learn to get those key here (opens in a new tab) and here (opens in a new tab).

RPC endpoints

This package makes transaction to the blockchain so you will also need to provide RPC endpoints for the chains you are targeting.

Blockchain Explorer API keys

This package fetches ABIs in some instances if you are not providing the ABI in the txLego. You can provide those keys from etherscan (opens in a new tab) flavored explorers if needed.


  //all other props
  graphApiKeys={{'0x1': 'some api key'}}
  rpcs={{'0x1': 'some rpc url'}}
  explorerKeys={{'0x1': 'some explorer api key'}}

How to add to your application

Tx Builder uses viem (opens in a new tab) and requires you to pass a publicClient as a prop. This example shows a component wrapped in our DHConnectProvider from the @daohaus/connect package that set up a publicClient upon wallet connection.

import { TXBuilder } from '@daohaus/tx-builder';
export const SomePage = () => {
  const { publicClient } = useDHConnect();
  return (
Prop Name
chainIdTarget network chain id
daoIdTarget DAO contract addresss
safeIdTarget DAO's main treasury safe contract addresss
publicClientviem public client (opens in a new tab)
appStateObject of arbitrary state data passed to tx-builder
txLifeCycleFnsCustom life cycle functions (opens in a new tab) run on tx lifecycle moments
localABIsCustom ABIs you might want to pass to tx-builder, these can be added in your txLego as well
rpcsList of RPC endpoints by chain id
graphApiKeysList of The Graph API keys by chain id (required for Mainnet and Gnosis Chain)
explorerKeysList of Etherscan explorer keys by chain id

Here is a tutorial on how to build a form and fire a transaction.

Here are some examples of contract and transaction legos used in tx-builder.

How to fire a transaction

Tx Builder exposes several handy functions that can be used throughout your app. These can be accessed by importing useTxBuilder from Tx Builder:

// Anywhere in your app
import { useTxBuilder } from '@daohaus/tx-builder-feature';
const { fireTransaction } = useTxBuilder();
      onTxSuccess: () => {
        console.log('do something on success');

For a detailed example, refer to CancelProposal.tsx our Admin App (opens in a new tab).