@opensea/wallet
TypeScript icon, indicating that this package has built-in type declarations

0.3.36 • Public • Published

OpenSea Wallet React SDK

Get Started

Installation

Install the package.

npm install @opensea/wallet

Setup

Mount the WalletProvider component. The WalletProvider mounts a WagmiProvider so all descendant components can use wagmi hooks and utilities as normal.

// 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 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 the current connected/authenticated account. Alternatively, wagmi hooks can be used directly if server-side authentication is not required.

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

// AppContents.tsx
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 (!user) {
    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

Readme

Keywords

none

Package Sidebar

Install

npm i @opensea/wallet

Weekly Downloads

983

Version

0.3.36

License

none

Unpacked Size

3.8 MB

Total Files

1370

Last publish

Collaborators

  • royliu2
  • janclarin
  • jallum
  • coryhardman-opensea
  • ralxz
  • sunwrobert
  • meemaw