Install the package and peer dependencies
pnpm add @opensea/wallet wagmi viem@2.x @tanstack/react-query @opensea/ui-kit
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"
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>
</>
)
}
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 |
Allows access to account state.
type UseAccountReturn = {
address: Address | undefined
chainId: number | undefined
connectorId: string | undefined
isConnecting: boolean
ready: boolean
}
function useAccount(): UseAccountReturn