Merge branch 'main' into tx-nikola-txfusion-detect-diamond-proxy

.github/workflows/app-e2e.yml

@@ -118,9 +118,9 @@ jobs:
 
       - name: Save artifacts to Git
         if: always()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
-          name: allure-results
+          name: ${{ matrix.tags }}-allure-results
           path: packages/app/allure-results
 
       # - name: Upload test results to Allure reporter
@@ -134,9 +134,9 @@ jobs:
 
       - if: failure()
         name: Save artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
-          name: portal_e2e_${{ github.run_number }}_artifacts
+          name: portal_e2e_${{ github.run_number }}_${{ matrix.tags }}_artifacts
           path: packages/app/tests/e2e/artifacts/*
 
   # publish:

README.md

@@ -63,6 +63,9 @@ npm install
 ### Manually set up env variables
 Make sure you have set up all the necessary env variables. Follow setting up env variables instructions for [Worker](./packages/worker#setting-up-env-variables), [Data Fetcher](./packages/data-fetcher#setting-up-env-variables) and [API](./packages/api#setting-up-env-variables). For the [App](./packages/app) package you might want to edit environment config, see [Environment configs](./packages/app#environment-configs).
 
+### Configure custom base token
+For networks with a custom base token, make sure to configure the base token for both Worker and API services by following the corresponding instructions [here](./packages/worker/README.md#custom-base-token-configuration) and [here](./packages/api/README.md#custom-base-token-configuration).
+
 ### Build env variables based on your [zksync-era](https://github.com/matter-labs/zksync-era) local repo setup
 Make sure you have [zksync-era](https://github.com/matter-labs/zksync-era) repo set up locally. You must have your environment variables files present in the [zksync-era](https://github.com/matter-labs/zksync-era) repo at `/etc/env/*.env` for the build envs script to work.
 

packages/app/src/components/batches/Table.vue

@@ -34,7 +34,7 @@
       </TableBodyColumn>
       <TableBodyColumn v-if="columns.includes('age')" :data-heading="t('batches.table.age')">
         <CopyButton :value="utcStringFromISOString(item.timestamp)">
-          <TimeField :value="item.timestamp" :show-exact-date="false" />
+          <TimeField :value="item.timestamp" :format="TimeFormat.TIME_AGO" />
         </CopyButton>
       </TableBodyColumn>
     </template>
@@ -65,6 +65,7 @@ import ZkSyncIcon from "@/components/icons/ZkSync.vue";
 import type { BatchListItem } from "@/composables/useBatches";
 import type { PropType } from "vue";
 
+import { TimeFormat } from "@/types";
 import { utcStringFromISOString } from "@/utils/helpers";
 
 const { t, te } = useI18n();

packages/app/src/components/blocks/Table.vue

@@ -49,7 +49,7 @@
       </TableBodyColumn>
       <TableBodyColumn :data-heading="t('blocks.table.age')">
         <CopyButton :value="item.timestamp">
-          <TimeField :value="item.timestamp" :show-exact-date="false" />
+          <TimeField :value="item.timestamp" :format="TimeFormat.TIME_AGO" />
         </CopyButton>
       </TableBodyColumn>
     </template>
@@ -79,6 +79,8 @@ import TimeField from "@/components/common/table/fields/TimeField.vue";
 import type { BlockListItem } from "@/composables/useBlock";
 import type { PropType } from "vue";
 
+import { TimeFormat } from "@/types";
+
 const { t } = useI18n();
 
 defineProps({

packages/app/src/components/common/table/TableHeadColumn.vue

@@ -8,6 +8,6 @@
 
 <style>
 .table-head-col {
-  @apply whitespace-nowrap px-2 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-700 first:pl-6 last:pr-6;
+  @apply whitespace-nowrap px-2 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-700 first:pl-6 last:pr-6;
 }
 </style>

packages/app/src/components/common/table/fields/TimeField.vue

@@ -1,18 +1,20 @@
 <template>
   <div class="info-field-time" :title="utcStringFromISOString(isoString)">
-    <span class="time-ago">
-      {{ timeAgo }}
-    </span>
-    <span v-if="showExactDate" class="full-date">{{ localDateFromISOString(isoString) }}</span>
+    <span class="time-ago" v-if="format === TimeFormat.FULL">{{ localDateFromISOString(isoString) }}</span>
+    <span class="time-ago" v-else>{{ timeAgo }}</span>
+    <span v-if="format === TimeFormat.TIME_AGO_AND_FULL" class="full-date">{{
+      localDateFromISOString(isoString)
+    }}</span>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+import { computed, type PropType, ref } from "vue";
 import { useI18n } from "vue-i18n";
 
 import { useTimeAgo } from "@vueuse/core";
 
+import { TimeFormat } from "@/types";
 import { ISOStringFromUnixTimestamp, localDateFromISOString, utcStringFromISOString } from "@/utils/helpers";
 
 const { t } = useI18n();
@@ -23,9 +25,9 @@ const props = defineProps({
     default: "",
     required: true,
   },
-  showExactDate: {
-    type: Boolean,
-    default: true,
+  format: {
+    type: String as PropType<TimeFormat>,
+    default: TimeFormat.TIME_AGO_AND_FULL,
     required: false,
   },
 });

packages/app/src/components/transactions/Table.vue

@@ -8,8 +8,12 @@
       <TableHeadColumn v-if="columns.includes('method')">
         {{ t("transactions.table.method") }}
       </TableHeadColumn>
-      <TableHeadColumn v-if="columns.includes('age')">
-        {{ t("transactions.table.age") }}
+      <TableHeadColumn
+        v-if="columns.includes('age')"
+        @click="toggleAgeTimestamp()"
+        class="hover:cursor-pointer text-blue-700"
+      >
+        {{ isTimeAgeView ? t("transactions.table.age") : t("transactions.table.dateTimeUTC") }}
       </TableHeadColumn>
       <TableHeadColumn v-if="columns.includes('from')" class="tablet-column-hidden">
         {{ t("transactions.table.from") }}
@@ -71,7 +75,11 @@
         :data-heading="t('transactions.table.age')"
       >
         <CopyButton :value="utcStringFromISOString(item.receivedAt)">
-          <TimeField :value="item.receivedAt" :show-exact-date="false" :data-testid="$testId.timestamp" />
+          <TimeField
+            :value="item.receivedAt"
+            :data-testid="$testId.timestamp"
+            :format="isTimeAgeView ? TimeFormat.TIME_AGO : TimeFormat.FULL"
+          />
         </CopyButton>
       </TableBodyColumn>
       <TableBodyColumn
@@ -237,8 +245,8 @@ import useTransactions, { type TransactionListItem, type TransactionSearchParams
 
 import type { Direction } from "@/components/transactions/TransactionDirectionTableCell.vue";
 import type { AbiFragment } from "@/composables/useAddress";
-import type { NetworkOrigin } from "@/types";
 
+import { type NetworkOrigin, TimeFormat } from "@/types";
 import { isContractDeployerAddress, utcStringFromISOString } from "@/utils/helpers";
 
 const { currentNetwork } = useContext();
@@ -364,6 +372,12 @@ const isHighRowsSize = computed(() => props.columns.includes("fee"));
 function getDirection(item: TransactionListItem): Direction {
   return item.from === item.to ? "self" : item.to !== props.searchParams?.address ? "out" : "in";
 }
+
+const isTimeAgeView = ref(true);
+
+const toggleAgeTimestamp = () => {
+  isTimeAgeView.value = !isTimeAgeView.value;
+};
 </script>
 
 <style lang="scss">

packages/app/src/components/transfers/Table.vue

@@ -42,7 +42,7 @@
 
       <TableBodyColumn :data-heading="t('transfers.table.age')">
         <CopyButton :value="utcStringFromISOString(item.timestamp)">
-          <TimeField :data-testid="$testId.timestamp" :value="item.timestamp" :show-exact-date="false" />
+          <TimeField :data-testid="$testId.timestamp" :value="item.timestamp" :format="TimeFormat.TIME_AGO" />
         </CopyButton>
       </TableBodyColumn>
       <TableBodyColumn :data-heading="t('transfers.table.type')" class="transfer-type">
@@ -156,6 +156,7 @@ import TransactionNetworkSquareBlock from "@/components/transactions/Transaction
 
 import useTransfers, { type Transfer } from "@/composables/useTransfers";
 
+import { TimeFormat } from "@/types";
 import { utcStringFromISOString } from "@/utils/helpers";
 
 const { t } = useI18n();

packages/app/src/locales/en.json

@@ -143,6 +143,7 @@
             "transferMethodName": "Transfer",
             "timestamp": "Timestamp",
             "age": "Age",
+            "dateTimeUTC": "Date Time (UTC)",
             "tokenAddress": "Token address",
             "tokenName": "Token name",
             "tokenSymbol": "Token symbol",

packages/app/src/types.ts

@@ -59,3 +59,9 @@ export type ContractVerificationData = {
 };
 
 export type ContractVerificationStatus = "successful" | "failed" | "in_progress" | "queued";
+
+export enum TimeFormat {
+  TIME_AGO = "time_ago",
+  FULL = "full",
+  TIME_AGO_AND_FULL = "time_ago_and_full",
+}

packages/app/tests/components/common/table/fields/TimeField.spec.ts

@@ -8,6 +8,8 @@ import TimeField from "@/components/common/table/fields/TimeField.vue";
 
 import enUS from "@/locales/en.json";
 
+import { TimeFormat } from "@/types";
+
 describe("TimeField", () => {
   const i18n = createI18n({
     locale: "en",
@@ -31,7 +33,7 @@ describe("TimeField", () => {
     expect(container.querySelector(".info-field-time")?.getAttribute("title")).toBe("2022-12-02 09:26:06 UTC");
     unmount();
   });
-  it("renders full date when showExactDate is true by default", () => {
+  it("renders full date when time format is not specified", () => {
     const { container, unmount } = render(TimeField, {
       global,
       props: {
@@ -42,12 +44,12 @@ describe("TimeField", () => {
     expect(container.querySelector(".full-date")?.textContent).toBe("2022-12-02 12:26");
     unmount();
   });
-  it("doesn't render full date when showExactDate is false", () => {
+  it("doesn't render full date when time format is TIME_AGO", () => {
     const { container, unmount } = render(TimeField, {
       global,
       props: {
         value: "2022-12-02T09:26:06.605Z",
-        showExactDate: false,
+        format: TimeFormat.TIME_AGO,
       },
     });
 

packages/worker/.env.example

@@ -45,6 +45,12 @@ ENABLE_TOKEN_OFFCHAIN_DATA_SAVER=false
 UPDATE_TOKEN_OFFCHAIN_DATA_INTERVAL=86400000
 SELECTED_TOKEN_OFFCHAIN_DATA_PROVIDER=coingecko
 
+BASE_TOKEN_SYMBOL=ETH
+BASE_TOKEN_DECIMALS=18
+BASE_TOKEN_L1_ADDRESS=0x0000000000000000000000000000000000000000
+BASE_TOKEN_ICON_URL=https://assets.coingecko.com/coins/images/279/large/ethereum.png?1698873266
+BASE_TOKEN_NAME=Ether
+
 FROM_BLOCK=0
 TO_BLOCK=
 

packages/worker/README.md

@@ -31,6 +31,36 @@ The service doesn't create database automatically, you can create database by ru
 $ npm run db:create
 ```
 
+## Custom base token configuration
+For networks with a custom base token, there are a number of environment variables used to configure custom base token:
+- `BASE_TOKEN_L1_ADDRESS` - example: `0xB44A106F271944fEc1c27cd60b8D6C8792df86d8`. Base token L1 address can be fetched using the RPC call:
+  ```
+  curl http://localhost:3050 \
+  -X POST \
+  -H "Content-Type: application/json" \
+  --data '{"method":"zks_getBaseTokenL1Address","params":[],"id":1,"jsonrpc":"2.0"}'
+  ```
+  or SDK:
+  ```
+  import { Provider } from "zksync-ethers";
+
+  async function main() {
+      const l2provider = new Provider("http://localhost:3050");
+      const baseTokenAddress = await l2provider.getBaseTokenContractAddress();
+      console.log('baseTokenAddress', baseTokenAddress);
+  }
+  main()
+      .then()
+      .catch((error) => {
+          console.error(error);
+          process.exitCode = 1;
+      });
+  ```
+- `BASE_TOKEN_SYMBOL` - base token symbol, e.g.: `ZK`
+- `BASE_TOKEN_NAME` - base token name, e.g.: `ZK`
+- `BASE_TOKEN_DECIMALS` - base token decimals, e.g.: `18`
+- `BASE_TOKEN_ICON_URL` - base token icon url, e.g.: `https://assets.coingecko.com/coins/images/279/large/ethereum.png?1698873266`
+
 ## Running the app
 
 ```bash

packages/worker/src/config.spec.ts

@@ -52,6 +52,13 @@ describe("config", () => {
         coingecko: {
           isProPlan: false,
         },
+        baseToken: {
+          symbol: "ETH",
+          decimals: 18,
+          l1Address: "0x0000000000000000000000000000000000000000",
+          iconUrl: "https://assets.coingecko.com/coins/images/279/large/ethereum.png?1698873266",
+          name: "Ether",
+        },
       },
       metrics: {
         collectDbConnectionPoolMetricsInterval: 10000,
@@ -118,6 +125,13 @@ describe("config", () => {
         coingecko: {
           isProPlan: false,
         },
+        baseToken: {
+          symbol: "ETH",
+          decimals: 18,
+          l1Address: "0x0000000000000000000000000000000000000000",
+          iconUrl: "https://assets.coingecko.com/coins/images/279/large/ethereum.png?1698873266",
+          name: "Ether",
+        },
       },
       metrics: {
         collectDbConnectionPoolMetricsInterval: 10000,

packages/worker/src/config.ts

@@ -35,6 +35,11 @@ export default () => {
     CHECK_MISSING_BLOCKS_METRIC_INTERVAL,
     RPC_HEALTH_CHECK_TIMEOUT_MS,
     DB_HEALTH_CHECK_TIMEOUT_MS,
+    BASE_TOKEN_SYMBOL,
+    BASE_TOKEN_DECIMALS,
+    BASE_TOKEN_L1_ADDRESS,
+    BASE_TOKEN_ICON_URL,
+    BASE_TOKEN_NAME,
   } = process.env;
 
   return {
@@ -90,6 +95,13 @@ export default () => {
         isProPlan: COINGECKO_IS_PRO_PLAN === "true",
         apiKey: COINGECKO_API_KEY,
       },
+      baseToken: {
+        symbol: BASE_TOKEN_SYMBOL || "ETH",
+        decimals: parseInt(BASE_TOKEN_DECIMALS, 10) || 18,
+        l1Address: BASE_TOKEN_L1_ADDRESS || "0x0000000000000000000000000000000000000000",
+        iconUrl: BASE_TOKEN_ICON_URL || "https://assets.coingecko.com/coins/images/279/large/ethereum.png?1698873266",
+        name: BASE_TOKEN_NAME || "Ether",
+      },
     },
     metrics: {
       collectDbConnectionPoolMetricsInterval: parseInt(COLLECT_DB_CONNECTION_POOL_METRICS_INTERVAL, 10) || 10000,