Connect a wallet in your app

import { useConnect, useConnection, useConnectors, useDisconnect, useSwitchChain } from "wagmi";
import { botChainTestnet } from "@uzolabs/sdk/chains";

export function ConnectWallet() {
  const { address, chainId, isConnected } = useConnection();
  const connectors = useConnectors();
  const connect = useConnect();
  const disconnect = useDisconnect();
  const switchChain = useSwitchChain();

  if (!isConnected) {
    return (
      <div>
        {connectors.map((connector) => (
          <button key={connector.uid} onClick={() => connect.mutate({ connector })}>
            Connect {connector.name}
          </button>
        ))}
        {connect.error && <p>{connect.error.message}</p>}
      </div>
    );
  }

  if (chainId !== botChainTestnet.id) {
    return (
      <div>
        <p>Wrong network. Switch to {botChainTestnet.name}.</p>
        <button
          disabled={switchChain.isPending}
          onClick={() => switchChain.mutate({ chainId: botChainTestnet.id })}
        >
          Switch network
        </button>
        {switchChain.error && <p>{switchChain.error.message}</p>}
      </div>
    );
  }

  return (
    <div>
      <p>Connected: {address}</p>
      <button onClick={() => disconnect.mutate()}>Disconnect</button>
    </div>
  );
}

import { ConnectWallet } from "./ConnectWallet";

export function App() {
  return <ConnectWallet />;
}