connect-and-sign.tsx

import { useAccount, useSignMessage } from "wagmi";
import { useConnect } from "wagmi";
import { Button } from "./ui/button";
import { injected } from "wagmi/connectors";
import { liskSepolia } from "viem/chains";

const ConnectAndSign = () => {
  const { connectAsync } = useConnect();
  const { signMessageAsync } = useSignMessage();
  const { isConnected, address } = useAccount();

  const handleClick = async () => {
    if (isConnected) return alert("Wallet connected already");

    try {
      await connectAsync({
        chainId: liskSepolia.id,
        connector: injected(),
      });

      await signMessageAsync({ message: "Sign a message" })
    } catch (error) {
      alert(error);
    }
  };

  return <Button onClick={handleClick}>Connect and Sign</Button>;
};

export default ConnectAndSign;