namekit: A TypeScript repository from NameHash Labs

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.

The NameKit monorepo contains multiple packages and apps.

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.

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.

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

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).

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

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.

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.

We use changesets to manage our releases.

Note

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

Run pnpm changeset
Choose the packages you want to release
Add a summary of the changes
Commit the file
Open a Pull Request
Once the PR is merged, a new or existing Version Packages PR will open.
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.

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.

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