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 [email protected]^5
yarn add @paperxyz/embedded-wallet-service-rainbowkit @rainbow-me/rainbowkit wagmi [email protected]^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>