## Installation

Install the [Relay SDK](https://github.com/relayprotocol/relay-kit) and its peer dependency [viem](https://viem.sh/)

```bash
# yarn

# npm

# pnpm

# bun

yarn add @relayprotocol/relay-sdk viem
```

```bash
npm install --save @relayprotocol/relay-sdk viem
```

```bash
pnpm add @relayprotocol/relay-sdk viem
```

```bash
bun add @relayprotocol/relay-sdk viem
```

#### Environment Requirements:

- node 18+
- typescript ^5.0.4 (if using typescript)

## Configuration

To configure the SDK we first need to create a global instance of a RelayClient:

```javascript
import { createClient, convertViemChainToRelayChain, MAINNET_RELAY_API, TESTNET_RELAY_API } from '@relayprotocol/relay-sdk'
import { mainnet } from 'viem/chains'

createClient({
  baseApiUrl: MAINNET_RELAY_API,
  source: "YOUR.SOURCE",
  chains: [convertViemChainToRelayChain(mainnet)]
});
```

You can replace the `baseApiUrl` with `TESTNET_RELAY_API` when testing with testnets. In the example above we also pass in an array of RelayChains converted from a viem chain, the sdk exports a function (`convertViemChainToRelayChain`) to easily do this. [Learn more](https://docs.relay.link/references/relay-kit/sdk/createClient) about the `createClient` options.

Calling `createClient` creates a singleton instance that will be used throughout your application.

### (Optional) Dynamically Configure Chains:

The sdk provides a utility function for fetching the supported chains dynamically and configuring the SDK. Below is an example of how you could set that up:

```javascript
import type { AppProps } from "next/app";
import React, { ReactNode, FC, useState, useEffect } from "react";
import { RainbowKitProvider, getDefaultWallets } from "@rainbow-me/rainbowkit";
import { WagmiConfig, createConfig, configureChains, Chain } from "wagmi";
import { publicProvider } from "wagmi/providers/public";
import { alchemyProvider } from "wagmi/providers/alchemy";
import { configureDynamicChains } from "@relayprotocol/relay-sdk/chain-utils";
import { RainbowKitChain } from "@rainbow-me/rainbowkit/dist/components/RainbowKitProvider/RainbowKitChainContext";

const AppWrapper: FC<AppWrapperProps> = ({ children }) => {
  const [wagmiConfig, setWagmiConfig] = useState<
    ReturnType<typeof createWagmiConfig>["wagmiConfig"] | undefined
  >();
  const [chains, setChains] = useState<RainbowKitChain[]>([]);

useEffect(() => {
    configureDynamicChains()
      .then((newChains) => {
        const { wagmiConfig, chains } = createWagmiConfig(
          newChains.map(({ viemChain }) => viemChain as Chain)
        );
        setWagmiConfig(wagmiConfig);
        setChains(chains);
      })
      .catch((e) => {
        console.error(e);
        const { wagmiConfig, chains } = createWagmiConfig(
          relayClient.chains.map(({ viemChain }) => viemChain as Chain)
        );
        setWagmiConfig(wagmiConfig);
        setChains(chains);
      });
  }, []);

if (!wagmiConfig) {
    return null;
  }

return (
    <WagmiConfig config={wagmiConfig}>
      <RainbowKitProvider chains={chains}>{children}</RainbowKitProvider>
    </WagmiConfig>
  );
};

function createWagmiConfig(dynamicChains: Chain[]) {
  const { chains, publicClient } = configureChains(dynamicChains, [
    alchemyProvider({ apiKey: ALCHEMY_KEY }),
    publicProvider(),
  ]);

const { connectors } = getDefaultWallets({
    appName: "Relay Demo",
    projectId: WALLET_CONNECT_PROJECT_ID,
    chains,
  });

const wagmiConfig = createConfig({
    autoConnect: true,
    connectors,
    publicClient,
  });

return {
    wagmiConfig,
    chains,
  };
}
```

The above example demonstrates how to setup dynamic chains in a react application. At the start of your application you would basically configure the dynamic chains in the SDK by using the `configureDynamicChains` method. Then with the new chains in the promise you would use the `viemChain` property to create the wagmi config (refer to the [wagmi docs](https://1.x.wagmi.sh/react/getting-started#create-a-wagmi-config) for this). Finally take the resulting chains and configure the `RainbowKitProvider`. Although in this example we used RainbowKit + Wagmi, you’re free to choose whatever libraries you’d like to connect a users wallet. You can call this method as often as you like to refresh the SDK’s chains.