Wyllet 1.1.0 is out. Open source, MIT.

One button. Every wallet. Your design.

Wyllet is a wallet connector for React dApps on wagmi and viem. It gives you the connect button, the account panel, token balances, an activity timeline, toasts and Sign-In With Ethereum, themed to match your app. It has no direct runtime dependencies: React, wagmi and viem come from your app as peers.

Read the quick start
pnpm add wyllet wagmi viem @tanstack/react-query

No wallet installed? Pick Demo wallet in the panel. It lives in your browser and holds no funds.

Open it your way

Choose how the panel enters the screen and which theme it wears. This is the real component: every change here applies to the panel on this page.

Presentation

A floating side panel. The default. On phones, every presentation becomes a bottom sheet you can drag.

Theme
<WylletProvider
  theme={{ light: porcelainTheme(), dark: obsidianTheme() }}
  appearance={{ presentation: 'drawer' }}
/>

Everything after connect

Most connectors stop once a wallet is linked. Wyllet also ships the parts every dApp ends up building next.

Account panel

Balances for your token list, a timeline of what happened, and a network grid with live gas. Open any tab from your own UI.

Toasts

Promise-aware notifications in your theme. Transactions you track get one automatically.

A QR code that scans

Wyllet draws its own QR codes, with no QR library. CI renders them at the smallest size Wyllet uses and checks that they decode.

Your chains and tokens, in your order

Mix popular chains with your own. Pin your token above the blue chips. Users see the same list on every device, because it lives in your code.

  • Ethereum
  • Base
  • OP Mainnet
  • Arbitrum One
  • Polygon
  • BNB Smart Chain
  • Avalanche
  • ZKsync Era
  • Linea Mainnet
  • Scroll
  • Zora
  • Sepolia
  • ETH
  • USDC
  • USDT
  • DAI
  • WBTC
  • OP
  • ARB
  • DEGEN
const myChain = customChain({
  id: 424242,
  name: 'My Chain',
  rpcUrl: 'https://rpc.mychain.xyz',
})

getDefaultConfig({ appName: 'My dApp', chains: [myChain, ...popularChains] })

Gate any page

ConnectGate shows its children only when the user is connected, on a supported network, and signed in if you use SIWE.

Keyboard first

Turn on shortcut="mod+k" and ⌘ K opens the panel. Arrow keys and Enter move through wallets, number keys 1 to 9 pick one, and the last wallet you used is one tap away.

570 wallets that open the right app

With a WalletConnect project ID, the WalletConnect option becomes a searchable directory with each wallet's official logo. On a phone, picking a wallet opens that exact app instead of whichever wallet the phone defaults to.

Why the default WalletConnect link opens the wrong wallet

Live in three steps

No CSS import and no extra setup. Wyllet injects its styles, finds installed wallets, and reads everything else from your wagmi config.

  1. Install

    Wyllet and the peers your dApp probably has already.

    pnpm add wyllet wagmi viem @tanstack/react-query

  2. Create a config

    Chains, wallets, WalletConnect and app details in one call.

    wagmi.ts
    import { getDefaultConfig, popularChains } from 'wyllet'

export const config = getDefaultConfig({
  appName: 'My dApp',
  walletConnectProjectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID,
  chains: popularChains, // the first chain is the default
})

  3. Add the button

    Wrap your app and drop in the button. That's the whole integration.

    App.tsx
    'use client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'
import { WylletButton, WylletProvider } from 'wyllet'
import { config } from './wagmi'

const queryClient = new QueryClient()

export function App() {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <WylletProvider shortcut="mod+k">
          <WylletButton />
        </WylletProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}
Read the quick startUsing Next.js

Nothing new in your lockfile

A wallet connector runs next to your users' funds, so Wyllet keeps its supply chain as small as it can be: zero direct runtime dependencies.

  • Peers only. React, wagmi, viem and React Query, which your dApp already has. WalletConnect is optional and you pin its version.
  • Enforced in CI. A test scans the built package and fails if anything else is imported.
  • Published with provenance. Releases are built and published by GitHub Actions through npm Trusted Publishing. No npm token is stored anywhere.
  • Isolated. Wyllet's UI runs behind error boundaries, so a bug in it can't take down your app.
Read the security notes

Questions

More in the FAQ.

What is Wyllet?

Wyllet is an open-source wallet connector for React dApps. It adds a connect button, an account panel with tokens, activity and networks, toasts, Sign-In With Ethereum and a connection gate on top of wagmi and viem.

Is Wyllet free?

Yes. Wyllet is MIT licensed and free for commercial use. WalletConnect project IDs are also free from Reown Cloud.

Does Wyllet add dependencies to my app?

Only Wyllet itself: it has no direct runtime dependencies. It uses only the libraries a wagmi dApp already has (react, wagmi, viem and @tanstack/react-query) as peer dependencies. WalletConnect support is an optional peer you install and pin yourself.

Which wallets are supported?

MetaMask, Phantom, Rabby, OKX and WalletConnect out of the box, any browser wallet that announces itself through EIP-6963, and about 570 mobile wallets through the WalletConnect directory. You can also add your own wallets.

Does it work with Next.js?

Yes. Wyllet ships with the use client directive and is SSR-safe. Put the providers in a client component and use them from your App Router layout.

Can I use my own button or design?

Yes. Pick a theme preset, change any design token through CSS variables, add your own class names per element, or build a fully custom trigger with the useWylletButton hook.

Can I add my own chain or token?

Yes. Define any EVM chain with customChain() and pass your own token list. Networks and tokens are set in code, so every user sees the same curated list in the order you choose.

How is Wyllet different from RainbowKit?

Both are free, open-source React kits on wagmi and viem. Wyllet is built for wagmi v3, while RainbowKit’s latest release supports wagmi v2. Wyllet also has no direct runtime dependencies, opens as a drawer, popover, modal or inline panel, and shows tokens, activity and toasts out of the box. The comparison page at wyllet.dev/compare covers RainbowKit, ConnectKit, Reown AppKit, Privy, Dynamic, thirdweb and Web3-Onboard.

Does Wyllet collect analytics or call its own servers?

No. Wyllet has no analytics and no servers. The only request it makes on its own is loading the WalletConnect wallet directory, and only when a user opens All wallets. You can turn that off. Balances, ENS names and gas prices are read through your own wagmi transports.

Give your dApp a better connect button

Free, open source and ready for production.

Install WylletOpen the playgroundStar on GitHub