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