​
Installation

Use this React ui package to smoothly embed a fully featured Relay powered interface into your application. Start by installing the required packages:

yarn add viem wagmi @tanstack/react-query @reservoir0x/relay-kit-ui

If using typescript ensure that you’re on v5+. Refer to the package json for the latest version requirements for the peer dependencies.

​
Tanstack Query Setup

The hooks require TanStack Query to be installed and configured. Refer to the Tanstack installation instructions.

​
Configuration

Once all dependencies are installed you can now configure and wrap your application with the RelayKitProvider. You’ll need to also wrap your application with the QueryClientProvider and the WagmiProvider. Note the order in the snippet below.

import { RelayKitProvider } from '@reservoir0x/relay-kit-ui'
import { convertViemChainToRelayChain } from '@reservoir0x/relay-sdk'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { http, createConfig, WagmiProvider } from '@wagmi/core'
import { mainnet } from '@wagmi/core/chains'
import { MAINNET_RELAY_API, TESTNET_RELAY_API } from '@reservoir0x/relay-sdk'
import '@reservoir0x/relay-kit-ui/styles.css'

const queryClient = new QueryClient()

const chains = [convertViemChainToRelayChain(mainnet)]

const wagmiConfig = createConfig({
  appName: 'Relay Demo',
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  }
})

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <RelayKitProvider options={{
          appName: 'Relay Demo',
          appFees: [
            {
              recipient: '0x0000000000000000000000000000000000000000',
              fee: '100' // 1%
            }
          ]
          duneApiKey: "YOUR_DUNE_KEY",
          chains,
          baseApiUrl: MAINNET_RELAY_API
        }}>
        <WagmiProvider config={wagmiConfig}>
          <YourApp />
        </WagmiProvider>
      </RelayKitProvider>
    </QueryClientProvider>
  )
}

If you’re using the convertViemChainToRelayChain you’ll need to install and import the @reservoir0x/relay-sdk to use this function.

​
Styling

Make sure to import the styles.css globally otherwise the components will be unstyled:

import '@reservoir0x/relay-kit-ui/styles.css'

​
Configuring Chains Dynamically

While you can easily supply chains that your application supports, you may want to fetch the supported Relay chains dynamically and configure them in your application. This can be done by using the useRelayChains hook.

import { useRelayChains } from '@reservoir0x/relay-kit-hooks'
import { RelayKitProvider } from '@reservoir0x/relay-kit-ui'
import { convertViemChainToRelayChain } from '@reservoir0x/relay-sdk'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { http, createConfig, WagmiProvider } from '@wagmi/core'
import { mainnet } from '@wagmi/core/chains'
import { MAINNET_RELAY_API, TESTNET_RELAY_API } from '@reservoir0x/relay-sdk'

const queryClient = new QueryClient()

const App = () => {
  const [wagmiConfig, setWagmiConfig] = useState<
    ReturnType<typeof createConfig> | undefined
  >()
  const { chains, viemChains } = useRelayChains(MAINNET_RELAY_API)

  useEffect(() => {
    if (!wagmiConfig && chains && viemChains) {
      setWagmiConfig(
        createConfig({
          appName: 'Relay Demo',
          chains: (viemChains && viemChains.length === 0
            ? [mainnet]
            : viemChains) as [Chain, ...Chain[]],
          transports: {
            [mainnet.id]: http(),
          }
        })
      )
    }
  }, [chains])

  //Prevent loading the page until wagmi config is set, you can set a temporary config to swap out later to unblock the ui
  if (!wagmiConfig) {
    return null
  }

  return (
    <QueryClientProvider client={queryClient}>
      <RelayKitProvider options={{
          duneApiKey: "YOUR_DUNE_KEY",
          chains,
          baseApiUrl: MAINNET_RELAY_API
        }}>
        <WagmiProvider config={wagmiConfig}>
          <YourApp />
        </WagmiProvider>
      </RelayKitProvider>
    </QueryClientProvider>
  )
}

Learn more about the RelayKitProvider options.

​
Review

Let’s review with a checklist to make sure we got everything in:

  1. Install the required dependencies
  2. Configure Tanstack Query and Wagmi
  3. Configure RelayKitProvider with chains and options
  4. Import the styles.css file to style our ui components