Skip to content

Commit

Permalink
Merge branch 'main' into remove-provider-liquidity-filter
Browse files Browse the repository at this point in the history
  • Loading branch information
Romsters authored Nov 21, 2023
2 parents 0a82ef3 + b1012f8 commit f987f2a
Show file tree
Hide file tree
Showing 6 changed files with 24 additions and 97 deletions.
8 changes: 7 additions & 1 deletion packages/app/src/components/TokenAmountPrice.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@
<div class="token-amount-price">
<template v-if="token && decimalAmount">
<div class="token-amount">{{ decimalAmount }}</div>
<TokenIconLabel class="token-icon" :address="token.l2Address" :symbol="token.symbol" show-link-symbol />
<TokenIconLabel
class="token-icon"
:address="token.l2Address"
:symbol="token.symbol"
:icon-url="token.iconURL"
show-link-symbol
/>
<span class="token-price" v-if="priceAmount">{{ priceAmount }}</span>
</template>
<template v-else>—</template>
Expand Down
24 changes: 3 additions & 21 deletions packages/app/src/components/TokenIconLabel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<div class="token-img-loader"></div>
<img
class="token-img"
:class="{ loaded: isImageReady }"
:class="{ loaded: isImageLoaded }"
:src="imgSource"
:alt="symbol || t('balances.table.unknownSymbol')"
/>
Expand All @@ -35,8 +35,6 @@ import { useImage } from "@vueuse/core";
import AddressLink from "@/components/AddressLink.vue";
import useTokenLibrary from "@/composables/useTokenLibrary";
import type { Hash } from "@/types";
export type IconSize = "sm" | "md" | "lg" | "xl";
Expand All @@ -57,7 +55,7 @@ const props = defineProps({
default: "sm",
},
iconUrl: {
type: String,
type: [String, null] as PropType<string | null>,
default: "",
},
showLinkSymbol: {
Expand All @@ -70,26 +68,10 @@ const props = defineProps({
},
});
const {
isRequestPending: isTokensRequestPending,
isRequestFailed: isTokensRequestFailed,
getToken,
getTokens,
} = useTokenLibrary();
getTokens();
const imgSource = computed(() => {
if (props.iconUrl) {
return props.iconUrl;
}
const tokenFromLibrary = getToken(props.address);
return tokenFromLibrary?.iconURL ? tokenFromLibrary.iconURL : "/images/currencies/customToken.svg";
return props.iconUrl || "/images/currencies/customToken.svg";
});
const { isReady: isImageLoaded } = useImage({ src: imgSource.value });
const isImageReady = computed(
() => (!isTokensRequestPending.value && !isTokensRequestFailed.value && isImageLoaded.value) || props.iconUrl
);
</script>

<style lang="scss">
Expand Down
1 change: 1 addition & 0 deletions packages/app/src/components/balances/Table.vue
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
class="token-icon"
:address="item.token.l2Address"
:symbol="item.token.symbol"
:icon-url="item.token.iconURL"
show-link-symbol
/>
</TableBodyColumn>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,13 @@
<template #content>{{ decimalAmount }} {{ tokenInfo.symbol }}</template>
</Tooltip>
<div class="token-amount" :data-testid="$testId.tokenAmount">{{ decimalAmount }}</div>
<TokenIconLabel class="token-icon" :address="tokenInfo.l2Address" :symbol="tokenInfo.symbol" show-link-symbol />
<TokenIconLabel
class="token-icon"
:address="tokenInfo.l2Address"
:symbol="tokenInfo.symbol"
:icon-url="tokenInfo.iconURL"
show-link-symbol
/>
</div>
<span v-if="showPrice" class="token-price" :data-testid="$testId.tokenAmountPrice">
{{ priceAmount }}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
class="token-icon"
:address="transfer.tokenInfo.l2Address"
:symbol="transfer.tokenInfo.symbol"
:icon-url="transfer.tokenInfo.iconURL"
icon-size="md"
show-link-symbol
/>
Expand Down
79 changes: 5 additions & 74 deletions packages/app/tests/components/TokenIconLabel.spec.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import { computed } from "vue";
import { createI18n } from "vue-i18n";

import { describe, expect, it, vi } from "vitest";
import { describe, expect, it } from "vitest";

import { render } from "@testing-library/vue";
import { mount, RouterLinkStub } from "@vue/test-utils";

import { ETH_TOKEN_MOCK, useTokenLibraryMock } from "../mocks";
import { ETH_TOKEN_MOCK } from "../mocks";

import TokenIconLabel from "@/components/TokenIconLabel.vue";

Expand All @@ -29,31 +28,18 @@ describe("TokenIconLabel", () => {
},
plugins: [$testId, i18n],
};
it("renders token icon for verified token", () => {
const mock = useTokenLibraryMock({
tokens: computed(() => []),
getTokens: vi.fn(),
getToken: () =>
<Api.Response.Token>{
...ETH_TOKEN_MOCK,
iconURL: "https://test.link",
},
});
it("renders token icon if iconUrl is defined", () => {
const wrapper = mount(TokenIconLabel, {
global,
props: {
symbol: ETH_TOKEN_MOCK.symbol,
address: ETH_TOKEN_MOCK.l2Address,
iconUrl: "https://test.link",
},
});
expect(wrapper.find("img")?.attributes("src")).toBe("https://test.link");
mock.mockRestore();
});
it("renders custom token icon for unverified token", () => {
const mock = useTokenLibraryMock({
tokens: computed(() => []),
getTokens: vi.fn(),
});
it("renders custom token icon if iconUrl is not defined", () => {
const wrapper = mount(TokenIconLabel, {
global,
props: {
Expand All @@ -62,27 +48,8 @@ describe("TokenIconLabel", () => {
},
});
expect(wrapper.find("img")?.attributes("src")).toBe("/images/currencies/customToken.svg");
mock.mockRestore();
});
it("hides image when tokens request is pending", () => {
const mock = useTokenLibraryMock({
isRequestPending: computed(() => true),
getTokens: vi.fn(),
});
const wrapper = mount(TokenIconLabel, {
global,
props: {
symbol: "ETH",
address: "0x0cc725e6ba24e7db79f62f22a7994a8ee33adc1b",
},
});
expect(wrapper.find(".token-img")?.classes().includes("loaded")).toBe(false);
mock.mockRestore();
});
it("renders token symbol when showLinkSymbol is true", () => {
const mock = useTokenLibraryMock({
getTokens: vi.fn(),
});
const wrapper = mount(TokenIconLabel, {
global,
props: {
Expand All @@ -92,12 +59,8 @@ describe("TokenIconLabel", () => {
},
});
expect(wrapper.find(".token-symbol").text()).toBe("ETH");
mock.mockRestore();
});
it("renders 'unknown' symbol when it is not exist", () => {
const mock = useTokenLibraryMock({
getTokens: vi.fn(),
});
const wrapper = mount(TokenIconLabel, {
global,
props: {
Expand All @@ -107,27 +70,8 @@ describe("TokenIconLabel", () => {
},
});
expect(wrapper.find(".token-symbol").text()).toBe(i18n.global.t("balances.table.unknownSymbol"));
mock.mockRestore();
});
it("renders custom token icon properly ", () => {
const mock = useTokenLibraryMock({
isTokenVerified: computed(() => false),
getTokens: vi.fn(),
});
const wrapper = mount(TokenIconLabel, {
global,
props: {
symbol: "LESA",
address: "0xc2675ae7f35b7d85ed1e828ccf6d0376b01adea3",
},
});
expect(wrapper.find("img")?.attributes("src")).toBe("/images/currencies/customToken.svg");
mock.mockRestore();
});
it("renders correct link of contract page", () => {
const mock = useTokenLibraryMock({
getTokens: vi.fn(),
});
const wrapper = mount(TokenIconLabel, {
global,
props: {
Expand All @@ -139,12 +83,8 @@ describe("TokenIconLabel", () => {

expect(contractPageUrl[0].props().to.name).toBe("address");
expect(contractPageUrl[0].props().to.params.address).toBe("0xc2675AE7F35b7d85Ed1E828CCf6D0376B01ADea3");
mock.mockRestore();
});
it("renders default 'sm' size for icon", () => {
const mock = useTokenLibraryMock({
getTokens: vi.fn(),
});
const { container } = render(TokenIconLabel, {
global,
props: {
Expand All @@ -154,12 +94,8 @@ describe("TokenIconLabel", () => {
});

expect(container.querySelector(".sm")).toBeTruthy();
mock.mockRestore();
});
it("renders 'md' size for icon", () => {
const mock = useTokenLibraryMock({
getTokens: vi.fn(),
});
const { container } = render(TokenIconLabel, {
global,
props: {
Expand All @@ -170,12 +106,8 @@ describe("TokenIconLabel", () => {
});

expect(container.querySelector(".md")).toBeTruthy();
mock.mockRestore();
});
it("renders 'lg' size for icon", () => {
const mock = useTokenLibraryMock({
getTokens: vi.fn(),
});
const { container } = render(TokenIconLabel, {
global,
props: {
Expand All @@ -186,6 +118,5 @@ describe("TokenIconLabel", () => {
});

expect(container.querySelector(".lg")).toBeTruthy();
mock.mockRestore();
});
});

0 comments on commit f987f2a

Please sign in to comment.