Sign Messages with Cosmos Libraries

import { useCosmosClient } from "./useCosmosClient";
import { ParaProtoSigner, ParaAminoSigner } from "@getpara/cosmjs-v0-integration@alpha";
import { useClient } from "@getpara/react-sdk@alpha";

function MessageSigning() {
  const para = useClient();
  const { signingClient } = useCosmosClient("https://rpc.cosmos.network");

  const signArbitraryMessage = async () => {
    if (!para || !signingClient) return;

    const protoSigner = new ParaProtoSigner(para, "cosmos");
    const aminoSigner = new ParaAminoSigner(para, "cosmos");
    
    const accounts = await protoSigner.getAccounts();
    const address = accounts[0].address;
    
    const signDoc = {
      chain_id: "cosmoshub-4",
      account_number: "0",
      sequence: "0",
      fee: {
        amount: [],
        gas: "0",
      },
      msgs: [],
      memo: "Sign this message to authenticate with Para",
    };

    try {
      const aminoSignature = await aminoSigner.signAmino(address, signDoc);
      console.log("Amino signature:", aminoSignature.signature);
      
      const message = new TextEncoder().encode("Hello Para!");
      const directSignature = await protoSigner.signDirect(address, {
        bodyBytes: message,
        authInfoBytes: new Uint8Array(),
        chainId: "cosmoshub-4",
        accountNumber: 0n,
      });
      console.log("Direct signature:", directSignature.signature);
    } catch (error) {
      console.error("Signing failed:", error);
    }
  };

  return (
    <button onClick={signArbitraryMessage}>Sign Message</button>
  );
}