Web3 integration

The <FutureverseProvider/> container wraps the app in a given web3 react provider library (wagmi by default.) Interacting with web3 APIs is thus simply a matter of using the web3 react provider library’s API as per usual. This is true both for custodial and non-custodial logons.

🚧 If you need a finer gained control or want to wrap your application in a different web3 react provider, you can set the noWagmi option <FutureverseProvider ... noWagmi/>. This enables you to wrap your application in any web3 react library, however, to get the login working you’ll have to provide a custom LoginAdapter. This login adapter enables the Futureverse sign-in code to sign the challenges it needs to prove ownership over an account.

import { useFutureverse } from '@futureverse/react'
import { useAccount, useBalance } from 'wagmi'

function Home() {
  const { login, logout, userSession } = useFutureverse()
  const account = useAccount()
  const accountBalance = useBalance({
    address: account.address,
  })

  return (
    <div>
      Home Route
      {userSession == null ? (
        <button
          onClick={() => {
            login()
          }}
        >
          Log In
        </button>
      ) : (
        <div>
          <p>User EOA: {userSession.eoa}</p>
          <p>User Chain ID: {userSession.chainId}</p>
          <p>User Balance: {accountBalance.data?.formatted ?? 'loading'} ETH</p>
          <button
            onClick={() => {
              logout()
            }}
          >
            Log Out
          </button>
        </div>
      )}
    </div>
  )
}

export default Home