ENS integration, the right way

[kremalicious]

• closes #1396
• fixes #1388

Pretext

Ideal case would be to use wagmi hooks + ethers.js and out of the box we would not have any problems. Web3.js does not support reverse lookups yet (address → ENS Name) so have to use ens.js library, which they suggest to replace with ethers.js in future.

In any case, using the ENS subgraph is not the proper way for getting ENS names, as we can't reliably get reverse records with it, and we can't get any content or text record entries.

Solution

• kick out all 3Box and custom profile stuff, recreate Profile schema based on what we get from ENS
• use ens.js in one generalized method getEnsProfile()
• always use fallback node URIs from ocean.js, effectively Infura
• always uses ETH mainnet (1)
• support all kinds of avatars, including those set from NFTs, by hitting https://metadata.ens.domains/docs
• always double check name reverse resolution with forward resolution as suggested by ENS
• fetch set text records before doing contract calls for them, filtered by hardcoded key list
• ...

Fixes

• refactor Blockies component into generic presentational Avatar component, which uses Blockies as fallback, 100% test coverage for it
• npm audit fix run, as ens.js introduces some vulnerable packages
• Rename and move to folder PublishersWithMostSales.tsx → TopSales/index.tsx, also consolidate components and typings for it (no more viewModels/AccountTeaserVM.d.ts)

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
market	✅ Ready (Inspect)	Visit Preview	Sep 22, 2022 at 6:03PM (UTC)

1 Ignored Deployment

Name	Status	Preview	Updated
market-v3	⬜️ Ignored (Inspect)		Sep 22, 2022 at 6:03PM (UTC)

[kremalicious]

Functionality as POC done to see what's possible without refactoring too much.

ENS records (that avatar is an NFT):

Our profile page in this PR created from them, all should look as before, but all data comes from the ENS records:

Also used in wallet:

And publisher line on asset teasers and asset details:

This is all fine for asset details & profile page, as we only ever fetch one profile on there. Tricky part are the asset teasers, making loading our frontpage hit our Infura endpoint pretty hard, options would be:

1. run with it and hope our Infura endpoint can handle it
2. remove publisher line from asset teasers
3. create proxy with cached responses as suggested in #1388, Vercel Serverless Function should be enough for this
4. batch call, collecting all accountIds on one screen and query in one request
5. if user is connected to ETH Mainnet we use this wallet's web3 provider, so saves us from hitting our own Infura endpoint in this constellation. No big impact though

Option 4. is not possible yet with ens.js, ethers.js might support it. If we go with option 3., then option 4 becomes possible too for limiting requests to that endpoint.

Option 4. could be done with multicall.js hitting the multicall contracts

New ens.js v3 has batch calls but library is not usable right now: https://github.com/ensdomains/ensjs-v3#batching-calls

[EnzoVezzaro]

I've been having mix results. Most of the times works, but on some refresh, it doesn't.

• Here worked on the account information, but it didn't on the profile page

• Here didn't work for both

• Here worked on the account information, but it didn't on teaser list

Most of the time works, you need to keep refreshing to break it. Also, the avatar image fallback doesn't seem to work for me

[mihaisc]

Checking out Trent's profile and it seems to not be working https://market-git-v4-ens-oceanprotocol.vercel.app/profile/0xF5dcd98a1C99c2c65C62025Cb23cFB6f12F35497

[kremalicious]

Something weird with profile page, this works when just browsing to that page, but full reload breaks it

[mihaisc]

Don't do a full reload :D , already a bug for this #1572

[LoznianuAnamaria]

@kremalicious On the main readme we have references for the 3box support. Let's cleanup this one as well

[kremalicious]

pushed some profile loading tweaks. Turned out that ens.name(ensName).getAddress() will return 0x0000000000000000000000000000000000000000 initially for whatever reason, leading to cool info like this in console:

We were also fetching everything else on profile page before getting the correct address so now this all works as expected, called once and in the right order:

This then solves Trent's profile page for me. And should also solve some issues when page is reloaded, or the initial landing page.

the avatar image fallback doesn't seem to work for me

this looks more like the image attached to your ENS domain is not reachable. What does https://metadata.ens.domains/mainnet/avatar/YOUR_ENS_NAME return for you?

[EnzoVezzaro]

this looks more like the image attached to your ENS domain is not reachable. What does https://metadata.ens.domains/mainnet/avatar/YOUR_ENS_NAME return for you?

Exactly. More than not reachable, has not been set. This is a newly created account, so it's empty for now.

{ "message": "There is no avatar set under given address" }

as for trent's profile, I now see this (ENS is not showing up):

[kremalicious]

Thanks, got it! So then indeed the blockies fallback is messed up in wallet alone for whatever reason.

As for Trent's profile, all correct, there is no primary ENS name set for that account. But it doesn't crash anymore so that's the cool new feature 😀

[EnzoVezzaro]

On my end the image in the top bar is still missing. Other than that, the rest seems fine 👍🏽

ENS account

[EnzoVezzaro]

It's working as expected. Just a small fix on the profile image, if missing we might want to keep the avatar instead.

[kremalicious]

Just a small fix on the profile image, if missing we might want to keep the avatar instead.

that's the intention and this continues to be a problem only with your account and I can't reproduce this. E.g. with account which has only ENS name set and nothing else:

Could only find small issue after switching accounts from account which had image to account which did not. Fixed that in 4e5da0e916fa2304dc28d4d6ce8e6926eabd88db, so maybe this also fixes your issue?

[EnzoVezzaro]

Could only find small issue after switching accounts from account which had image to account which did not. Fixed that in 4e5da0e, so maybe this also fixes your issue?

Yes, now it's working 💪🏽🚀

[qlty-cloud-legacy[bot]]

Code Climate has analyzed commit 6647c227 and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 17.5% (50% is the threshold).

This pull request will bring the total coverage in the repository to 4.4% (1.5% change).

View more on Code Climate.