From b736b1bf99ca66c0479d0a9eaa1f8f694581a9e6 Mon Sep 17 00:00:00 2001
From: Vasyl Ivanchuk <vasyl.ivanchuk@gmail.com>
Date: Sat, 16 Dec 2023 19:23:12 +0200
Subject: [PATCH] fix: improve indexing status badge

---
 .../src/components/transactions/Status.vue    | 20 +++++++++----------
 packages/app/src/locales/en.json              |  3 +--
 packages/app/src/locales/uk.json              |  3 +--
 .../transactions/GeneralInfo.spec.ts          | 11 +++++-----
 .../components/transactions/Status.spec.ts    | 18 +++++++++--------
 5 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/packages/app/src/components/transactions/Status.vue b/packages/app/src/components/transactions/Status.vue
index 9fb3172d57..1491ba28af 100644
--- a/packages/app/src/components/transactions/Status.vue
+++ b/packages/app/src/components/transactions/Status.vue
@@ -249,16 +249,6 @@ const badges = computed(() => {
     });
     return badgesArr;
   }
-  if (props.status === "indexing") {
-    badgesArr.push({
-      testId: "indexing",
-      color: "neutral",
-      text: t("transactions.statusComponent.indexing"),
-      infoTooltip: t("transactions.statusComponent.indexingTooltip"),
-      icon: Spinner,
-    });
-    return badgesArr;
-  }
 
   badgesArr.push({
     testId: "l2-badge-title",
@@ -273,6 +263,16 @@ const badges = computed(() => {
     icon: CheckIcon,
   });
 
+  if (props.status === "indexing") {
+    badgesArr.push({
+      testId: "indexing",
+      color: "neutral",
+      text: t("transactions.statusComponent.indexing"),
+      icon: Spinner,
+    });
+    return badgesArr;
+  }
+
   badgesArr.push({
     testId: "l1-badge-title",
     color: props.status === "verified" ? "success" : "neutral",
diff --git a/packages/app/src/locales/en.json b/packages/app/src/locales/en.json
index f40c91c7ea..0824960ad3 100644
--- a/packages/app/src/locales/en.json
+++ b/packages/app/src/locales/en.json
@@ -189,7 +189,7 @@
         },
         "statusComponent": {
             "processed": "Processed",
-            "indexing": "Indexing...",
+            "indexing": "Being indexed by explorer",
             "sending": "Sending",
             "sent": "Sent",
             "validating": "Validating",
@@ -197,7 +197,6 @@
             "executing": "Executing",
             "executed": "Executed",
             "failed": "Failed",
-            "indexingTooltip": "Transaction is indexing and will be fully reflected shortly",
             "ethereumNetwork": "Ethereum network"
         },
         "transaction": "Transaction",
diff --git a/packages/app/src/locales/uk.json b/packages/app/src/locales/uk.json
index 9ff43d706f..8358c9482c 100644
--- a/packages/app/src/locales/uk.json
+++ b/packages/app/src/locales/uk.json
@@ -128,7 +128,7 @@
         },
         "statusComponent": {
             "processed": "Оброблено",
-            "indexing": "Індексується...",
+            "indexing": "Індексується експлорером",
             "sending": "Надсилається",
             "sent": "Надіслано",
             "validating": "Перевіряється",
@@ -136,7 +136,6 @@
             "executing": "Виконується",
             "executed": "Виконано",
             "failed": "Невдало",
-            "indexingTooltip": "Транзакція індексується, всі деталі будуть доступні згодом",
             "ethereumNetwork": "мережа Ethereum"
         },
         "transaction": "Транзакція",
diff --git a/packages/app/tests/components/transactions/GeneralInfo.spec.ts b/packages/app/tests/components/transactions/GeneralInfo.spec.ts
index aaf3bdd00c..63450cbd36 100644
--- a/packages/app/tests/components/transactions/GeneralInfo.spec.ts
+++ b/packages/app/tests/components/transactions/GeneralInfo.spec.ts
@@ -305,7 +305,7 @@ describe("Transaction info table", () => {
     expect(nonceTooltip).toBe(i18n.global.t("transactions.table.nonceTooltip"));
     expect(createdAtTooltip).toBe(i18n.global.t("transactions.table.createdTooltip"));
   });
-  it("renders indexing transaction status and tooltip", async () => {
+  it("renders indexing transaction status", async () => {
     const wrapper = mount(Table, {
       global: {
         stubs: {
@@ -322,10 +322,11 @@ describe("Transaction info table", () => {
     await nextTick();
     const status = wrapper.findAll("tbody tr td:nth-child(2)")[1];
     const badges = status.findAllComponents(Badge);
-    expect(badges.length).toBe(1);
-    expect(badges[0].text()).toBe(i18n.global.t("transactions.statusComponent.indexing"));
-    const indexingTooltip = wrapper.find(".transaction-status .info-tooltip");
-    expect(indexingTooltip.text()).toBe(i18n.global.t("transactions.statusComponent.indexingTooltip"));
+
+    const [l2StatusBadgeTitle, l2StatusBadgeValue, indexingBadge] = badges;
+    expect(l2StatusBadgeTitle.text()).toBe(i18n.global.t("general.l2NetworkName"));
+    expect(l2StatusBadgeValue.text()).toBe(i18n.global.t("transactions.statusComponent.processed"));
+    expect(indexingBadge.text()).toBe(i18n.global.t("transactions.statusComponent.indexing"));
   });
   it("renders failed transaction status", async () => {
     const wrapper = mount(Table, {
diff --git a/packages/app/tests/components/transactions/Status.spec.ts b/packages/app/tests/components/transactions/Status.spec.ts
index 82f3c72e77..9fe7d16e27 100644
--- a/packages/app/tests/components/transactions/Status.spec.ts
+++ b/packages/app/tests/components/transactions/Status.spec.ts
@@ -6,7 +6,6 @@ import { afterEach, beforeEach, describe, expect, it, type Mock, vi } from "vite
 import { mount } from "@vue/test-utils";
 
 import Badge from "@/components/common/Badge.vue";
-import InfoTooltip from "@/components/common/InfoTooltip.vue";
 import Spinner from "@/components/common/Spinner.vue";
 import Status from "@/components/transactions/Status.vue";
 
@@ -350,7 +349,7 @@ describe("Status", () => {
       expect(l1ExecutedLink.attributes("href")).toBeUndefined();
     });
   });
-  it("shows icon tooltip and single indexing badge for 'indexing' status", async () => {
+  it("shows indexing badge for 'indexing' status", async () => {
     const wrapper = mount(Status, {
       global,
       props: {
@@ -362,15 +361,18 @@ describe("Status", () => {
     });
 
     const badges = wrapper.findAllComponents(Badge);
-    expect(badges.length).toBe(1);
+    expect(badges.length).toBe(3);
+
+    const [l2StatusBadgeTitle, l2StatusBadgeValue, indexingBadge] = badges;
 
-    const [indexingBadge] = badges;
+    expect(l2StatusBadgeTitle.text()).toBe(i18n.global.t("general.l2NetworkName"));
+    expect(l2StatusBadgeTitle.props().color).toBe("success");
+    expect(l2StatusBadgeTitle.props().textColor).toBe("neutral");
+
+    expect(l2StatusBadgeValue.text()).toBe(i18n.global.t("transactions.statusComponent.processed"));
+    expect(l2StatusBadgeValue.props().color).toBe("dark-success");
 
     expect(indexingBadge.props().color).toBe("neutral");
     expect(indexingBadge.text()).toBe(i18n.global.t("transactions.statusComponent.indexing"));
-
-    const infoTooltip = wrapper.findAllComponents(InfoTooltip);
-    expect(infoTooltip.length).toBe(1);
-    expect(infoTooltip[0].text()).toBe(i18n.global.t("transactions.statusComponent.indexingTooltip"));
   });
 });