Setup Cosmos Libraries

import { useParaCosmjsProtoSigner, useParaCosmjsSignAndBroadcast } from "@getpara/react-sdk";
import { SigningStargateClient, coins } from "@cosmjs/stargate";
import { useState, useEffect } from "react";

const RPC_URL = "https://rpc.cosmos.directory/cosmoshub";

function SendTokens() {
  const { protoSigner, isLoading } = useParaCosmjsProtoSigner();
  const [client, setClient] = useState<SigningStargateClient>();

  useEffect(() => {
    if (protoSigner) {
      SigningStargateClient.connectWithSigner(RPC_URL, protoSigner).then(setClient);
    }
  }, [protoSigner]);

  const { signAndBroadcastAsync, isPending } = useParaCosmjsSignAndBroadcast(protoSigner, client);

  const handleSend = async () => {
    const result = await signAndBroadcastAsync({
      messages: [{ typeUrl: "/cosmos.bank.v1beta1.MsgSend", value: {
        fromAddress: protoSigner!.address,
        toAddress: "cosmos1...",
        amount: coins(1000000, "uatom"),
      }}],
      fee: { amount: coins(5000, "uatom"), gas: "200000" },
    });
    console.log("Tx hash:", result.transactionHash);
  };

  if (isLoading) return <p>Loading...</p>;
  return (
    <button onClick={handleSend} disabled={isPending}>
      {isPending ? "Broadcasting..." : "Send 1 ATOM"}
    </button>
  );
}

const { protoSigner } = useParaCosmjsProtoSigner({
  address: "cosmos1...",  // or walletId: "uuid-..."
  prefix: "osmo",  // optional chain prefix, defaults to "cosmos"
});