A React helper library for @sei-js/core written in Typescript.
For an in depth tutorial, please see our documentation.
yarn add @sei-js/react
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>
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} />
Hook | Params |
---|---|
useWallet | --- |
useQueryClient | (rpcAddress?: string) |
useSigningClient | (rpcAddress?: string) |
useSeiCosmWasmClient | --- |
A hook to connect one of our supported wallets to your application.
import { useWallet } from '@sei-js/react';
const { offlineSigner, accounts, connectedWallet } = useWallet();
Property | Type | Description |
---|---|---|
connectedWallet | string? | The currently connected wallet |
chainId | string | Sei chain id |
restUrl | string | The rest url associated with the connected wallet |
rpcUrl | string | The rpc url associated with the connected wallet |
offlineSigner | object? | The offline signer associated with the connected wallet |
accounts | object[]? | The accounts associated with the connected wallet |
import { useQueryClient } from '@sei-js/react';
const { queryClient, isLoading } = useQueryClient();
Property | Type | Description |
---|---|---|
queryClient | StargateSigningClient? | A stargate signing client. |
isLoading | boolean | Boolean value for when the initial loading is happening |
import { useSigningClient } from '@sei-js/react';
const { signingClient, isLoading } = useSigningClient();
Property | Type | Description |
---|---|---|
signingClient | StargateSigningClient? | A stargate signing client. |
isLoading | boolean | Boolean value for when the initial loading is happening |
import { useSeiCosmWasmClient } from '@sei-js/react';
const { cosmWasmClient } = useSeiCosmWasmClient();
Property | Type | Description |
---|---|---|
cosmWasmClient | CosmWasmClient? | A cosm wasm client for smart contracts. |
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;
Property | Type | Description |
---|---|---|
wallets | SeiWallet[]? | A stargate signing client. |
buttonClassName | string | A css class name for styling the button |
primaryColor | string | A hex value of the color you want to tint the text and icons with |
secondaryColor | string | A secondary hex value of the color you want to tint the text and icons with |
backgroundColor | string | A hex value of the color you want to use as a background |
If your page has a on the page it can be opened programmatically by calling the hook "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;
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>
- @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