diff --git a/packages/app/src/components/token/TokenListTable.vue b/packages/app/src/components/token/TokenListTable.vue index 7e2475aa04..be2dbc1cda 100644 --- a/packages/app/src/components/token/TokenListTable.vue +++ b/packages/app/src/components/token/TokenListTable.vue @@ -2,6 +2,7 @@ @@ -15,6 +16,16 @@ :icon-url="item.iconURL" /> + +
+ {{ t("tokensView.table.bridged.title") }} + {{ t("tokensView.table.bridged.tooltip") }} +
+
+ {{ t("tokensView.table.native.title") }} + {{ t("tokensView.table.native.tooltip") }} +
+
@@ -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; + } } diff --git a/packages/app/src/locales/en.json b/packages/app/src/locales/en.json index b70c6f0998..ce5f17c9eb 100644 --- a/packages/app/src/locales/en.json +++ b/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": { diff --git a/packages/app/src/locales/uk.json b/packages/app/src/locales/uk.json index d12592ab63..ef8dda64a3 100644 --- a/packages/app/src/locales/uk.json +++ b/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": { diff --git a/packages/app/tests/components/token/TokenListTable.spec.ts b/packages/app/tests/components/token/TokenListTable.spec.ts index 9cd397ef5e..7f436cb0f7 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: { @@ -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"); }); });