Installation

Install the wyllet package together with its peer dependencies. If your dApp already uses wagmi, you likely have most of them.

Install

pnpm add wyllet wagmi viem @tanstack/react-query

npm install wyllet wagmi viem @tanstack/react-query

yarn add wyllet wagmi viem @tanstack/react-query

bun add wyllet wagmi viem @tanstack/react-query

react and react-dom are peers too. They are already part of any React app.

Peer dependencies

Wyllet has no direct runtime dependencies. Everything it needs is a peer dependency that your dApp provides.

Enable WalletConnect

WalletConnect lets users connect mobile wallets by scanning a QR code on desktop, or by opening the wallet app on a phone. It also powers the All wallets directory. It is optional, and it is only active when you pass a walletConnectProjectId.

To enable it:

1. Create a free project ID at cloud.reown.com.
2. Install the WalletConnect provider.
3. Pass the ID to getDefaultConfig().

pnpm add @walletconnect/ethereum-provider

npm install @walletconnect/ethereum-provider

yarn add @walletconnect/ethereum-provider

bun add @walletconnect/ethereum-provider

import { base, mainnet } from 'viem/chains'
import { getDefaultConfig } from 'wyllet'
 
export const config = getDefaultConfig({
  appName: 'My dApp',
  walletConnectProjectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, base],
})

Without a project ID, Wyllet does not add a WalletConnect connector, and the WalletConnect option is hidden from the wallet list. Installed browser wallets still work.

Styles

You do not need to import a stylesheet. <WylletProvider> injects its base styles in a <style> element when it renders.

If you would rather serve the base stylesheet as a file, turn injection off and import it yourself:

import 'wyllet/styles.css'

<WylletProvider injectStyles={false}>{children}</WylletProvider>

TypeScript

Wyllet ships its own type definitions for both ESM and CommonJS. No @types package is needed.

Next steps

• Quick start: render your first connect button.
• Next.js: App Router setup.
• Configuration: every getDefaultConfig() option.