paperWallet

A wallet configurator for Paper Wallet which allows integrating the wallet with React

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

const paperWalletConfig = paperWallet({
  paperClientId: "PAPER_CLIENT_ID",
});

customize (optional)

paperWalletConfig contains the default config for metadata and UI. you can optionally choose to override the defaults to customize the wallet. Learn more about these configs

const paperWalletConfig = paperWallet({ ... });

// override metadata
paperWalletConfig.meta.name = "..."; // change the name
paperWalletConfig.meta.iconURL = "..."; // change the icon
paperWalletConfig.meta.urls = {
  // change urls to download the wallet on various platforms
  android: "https://...",
  ios: "https://...",
  chrome: "https://...",
  firefox: "https://...",
};

// override connection UI
paperWalletConfig.connectUI = PaperWalletConnectUI; // react component

// custom selection UI
paperWalletConfig.selectUI = PaperWalletSelectUI; // react component

Once the config is ready, you can use it with ConnectWallet component or useConnect hook as shown below

// add to ThirdwebProvider to add it in ConnectWallet's modal
<ThirdwebProvider supportedWallets={[paperWalletConfig]} clientId="your-client-id"/>;

// or use it with useConnect hook
const connect = useConnect();
connect(paperWalletConfig, { ... });

paperClientId

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

Must be a string.

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,
}

Usage with `ConnectWallet`

To allow users to connect to this wallet using the ConnectWallet component, you can add it to ThirdwebProvider's supportedWallets prop.

<ThirdwebProvider
  clientId="your-client-id"
  supportedWallets={[
    paperWallet({
      paperClientId: "PAPER_CLIENT_ID",
    }),
  ]}
>
  <YourApp />
</ThirdwebProvider>

Usage with `useConnect`

you can use the useConnect hook to programmatically connect to the wallet without using the ConnectWallet component.

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

Calling connect opens the Paper Wallet's Modal and prompts the user to log in with their email address.

const paperWalletConfig = paperWallet({
  paperClientId: "PAPER_CLIENT_ID",
});

function App() {
  const connect = useConnect();

  const handleConnect = async () => {
    await connect(paperWalletConfig, connectOptions);
  };

  return <div> ... </div>;
}

connectOptions

{
  email?: string;
  chainId?: number;
  advancedOptions?: {
    recoveryShareManagement?: 'AWS_MANAGED' | 'USER_MANAGED'
  },
  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,
  }
} | undefined;

chainId (optional)

If chainId is provided, wallet will be connected to network with given chainId, else wallet will be connected to Ethereum mainnet by default.

Chain object corresponding to this chainId from @thirdweb-dev/chains package must be specified 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 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.