@daohaus/tx-builder

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)

Usage

Installation

yarn add @daohaus/tx-builder

Requirements

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.

Examples

<TXBuilder
  ...
  //all other props
  chainId={'0x1'}
  graphApiKeys={{'0x1': 'some api key'}}
  rpcs={{'0x1': 'some rpc url'}}
  explorerKeys={{'0x1': 'some explorer api key'}}
>
  {children}
</TXBuilder>

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 (
    <TXBuilder
      publicClient={publicClient}
      chainId={'0x1'}
      daoId={'0xsomedaoaddress'}
      safeId={'0x0somedaosafeaddress'}
    >
      {children}
    </TXBuilder>
  );
};

Prop Name
`chainId`	Target network chain id
`daoId`	Target DAO contract addresss
`safeId`	Target DAO's main treasury safe contract addresss
`publicClient`	viem public client (opens in a new tab)
`appState`	Object of arbitrary state data passed to `tx-builder`
`txLifeCycleFns`	Custom life cycle functions (opens in a new tab) run on tx lifecycle moments
`localABIs`	Custom ABIs you might want to pass to `tx-builder`, these can be added in your `txLego` as well
`rpcs`	List of RPC endpoints by chain id
`graphApiKeys`	List of The Graph API keys by chain id (required for Mainnet and Gnosis Chain)
`explorerKeys`	List 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();
 
...
 
  fireTransaction({
    tx: ACTION_TX.SOME_TX_LEGO,
    lifeCycleFns:{
      onTxSuccess: () => {
        console.log('do something on success');
      },
    };

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

form-builder moloch-v3-legos