Guest Mode allows you to provision one or more wallets for a new user so they can start using your app without going through the sign-up process.

With Guest Mode enabled, you can offer an option in the Para Modal for your users to get started with a guest account without signing up. When users eventually sign up, any previously created guest wallets will immediately be linked to their account.

Integration Methods

There are two primary ways to implement Guest Mode:

The easiest way to implement Guest Mode is via the Para Modal. Simply set the corresponding configuration setting (isGuestModeEnabled) in your ParaProvider configuration to true.

This setting adds a “Continue as Guest” option to the modal sign-in screen, which closes the modal and performs wallet setup in the background. If the modal is reopened, guest users will see a special version of the account screen, from which they can proceed to finish signing up and then claim their existing wallets.

import { ParaProvider, Environment } from "@getpara/react-sdk@alpha";

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ParaProvider
        paraClientConfig={{
          env: 'DEV',
          apiKey: 'yout-api-key'
        }}
        paraModalConfig={{
          // other props omitted for brevity
          isGuestModeEnabled: true,
        }}
        callbacks={{
          // An optional callback invoked after guest wallets are created:
          onGuestWalletsCreated: event => {
            console.log('Guest wallets created!', event.detail);
          }
        }}
      >
        <AppContent />
      </ParaProvider>
    </QueryClientProvider>
  );
}

Tracking Guest Wallet Creation

Whether you use the modal or a custom solution, you can monitor and reflect guest wallet creation status by using the useCreateGuestWalletsState hook. For example, you will likely want to block any signing-related interface actions until the wallets have been created.

import { useCreateGuestWalletsState } from "@getpara/react-sdk@alpha";

function AppContent() {
  const { isPending: isCreatingGuestWallets, error } = useCreateGuestWalletsState();
  
  if (error) {
    console.error('Error creating guest wallets:', error);
    return <p>Error creating guest wallets.</p>;
  }
  
  return (
    <div>
      {isCreatingGuestWallets ? (
        <p>Creating guest wallets...</p>
      ) : (
        <p>Guest wallets created successfully!</p>
      )}
    </div>
  )
}

Due to implementation details of React Query, the useCreateGuestWallets hook will not reliably reflect the status of the Para Modal’s guest wallet creation process. To monitor the modal operation’s status from the rest of your app, you must instead use useCreateGuestWalletsState. The hook’s return type resembles React Query’s UseMutationReturnType type and has most of the same fields.

Limitations

Currently, guest wallets are prevented from buying or selling crypto through the integrated onramp providers. If a guest wallet is funded, a message is presented to the user in the Para Modal account screen encouraging them to sign up and retain access to their funds. You are, of course, free to fund guest wallets if you desire, but note that you must be careful to maintain user access to the wallets to ensure no funds are lost.

We recommend using getUserShare and setUserShare to save and restore the user share for a guest wallet, just as you would for a pre-generated wallet.