Skip to content

Wallet Configuration

Configure smart wallets to match your app’s requirements. Openfort React lets you:

  • Set recovery methods (automatic, password-based)
  • Adjust wallet creation options and chain preferences
  • Manage wallet state and embedded wallet lifecycle

Configuration

To configure Openfort in your React app, set up the OpenfortProvider with your publishable key and wallet configuration.

import { OpenfortProvider, RecoveryMethod } from '@openfort/react'
 
function App() {
  return (
    <OpenfortProvider
      // ... other configuration
      publishableKey="YOUR_OPENFORT_PUBLISHABLE_KEY"
 
      // Set the wallet configuration. In this example, we will be using the embedded wallet.
      walletConfig={{
        shieldPublishableKey: "YOUR_SHIELD_PUBLISHABLE_KEY",
 
        // Set the recovery method you want to use, in this case we will use the password recovery method
        recoveryMethod: RecoveryMethod.PASSWORD,
 
        // With password recovery we can set the encryption key to encrypt the recovery data
        // This way we don't have a backend to store the recovery data
        shieldEncryptionKey: "YOUR_SHIELD_ENCRYPTION_SHARE",
      }}
    >
      {/* Add your wallet components here */}
    </OpenfortProvider>
  )
}

Using openfort wallets

To use Openfort wallets in your React app, you can utilize the useWallets hook. This hook provides methods to create, manage, and interact with wallets.

import { useWallets } from "@openfort/react"
 
function SampleComponent() {
  const {
    wallets, // List of the wallets of the user.
    availableWallets, // List of available wallets in the application.
    activeWallet, // The currently active wallet in the application.
    setActiveWallet, // Set the active wallet for the application.
    createWallet, // Create a new wallet.
    error, // The error object if an error occurred, otherwise null.
    isError, // Indicates if the hook has encountered an error.
    isSuccess, // Indicates if the hook has successfully completed.
    isCreating,
    isConnecting,
    exportPrivateKey, // Export the private key of the active wallet.
  } = useWallets({
    throwOnError, // Whether to throw errors.
    onSuccess, // Callback function to execute on success.
    onError, // Callback function to execute on error.
    onSettled, // Callback function to execute when the operation is settled (either success or error).
  })
  // ...
}