List out active activations

packages/snap/locales/en.json

@@ -11,7 +11,8 @@
   "pohStatus": "POH Status",
   "activations": {
     "number": "There are {count} active LXP activations",
-    "none": "There are no current activations"
+    "none": "There are no current activations",
+    "one": "There is {count} active LXP activation"
   },
   "lxpAddress": {
     "heading": "LXP wallet address",

packages/snap/locales/es.json

@@ -10,8 +10,9 @@
   "address": "Cuenta",
   "pohStatus": "Estado de POH",
   "activations": {
-    "number": "Hay {count} activationes de LXP activas",
-    "none": "No hay activas activaciones de LXP"
+    "number": "Hay {count} activaciones de LXP activas",
+    "none": "No hay activas activaciones de LXP",
+    "one": "Hay {count} activacion de LXP activa"
   },
   "lxpAddress": {
     "heading": "Cuenta que usas para LXP",

packages/snap/locales/fr.json

@@ -11,7 +11,8 @@
   "pohStatus": "Statut POH",
   "activations": {
     "number": "Il y a {count} activations LXP actives",
-    "none": "Il n'y a pas d'activation active"
+    "none": "Il n'y a pas d'activation active",
+    "one": "Il y a {count} activation LXP active"
   },
   "lxpAddress": {
     "heading": "fr-LXP wallet address",

packages/snap/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/Consensys/lxp-snap"
   },
   "source": {
-    "shasum": "gzwnxtUZZDMLFZ1N3d/bjfjv07te6Wn+CCro4me+jJY=",
+    "shasum": "jK9NE/5v5CLExKm2YOyXHGV3bI6vCN6hFpotcTcwPo8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snap/src/types/index.ts

@@ -14,6 +14,7 @@ export type Captions = {
   activations: {
     number: string;
     none: string;
+    one: string;
   };
   lxpAddress: {
     heading: string;
@@ -28,15 +29,19 @@ export type Tag = {
 };
 
 export type Activation = {
-  title: string;
-  url: string;
   fields: {
     endDate: {
       'en-US': string;
     };
     tags: {
       'en-US': Tag[];
     };
+    title: {
+      'en-US': string;
+    };
+    url: {
+      'en-US': string;
+    };
   };
 };
 

packages/snap/src/ui.ts

@@ -9,7 +9,7 @@ import {
   text,
 } from '@metamask/snaps-sdk';
 
-import { getState } from './utils';
+import { getState, truncateString } from './utils';
 
 /**
  * Render the main UI.
@@ -32,10 +32,28 @@ export async function renderMainUi(myAccount: string) {
       : `❌ ${captions?.poh.notVerified as string}`
   }`;
 
-  const activationsToDisplay =
-    activations?.length > 0
-      ? captions?.activations.number.replace('{count}', `${activations.length}`)
-      : captions?.activations.none;
+  const activationsList = [];
+
+  if (activations?.length > 0) {
+    activationsList.push(divider());
+    const activationsCount =
+      activations.length === 1
+        ? captions?.activations.one.replace('{count}', `${activations.length}`)
+        : captions?.activations.number.replace(
+            '{count}',
+            `${activations.length}`,
+          );
+    activationsList.push(text(`**${activationsCount as string}**`));
+    for (const a of activations) {
+      activationsList.push(
+        text(
+          `• [${truncateString(a.fields.title['en-US'], 30)}](${
+            a.fields.url['en-US']
+          })`,
+        ),
+      );
+    }
+  }
 
   return {
     content: panel([
@@ -45,6 +63,7 @@ export async function renderMainUi(myAccount: string) {
       row(labelAddress, address(myAccount)),
       row(labelBalance, text(`${lxpBalance}`)),
       row(labelPohStatus, text(`${pohStatus}`)),
+      ...activationsList,
       divider(),
       text(
         '_LXP earned in activations may not arrive in your wallet until the activation is complete._',
@@ -54,9 +73,8 @@ export async function renderMainUi(myAccount: string) {
       ),
       text('• [Complete Proof of Humanity](https://poh.linea.build)'),
       text(
-        '• [Explore Linea Activations](https://linea.build/activations)',
+        '• [Explore All Linea Activations](https://linea.build/activations)',
       ),
-      heading(activationsToDisplay as string),
     ]),
   };
 }

packages/snap/src/utils.ts

@@ -96,3 +96,16 @@ export async function loadCaptions(force = false) {
     captions,
   });
 }
+
+/**
+ * Simple string truncation with ellipsis.
+ * @param input - The input to be truncated.
+ * @param maxLength - The size of the string to truncate.
+ * @returns The truncated string or the original string if shorter than maxLength.
+ */
+export function truncateString(input: string, maxLength: number): string {
+  if (input.length > maxLength) {
+    return `${input.substring(0, maxLength)}...`;
+  }
+  return input;
+}