feat: EPNS optin integration

[subhranshudas]

Integration of EPNS Opt-in/Opt-out functionality in My Accounts page

Description

On the My Account page, when the user is shown a "Remind Me" drop down, currently we see only "Email". We are now adding a feature to Opt-In/Opt-Out to EPNS notifications so that they can receive notifications from ENS.

List of features added/changed

UX wise

• A "Wallet Notif (EPNS)" dropdown link below "Email"
• Click on the "Wallet Notif (EPNS)" dropdown link, it will open a modal window which has 3 buttons -
  • View Supported Platforms: shows all the EPNS apps on which you can see notifications.
  • OPT-IN or OPT-OUT: based on your subscription status at that moment
  • Cancel: to close the modal window

Code wise

1. The entry point of all the EPNS functionality is in ExpiryNotifyDropdown which uses EPNSLink from components/EPNS

2. An EPNS folder under components has been created which has abstracted all the functionality for this feature. Currently this has many inter-connected components-

   • EPNSLink - entry point into EPNS feature
   • EPNSNotificationModal - kicks in when EPNSLink is clicked. This wrapper component is provided to do all the heavy lifting for ENS-EPNS bridging.
   • SwitchNetwork - Utility component to give user 1 click switching of Network to Ethereum main net.
   • useWeb3 hook - This basically gives the EPNSNotificationModal component the web3 data to make API calls
   • EPNSOnSubscribeModal - [INTERNAL, will be replaced by NPM package in future]
   • EPNSUtil - [INTERNAL, will be replaced by NPM package in future]

[INTERNAL] Currently we are transitioning to smaller individual packages, to avoid increasing the bundle size for ENS (or any dApp), we have extracted out the individual functionalities for Optin, Optout, OnSubscribeModal and placed them in ENS codebase under components/EPNS, when we publish those respective NPM packages the end users can simply import these functionalities from the NPM package and delete these files. We will be providing complete support for this.

3. We have kept all the text content in en.json following ENS i18n practices.

How Has This Been Tested?

Locally

1. Ran the app in local with all the changes in ETH Main net with ENS sample account to land to the Home page with "My Account" displayed. Clicked on "My Account".
2. Clicked on "Remind Me".
3. Clicked on "Wallet Notif (EPNS)"
4. Opens a EPNS Modal with 3 buttons (View Supported Platforms, Opt-In or Opt-Out, Cancel).
5. The Opt-In or Opt-Out button will become visible after the Loading spinner hides because we make an API call to determine the status of the subscription of the user.
6. If we click on Opt-In or Opt-Out, MetaMask pops out prompting to sign a gasless transaction.
7. After MetaMask signing,
   • if you have opted-in, you will see a OnSubscribeModal, the same modal you see when you click on the "View Supported Platforms" button. If you close that modal, you will see the EPNS modal with "Opt-Out" text.
   • if your have opted-out, you will see the 1st modal with "Opt-In" text.
8. Clicking on "Cancel" simply closes the EPNS Modal.
9. Currently EPNS supports Main net, Kovan. So if you open in any other network it will prompt you a message - "Wallet notifications are only supported on the Main net!" and a Switch button to switch to Main net.
10. In case of any API error or error in general you may see the following message -
    "Mayday! Mayday! Can the devs do something? They have been notified, please try again a little later!"

Unit Tests

1. Ran npm test on the entire code base -

   Test Suites: 25 passed, 25 total
   Tests:       1 todo, 138 passed, 139 total
   Snapshots:   0 total
   Time:        25.034 s
   Ran all test suites.
   

Checklist:

• My code follows the code style of this project.
• My code implements all the required features.

Screenshots

[vercel]

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

Name	Status	Preview	Updated
ens-app	✅ Ready (Inspect)	Visit Preview	May 22, 2022 at 5:20PM (UTC)

[makoto]

Hi.

Thank you for your contribution.
Can I ask a couple of questions?

• Does this notify exactly the time when it expires? .BUILDHUB states that they send notification 30 days prior to the expiration so I suggest your UI also mentioned at what time it does.
• How often does this notify? If only once per expiring name, then I think it's fine. I think BUILDHUB send email notification every months INCLUDING names which I let them expire ages ago so their notification is now becoming a noise.
• If I register multiple addresses, how do I manage notification on/off?
• Does this notification only work on Mainnet or does it work across different all test networks? If the latter, can you disable showing the UI when the user is on the unsupported network?
• Is this service completely free, or do the users have to pay or have to purchase your tokens?

[subhranshudas]

Hi.

Thank you for your contribution. Can I ask a couple of questions?

• Does this notify exactly the time when it expires? .BUILDHUB states that they send notification 30 days prior to the expiration so I suggest your UI also mentioned at what time it does.
• How often does this notify? If only once per expiring name, then I think it's fine. I think BUILDHUB send email notification every months INCLUDING names which I let them expire ages ago so their notification is now becoming a noise.
• If I register multiple addresses, how do I manage notification on/off?
• Does this notification only work on Mainnet or does it work across different all test networks? If the latter, can you disable showing the UI when the user is on the unsupported network?
• Is this service completely free, or do the users have to pay or have to purchase your tokens?

Hello @makoto,
Thank you for your feedback!!
For 1 & 2)
The ENS channel is currently notifying Domain owners 7 days prior to their domains expiration.
The notifications come with a Call To Action. Meaning that when users receive the notification upon clicking it, they will be redirected to the Domain Renewal page
i.e. "https://app.ens.domains/name/mydomain.eth/details"
Following your recommendations and after internal meetings, we would like to make the following adjustments to the channel:

• Notify users 30 day prior to domain expiration
• Notify users 7 days prior to domain expiration
• Notify users 1 day prior to domain expiration.

Notice that if a user renew a domain upon receiving the 30 day notification, they will not get the subsequent notifications as the domain will not be in risk any more.

3. Notifications are tied to wallet addresses. Meaning that if your wallet has 10 domains attached to your wallet, you will receive notifications for the 10 domains.

Every time a wallet is checked for domain expiration, it might be the case that only 5 out of the 10 domains are within the notification threshold. So you will receive notifications for these domains only.

To compliment 1, 2, 3, above, we are currently working on a new feature called “User Settings”.

With Users Settings, users will be able to set their preferences for notifications. In the case of ENS, we are envisioning that users will be able to do things like:

• Cherry-pick which domains they want to be notified for
• Set the thresholds for notifications. i.e. notify me XX days before the expiration

4. We have now hidden the EPNS dropdown link all together if the network is an unsupported network for EPNS!

5. Yes, the notifications is completely free for the users (even the opt in is gas-less). They never have to pay or purchase tokens to be notified.

Note- We have updated the Modal UI a bit (as shown in the screenshots)