Package Exports

@cosmos-kit/react
@cosmos-kit/react/main/index.js
@cosmos-kit/react/module/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@cosmos-kit/react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

cosmos-kit

A wallet adapter for react with mobile WalletConnect support for the Cosmos ecosystem.

cosmos-kit wallet connector

Getting Start

1. Installation

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

yarn add @cosmos-kit/react @cosmos-kit/config @cosmos-kit/core chain-registry

types are included in @cosmos-kit/core

2. Connection

2.1 Quick Start

Provider

Supported chains info and supported wallets info are required when using WalletProvider.

import * as React from 'react';

// 1. Import `ChakraProvider` component, chains and wallets
import { WalletProvider } from '@cosmos-kit/react';
import { chains } from 'chain-registry';
import { wallets } from '@cosmos-kit/config';

function WalletApp() {
  return (
    // 2. Wrap `WalletProvider` at the top level of your wallet related components.
      <WalletProvider
        chains={chains} // 3. Provide supported chains
        wallets={wallets} // 4. Provide supported wallets
      >
      <YourWalletRelatedComponents />
    </WalletProvider>
  )
}

Hook

import * as React from 'react';

// 1. Import `useWallet` hook
import { useWallet } from "@cosmos-kit/react";

function Component ({ chainName }: { chainName?: string }) => {
    const walletManager = useWallet();

    // 2. Get wallet properties
    const {
        currentChainName, 
        currentWalletName, 
        walletStatus, 
        username, 
        address, 
        message,
      } = walletManager;

    // 3. Get wallet functions
    const { 
        connect, 
        disconnect, 
        openView,
        setCurrentChain,
    } = walletManager;

    // 4. if `chainName` in component props, `setCurrentChain` in `useEffect`
    React.useEffect(() => {
        setCurrentChain(chainName);
    }, [chainName]);
}

WalletProvider provide a default modal for connection in @cosmos-kit/react.

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

To define your own modal, you can input you modal component in WalletProvider props.

Required properties in your modal component:

import { WalletModalProps } from '@cosmos-kit/core';

// in `@cosmos-kit/core`
export interface WalletModalProps {
  isOpen: boolean;
  setOpen: Dispatch<boolean>;
}

A simple example to define your own modal:

import * as React from 'react';

import { WalletProvider, useWallet } from '@cosmos-kit/react';

// 1. Define Modal Component
const MyModal = ({ isOpen, setOpen }: WalletModalProps) => {
  const walletManager = useWallet();

  function onCloseModal () {
    setOpen(false);
  };

  function onWalletClicked(name: string) {
    return async () => {
      console.info('Connecting ' + name);
      walletManager.setCurrentWallet(name);
      await walletManager.connect();
    }
  }

  return (
    <Modal isOpen={open} onClose={onCloseModal}>
      <ModalContent>
        <ModalHeader>Choose Wallet</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          {walletManager.wallets.map(({ name, prettyName }) => (
            <Button key={name} colorScheme='blue' variant='ghost' onClick={onWalletClicked(name)}>
              {prettyName}
            </Button>
          ))}
        </ModalBody>
      </ModalContent>
    </Modal>
  )
}

function WalletApp() {
  return (
    <WalletProvider 
        chains={chains}
        wallets={wallets}
        walletModal={MyModal} // 2. Provide walletModal
    >
      <YourWalletRelatedComponents />
    </WalletProvider>
  )
}

3. Signing Client

There two signing clients available in walletManager: stargateClient and cosmwasmClient.

Using signing client in react component:

import * as React from 'react';
import { useWallet } from "@cosmos-kit/react";

function Component () => {
    const walletManager = useWallet();
    const {
        getStargateClient,
        getCosmWasmClient,
        address,
      } = walletManager;

    const onSignAndBroadcast = async () => {
      const stargateClient = await getStargateClient();
      if (!stargateClient || !address) {
          console.error('stargateClient undefined or address undefined.')
          return;
      }

      await stargateClient.signAndBroadcast(address, voteMessages, fee, memo);
    }
}

3.1 Customized signing client options

The default options are undefined. You can provide your own options in WalletProvider.

import * as React from 'react';

import { WalletProvider } from '@cosmos-kit/react';
import { chains } from 'chain-registry';
import { wallets } from '@cosmos-kit/config';

// 1. Import options type
import { SignerOptions } from '@cosmos-kit/core';

// 2. construct signer options
const signerOptions: SignerOptions = {
  stargate: (chain: Chain) => {
    ... // return corresponding stargate options or undefined
  },
  cosmwasm: (chain: Chain) => {
    ... // return corresponding cosmwasm options or undefined
  }
}

function WalletApp() {
  return (
      <WalletProvider
        chains={chains}
        wallets={wallets}
        signerOptions={signerOptions} // 3. Provide signerOptions
      >
      <YourWalletRelatedComponents />
    </WalletProvider>
  )
}

About SignerOptions

// in '@cosmos-kit/core'
import { SigningStargateClientOptions } from '@cosmjs/stargate';
import { SigningCosmWasmClientOptions } from '@cosmjs/cosmwasm-stargate';

export interface SignerOptions {
  stargate?: (chain: Chain) => SigningStargateClientOptions | undefined;
  cosmwasm?: (chain: Chain) => SigningCosmWasmClientOptions | undefined;
}

@cosmos-kit/react