npm package: @opensea/wallet
Description: OpenSea Wallet React Library
Author: OpenSea Developers
Latest version: 1.2.260

# OpenSea Wallet React SDK

## Get Started

### Installation

Install the package and peer dependencies

```bash
pnpm add @opensea/wallet wagmi viem@2.x @tanstack/react-query @opensea/ui-kit
```

### Setup

Mount the `WalletProvider` component.

```tsx
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:

```ts
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.

```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 (!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.

```tsx
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`)