feat: make app l1ExplorerUrl config optional (#54)

# What ❔ Changes to make app `l1ExplorerUrl` config optional. UI changes to show L1 addresses / hashes as texts instead of links if `l1ExplorerUrl` is not set. ## Why ❔ Locally we might not have L1 Block Explorer running so the UI has to be adjusted to properly work without defined `l1ExplorerUrl`. ## Checklist   - [X] PR title corresponds to the body of PR (we generate changelog entries from PRs). - [X] Tests for the changes have been added / updated. - [X] Documentation comments have been added / updated.
matter-labs · Oct 17, 2023 · bda4115 · bda4115
1 parent e43d87a
commit bda4115
Show file tree

Hide file tree

Showing 15 changed files with 356 additions and 25 deletions.
diff --git a/packages/app/README.md b/packages/app/README.md
@@ -44,7 +44,6 @@ const config: EnvironmentConfig = {
       verificationApiUrl: "https://zksync2-testnet-explorer.zksync.dev",
       hostnames: ["localhost"],
       icon: "/images/icons/zksync-arrows.svg",
-      l1ExplorerUrl: "https://goerli.etherscan.io",
       l2ChainId: 270,
       l2NetworkName: "Local",
       l2WalletUrl: "https://goerli.staging-portal.zksync.dev/",
@@ -59,7 +58,6 @@ const config: EnvironmentConfig = {
       verificationApiUrl: "https://zksync2-testnet-explorer.zksync.dev",
       hostnames: ["localhost"],
       icon: "/images/icons/zksync-arrows.svg",
-      l1ExplorerUrl: "https://goerli.etherscan.io",
       l2ChainId: 270,
       l2NetworkName: "Local Hyperchain",
       l2WalletUrl: "https://goerli.staging-portal.zksync.dev/",

diff --git a/packages/app/src/components/AddressLink.vue b/packages/app/src/components/AddressLink.vue
@@ -1,9 +1,18 @@
 <template>
-  <a v-if="network === 'L1'" target="_blank" :href="`${currentNetwork.l1ExplorerUrl}/address/${formattedAddress}`">
+  <a
+    v-if="network === 'L1' && !!currentNetwork.l1ExplorerUrl"
+    target="_blank"
+    :href="`${currentNetwork.l1ExplorerUrl}/address/${formattedAddress}`"
+  >
     <slot>
       {{ formattedAddress }}
     </slot>
   </a>
+  <span v-else-if="network === 'L1' && !currentNetwork.l1ExplorerUrl">
+    <slot>
+      {{ formattedAddress }}
+    </slot>
+  </span>
   <router-link v-else :to="{ name: 'address', params: { address: formattedAddress } }">
     <slot>
       {{ formattedAddress }}

diff --git a/packages/app/src/components/batches/InfoTable.vue b/packages/app/src/components/batches/InfoTable.vue
@@ -85,7 +85,9 @@ const tableInfoItems = computed(() => {
           tooltip: t(`batches.${key}Tooltip`),
           value: { value: props.batch[key] },
           component: CopyContent,
-          url: `${currentNetwork.value.l1ExplorerUrl}/tx/${props.batch[key]}`,
+          url: currentNetwork.value.l1ExplorerUrl
+            ? `${currentNetwork.value.l1ExplorerUrl}/tx/${props.batch[key]}`
+            : undefined,
           ...(key === "proveTxHash" &&
             props.batch.isProvenByNewProver && {
               additionalContentComponent: NewProverInfoBox,

diff --git a/packages/app/src/components/blocks/InfoTable.vue b/packages/app/src/components/blocks/InfoTable.vue
@@ -110,7 +110,9 @@ const tableInfoItems = computed(() => {
           tooltip: t(`blocks.table.${key}Tooltip`),
           value: { value: props.block[key] },
           component: CopyContent,
-          url: `${currentNetwork.value.l1ExplorerUrl}/tx/${props.block[key]}`,
+          url: currentNetwork.value.l1ExplorerUrl
+            ? `${currentNetwork.value.l1ExplorerUrl}/tx/${props.block[key]}`
+            : undefined,
           ...(key === "proveTxHash" &&
             props.block.isProvenByNewProver && {
               additionalContentComponent: NewProverInfoBox,

diff --git a/packages/app/src/components/transactions/Status.vue b/packages/app/src/components/transactions/Status.vue
@@ -20,12 +20,14 @@
           <ol v-for="(finishedStatus, index) in item.finishedStatuses" :key="index">
             <li>
               <a
-                :href="`${currentNetwork.l1ExplorerUrl}/tx/${finishedStatus.url}`"
+                :href="
+                  currentNetwork.l1ExplorerUrl ? `${currentNetwork.l1ExplorerUrl}/tx/${finishedStatus.url}` : undefined
+                "
                 class="badge-status-link"
                 target="_blank"
               >
                 <span class="badge-status-link-text"><CheckIcon />{{ finishedStatus.text }}</span>
-                <ExternalLinkIcon class="badge-status-link-icon" />
+                <ExternalLinkIcon v-if="currentNetwork.l1ExplorerUrl" class="badge-status-link-icon" />
               </a>
             </li>
           </ol>
@@ -36,12 +38,12 @@
         <template #default v-if="item.text">
           <a
             v-if="item.url"
-            :href="`${currentNetwork.l1ExplorerUrl}/tx/${item.url}`"
+            :href="currentNetwork.l1ExplorerUrl ? `${currentNetwork.l1ExplorerUrl}/tx/${item.url}` : undefined"
             class="badge-status-link"
             target="_blank"
           >
             <span class="badge-status-link-text"><CheckIcon />{{ item.text }}</span>
-            <ExternalLinkIcon class="badge-status-link-icon" />
+            <ExternalLinkIcon v-if="currentNetwork.l1ExplorerUrl" class="badge-status-link-icon" />
           </a>
           <span v-else>{{ item.text }}</span>
         </template>
@@ -103,19 +105,25 @@
               :key="index"
             >
               <a
-                :href="`${currentNetwork.l1ExplorerUrl}/tx/${finishedStatus.url}`"
+                :href="
+                  currentNetwork.l1ExplorerUrl ? `${currentNetwork.l1ExplorerUrl}/tx/${finishedStatus.url}` : undefined
+                "
                 class="badge-status-link"
                 target="_blank"
               >
                 <span class="badge-status-link-text"><CheckIcon />{{ finishedStatus.text }}</span>
-                <ExternalLinkIcon class="badge-status-link-icon" />
+                <ExternalLinkIcon v-if="currentNetwork.l1ExplorerUrl" class="badge-status-link-icon" />
               </a>
             </div>
 
             <div v-if="item.url" class="badge-status-popup-button status-active">
-              <a :href="`${currentNetwork.l1ExplorerUrl}/tx/${item.url}`" class="badge-status-link" target="_blank">
+              <a
+                :href="currentNetwork.l1ExplorerUrl ? `${currentNetwork.l1ExplorerUrl}/tx/${item.url}` : undefined"
+                class="badge-status-link"
+                target="_blank"
+              >
                 <span class="badge-status-link-text status-next"><CheckIcon />{{ item.text }}</span>
-                <ExternalLinkIcon class="badge-status-link-icon" />
+                <ExternalLinkIcon v-if="currentNetwork.l1ExplorerUrl" class="badge-status-link-icon" />
               </a>
             </div>
             <div v-else class="badge-status-popup-button status-current">

diff --git a/packages/app/src/components/transactions/Table.vue b/packages/app/src/components/transactions/Table.vue
@@ -414,6 +414,9 @@ function getDirection(item: TransactionListItem): Direction {
     .transactions-data-link-value {
       @apply block cursor-pointer text-sm font-medium;
     }
+    span.transactions-data-link-value {
+      @apply cursor-default;
+    }
   }
   .transactions-data-method {
     @apply w-[200px] truncate sm:w-auto;

diff --git a/packages/app/src/components/transactions/infoTable/TransferInfo.vue b/packages/app/src/components/transactions/infoTable/TransferInfo.vue
@@ -5,9 +5,17 @@
     <AddressLink v-if="network !== 'L1'" :address="address" class="address">
       <span>{{ shortenFitText(address, "left") }}</span>
     </AddressLink>
-    <a v-else class="address" target="_blank" :href="`${currentNetwork.l1ExplorerUrl}/address/${address}`">
-      <span>{{ shortenFitText(address, "left") }}</span>
-    </a>
+    <template v-else>
+      <a
+        v-if="currentNetwork.l1ExplorerUrl"
+        class="address"
+        target="_blank"
+        :href="`${currentNetwork.l1ExplorerUrl}/address/${address}`"
+      >
+        <span>{{ shortenFitText(address, "left") }}</span>
+      </a>
+      <span class="address" v-else>{{ shortenFitText(address, "left") }}</span>
+    </template>
     <CopyButton :value="address" class="copy-btn" />
   </div>
 </template>

diff --git a/packages/app/src/components/transfers/Table.vue b/packages/app/src/components/transfers/Table.vue
@@ -244,6 +244,9 @@ watch(
     .transfers-data-link-value {
       @apply block cursor-pointer text-sm font-medium;
     }
+    span.transfers-data-link-value {
+      @apply cursor-default;
+    }
   }
 }
 </style>
diff --git a/packages/app/src/configs/index.ts b/packages/app/src/configs/index.ts
@@ -9,7 +9,7 @@ export type NetworkConfig = {
   l2NetworkName: string;
   l2WalletUrl: string;
   l2ChainId: 270 | 280 | 324;
-  l1ExplorerUrl: string;
+  l1ExplorerUrl?: string;
   maintenance: boolean;
   published: boolean;
   hostnames: string[];

diff --git a/packages/app/tests/components/AddressLink.spec.ts b/packages/app/tests/components/AddressLink.spec.ts
@@ -1,9 +1,20 @@
-import { describe, expect, it } from "vitest";
+import { computed } from "vue";
+
+import { afterEach, beforeEach, describe, expect, it, type Mock, vi } from "vitest";
 
 import { mount, RouterLinkStub } from "@vue/test-utils";
 
 import AddressLink from "@/components/AddressLink.vue";
 
+const l1ExplorerUrlMock = vi.fn((): string | null => "https://goerli.etherscan.io");
+vi.mock("@/composables/useContext", () => {
+  return {
+    default: () => ({
+      currentNetwork: computed(() => ({ l1ExplorerUrl: l1ExplorerUrlMock() })),
+    }),
+  };
+});
+
 const global = {
   stubs: {
     RouterLink: RouterLinkStub,
@@ -58,4 +69,26 @@ describe("Address Link", () => {
       "https://goerli.etherscan.io/address/0x0000000000000000000000000000000000000001"
     );
   });
+  describe("when L1 explorer url is not set", () => {
+    let mock1ExplorerUrl: Mock;
+    beforeEach(() => {
+      mock1ExplorerUrl = l1ExplorerUrlMock.mockReturnValue(null);
+    });
+
+    afterEach(() => {
+      mock1ExplorerUrl.mockRestore();
+    });
+
+    it("renders L1 address as text instead of link", async () => {
+      const wrapper = mount(AddressLink, {
+        global,
+        props: {
+          address: "0x0000000000000000000000000000000000000001",
+          network: "L1",
+        },
+      });
+      expect(wrapper.findAll("a").length).toBe(0);
+      expect(wrapper.find("span").text()).toBe("0x0000000000000000000000000000000000000001");
+    });
+  });
 });
diff --git a/packages/app/tests/components/batches/InfoTable.spec.ts b/packages/app/tests/components/batches/InfoTable.spec.ts
@@ -1,6 +1,7 @@
+import { computed } from "vue";
 import { createI18n } from "vue-i18n";
 
-import { describe, expect, it } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, type Mock, vi } from "vitest";
 
 import { mount, RouterLinkStub } from "@vue/test-utils";
 
@@ -13,6 +14,15 @@ import type { BatchDetails } from "@/composables/useBatch";
 
 import { localDateFromISOString } from "@/utils/helpers";
 
+const l1ExplorerUrlMock = vi.fn((): string | null => "https://goerli.etherscan.io");
+vi.mock("@/composables/useContext", () => {
+  return {
+    default: () => ({
+      currentNetwork: computed(() => ({ l1ExplorerUrl: l1ExplorerUrlMock() })),
+    }),
+  };
+});
+
 describe("InfoTable:", () => {
   const i18n = createI18n({
     locale: "en",
@@ -145,4 +155,42 @@ describe("InfoTable:", () => {
     );
     wrapper.unmount();
   });
+  describe("when L1 explorer url is not set", () => {
+    let mock1ExplorerUrl: Mock;
+    beforeEach(() => {
+      mock1ExplorerUrl = l1ExplorerUrlMock.mockReturnValue(null);
+    });
+
+    afterEach(() => {
+      mock1ExplorerUrl.mockRestore();
+    });
+
+    it("renders L1 hashes as texts instead of links", async () => {
+      const wrapper = mount(InfoTable, {
+        global: {
+          stubs: {
+            RouterLink: RouterLinkStub,
+          },
+          plugins: [i18n],
+        },
+        props: {
+          batch: batchItem,
+          loading: false,
+        },
+      });
+      expect(wrapper.findAll(".actual-string")[0].text()).toEqual(
+        "0x8983f748ff6c2f9038904d65dc63a344db33c29d97f1741a931e90689f86b2be"
+      );
+      expect(wrapper.findAll(".actual-string")[1].text()).toEqual(
+        "0x0ab34d8523b67f80783305760a2989ffe6ab205621813db5420a3012845f5ac7"
+      );
+      expect(wrapper.findAll(".actual-string")[2].text()).toEqual(
+        "0x87c5c5bf78100d88766101f13ec78d3b3356929556ee971cfacb6fe2a53b210a"
+      );
+      expect(wrapper.findAll(".actual-string")[3].text()).toEqual(
+        "0x57c44d7c183633f81bfa155bd30e68a94e3ff12c1e6265a4b5e06b6d4a7a1fa8"
+      );
+      wrapper.unmount();
+    });
+  });
 });
diff --git a/packages/app/tests/components/blocks/InfoTable.spec.ts b/packages/app/tests/components/blocks/InfoTable.spec.ts
@@ -1,6 +1,7 @@
+import { computed } from "vue";
 import { createI18n } from "vue-i18n";
 
-import { describe, expect, it } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, type Mock, vi } from "vitest";
 
 import { mount, RouterLinkStub } from "@vue/test-utils";
 
@@ -14,6 +15,15 @@ import type { Block } from "@/composables/useBlock";
 
 import { localDateFromISOString } from "@/utils/helpers";
 
+const l1ExplorerUrlMock = vi.fn((): string | null => "https://goerli.etherscan.io");
+vi.mock("@/composables/useContext", () => {
+  return {
+    default: () => ({
+      currentNetwork: computed(() => ({ l1ExplorerUrl: l1ExplorerUrlMock() })),
+    }),
+  };
+});
+
 describe("InfoTable:", () => {
   const i18n = createI18n({
     locale: "en",
@@ -241,4 +251,54 @@ describe("InfoTable:", () => {
     expect(batch[1].findComponent(Tooltip).find("span").text()).toBe("1");
     expect(batch[1].findComponent(RouterLinkStub).exists()).toBeFalsy();
   });
+  describe("when L1 explorer url is not set", () => {
+    let mock1ExplorerUrl: Mock;
+    beforeEach(() => {
+      mock1ExplorerUrl = l1ExplorerUrlMock.mockReturnValue(null);
+    });
+
+    afterEach(() => {
+      mock1ExplorerUrl.mockRestore();
+    });
+
+    it("renders L1 hashes as texts instead of links", async () => {
+      const wrapper = mount(InfoTable, {
+        global: {
+          plugins: [i18n],
+          stubs: {
+            RouterLink: RouterLinkStub,
+          },
+        },
+        props: {
+          block: <Block>{
+            number: 1,
+            timestamp: "2022-04-13T16:48:32.000Z",
+            l1TxCount: 1,
+            l2TxCount: 0,
+            hash: "0xcd7533748f8f0c8f406f366e83d5e92d174845405418745d0f7228b85025cd6e",
+            status: "verified",
+            commitTxHash: "0x5b5a05691d974803f5f095c1b918d2dd19152ed0a9de506d545c96df6cb9cac2",
+            committedAt: "2022-04-13T16:54:37.622380Z",
+            proveTxHash: "0xfb3532f4c38c2eaf78248da64cf80a354429d58204761d6ea6439391043f6fa9",
+            provenAt: "2022-04-13T16:54:37.700089Z",
+            executeTxHash: "0x8d1a78d1da5aba1d0755ec9dbcba938f3920681d2a3d4d374ef265a50858f364",
+            executedAt: "2022-04-13T16:54:37.784185Z",
+          },
+          loading: false,
+        },
+      });
+      expect(wrapper.findAll(".actual-string")[0].text()).toEqual(
+        "0xcd7533748f8f0c8f406f366e83d5e92d174845405418745d0f7228b85025cd6e"
+      );
+      expect(wrapper.findAll(".actual-string")[1].text()).toEqual(
+        "0x5b5a05691d974803f5f095c1b918d2dd19152ed0a9de506d545c96df6cb9cac2"
+      );
+      expect(wrapper.findAll(".actual-string")[2].text()).toEqual(
+        "0xfb3532f4c38c2eaf78248da64cf80a354429d58204761d6ea6439391043f6fa9"
+      );
+      expect(wrapper.findAll(".actual-string")[3].text()).toEqual(
+        "0x8d1a78d1da5aba1d0755ec9dbcba938f3920681d2a3d4d374ef265a50858f364"
+      );
+    });
+  });
 });