fix: token icon label (#94)

# What ❔

Refactor TokenIconLabel component and its usage.

## Why ❔

The problem came from the local environment where we don't have ETH in
DB and it's not returned by the tokens endpoint so the custom token icon
is shown:
<img width="477" alt="image"
src="https://github.com/matter-labs/block-explorer/assets/6553665/932bc268-6af3-4f3e-881f-43575068f680">

since we already have a token icon url in upsteam components - we can
just pass it to TokenIconLabel component and simplify the component
itself.

<img width="474" alt="image"
src="https://github.com/matter-labs/block-explorer/assets/6553665/1601b1c2-2f90-468a-a8c9-d725274436cf">


## Checklist

<!-- Check your PR fulfills the following items. -->
<!-- For draft PRs check the boxes as you complete them. -->

- [X] PR title corresponds to the body of PR (we generate changelog
entries from PRs).
- [X] Tests for the changes have been added / updated.

packages/app/src/components/TokenAmountPrice.vue

@@ -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>

packages/app/src/components/TokenIconLabel.vue

@@ -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')"
         />
@@ -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";
@@ -57,7 +55,7 @@ const props = defineProps({
     default: "sm",
   },
   iconUrl: {
-    type: String,
+    type: [String, null] as PropType<string | null>,
     default: "",
   },
   showLinkSymbol: {
@@ -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">

packages/app/src/components/balances/Table.vue

@@ -11,6 +11,7 @@
           class="token-icon"
           :address="item.token.l2Address"
           :symbol="item.token.symbol"
+          :icon-url="item.token.iconURL"
           show-link-symbol
         />
       </TableBodyColumn>

packages/app/src/components/transactions/TokenAmountPriceTableCell.vue

@@ -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 }}

packages/app/src/components/transactions/infoTable/TransferTableCell.vue

@@ -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
       />

packages/app/tests/components/TokenIconLabel.spec.ts

@@ -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";
 
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -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: {
@@ -186,6 +118,5 @@ describe("TokenIconLabel", () => {
     });
 
     expect(container.querySelector(".lg")).toBeTruthy();
-    mock.mockRestore();
   });
 });