ENS Registration Widget

🌱 ENS Ecosystem Ecosystem Discussion
1

Hey everyone, I just published a React component that makes it (hopefully) super easy for devs to implement ENS registration in their apps.

Demo: https://enswidgets.xyz
Docs and installation: https://github.com/gskril/ens-widgets

For some tech info, it requires just one prop: a rainbowkit or connectkit hook to open the wallet connection modal in case the user isn’t already connected to your app. There are also a few optional props including trackingCode for on-chain analytics according to this forum post, which you can see via any on-chain analytics tool such as sort.xyz (7 day history).

The current flow is registration → optionally set primary name → link to manager app for more. I might consider adding the ability to edit some text records in the future but want to make sure it’s not too crowded so narrowed it down to just the essentials for now.

It supports Goerli and Mainnet, and I’m happy to provide some Goerli ETH if you want to test it. If you’d rather not, here’s a mockup of a few steps along the flow:

ENS Registration Widget
ENS Registration Widget2816×1217 118 KB

As always, totally open to feedback!

15 Likes
2

Beautiful work. Is it possible to identify every ENS name that was generated using your widget?

2 Likes
3

Beautiful. Smooth. I like that you put ‘set as primary name’ after the registration to possibly remove friction with new users. I don’t think it can get simpler than this and I love it.

1 Like
4

Yes! The secret will always start with “0x7769646765742d2d” which is “widget–” in bytes (you can use this tool to convert), then the optional trackingCode is converted and appended.

So for example, my demo site uses “demo” as the trackingCode (1 line implementation) which means the secret will always start with “0x7769646765742d2d64656d6f”, or “widget–demo”. If you register a name on enswidgets.xyz, you should see it appear here within a few seconds.

2 Likes
5

Nice work! I have two question:

  1. Does it support ENS subname registraion?
  2. Can I customize the smart contract functions the widget is calling?
6

Thanks! Currently: no and no.

  1. I believe enabling subname registration would require a bunch of configuration beforehand (deploying contracts, setting custom resolver, etc.) so until there’s a standard implementation of a subnmame registrar, it seems difficult to support across the board. But I agree it would be cool! Maybe something to explore more post-NameWrapper deployment.

  2. I’m curious about what other smart contract functions you would want to call / how they might be used. Currently, the widget makes use of available, rentPrice, makeCommitmentWithConfig, commit, registerWithConfig, and setName between the Registrar and Reverse Registrar contracts.

1 Like