OpenSea Wallet React SDK

Get Started

Installation

Install the package and peer dependencies

pnpm add @opensea/wallet wagmi [email protected] @tanstack/react-query @opensea/ui-kit

Setup

Mount the WalletProvider component.

import { WalletProvider } from "@opensea/wallet"
import { AppContents } from "./AppContents"

function App() {
  return (
    <WalletProvider>
      <AppContents />
    </WalletProvider>
  )
}

Apply the CSS used by the OpenSea wallet UI. If you are using a framework that supports importing CSS files you can import with:

import "@opensea/wallet/style.css"

Usage

Use the useAccount hook to access account state.

If performance is particularly important, use the individualized hooks for getting the data you need, such as useAddress.

The useConnectFlow hook launches the connection flow UI which includes the email-code login method for the OpenSea embedded wallet.

import { useAccount, useConnectFlow, useDisconnect } from "@opensea/wallet"
import { LoadingState } from "./LoadingState"

export function AppContents() {
  const { ready, address } = useAccount()
  const connectFlow = useConnectFlow()
  const disconnect = useDisconnect()

  if (!ready) {
    return <LoadingState />
  }

  if (!address) {
    return <button onClick={() => connectFlow()}>Connect</button>
  }

  return (
    <>
      <p>Address: {address}</p>
      <button onClick={disconnect}>Disconnect</button>
    </>
  )
}

Documentation

WalletProvider

| Prop | Description | Type | Default Value | | ---------------------- | ------------------------------------------------------------------ | --------------------------------- | --------------- | | environment | - | "production" or "development" | "development" | | supportInjectedWallets | Whether or not to allow connecting wallets discovered via EIP-6963 | boolean | true | | siweAdapter | User defined adapter for SIWE. If provided SIWE will be required. | SiweAdapter or undefined | undefined |

useAccount

Allows access to account state.

type UseAccountReturn = {
  address: Address | undefined
  chainId: number | undefined
  connectorId: string | undefined
  isConnecting: boolean
  ready: boolean
}

function useAccount(): UseAccountReturn

Development

(Optional) Linking

Linking is useful for when you want to test a local build of opensea-wallet with our OS2 web app. However, Storybook and unit tests are strongly encouraged over this approach.

1. Run pnpm pack in the package you want to link (e.g. packages/wallet) to generate a tarball
2. Go to the application you want to run with the local package
3. Update the dependency in package.json to be the newly generated tarball (e.g. ../../../opensea-wallet/packages/wallet/opensea-wallet-0.5.125.tgz)