From e5190983692ba49ac1dbd8c39e4ec55168417e70 Mon Sep 17 00:00:00 2001
From: Nicolas Villanueva <1890113+MexicanAce@users.noreply.github.com>
Date: Fri, 22 Nov 2024 06:56:40 -0800
Subject: [PATCH] feat: add view all buttons on landing page and fix mobile
 styling (#323)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# What ❔

* Add `View All ...` buttons on the landing page
* Fix the mobile styling of the ABI json fields for verified contracts

## Why ❔

* Closes #97
* With the recent change, ABI json fields are not wrapping correctly on
small screens

## 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.
- [x] Documentation comments have been added / updated.

## Evidence


https://github.com/user-attachments/assets/90677258-5f8b-49be-8beb-ee10cc947943
---
 .../common/table/fields/AbiData.vue           |  2 +-
 packages/app/src/locales/en.json              |  4 +-
 packages/app/src/locales/uk.json              |  3 +-
 packages/app/src/views/HomeView.vue           | 40 ++++++++++++++-----
 packages/app/tests/views/AddressView.spec.ts  |  2 +
 packages/app/tests/views/BatchView.spec.ts    |  2 +
 packages/app/tests/views/BatchesView.spec.ts  |  2 +
 packages/app/tests/views/BlockView.spec.ts    |  2 +
 packages/app/tests/views/BlocksView.spec.ts   |  2 +
 .../views/ContractVerificationView.spec.ts    |  2 +
 packages/app/tests/views/DebuggerView.spec.ts |  3 ++
 packages/app/tests/views/HomeView.spec.ts     |  2 +
 .../app/tests/views/TransactionView.spec.ts   |  2 +
 .../app/tests/views/TransactionsView.spec.ts  |  2 +
 14 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/packages/app/src/components/common/table/fields/AbiData.vue b/packages/app/src/components/common/table/fields/AbiData.vue
index 63396c9ac0..17996d9531 100644
--- a/packages/app/src/components/common/table/fields/AbiData.vue
+++ b/packages/app/src/components/common/table/fields/AbiData.vue
@@ -47,7 +47,7 @@ const truncatedAbi = computed<string>(() => {
 <style lang="scss">
 .info-field-abi-data {
   .abi-data-disclosure-btn {
-    @apply flex w-full items-center justify-between bg-gray-200 px-4 py-2 text-left text-sm font-medium text-gray-900 hover:bg-gray-200 focus:outline-none;
+    @apply flex w-full items-center justify-between bg-gray-200 px-4 py-2 text-left text-sm font-medium text-gray-900 hover:bg-gray-200 focus:outline-none [word-break:break-word];
   }
   .abi-data-disclosure-icons {
     @apply flex items-center;
diff --git a/packages/app/src/locales/en.json b/packages/app/src/locales/en.json
index 344cffbec4..cda1df7250 100644
--- a/packages/app/src/locales/en.json
+++ b/packages/app/src/locales/en.json
@@ -204,7 +204,8 @@
         "loadingInfoFailed": "Loading transaction info failed",
         "transactionNotFound": "Transaction wasn't found",
         "transactionInfo": "Transaction info",
-        "tryRequestAgain": "Try again"
+        "tryRequestAgain": "Try again",
+        "viewAll": "View All Transactions"
     },
     "transactionData": {
         "showOriginalInput": "Show original input",
@@ -272,6 +273,7 @@
             "transactionsShort": "txns"
         },
         "tooltipInfo": "Latest batches submitted to Ethereum Network",
+        "viewAll": "View All Batches",
         "status": {
             "verified": "Executed on",
             "sealed": "Processed on",
diff --git a/packages/app/src/locales/uk.json b/packages/app/src/locales/uk.json
index 3d01804fb9..b3659d7884 100644
--- a/packages/app/src/locales/uk.json
+++ b/packages/app/src/locales/uk.json
@@ -143,7 +143,8 @@
         "loadingInfoFailed": "Не вдалося завантажити інформацію про транзакцію",
         "transactionNotFound": "Транзакцію не знайдено",
         "transactionInfo": "Інформація про транзакцію",
-        "tryRequestAgain": "Спробуйте знову"
+        "tryRequestAgain": "Спробуйте знову",
+        "viewAll": "Переглянути всі транзакції"
     },
     "header": {
         "nav": {
diff --git a/packages/app/src/views/HomeView.vue b/packages/app/src/views/HomeView.vue
index 89a0e09544..161dfda190 100644
--- a/packages/app/src/views/HomeView.vue
+++ b/packages/app/src/views/HomeView.vue
@@ -19,17 +19,22 @@
           <p>{{ t("blockExplorer.batches") }}</p>
           <InfoTooltip class="batches-tooltip">{{ t("batches.tooltipInfo") }}</InfoTooltip>
         </div>
-        <TableBatches
-          v-if="(isBatchesPending || batches) && !isBatchesFailed"
-          :data-testid="$testId.latestBatchesTable"
-          :loading="isBatchesPending"
-          :batches="displayedBatches"
-          :columns="['status', 'size', 'txnBatch', 'age']"
-        >
-          <template #not-found>
-            <p class="not-found">{{ t("batches.table.notFoundHomePage") }}</p>
-          </template>
-        </TableBatches>
+        <template v-if="(isBatchesPending || batches) && !isBatchesFailed">
+          <TableBatches
+            :data-testid="$testId.latestBatchesTable"
+            :loading="isBatchesPending"
+            :batches="displayedBatches"
+            :columns="['status', 'size', 'txnBatch', 'age']"
+          >
+            <template #not-found>
+              <p class="not-found">{{ t("batches.table.notFoundHomePage") }}</p>
+            </template>
+          </TableBatches>
+          <Button variant="outlined" color="primary" @click="router.push('batches')">
+            {{ t("batches.viewAll") }}
+            <ArrowRightIcon class="batches-view-all-arrow" />
+          </Button>
+        </template>
         <span v-else-if="isBatchesFailed" class="error-message">
           {{ t("failedRequest") }}
         </span>
@@ -48,6 +53,10 @@
             </TableBodyColumn>
           </template>
         </TransactionsTable>
+        <Button variant="outlined" color="primary" @click="router.push('transactions')">
+          {{ t("transactions.viewAll") }}
+          <ArrowRightIcon class="transactions-view-all-arrow" />
+        </Button>
       </div>
     </div>
   </div>
@@ -56,9 +65,12 @@
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 
+import { ArrowRightIcon } from "@heroicons/vue/outline";
+
 import NetworkStats from "@/components/NetworkStats.vue";
 import SearchForm from "@/components/SearchForm.vue";
 import TableBatches from "@/components/batches/Table.vue";
+import Button from "@/components/common/Button.vue";
 import InfoTooltip from "@/components/common/InfoTooltip.vue";
 import TableBodyColumn from "@/components/common/table/TableBodyColumn.vue";
 import TransactionsTable from "@/components/transactions/Table.vue";
@@ -66,6 +78,8 @@ import TransactionsTable from "@/components/transactions/Table.vue";
 import useBatches from "@/composables/useBatches";
 import useNetworkStats from "@/composables/useNetworkStats";
 
+import router from "@/router";
+
 const { t } = useI18n();
 const { fetch: fetchNetworkStats, pending: networkStatsPending, item: networkStats } = useNetworkStats();
 const { load: getBatches, pending: isBatchesPending, failed: isBatchesFailed, data: batches } = useBatches();
@@ -121,6 +135,10 @@ getBatches(1, new Date());
         @apply mb-3;
       }
     }
+    .batches-view-all-arrow,
+    .transactions-view-all-arrow {
+      @apply w-4 ml-1;
+    }
   }
 
   .error-message {
diff --git a/packages/app/tests/views/AddressView.spec.ts b/packages/app/tests/views/AddressView.spec.ts
index 50bb7b5496..b1a6e73b4b 100644
--- a/packages/app/tests/views/AddressView.spec.ts
+++ b/packages/app/tests/views/AddressView.spec.ts
@@ -46,6 +46,8 @@ vi.mock("vue-router", () => ({
       page: vi.fn(),
     },
   }),
+  createWebHistory: () => vi.fn(),
+  createRouter: () => vi.fn(),
 }));
 
 vi.mock("ohmyfetch", () => {
diff --git a/packages/app/tests/views/BatchView.spec.ts b/packages/app/tests/views/BatchView.spec.ts
index 3f86549bd5..8d4d6900f2 100644
--- a/packages/app/tests/views/BatchView.spec.ts
+++ b/packages/app/tests/views/BatchView.spec.ts
@@ -29,6 +29,8 @@ vi.mock("@/composables/useSearch", () => {
 vi.mock("vue-router", () => ({
   useRouter: () => router,
   useRoute: () => vi.fn(),
+  createWebHistory: () => vi.fn(),
+  createRouter: () => vi.fn(),
 }));
 
 vi.mock("ohmyfetch", () => {
diff --git a/packages/app/tests/views/BatchesView.spec.ts b/packages/app/tests/views/BatchesView.spec.ts
index 4b78329969..22a794e6bc 100644
--- a/packages/app/tests/views/BatchesView.spec.ts
+++ b/packages/app/tests/views/BatchesView.spec.ts
@@ -13,6 +13,8 @@ vi.mock("vue-router", () => ({
   useRoute: () => ({
     query: routeQueryMock(),
   }),
+  createWebHistory: () => vi.fn(),
+  createRouter: () => vi.fn(),
 }));
 
 import enUS from "@/locales/en.json";
diff --git a/packages/app/tests/views/BlockView.spec.ts b/packages/app/tests/views/BlockView.spec.ts
index 4e80c08a8a..37572b2f79 100644
--- a/packages/app/tests/views/BlockView.spec.ts
+++ b/packages/app/tests/views/BlockView.spec.ts
@@ -29,6 +29,8 @@ vi.mock("@/composables/useSearch", () => {
 vi.mock("vue-router", () => ({
   useRouter: () => router,
   useRoute: () => vi.fn(),
+  createWebHistory: () => vi.fn(),
+  createRouter: () => vi.fn(),
 }));
 
 vi.mock("ohmyfetch", () => {
diff --git a/packages/app/tests/views/BlocksView.spec.ts b/packages/app/tests/views/BlocksView.spec.ts
index 66159caf3e..d22c08e719 100644
--- a/packages/app/tests/views/BlocksView.spec.ts
+++ b/packages/app/tests/views/BlocksView.spec.ts
@@ -13,6 +13,8 @@ vi.mock("vue-router", () => ({
   useRoute: () => ({
     query: routeQueryMock(),
   }),
+  createWebHistory: () => vi.fn(),
+  createRouter: () => vi.fn(),
 }));
 
 import enUS from "@/locales/en.json";
diff --git a/packages/app/tests/views/ContractVerificationView.spec.ts b/packages/app/tests/views/ContractVerificationView.spec.ts
index 064dcb4a89..d246bcf11b 100644
--- a/packages/app/tests/views/ContractVerificationView.spec.ts
+++ b/packages/app/tests/views/ContractVerificationView.spec.ts
@@ -25,6 +25,8 @@ vi.mock("vue-router", () => ({
       address: "0x5c221e77624690fff6dd741493d735a17716c26b",
     },
   }),
+  createWebHistory: () => vi.fn(),
+  createRouter: () => vi.fn(),
 }));
 
 vi.mock("ohmyfetch", () => {
diff --git a/packages/app/tests/views/DebuggerView.spec.ts b/packages/app/tests/views/DebuggerView.spec.ts
index de0815ebf6..955ddbad04 100644
--- a/packages/app/tests/views/DebuggerView.spec.ts
+++ b/packages/app/tests/views/DebuggerView.spec.ts
@@ -74,7 +74,10 @@ describe("DebuggerView:", () => {
   vi.mock("vue-router", () => ({
     useRouter: () => vi.fn(),
     useRoute: () => vi.fn(),
+    createWebHistory: () => vi.fn(),
+    createRouter: () => vi.fn(),
   }));
+
   it("has correct title", async () => {
     expect(i18n.global.t(routes.find((e) => e.name === "debugger")?.meta?.title as string)).toBe("zkEVM Debugger");
   });
diff --git a/packages/app/tests/views/HomeView.spec.ts b/packages/app/tests/views/HomeView.spec.ts
index be3fbb269f..7168f27062 100644
--- a/packages/app/tests/views/HomeView.spec.ts
+++ b/packages/app/tests/views/HomeView.spec.ts
@@ -36,6 +36,8 @@ vi.mock("ohmyfetch", () => {
 vi.mock("vue-router", () => ({
   useRouter: () => vi.fn(),
   useRoute: () => vi.fn(),
+  createWebHistory: () => vi.fn(),
+  createRouter: () => vi.fn(),
 }));
 
 vi.mock("@/composables/useToken", () => {
diff --git a/packages/app/tests/views/TransactionView.spec.ts b/packages/app/tests/views/TransactionView.spec.ts
index 823114577c..9276af3c59 100644
--- a/packages/app/tests/views/TransactionView.spec.ts
+++ b/packages/app/tests/views/TransactionView.spec.ts
@@ -35,6 +35,8 @@ vi.mock("vue-router", () => ({
   useRoute: () => ({
     query: {},
   }),
+  createWebHistory: () => vi.fn(),
+  createRouter: () => vi.fn(),
 }));
 
 vi.mock("ohmyfetch", () => {
diff --git a/packages/app/tests/views/TransactionsView.spec.ts b/packages/app/tests/views/TransactionsView.spec.ts
index 98c0d5850d..d243e0a220 100644
--- a/packages/app/tests/views/TransactionsView.spec.ts
+++ b/packages/app/tests/views/TransactionsView.spec.ts
@@ -17,6 +17,8 @@ vi.mock("vue-router", () => ({
   useRoute: () => ({
     query: routeQueryMock(),
   }),
+  createWebHistory: () => vi.fn(),
+  createRouter: () => vi.fn(),
 }));
 
 import $testId from "@/plugins/testId";