Add new protocol ui badge

Exclusively used for newly added builtin networks

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",

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",

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;