Merge branch 'main' into QA-441-make-allure-reports-public

packages/app/src/App.vue

@@ -3,7 +3,7 @@
     <the-header :class="$route?.name" />
     <div class="container-app">
       <NetworkDeprecated v-if="!currentNetwork.maintenance && currentNetwork.name === 'goerli'" />
-      <IssuesBanner v-if="!currentNetwork.maintenance && currentNetwork.name === 'mainnet'" />
+      <IndexerDelayAlert v-if="!currentNetwork.maintenance && currentNetwork.name === 'mainnet'" />
       <MaintenanceView v-if="currentNetwork.maintenance" />
       <router-view v-else />
     </div>
@@ -14,7 +14,7 @@
 <script setup lang="ts">
 import { useTitle } from "@vueuse/core";
 
-import IssuesBanner from "@/components/IssuesBanner.vue";
+import IndexerDelayAlert from "@/components/IndexerDelayAlert.vue";
 import NetworkDeprecated from "@/components/NetworkDeprecated.vue";
 import TheFooter from "@/components/TheFooter.vue";
 import TheHeader from "@/components/header/TheHeader.vue";

packages/app/src/components/IndexerDelayAlert.vue

@@ -0,0 +1,68 @@
+<template>
+  <SystemAlert v-if="isIndexerDelayed">
+    <span
+      v-if="latestTPS > MIN_TPS_TO_SHOW_HEAVY_LOAD_ALERT"
+      v-html="t('systemAlert.indexerDelayedDueToHeavyLoad', { indexerDelayInHours })"
+    />
+    <span v-else v-html="t('systemAlert.indexerDelayed', { indexerDelayInHours })" />
+  </SystemAlert>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+import SystemAlert from "@/components/common/SystemAlert.vue";
+
+import useBlocks from "@/composables/useBlocks";
+import useContext from "@/composables/useContext";
+
+import type { types } from "zksync-web3";
+
+const { t } = useI18n();
+const context = useContext();
+
+const MIN_DELAY_TO_SHOW_ALERT = 900_000; // 15 mins
+const MIN_TPS_TO_SHOW_HEAVY_LOAD_ALERT = 70;
+
+const provider = context.getL2Provider();
+const latestBlock = ref<types.Block | null>(null);
+(async () => {
+  const block = await provider.getBlock("latest");
+  latestBlock.value = block;
+})();
+
+const { load: getLatestIndexedBlocks, data: latestIndexedBlocks } = useBlocks(context);
+getLatestIndexedBlocks(1);
+
+const indexerDelay = computed(() => {
+  if (!latestBlock.value?.number || !latestIndexedBlocks.value?.length) {
+    return 0;
+  }
+  const latestBlockDate = new Date(latestBlock.value.timestamp * 1000);
+  const latestIndexedBlockDate = new Date(latestIndexedBlocks.value[0].timestamp);
+  const delay = latestBlockDate.getTime() - latestIndexedBlockDate.getTime();
+  return delay;
+});
+
+const indexerDelayInHours = computed(() => (indexerDelay.value / (1000 * 60 * 60)).toFixed(1));
+
+const isIndexerDelayed = computed(() => {
+  if (indexerDelay.value > MIN_DELAY_TO_SHOW_ALERT) {
+    return true;
+  }
+  return false;
+});
+
+const latestTPS = computed(() => {
+  if (!latestIndexedBlocks.value?.length) {
+    return 0;
+  }
+  const numberOfTransactions = latestIndexedBlocks.value.reduce((acc, block) => acc + block.size, 0);
+  const latestBlockDate = new Date(latestIndexedBlocks.value[0].timestamp);
+  const firstBlockDate = new Date(latestIndexedBlocks.value[latestIndexedBlocks.value.length - 1].timestamp);
+  const numberOfSeconds = Math.floor((latestBlockDate.getTime() - firstBlockDate.getTime()) / 1000);
+  const tps = numberOfSeconds ? numberOfTransactions / numberOfSeconds : 0;
+  return tps;
+});
+</script>

packages/app/src/components/NetworkDeprecated.vue

@@ -1,26 +1,20 @@
 <template v-if="newNetworkUrl">
-  <div class="deprecated-alert">
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="M21.0907 18.7005C20.8457 19.1905 20.3449 19.5 19.7971 19.5H4.20288C3.65506 19.5 3.15426 19.1905 2.90927 18.7005C2.69455 18.2711 2.70694 17.7631 2.94232 17.3446L10.9455 3.11671C11.1598 2.73575 11.5629 2.5 12 2.5C12.4371 2.5 12.8402 2.73575 13.0545 3.11671L21.0577 17.3446C21.2931 17.7631 21.3054 18.2711 21.0907 18.7005Z"
-        stroke="#FFC81A"
-      />
-      <circle cx="12" cy="16" r="1" fill="#FFC81A" />
-      <path d="M12 14V6" stroke="#FFC81A" />
-    </svg>
+  <SystemAlert>
     <span
       >We are ending our support of Goerli testnet. Please <a :href="newNetworkUrl!">use Sepolia</a>. For more info see
       <a target="_blank" href="https://github.com/zkSync-Community-Hub/zkync-developers/discussions/228"
         >this announcement</a
       >.</span
     >
