@paperxyz/embedded-wallet-service-rainbowkit v0.3.0

Paper is a developer platform for NFT commerce that easily onboards users without a wallet or cryptocurrency.

Documentation

Installation

Install embedded-wallet-service-rainbowkit and peer dependencies (wagmi and ethers):

npm install @paperxyz/embedded-wallet-service-rainbowkit wagmi ethers@^5
yarn add @paperxyz/embedded-wallet-service-rainbowkit wagmi ethers@^5

Wrap your application with the provider:

function App() {
  return (
    // Wrap your application.
    <PaperEmbeddedWalletProvider
      appName="Paper RainbowKit Provider Example"
      walletOptions={{
        clientId: "992d8417-9cd1-443c-bae3-f9eac1d64767",
        chain: "Polygon",
      }}
    >
      // ...your app // Add the connect button anywhere in your app. // Make
      sure it's wrapped within `PaperEmbeddedWalletProvider`.
      <ConnectButton />
    </PaperEmbeddedWalletProvider>
  );
}

Customize the button

Pass your own button to match your app's branding. Here's an example with Chakra UI.

<ConnectButton>
  <Button size="lg" rounded="full">
    Sign In
  </Button>
</ConnectButton>

Customize the modal

The RainbowKit modal is highly customizable and modalOptions supports all <RainbowKitProvider> props. See RainbowKit's theme guide for the full list of options.

Here's an example of a few customizations:

import { darkTheme } from "@paperxyz/embedded-wallet-service-rainbowkit";

<PaperEmbeddedWalletProvider
  modalOptions={{
    modalSize: "wide",
    theme: darkTheme({
      accentColor: "#7b3fe4",
      accentColorForeground: "white",
      borderRadius: "small",
      fontStack: "system",
      overlayBlur: "small",
    }),
  }}
>
  // ...
</PaperEmbeddedWalletProvider>;