Send transactions

import { useState } from "react";
import { BaseError, UserRejectedRequestError, parseAbi } from "viem";
import { useWaitForTransactionReceipt, useWriteContract } from "wagmi";
import { botChainTestnet } from "@uzolabs/sdk/chains";

const GUEST_BOOK = "0x7962412A92E5553E66C794c3a352422DEB7BAc27";
const guestBookAbi = parseAbi(["function sign(string message)"]);

function errorMessage(error: Error) {
  if (error instanceof BaseError) {
    if (error.walk((e) => e instanceof UserRejectedRequestError)) return "You rejected the request.";
    return error.shortMessage;
  }
  return error.message;
}

export function SignGuestBook() {
  const [message, setMessage] = useState("Hello from wagmi");
  const write = useWriteContract();
  const receipt = useWaitForTransactionReceipt({ hash: write.data, chainId: botChainTestnet.id });

  return (
    <div>
      <input value={message} onChange={(e) => setMessage(e.target.value)} />
      <button
        disabled={write.isPending || receipt.isLoading}
        onClick={() =>
          write.mutate({
            address: GUEST_BOOK,
            abi: guestBookAbi,
            functionName: "sign",
            args: [message],
            chainId: botChainTestnet.id,
          })
        }
      >
        {write.isPending ? "Confirm in wallet..." : "Sign"}
      </button>

      {write.data && (
        <p>
          Sent:{" "}
          <a href={`${botChainTestnet.blockExplorers?.default.url}/tx/${write.data}`} target="_blank" rel="noreferrer">
            view on BOTScan
          </a>
        </p>
      )}
      {receipt.isLoading && <p>Waiting for confirmation...</p>}
      {receipt.data?.status === "success" && <p>Confirmed in block {receipt.data.blockNumber.toString()}.</p>}
      {receipt.data?.status === "reverted" && <p>The transaction reverted.</p>}
      {write.error && <p>{errorMessage(write.error)}</p>}
      {receipt.error && <p>{errorMessage(receipt.error)}</p>}
    </div>
  );
}

import { ConnectWallet } from "./ConnectWallet";
import { SignGuestBook } from "./SignGuestBook";

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