Easily integrate rich ENS user journeys into your wallet, app, or game.
🏗️ 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 |
|
|
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 installin the root of the repository (after you clone it). - Node.js will automatically install
corepack. You should also ensure Corepack is enabled by runningcorepack enable.
- pnpm
- Run
npm install -g pnpmor see other installation options. - To ensure you're running the expected version of pnpm run
corepack use pnpmin the root of the repository (after you clone it).
- Run
Use git to clone this respository, and install the dependencies using pnpm to run NameKit locally:
git clone https://github.com/namehash/namekit.gitcd namekitpnpm ipnpm 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.
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 PackagesPR will open. - Merge the
Version PackagesPR 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