Use with Next.js

import { createExplorerClient } from "@uzolabs/sdk/explorer";
import { getAddresses } from "@uzolabs/sdk/contracts";
import { botChainTestnet } from "@uzolabs/sdk/chains";
import { Balance } from "./balance";

export const revalidate = 300; // re-read at most every 5 minutes

export default async function Page() {
  const explorer = createExplorerClient({ chainId: botChainTestnet.id });
  const usdt = await explorer.getContract(getAddresses(botChainTestnet.id).usdt);

  return (
    <main>
      <h1>{usdt.name || "Unverified contract"}</h1>
      <Balance />
    </main>
  );
}

"use client";

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>
  );
}

"use client";

import { useAccount, useBalance } from "wagmi";

export function Balance() {
  const { address } = useAccount();
  const { data } = useBalance({ address });
  if (!address) return <p>Connect a wallet to see your balance.</p>;
  return <p>{data ? `${data.formatted} ${data.symbol}` : "..."}</p>;
}