usePaperWallet

Hook that prompts users to connect Paper Wallet to your app which allows users to connect to your app using their email address

import { usePaperWallet } from "@thirdweb-dev/react";

const connectWithPaperWallet = usePaperWallet();

The paperWallet also needs to be added in ThirdwebProvider's supportedWallets if you want the wallet to auto-connect on next page load.

Usage

Calling the function returned by the usePaperWallet hook opens the Paper Wallet's Modal and prompts the user to log in with their email address.

If email is not provided, the user will be prompted to enter their email address or sign in with a Google account. Once the user enters the email address or signs in with a Google account, an OTP will be sent to the user's email address. Once the user enters the OTP, the wallet will be connected.

If the email is provided, the user will be directly shown the OTP screen, the user will not be prompted to enter their email.

once connected, you can use the useAddress hook to get the user's address and usePaperWalletUserEmail hook to get the user's email address.

import { usePaperWallet } from "@thirdweb-dev/react";

function App() {
  const connectWithPaperWallet = usePaperWallet();

  return (
    <button
      onClick={() =>
        connectWithPaperWallet({
          paperClientId: "<YOUR_PAPER_SDK_CLIENT_ID>",
          email: "<USER_EMAIL>", // optional - directly show OTP screen
        })
      }
    >
      Connect with Paper Wallet
    </button>
  );
}

Configuration

paperClientId

Paper SDK requires a clientId for instantiation. You can create a clientId for your app on paper.xyz

chainId (optional)

To connect to a specific chain when connecting the wallet, pass the chainId in a configuration object as shown below.

If no chainId is specified, Ethereum (1) is used by default.

chianId: number | undefined;

import { usePaperWallet } from "@thirdweb-dev/react";
import { Polygon } from "@thirdweb-dev/chains";

function App() {
  const connectWithPaperWallet = usePaperWallet();

  return (
    <button
      onClick={() =>
        connectWithPaperWallet({
          paperClientId: "<YOUR_PAPER_SDK_CLIENT_ID>",
          chainId: Polygon.chainId,
        })
      }
    >
      Connect Wallet
    </button>
  );
}

You must add this chain in ThirdwebProvider’s supportedChains prop as shown below

import { Polygon } from "@thirdweb-dev/chains";
import { ThirdwebProvider } from "@thirdweb-dev/react";

export function YourApp() {
  return (
    <ThirdwebProvider supportedChains={[Polygon]} clientId="your-client-id">
      <App />
    </ThirdwebProvider>
  );
}

email (optional)

If the user's email address is already known, you can skip prompting the user for entering an email address and directly show the OTP screen by passing the email in a configuration object as shown below.

import { usePaperWallet } from "@thirdweb-dev/react";
import { Polygon } from "@thirdweb-dev/chains";

function App() {
  const connectWithPaperWallet = usePaperWallet();

  return (
    <button
      onClick={() =>
        connectWithPaperWallet({
          paperClientId: "<YOUR_PAPER_SDK_CLIENT_ID>",
          email: "user@example.com",
        })
      }
    >
      Connect Wallet
    </button>
  );
}

advancedOptions (optional)

Advanced options for Paper SDK.

advancedOptions: {
  recoveryShareManagement?: 'AWS_MANAGED' | 'USER_MANAGED'
}

recoveryShareManagement indicates who should be in charge of managing the user's recovery share. Choosing "AWS_MANAGED" is the easiest to get started and is generally what we recommend. For more information, see managing the user's recovery share

styles (optional)

customize the UI component of Paper SDK.

styles: {
  // The roundness of buttons.
  borderRadius?: string,
  // The background color of the UI components.
  colorBackground?: string,
  // The button and link color of the UI components.
  colorPrimary?: string,
  // The text color of the UI components.
  colorText?: string,
  // The font family of the UI components.
  fontFamily?: string,
  // background color of the input fields
  inputBackgroundColor?: string,
  // border color of the input fields
  inputBorderColor?: string,
}