Mezoification: Add base state and UI elements (#3785)

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](https://github.com/tahowallet/extension/suites/35544139271/artifacts/2734391449)
(as of Wed, 12 Mar 2025 01:15:33 GMT).

Author: Shadowfiend

background/constants/networks.ts

@@ -104,7 +104,7 @@ export const ZK_SYNC: EVMNetwork = {
 }
 
 export const MEZO_TESTNET: EVMNetwork = {
-  name: "Matsnet",
+  name: "Mezo matsnet",
   baseAsset: MEZO_BTC,
   chainID: "31611",
   family: "EVM",
@@ -169,7 +169,7 @@ export const NETWORK_BY_CHAIN_ID = {
 }
 
 export const TEST_NETWORK_BY_CHAIN_ID = new Set(
-  [SEPOLIA, ARBITRUM_SEPOLIA].map((network) => network.chainID),
+  [MEZO_TESTNET, SEPOLIA, ARBITRUM_SEPOLIA].map((network) => network.chainID),
 )
 
 // Networks that are not added to this struct will

background/lib/mezo.ts

@@ -0,0 +1,28 @@
+import { Interface } from "ethers/lib/utils"
+import { AnyEVMTransaction, sameNetwork } from "../networks"
+import { MEZO_TESTNET } from "../constants"
+import { sameEVMAddress } from "./utils"
+
+const BORROWER_CONTRACT_ADDRESS = "0x20fAeA18B6a1D0FCDBCcFfFe3d164314744baF30"
+
+const BorrowerABI = new Interface([
+  "function openTrove(uint256 _maxFeePercentage, uint256 debtAmount, uint256 _assetAmount, address _upperHint, address _lowerHint)",
+])
+
+// eslint-disable-next-line import/prefer-default-export
+export const checkIsBorrowingTx = (tx: AnyEVMTransaction) => {
+  if (
+    !sameNetwork(tx.network, MEZO_TESTNET) ||
+    !tx.blockHash ||
+    !sameEVMAddress(tx.to, BORROWER_CONTRACT_ADDRESS)
+  ) {
+    return false
+  }
+
+  try {
+    const data = BorrowerABI.decodeFunctionData("openTrove", tx.input ?? "")
+    return data.debtAmount > 0n
+  } catch (error) {
+    return false
+  }
+}

background/networks.ts

@@ -422,3 +422,7 @@ export const isEnrichedEVMTransactionRequest = (
   transactionRequest: TransactionRequest,
 ): transactionRequest is EnrichedEVMTransactionRequest =>
   "annotation" in transactionRequest
+
+export const isConfirmedEVMTransaction = (
+  transaction: AnyEVMTransaction,
+): transaction is ConfirmedEVMTransaction => "status" in transaction

background/redux-slices/selectors/networks.ts

@@ -28,3 +28,11 @@ export const selectCustomNetworks = createSelector(
       (network) => !DEFAULT_NETWORKS_BY_CHAIN_ID.has(network.chainID),
     ),
 )
+
+export const selectTestnetNetworks = createSelector(
+  selectEVMNetworks,
+  (evmNetworks) =>
+    evmNetworks.filter((network) =>
+      TEST_NETWORK_BY_CHAIN_ID.has(network.chainID),
+    ),
+)

background/redux-slices/selectors/uiSelectors.ts

@@ -36,6 +36,11 @@ export const selectShowingActivityDetail = createSelector(
   },
 )
 
