From 2e252dad388bafc12afd30aa97ecca578a4abca8 Mon Sep 17 00:00:00 2001
From: Vasyl Ivanchuk <vasyl.ivanchuk@gmail.com>
Date: Thu, 9 Nov 2023 16:19:24 +0200
Subject: [PATCH] feat: add API docs to the menu (#85)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# What ❔

Add API Documentation to the Tools menu item:

<img width="343" alt="Screenshot 2023-11-09 at 15 00 10"
src="https://github.com/matter-labs/block-explorer/assets/6553665/8a65ec50-6ef3-499d-bb4f-458695cc8062">
<img width="546" alt="Screenshot 2023-11-09 at 15 00 28"
src="https://github.com/matter-labs/block-explorer/assets/6553665/cbc41808-153a-4046-a015-4e27e4f11302">


## Why ❔

We want developers to easier find API Documentation on their own.

## Checklist

<!-- Check your PR fulfills the following items. -->
<!-- For draft PRs check the boxes as you complete them. -->

- [X] PR title corresponds to the body of PR (we generate changelog
entries from PRs).
- [X] Tests for the changes have been added / updated.
---
 packages/app/src/components/header/TheHeader.vue | 4 ++++
 packages/app/src/locales/en.json                 | 1 +
 packages/app/src/locales/uk.json                 | 1 +
 packages/app/tests/components/TheHeader.spec.ts  | 5 +++--
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/components/header/TheHeader.vue b/packages/app/src/components/header/TheHeader.vue
index db0cf0a8aa..13ce45b682 100644
--- a/packages/app/src/components/header/TheHeader.vue
+++ b/packages/app/src/components/header/TheHeader.vue
@@ -179,6 +179,10 @@ const blockExplorerLinks = reactive([
 ]);
 
 const links = [
+  {
+    label: computed(() => t("header.nav.apiDocs")),
+    url: computed(() => `${currentNetwork.value.apiUrl}/docs`),
+  },
   {
     label: computed(() => t("header.nav.contractVerification")),
     to: { name: "contract-verification" },
diff --git a/packages/app/src/locales/en.json b/packages/app/src/locales/en.json
index 679fe2f4dd..26d044011f 100644
--- a/packages/app/src/locales/en.json
+++ b/packages/app/src/locales/en.json
@@ -289,6 +289,7 @@
             "portal": "Portal",
             "documentation": "Documentation",
             "tools": "Tools",
+            "apiDocs": "API Documentation",
             "contractVerification": "Smart Contract Verification",
             "debugger": "zkEVM Debugger",
             "bridge": "Bridge"
diff --git a/packages/app/src/locales/uk.json b/packages/app/src/locales/uk.json
index efb5d7fbf4..742d34ac0a 100644
--- a/packages/app/src/locales/uk.json
+++ b/packages/app/src/locales/uk.json
@@ -145,6 +145,7 @@
     "header": {
         "nav": {
             "tools": "Інструменти",
+            "apiDocs": "АРІ Документація",
             "contractVerification": "Верифікація Смарт контракту",
             "debugger": "zkEVM Налагоджувач",
             "blockExplorer": "Провідник",
diff --git a/packages/app/tests/components/TheHeader.spec.ts b/packages/app/tests/components/TheHeader.spec.ts
index a80ebf3c86..bc7ea90c84 100644
--- a/packages/app/tests/components/TheHeader.spec.ts
+++ b/packages/app/tests/components/TheHeader.spec.ts
@@ -25,6 +25,7 @@ vi.mock("@/composables/useContext", () => {
         maintenance: maintenanceMock(),
         l2WalletUrl: "https://portal.zksync.io/",
         bridgeUrl: "https://bridge.zksync.io/",
+        apiUrl: "https://api-url",
       })),
     }),
   };
@@ -57,9 +58,9 @@ describe("TheHeader:", () => {
     await fireEvent.click(dropdown[1].find("button")!.element);
     const toolsLinksRouter = dropdown[1].findAllComponents(RouterLinkStub);
     const toolsLinks = dropdown[1].findAll("a");
+    expect(toolsLinks[0].attributes("href")).toBe("https://api-url/docs");
     expect(toolsLinksRouter[0].props().to.name).toBe("contract-verification");
-    // expect(toolsLinksRouter[1].props().to.name).toBe("debugger");
-    expect(toolsLinks[1].attributes("href")).toBe("https://portal.zksync.io/");
+    expect(toolsLinks[2].attributes("href")).toBe("https://portal.zksync.io/");
 
     expect(wrapper.findAll(".navigation-container > .navigation-link")[0].attributes("href")).toBe(
       "https://era.zksync.io/docs/dev/"