From f36000fac427a832ce0b85b0582a7609dd629180 Mon Sep 17 00:00:00 2001 From: Marko Arambasic Date: Mon, 16 Dec 2024 15:49:53 +0100 Subject: [PATCH 1/3] 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 @@ /> -
-
- {{ symbol }} -
-
- {{ name }} +
+
+
+ {{ symbol }} +
+
+ {{ name }} +
+
+ + {{ t("tokensView.table.bridged.title") }} + + + {{ t("tokensView.table.native.title") }} + +
@@ -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" /> 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"); }); From 9d0743d0823db986f41c4a10b7455f0e34e44e81 Mon Sep 17 00:00:00 2001 From: Marko Arambasic Date: Thu, 30 Jan 2025 16:35:25 +0100 Subject: [PATCH 2/3] fix: add token type to the table column --- packages/app/src/components/TokenIconLabel.vue | 13 ------------- .../app/src/components/token/TokenListTable.vue | 16 +++++++++++++++- packages/app/src/locales/en.json | 3 ++- packages/app/src/locales/uk.json | 1 + .../components/token/TokenListTable.spec.ts | 16 ++++++++-------- 5 files changed, 26 insertions(+), 23 deletions(-) diff --git a/packages/app/src/components/TokenIconLabel.vue b/packages/app/src/components/TokenIconLabel.vue index c5cffb8584..75109fe29a 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 07e9b6eead..be2dbc1cda 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 70b9cbfac1..ce5f17c9eb 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 73d319c86b..ef8dda64a3 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 d3036c3a6b..7f436cb0f7 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"); }); }); From f8d7bf1158c639331b0c1c48bcbf50c046c75707 Mon Sep 17 00:00:00 2001 From: Marko Arambasic Date: Thu, 30 Jan 2025 16:39:16 +0100 Subject: [PATCH 3/3] fix: revert all changes to the token icon label --- .../app/src/components/TokenIconLabel.vue | 20 ++++++------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/packages/app/src/components/TokenIconLabel.vue b/packages/app/src/components/TokenIconLabel.vue index 75109fe29a..39675f1fd0 100644 --- a/packages/app/src/components/TokenIconLabel.vue +++ b/packages/app/src/components/TokenIconLabel.vue @@ -17,14 +17,12 @@ /> -
-
-
- {{ symbol }} -
-
- {{ name }} -
+
+
+ {{ symbol }} +
+
+ {{ name }}
@@ -117,12 +115,6 @@ 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;