SplitsKit

This page explains how to use SplitsKit, a React component library around the React SDK. SplitsKit 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).

Get an interactive demo of the components by visiting the Storybook (opens in a new tab).

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

yarn add @0xsplits/splits-kit

Usage

Like the React SDK, a SplitsProvider component is needed to manage context for all components. SplitsKit also uses wagmi, so you will need to wrap your app in a WagmiConfig as well.

This sample code loads and displays a DisplaySplit component.

import { WagmiConfig, createConfig, configureChains, mainnet } from 'wagmi'
import { SplitsProvider } from '@0xsplits/splits-sdk-react'
import { publicProvider } from 'wagmi/providers/public'
import { DisplaySplit } from '@0xsplits/splits-kit'
 
import '@0xsplits/splits-kit/dist/styles.css'
 
const SPLIT_ADDRESS = '0xF8843981e7846945960f53243cA2Fd42a579f719'
 
const { publicClient, webSocketPublicClient } = configureChains(
  [mainnet],
  [publicProvider()],
)
 
const splitsConfig = {
  chainId: 1,
  publicClient,
}
 
const wagmiConfig = createConfig({
  publicClient,
  webSocketPublicClient,
})
 
export default function App() {
  return (
    <WagmiConfig config={wagmiConfig}>
      <SplitsProvider config={splitsConfig}>
        <YourComponents />
      </SplitsProvider>
    </WagmiConfig>
  )
}
 
function YourComponents() {
  return (
    <div>
      <DisplaySplit chainId={1} address={SPLIT_ADDRESS} />
    </div>
  )
}

Initialization

SplitsProvider

Provider component that is needed to manage context for all SplitsKit components. See documentation in the React SDK.

WagmiConfig

Config component for Wagmi. See documentation in the Wagmi docs (opens in a new tab).

Components

CreateSplit

A form for creating a new split.

Usage

<CreateSplit
  chainId={1}
  defaultDistributorFee={0.1} // defaults to 0.1
  defaultController="0x0000000000000000000000000000000000000000" // defaults to 0x0000000000000000000000000000000000000000
  defaultRecipients={[
    {
      address: '',
      percentAllocation: 0,
    },
  ]} // defaults to [[{address: "",percentAllocation: 0,},]]
  displayChain={false} // defaults to true
  width="sm" // defaults to "md"
  theme="dark" // defaults to "system"
  onSuccess={() => {}} // called when the split is successfully created
/>

DisplaySplit

Display a split with its recipients and balances, with ability to distribute balances.

In order to display/distribute balances, SplitsProvider must be passed an Alchemy (opens in a new tab) or Infura (opens in a new tab) publicClient.

Usage

<DisplaySplit
  chainId={1}
  address={SPLIT_ADDRESS}
  displayBalances={false} // defaults to true
  displayChain={false} // defaults to true
  width="sm" // defaults to "md"
  theme="dark" // defaults to "system"
  onSuccess={() => {}} // called when the split is successfully distributed
  onError={() => {}} // called when the split fails to distribute
/>

React SDK Subgraph