Skip to main content

Paper Wallet

Prompt users to connect to your app using their email with Paper Wallet

Usage​

import { PaperWallet } from "@thirdweb-dev/wallets";
import { Ethereum } from "@thirdweb-dev/chains";

const wallet = new PaperWallet({
  chain: Ethereum, //  chain to connect to
  paperClientId: "your_paper_client_id", // Paper SDK client ID
});

wallet.connect();

Pricing & Billing​

Pricing

  • Free to use email wallet with a self recovery code.
  • Free up to 10,000 Monthly Active Wallet +$0.02 per incremental Monthly Active Wallet after with a managed recovery code.

Find more information on the different billing tiers by visiting thirdweb's pricing page.

Configuration​

Provide a configuration object when instantiating the PaperWallet class.

paperClientId (required)

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

Must be a string.

chain (required)

The chain to connect to by default.

Must be a Chain object, from the @thirdweb-dev/chains package.

clientId (recommended)

Provide clientId to use the thirdweb RPCs for given chains

You can create a client ID for your application from thirdweb dashboard.

chains (optional)

Provide an array of chains you want to support.

Must be an array of Chain objects, from the @thirdweb-dev/chains package.

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,
}
walletStorage (optional)

The wallet needs to store data in persistent storage. By default localStorage is used. If you want to use a different storage, you can pass it in the walletStorage option.

Must be an object conforming to the AsyncStorage interface:

export interface AsyncStorage {
  getItem(key: string): Promise<string | null>;
  setItem(key: string, value: string): Promise<void>;
  removeItem(key: string): Promise<void>;
}

Example:

import { PaperWallet } from "@thirdweb-dev/wallets";

const wallet = new PaperWallet({
  // ... other required config

  walletStorage: {
    getItem: (key) => {
      // Implement your own storage logic here
    },
    removeItem: (key) => {
      // Implement your own storage logic here
    },
    setItem: (key, value) => {
      // Implement your own storage logic here
    },
  },
});

Methods​

Inherits all the public methods from the AbstractClientWallet class.

connect​

open the Paper Wallet's Modal and prompt the user to log in with their email address. Once connected, it returns the public wallet address assigned to the user.

await wallet.connect();
Configuration
connect(options?: {
  email?: string,
  chainId?: number
}): Promise<string>;
email (optional)

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.

chainId (optional)

If chainId is provided, the wallet will be connected to the network with the given chainId, else it will be connected to the Ethereum Mainnet.

Return Value​

Returns a string containing the user's assigned public wallet address.

getEmail​

Get the email associated with the currently connected wallet.

const email = await wallet.getEmail();
Configuration

Return Value​

Returns a string containing the email.

string;