fix: add token type to the table column

matter-labs · Jan 30, 2025 · 9d0743d · 9d0743d
1 parent f36000f
commit 9d0743d
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 23 deletions.
diff --git a/packages/app/src/components/TokenIconLabel.vue b/packages/app/src/components/TokenIconLabel.vue
@@ -25,14 +25,6 @@
         <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>
@@ -44,7 +36,6 @@ 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";
 
@@ -77,10 +68,6 @@ const props = defineProps({
     type: String,
     default: "",
   },
-  bridged: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const imgSource = computed(() => {

diff --git a/packages/app/src/components/token/TokenListTable.vue b/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>
@@ -13,9 +14,18 @@
           :address="item.l2Address"
           :name="item.name"
           :icon-url="item.iconURL"
-          :bridged="item.l1Address ? true : false"
         />
       </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>
@@ -72,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";
@@ -121,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>
diff --git a/packages/app/src/locales/en.json b/packages/app/src/locales/en.json
@@ -589,11 +589,12 @@
         "heading": "Tokens",
         "offChainDataPoweredBy": "Off-chain data powered by",
         "table": {
+            "type": "Token Type",
             "tokenName": "Token Name",
             "price": "Price",
             "tokenAddress": "Token Address",
             "bridged": {
-                "title": "Default bridge",
+                "title": "Bridged",
                 "tooltip": "This token is bridged from L1 to ZKsync Era"
             },
             "native": {

diff --git a/packages/app/src/locales/uk.json b/packages/app/src/locales/uk.json
@@ -348,6 +348,7 @@
         "heading": "Top токени",
         "offChainDataPoweredBy": "Off-chain дані взяті з",
         "table": {
+            "type": "Tокен Тип",
             "tokenName": "Назва Токена",
             "price": "Ціна",
             "tokenAddress": "Адреса Токена",

diff --git a/packages/app/tests/components/token/TokenListTable.spec.ts b/packages/app/tests/components/token/TokenListTable.spec.ts
@@ -71,13 +71,13 @@ 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[0].find(".verified-badge").text()).toBe("Default bridge");
-    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 () => {
@@ -107,12 +107,12 @@ 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[0].find(".verified-badge").text()).toBe("L2-native");
-    expect(tr0Arr[1].text()).toBe("$150.00");
-    expect(tr0Arr[2].text()).toBe("L20xEeeeeEeeeEeE...EEeE");
+    expect(tr0Arr[1].text()).toBe("L2-native");
+    expect(tr0Arr[2].text()).toBe("$150.00");
+    expect(tr0Arr[3].text()).toBe("L20xEeeeeEeeeEeE...EEeE");
   });
 });