Mezoification: Add base state and UI elements #3785

hyphenized · 2025-02-21T09:19:17Z

Adds base state, notification handlers and banner elements for upcoming campaign...

Banners and notifications should change based on the state of the campaign.

To Test

With SUPPORT_MEZO_NETWORK=true open the wallet, after a minute, a banner should appear
Clicking the banner should prompt for push notification permissions
If push notifications are enabled a notification should appear

Latest build: extension-builds-3785 (as of Thu, 06 Mar 2025 12:56:36 GMT).

This will control visibility and behaviour of banners and other UI elements

This sets a recurrent alarm to hit the API and check claim state unless the wallet is not eligible or the campaign has already been finished. If eligible, users receive a notification based on their claim completion.

Transactions must have been completed and target the borrower contract on the mezo network.

This is used by posthog to distinguish users

- onDismiss is no longer passed as an options to the extension API - Fixed a race condition in NotificationService state initialization - Fixed the notifications settings toggler As MV3 requires permissions to be requested during a user action, the prompt for user permission no longer works if triggered through a redux thunk that executed in the background.

Sets a visibility assertion to confirm element exists before synchronously asserting value

Exclusively used for newly added builtin networks

Shadowfiend · 2025-03-03T20:42:49Z

Alignment of the open-in-new-tab icon seems off; it also doesn't highlight on hover.

Shadowfiend

Left a few initial thoughts, haven't made it all the way through yet.

Shadowfiend · 2025-03-03T21:32:41Z

background/redux-slices/ui.ts

