Tx Builder

This React-specific feature allows your application to easily make transactions with all the JavaScript app lifecycle functions baked-in to trigger error and success messages, along with other cool features. Transaction Builder demonstrates the power of our Write DAO Data utilities when paired with the React Component Library to help users build transactions. Transactions are at the core of our platform, so we designed this library to provide helper utilities for this purpose. This library is an evolution of the patterns utilized in DAOhaus v2.

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.


You can install this via npm or yarn to use in your external app:

npm install @daohaus/tx-builder-feature
# yarn
yarn add @daohaus/tx-builder-feature

The package name for importing is @daohaus/tx-buiilder-feature. If you've pulled down the entire monorepo you can reference it via this namespace, such as import { TXBuilder } from '@daohaus/tx-builder-feature';.


Begin by importing the TXBuilder component from the @daohaus/tx-builder-feature package at a high-level component, such as App.tsx, in your app. This doesn't need to be at the root of your app with other Context Providers.


// App.tsx
import { TXBuilder } from '@daohaus/tx-builder-feature'

Once TXBuilder is imported, you can wrap your component with it and pass in the connected user's provider and chainId, which can come in from DAOhaus Connect.

In this example, TXBuilder is used in combination with DAOhaus Connect, where the provider and chainId are coming from the DAOhaus Connect context and are provided as props to TXBuilder:

// App.tsx
const { provider, chainId } = useHausConnect()

;<TXBuilder provider={provider} chainId={chainId}>
  <YourComponents />

<TXBuilder /> expects a provider, chainId, and children as props.


Tx Builder exposes useful functionality that you can use throughout your app as well. You can access these by importing useTxBuilder from Tx Builder:

// Anywhere in your app

;`import { useTxBuilder } from '@daohaus/tx-builder-feature';`

const { fireTransaction } = useTxBuilder()

You're then able to utilize the fireTranscation function which composes the transation calls and subgraph polling. For a more detailed example, look to the SummonerForm.tsx in our Summon App.


TXBuilder is used in our Summon App. We'll be adding more examples to our documentation as we go!