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 @@ @@ -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"); }); });