+export const selectCampaigns = createSelector(
+  (state: RootState) => state.ui.campaigns,
+  (campaigns) => campaigns,
+)
+
 export const selectCurrentAddressNetwork = createSelector(
   (state: RootState) => state.ui.selectedAccount,
   (selectedAccount) => selectedAccount,

background/redux-slices/ui.ts

@@ -1,7 +1,7 @@
 import { createSlice, createSelector } from "@reduxjs/toolkit"
 import Emittery from "emittery"
 import { AddressOnNetwork } from "../accounts"
-import { ETHEREUM } from "../constants"
+import { ETHEREUM, TEST_NETWORK_BY_CHAIN_ID } from "../constants"
 import { AnalyticsEvent, OneTimeAnalyticsEvent } from "../lib/posthog"
 import { EVMNetwork } from "../networks"
 import { AnalyticsPreferences, DismissableItem } from "../services/preferences"
@@ -11,18 +11,25 @@ import { AccountState, addAddressNetwork } from "./accounts"
 import { createBackgroundAsyncThunk } from "./utils"
 import { UNIXTime } from "../types"
 import { DEFAULT_AUTOLOCK_INTERVAL } from "../services/preferences/defaults"
+import type { RootState } from "."
+import {
+  CampaignIds,
+  Campaigns,
+  FilterCampaignsById,
+} from "../services/campaign/types"
 
 export const defaultSettings = {
   hideDust: false,
   defaultWallet: false,
-  showTestNetworks: false,
+  showTestNetworks: true,
   showNotifications: undefined,
   collectAnalytics: false,
   showAnalyticsNotification: false,
   showUnverifiedAssets: false,
   hideBanners: false,
   useFlashbots: false,
   autoLockInterval: DEFAULT_AUTOLOCK_INTERVAL,
+  campaigns: {},
 }
 
 export type UIState = {
@@ -47,6 +54,16 @@ export type UIState = {
   routeHistoryEntries?: Partial<Location>[]
   slippageTolerance: number
   accountSignerSettings: AccountSignerSettings[]
+  // Active user campaigns
+  campaigns: {
+    /**
+     * Some hash used to invalidate cached data and update UI
+     */
+    [campaignId in CampaignIds]?: FilterCampaignsById<
+      Campaigns,
+      campaignId
+    >["data"]
+  }
 }
 
 export type Events = {
@@ -63,6 +80,8 @@ export type Events = {
   updateAnalyticsPreferences: Partial<AnalyticsPreferences>
   addCustomNetworkResponse: [string, boolean]
   updateAutoLockInterval: number
+  toggleShowTestNetworks: boolean
+  clearNotification: string
 }
 
 export const emitter = new Emittery<Events>()
@@ -78,6 +97,7 @@ export const initialState: UIState = {
   snackbarMessage: "",
   slippageTolerance: 0.01,
   accountSignerSettings: [],
+  campaigns: {},
 }
 
 const uiSlice = createSlice({
@@ -222,6 +242,16 @@ const uiSlice = createSlice({
       ...state,
       settings: { ...state.settings, autoLockInterval: payload },
     }),
+    updateCampaignsState: (
+      immerState: UIState,
+      {
+        payload,
+      }: {
+        payload: UIState["campaigns"]
+      },
+    ) => {
+      immerState.campaigns = payload
+    },
   },
 })
 
@@ -246,6 +276,7 @@ export const {
   setSlippageTolerance,
   setAccountsSignerSettings,
   setAutoLockInterval,
+  updateCampaignsState,
 } = uiSlice.actions
 
 export default uiSlice.reducer
@@ -273,6 +304,13 @@ export const deleteAnalyticsData = createBackgroundAsyncThunk(
   },
 )
 
+export const clearNotification = createBackgroundAsyncThunk(
+  "ui/clearNotification",
+  async (id: string) => {
+    await emitter.emit("clearNotification", id)
+  },
+)
+
 // Async thunk to bubble the setNewDefaultWalletValue action from  store to emitter.
 export const setNewDefaultWalletValue = createBackgroundAsyncThunk(
   "ui/setNewDefaultWalletValue",
@@ -360,6 +398,22 @@ export const setSelectedNetwork = createBackgroundAsyncThunk(
   },
 )
 
+export const toggleShowTestNetworks = createBackgroundAsyncThunk(
+  "ui/toggleShowTestNetworks",
+  async (updatedValue: boolean, { dispatch, getState }) => {
+    const state = getState() as RootState
+
+    const currentNetwork = state.ui.selectedAccount.network
+
+    // If user is on one of the built-in test networks, don't leave them stranded
+    if (!updatedValue && TEST_NETWORK_BY_CHAIN_ID.has(currentNetwork.chainID)) {
+      dispatch(setSelectedNetwork(ETHEREUM))
+    }
+
+    await emitter.emit("toggleShowTestNetworks", updatedValue)
+  },
+)
+
 export const refreshBackgroundPage = createBackgroundAsyncThunk(
   "ui/refreshBackgroundPage",
   async () => {

background/services/analytics/index.ts

@@ -31,6 +31,8 @@ interface Events extends ServiceLifecycleEvents {
  * handling sending and persistance concerns.
  */
 export default class AnalyticsService extends BaseService<Events> {
+  #analyticsUUID: string | undefined = undefined
+
   /*
    * Create a new AnalyticsService. The service isn't initialized until
    * startService() is called and resolved.
@@ -93,6 +95,7 @@ export default class AnalyticsService extends BaseService<Events> {
 
   protected override async internalStartService(): Promise<void> {
     await super.internalStartService()
+    const { uuid, isNew } = await this.getOrCreateAnalyticsUUID()
 
     let { isEnabled, hasDefaultOnBeenTurnedOn } =
       await this.preferenceService.getAnalyticsPreferences()
@@ -114,8 +117,6 @@ export default class AnalyticsService extends BaseService<Events> {
     }
 
     if (isEnabled) {
-      const { uuid, isNew } = await this.getOrCreateAnalyticsUUID()
-
       browser.runtime.setUninstallURL(
         process.env.NODE_ENV === "development"
           ? "about:blank"
@@ -126,6 +127,8 @@ export default class AnalyticsService extends BaseService<Events> {
         await this.sendAnalyticsEvent(AnalyticsEvent.NEW_INSTALL)
       }
     }
+
+    this.#analyticsUUID = uuid
   }
 
   protected override async internalStopService(): Promise<void> {
@@ -134,6 +137,15 @@ export default class AnalyticsService extends BaseService<Events> {
     await super.internalStopService()
   }
 
+  get analyticsUUID() {
+    if (!this.#analyticsUUID) {
+      throw new Error(
+        "Attempted to access analytics UUID before service started",
+      )
+    }
+    return this.#analyticsUUID
+  }
+
   async sendAnalyticsEvent(
     eventName: AnalyticsEvent,
     payload?: Record<string, unknown>,

background/services/campaign/db.ts

@@ -0,0 +1,48 @@
+import Dexie from "dexie"
+import { CampaignIds, Campaigns, FilterCampaignsById } from "./types"
+
+export class CampaignDatabase extends Dexie {
+  private campaigns!: Dexie.Table<Campaigns, CampaignIds>
+
+  constructor() {
+    super("taho/campaigns")
+
+    this.version(1).stores({
+      campaigns: "&id",
+    })
+  }
+
+  async getActiveCampaigns() {
+    return this.campaigns
+      .toCollection()
+      .filter((campaign) => campaign.enabled)
+      .toArray()
+  }
+
+  async getCampaignData<K extends CampaignIds>(
+    id: K,
+  ): Promise<FilterCampaignsById<Campaigns, K> | undefined> {
+    return this.campaigns.get(id) as Promise<
+      FilterCampaignsById<Campaigns, K> | undefined
+    >
+  }
+
+  async upsertCampaign(campaign: Campaigns): Promise<void> {
+    await this.campaigns.put(campaign)
+  }
+
+  async updateCampaignData<K extends CampaignIds>(
+    id: K,
+    data: Partial<FilterCampaignsById<Campaigns, K>["data"]>,
+  ): Promise<void> {
+    await this.campaigns.toCollection().modify((campaign) => {
+      if (campaign.id === id) {
+        Object.assign(campaign, { data })
+      }
+    })
+  }
+}
+
+export async function getOrCreateDB(): Promise<CampaignDatabase> {
+  return new CampaignDatabase()
+}