Verify Signatures with Cosmos Libraries

import { useState } from "react";
import { fromBase64, toUtf8 } from "@cosmjs/encoding";
import { Secp256k1, Secp256k1Signature, sha256 } from "@cosmjs/crypto";
import { serializeSignDoc, makeSignDoc } from "@cosmjs/amino";

function SignatureVerification() {
  const [isValid, setIsValid] = useState<boolean | null>(null);

  const verifyADR036Signature = async () => {
    const pubkeyBase64 = "A08EGB7ro1ORuFhjOnZcSgwYlpe0DSFjVNUIkNNQxwKQ";
    const signatureBase64 = "..."; // Signature from signAmino
    const originalMessage = "Hello Para!";
    const signerAddress = "cosmos1...";
    const chainId = "cosmoshub-4";

    try {
      const pubkey = fromBase64(pubkeyBase64);
      const signature = fromBase64(signatureBase64);

      const signDoc = makeSignDoc(
        [{ type: "sign/MsgSignData", value: { signer: signerAddress, data: btoa(originalMessage) } }],
        { amount: [], gas: "0" },
        chainId,
        "",
        0,
        0
      );

      const serialized = serializeSignDoc(signDoc);
      const messageHash = sha256(serialized);

      const sig = Secp256k1Signature.fromDer(signature);
      const valid = await Secp256k1.verifySignature(sig, messageHash, pubkey);

      setIsValid(valid);
      console.log("Signature valid:", valid);
    } catch (error) {
      console.error("Verification failed:", error);
      setIsValid(false);
    }
  };

  return (
    <div>
      <button onClick={verifyADR036Signature}>Verify Signature</button>
      {isValid !== null && <p>Valid: {isValid ? "Yes" : "No"}</p>}
    </div>
  );
}