A small, configurable React component for interacting with the Ethereum Name Service.
Install the widgets library and its peer dependencies via npm
or yarn
.
yarn add ens-widgets ethers wagmi
npm install ens-widgets ethers wagmi
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:
name
: a preset name to registershadowless
: if true, the widget will not have a shadowtheme
: easily choose between dark and light mode (defaults to light)trackingCode
: a 4-16 character unique string that will be included in the registration event for on-chain analytics
import { RegistrationWidget } from 'ens-widgets'
import { useConnectModal } from '@rainbow-me/rainbowkit'
export default function Page() {
const { openConnectModal } = useConnectModal()
return <RegistrationWidget connectAction={openConnectModal} />
}
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.