diff --git a/packages/app/src/components/TokenIconLabel.vue b/packages/app/src/components/TokenIconLabel.vue
index c5cffb858..75109fe29 100644
--- a/packages/app/src/components/TokenIconLabel.vue
+++ b/packages/app/src/components/TokenIconLabel.vue
@@ -25,14 +25,6 @@
{{ name }}
-
-
- {{ t("tokensView.table.bridged.title") }}
-
-
- {{ t("tokensView.table.native.title") }}
-
-
@@ -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
index 07e9b6eea..be2dbc1cd 100644
--- a/packages/app/src/components/token/TokenListTable.vue
+++ b/packages/app/src/components/token/TokenListTable.vue
@@ -2,6 +2,7 @@
{{ t("tokensView.table.tokenName") }}
+ {{ t("tokensView.table.type") }}
{{ t("tokensView.table.price") }}
{{ t("tokensView.table.tokenAddress") }}
@@ -13,9 +14,18 @@
:address="item.l2Address"
:name="item.name"
:icon-url="item.iconURL"
- :bridged="item.l1Address ? true : false"
/>
+
+
+ {{ t("tokensView.table.bridged.title") }}
+ {{ t("tokensView.table.bridged.tooltip") }}
+
+
+ {{ t("tokensView.table.native.title") }}
+ {{ t("tokensView.table.native.tooltip") }}
+
+
@@ -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;
+ }
}
diff --git a/packages/app/src/locales/en.json b/packages/app/src/locales/en.json
index 70b9cbfac..ce5f17c9e 100644
--- 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
index 73d319c86..ef8dda64a 100644
--- 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
index d3036c3a6..7f436cb0f 100644
--- 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");
});
});