Hooks

React hooks provided by Openfort Kit for seamless integration with Openfort SDK.

Openfort Kit provides a set of hooks to interact with the Openfort SDK. These hooks are designed to make it easier to integrate Openfort into your React application.

useStatus#

The useStatus hook provides the current status of the Openfort SDK. The status can be one of the following:

LOADING: The SDK is loading
CONNECTED: The user is connected
DISCONNECTED: The user is disconnected
NEEDS_RECOVERY: The SDK needs the recovery phrase to be entered.
DISCONNECTED_WITH_ADDRESS: The SDK is disconnected with an address. This can happen when the user has connected to a Web3 wallet without connecting to Openfort.

It also provides helpful boolean values to check the status, like isConnected or isLoading.

import { useStatus } from "@openfort/openfort-kit";
function App() {
  const { status, isConnected, isLoading } = useStatus()
}

useUser#

Hook to get the current user. It returns the following properties:

user: The user object.
getAccessToken: A function to get the access token.

import { useUser } from "@openfort/openfort-kit";
function App() {
  const { user, getAccessToken } = useUser()
}

The user object contains combines the user's information with the Openfort player id:

{
  "id": "pla_ff54b031-a878-4ca2-9cf5-ae190f921e9b",
  "object": "player",
  "createdAt": 1691658234,
  "linkedAccounts": [
    {
      "provider": "email",
      "email": "jaume@openfort.xyz",
      "disabled": false,
      "updatedAt": 1691658234
    }
  ]
}

To get the address of the user, you would use wagmi's useAccount hook:

import { useAccount } from 'wagmi';
function App() {
  const { address } = useAccount();
}

useProviders#

Hook to get the providers. It returns the following properties:

linkedProviders: An array of providers that the user has linked. If user is not connected, the array will be empty.
allProviders: An array of all providers.
availableProviders: An array of providers that the user can link. (All providers except the ones that are already linked)

import { useProviders } from "@openfort/openfort-kit";
function App() {
  const { linkedProviders, availableProviders, allProviders } = useProviders();
}

useWallets#

Hook to get the wallets liked by the user and available on the current device. It returns the following properties:

wallets: An array of wallets linked by the user.
currentWallet: The current active wallet.
setActiveWallet: A function to set the active wallet.

import { useIsMounted } from "@openfort/openfort-kit";
function App() {
  const { wallets, setActiveWallet, currentWallet } = useWallets()
}

useLogout#

Hook to logout the user. It returns a function that you can call to logout the user.

import { useLogout } from "@openfort/openfort-kit";
function App() {
  const logout = useLogout();
}

useModal#

Hook for controlling the modal. It returns the following functions:

setOpen: Sets the modal open state.
openWallets: Opens the wallets page.
openProviders: Opens the providers page. (Only available if the user is connected)
openSwitchNetworks: Opens the switch networks page. (Only available if the user is connected)

import { useModal } from "@openfort/openfort-kit";
function App() {
  const { openSwitchNetworks, setOpen, openProviders, openWallets } = useModal();
}

useChains#

Hook to get the chains set in the wagmi configuration. It returns an array of chains.

import { useChains } from "@openfort/openfort-kit";
function App() {
  const chains = useChains();
}

useChainIsSupported#

Hook to check if a chain is supported. It returns a function that you can call to check if a chain is supported.

import { useChains, useChainIsSupported } from "@openfort/openfort-kit";
function App() {
  const chains = useChains();
  const chainIsSupported = useChainIsSupported(chains?.[0]?.id);
}

useIsMounted#

Helper hook to check if the component is mounted. It returns a boolean value. Useful for ssr apps.

import { useIsMounted } from "@openfort/openfort-kit";
function App() {
  const isMounted = useIsMounted();
}