From f36000fac427a832ce0b85b0582a7609dd629180 Mon Sep 17 00:00:00 2001
From: Marko Arambasic <makiarambasic@gmail.com>
Date: Mon, 16 Dec 2024 15:49:53 +0100
Subject: [PATCH] feat: add lables for bridged and native tokens

---
 .../app/src/components/TokenIconLabel.vue     | 33 +++++++++++++---
 .../src/components/token/TokenListTable.vue   |  1 +
 packages/app/src/locales/en.json              | 10 ++++-
 packages/app/src/locales/uk.json              | 10 ++++-
 .../components/token/TokenListTable.spec.ts   | 39 ++++++++++++++++++-
 5 files changed, 84 insertions(+), 9 deletions(-)

diff --git a/packages/app/src/components/TokenIconLabel.vue b/packages/app/src/components/TokenIconLabel.vue
index 39675f1fd0..c5cffb8584 100644
--- a/packages/app/src/components/TokenIconLabel.vue
+++ b/packages/app/src/components/TokenIconLabel.vue
@@ -17,12 +17,22 @@
         />
       </div>
     </AddressLink>
-    <div class="token-info" v-if="name && symbol">
-      <div class="token-symbol">
-        {{ symbol }}
-      </div>
-      <div class="token-name">
-        {{ name }}
+    <div class="token-info-container">
+      <div class="token-info" v-if="name && symbol">
+        <div class="token-symbol">
+          {{ symbol }}
+        </div>
+        <div class="token-name">
+          {{ name }}
+        </div>
+        <div style="display: flex; gap: 0.5rem">
+          <Badge v-if="bridged" color="primary" class="verified-badge" :tooltip="t('tokensView.table.bridged.tooltip')">
+            {{ t("tokensView.table.bridged.title") }}
+          </Badge>
+          <Badge v-else color="progress" class="verified-badge" :tooltip="t('tokensView.table.native.tooltip')">
+            {{ t("tokensView.table.native.title") }}
+          </Badge>
+        </div>
       </div>
     </div>
   </div>
@@ -34,6 +44,7 @@ import { useI18n } from "vue-i18n";
 import { useImage } from "@vueuse/core";
 
 import AddressLink from "@/components/AddressLink.vue";
+import Badge from "@/components/common/Badge.vue";
 
 import type { Hash } from "@/types";
 
@@ -66,6 +77,10 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  bridged: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const imgSource = computed(() => {
@@ -115,6 +130,12 @@ const { isReady: isImageLoaded } = useImage({ src: imgSource.value });
       }
     }
   }
+  .token-info-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+  }
   .token-info {
     .token-symbol {
       @apply text-neutral-600;
diff --git a/packages/app/src/components/token/TokenListTable.vue b/packages/app/src/components/token/TokenListTable.vue
index 7e2475aa04..07e9b6eead 100644
--- a/packages/app/src/components/token/TokenListTable.vue
+++ b/packages/app/src/components/token/TokenListTable.vue
@@ -13,6 +13,7 @@
           :address="item.l2Address"
           :name="item.name"
           :icon-url="item.iconURL"
+          :bridged="item.l1Address ? true : false"
         />
       </TableBodyColumn>
       <TableBodyColumn :data-heading="t('tokensView.table.price')">
diff --git a/packages/app/src/locales/en.json b/packages/app/src/locales/en.json
index b70c6f0998..70b9cbfac1 100644
--- a/packages/app/src/locales/en.json
+++ b/packages/app/src/locales/en.json
@@ -591,7 +591,15 @@
         "table": {
             "tokenName": "Token Name",
             "price": "Price",
-            "tokenAddress": "Token Address"
+            "tokenAddress": "Token Address",
+            "bridged": {
+                "title": "Default bridge",
+                "tooltip": "This token is bridged from L1 to ZKsync Era"
+            },
+            "native": {
+                "title": "L2-native",
+                "tooltip": "This token is native to ZKsync Era"
+            }
         }
     },
     "pageError": {
diff --git a/packages/app/src/locales/uk.json b/packages/app/src/locales/uk.json
index d12592ab63..73d319c86b 100644
--- a/packages/app/src/locales/uk.json
+++ b/packages/app/src/locales/uk.json
@@ -350,7 +350,15 @@
         "table": {
             "tokenName": "Назва Токена",
             "price": "Ціна",
-            "tokenAddress": "Адреса Токена"
+            "tokenAddress": "Адреса Токена",
+            "bridged": {
+                "title": "Бридж",
+                "tooltip": "Цей токен перенесений з L1 до ZKsync Era"
+            },
+            "native": {
+                "title": "L2-нативний",
+                "tooltip": "Цей токен є нативним для ZKsync Era"
+            }
         }
     },
     "timeMessages": {
diff --git a/packages/app/tests/components/token/TokenListTable.spec.ts b/packages/app/tests/components/token/TokenListTable.spec.ts
index 9cd397ef5e..d3036c3a6b 100644
--- a/packages/app/tests/components/token/TokenListTable.spec.ts
+++ b/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: {
@@ -75,6 +75,43 @@ describe("TokenListTable:", () => {
     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[0].find(".verified-badge").text()).toBe("Default bridge");
+    expect(tr0Arr[1].text()).toBe("$150.00");
+    expect(tr0Arr[2].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(3);
+    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[0].find(".verified-badge").text()).toBe("L2-native");
     expect(tr0Arr[1].text()).toBe("$150.00");
     expect(tr0Arr[2].text()).toBe("L20xEeeeeEeeeEeE...EEeE");
   });