Utilities and types

Besides components and hooks, Wyllet exports helper functions for configuration, chains, tokens, theming, translations and formatting, plus the TypeScript types behind every public API. Everything on this page is a named export of wyllet.

Configuration

getDefaultConfig

Creates a wagmi config with EIP-6963 discovery, WalletConnect (when you pass a project id), your wallet list and app metadata. It is covered in Configuration.

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

Chains

customChain

Defines any EVM chain in one call. The result is a regular viem Chain (built with viem's defineChain) that also carries Wyllet's icon metadata under chain.custom.wyllet.

function customChain(input: CustomChainInput): Chain

const myChain = customChain({
  id: 424242,
  name: 'My Chain',
  rpcUrl: 'https://rpc.mychain.xyz',
  explorerUrl: 'https://scan.mychain.xyz',
  nativeCurrency: { name: 'My Token', symbol: 'MYT', decimals: 18 },
  icon: '/mychain.svg',
})

popularChains

A readonly array of viem chains with built-in icons: Ethereum, Base, OP, Arbitrum, Polygon, BNB Smart Chain, Avalanche, zkSync, Linea and Scroll, in that order.

popularTestnets

A readonly array of testnets: Sepolia, Base Sepolia, OP Sepolia, Arbitrum Sepolia and Polygon Amoy.

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

See Chains for ordering and the Networks tab.

Tokens

defaultTokens

A TokenList of blue-chip tokens, used when tokens is 'default' (the provider's default):

withDefaultTokens

function withDefaultTokens(custom: TokenList | TokenEntry[]): TokenList

Your tokens first, then defaultTokens for each chain, with duplicates (same address, case-insensitive) removed.

const tokens = withDefaultTokens([
  { chainId: 8453, address: '0x…', symbol: 'MYTKN', decimals: 18, pinned: true },
])
 
<WylletProvider tokens={tokens} />

toTokenList

function toTokenList(input: TokenList | TokenEntry[]): TokenList

Turns a flat TokenEntry[] (each entry has a chainId) into a TokenList keyed by chain id, keeping order. A TokenList is returned unchanged.

tokenIconUri

function tokenIconUri(symbol: string): string

Returns the icon TokenIcon uses for a symbol: built-in official artwork when bundled (matched as given, then upper-cased), otherwise a generated monogram as an SVG data URI. It never throws, including for emoji or markup in the symbol.

See Tokens for pinning, sorting and user token import.

Theming

Theme presets

Four presets, each a function that takes optional ThemeOptions and returns a Theme:

ThemeOptions:

<WylletProvider theme={obsidianTheme({ accentColor: '#C6F432', radius: 'soft' })} />

createTheme

function createTheme(base: Theme, overrides?: DeepPartial<Theme>): Theme

Deep-merges overrides into base without mutating either.

const brand = createTheme(porcelainTheme(), {
  colors: { accent: '#5B3DF5', islandBackground: '#F7F5FF' },
  radii: { button: '999px' },
})

themeToCssVars

function themeToCssVars(theme: Theme): Record<string, string>

Flattens a theme into the CSS custom properties Wyllet uses, named --wy-<group>-<token> in kebab case. For example colors.accentForeground becomes --wy-colors-accent-foreground and radii.panel becomes --wy-radii-panel. Useful for styling your own UI to match. See Theming.

Translations

en

The English strings object. Every user-facing string Wyllet renders is a key in en. Pass a partial object to the provider's messages prop to rename or translate. Placeholders such as {name} are filled in at render time.

import { en } from 'wyllet'
 
<WylletProvider messages={{ connect: 'Conectar', connectTo: 'Conectar a {app}' }} />

See Translations.

Formatting

formatAmount

function formatAmount(value: bigint, decimals: number, maxSignificant?: number): string

Formats a raw token amount for display. maxSignificant defaults to 4.

Values of a billion or more use a B suffix. Invalid decimals (not an integer from 0 to 77) fall back to 18.

shortenAddress

function shortenAddress(address: string, chars?: number): string

Keeps chars characters (default 4) on each side: 0x1234567890abcdef1234567890abcdef12345678 becomes 0x1234…5678. Strings already short enough are returned unchanged.

Wallets

The wallet presets (metaMaskWallet, phantomWallet, rabbyWallet, okxWallet, walletConnectWallet, coinbaseWallet, rainbowWallet, trustWallet, browserWallet, burnerWallet) and defaultWallets are covered in Wallets.

burner

function burner(options?: BurnerOptions): CreateConnectorFn

The wagmi connector behind burnerWallet(): an in-browser wallet whose private key is generated and kept unencrypted in localStorage (key wyllet.v1.burner.key unless you pass storageKey). Non-signing RPC calls go to the chain's transport from your config. Use it only for local development and demos. It logs a console warning the first time it connects on a host that is not local (localhost, 127.0.0.1, [::1], 0.0.0.0, or a .local, .localhost or .test domain).

import { createConfig, http } from 'wagmi'
import { sepolia } from 'viem/chains'
import { burner } from 'wyllet'
 
const config = createConfig({
  chains: [sepolia],
  transports: { [sepolia.id]: http() },
  connectors: [burner()],
})

Types

All types are exported from wyllet and can be imported with import type.

import type { Theme, Wallet, WylletAuthAdapter } from 'wyllet'

Provider and configuration

Components and hooks

Theming

Wallets

Chains and tokens

Auth

Toasts and activity

Translations