Realization
Users can connect their wallet via WalletConnect (V1 and V2 supported :), search their ENS name to see associated metadata, and edit ENS Text Data (including support for multiple fields in one transaction :).
App on load
Connecting wallet using WalletConnect v1 and a QR Code
Loading existing ENS domain metadata
Set new ENS domain metadata*
*Right now this just generates the data payload as pictured which I then manually wrote to the contract on Etherscan, but a more autonomous solution isn’t far and will come soon when integrated with Anupam’s signing update.
View the completed transaction on Etherscan
Feature Overview
Resolve ENS Addresses
My ENS Builder quest started with a very simple objective: support ENS names in Dub browser (for search, transactions, and more). I strongly believe that universal support for ENS is key to the user experience of blockchains and Dub shall be best in class when it comes to ENS support. To start, this meant simple translating an ENS name to a wallet address (and vice-versa).
Implementation of ENS name translation was quite simple (I leveraged ENSKit , an existing Swift Package from @livid who is building Planetable).
Edit ENS Text Records
When using this package, I also found it quite easy to fetch additional data associated with an ENS name. For instance, financialvice.eth, my personal ENS name, has various associated metadata (like an avatar image, a bio, social usernames, etc.). You can even attach a contenthash to an ENS name, which would directly tie an ENS name to content hosted on decentralized services like IPFS (exciting for the potential to allow dub users to navigate directly to a decentralized website using just an ENS domain).
To start, I focused on supporting the ability to edit ENS Text Records (name, url, avater, bio, etc.). In order to make this most gas efficient, I leveraged the Multicall function of the ENS Public Resolver contract.
Process
Primary Challenges
Lack of Swift Web3 libraries :(
For dApps on the Web, most leverage ethers.js or web3.js. These libraries are thorough, well-written, and have detailed documentation. For native dApps written in Swift - theres… nearly nothing. Argent, the team / app building a Native Smart Contract Wallet for iOS, has built web3.swift, the most complete Web3 package for iOS. Given that they largely built this package for internal use themselves, documentation is sparse and the package lacks major functionality featured in the top JS packages.
Indexing On-Chain Data
Prior to this experiment, we had mostly been using APIs from companies like Alchemy, nxyz to fetch data about on-chain transactions and tokens. For ENS data, these API’s were insuffient in data, speed, and flexibility.
Learnings
We’ll need to develop our own supplemental Web3 package
As needed, we’ll port essential functionality from ethers.js to our own internal web3.swift package.
We’ll need to index our own subgraph(s) using The Graph
In order to have the flexibility, speed, and depth of data needed to deliver best-in-class ENS support, we’ll need to leverage The Graph, an indexing protocol, to index and query subsets of on-chain data (like ENS, Uniswap, etc.).
Next Steps
ENS Builder parts 2 and beyond
There’s a long list of functionality that will come along with a more fully featured ENS Builder and universal ENS support in Dub. The primary features I plan to build next are:
ENS Registration support
Users shall be able to browse all ENS domains
- Show details on availability, registrants, history, etc.
Users shall be able to register an available ENS domain
- Set registration length, assign to a specific wallet, etc.
Multi-domain Management
Users shall be able to see all of their ENS domains
- this was partly built in part 1, but requires more advanced data queries from our own indexer
Users shall be able to manage the data associated with their ENS domains
- Set Ethereum Address
- Set Blockchain Address
- Set Canonical Name (used for reverse resolution)
- Set Content Hash
- Set Public Key
- Set Text Data (this was built in part 1)
- Multicall (call multiple of the above functions at once) (this was partly built in part 1, but needs to support the other functions listed above beyond just setting text data)
Content Hash Resolution
Users shall be able to directly search and navigate to content associated with an ENS domain
Transaction Status Monitoring
This will be a larger feature of Dub that will support all dApps, including this ENS Builder integration
Dub Browser
While ENS Builder completion and integration is quite exciting, I will be turning my focus to partnering with Anupam to deliver a new version of Dub Browser. This new version of Dub Browser will be represent a major milestone as we set it as our default browser (and wallet) starting Wednesday, February 1st. Once we’ve got the base down, it’ll be incredibly easy to integrate a more fully features ENS Builder to Dub Browser.
Dapp Domination
Alongside building Dub Browser and integrating a more fully featured ENS Builder, experimenting with building a dApp as a Native MacOS App has generated a lot of personal excitement around building ‘wrapped’ Native dApps. For instance, we can take top dApps like OpenSea and Uniswap, and wrap them up directly into the Dub Browser, allowing more fluid, timely, in-context interactions with blockchains. Essentially, Dub Browser provides much needed surface area for blockchain visibiltiy, access, and interaction. I’m excited to further explore this with the full team.