<CreateWallet>

Summary

<CreateWallet> is a React component that renders a button that initiates a flow to create a wallet tied to a user's email address. Paper does not have the ability to read the private keys of this wallet, and the user can choose to export the private keys of this wallet at any time by accessing a link that we can provide (please contact us for details of the export flow).

The flow works as follows:

  1. Paper sends the user a verification email (to the address provided to the emailAddressprop) to ensure that they own the email that is being passed in. This is the email address that the wallet will be tied to.

Optional event callback function onEmailVerificationInitiated is called when the user clicks on the button. If nothing is passed in, we show default messages to prompt the user to check their email for verification.

  1. Paper calls onSuccess when email verification succeeds and passes through an object that contains the user's email address and wallet address. If verification failed, onError is called with an error message

📘

Quickstart

Check out the interactive CreateWallet builder.

Code Snippet

<CreateWallet
    emailAddress="[email protected]"
    onSuccess={(user) => { ... }}
    onEmailVerificationInitiated={() => { ... }}
    onError={(error) => { ... }}
/>

Props

Prop

Type

Description

emailAddress

string

Required

This is the email address that the user owns and can access. We will send them a verification email and create a wallet tied to this email.

redirectUrl

string

Optional
The link where you would like users to be sent to after they clicked the link in their email to login.

By default, the link in the email authenticates them and just ask them to return to the original tab

Callback Functions

Type

Description

onSuccess

(user: { emailAddress: string; walletAddress: string; }) => void

Required

This callback is invoked upon a successful email verification and wallet generation. If a wallet has already previously been generated by this email address, we will pass back the previously-generated wallet address. Paper passes through a PaperUser object that contains the user's wallet public address and email address.

onEmailVerificationInitiated

() => void

Optional

This function is called when email verification has been initiated and we are currently waiting for the user to verify their email by checking their email inbox and clicking on a verify button.

This would be a place to evoke UX on your end that tells the user to check their email for a verification link. If this prop is not set, we show a default modal that tells the user to do so.

onError

(error: PaperSDKError => void

Optional

This function is called when email verification fails. A wallet is not generated in this case.

Customization

The basic CreateWallet provides a simple button

201201

CreateWallet button

If you want to override the button, you can simply wrap CreateWallet around your own button

<CreateWallet
    emailAddress="[email protected]"
    onSuccess={(user) => {
        console.log("user", user);
    }}
    onEmailVerificationInitiated={() => {}}
    onError={(error) => {
        console.log("error", error);
    }}
>
  <button>My Button!</button>
</CreateWallet>

Alternatively, if you want full control, you can wrap CreateWallet around a function that takes in a createWallet param that you can call to initiate the wallet creation process

<CreateWallet
    onSuccess={(user) => {
      console.log("user", user);
    }}
    onEmailVerificationInitiated={() => {
      console.log("onEmailVerificationInitiated callback fired");
    }}
    onError={(error) => {
    console.log("error", error);
    }}
    redirectUrl="https://paper.xyz/dashboard"
>
  {({ createWallet }) => {
    return (
      <button
        className="bg-blue-500 p-5"
        onClick={() => {
          // you can verify you email here before passing it in!
          createWallet("[email protected]");
        }}
      >
        Create Wallet
      </button>
        );
    }}
</CreateWallet>