Set up wagmi

import { createConfig, http } from "wagmi";
import { injected } from "wagmi/connectors";
import { botChain, botChainTestnet } from "@uzolabs/sdk/chains";

export const config = createConfig({
  chains: [botChainTestnet, botChain],
  connectors: [injected()],
  transports: {
    [botChainTestnet.id]: http(),
    [botChain.id]: http(),
  },
});

declare module "wagmi" {
  interface Register {
    config: typeof config;
  }
}

import type { ReactNode } from "react";
import { WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { config } from "./wagmi";

const queryClient = new QueryClient();

export function Providers({ children }: { children: ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  );
}

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Providers } from "./providers";
import { App } from "./App";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <Providers>
      <App />
    </Providers>
  </StrictMode>,
);

import { useBlockNumber, useChainId } from "wagmi";

export function App() {
  const chainId = useChainId();
  const { data: blockNumber } = useBlockNumber({ watch: true });

  return (
    <p>
      Chain {chainId}, block {blockNumber?.toString() ?? "..."}
    </p>
  );
}