paperWallet

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

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

const paperWalletConfig = paperWallet({
  clientId: "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]} />;

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

clientId

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

Must be a 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
  supportedWallets={[
    paperWallet({
      clientId: "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({
  clientId: "PAPER_CLIENT_ID",
});

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

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

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

connectOptions

{
  email?: string;
  chainId?: number;
} | 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]}>
      <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.