docs(example): ensnode-react#1999
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
3 Skipped Deployments
|
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughAdds a new ENSNode React example app demonstrating ENSIP-19 primary-name resolution, including Vite/TypeScript config, React components (App, PrimaryNameView, indexing/connectivity helpers), docs, and a license. The example reads ENSNode settings from Vite env vars and uses ENSNode hooks/providers. ChangesENSNode React Example (single DAG)
Sequence Diagram(s)sequenceDiagram
participant User as Browser (App)
participant App as ENSNode React App
participant Hook as usePrimaryName / ENS SDK
participant ENSNode as ENSNode API
User->>App: submit address + chain
App->>Hook: call usePrimaryName(address, chainId, accelerate:true)
Hook->>ENSNode: HTTP request for primary name / indexing status
ENSNode-->>Hook: JSON response (name / projection)
Hook-->>App: hook state (loading → success/error)
App-->>User: render primary name or error
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (2 warnings, 1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
Adds a new minimal Vite + React example app under examples/ensnode-react-example to demonstrate using @ensnode/ensnode-react (specifically EnsNodeProvider + usePrimaryName) against a configurable ENSNode URL.
Changes:
- Introduces a new
examples/ensnode-react-exampleworkspace package with Vite/TS config and minimal UI. - Demonstrates primary-name resolution via
usePrimaryName, defaulting tohttps://api.alpha.ensnode.iowithVITE_ENSNODE_URLoverride. - Updates
pnpm-lock.yamlto include the new example importer and its dependencies.
Reviewed changes
Copilot reviewed 9 out of 11 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Adds lockfile entries for the new example workspace importer and its resolved deps. |
| examples/ensnode-react-example/package.json | Defines the example workspace package, scripts, and dependencies. |
| examples/ensnode-react-example/vite.config.ts | Minimal Vite config enabling React plugin. |
| examples/ensnode-react-example/tsconfig.json | TypeScript configuration for the example source. |
| examples/ensnode-react-example/index.html | HTML entrypoint with #root mount point. |
| examples/ensnode-react-example/src/main.tsx | React 19 createRoot bootstrap rendering <App />. |
| examples/ensnode-react-example/src/App.tsx | Sets up EnsNodeProvider with URL-configurable options and renders the demo view. |
| examples/ensnode-react-example/src/PrimaryNameView.tsx | Implements the address input + usePrimaryName query UI. |
| examples/ensnode-react-example/src/vite-env.d.ts | Adds Vite client type references. |
| examples/ensnode-react-example/README.md | Documents usage and environment configuration. |
| examples/ensnode-react-example/LICENSE | Adds MIT license for the example package. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <form | ||
| onSubmit={(event) => { | ||
| event.preventDefault(); | ||
| setAddress(input as Address); | ||
| }} |
| <input | ||
| type="text" | ||
| value={input} | ||
| onChange={(event) => setInput(event.target.value)} | ||
| placeholder="0x..." | ||
| style={{ width: "28rem" }} | ||
| /> |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@examples/ensnode-react-example/src/PrimaryNameView.tsx`:
- Around line 26-40: Validate the input before calling setAddress: replace the
blind type assertion setAddress(input as Address) with a check using viem's
isAddress (available via `@ensnode/ensnode-sdk`) and only call setAddress when
isAddress(input) is true; if invalid, prevent submission and surface feedback to
the user (e.g., set an error state and render a message) so the PrimaryNameView
form's onSubmit handler and related state (input, setInput, setAddress) validate
addresses rather than forwarding arbitrary text to usePrimaryName.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: b70c8436-76c7-4a36-9d60-753f45611930
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (10)
examples/ensnode-react-example/LICENSEexamples/ensnode-react-example/README.mdexamples/ensnode-react-example/index.htmlexamples/ensnode-react-example/package.jsonexamples/ensnode-react-example/src/App.tsxexamples/ensnode-react-example/src/PrimaryNameView.tsxexamples/ensnode-react-example/src/main.tsxexamples/ensnode-react-example/src/vite-env.d.tsexamples/ensnode-react-example/tsconfig.jsonexamples/ensnode-react-example/vite.config.ts
lightwalker-eth
left a comment
lightwalker-eth
left a comment
There was a problem hiding this comment.
@notrab Thanks for getting started on this PR. Noted how this was only a draft. Shared some suggestions with feedback.
| @@ -0,0 +1,20 @@ | |||
| # ensnode-react Example | |||
There was a problem hiding this comment.
It's super logical to put the ensnode-react-example inside examples/ensnode-react-example/ within the monorepo.
The context we have right now though is an unusual one. This ensnode-react-example app is important for us to ship right now for the purpose of internally refining how ensnode-react works so that we can make a plan for how best to integrate it into enskit. But at this time I don't think we want to be promoting the ensnode-react package. Therefore we also don't want to be promoting any example apps for ensnode-react.
I don't feel good about putting this app inside the root examples directory at this time. Could you please share your advice on a temporary alternative? For example, I'm thinking we stick it under docs temporarily.
These are all temporary steps, but everything we're doing here right now is very important. We need to have a maximally clear narrative to promote for how to integrate with ENSNode and that answer is enskit not ensnode-react. We therefore should take some special actions here now.
We also need to promote enskit integrations now and not later after we figure out how we want to integrate ensnode-react into enskit.
There was a problem hiding this comment.
@lightwalker-eth I'd suggest we move it from the root examples directory, but place it inside the ensnode-react folder. Having it inside a docs folder just feels weird.
Once merged, and we work to remove ensnode-react, we can move the example to the correct folder once later when we come to delete the package.
wdyt
| @@ -0,0 +1,28 @@ | |||
| { | |||
| "name": "@ensnode/ensnode-react-example", | |||
There was a problem hiding this comment.
@notrab Can you please take the lead to wire up Vercel so that this example app can automatically get all the Vercel stuff working?
|
|
||
| import { usePrimaryName } from "@ensnode/ensnode-react"; | ||
|
|
||
| const DEFAULT_ADDRESS: Address = "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"; // vitalik.eth |
There was a problem hiding this comment.
All address values we use in this app should use NormalizedAddress as imported from enssdk. You also need to call a utility function such as asNormalizedAddress on this hardcoded address string.
| <form | ||
| onSubmit={(event) => { | ||
| event.preventDefault(); | ||
| setAddress(input as Address); |
There was a problem hiding this comment.
@notrab I need to stop seeing code like this. Ever. It completely goes against our culture as a team and company. I'm going completely crazy at how many times I have to repeat the related ideas. There's so many problems in this 1 line of code I'm not going to spend the time to explain them all over and over again.
| <code>ensnode-react</code> Example App | ||
| </h1> | ||
| <p> | ||
| Connected to <code>{ENSNODE_URL}</code> |
There was a problem hiding this comment.
For this example app to achieve its goals, we need it to implement more critical ideas:
- How is it guaranteeing that it was able to successfully connect to the provided ENSNode?
- If for some reason it was unable to connect to the provided ENSNode, how is this case being gracefully handled? All the meaningfully distinct edge cases should have explicit handling. I don't want to see just a single "error connecting". I want more detailed error recognition such that you can disambiguate an error connecting (network-level error) from an unsupported ENSNode error (application-level error) where the config returned by the connected ENSNode is either not fetched or deserialized successfully.
- How is this app managing the latest indexing status projection / snapshot asynchronously in the background? I want to see a UI component for this in the example app similar to what's implemented for this inside the ENSAdmin UI (the little info icon).
- How is this app navigating the vital question of ENS Namespace? There's 2 options for this:
- Option 1: The example app hardcodes its own ENS Namespace configuration (ex: mainnet) and then upon connecting to an ENSNode instance, verifies that its config matches the expected namespace. If it doesn't, the example app should refuse the connection.
- Option 2: The example app doesn't hardcode any ENS Namespace configuration. Instead, it waits to connect to an ENSNode instance and then makes use of the whatever namespace that ENSNode instance's config is using.
I believe that Option 1 is the direction that 99% of our customers will want to use as there are benefits to knowing the ENS namespace even before a successful connection to ENSNode is established. Therefore this example app should implement Option 1.
That means this example app should also read an ENS namespace as an environment variable that defaults to mainnet.
| import { usePrimaryName } from "@ensnode/ensnode-react"; | ||
|
|
||
| const DEFAULT_ADDRESS: Address = "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045"; // vitalik.eth | ||
| const MAINNET: ChainId = 1; |
There was a problem hiding this comment.
This form shouldn't hardcode the chainId this way and also make reference to ENSIP-19 (which is multichain).
We should reference what we've already built for this idea before in ENSAdmin.
| @@ -0,0 +1,20 @@ | |||
| # ensnode-react Example | |||
|
|
|||
| A minimal React app demonstrating how to use `@ensnode/ensnode-react` to resolve | |||
There was a problem hiding this comment.
Please see my other comments with key ideas that should be included here for the key goals of this example app:
- The bigger comment I shared several lines above in this file.
- The bigger comment I shared in
examples/ensnode-react-example/src/App.tsx
I want to see this example app being an absolute A+ flawless bulletproof example of how an example app should manage the connection details with an ENSNode instance. This includes negotiating the connection itself, and the related validation and graceful / specialized error handling for that. It also includes maintaining an ongoing indexing status projection.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@examples/ensnode-react-example/src/config.ts`:
- Line 9: The thrown Error message contains a typo "VITE_ENSNODE_ULR" — update
the string in the throw new Error(...) call to "VITE_ENSNODE_URL" so the message
correctly reflects the environment variable name (change the literal inside the
throw new Error in the validation logic that currently reads VITE_ENSNODE_ULR).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: e40c2267-a853-4a10-a4c8-d0d641d63305
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
examples/ensnode-react-example/package.jsonexamples/ensnode-react-example/src/App.tsxexamples/ensnode-react-example/src/PrimaryNameView.tsxexamples/ensnode-react-example/src/components/IndexingStatusBadge.tsxexamples/ensnode-react-example/src/components/RequireActiveConnection.tsxexamples/ensnode-react-example/src/config.tsexamples/ensnode-react-example/src/lib/classify-connection-error.tsexamples/ensnode-react-example/src/vite-env.d.ts
| try { | ||
| return new URL(value); | ||
| } catch { | ||
| throw new Error(`VITE_ENSNODE_ULR must be a valid URL. Got: '${value}'.`); |
There was a problem hiding this comment.
Fix typo in error message.
The error message says VITE_ENSNODE_ULR but should be VITE_ENSNODE_URL (missing the 'O'). This typo would confuse users trying to debug configuration issues.
🐛 Proposed fix
- throw new Error(`VITE_ENSNODE_ULR must be a valid URL. Got: '${value}'.`);
+ throw new Error(`VITE_ENSNODE_URL must be a valid URL. Got: '${value}'.`);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| throw new Error(`VITE_ENSNODE_ULR must be a valid URL. Got: '${value}'.`); | |
| throw new Error(`VITE_ENSNODE_URL must be a valid URL. Got: '${value}'.`); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@examples/ensnode-react-example/src/config.ts` at line 9, The thrown Error
message contains a typo "VITE_ENSNODE_ULR" — update the string in the throw new
Error(...) call to "VITE_ENSNODE_URL" so the message correctly reflects the
environment variable name (change the literal inside the throw new Error in the
validation logic that currently reads VITE_ENSNODE_ULR).
| try { | ||
| return new URL(value); | ||
| } catch { | ||
| throw new Error(`VITE_ENSNODE_ULR must be a valid URL. Got: '${value}'.`); |
| }); | ||
|
|
||
| const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { | ||
| event.preventDefault(); | ||
| try { | ||
| setAddress(toNormalizedAddress(input.trim())); | ||
| setInputError(null); | ||
| } catch (err) { | ||
| setInputError(err instanceof Error ? err.message : "Invalid EVM address."); |
There was a problem hiding this comment.
To investiate; FormEvent deprecated?
There was a problem hiding this comment.
To investiate; FormEvent deprecated?
| * Only once we've confirmed (1) we can reach ENSNode, (2) it returned a usable | ||
| * config, and (3) the namespace matches, do we render `children`. |
| # ensnode-react Example | ||
|
|
||
| A minimal React app demonstrating how to use `@ensnode/ensnode-react` to resolve | ||
| an address' Mainnet Primary Name (via `usePrimaryName`). |
Todo
Lite PR
Tip: Review docs on the ENSNode PR process
Summary
Why
Testing
Notes for Reviewer (Optional)
Pre-Review Checklist (Blocking)