-  </div>
+  </SystemAlert>
 </template>
 
 <script lang="ts" setup>
 import { computed } from "vue";
 import { useRoute } from "vue-router";
 
+import SystemAlert from "@/components/common/SystemAlert.vue";
+
 import useContext from "@/composables/useContext";
 
 import { getWindowLocation } from "@/utils/helpers";
@@ -44,15 +38,7 @@ const newNetworkUrl = computed(() => {
 </script>
 
 <style scoped lang="scss">
-.deprecated-alert {
-  @apply flex text-white rounded-2xl border border-amber-400/50 bg-amber-400/10 mb-6 py-3 px-4;
-
-  svg {
-    @apply mr-2 shrink-0;
-  }
-
-  a {
-    @apply text-inherit;
-  }
+a {
+  @apply text-inherit;
 }
 </style>

packages/app/src/components/common/SystemAlert.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="system-alert">
+    <IconError class="icon" color="#FFC81A" />
+    <span class="system-alert-body">
+      <slot />
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconError from "@/components/icons/IconError.vue";
+</script>
+
+<style scoped lang="scss">
+.system-alert {
+  @apply flex items-center text-white rounded-2xl border border-amber-400/50 bg-amber-400/10 mb-6 py-3 px-4;
+
+  .system-alert-body {
+    @apply ml-3 w-full;
+  }
+}
+</style>

packages/app/src/components/header/TheHeader.vue

@@ -305,10 +305,6 @@ const hasContent = computed(() => {
   .hero-banner-container {
     @apply absolute left-0 top-full flex h-64 w-full items-end justify-end overflow-hidden bg-primary-900;
 
-    &.mainnet {
-      @apply h-[27rem] md:h-[23rem] lg:h-[20rem];
-    }
-
     &.goerli {
       @apply h-[25rem] md:h-[23rem] lg:h-[19rem];
     }
@@ -320,10 +316,6 @@ const hasContent = computed(() => {
   .home-banner {
     @apply h-80;
 
-    &.mainnet {
-      @apply h-[32rem] md:h-[28rem] lg:h-[25rem];
-    }
-
     &.goerli {
       @apply h-[30rem] md:h-[27rem] lg:h-[24rem];
     }

packages/app/src/locales/en.json

@@ -721,5 +721,9 @@
                 "callData": "calldata"
             }
         }
+    },
+    "systemAlert": {
+        "indexerDelayed": "Transaction indexing is {indexerDelayInHours} hours behind. Transactions are being processed normally and will gradually show up. You can also use other <a href=\"https://zksync.io/explore/\" style=\"color: inherit\">explorers</a> meanwhile.",
+        "indexerDelayedDueToHeavyLoad": "The network is under a heavy load at the moment and transaction indexing on the explorer is {indexerDelayInHours} hours behind. Transactions are being processed normally and will gradually show up. You can also use other <a href=\"https://zksync.io/explore/\" style=\"color: inherit\">explorers</a> meanwhile."
     }
 }

packages/app/src/locales/uk.json

@@ -438,5 +438,9 @@
                 "callData": "дані виклику"
             }
         }
+    },
+    "systemAlert": {
+        "indexerDelayed": "Індексація транзакцій відстає на {indexerDelayInHours} годин. Транзакції будуть поступово оброблені та відображені. Ви також можете скористатися іншими <a href=\"https://zksync.io/explore/\" style=\"color: inherit\">блок експлорерами</a> наразі.",
+        "indexerDelayedDueToHeavyLoad": "Мережа наразі перебуває під великим навантаженням, індексація транзакцій відстає на {indexerDelayInHours} годин. Транзакції будуть поступово оброблені та відображені. Ви також можете скористатися іншими <a href=\"https://zksync.io/explore/\" style=\"color: inherit\">блок експлорерами</a> наразі."
     }
 }

packages/app/tests/e2e/src/steps/blockexplorer.steps.ts

@@ -377,6 +377,13 @@ Then("Clipboard contains {string} value", async function (this: ICustomWorld, te
   await expect(result).toBe(text);
 });
 
+Then("Clipboard includes {string} value", async function (this: ICustomWorld, text: string) {
+  helper = new Helper(this);
+  result = await helper.getClipboardValue();
+
+  await expect(result.includes(text)).toBe(true);
+});
+
 Then("Clipboard value is not empty", async function (this: ICustomWorld) {
   helper = new Helper(this);
   result = await helper.getClipboardValue();

packages/worker/package.json

@@ -19,7 +19,7 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:cov": "jest --coverage",
-    "test:ci": "echo tests are disabled on ci temporarily",
+    "test:ci": "jest --coverage",
     "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
     "test:e2e": "jest --config ./test/jest-e2e.json",
     "typeorm": "typeorm-ts-node-commonjs",
@@ -42,7 +42,6 @@
     "@willsoto/nestjs-prometheus": "^4.7.0",
     "axios": "^1.4.0",
     "ethers": "^5.7.1",
-    "firebase": "^10.7.1",
     "nest-winston": "^1.7.0",
     "pg": "^8.8.0",
     "prom-client": "^14.1.0",

packages/worker/src/block/block.processor.spec.ts

@@ -21,6 +21,9 @@ describe("BlockProcessor", () => {
   let blockProcessor: BlockProcessor;
   let blockWatcherMock: BlockWatcher;
   let unitOfWorkMock: UnitOfWork;
+  let waitForTransactionExecutionMock: jest.Mock;
+  let commitTransactionMock: jest.Mock;
+  let ensureRollbackIfNotCommittedTransactionMock: jest.Mock;
   let blockchainServiceMock: BlockchainService;
   let transactionProcessorMock: TransactionProcessor;
   let logProcessorMock: LogProcessor;
@@ -110,8 +113,15 @@ describe("BlockProcessor", () => {
   };
 
   beforeEach(async () => {
+    waitForTransactionExecutionMock = jest.fn();
+    commitTransactionMock = jest.fn();
+    ensureRollbackIfNotCommittedTransactionMock = jest.fn();
     unitOfWorkMock = mock<UnitOfWork>({
-      useTransaction: jest.fn().mockImplementation((action: () => Promise<void>) => action()),
+      useTransaction: jest.fn().mockImplementation((action: () => Promise<void>) => ({
+        waitForExecution: waitForTransactionExecutionMock.mockResolvedValue(action()),
+        commit: commitTransactionMock.mockResolvedValue(null),
+        ensureRollbackIfNotCommitted: ensureRollbackIfNotCommittedTransactionMock.mockResolvedValue(null),
+      })),
     });
     blockWatcherMock = mock<BlockWatcher>({
       getNextBlocksToProcess: jest.fn().mockResolvedValue([]),
@@ -492,9 +502,11 @@ describe("BlockProcessor", () => {
               expect(startBlocksBatchDurationMetricMock).toHaveBeenCalledTimes(1);
             });
 
-            it("uses transaction when adding blocks", async () => {
+            it("uses transaction with disabled automatic commit when adding blocks", async () => {
               await blockProcessor.processNextBlocksRange();
               expect(unitOfWorkMock.useTransaction).toHaveBeenCalledTimes(1);
+              expect((unitOfWorkMock.useTransaction as jest.Mock).mock.calls[0][1]).toBe(true);
+              expect(waitForTransactionExecutionMock).toBeCalledTimes(1);
             });
 
             it("starts the duration metric", async () => {
@@ -524,6 +536,11 @@ describe("BlockProcessor", () => {
               );
             });
 
+            it("commits db transactions after execution", async () => {
+              await blockProcessor.processNextBlocksRange();
+              expect(commitTransactionMock).toBeCalledTimes(1);
+            });
+
             describe("when processing fails with an error", () => {
               beforeEach(() => {
                 jest.spyOn(blockRepositoryMock, "add").mockRejectedValue(new Error("getBlock error"));
@@ -574,6 +591,16 @@ describe("BlockProcessor", () => {
                   expect(balanceServiceMock.clearTrackedState).toHaveBeenCalledTimes(1);
                 }
               });
+
+              it("does not commit db transactions", async () => {
+                await Promise.allSettled([blockProcessor.processNextBlocksRange()]);
+                expect(commitTransactionMock).not.toBeCalled();
+              });
+
+              it("ensures all the db transactions for a given batch of blocks are reverted if not committed", async () => {
+                await Promise.allSettled([blockProcessor.processNextBlocksRange()]);
+                expect(ensureRollbackIfNotCommittedTransactionMock).toBeCalledTimes(1);
+              });
             });
 
             describe("when block does not contain transactions", () => {

packages/worker/src/blocksRevert/blocksRevert.service.spec.ts

@@ -17,15 +17,21 @@ describe("BlocksRevertService", () => {
   let blockRepositoryMock: BlockRepository;
   let counterServiceMock: CounterService;
   let unitOfWorkMock: UnitOfWork;
+  let waitForTransactionExecutionMock: jest.Mock;
   let revertDurationMetricMock: jest.Mock;
   let stopRevertDurationMetricMock: jest.Mock;
 
   let revertDetectMetricMock: jest.Mock;
   let stopRevertDetectMetricMock: jest.Mock;
 
   beforeEach(async () => {
+    waitForTransactionExecutionMock = jest.fn();
     unitOfWorkMock = mock<UnitOfWork>({
-      useTransaction: jest.fn().mockImplementation((action: () => Promise<void>) => action()),
+      useTransaction: jest.fn().mockImplementation((action: () => Promise<void>) => ({
+        waitForExecution: waitForTransactionExecutionMock.mockResolvedValue(action()),
+        commit: jest.fn().mockResolvedValue(null),
+        ensureRollbackIfNotCommitted: jest.fn().mockResolvedValue(null),
+      })),
     });
     blockchainServiceMock = mock<BlockchainService>({
       getL1BatchDetails: jest.fn().mockResolvedValue(null),