Skip to main content
Learn how to set up with Para SDK to interact with Cosmos-based blockchains.

​
Prerequisites

Use the Proto signer for transaction operations like sending tokens, staking, and IBC transfers.

​
Install

npm install @getpara/react-sdk @cosmjs/stargate
@getpara/react-sdk bundles @getpara/cosmjs-v0-integration — no separate integration package needed.

​
Usage

Use the hook to create a CosmJS OfflineDirectSigner for your user’s Para embedded wallet or external wallet. The hook wraps signAndBroadcast in a React Query mutation.
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>
  );
}

​
Wallet Resolution

When no address or walletId is passed, the hook resolves the wallet in this order:
  1. Selected wallet — if the user selected a Cosmos wallet in the UI. If there is only one Cosmos wallet in the session, it is already selected by default
  2. First Cosmos wallet — the first available Cosmos wallet on the account
To target a specific wallet:
const { protoSigner } = useParaCosmjsProtoSigner({
  address: "cosmos1...",  // or walletId: "uuid-..."
  prefix: "osmo",  // optional chain prefix, defaults to "cosmos"
});

​
Next Steps