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

Prerequisites

Para Setup Required

Installation

npm install @getpara/cosmjs-v0-integration@alpha @cosmjs/stargate @cosmjs/proto-signing

w

Library Setup

Hook-Based Pattern

import { useClient, useAccount } from "@getpara/react-sdk@alpha";
import { ParaProtoSigner } from "@getpara/cosmjs-v0-integration@alpha";
import { SigningStargateClient, StargateClient } from "@cosmjs/stargate";
import { useState, useEffect } from "react";

export function useCosmosClient(rpcUrl: string, prefix: string = "cosmos") {
  const para = useClient();
  const { isConnected, embedded } = useAccount();
  const [publicClient, setPublicClient] = useState<StargateClient>();
  const [signingClient, setSigningClient] = useState<SigningStargateClient>();

  useEffect(() => {
    StargateClient.connect(rpcUrl).then(setPublicClient);
  }, [rpcUrl]);

  useEffect(() => {
    if (!para || !isConnected || !embedded.isConnected) {
      setSigningClient(undefined);
      return;
    }

    para.getWalletsByType({ type: "Cosmos" }).then((wallets) => {
      if (wallets.length === 0) return;
      
      const signer = new ParaProtoSigner(para, prefix);
      SigningStargateClient.connectWithSigner(rpcUrl, signer).then(setSigningClient);
    });
  }, [para, isConnected, embedded.isConnected, rpcUrl, prefix]);

  return { publicClient, signingClient };
}

Direct Client Pattern

import { ParaWeb } from "@getpara/react-sdk@alpha";
import { ParaProtoSigner } from "@getpara/cosmjs-v0-integration@alpha";
import { SigningStargateClient, StargateClient } from "@cosmjs/stargate";

const para = new ParaWeb({ apiKey: process.env.NEXT_PUBLIC_PARA_API_KEY });

async function setupCosmosClients(rpcUrl: string, prefix: string = "cosmos") {
  const publicClient = await StargateClient.connect(rpcUrl);
  
  const isAuthenticated = await para.isSessionActive();
  if (!isAuthenticated) {
    return { publicClient, signingClient: null };
  }

  const wallets = await para.getWalletsByType({ type: "Cosmos" });
  if (wallets.length === 0) {
    return { publicClient, signingClient: null };
  }

  const signer = new ParaProtoSigner(para, prefix);
  const signingClient = await SigningStargateClient.connectWithSigner(rpcUrl, signer);

  return { publicClient, signingClient };
}

Next Steps