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 @@
{{ t("tokensView.table.tokenName") }}
+ {{ t("tokensView.table.type") }}
{{ t("tokensView.table.price") }}
{{ t("tokensView.table.tokenAddress") }}
@@ -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");
});
});