> ## 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.
# Setup Cosmos Libraries
> Install and configure CosmJS for use with Para SDK on Cosmos chains
export const Link = ({href, label, newTab = false}) => {
const [isHovered, setIsHovered] = useState(false);
return setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
{label}
;
};
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
```bash theme={null}
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.
```tsx theme={null}
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();
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
Loading...
;
return (
);
}
```
### 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:
```tsx theme={null}
const { protoSigner } = useParaCosmjsProtoSigner({
address: "cosmos1...", // or walletId: "uuid-..."
prefix: "osmo", // optional chain prefix, defaults to "cosmos"
});
```
Use `createParaProtoSigner` to create a signer directly.
```typescript theme={null}
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:
```typescript theme={null}
const signer = createParaProtoSigner({ para, prefix: "cosmos", address: "cosmos1..." });
```
Use the Amino signer for message signing (ADR-036) and authentication flows.
## Install
```bash theme={null}
npm install @getpara/react-sdk @cosmjs/amino
```
## Usage
Use the hook to create a CosmJS `OfflineAminoSigner` for message signing (ADR-036) and authentication flows. The mutation hook also accepts an amino signer.
```tsx theme={null}
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
Loading...
;
return ;
}
```
Wallet resolution works the same as the Proto signer hook.
```typescript theme={null}
import { createParaAminoSigner } from "@getpara/cosmjs-v0-integration";
const signer = createParaAminoSigner({ para, prefix: "cosmos" });
```
## Next Steps