Install the package.
npm install @opensea/walletMount 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"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>
</>
)
}type WalletProviderConfig = {
environment: "production" | "development"
}
type WalletProviderProps {
config: WalletProviderConfig
}
function WalletProvider({ environment = "development" }: WalletProviderProps): JSX.Elementtype 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