Connect Wallet Button

npm version


This library is in early development

Looking to add a "Connect Wallet" button with built-in Embedded Wallet support?

Paper provides an easy-to-use React provider that wraps wagmi and RainbowKit to quickly connect and manage wallets on your app. Most internal configuration is exposed allowing you to customize further if desired.

Add a "Connect Wallet" Button

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

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

Wrap your application with PaperEmbeddedWalletProvider and add ConnectButton:

import {
} from "@paperxyz/embedded-wallet-service-rainbowkit";
import "@rainbow-me/rainbowkit/styles.css";

function App() {
  return (
    // Wrap your application.
      appName="Paper RainbowKit Provider Example"
        clientId: "992d8417-9cd1-443c-bae3-f9eac1d64767",
        chain: "Polygon",
      // ...your app

      // Place ConnectButton anywhere in your app.
      <ConnectButton />


Not seeing styles?

Don't forget import "@rainbow-me/rainbowkit/styles.css"!

That's it!

Customize the button

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

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

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 { PaperEmbeddedWalletProvider } from "@paperxyz/embedded-wallet-service-rainbowkit";
import { darkTheme } from "@rainbow-me/rainbowkit";
import "@rainbow-me/rainbowkit/styles.css";
    name: "Acme Inc.",
    iconUrl: "",
    iconBackground: "#000000",
    modalSize: "wide",
    theme: darkTheme({
      accentColor: "#7b3fe4",
      accentColorForeground: "white",
      borderRadius: "small",
      fontStack: "system",
      overlayBlur: "small",
  // ...

Customize other wallets shown

You can customize the non-Paper wallets with the otherWallets field:

import {
} from "@rainbow-me/rainbowkit/wallets";

  // Show only MetaMask:
 		metaMaskWallet({ chains }),
  // Or hide all non-Paper wallets:
  // otherWallets={[]}