@@ -47,6 +54,13 @@ export type UIState = {
  routeHistoryEntries?: Partial<Location>[]
  slippageTolerance: number
  accountSignerSettings: AccountSignerSettings[]
+  activeCampaigns: {
+    "mezo-claim"?: {
+      dateFrom: string


Guessing if we make this Date it won't (de)serialize?

Yup, it will remain a string

I wonder if we should give our serializer/deserializer the ability to deal with dates tbh (not as a blocker though).

Shadowfiend · 2025-03-03T21:33:57Z

background/services/analytics/index.ts

@@ -134,6 +137,15 @@ export default class AnalyticsService extends BaseService<Events> {
    await super.internalStopService()
  }

+  get analyticsUUID() {


From below it looks like we can lose this?

If you're referring to the error below, that's just to block access until service has initialized. This could happen during tests or if there's an attempt to get this data from within another service's initialization without awaiting service.started()

No, I meant that it doesn't look like we're accessing this as a property anywhere—which is good, as leaking the UUID feels like leaking the private state of the analytics service and leaking the implementation detail of using PostHog.

Hmmm I'm not following, we need this id to get the wallet's campaign state 🤔

Shadowfiend · 2025-03-03T21:41:08Z

background/services/redux/index.ts

+    ) {
+      return
+    }
+
+    const shownItems = new Set(
+      await this.preferenceService.getShownDismissableItems(),
+    )
+
+    // const uuid = this.analyticsService.analyticsUUID
+    const hasSeenEligibilityPush = shownItems.has("mezo-eligible-notification")
+    const hasSeenBorrowPush = shownItems.has("mezo-borrow-notification")
+    const hasSeenNFTNotification = shownItems.has("mezo-nft-notification")
+
+    // fetch with uuid
+    const campaignData = {
+      dateFrom: "2025-02-21",
+      dateTo: "2025-03-28",
+      state: "eligible" as MezoClaimStatus,
+    }
+
+    const isActiveCampaign = dayjs().isBetween(
+      campaignData.dateFrom,
+      campaignData.dateTo,
+      "day",
+      "[]",
+    )
+
+    if (
+      isActiveCampaign &&
+      campaignData.state === "eligible" &&
+      !hasSeenEligibilityPush
+    ) {
+      this.notificationsService.notify({
+        options: {
+          title:
+            "Enjoy 20,000 sats on Mezo testnet. Try borrow for an exclusive Mezo NFT!",
+          message: "Login to Mezo to claim",
+          onDismiss: () =>
+            this.preferenceService.markDismissableItemAsShown(
+              "mezo-eligible-notification",
+            ),
+        },
+        callback: () => {
+          browser.tabs.create({ url: "https://mezo.org/matsnet" })
+          this.preferenceService.markDismissableItemAsShown(
+            "mezo-eligible-notification",
+          )
+        },
+      })
+    }
+
+    if (
+      isActiveCampaign &&
+      campaignData.state === "claimed-sats" &&
+      !hasSeenBorrowPush
+    ) {
+      this.notificationsService.notify({
+        options: {
+          title: "Borrow mUSD with testnet sats for an exclusive Mezo NFT!",
+          message: "Click to borrow mUSD ",
+          onDismiss: () =>
+            this.preferenceService.markDismissableItemAsShown(
+              "mezo-borrow-notification",
+            ),
+        },
+        callback: () => {
+          browser.tabs.create({ url: "https://mezo.org/matsnet/borrow" })
+          this.preferenceService.markDismissableItemAsShown(
+            "mezo-borrow-notification",
+          )
+        },
+      })
+    }
+
+    if (
+      isActiveCampaign &&
+      campaignData.state === "borrowed" &&
+      !hasSeenNFTNotification
+    ) {
+      this.notificationsService.notify({
+        options: {
+          title:
+            "Spend testnet mUSD in the Mezo store for an exclusive Mezo NFT!",
+          message: "Click to visit the Mezo Store",
+          onDismiss: () =>
+            this.preferenceService.markDismissableItemAsShown(
+              "mezo-borrow-notification",
+            ),
+        },
+        callback: () => {
+          browser.tabs.create({ url: "https://mezo.org/matsnet/borrow" })
+          this.preferenceService.markDismissableItemAsShown(
+            "mezo-borrow-notification",
+          )
+        },
+      })
+    }
+
+    this.store.dispatch(updateCampaignState(["mezo-claim", campaignData]))
+  }


Fine for our quick implementation here, but we really need to move this either into redux itself or out to a service—the ReduxService should be doing the minimum possible to coordinate between the two. More like what the island service hookup at https://github.com/tahowallet/extension/blob/main/background/services/redux/index.ts#L1567-L1569 does.

Need to do some deeper arch work to figure that out before we can clean up since these are more complex interactions though.

Thanks for giving this a look, wasn't confident enough to put this into it's own service without receiving some feedback on the approach first 🕵️

I think a few ways in my head we should factor it out:

Mezo service that handles Mezo-related things including these kinds of campaigns.

Notification service is directly responsible for stuff like this (not how we originally envisioned it, but may make sense).

Campaigns service to handle these kinds of campaigns, Mezo service would handle more network-level/API stuff like mats, Passport, etc.

Moves test network visibility user setting to preference service and sets force toggles it to display on all new and existing installs

Shadowfiend · 2025-03-04T12:29:25Z

ui/components/TopMenu/TopMenuProtocolList.tsx


 type TopMenuProtocolListProps = {
  onProtocolChange: (network: EVMNetwork) => void
 }

 /**
- * Places Ethereum and Mezo network above other networks
+ * Places Mezo network above other networks


Ngl I would love to kill this sort function. Its main purpose is to boost matsnet in the list if people have previously added it, is that right?

Yup that's pretty much all it does. Currently testnets are hardcoded so we could remove it and use the hardcoded order but that seems a bit dirty 👀

Does it work even if the user had previously added it as a custom network? If so, then let's rely on the hardcoded order for now.

Shadowfiend · 2025-03-04T12:30:29Z

ui/components/TopMenu/TopMenuProtocolList.tsx

+                  isSelected={sameNetwork(currentNetwork, network)}
+                  key={network.name}
+                  network={network}
+                  info={testNetworkInfo[network.chainID]}


I know this is descriptively named info lol—is this the description that lives under the network name? If so maybe let's rename to description (not a blocker).

Shadowfiend · 2025-03-04T12:32:01Z

background/lib/mezo.ts

+  "function openTrove(uint256 _maxFeePercentage, uint256 debtAmount, uint256 _assetAmount, address _upperHint, address _lowerHint)",
+])
+
+// eslint-disable-next-line import/prefer-default-export


Lint disable is best accompanied by an explanation.

In this case my thought is that we probably move this into a Mezo or Mezo campaign service, which is where we deal with the Redux service's complexity as well (after we ship this, I mean). Wdyt?

That's a good point, this is only used for the campaign. I initially put this under /lib because I thought this would be also used by the enrichment service.

For sure. I think once we're enriching we'll probably export more anyway—and I wonder if the better approach here is actually making this file an ABI export file (background/lib/mezo/musd-trovemanager-abi.ts or so) and then we implement checkIsBorrowingTx directly where we need it and let enrichment do its own things with the ABI.

Anyway, none of that is blocking.

This PR moves the testnet visibility setting to the preference service, and sets a migration to enable it on all existing and new installs. ## Testing - [ ] On a new install, check testnets shows up by default on network switcher - [ ] On existing install, after update testnets should show up Latest build: [extension-builds-3793](https://github.com/tahowallet/extension/suites/35160394180/artifacts/2686423977) (as of Tue, 04 Mar 2025 05:05:23 GMT).

Shadowfiend

Another round, still cookin'.

Shadowfiend · 2025-03-04T12:41:45Z

background/redux-slices/ui.ts

@@ -222,6 +237,22 @@ const uiSlice = createSlice({
      ...state,
      settings: { ...state.settings, autoLockInterval: payload },
    }),
+    updateCampaignState: <T extends keyof UIState["activeCampaigns"]>(


When we start pulling typeofs like this it's usually a sign to me that we should name the type, fwiw.

Shadowfiend · 2025-03-04T12:42:18Z

background/redux-slices/ui.ts

@@ -47,6 +54,13 @@ export type UIState = {
  routeHistoryEntries?: Partial<Location>[]
  slippageTolerance: number
  accountSignerSettings: AccountSignerSettings[]
+  activeCampaigns: {
+    "mezo-claim"?: {
+      dateFrom: string


I wonder if we should give our serializer/deserializer the ability to deal with dates tbh (not as a blocker though).

Shadowfiend · 2025-03-04T12:45:05Z

background/services/analytics/index.ts

@@ -134,6 +137,15 @@ export default class AnalyticsService extends BaseService<Events> {
    await super.internalStopService()
  }

+  get analyticsUUID() {


No, I meant that it doesn't look like we're accessing this as a property anywhere—which is good, as leaking the UUID feels like leaking the private state of the analytics service and leaking the implementation detail of using PostHog.

Shadowfiend · 2025-03-04T12:46:51Z

background/services/preferences/index.ts

@@ -277,18 +276,10 @@ export default class PreferenceService extends BaseService<Events> {
  }

  async setShouldShowNotifications(shouldShowNotifications: boolean) {
-    if (shouldShowNotifications) {


I would love to still make it so that this can only set the db state if the permission is actually granted, rather than having it be a blind state updater. i.e., it would be good if we could guard against setShouldShowNotifications(true) successfully updating the db if in fact the user denied the request.

Hmmm we can verify if permission has indeed been granted and guard that I think

Shadowfiend · 2025-03-04T12:50:14Z

background/services/redux/index.ts

-            shouldShowNotifications,
-          )
-        this.store.dispatch(toggleNotifications(isPermissionGranted))
+        await this.preferenceService.setShouldShowNotifications(


This is currently hooked up to the Show Subscape notifications settings toggle. Two problems I think:

By removing the permissions.request from the service, we ensure that turning that toggle on will not work, as there's no permission request prompt on the click path.

We should probably rename that setting to Show Mezo notifications.

I understand, I had to move permissions.request to the UI because in mv3 permission requests have to trigger in response to a user interaction and that detail seems to get lost on the way to the service worker 😕

Shadowfiend · 2025-03-06T13:24:46Z

ui/_locales/en/messages.json

@@ -550,7 +550,8 @@
    "l2": "L2 scaling solution",
    "compatibleChain": "EVM-compatible blockchain",
    "avalanche": "Mainnet C-Chain",
-    "connected": "Connected"
+    "connected": "Connected",
+    "featuredNetwork": "new"


Is it featured or new? 😉

Shadowfiend · 2025-03-06T13:51:42Z

Alignment of the open-in-new-tab icon seems off; it also doesn't highlight on hover.

Want to bring this back to the fore, I think this is a blocker.

Also, I think if you hit the Login to Claim link, that should dismiss the notification—wdyt?

hyphenized · 2025-03-06T15:13:58Z

Alignment of the open-in-new-tab icon seems off; it also doesn't highlight on hover.

Want to bring this back to the fore, I think this is a blocker.

Ok this should be fixed now

Also, I think if you hit the Login to Claim link, that should dismiss the notification—wdyt?

Good catch! That should also prevent additional "login to claim" notifications from appearing right?

Shadowfiend · 2025-03-06T15:53:33Z

Yeah should be a full dismissal.

hyphenized force-pushed the campaign-1 branch 3 times, most recently from 9d1947a to 4425ed7 Compare February 21, 2025 18:35

hyphenized force-pushed the mezo-network branch from 8fdacc1 to 6143867 Compare February 25, 2025 22:36

Shadowfiend mentioned this pull request Feb 28, 2025

Add Mezo testnet as a builtin network #3780

Merged

Base automatically changed from mezo-network to main February 28, 2025 12:54

hyphenized force-pushed the campaign-1 branch from 4425ed7 to 12eda39 Compare February 28, 2025 17:17

hyphenized added 9 commits February 28, 2025 14:01

Add active campaigns to UI state

5bb9810

This will control visibility and behaviour of banners and other UI elements

Add onDismiss option to notifications dispatcher

0f25b31

Added campaign eligibility checks and notifications

0a7d996

This sets a recurrent alarm to hit the API and check claim state unless the wallet is not eligible or the campaign has already been finished. If eligible, users receive a notification based on their claim completion.

Watch for borrowing transactions

0ac12cf

Transactions must have been completed and target the borrower contract on the mezo network.

Expose analytics uuid

141f7de

This is used by posthog to distinguish users

Add campaign banner

9c2ac79

Update notifications text

ee66fe0

Add campaign banners

6422370

hyphenized force-pushed the campaign-1 branch from 12eda39 to 6422370 Compare February 28, 2025 19:02

Fix flaky test

789b942

Sets a visibility assertion to confirm element exists before synchronously asserting value

hyphenized requested a review from Shadowfiend February 28, 2025 19:27

hyphenized self-assigned this Feb 28, 2025

hyphenized marked this pull request as ready for review February 28, 2025 19:27

Add new protocol ui badge

ef04377

Exclusively used for newly added builtin networks

Update banners

ae1f3c5

hyphenized force-pushed the campaign-1 branch from cd08919 to ae1f3c5 Compare March 3, 2025 21:13

hyphenized added 2 commits March 3, 2025 16:38

Update display hierarchy

09361e2

Remove stale comment

77f3ba0

Shadowfiend reviewed Mar 3, 2025

View reviewed changes

hyphenized added 2 commits March 3, 2025 17:49

Default to show test network visibility

4a9f079

Moves test network visibility user setting to preference service and sets force toggles it to display on all new and existing installs

Do not allow hidden testnet to remain as current network

e56f90d

Shadowfiend reviewed Mar 4, 2025

View reviewed changes

Shadowfiend reviewed Mar 6, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mezoification: Add base state and UI elements #3785

Mezoification: Add base state and UI elements #3785

hyphenized commented Feb 21, 2025 •

edited by github-actions bot

Loading

Shadowfiend commented Mar 3, 2025

Shadowfiend left a comment

Shadowfiend Mar 3, 2025

hyphenized Mar 4, 2025

Shadowfiend Mar 4, 2025

Shadowfiend Mar 3, 2025

hyphenized Mar 4, 2025

Shadowfiend Mar 4, 2025

hyphenized Mar 6, 2025

Shadowfiend Mar 3, 2025

hyphenized Mar 4, 2025

Shadowfiend Mar 6, 2025

Shadowfiend Mar 4, 2025

hyphenized Mar 4, 2025

Shadowfiend Mar 6, 2025

Shadowfiend Mar 4, 2025

Shadowfiend Mar 4, 2025

hyphenized Mar 4, 2025

Shadowfiend Mar 6, 2025

Shadowfiend left a comment

Shadowfiend Mar 4, 2025

Shadowfiend Mar 4, 2025

Shadowfiend Mar 4, 2025

Shadowfiend Mar 4, 2025

hyphenized Mar 6, 2025

Shadowfiend Mar 4, 2025

hyphenized Mar 6, 2025

Shadowfiend Mar 6, 2025

Shadowfiend commented Mar 6, 2025

hyphenized commented Mar 6, 2025

Shadowfiend commented Mar 6, 2025

Mezoification: Add base state and UI elements #3785

Are you sure you want to change the base?

Mezoification: Add base state and UI elements #3785

Conversation

hyphenized commented Feb 21, 2025 • edited by github-actions bot Loading

To Test

Shadowfiend commented Mar 3, 2025

Shadowfiend left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Shadowfiend left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Shadowfiend commented Mar 6, 2025

hyphenized commented Mar 6, 2025

Shadowfiend commented Mar 6, 2025

hyphenized commented Feb 21, 2025 •

edited by github-actions bot

Loading