Config.ts

We recommend you create a dedicated file for your configurations.

After configuring FutureverseAuthClient, createWagmiConfig, and QueryClient, your Config.ts file will look similar to this example below.

Example:

import React, { PropsWithChildren } from 'react';
import { FutureverseAuthClient } from '@futureverse/auth-react';
import { FutureverseAuthProvider, FutureverseWagmiProvider } from '@futureverse/auth-react';
import { createWagmiConfig } from '@futureverse/auth-react/wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { cookieStorage, createStorage } from 'wagmi';

const clientId = '<your-futureverse-client-id>';
const walletConnectProjectId = '<your-wallet-connect-project-id>';
const xamanAPIKey = '<your-xaman-application->';

export const authClient = new FutureverseAuthClient({
  clientId,
  environment: 'production',
  redirectUri: '<your-app-redirect-endpoint>',
});
const queryClient = new QueryClient();

export const getWagmiConfig = async () => {
  return createWagmiConfig({
    walletConnectProjectId,
    xamanAPIKey,
    authClient,
    // Optional if supporting SSR
    ssr: true,
    // Optional chains you wish to support
    chains: [mainnet, sepolia, polygonAmoy],
    // Optional if supporting SSR
    storage: createStorage({
      storage: cookieStorage,
    }),
  });
};