From ef04377104699f4185930012fddfb2b14d6fff88 Mon Sep 17 00:00:00 2001
From: hyphenized <28708889+hyphenized@users.noreply.github.com>
Date: Mon, 3 Mar 2025 12:22:45 -0500
Subject: [PATCH] Add new protocol ui badge

Exclusively used for newly added builtin networks
---
 background/constants/networks.ts              |   2 +-
 ui/_locales/en/messages.json                  |   3 +-
 .../TopMenu/TopMenuProtocolListItem.tsx       |  36 +++++++++++++++++-
 ...quare@2x.png => mezotestnet-square@2x.png} | Bin
 .../{matsnet@2x.png => mezotestnet@2x.png}    | Bin
 5 files changed, 37 insertions(+), 4 deletions(-)
 rename ui/public/images/networks/{matsnet-square@2x.png => mezotestnet-square@2x.png} (100%)
 rename ui/public/images/networks/{matsnet@2x.png => mezotestnet@2x.png} (100%)

diff --git a/background/constants/networks.ts b/background/constants/networks.ts
index d28343311d..b148360351 100644
--- a/background/constants/networks.ts
+++ b/background/constants/networks.ts
@@ -104,7 +104,7 @@ export const ZK_SYNC: EVMNetwork = {
 }
 
 export const MEZO_TESTNET: EVMNetwork = {
-  name: "Matsnet",
+  name: "Mezo Testnet",
   baseAsset: MEZO_BTC,
   chainID: "31611",
   family: "EVM",
diff --git a/ui/_locales/en/messages.json b/ui/_locales/en/messages.json
index 986729087a..fabf4eab24 100644
--- a/ui/_locales/en/messages.json
+++ b/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"
   },
   "readOnly": "Read-only",
   "readOnlyNotice": "Read-only mode",
diff --git a/ui/components/TopMenu/TopMenuProtocolListItem.tsx b/ui/components/TopMenu/TopMenuProtocolListItem.tsx
index ca56775541..f69af24c13 100644
--- a/ui/components/TopMenu/TopMenuProtocolListItem.tsx
+++ b/ui/components/TopMenu/TopMenuProtocolListItem.tsx
@@ -1,7 +1,8 @@
 import React, { ReactElement } from "react"
 import { useTranslation } from "react-i18next"
 import classNames from "classnames"
-import { EVMNetwork } from "@tallyho/tally-background/networks"
+import { EVMNetwork, sameNetwork } from "@tallyho/tally-background/networks"
+import { MEZO_TESTNET } from "@tallyho/tally-background/constants"
 import SharedNetworkIcon from "../Shared/SharedNetworkIcon"
 
 type Props = {
@@ -13,6 +14,13 @@ type Props = {
   showSelectedText?: boolean
 }
 
+const isFeaturedNetwork = (network: EVMNetwork) => {
+  if (sameNetwork(network, MEZO_TESTNET)) {
+    return Date.now() < new Date("2025-04-10").getTime()
+  }
+  return false
+}
+
 export default function TopMenuProtocolListItem(props: Props): ReactElement {
   const { t } = useTranslation()
   const {
@@ -39,7 +47,12 @@ export default function TopMenuProtocolListItem(props: Props): ReactElement {
         </div>
       </div>
       <div className="right">
-        <div className="title">{network.name}</div>
+        <div className="title">
+          {network.name}
+          {isFeaturedNetwork(network) && (
+            <span className="featured">{t("protocol.featuredNetwork")}</span>
+          )}
+        </div>
         <div className="sub_title">
           {info}
           {isSelected && showSelectedText && (
@@ -49,6 +62,25 @@ export default function TopMenuProtocolListItem(props: Props): ReactElement {
       </div>
       <style jsx>
         {`
+          .featured {
+            display: inline-block;
+            box-sizing: border-box;
+            vertical-align: top;
+            padding: 2px 8px; 
+            border-radius: 16px;
+            width: 45px;
+            height: 20px;
+            text-transform: uppercase;
+            color: var(--green-95);
+            background-color: var(--success);
+            font-size: 12px;
+            font-weight: 700;
+            letter-spacing: 0.03em;
+            line-height: 16px;
+            text-align: center;
+            margin-left: 10px;
+          }
+
           li {
             display: flex;
             margin-bottom: 15px;
diff --git a/ui/public/images/networks/matsnet-square@2x.png b/ui/public/images/networks/mezotestnet-square@2x.png
similarity index 100%
rename from ui/public/images/networks/matsnet-square@2x.png
rename to ui/public/images/networks/mezotestnet-square@2x.png
diff --git a/ui/public/images/networks/matsnet@2x.png b/ui/public/images/networks/mezotestnet@2x.png
similarity index 100%
rename from ui/public/images/networks/matsnet@2x.png
rename to ui/public/images/networks/mezotestnet@2x.png