Sign Messages with Cosmos Libraries

import { useState } from "react";
import { useParaCosmjsAminoSigner } from "@getpara/react-sdk/cosmos";
import { makeSignDoc } from "@cosmjs/amino";

const CHAIN_ID = "cosmoshub-4";

function MessageSigning() {
  const { aminoSigner, isLoading } = useParaCosmjsAminoSigner();
  const [signature, setSignature] = useState<string>();

  const address = aminoSigner?.address;

  const signArbitraryMessage = async () => {
    if (!aminoSigner || !address) return;

    const message = "Sign this message to authenticate with Para";

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

    try {
      const { signature: sig } = await aminoSigner.signAmino(address, signDoc);
      setSignature(sig.signature);
      console.log("Signature:", sig.signature);
    } catch (error) {
      console.error("Signing failed:", error);
    }
  };

  if (isLoading) return <div>Loading...</div>;

  return (
    <div>
      <p>Address: {address}</p>
      <button onClick={signArbitraryMessage}>Sign Message</button>
      {signature && <p>Signature: {signature}</p>}
    </div>
  );
}