fix: improve indexing status badge

matter-labs · Dec 16, 2023 · b736b1b · b736b1b
1 parent 5c7a8bf
commit b736b1b
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 27 deletions.
diff --git 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
@@ -189,15 +189,14 @@
         },
         "statusComponent": {
             "processed": "Processed",
-            "indexing": "Indexing...",
+            "indexing": "Being indexed by explorer",
             "sending": "Sending",
             "sent": "Sent",
             "validating": "Validating",
             "validated": "Validated",
             "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
@@ -128,15 +128,14 @@
         },
         "statusComponent": {
             "processed": "Оброблено",
-            "indexing": "Індексується...",
+            "indexing": "Індексується експлорером",
             "sending": "Надсилається",
             "sent": "Надіслано",
             "validating": "Перевіряється",
             "validated": "Перевірено",
             "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
@@ -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
@@ -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"));
   });
 });