feat: add view all buttons on landing page and fix mobile styling (#323)

# 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

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;

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",

packages/app/src/locales/uk.json

@@ -143,7 +143,8 @@
         "loadingInfoFailed": "Не вдалося завантажити інформацію про транзакцію",
         "transactionNotFound": "Транзакцію не знайдено",
         "transactionInfo": "Інформація про транзакцію",
-        "tryRequestAgain": "Спробуйте знову"
+        "tryRequestAgain": "Спробуйте знову",
+        "viewAll": "Переглянути всі транзакції"
     },
     "header": {
         "nav": {

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,16 +65,21 @@
 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";
 
 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 {

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", () => {

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", () => {

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";

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", () => {

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";

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", () => {

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");
   });

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", () => {

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", () => {

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";