Skip to content

useWallets

Manage every wallet connected to the current player, including the embedded signer, available Wagmi connectors, recovery flows, and key export utilities.

Request

type Request = {
  hook: 'useWallets',
  params: [options?: UseWalletsOptions]
}
 
type UseWalletsOptions = OpenfortHookOptions<SetActiveWalletResult | CreateWalletResult>
 
type OpenfortHookOptions<T> = {
  onSuccess?: (data: T) => void
  onError?: (error: import("@openfort/react").OpenfortError) => void
  onSettled?: (data: T | undefined | null, error: import("@openfort/react").OpenfortError | null) => void
  throwOnError?: boolean
}

Response

type Response = UseWalletsReturn
 
type UseWalletsReturn = WalletFlowFlags & {
  hasWallet: boolean
  isLoadingWallets: boolean
  wallets: UserWallet[]
  availableWallets: AvailableWallet[]
  activeWallet?: UserWallet
  reset(): void
  setActiveWallet(options: SetActiveWalletOptions | string): Promise<SetActiveWalletResult>
  createWallet(options?: CreateWalletOptions): Promise<CreateWalletResult>
  setRecovery(options: SetRecoveryOptions): Promise<SetActiveWalletResult>
  exportPrivateKey(): Promise<string>
}
 
type WalletFlowFlags = {
  error?: import("@openfort/react").OpenfortError
  isError: boolean
  isSuccess: boolean
  isCreating: boolean
  isConnecting: boolean
}
 
type UserWallet = {
  address: import("viem").Hex
  connectorType?: string
  walletClientType?: string
  connector?: import("wagmi").Connector
  id: string
  isAvailable: boolean
  isActive?: boolean
  isConnecting?: boolean
  recoveryMethod?: import("@openfort/openfort-js").RecoveryMethod
  accountId?: string
  accountType?: import("@openfort/openfort-js").AccountTypeEnum
  ownerAddress?: import("viem").Hex
  implementationType?: string
  createdAt?: number
  salt?: string
}
 
type AvailableWallet = {
  id: string
  connector: import("wagmi").Connector
  name: string
  icon: import("react").ReactNode
  iconShape: 'circle' | 'square' | 'squircle' | string
  isInstalled?: boolean
  shortName?: string
  iconConnector?: import("react").ReactNode
  [key: string]: unknown
}
 
type WalletRecovery = {
  recoveryMethod: import("@openfort/openfort-js").RecoveryMethod
  password?: string
}
 
type SetActiveWalletResult = {
  error?: import("@openfort/react").OpenfortError
  wallet?: UserWallet
}
 
type SetActiveWalletOptions = {
  walletId: string | import("wagmi").Connector
  recovery?: WalletRecovery
  address?: import("viem").Hex
  showUI?: boolean
} & OpenfortHookOptions<SetActiveWalletResult>
 
type CreateWalletResult = SetActiveWalletResult
 
type CreateWalletOptions = {
  recovery?: WalletRecovery
  accountType?: import("@openfort/openfort-js").AccountTypeEnum
} & OpenfortHookOptions<CreateWalletResult>
 
type SetRecoveryOptions = {
  previousRecovery: import("@openfort/openfort-js").RecoveryParams
  newRecovery: import("@openfort/openfort-js").RecoveryParams
} & OpenfortHookOptions<CreateWalletResult>

Example

import { embeddedWalletId, useWallets } from "@openfort/react"
 
function WalletSelector() {
  const {
    wallets,
    availableWallets,
    activeWallet,
    setActiveWallet,
    createWallet,
    setRecovery,
    exportPrivateKey,
    isCreating,
    isConnecting,
    isError,
    error,
  } = useWallets({
    onSuccess: () => {},
    onError: () => {},
    onSettled: () => {},
    throwOnError: true
  })
 
  const connectEmbedded = async () => {
    await setActiveWallet({ walletId: embeddedWalletId, showUI: true })
  }
 
  const connectExternal = async (id: string) => {
    await setActiveWallet(id)
  }
 
  return (
    <WalletList
      wallets={wallets}
      activeWallet={activeWallet}
      availableWallets={availableWallets}
      createWallet={createWallet}
      connectEmbedded={connectEmbedded}
      connectExternal={connectExternal}
      setRecovery={setRecovery}
      exportPrivateKey={exportPrivateKey}
      isBusy={isCreating || isConnecting}
      error={isError ? error : undefined}
    />
  )
}