feat: add lables for bridged and native tokens

packages/app/src/components/token/TokenListTable.vue

@@ -2,6 +2,7 @@
   <Table :data-testid="$testId.tokensTable" :loading="loading" :items="tokens" ref="table">
     <template #table-head>
       <table-head-column>{{ t("tokensView.table.tokenName") }}</table-head-column>
+      <table-head-column>{{ t("tokensView.table.type") }}</table-head-column>
       <table-head-column>{{ t("tokensView.table.price") }}</table-head-column>
       <table-head-column>{{ t("tokensView.table.tokenAddress") }}</table-head-column>
     </template>
@@ -15,6 +16,16 @@
           :icon-url="item.iconURL"
         />
       </TableBodyColumn>
+      <TableBodyColumn :data-heading="t('tokensView.table.bridged')">
+        <div v-if="item.l1Address" class="tokens-type">
+          <span>{{ t("tokensView.table.bridged.title") }}</span>
+          <InfoTooltip>{{ t("tokensView.table.bridged.tooltip") }}</InfoTooltip>
+        </div>
+        <div v-else class="tokens-type">
+          <span>{{ t("tokensView.table.native.title") }}</span>
+          <InfoTooltip>{{ t("tokensView.table.native.tooltip") }}</InfoTooltip>
+        </div>
+      </TableBodyColumn>
       <TableBodyColumn :data-heading="t('tokensView.table.price')">
         <TokenPrice :address="item.l2Address" />
       </TableBodyColumn>
@@ -71,6 +82,7 @@ import AddressLink from "@/components/AddressLink.vue";
 import TokenIconLabel from "@/components/TokenIconLabel.vue";
 import CopyButton from "@/components/common/CopyButton.vue";
 import { shortenFitText } from "@/components/common/HashLabel.vue";
+import InfoTooltip from "@/components/common/InfoTooltip.vue";
 import ContentLoader from "@/components/common/loaders/ContentLoader.vue";
 import Table from "@/components/common/table/Table.vue";
 import TableBodyColumn from "@/components/common/table/TableBodyColumn.vue";
@@ -120,5 +132,8 @@ watch(width, () => {
   .tokens-not-found {
     @apply px-1.5 py-2 text-gray-700;
   }
+  .tokens-type {
+    @apply flex gap-x-1;
+  }
 }
 </style>

packages/app/src/locales/en.json

@@ -589,9 +589,18 @@
         "heading": "Tokens",
         "offChainDataPoweredBy": "Off-chain data powered by",
         "table": {
+            "type": "Token Type",
             "tokenName": "Token Name",
             "price": "Price",
-            "tokenAddress": "Token Address"
+            "tokenAddress": "Token Address",
+            "bridged": {
+                "title": "Bridged",
+                "tooltip": "This token is bridged from L1 to ZKsync Era"
+            },
+            "native": {
+                "title": "L2-native",
+                "tooltip": "This token is native to ZKsync Era"
+            }
         }
     },
     "pageError": {

packages/app/src/locales/uk.json

@@ -348,9 +348,18 @@
         "heading": "Top токени",
         "offChainDataPoweredBy": "Off-chain дані взяті з",
         "table": {
+            "type": "Tокен Тип",
             "tokenName": "Назва Токена",
             "price": "Ціна",
-            "tokenAddress": "Адреса Токена"
+            "tokenAddress": "Адреса Токена",
+            "bridged": {
+                "title": "Бридж",
+                "tooltip": "Цей токен перенесений з L1 до ZKsync Era"
+            },
+            "native": {
+                "title": "L2-нативний",
+                "tooltip": "Цей токен є нативним для ZKsync Era"
+            }
         }
     },
     "timeMessages": {

packages/app/tests/components/token/TokenListTable.spec.ts

@@ -43,7 +43,7 @@ describe("TokenListTable:", () => {
       en: enUS,
     },
   });
-  it("renders properly", async () => {
+  it("renders properly with bridged token", async () => {
     const { getTokenInfo } = useToken();
     const wrapper = mount(TokenListTable, {
       props: {
@@ -71,11 +71,48 @@ describe("TokenListTable:", () => {
     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[1].text()).toBe("Bridged");
+    expect(tr0Arr[2].text()).toBe("$150.00");
+    expect(tr0Arr[3].text()).toBe("L20xEeeeeEeeeEeE...EEeE");
+  });
+
+  it("renders properly with native token", async () => {
+    const { getTokenInfo } = useToken();
+    const wrapper = mount(TokenListTable, {
+      props: {
+        tokens: [
+          {
+            decimals: 18,
+            iconURL: "https://icon.com",
+            l2Address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
+            name: "Ether",
+            symbol: "ETH",
+          } as Token,
+        ],
+        loading: false,
+      },
+      global: {
+        stubs: {
+          RouterLink: RouterLinkStub,
+        },
+        plugins: [i18n, $testId],
+      },
+    });
+    await getTokenInfo("0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE");
+    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(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("L2-native");
+    expect(tr0Arr[2].text()).toBe("$150.00");
+    expect(tr0Arr[3].text()).toBe("L20xEeeeeEeeeEeE...EEeE");
   });
 });