OpenSea Wallet React SDK

Get Started

Installation

Install the package.

npm install @opensea/wallet

Setup

Mount the WalletProvider component. This will give any descendant or child components access to the authentication state and methods through the useAuth hook.

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

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

Next apply the CSS used by the OpenSea login dialog. If you are using a framework that supports importing CSS files you can import with:

import "@opensea/wallet/style.css"

Usage

Use the useAuth hook to access the current authentication state and the login/logout methods.

// AppContents.tsx
import { useAuth } from "@opensea/wallet"
import { LoadingState } from "./LoadingState"

export function AppContents() {
  const { ready, user, login, logout } = useAuth()

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

  if (!user) {
    return <button onClick={login}>Login</button>
  }

  return (
    <>
      <p>Address: {user.addresses[0]}</p>
      <p>Email: {user.email}</p>
      <p>Privy ID: {user.privyId}</p>
      <p>Access Token: {user.accessToken}</p>
      <button onClick={logout}>Login</button>
    </>
  )
}

Documentation

WalletProvider

type WalletProviderConfig = {
  environment: "production" | "development"
}

type WalletProviderProps {
  config: WalletProviderConfig
}

function WalletProvider({ environment = "development" }: WalletProviderProps): JSX.Element

useAuth

type User = {
  addresses: readonly Address[]
  email?: string
  privyId?: string
  accessToken?: string
}

type AuthContextType = {
  // Properties
  /**
   * Returns true once authentication status has been confirmed after initial page load.
   *
   * Wait until `ready` is true before using the `user` property.
   */
  ready: boolean
  /**
   * The current user, or undefined if not logged in.
   *
   * Wait until `ready` is true before using this property.
   */
  user: User | undefined

  // Methods
  /**
   * Opens a login dialog.
   */
  login: () => void
  /**
   * Logs the user out.
   * @returns A promise that resolves once the user is logged out.
   */
  logout: () => Promise<void>
}

function useAuth(): AuthContextType