Easily integrate rich ENS user journeys into your wallet, app, or game.

Project Status

🏗️ NameKit is currently an alpha preview under active development. Expect APIs and interfaces to experience breaking changes.

Project Directory

The NameKit monorepo contains multiple packages and apps.

NameKit Packages

	Source Code	Summary	Deployment
	namekit-core	Core logic and data types for NameKit. Simplify and enhance your integration with ENS.	-
	namekit-react	React UI components for building on NameKit.
	ens-utils	A collection of utilities for working with ENS.
	namekit-contracts	Earn revenue for helping ENS grow.

NameGuard Packages

	Source Code	Summary	Deployment
	nameguard-sdk	A lightweight JavaScript client for the NameGuard API.
	nameguard-js	A JavaScript implementation of NameGuard. Currently implements securePrimaryName with more coming soon.
	nameguard-react	React UI components for building on NameGuard.
	ens-webfont	A webfont to improve rendering of graphemes that might appear in normalizable ENS names on the web.
	ens-normalize-python	Python implementation of ENSIP-15 (ENS Normalize).
	ens-font-data	Metadata for graphemes that may appear in ENS names.	-
	ens-label-inspector	Detailed inspection of labels in ENS names.
	nameguard	Identify and prevent malicious use of ENS names.

Apps

	Source Code	Summary	✨ Try it out! ✨
	ens-node	Backend for NameKit. Simplify and enhance your integration with ENS.	-
	nameguard.io	Official website for NameGuard.	Preview
	api.nameguard.io	AWS Lambda deployment of the NameGuard API	Preview
	examples.nameguard.io	Examples for using nameguard-sdk, nameguard-js, and nameguard-react.	Preview
	storybook.namekit.io	Explore UI components included in namekit-react, nameguard-react, and ens-webfont.	Preview
	docs.nameguard.io	Documentation for all NameGuard packages.	Preview
	namehashlabs.org	Official website for NameHash Labs.	Preview

Local Development

Prerequisites

• Git
• Node.js
  • It's recommended you install Node.js through nvm (see link for installation instructions).
  • To ensure you're running the expected version of Node.js run nvm install in the root of the repository (after you clone it).
  • Node.js will automatically install corepack. You should also ensure Corepack is enabled by running corepack enable.
• pnpm
  • Run npm install -g pnpm or see other installation options.
  • To ensure you're running the expected version of pnpm run corepack use pnpm in the root of the repository (after you clone it).

Getting started

Use git to clone this respository, and install the dependencies using pnpm to run NameKit locally:

1. git clone https://github.com/namehash/namekit.git
2. cd namekit
3. pnpm i
4. pnpm dev

It's recommended you run pnpm dev in the root of the repository to start all apps, packages, and internal resources to support local development.

Testing

Tests are automatically ran when a new Pull Request is opened. You can run them locally using pnpm test.

If you're developing locally, you can watch changes and run tests automatically using pnpm test:watch.

Continuous Deployment

We use changesets to manage our releases.

Note

If you're making changes to any of the packages/*, you should create a changeset.

1. Run pnpm changeset
2. Choose the packages you want to release
3. Add a summary of the changes
4. Commit the file
5. Open a Pull Request
6. Once the PR is merged, a new or existing Version Packages PR will open.
7. Merge the Version Packages PR when you're ready to release a new version (of all packages) to NPM, or wait to merge in other changesets first.

Storybook

We use Storybook to preview components across our core packages:

• @namehash/namekit-react
• @namehash/nameguard-react
• @namehash/ens-webfont
• @namehash/ui
  • These components are mostly internal and not intended for public use, but they are used across our packages.

Tailwind Configuration

When configuring Tailwind CSS for use with this project, please note the following:

If you're using the @tailwindcss/forms plugin in your tailwind.config.ts, you may encounter some styling conflicts with our components. To resolve this, you should use the plugin with the class strategy applied. Here's an example of how to configure it: https://github.com/tailwindlabs/tailwindcss-forms?tab=readme-ov-file#using-only-global-styles-or-only-classes