React SDK

This page explains how to use the React SDK, a React wrapper around the Core SDK. The React SDK provides convenient hooks for easily fetching contract data and sending transactions. You can find the React SDK source code on Github (opens in a new tab).

To get started, install the package using yarn or npm.

yarn add @0xsplits/splits-sdk-react

Usage

A SplitsProvider component is needed to manage context for all splits hooks.

import { SplitsProvider, useSplitsClient } from '@0xsplits/splits-sdk-react'
 
function App() {
  return (
    <SplitsProvider>
      <YourComponents />
    </SplitsProvider>
  )
}
 
function YourComponents() {
  useSplitsClient({
    chainId: 1,
  })
 
  return <div>Hello World</div>
}

Initialization Hooks

useSplitsClient

Updates and returns the SplitsClient instance used by all hooks.

Usage

const args = {
  chainId,
  provider, // ethers provider
  signer, // ethers signer (optional, required if using any write functions)
  includeEnsNames, // boolean, defaults to false. If true, will return ens names for split recipients (only for mainnet)
  // If you want to return ens names on chains other than mainnet, you can pass in a mainnet provider
  // here. Be aware though that the ens name may not necessarily resolve to the proper address on the
  // other chain for non EOAs (e.g. Gnosis Safe's)
  ensProvider, // ethers provider (optional)
}
 
const splitsClient = useSplitsClient(args)

Read Hooks

useSplitMetadata

Fetches the given split from the subgraph

Usage

const { splitMetadata, isLoading, status, error } = useSplitMetadata(splitId)

useSplitEarnings

Fetches the given split's earnings from the subgraph. Will also optionally fetch active balances. See getSplitEarnings for more information on the input options.

Usage

const { splitEarnings, formattedSplitEarnings, isLoading, status, error } = useSplitEarnings(
  splitId,
  includeActiveBalances, // defaults to true
  erc20TokenList, // defaults to undefined
  formatted // defaults to true
)

useLiquidSplitMetadata

Fetches the given liquid split from the subgraph

Usage

const { liquidSplitMetadata, isLoading, status, error } = useLiquidSplitMetadata(liquidSplitId)

useWaterfallMetadata

Fetches the given waterfall module from the subgraph

Usage

const { waterfallMetadata, isLoading, status, error } = useWaterfallMetadata(waterfallModuleId)

useVestingMetadata

Fetches the given vesting module from the subgraph

Usage

const { vestingMetadata, isLoading, status, error } = useVestingMetadata(vestingModuleId)

Transaction Hooks

Each of the transaction functions from the core sdk has a react hook wrapper. It returns the core sdk function and some state properties for monitoring the transaction progress.

Usage

const { createSplit, status, txHash, error } = useCreateSplit()

Response

{
  createSplit: function // This will be the core sdk function associated with each hook
  status?: 'pendingApproval' | 'txInProgress' | 'complete' | 'error'
  txHash?: string
  error?: any
}

List of transaction hooks

// splits
useCreateSplit
useUpdateSplit
useDistributeToken
useUpdateSplitAndDistributeToken
useWithdrawFunds
useInitiateControlTransfer
useCancelControlTransfer
useAcceptControlTransfer
useMakeSplitImmutable
 
// liquid splits
useCreateLiquidSplit
useDistributeLiquidSplitToken
useTransferLiquidSplitOwnership
 
// waterfalls
useCreateWaterfallModule
useWaterfallFunds
useRecoverNonWaterfallFunds
useWithdrawWaterfallPullFunds
 
// vesting
useCreateVestingModule
useStartVest
useReleaseVestedFunds
 
// templates
useCreateRecoup
 
// multicall
useMulticall

Multicall Subgraph