@sei-js/react v0.0.0-internal-20230929002024

@sei-js/react

A React helper library for @sei-js/core written in Typescript.

Tutorial

For an in depth tutorial, please see our documentation.

Installation

yarn add @sei-js/react

WalletProvider

The first step is to wrap your entire application in a Sei wallet provider and pass in a chainId, rest url, and rpc url.

<SeiWalletProvider
  chainConfiguration={{
    chainId: 'atlantic-2',
    restUrl: 'https://rest.atlantic-2.seinetwork.io/',
    rpcUrl: 'https://rpc.atlantic-2.seinetwork.io'
  }}>
      <YourApp />
</SeiWalletProvider>

Hooks

useWallet

A hook to connect one of our supported wallets to your application.

import { useWallet } from '@sei-js/react';

const { offlineSigner, accounts, connectedWallet } = useWallet();

Return Values

useQueryClient

import { useQueryClient } from '@sei-js/react';

const { queryClient, isLoading } = useQueryClient();

useSigningClient

import { useSigningClient } from '@sei-js/react';

const { signingClient, isLoading } = useSigningClient();

useSeiCosmWasmClient

import { useSeiCosmWasmClient } from '@sei-js/react';

const { cosmWasmClient } = useSeiCosmWasmClient();

UI Components

This package contains two helpful UI components for connecting to a wallet provider.

\

This component renders a button that will open a modal to connect to a wallet provider.

import React from "react";
import {useWallet, WalletConnectButton} from "../lib";

const Component = () => {
  const { connectedWallet } = useWallet();

  return (
     <div>
         <WalletConnectButton />
         <p>Connected wallet: {connectedWallet?.walletInfo?.name || "---"}</p>
     </div>
  );
};

export default Component;

If your page has a on the page it can be opened programmatically by calling the hook "useSelectWallet"

useSelectWallet()

This hook allows you to programmatically open and close the wallet modal.

import React from "react";
import { useWallet, useSelectWallet } from "../lib";

const Component = () => {
  const { connectedWallet } = useWallet();
  const { openModal, closeModal } = useSelectWallet();

  return (
     <div>
         <button onClick={openModal}>Open Modal</button>
         <p>Connected wallet: {connectedWallet?.walletInfo?.name || "---"}</p>
      </div>
  );
};

export default Component;

Other helpful packages

• @sei-js/core - TypeScript library containing helper functions for wallet connection, transaction sig ning, and RPC querying.
• @sei-js/proto - TypeScript library for Sei protobufs generated using Telescope