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

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

const paperWalletConfig = paperWallet();

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()]}
>
  <YourApp />
</ThirdwebProvider>;

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(options);

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

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

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

{
  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;