feat: show token l1 address in tokens list

matter-labs · Feb 25, 2025 · a1df172 · a1df172
1 parent 2f896cc
commit a1df172
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 8 deletions.
diff --git a/packages/app/src/components/token/TokenListTable.vue b/packages/app/src/components/token/TokenListTable.vue
@@ -3,7 +3,8 @@
     <template #table-head>
       <table-head-column>{{ t("tokensView.table.tokenName") }}</table-head-column>
       <table-head-column>{{ t("tokensView.table.price") }}</table-head-column>
-      <table-head-column>{{ t("tokensView.table.tokenAddress") }}</table-head-column>
+      <table-head-column>{{ t("tokensView.table.tokenAddressL2") }}</table-head-column>
+      <table-head-column>{{ t("tokensView.table.tokenAddressL1") }}</table-head-column>
     </template>
     <template #table-row="{ item }: { item: any }">
       <TableBodyColumn :data-heading="t('tokensView.table.tokenName')">
@@ -18,7 +19,7 @@
       <TableBodyColumn :data-heading="t('tokensView.table.price')">
         <TokenPrice :address="item.l2Address" />
       </TableBodyColumn>
-      <TableBodyColumn :data-heading="t('tokensView.table.tokenAddress')">
+      <TableBodyColumn :data-heading="t('tokensView.table.tokenAddressL2')">
         <div class="token-address-container max-w-sm">
           <TransactionNetworkSquareBlock network="L2" />
           <AddressLink
@@ -31,6 +32,20 @@
           <CopyButton :value="item.l2Address" />
         </div>
       </TableBodyColumn>
+      <TableBodyColumn :data-heading="t('tokensView.table.tokenAddressL1')">
+        <div v-if="item.l1Address && item.l1Address !== BASE_TOKEN_L1_ADDRESS" class="token-address-container max-w-sm">
+          <TransactionNetworkSquareBlock network="L1" />
+          <AddressLink
+            :data-testid="$testId.tokenAddress"
+            :address="item.l1Address"
+            network="L1"
+            class="token-address block max-w-sm"
+          >
+            {{ shortenFitText(item.l1Address, "left", 100, subtraction) }}
+          </AddressLink>
+          <CopyButton :value="item.l1Address" />
+        </div>
+      </TableBodyColumn>
     </template>
     <template #loading>
       <tr class="loading-row" v-for="row in 5" :key="row">
@@ -54,6 +69,9 @@
         <TableBodyColumn>
           <ContentLoader class="w-16" />
         </TableBodyColumn>
+        <TableBodyColumn>
+          <ContentLoader class="w-16" />
+        </TableBodyColumn>
         <TableBodyColumn>
           <ContentLoader />
         </TableBodyColumn>
@@ -80,6 +98,8 @@ import TransactionNetworkSquareBlock from "@/components/transactions/Transaction
 
 import type { Token } from "@/composables/useToken";
 
+import { BASE_TOKEN_L1_ADDRESS } from "@/utils/constants";
+
 defineProps({
   tokens: {
     type: Array as PropType<Token[]>,

diff --git a/packages/app/src/locales/en.json b/packages/app/src/locales/en.json
@@ -599,7 +599,8 @@
         "table": {
             "tokenName": "Token Name",
             "price": "Price",
-            "tokenAddress": "Token Address"
+            "tokenAddressL2": "L2 Token address",
+            "tokenAddressL1": "L1 Token address"
         }
     },
     "pageError": {

diff --git a/packages/app/src/locales/uk.json b/packages/app/src/locales/uk.json
@@ -353,7 +353,8 @@
         "table": {
             "tokenName": "Назва Токена",
             "price": "Ціна",
-            "tokenAddress": "Адреса Токена"
+            "tokenAddressL2": "L2 Адреса Токена",
+            "tokenAddressL1": "L1 Адреса Токена L1"
         }
     },
     "timeMessages": {

diff --git a/packages/app/src/utils/constants.ts b/packages/app/src/utils/constants.ts
@@ -1,4 +1,5 @@
 export const BASE_TOKEN_L2_ADDRESS = "0x000000000000000000000000000000000000800A";
+export const BASE_TOKEN_L1_ADDRESS = "0x0000000000000000000000000000000000000000";
 export const DEPLOYER_CONTRACT_ADDRESS = "0x0000000000000000000000000000000000008006";
 export const PROXY_CONTRACT_IMPLEMENTATION_ABI = [
   {

diff --git a/packages/app/tests/components/token/TokenListTable.spec.ts b/packages/app/tests/components/token/TokenListTable.spec.ts
@@ -52,7 +52,7 @@ describe("TokenListTable:", () => {
             decimals: 18,
             iconURL: "https://icon.com",
             l1Address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
-            l2Address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
+            l2Address: "0x5A7d6b2F92C77FAD6CCaBd7EE0624E64907Eaf3E",
             name: "Ether",
             symbol: "ETH",
           } as Token,
@@ -66,16 +66,17 @@ describe("TokenListTable:", () => {
         plugins: [i18n, $testId],
       },
     });
-    await getTokenInfo("0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE");
+    await getTokenInfo("0x5A7d6b2F92C77FAD6CCaBd7EE0624E64907Eaf3E");
     await nextTick();
     const trArr = wrapper.findAll("tbody tr");
     expect(trArr.length).toBe(1);
     const tr0Arr = trArr[0].findAll(".table-body-col");
-    expect(tr0Arr.length).toBe(3);
+    expect(tr0Arr.length).toBe(4);
     expect(tr0Arr[0].find(".token-symbol").text()).toBe("ETH");
     expect(tr0Arr[0].find(".token-name").text()).toBe("Ether");
     expect(tr0Arr[0].find(".token-icon-label img").attributes("src")).toBe("https://icon.com");
     expect(tr0Arr[1].text()).toBe("$150.00");
-    expect(tr0Arr[2].text()).toBe("L20xEeeeeEeeeEeE...EEeE");
+    expect(tr0Arr[2].text()).toBe("L20x5A7d6b2F92C7...af3E");
+    expect(tr0Arr[3].text()).toBe("L10xEee...EEeE");
   });
 });