> ## Documentation Index
> Fetch the complete documentation index at: https://docs.relay.link/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Installing and Configuring RelayKit UI

## Installation

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

<CodeGroup>
  ```shell yarn theme={null}
  yarn add viem wagmi @tanstack/react-query @relayprotocol/relay-kit-ui 
  ```

  ```shell npm theme={null}
  npm install viem wagmi @tanstack/react-query @relayprotocol/relay-kit-ui 
  ```

  ```shell pnpm theme={null}
  pnpm add viem wagmi @tanstack/react-query @relayprotocol/relay-kit-ui 
  ```

  ```shell bun theme={null}
  bun add viem wagmi @tanstack/react-query @relayprotocol/relay-kit-ui 
  ```
</CodeGroup>

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](https://tanstack.com/query/latest) to be installed and configured. Refer to the [Tanstack installation instructions](https://tanstack.com/query/latest/docs/framework/react/installation).

## 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.

```tsx theme={null}
import { RelayKitProvider } from '@relayprotocol/relay-kit-ui'
import { convertViemChainToRelayChain } from '@relayprotocol/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 '@relayprotocol/relay-sdk'
import '@relayprotocol/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%
			  }
			],
			duneConfig: {
				apiKey: "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 `@relayprotocol/relay-sdk` to use this function.

### Styling

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

```tsx theme={null}
import '@relayprotocol/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](/references/relay-kit/hooks/useRelayChains) hook.

```typescript theme={null}
import { useRelayChains } from '@relayprotocol/relay-kit-hooks'
import { RelayKitProvider } from '@relayprotocol/relay-kit-ui'
import { convertViemChainToRelayChain } from '@relayprotocol/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 '@relayprotocol/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={{
		  duneConfig: {
			apiKey: "YOUR_DUNE_KEY",
		  },
          chains,
          baseApiUrl: MAINNET_RELAY_API
        }}>
        <WagmiProvider config={wagmiConfig}>
          <YourApp />
        </WagmiProvider>
      </RelayKitProvider>
    </QueryClientProvider>
  )
}
```

Learn more about the `RelayKitProvider` [options](/references/relay-kit/ui/relay-kit-provider).

## 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