Skip to main content

Cosmos Kit

Cosmos Kit provides a React ChainProvider, wallet modal, and offline signers for interchain dApps.

Install​

npm i @cosmos-kit/react @cosmos-kit/core chain-registry
npm i cosmos-kit

Or install individual wallet packages: @cosmos-kit/keplr, @cosmos-kit/leap, @cosmos-kit/cosmostation.

Register Safrochain​

Use chain metadata from testnet endpoints or chain-registry:

import { ChainProvider } from '@cosmos-kit/react';
import { wallets } from 'cosmos-kit';

const safroTestnet = {
  chainId: 'safro-testnet-1',
  chainName: 'Safrochain Testnet',
  bech32Prefix: 'addr_safro',
  // currencies, feeCurrencies, apis: copy from testnet-endpoints JSON
};

export function AppProvider({ children }: { children: React.ReactNode }) {
  return (
    <ChainProvider
      chains={[safroTestnet]}
      wallets={wallets.for('keplr', 'leap', 'cosmostation')}
      walletConnectOptions={{
        signClient: { projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID! },
      }}
    >
      {children}
    </ChainProvider>
  );
}
import { useChain } from '@cosmos-kit/react';
import { SigningStargateClient } from '@cosmjs/stargate';

function SendButton() {
  const { address, getOfflineSigner } = useChain('safro-testnet-1');

  async function send() {
    const signer = await getOfflineSigner();
    const client = await SigningStargateClient.connectWithSigner(
      'https://rpc.testnet.safrochain.com:443',
      signer,
      { gasPrice: { denom: 'usaf', amount: '0.05' } },
    );
    await client.sendTokens(address!, address!, [{ denom: 'usaf', amount: '1' }], 'auto');
  }

  return <button onClick={send}>Send 1 usaf</button>;
}

Connect flow​

Next steps​

Last updated on