@opensea/wallet

OpenSea Wallet React SDK

Get Started

Installation

Install the package and peer dependencies

pnpm add @opensea/wallet wagmi viem@2.x @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