@opensea/wallet v0.1.18
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
2 days ago
2 days ago
1 day ago
2 days ago
2 days ago
6 days ago
6 days ago
6 days ago
6 days ago
5 days ago
9 days ago
9 days ago
12 days ago
12 days ago
13 days ago
13 days ago
13 days ago
13 days ago
15 days ago
15 days ago
24 days ago
25 days ago
25 days ago
1 month ago
30 days ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago