Connect Wallet Button

🚧
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 {
  ConnectButton,
  PaperEmbeddedWalletProvider,
} from "@paperxyz/embedded-wallet-service-rainbowkit";
import "@rainbow-me/rainbowkit/styles.css";

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

      // Place ConnectButton anywhere in your app.
      <ConnectButton />
    </PaperEmbeddedWalletProvider>
  )
}

🎨
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.

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

Customize other wallets shown

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

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

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