ENS Widgets

A small, configurable React component for interacting with the Ethereum Name Service.

Installation

Install the widgets library and its peer dependencies via npm or yarn.

yarn add ens-widgets ethers wagmi

npm install ens-widgets ethers wagmi

Name Registration Widget

This component assumes your app is already wrapped in <WagmiConfig> and either a RainbowKit or ConnectKit provider.

Required props:

• connectAction: a RainbowKit or ConnectKit function that opens a wallet connect modal

Optional props:

• hasContainer: if true (default), the widget will be wrapped in a container with padding and a border
• hasHeader: if true (default), the widget will have a header with a title and link to ens.domains
• name: a preset name to register
• onStatusUpdate: a callback that gives you access to the status of the registration process
• shadowless: if true, the widget will not have a shadow
• theme: easily choose between dark and light mode (defaults to light)
• trackingCode: an ENS name that will be hashed and included in the transaction for on-chain analytics according to ENSIP-14

import { RegistrationWidget } from 'ens-widgets'
import { useConnectModal } from '@rainbow-me/rainbowkit'

export default function Page() {
  const { openConnectModal } = useConnectModal()

  return <RegistrationWidget connectAction={openConnectModal} />
}

Running examples

Clone this repo and install dependencies

git clone https://github.com/gskril/ens-widgets.git
cd ens-widgets
yarn install

Start the code bundler for the component and the example Vite app

yarn dev:vite # or dev:next for a Next.js example
# then in another terminal window:
yarn dev:widget

Any changes to packages/widget or examples/vite will auto-reload the page.