@sei-js/react v3.2.0

@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>

Unofficial wallet providers

To connect to an unofficial wallet provider such as Keplr, simply define an object of type SeiWallet and use it anywhere in this package.

const CUSTOM_WALLET: SeiWallet = {
  getAccounts: async (chainId) => {
    const offlineSigner = await window?.['keplr']?.getOfflineSignerAuto(chainId);
    return offlineSigner?.getAccounts() || [];
  },
  connect: async (chainId) => await window?.['keplr']?.enable(chainId),
  disconnect: async (chainId) => await window?.['keplr']?.disable(chainId),
  getOfflineSigner: async (chainId) => window?.['keplr']?.getOfflineSignerAuto(chainId),
  getOfflineSignerAmino: async (chainId) => window?.['keplr']?.getOfflineSignerAmino(chainId),
  signArbitrary: async (chainId, signer, message) => window?.['keplr']?.signArbitrary(chainId, signer, message),
  verifyArbitrary: async (chainId, signingAddress, data, signature) => window?.['keplr']?.verifyArbitrary(chainId, signingAddress, data, signature),
  walletInfo: {
    windowKey: 'keplr',
    name: 'Keplr',
    website: 'https://www.keplr.app/download',
    icon: 'https://assets.website-files.com/63eb7ddf41cf5b1c8fdfbc74/63edd5d1a40b9a48841ac1d2_Keplr%20Logo.svg'
  },
  isMobileSupported: false
};

// Then pass this into <SeiWalletProvider /> if using React, or use it's functions if using node or another js library
<SeiWalletProvider wallets={['fin', 'compass', CUSTOM_WALLET]} autoconnect={CUSTOM_WALLET} />

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;

Styling

This package uses Styled Components and allows you to override the theme with a primaryColor, secondaryColor, and backgroundColor to tint the text and icons.

import { ThemeProvider } from "styled-components";

// Define theme
export const theme = {
  primaryColor: '#121212',
  secondaryColor: '#8C8C8C',
  backgroundColor: '#F1F1F1'
};

// Wrap your app in the theme provider
<ThemeProvider theme={theme}>
  <YOUR_APP/>
</ThemeProvider>

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