Integrate ENS Record Setting in UI

[juliopavila]

Description:

closes #253

Problem:

Currently, there's no direct way in the UI for users to set their ENS record. Users have to manually add their publication hash to their ENS record, as shown in the example: ENS Domain Example. While they can access it at tabula.gg/#/yourCustomEns, and the app will automatically detect the ENS, the process could be more streamlined.

Solution:

This PR integrates the multicall and setText methods from the ENS contract directly into our UI. Users can now easily set their ENS record by adding a button within the publications section. This button will execute all the necessary logic and explain to the user about the underlying processes.

Changes:

1. App.tsx: Imported EnsProvider from ./services/ens/context.
2. WalletBadge.tsx: Made several modifications including importing useEnsContext and refactoring the logic.
3. EnsModal.tsx: New component to handle the ENS modal UI.
4. SettingSection.tsx: Added logic to link the publication to the user's ENS name.
5. ens.context.tsx: New context for ENS operations.
6. useEns.ts: New hook to handle ENS-related operations.

Additional Context:

The goal of this PR is to enhance the user experience by simplifying the setting of ENS records and clarifying what happens in the background.

---

Reviewer Checklist:

• Code is clean and follows the project's coding standards.
• Functionality has been verified and is working as intended.
• UI/UX is intuitive and matches the design specs.
• All new dependencies have been declared.
• PR is linked to the related issue.

Screenshots


[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
tabula	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 11, 2023 2:08pm

[auryn-macmillan]

Checked out the deploy preview, but it's not showing the new elements to set ENS names.

[asgeir-s]

Nice work, just one note:
We will probably need some way of getting the user to change chain to mainnet, if they are not already on mainnet, since the ENS record is always set on mainnet.

[cedricwaxwing]

LGTM, nice work Julio!

[juliopavila]

Thanks, for your feedback @manboy-eth, I already applied the following changes:

• Changed default to mainnet subgraph, the only "real" ENS registry, as per your suggestion.
• Replaced 'multicall' with 'setText' for a single call operation, cleaned up the code, and tested functionality.

Please review

[asgeir-s]

Nice, much better :)

But did you do anything to handle this?

We will probably need some way of getting the user to change chain to mainnet, if they are not already on mainnet, since the ENS record is always set on mainnet.

When the user for instance has a publication on Gnosis Chain, the user must still set the ENS record on mainnet.

[asgeir-s]

Excellent, now we just need some minor changes and I think this is ready to merge.

[asgeir-s]

Excellent, now we just need some minor changes and I think this is ready to merge.

[asgeir-s]

Excellent, now we just need some minor changes and I think this is ready to merge.