Documentation Index
Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
Use this file to discover all available pages before exploring further.
Learn how to set up with Para SDK to interact with Cosmos-based blockchains.
Prerequisites
Proto Signer
Amino Signer
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
Hook (React)
Direct (Non-React)
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:
- 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
- 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"
});
Use createParaProtoSigner to create a signer directly.import { createParaProtoSigner } from "@getpara/cosmjs-v0-integration";
import { SigningStargateClient } from "@cosmjs/stargate";
import Para from "@getpara/web-sdk";
const para = new Para("YOUR_API_KEY");
// Authenticate first...
const signer = createParaProtoSigner({ para, prefix: "cosmos" });
const client = await SigningStargateClient.connectWithSigner(rpcUrl, signer);
Wallet Resolution
When no address or walletId is passed, the factory picks the first available Cosmos wallet. To target a specific wallet:const signer = createParaProtoSigner({ para, prefix: "cosmos", address: "cosmos1..." });
Use the Amino signer for message signing (ADR-036) and authentication flows.Install
npm install @getpara/react-sdk @cosmjs/amino
Usage
Hook (React)
Direct (Non-React)
Use the hook to create a CosmJS OfflineAminoSigner for message signing (ADR-036) and authentication flows. The mutation hook also accepts an amino signer.import { useParaCosmjsAminoSigner } from "@getpara/react-sdk";
import { makeSignDoc } from "@cosmjs/amino";
function SignMessage() {
const { aminoSigner, isLoading } = useParaCosmjsAminoSigner();
const address = aminoSigner?.address;
const handleSign = async () => {
if (!aminoSigner || !address) return;
const signDoc = makeSignDoc(
[{ type: "sign/MsgSignData", value: { signer: address, data: btoa("Hello!") } }],
{ amount: [], gas: "0" }, "cosmoshub-4", "", 0, 0,
);
const { signature } = await aminoSigner.signAmino(address, signDoc);
console.log("Signature:", signature.signature);
};
if (isLoading) return <p>Loading...</p>;
return <button onClick={handleSign}>Sign Message</button>;
}
import { createParaAminoSigner } from "@getpara/cosmjs-v0-integration";
const signer = createParaAminoSigner({ para, prefix: "cosmos" });
Next Steps
