From 24c7b6c20be16ad946f0dbcf3946bc92fc753b46 Mon Sep 17 00:00:00 2001
From: Roman Petriv <petriv.roma@gmail.com>
Date: Fri, 17 Nov 2023 08:09:40 +0200
Subject: [PATCH 1/5] feat: use new tokens API

---
 package-lock.json                             |  9 ---
 packages/app/package.json                     |  1 -
 packages/app/src/components/FeeData.vue       |  8 +--
 .../app/src/components/TokenAmountPrice.vue   | 36 ++++-------
 .../app/src/components/TokenIconLabel.vue     | 19 +++---
 .../src/components/balances/BalanceValue.vue  | 23 +++-----
 .../app/src/components/balances/Table.vue     | 10 +++-
 .../common/table/fields/TokenPrice.vue        |  4 +-
 .../src/components/token/TokenListTable.vue   |  4 +-
 .../transactions/EthAmountPrice.vue           |  8 +--
 .../app/src/components/transactions/Table.vue | 26 +++++---
 .../TokenAmountPriceTableCell.vue             | 59 +++++++------------
 .../infoTable/TransferTableCell.vue           |  2 +-
 .../app/src/components/transfers/Table.vue    |  3 +-
 packages/app/src/composables/common/Api.d.ts  |  3 +
 packages/app/src/composables/useToken.ts      | 21 +------
 .../app/src/composables/useTokenLibrary.ts    | 23 +++-----
 packages/app/src/composables/useTokenPrice.ts | 58 ------------------
 .../app/src/composables/useTransaction.ts     | 10 +++-
 packages/app/src/utils/constants.ts           |  9 +--
 packages/app/tests/components/FeeData.spec.ts | 10 ++--
 .../tests/components/TokenAmountPrice.spec.ts | 16 ++---
 .../tests/components/TokenIconLabel.spec.ts   | 15 ++---
 .../components/balances/BalanceValue.spec.ts  | 15 ++---
 .../tests/components/balances/Table.spec.ts   | 23 ++++----
 .../components/token/TokenListTable.spec.ts   | 11 ++--
 .../components/transactions/Table.spec.ts     | 21 ++-----
 .../TokenAmountPriceTableCell.spec.ts         | 24 ++------
 .../transactions/TransferTableCell.spec.ts    |  1 -
 .../tests/components/transfers/Table.spec.ts  | 18 ++----
 .../app/tests/composables/useToken.spec.ts    | 14 +++--
 .../tests/composables/useTokenLibrary.spec.ts | 44 +++++++-------
 .../tests/composables/useTokenPrice.spec.ts   | 54 -----------------
 .../tests/composables/useTransaction.spec.ts  | 33 +++++++----
 packages/app/tests/mocks.ts                   | 14 +++++
 35 files changed, 230 insertions(+), 419 deletions(-)
 delete mode 100644 packages/app/src/composables/useTokenPrice.ts
 delete mode 100644 packages/app/tests/composables/useTokenPrice.spec.ts

diff --git a/package-lock.json b/package-lock.json
index 4740048ce2..7e845b2567 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5952,14 +5952,6 @@
       "integrity": "sha512-JW7nHREPqEtjBWz3EfxLarkmJBD8vi7Kx/1AQ6eBZnz12eHc1VkOyrc6mpR5ogTf0dOUNXFAfZut+cDe2dn4kQ==",
       "dev": true
     },
-    "node_modules/@matterlabs/token-library": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/@matterlabs/token-library/-/token-library-2.9.0.tgz",
-      "integrity": "sha512-Xkp0n0NdmG5UqHMRtY6BJSWbfTgv8OjhkWYuaevhwjb8+0uv3GpJC++2webB0jdebDVQBFUiwcC+Er7E49sryQ==",
-      "dependencies": {
-        "ohmyfetch": "^0.4.21"
-      }
-    },
     "node_modules/@mdx-js/loader": {
       "version": "1.6.22",
       "resolved": "https://registry.npmjs.org/@mdx-js/loader/-/loader-1.6.22.tgz",
@@ -54492,7 +54484,6 @@
       "license": "MIT",
       "dependencies": {
         "@matterlabs/composables": "1.1.7",
-        "@matterlabs/token-library": "2.9.0",
         "@vueuse/components": "8.9.2",
         "@vueuse/core": "8.9.2",
         "date-fns": "2.28.0",
diff --git a/packages/app/package.json b/packages/app/package.json
index 7dcfb315ae..9e7060b904 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -26,7 +26,6 @@
   },
   "dependencies": {
     "@matterlabs/composables": "1.1.7",
-    "@matterlabs/token-library": "2.9.0",
     "@vueuse/components": "8.9.2",
     "@vueuse/core": "8.9.2",
     "date-fns": "2.28.0",
diff --git a/packages/app/src/components/FeeData.vue b/packages/app/src/components/FeeData.vue
index 4663877049..fadf95e40d 100644
--- a/packages/app/src/components/FeeData.vue
+++ b/packages/app/src/components/FeeData.vue
@@ -62,7 +62,7 @@ import useToken from "@/composables/useToken";
 import type { Token } from "@/composables/useToken";
 import type { FeeData } from "@/composables/useTransaction";
 
-import { ETH_TOKEN } from "@/utils/constants";
+import { ETH_TOKEN_L2_ADDRESS } from "@/utils/constants";
 
 const props = defineProps({
   showDetails: {
@@ -81,7 +81,7 @@ const collapsed = ref(false);
 const buttonTitle = computed(() =>
   collapsed.value ? t("transactions.table.feeDetails.closeDetails") : t("transactions.table.feeDetails.moreDetails")
 );
-getTokenInfo(ETH_TOKEN.l2Address);
+getTokenInfo(ETH_TOKEN_L2_ADDRESS);
 
 const initialFee = computed(() => {
   if (props.feeData) {
@@ -89,8 +89,8 @@ const initialFee = computed(() => {
   }
   return null;
 });
-const token = computed<Token>(() => {
-  return tokenInfo.value ?? { ...ETH_TOKEN, usdPrice: null };
+const token = computed<Token | null>(() => {
+  return tokenInfo.value;
 });
 </script>
 <style lang="scss" scoped>
diff --git a/packages/app/src/components/TokenAmountPrice.vue b/packages/app/src/components/TokenAmountPrice.vue
index 1222990d0a..c5364906c7 100644
--- a/packages/app/src/components/TokenAmountPrice.vue
+++ b/packages/app/src/components/TokenAmountPrice.vue
@@ -1,25 +1,12 @@
 <template>
   <slot :token="token" :decimal-amount="decimalAmount" :price-amount="priceAmount">
     <div class="token-amount-price">
-      <template v-if="!token">
-        <div class="token-amount-symbol">
-          <ContentLoader />
-        </div>
-        <span class="token-price">
-          <ContentLoader />
-        </span>
-      </template>
-      <template v-else>
+      <template v-if="token && decimalAmount">
         <div class="token-amount">{{ decimalAmount }}</div>
-        <TokenIconLabel
-          v-if="token.address && token.symbol"
-          class="token-icon"
-          :address="token.address"
-          :symbol="token.symbol"
-          show-link-symbol
-        />
+        <TokenIconLabel class="token-icon" :address="token.l2Address" :symbol="token.symbol" show-link-symbol />
         <span class="token-price" v-if="priceAmount">{{ priceAmount }}</span>
       </template>
+      <template v-else>—</template>
     </div>
   </slot>
 </template>
@@ -28,7 +15,6 @@
 import { computed } from "vue";
 
 import TokenIconLabel from "@/components/TokenIconLabel.vue";
-import ContentLoader from "@/components/common/loaders/ContentLoader.vue";
 
 import type { Token } from "@/composables/useToken";
 import type { BigNumberish } from "ethers";
@@ -38,25 +24,27 @@ import { formatBigNumberish, formatPricePretty } from "@/utils/formatters";
 
 const props = defineProps({
   amount: {
-    type: String as PropType<BigNumberish>,
+    type: String as PropType<BigNumberish | null>,
     default: "0",
     required: true,
   },
   token: {
-    type: Object as PropType<Token>,
-    default: () => ({}),
-    required: true,
+    type: Object as PropType<Token | null>,
+    default: null,
+    required: false,
   },
 });
 
 const priceAmount = computed(() => {
-  if (props.token && props.token.usdPrice) {
-    return formatPricePretty(props.amount, props.token.decimals, props.token.usdPrice);
+  if (props.amount && props.token && props.token.usdPrice) {
+    return formatPricePretty(props.amount, props.token.decimals, props.token.usdPrice.toString());
   }
   return "";
 });
 
-const decimalAmount = computed(() => (props.token ? formatBigNumberish(props.amount, props.token.decimals) : ""));
+const decimalAmount = computed(() =>
+  props.amount && props.token ? formatBigNumberish(props.amount, props.token.decimals) : ""
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/app/src/components/TokenIconLabel.vue b/packages/app/src/components/TokenIconLabel.vue
index 66e1717423..56dc4adae5 100644
--- a/packages/app/src/components/TokenIconLabel.vue
+++ b/packages/app/src/components/TokenIconLabel.vue
@@ -9,7 +9,12 @@
       </span>
       <div class="token-icon-container" :class="iconSize">
         <div class="token-img-loader"></div>
-        <img class="token-img" :class="{ loaded: isImageReady }" :src="imgSource" :alt="symbol!" />
+        <img
+          class="token-img"
+          :class="{ loaded: isImageReady }"
+          :src="imgSource"
+          :alt="symbol || t('balances.table.unknownSymbol')"
+        />
       </div>
     </AddressLink>
     <div class="token-info" v-if="name && symbol">
@@ -45,13 +50,13 @@ const props = defineProps({
   },
   symbol: {
     type: [String, null] as PropType<string | null>,
-    required: true,
+    default: null,
   },
   iconSize: {
     type: String as PropType<IconSize>,
     default: "sm",
   },
-  imageUrl: {
+  iconUrl: {
     type: String,
     default: "",
   },
@@ -75,15 +80,15 @@ const {
 getTokens();
 
 const imgSource = computed(() => {
-  if (props.imageUrl) {
-    return props.imageUrl;
+  if (props.iconUrl) {
+    return props.iconUrl;
   }
   const tokenFromLibrary = getToken(props.address);
-  return tokenFromLibrary ? tokenFromLibrary.imageUrl : "/images/currencies/customToken.svg";
+  return tokenFromLibrary?.iconURL ? tokenFromLibrary.iconURL : "/images/currencies/customToken.svg";
 });
 const { isReady: isImageLoaded } = useImage({ src: imgSource.value });
 const isImageReady = computed(
-  () => (!isTokensRequestPending.value && !isTokensRequestFailed.value && isImageLoaded.value) || props.imageUrl
+  () => (!isTokensRequestPending.value && !isTokensRequestFailed.value && isImageLoaded.value) || props.iconUrl
 );
 </script>
 
diff --git a/packages/app/src/components/balances/BalanceValue.vue b/packages/app/src/components/balances/BalanceValue.vue
index 47c35de6cf..6ea1537683 100644
--- a/packages/app/src/components/balances/BalanceValue.vue
+++ b/packages/app/src/components/balances/BalanceValue.vue
@@ -2,18 +2,13 @@
   <div v-if="balance && balance.token">
     <div class="balance-data-value">{{ formatValue(balance.balance, balance.token.decimals) }}</div>
     <div class="balance-data-price">
-      <ContentLoader v-if="isRequestPending" class="h-full w-8" />
-      <div v-else>{{ tokenPriceAmount }}</div>
+      <div>{{ tokenPriceAmount }}</div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, type PropType, watchEffect } from "vue";
-
-import ContentLoader from "@/components/common/loaders/ContentLoader.vue";
-
-import useTokenPrice from "@/composables/useTokenPrice";
+import { computed, type PropType } from "vue";
 
 import type { Balance } from "@/composables/useAddress";
 
@@ -25,16 +20,14 @@ const props = defineProps({
   },
 });
 
-const { getTokenPrice, tokenPrice, isRequestPending } = useTokenPrice();
-
-watchEffect(() => {
-  getTokenPrice(props.balance?.token?.l2Address);
-});
-
 const tokenPriceAmount = computed(() => {
-  if (!props.balance?.token || !tokenPrice.value) return;
+  if (!props.balance?.token || !props.balance.token.usdPrice) return;
 
-  return formatPricePretty(props.balance.balance, props.balance.token.decimals, tokenPrice.value);
+  return formatPricePretty(
+    props.balance.balance,
+    props.balance.token.decimals,
+    props.balance.token.usdPrice.toString()
+  );
 });
 </script>
 
diff --git a/packages/app/src/components/balances/Table.vue b/packages/app/src/components/balances/Table.vue
index bba88ce900..6834a3c5de 100644
--- a/packages/app/src/components/balances/Table.vue
+++ b/packages/app/src/components/balances/Table.vue
@@ -61,7 +61,7 @@ import useTokenLibrary from "@/composables/useTokenLibrary";
 
 import type { Balances } from "@/composables/useAddress";
 
-import { ETH_TOKEN } from "@/utils/constants";
+import { ETH_TOKEN_L2_ADDRESS } from "@/utils/constants";
 
 const { t } = useI18n();
 
@@ -97,12 +97,16 @@ const displayedBalances = computed(() => {
     .sort((a, b) => {
       if (!a.token || !b.token) return 0;
 
-      if (a.token.l2Address === ETH_TOKEN.l2Address) {
+      if (a.token.l2Address === ETH_TOKEN_L2_ADDRESS) {
         return -1;
-      } else if (b.token.l2Address === ETH_TOKEN.l2Address) {
+      } else if (b.token.l2Address === ETH_TOKEN_L2_ADDRESS) {
         return 1;
       }
 
+      if (a.token.liquidity || b.token.liquidity) {
+        return (a.token.liquidity || 0) > (b.token.liquidity || 0) ? -1 : 1;
+      }
+
       const isATokenInLibrary = Boolean(getLibraryToken(a.token.l2Address));
       const isBTokenInLibrary = Boolean(getLibraryToken(b.token.l2Address));
       if (isATokenInLibrary && !isBTokenInLibrary) {
diff --git a/packages/app/src/components/common/table/fields/TokenPrice.vue b/packages/app/src/components/common/table/fields/TokenPrice.vue
index 7143c89d51..9092ca7d27 100644
--- a/packages/app/src/components/common/table/fields/TokenPrice.vue
+++ b/packages/app/src/components/common/table/fields/TokenPrice.vue
@@ -33,7 +33,7 @@ const { getTokenInfo, tokenInfo, isRequestPending } = useToken();
 
 watchEffect(() => {
   if (props.address) {
-    getTokenInfo(props.address!);
+    getTokenInfo(props.address);
   }
 });
 
@@ -42,7 +42,7 @@ const priceAmount = computed(() => {
     return formatPricePretty(
       "1".padEnd(tokenInfo.value.decimals + 1, "0"),
       tokenInfo.value.decimals,
-      tokenInfo.value.usdPrice
+      tokenInfo.value.usdPrice.toString()
     );
   }
   return "";
diff --git a/packages/app/src/components/token/TokenListTable.vue b/packages/app/src/components/token/TokenListTable.vue
index da27218629..be8561d16a 100644
--- a/packages/app/src/components/token/TokenListTable.vue
+++ b/packages/app/src/components/token/TokenListTable.vue
@@ -12,7 +12,7 @@
           icon-size="xl"
           :address="item.l2Address"
           :name="item.name"
-          :image-url="item.imageUrl"
+          :icon-url="item.iconURL"
         />
       </TableBodyColumn>
       <TableBodyColumn :data-heading="t('tokenListView.table.price')">
@@ -78,7 +78,7 @@ import TableHeadColumn from "@/components/common/table/TableHeadColumn.vue";
 import TokenPrice from "@/components/common/table/fields/TokenPrice.vue";
 import TransactionNetworkSquareBlock from "@/components/transactions/TransactionNetworkSquareBlock.vue";
 
-import type { Token } from "@matterlabs/token-library";
+import type { Token } from "@/composables/useToken";
 
 defineProps({
   tokens: {
diff --git a/packages/app/src/components/transactions/EthAmountPrice.vue b/packages/app/src/components/transactions/EthAmountPrice.vue
index e268e15c28..9c9af507f7 100644
--- a/packages/app/src/components/transactions/EthAmountPrice.vue
+++ b/packages/app/src/components/transactions/EthAmountPrice.vue
@@ -11,7 +11,7 @@ import useToken from "@/composables/useToken";
 import type { Token } from "@/composables/useToken";
 import type { BigNumberish } from "ethers";
 
-import { ETH_TOKEN } from "@/utils/constants";
+import { ETH_TOKEN_L2_ADDRESS } from "@/utils/constants";
 
 defineProps({
   amount: {
@@ -22,9 +22,9 @@ defineProps({
 });
 
 const { getTokenInfo, tokenInfo } = useToken();
-getTokenInfo(ETH_TOKEN.l2Address);
+getTokenInfo(ETH_TOKEN_L2_ADDRESS);
 
-const token = computed<Token>(() => {
-  return tokenInfo.value ?? { ...ETH_TOKEN, usdPrice: null };
+const token = computed<Token | null>(() => {
+  return tokenInfo.value;
 });
 </script>
diff --git a/packages/app/src/components/transactions/Table.vue b/packages/app/src/components/transactions/Table.vue
index 0d35d9b5dc..447c5ab7bd 100644
--- a/packages/app/src/components/transactions/Table.vue
+++ b/packages/app/src/components/transactions/Table.vue
@@ -1,6 +1,6 @@
 <template>
-  <Table class="transactions-table" :class="{ 'high-rows': isHighRowsSize }" :items="transactions" :loading="pending">
-    <template v-if="transactions?.length || pending" #table-head>
+  <Table class="transactions-table" :class="{ 'high-rows': isHighRowsSize }" :items="transactions" :loading="isLoading">
+    <template v-if="transactions?.length || isLoading" #table-head>
       <TableHeadColumn v-if="columns.includes('status')">{{ t("transactions.table.status") }}</TableHeadColumn>
       <TableHeadColumn v-if="columns.includes('transactionHash')">
         {{ t("transactions.table.transactionHash") }}
@@ -143,18 +143,18 @@
         :data-heading="t('transactions.table.value')"
         class="tablet-column-hidden"
       >
-        <TokenAmountPriceTableCell :amount="item.value" :show-price="true" />
+        <TokenAmountPriceTableCell :token="ethToken" :amount="item.value" :show-price="true" />
       </TableBodyColumn>
       <TableBodyColumn
         v-if="columns.includes('value') && columns.includes('fee')"
         :data-heading="t('transactions.table.value')"
         class="tablet-column"
       >
-        <TokenAmountPriceTableCell :amount="item.value" :show-price="false" />
+        <TokenAmountPriceTableCell :token="ethToken" :amount="item.value" :show-price="false" />
 
         <div class="tablet-column-fee">
           {{ t("transactions.table.fee") }}:&nbsp;
-          <TokenAmountPriceTableCell :amount="item.fee" :show-price="false" />
+          <TokenAmountPriceTableCell :token="ethToken" :amount="item.fee" :show-price="false" />
         </div>
       </TableBodyColumn>
       <TableBodyColumn
@@ -162,7 +162,7 @@
         :data-heading="t('transactions.table.fee')"
         class="tablet-column-hidden"
       >
-        <TokenAmountPriceTableCell :amount="item.fee" :show-price="true" />
+        <TokenAmountPriceTableCell :token="ethToken" :amount="item.fee" :show-price="true" />
       </TableBodyColumn>
     </template>
     <template #empty>
@@ -177,7 +177,7 @@
           :use-query="useQueryPagination"
           :total-items="total!"
           :page-size="pageSize"
-          :disabled="pending"
+          :disabled="isLoading"
         />
       </div>
     </template>
@@ -212,6 +212,7 @@ import TokenAmountPriceTableCell from "@/components/transactions/TokenAmountPric
 import TransactionDirectionTableCell from "@/components/transactions/TransactionDirectionTableCell.vue";
 import TransactionNetworkSquareBlock from "@/components/transactions/TransactionNetworkSquareBlock.vue";
 
+import useToken, { type Token } from "@/composables/useToken";
 import { decodeDataWithABI } from "@/composables/useTransactionData";
 import useTransactions, { type TransactionListItem, type TransactionSearchParams } from "@/composables/useTransactions";
 
@@ -219,6 +220,7 @@ import type { Direction } from "@/components/transactions/TransactionDirectionTa
 import type { AbiFragment } from "@/composables/useAddress";
 import type { NetworkOrigin } from "@/types";
 
+import { ETH_TOKEN_L2_ADDRESS } from "@/utils/constants";
 import { utcStringFromISOString } from "@/utils/helpers";
 
 const { t, te } = useI18n();
@@ -247,6 +249,16 @@ const props = defineProps({
 const route = useRoute();
 const searchParams = computed(() => props.searchParams ?? {});
 const { data, load, total, pending, pageSize } = useTransactions(searchParams);
+
+const { getTokenInfo, tokenInfo, isRequestPending: isLoadingEthTokenInfo } = useToken();
+getTokenInfo(ETH_TOKEN_L2_ADDRESS);
+
+const ethToken = computed<Token | null>(() => {
+  return tokenInfo.value;
+});
+
+const isLoading = computed(() => pending.value || isLoadingEthTokenInfo.value);
+
 const activePage = ref(props.useQueryPagination ? parseInt(route.query.page as string) || 1 : 1);
 const toDate = new Date();
 
diff --git a/packages/app/src/components/transactions/TokenAmountPriceTableCell.vue b/packages/app/src/components/transactions/TokenAmountPriceTableCell.vue
index f2f5dd6675..1066083eb2 100644
--- a/packages/app/src/components/transactions/TokenAmountPriceTableCell.vue
+++ b/packages/app/src/components/transactions/TokenAmountPriceTableCell.vue
@@ -1,45 +1,35 @@
 <template>
-  <TokenAmountPrice :token="tokenWithUsdPrice" :amount="amount" v-slot="{ token, decimalAmount, priceAmount }">
-    <div class="token-amount-symbol">
-      <Tooltip class="token-amount-short" :disabled="decimalAmount.length < 10">
-        {{ shortenFitText(decimalAmount, "right", 100, 10) }}
+  <TokenAmountPrice :token="token" :amount="amount" v-slot="{ token, decimalAmount, priceAmount }">
+    <template v-if="token && decimalAmount">
+      <div class="token-amount-symbol">
+        <Tooltip class="token-amount-short" :disabled="decimalAmount.length < 10">
+          {{ shortenFitText(decimalAmount, "right", 100, 10) }}
 
-        <template #content>{{ decimalAmount }} {{ token?.symbol }}</template>
-      </Tooltip>
-      <div class="token-amount" :data-testid="$testId.tokenAmount">{{ decimalAmount }}</div>
-      <TokenIconLabel
-        v-if="token"
-        class="token-icon"
-        :address="token.address"
-        :symbol="token.symbol"
-        show-link-symbol
-      />
-    </div>
-    <span v-if="showPrice" class="token-price" :data-testid="$testId.tokenAmountPrice">
-      <ContentLoader v-if="isTokenPricePending" class="inline-block h-full w-8" />
-      <template v-else>{{ priceAmount }}</template>
-    </span>
+          <template #content>{{ decimalAmount }} {{ token.symbol }}</template>
+        </Tooltip>
+        <div class="token-amount" :data-testid="$testId.tokenAmount">{{ decimalAmount }}</div>
+        <TokenIconLabel class="token-icon" :address="token.l2Address" :symbol="token.symbol" show-link-symbol />
+      </div>
+      <span v-if="showPrice" class="token-price" :data-testid="$testId.tokenAmountPrice">
+        {{ priceAmount }}
+      </span>
+    </template>
+    <template v-else>—</template>
   </TokenAmountPrice>
 </template>
 <script lang="ts" setup>
-import { computed, type PropType } from "vue";
-
 import TokenAmountPrice from "@/components/TokenAmountPrice.vue";
 import TokenIconLabel from "@/components/TokenIconLabel.vue";
 import { shortenFitText } from "@/components/common/HashLabel.vue";
 import Tooltip from "@/components/common/Tooltip.vue";
-import ContentLoader from "@/components/common/loaders/ContentLoader.vue";
-
-import useTokenPrice from "@/composables/useTokenPrice";
 
-import type { ApiToken, Token } from "@/composables/useToken";
+import type { Token } from "@/composables/useToken";
 import type { BigNumberish } from "ethers";
+import type { PropType } from "vue";
 
-import { ETH_TOKEN } from "@/utils/constants";
-
-const props = defineProps({
+defineProps({
   amount: {
-    type: String as PropType<BigNumberish>,
+    type: String as PropType<BigNumberish | null>,
     default: "0",
     required: true,
   },
@@ -48,20 +38,13 @@ const props = defineProps({
     default: true,
   },
   token: {
-    type: Object as PropType<ApiToken | null>,
+    type: Object as PropType<Token | null>,
     default: () => null,
     required: false,
   },
 });
-
-const { getTokenPrice, tokenPrice, isRequestPending: isTokenPricePending } = useTokenPrice();
-getTokenPrice(props.token?.l2Address || ETH_TOKEN.l2Address);
-
-const tokenWithUsdPrice = computed<Token>(() => {
-  const tokenData = props.token ? { ...props.token, address: props.token.l2Address } : ETH_TOKEN;
-  return { ...tokenData, usdPrice: tokenPrice.value };
-});
 </script>
+
 <style lang="scss" scoped>
 .token-amount-symbol {
   @apply flex items-center;
diff --git a/packages/app/src/components/transactions/infoTable/TransferTableCell.vue b/packages/app/src/components/transactions/infoTable/TransferTableCell.vue
index b3db7b302c..33d329c417 100644
--- a/packages/app/src/components/transactions/infoTable/TransferTableCell.vue
+++ b/packages/app/src/components/transactions/infoTable/TransferTableCell.vue
@@ -18,7 +18,7 @@
       <TokenIconLabel
         v-if="transfer.tokenInfo"
         class="token-icon"
-        :address="transfer.tokenInfo.address"
+        :address="transfer.tokenInfo.l2Address"
         :symbol="transfer.tokenInfo.symbol"
         icon-size="md"
         show-link-symbol
diff --git a/packages/app/src/components/transfers/Table.vue b/packages/app/src/components/transfers/Table.vue
index 446e3becbc..7304ce9b35 100644
--- a/packages/app/src/components/transfers/Table.vue
+++ b/packages/app/src/components/transfers/Table.vue
@@ -111,8 +111,7 @@
       </TableBodyColumn>
 
       <TableBodyColumn :data-heading="t('transfers.table.amount')">
-        <TokenAmountPriceTableCell v-if="item.amount" :amount="item.amount" :token="item.token" :show-price="true" />
-        <span v-else>—</span>
+        <TokenAmountPriceTableCell :amount="item.amount" :token="item.token" :show-price="true" />
       </TableBodyColumn>
     </template>
     <template #empty>
diff --git a/packages/app/src/composables/common/Api.d.ts b/packages/app/src/composables/common/Api.d.ts
index 649a15ad05..371236776a 100644
--- a/packages/app/src/composables/common/Api.d.ts
+++ b/packages/app/src/composables/common/Api.d.ts
@@ -23,6 +23,9 @@ declare namespace Api {
       name: string | null;
       symbol: string | null;
       decimals: number;
+      usdPrice: number | null;
+      liquidity: number | null;
+      iconURL: string | null;
     };
 
     type BatchListItem = {
diff --git a/packages/app/src/composables/useToken.ts b/packages/app/src/composables/useToken.ts
index 2e277a9e0c..94df8f4e72 100644
--- a/packages/app/src/composables/useToken.ts
+++ b/packages/app/src/composables/useToken.ts
@@ -3,30 +3,17 @@ import { ref } from "vue";
 import { useMemoize } from "@vueuse/core";
 import { $fetch } from "ohmyfetch";
 
-import { retrieveTokenPrice } from "./useTokenPrice";
-
 import useContext, { type Context } from "@/composables/useContext";
 import useTokenLibrary from "@/composables/useTokenLibrary";
 
 import type { Address, Hash } from "@/types";
 
-import { ETH_TOKEN } from "@/utils/constants";
-
-export type ApiToken = Api.Response.Token;
-
-export type Token = {
+export type Token = Api.Response.Token & {
   address: Address;
-  name: string | null;
-  symbol: string | null;
-  decimals: number;
-  usdPrice: string | null;
 };
 
 export const retrieveToken = useMemoize(
   (tokenAddress: Hash, context: Context = useContext()): Promise<Api.Response.Token> => {
-    if (tokenAddress === ETH_TOKEN.l2Address) {
-      return Promise.resolve(ETH_TOKEN);
-    }
     return $fetch(`${context.currentNetwork.value.apiUrl}/tokens/${tokenAddress}`);
   },
   {
@@ -53,13 +40,9 @@ export default () => {
       await getTokens();
       const tokenFromLibrary = getToken(address);
       const token = tokenFromLibrary || (await retrieveToken(address));
-      const tokenPrice = tokenFromLibrary ? await retrieveTokenPrice(address) : null;
       tokenInfo.value = {
+        ...token,
         address: token.l2Address,
-        name: token.name,
-        symbol: token.symbol,
-        decimals: token.decimals,
-        usdPrice: tokenPrice,
       };
     } catch {
       isRequestFailed.value = true;
diff --git a/packages/app/src/composables/useTokenLibrary.ts b/packages/app/src/composables/useTokenLibrary.ts
index ce7f7bc724..6db8a5b815 100644
--- a/packages/app/src/composables/useTokenLibrary.ts
+++ b/packages/app/src/composables/useTokenLibrary.ts
@@ -1,25 +1,16 @@
 import { ref } from "vue";
 
-import { getTokenCollection, type Token } from "@matterlabs/token-library";
 import { useMemoize } from "@vueuse/core";
+import { $fetch } from "ohmyfetch";
 
 import useContext, { type Context } from "@/composables/useContext";
-import useRuntimeConfig from "@/composables/useRuntimeConfig";
-
-import { ETH_TOKEN } from "@/utils/constants";
-
-const { appEnvironment } = useRuntimeConfig();
 
 const retrieveTokens = useMemoize(
-  async (context: Context): Promise<Token[]> => {
-    return (
-      await getTokenCollection(context.currentNetwork.value.l2ChainId, {
-        staging: appEnvironment !== "production",
-      })
-    ).map((token) => ({
-      ...token,
-      l2Address: token.l2Address === ETH_TOKEN.l1Address ? ETH_TOKEN.l2Address : token.l2Address,
-    }));
+  async (context: Context): Promise<Api.Response.Token[]> => {
+    const tokensResponse = await $fetch<Api.Response.Collection<Api.Response.Token>>(
+      `${context.currentNetwork.value.apiUrl}/tokens?minLiquidity=1000000&limit=100`
+    );
+    return tokensResponse.items;
   },
   {
     getKey(context: Context) {
@@ -31,7 +22,7 @@ const retrieveTokens = useMemoize(
 export default (context = useContext()) => {
   const isRequestPending = ref(false);
   const isRequestFailed = ref(false);
-  const tokens = ref<Token[]>([]);
+  const tokens = ref<Api.Response.Token[]>([]);
 
   const getToken = (tokenAddress: string) => {
     return tokens.value.find((token) => token.l2Address === tokenAddress);
diff --git a/packages/app/src/composables/useTokenPrice.ts b/packages/app/src/composables/useTokenPrice.ts
deleted file mode 100644
index faee80dc5d..0000000000
--- a/packages/app/src/composables/useTokenPrice.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { ref } from "vue";
-
-import { useMemoize } from "@vueuse/core";
-
-import useContext, { type Context } from "@/composables/useContext";
-import useTokenLibrary from "@/composables/useTokenLibrary";
-
-import type { Hash } from "@/types";
-
-import { ETH_TOKEN } from "@/utils/constants";
-
-export const retrieveTokenPrice = useMemoize(
-  async (tokenAddress: Hash, context: Context = useContext()): Promise<string | null> => {
-    const provider = context.getL2Provider();
-    const price = await provider.getTokenPrice(
-      tokenAddress === ETH_TOKEN.l2Address ? ETH_TOKEN.l1Address : tokenAddress
-    );
-    if (price === "0") return null;
-    return price;
-  },
-  {
-    getKey(tokenAddress: Hash, context: Context = useContext()) {
-      return tokenAddress + context.currentNetwork.value.name;
-    },
-  }
-);
-
-export default () => {
-  const { getToken, getTokens } = useTokenLibrary();
-
-  const isRequestPending = ref(false);
-  const isRequestFailed = ref(false);
-  const tokenPrice = ref<string | null>(null);
-
-  const getTokenPrice = async (address?: Hash) => {
-    tokenPrice.value = null;
-    isRequestFailed.value = false;
-    if (!address) return;
-
-    isRequestPending.value = true;
-    try {
-      await getTokens();
-      const tokenFromLibrary = getToken(address);
-      tokenPrice.value = tokenFromLibrary ? await retrieveTokenPrice(address) : null;
-    } catch {
-      isRequestFailed.value = true;
-    } finally {
-      isRequestPending.value = false;
-    }
-  };
-
-  return {
-    isRequestPending,
-    isRequestFailed,
-    tokenPrice,
-    getTokenPrice,
-  };
-};
diff --git a/packages/app/src/composables/useTransaction.ts b/packages/app/src/composables/useTransaction.ts
index 022df5200b..976adefac3 100644
--- a/packages/app/src/composables/useTransaction.ts
+++ b/packages/app/src/composables/useTransaction.ts
@@ -16,10 +16,13 @@ type TokenInfo = {
   l2Address: Hash;
   name?: string;
   symbol: string;
+  usdPrice?: number;
+  liquidity?: number;
+  iconURL?: string;
 };
 
 export type TokenTransfer = {
-  amount: Hash | null;
+  amount: string | null;
   from: Hash;
   to: Hash;
   type: "fee" | "transfer" | "withdrawal" | "deposit" | "refund" | "mint";
@@ -236,7 +239,7 @@ export function mapTransaction(
 
 function mapTransfers(transfers: Api.Response.Transfer[]): TokenTransfer[] {
   return transfers.map((item) => ({
-    amount: item.amount!,
+    amount: item.amount,
     from: item.from,
     to: item.to,
     fromNetwork: getTransferNetworkOrigin(item, "from"),
@@ -249,6 +252,9 @@ function mapTransfers(transfers: Api.Response.Transfer[]): TokenTransfer[] {
       decimals: item.token?.decimals || 0,
       name: item.token?.name,
       symbol: item.token?.symbol,
+      usdPrice: item.token?.usdPrice,
+      liquidity: item.token?.liquidity,
+      iconURL: item.token?.iconURL,
     } as TokenInfo,
   }));
 }
diff --git a/packages/app/src/utils/constants.ts b/packages/app/src/utils/constants.ts
index a9a23d2929..66ad54e518 100644
--- a/packages/app/src/utils/constants.ts
+++ b/packages/app/src/utils/constants.ts
@@ -1,13 +1,6 @@
 import { checksumAddress } from "./formatters";
 
-export const ETH_TOKEN = {
-  address: checksumAddress("0x000000000000000000000000000000000000800A"),
-  l1Address: checksumAddress("0x0000000000000000000000000000000000000000"),
-  l2Address: checksumAddress("0x000000000000000000000000000000000000800A"),
-  symbol: "ETH",
-  name: "Ether",
-  decimals: 18,
-};
+export const ETH_TOKEN_L2_ADDRESS = checksumAddress("0x000000000000000000000000000000000000800A");
 
 export const NEW_PROVER_CLI_URL = "https://github.com/matter-labs/era-boojum-validator-cli";
 
diff --git a/packages/app/tests/components/FeeData.spec.ts b/packages/app/tests/components/FeeData.spec.ts
index dc3fcdea2e..1c44300fb3 100644
--- a/packages/app/tests/components/FeeData.spec.ts
+++ b/packages/app/tests/components/FeeData.spec.ts
@@ -6,6 +6,8 @@ import { describe, expect, it, vi } from "vitest";
 import { fireEvent, render } from "@testing-library/vue";
 import { mount, RouterLinkStub } from "@vue/test-utils";
 
+import { ETH_TOKEN_MOCK } from "../mocks";
+
 import { default as FeeDataComponent } from "@/components/FeeData.vue";
 
 import enUS from "@/locales/en.json";
@@ -13,14 +15,13 @@ import enUS from "@/locales/en.json";
 import type { FeeData } from "@/composables/useTransaction";
 
 import $testId from "@/plugins/testId";
-import { ETH_TOKEN } from "@/utils/constants";
 
 vi.mock("@/composables/useToken", () => {
   return {
     default: () => ({
       getTokenInfo: () => undefined,
       tokenInfo: computed(() => ({
-        address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
+        l2Address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
         name: "Ether",
         symbol: "ETH",
         decimals: 18,
@@ -44,13 +45,12 @@ const feeData = {
   refunds: [
     {
       tokenInfo: {
-        address: "0x0000000000000000000000000000000000000000",
         decimals: 18,
         l1Address: "0x0000000000000000000000000000000000000000",
         l2Address: "0x0000000000000000000000000000000000000000",
         symbol: "ETH",
         name: "Ether",
-        usdPrice: "3500",
+        usdPrice: 3500,
       },
       amount: "1000000",
       from: "0x0000000000000000000000000000000000008001",
@@ -87,7 +87,7 @@ describe("FeeToken", () => {
     });
     await wrapper.vm.$nextTick();
     expect(wrapper.find(".token-amount").text()).toBe("0.01");
-    expect(wrapper.find(".token-symbol").text()).toBe(ETH_TOKEN.symbol);
+    expect(wrapper.find(".token-symbol").text()).toBe(ETH_TOKEN_MOCK.symbol);
     expect(wrapper.find(".token-price").text()).toBe("$1.50");
   });
   it("handles amount update correctly", async () => {
diff --git a/packages/app/tests/components/TokenAmountPrice.spec.ts b/packages/app/tests/components/TokenAmountPrice.spec.ts
index 2ecb2ffbe3..2a55898c59 100644
--- a/packages/app/tests/components/TokenAmountPrice.spec.ts
+++ b/packages/app/tests/components/TokenAmountPrice.spec.ts
@@ -12,20 +12,20 @@ import type { Token } from "@/composables/useToken";
 
 import $testId from "@/plugins/testId";
 
-const ethToken: Token = {
-  address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
+const ethToken = {
+  l2Address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
   symbol: "ETH",
   name: "ETH",
   decimals: 18,
-  usdPrice: "3500",
-};
-const usdcToken: Token = {
-  address: "0xf6947d8dd3a019a151c1a44dc94033be15cb12f8",
+  usdPrice: 3500,
+} as Token;
+const usdcToken = {
+  l2Address: "0xf6947d8dd3a019a151c1a44dc94033be15cb12f8",
   symbol: "USDC",
   name: "USDC",
   decimals: 3,
-  usdPrice: "3500",
-};
+  usdPrice: 3500,
+} as Token;
 
 const i18n = createI18n({
   locale: "en",
diff --git a/packages/app/tests/components/TokenIconLabel.spec.ts b/packages/app/tests/components/TokenIconLabel.spec.ts
index f1ea2cfe80..2f0f88e2e6 100644
--- a/packages/app/tests/components/TokenIconLabel.spec.ts
+++ b/packages/app/tests/components/TokenIconLabel.spec.ts
@@ -6,16 +6,13 @@ import { describe, expect, it, vi } from "vitest";
 import { render } from "@testing-library/vue";
 import { mount, RouterLinkStub } from "@vue/test-utils";
 
-import { useTokenLibraryMock } from "../mocks";
+import { ETH_TOKEN_MOCK, useTokenLibraryMock } from "../mocks";
 
 import TokenIconLabel from "@/components/TokenIconLabel.vue";
 
 import enUS from "@/locales/en.json";
 
-import type { Token } from "@matterlabs/token-library";
-
 import $testId from "@/plugins/testId";
-import { ETH_TOKEN } from "@/utils/constants";
 
 describe("TokenIconLabel", () => {
   const i18n = createI18n({
@@ -37,16 +34,16 @@ describe("TokenIconLabel", () => {
       tokens: computed(() => []),
       getTokens: vi.fn(),
       getToken: () =>
-        <Token>{
-          ...ETH_TOKEN,
-          imageUrl: "https://test.link",
+        <Api.Response.Token>{
+          ...ETH_TOKEN_MOCK,
+          iconURL: "https://test.link",
         },
     });
     const wrapper = mount(TokenIconLabel, {
       global,
       props: {
-        symbol: ETH_TOKEN.symbol,
-        address: ETH_TOKEN.l2Address,
+        symbol: ETH_TOKEN_MOCK.symbol,
+        address: ETH_TOKEN_MOCK.l2Address,
       },
     });
     expect(wrapper.find("img")?.attributes("src")).toBe("https://test.link");
diff --git a/packages/app/tests/components/balances/BalanceValue.spec.ts b/packages/app/tests/components/balances/BalanceValue.spec.ts
index 46497dda06..7594ce4fd1 100644
--- a/packages/app/tests/components/balances/BalanceValue.spec.ts
+++ b/packages/app/tests/components/balances/BalanceValue.spec.ts
@@ -1,6 +1,4 @@
-import { computed } from "vue";
-
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 
 import { mount } from "@vue/test-utils";
 
@@ -12,15 +10,10 @@ const token: Api.Response.Token = {
   symbol: "ETH",
   name: "Ether",
   decimals: 18,
+  liquidity: 220000000000,
+  usdPrice: 150,
+  iconURL: null,
 };
-vi.mock("@/composables/useTokenPrice", () => {
-  return {
-    default: () => ({
-      getTokenPrice: async () => undefined,
-      tokenPrice: computed(() => "150"),
-    }),
-  };
-});
 
 describe("BalanceValue:", () => {
   it("renders component based on input", async () => {
diff --git a/packages/app/tests/components/balances/Table.spec.ts b/packages/app/tests/components/balances/Table.spec.ts
index b15abb986d..b28cdc473a 100644
--- a/packages/app/tests/components/balances/Table.spec.ts
+++ b/packages/app/tests/components/balances/Table.spec.ts
@@ -5,6 +5,8 @@ import { describe, expect, it, vi } from "vitest";
 
 import { mount, RouterLinkStub } from "@vue/test-utils";
 
+import { ETH_TOKEN_MOCK } from "../../mocks";
+
 import Table from "@/components/balances/Table.vue";
 
 import enUS from "@/locales/en.json";
@@ -12,15 +14,17 @@ import enUS from "@/locales/en.json";
 import type { Balances } from "@/composables/useAddress";
 
 import $testId from "@/plugins/testId";
-import { ETH_TOKEN } from "@/utils/constants";
 
-const tokenETH: Api.Response.Token = ETH_TOKEN;
+const tokenETH: Api.Response.Token = ETH_TOKEN_MOCK;
 const tokenLINK: Api.Response.Token = {
   l1Address: "0x514910771AF9Ca656af840dff83E8264EcF986CA",
   l2Address: "0x514910771AF9Ca656af840dff83E8264EcF986CA",
   symbol: "LINK",
   name: "ChainLink Token (goerli)",
   decimals: 18,
+  usdPrice: 100,
+  liquidity: 100000000,
+  iconURL: null,
 };
 const tokenWBTC: Api.Response.Token = {
   l1Address: "0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599",
@@ -28,16 +32,11 @@ const tokenWBTC: Api.Response.Token = {
   symbol: "wBTC",
   name: "Wrapped BTC",
   decimals: 8,
+  usdPrice: 35000,
+  liquidity: 10000000000,
+  iconURL: null,
 };
 
-vi.mock("@/composables/useTokenPrice", () => {
-  return {
-    default: () => ({
-      getTokenPrice: () => undefined,
-      tokenPrice: computed(() => "150"),
-    }),
-  };
-});
 vi.mock("@/composables/useTokenLibrary", () => {
   return {
     default: () => ({
@@ -94,7 +93,7 @@ describe("Table:", () => {
     const row = wrapper.find("tbody tr");
     const col = row.findAll("td");
     expect(col[0].find("span").text()).toBe("ETH");
-    expect(col[1].text()).toBe("100.0$15,000.00");
+    expect(col[1].text()).toBe("100.0$180,000.00");
     expect(col[2].find("span").text()).toBe("0x000000000000000000000000000000000000800A");
   });
   it("renders loading state", () => {
@@ -142,7 +141,7 @@ describe("Table:", () => {
               symbol: null,
               name: null,
               decimals: 8,
-            },
+            } as Api.Response.Token,
           },
         },
       },
diff --git a/packages/app/tests/components/token/TokenListTable.spec.ts b/packages/app/tests/components/token/TokenListTable.spec.ts
index 31b807b019..7441f9d0ca 100644
--- a/packages/app/tests/components/token/TokenListTable.spec.ts
+++ b/packages/app/tests/components/token/TokenListTable.spec.ts
@@ -7,7 +7,7 @@ import { mount, RouterLinkStub } from "@vue/test-utils";
 
 import TokenListTable from "@/components/token/TokenListTable.vue";
 
-import useToken from "@/composables/useToken";
+import useToken, { type Token } from "@/composables/useToken";
 
 import enUS from "@/locales/en.json";
 
@@ -50,13 +50,12 @@ describe("TokenListTable:", () => {
         tokens: [
           {
             decimals: 18,
-            imageUrl:
-              "https://firebasestorage.googleapis.com/v0/b/token-library.appspot.com/o/eth.svg?alt=media&token=1985e3d8-3aa7-4d04-8839-565d4c341615",
+            iconURL: "https://icon.com",
             l1Address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
             l2Address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
             name: "Ether",
             symbol: "ETH",
-          },
+          } as Token,
         ],
         loading: false,
       },
@@ -75,9 +74,7 @@ describe("TokenListTable:", () => {
     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://firebasestorage.googleapis.com/v0/b/token-library.appspot.com/o/eth.svg?alt=media&token=1985e3d8-3aa7-4d04-8839-565d4c341615"
-    );
+    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");
   });
diff --git a/packages/app/tests/components/transactions/Table.spec.ts b/packages/app/tests/components/transactions/Table.spec.ts
index 1ecb80b139..50cc9d4000 100644
--- a/packages/app/tests/components/transactions/Table.spec.ts
+++ b/packages/app/tests/components/transactions/Table.spec.ts
@@ -6,7 +6,7 @@ import { afterEach, beforeEach, describe, expect, it, type SpyInstance, vi } fro
 import { render, type RenderResult } from "@testing-library/vue";
 import { RouterLinkStub } from "@vue/test-utils";
 
-import { useContextMock, useTransactionsMock } from "../../mocks";
+import { ETH_TOKEN_MOCK, useContextMock, useTransactionsMock } from "../../mocks";
 
 import Table from "@/components/transactions/Table.vue";
 
@@ -17,7 +17,6 @@ import type { AbiFragment } from "@/composables/useAddress";
 import type { TransactionListItem } from "@/composables/useTransactions";
 
 import $testId from "@/plugins/testId";
-import { ETH_TOKEN } from "@/utils/constants";
 
 vi.mock("vue-router", () => ({
   useRoute: vi.fn(() => ({ query: {} })),
@@ -26,10 +25,10 @@ vi.mock("@/composables/useTokenLibrary", () => {
   return {
     default: () => ({
       getToken: (address: string) =>
-        address === ETH_TOKEN.l2Address
+        address === ETH_TOKEN_MOCK.l2Address
           ? {
-              ...ETH_TOKEN,
-              imageUrl: "https://test.link",
+              ...ETH_TOKEN_MOCK,
+              iconURL: "https://test.link",
             }
           : null,
       getTokens: () => undefined,
@@ -38,14 +37,6 @@ vi.mock("@/composables/useTokenLibrary", () => {
     }),
   };
 });
-vi.mock("@/composables/useTokenPrice", () => {
-  return {
-    default: () => ({
-      getTokenPrice: () => undefined,
-      tokenPrice: computed(() => "1"),
-    }),
-  };
-});
 
 const transaction: TransactionListItem = {
   hash: "0x20e564c3178e1f059c8ac391f35dd73c20ac4a4731b23fa7e436b3d221676ff6",
@@ -243,12 +234,12 @@ describe("Transfers:", () => {
 
     it("renders value column", () => {
       expect(renderResult!.getAllByTestId(elements.tokenAmount)[0].textContent).toEqual("0.0000123213123");
-      expect(renderResult!.getAllByTestId(elements.tokenAmountPrice)[0].textContent).toEqual("$0.00001");
+      expect(renderResult!.getAllByTestId(elements.tokenAmountPrice)[0].textContent).toEqual("$0.02");
     });
 
     it("renders fee column", () => {
       expect(renderResult!.getAllByTestId(elements.tokenAmount)[2].textContent).toEqual("0.00006550325");
-      expect(renderResult!.getAllByTestId(elements.tokenAmountPrice)[1].textContent).toEqual("$0.00007");
+      expect(renderResult!.getAllByTestId(elements.tokenAmountPrice)[1].textContent).toEqual("$0.12");
     });
   });
 
diff --git a/packages/app/tests/components/transactions/TokenAmountPriceTableCell.spec.ts b/packages/app/tests/components/transactions/TokenAmountPriceTableCell.spec.ts
index bc74a63cb5..f3e0bed661 100644
--- a/packages/app/tests/components/transactions/TokenAmountPriceTableCell.spec.ts
+++ b/packages/app/tests/components/transactions/TokenAmountPriceTableCell.spec.ts
@@ -1,7 +1,6 @@
-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 { RouterLinkStub } from "@vue/test-utils";
@@ -11,7 +10,6 @@ import TokenAmountPriceTableCell from "@/components/transactions/TokenAmountPric
 import enUS from "@/locales/en.json";
 
 import $testId from "@/plugins/testId";
-import { ETH_TOKEN } from "@/utils/constants";
 
 const i18n = createI18n({
   locale: "en",
@@ -28,19 +26,8 @@ const global = {
   plugins: [$testId, i18n],
 };
 
-const getTokenPriceMock = vi.fn();
-
-vi.mock("@/composables/useTokenPrice", () => {
-  return {
-    default: () => ({
-      getTokenPrice: getTokenPriceMock,
-      tokenPrice: computed(() => "3500"),
-    }),
-  };
-});
-
 describe("TokenAmountPriceTableCell", () => {
-  it("renders ETH token when no token provided", async () => {
+  it("renders '-' when no token provided", async () => {
     const { container } = render(TokenAmountPriceTableCell, {
       global,
       props: {
@@ -48,10 +35,7 @@ describe("TokenAmountPriceTableCell", () => {
       },
     });
 
-    expect(getTokenPriceMock).toHaveBeenCalledWith(ETH_TOKEN.l2Address);
-    expect(container.querySelector(".token-amount")?.textContent).toBe("0.01");
-    expect(container.querySelector(".token-symbol")?.textContent).toBe(ETH_TOKEN.symbol);
-    expect(container.querySelector(".token-price")?.textContent).toBe("$35.00");
+    expect(container.textContent).toBe("—");
   });
 
   it("renders ERC20 token when token is provided", async () => {
@@ -61,6 +45,7 @@ describe("TokenAmountPriceTableCell", () => {
       symbol: "ERC",
       name: "ERC",
       decimals: 18,
+      usdPrice: 3500,
     };
 
     const { container } = render(TokenAmountPriceTableCell, {
@@ -71,7 +56,6 @@ describe("TokenAmountPriceTableCell", () => {
       },
     });
 
-    expect(getTokenPriceMock).toHaveBeenCalledWith(erc20Token.l2Address);
     expect(container.querySelector(".token-amount")?.textContent).toBe("0.01");
     expect(container.querySelector(".token-symbol")?.textContent).toBe(erc20Token.symbol);
     expect(container.querySelector(".token-price")?.textContent).toBe("$35.00");
diff --git a/packages/app/tests/components/transactions/TransferTableCell.spec.ts b/packages/app/tests/components/transactions/TransferTableCell.spec.ts
index 5087ff37b8..72c986fabe 100644
--- a/packages/app/tests/components/transactions/TransferTableCell.spec.ts
+++ b/packages/app/tests/components/transactions/TransferTableCell.spec.ts
@@ -35,7 +35,6 @@ describe("TransferTableCell:", () => {
           fromNetwork: "L2",
           toNetwork: "L2",
           tokenInfo: {
-            address: "0x4732c03b2cf6ede46500e799de79a15df44929eb",
             decimals: 18,
             l1Address: "0x63bfb2118771bd0da7a6936667a7bb705a06c1ba",
             l2Address: "0x4732c03b2cf6ede46500e799de79a15df44929eb",
diff --git a/packages/app/tests/components/transfers/Table.spec.ts b/packages/app/tests/components/transfers/Table.spec.ts
index 8b92d5f64c..0ae976e6b1 100644
--- a/packages/app/tests/components/transfers/Table.spec.ts
+++ b/packages/app/tests/components/transfers/Table.spec.ts
@@ -7,7 +7,7 @@ import { render, type RenderResult } from "@testing-library/vue";
 import { RouterLinkStub } from "@vue/test-utils";
 import { useTimeAgo } from "@vueuse/core";
 
-import { useContextMock, useTransfersMock } from "./../../mocks";
+import { ETH_TOKEN_MOCK, useContextMock, useTransfersMock } from "./../../mocks";
 
 import Table from "@/components/transfers/Table.vue";
 
@@ -15,7 +15,6 @@ import enUS from "@/locales/en.json";
 import elements from "tests/e2e/testId.json";
 
 import $testId from "@/plugins/testId";
-import { ETH_TOKEN } from "@/utils/constants";
 
 vi.mock("vue-router", () => ({
   useRoute: vi.fn(),
@@ -24,10 +23,10 @@ vi.mock("@/composables/useTokenLibrary", () => {
   return {
     default: () => ({
       getToken: (address: string) =>
-        address === ETH_TOKEN.l2Address
+        address === ETH_TOKEN_MOCK.l2Address
           ? {
-              ...ETH_TOKEN,
-              imageUrl: "https://test.link",
+              ...ETH_TOKEN_MOCK,
+              iconURL: "https://test.link",
             }
           : null,
       getTokens: () => undefined,
@@ -36,14 +35,6 @@ vi.mock("@/composables/useTokenLibrary", () => {
     }),
   };
 });
-vi.mock("@/composables/useTokenPrice", () => {
-  return {
-    default: () => ({
-      getTokenPrice: () => undefined,
-      tokenPrice: computed(() => "1"),
-    }),
-  };
-});
 
 const transfer = {
   from: "0x0a27CaAeaD54cc6976175F6f4888beB1f871706b",
@@ -61,6 +52,7 @@ const transfer = {
     symbol: "USDC",
     name: "USD Coin (goerli)",
     decimals: 6,
+    usdPrice: 1,
   },
   fromNetwork: "L1",
   toNetwork: "L1",
diff --git a/packages/app/tests/composables/useToken.spec.ts b/packages/app/tests/composables/useToken.spec.ts
index 9862226fff..4f7dbb16ab 100644
--- a/packages/app/tests/composables/useToken.spec.ts
+++ b/packages/app/tests/composables/useToken.spec.ts
@@ -11,13 +11,11 @@ const token: Api.Response.Token = {
   symbol: "ETH",
   name: "Ether",
   decimals: 18,
+  usdPrice: 1800,
+  liquidity: 220000000000,
+  iconURL: "https://icon.url",
 };
 
-vi.mock("@/composables/useTokenPrice", () => {
-  return {
-    retrieveTokenPrice: () => Promise.resolve("3500"),
-  };
-});
 vi.mock("@/composables/useTokenLibrary", () => {
   return {
     default: () => ({
@@ -49,7 +47,11 @@ describe("useToken:", () => {
       symbol: "ETH",
       name: "Ether",
       decimals: 18,
-      usdPrice: "3500",
+      usdPrice: 1800,
+      iconURL: "https://icon.url",
+      l1Address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
+      l2Address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeb",
+      liquidity: 220000000000,
     });
   });
 });
diff --git a/packages/app/tests/composables/useTokenLibrary.spec.ts b/packages/app/tests/composables/useTokenLibrary.spec.ts
index 183e78357d..c6eca5bb79 100644
--- a/packages/app/tests/composables/useTokenLibrary.spec.ts
+++ b/packages/app/tests/composables/useTokenLibrary.spec.ts
@@ -2,54 +2,53 @@ import { computed } from "vue";
 
 import { describe, expect, it, vi } from "vitest";
 
-import * as tokenLibrary from "@matterlabs/token-library";
+import { $fetch, FetchError } from "ohmyfetch";
 
 import { GOERLI_BETA_NETWORK } from "../mocks";
 
 import useTokenLibrary from "@/composables/useTokenLibrary";
 
-const tokensCollection: tokenLibrary.Token[] = [
-  {
-    decimals: 18,
-    imageUrl:
-      "https://firebasestorage.googleapis.com/v0/b/token-library.appspot.com/o/eth.svg?alt=media&token=1985e3d8-3aa7-4d04-8839-565d4c341615",
-    l1Address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
-    l2Address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
-    name: "Ether",
-    symbol: "ETH",
-  },
-];
+vi.mock("ohmyfetch", async () => {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
+  const mod = await vi.importActual<typeof import("ohmyfetch")>("ohmyfetch");
+  return {
+    ...mod,
+    $fetch: vi.fn().mockResolvedValue([
+      {
+        decimals: 18,
+        iconURL: "https://icon.url",
+        l1Address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
+        l2Address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
+        name: "Ether",
+        symbol: "ETH",
+      } as Api.Response.Token,
+    ]),
+  };
+});
 
 describe("useTokenLibrary:", () => {
   it("caches the results", async () => {
-    const collectionMock = vi.spyOn(tokenLibrary, "getTokenCollection").mockResolvedValue(tokensCollection);
     const { getTokens } = useTokenLibrary();
     await getTokens();
     await getTokens();
-    expect(collectionMock).toHaveBeenCalledTimes(1);
-    collectionMock.mockRestore();
+    expect($fetch).toHaveBeenCalledTimes(1);
   });
   it("sets isRequestPending to true when request is pending", async () => {
-    const collectionMock = vi.spyOn(tokenLibrary, "getTokenCollection").mockResolvedValue(tokensCollection);
     const { isRequestPending, getTokens } = useTokenLibrary();
 
     const promise = getTokens();
 
     expect(isRequestPending.value).toEqual(true);
     await promise;
-    collectionMock.mockRestore();
   });
   it("sets isRequestPending to false when request is completed", async () => {
-    const collectionMock = vi.spyOn(tokenLibrary, "getTokenCollection").mockResolvedValue(tokensCollection);
     const { isRequestPending, getTokens } = useTokenLibrary();
     await getTokens();
     expect(isRequestPending.value).toEqual(false);
-    collectionMock.mockRestore();
   });
   it("sets isRequestFailed to true when request failed", async () => {
-    const collectionMock = vi
-      .spyOn(tokenLibrary, "getTokenCollection")
-      .mockRejectedValue(new Error("An error occurred"));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ($fetch as any).mockRejectedValueOnce(new FetchError("An error occurred"));
     const { isRequestFailed, getTokens } = useTokenLibrary({
       currentNetwork: computed(() => GOERLI_BETA_NETWORK),
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -57,6 +56,5 @@ describe("useTokenLibrary:", () => {
     await getTokens();
 
     expect(isRequestFailed.value).toEqual(true);
-    collectionMock.mockRestore();
   });
 });
diff --git a/packages/app/tests/composables/useTokenPrice.spec.ts b/packages/app/tests/composables/useTokenPrice.spec.ts
deleted file mode 100644
index 06b6a5351f..0000000000
--- a/packages/app/tests/composables/useTokenPrice.spec.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { computed } from "vue";
-
-import { afterEach, beforeEach, describe, expect, it, type SpyInstance, vi } from "vitest";
-
-import { GOERLI_NETWORK, useContextMock } from "../mocks";
-
-import * as useContext from "@/composables/useContext";
-import useTokenPrice from "@/composables/useTokenPrice";
-
-const token: Api.Response.Token = {
-  l1Address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
-  l2Address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeb",
-  symbol: "ETH",
-  name: "Ether",
-  decimals: 18,
-};
-
-vi.mock("@/composables/useTokenLibrary", () => {
-  return {
-    default: () => ({
-      getTokens: () => undefined,
-      getToken: () => token,
-    }),
-  };
-});
-vi.mock("ohmyfetch", () => {
-  return {
-    $fetch: vi.fn(() => Promise.resolve(token)),
-  };
-});
-
-describe("useTokenPrice:", () => {
-  let mockContext: SpyInstance;
-  beforeEach(() => {
-    mockContext = useContextMock();
-  });
-  afterEach(() => {
-    mockContext?.mockRestore();
-  });
-
-  it("requests token info", async () => {
-    const mockContextConfig = vi.spyOn(useContext, "default").mockReturnValue({
-      currentNetwork: computed(() => GOERLI_NETWORK),
-      getL2Provider: () => ({
-        getTokenPrice: vi.fn(() => Promise.resolve("3500")),
-      }),
-    } as any);
-    const { getTokenPrice, tokenPrice } = useTokenPrice();
-    await getTokenPrice(token.l2Address);
-    expect(tokenPrice.value).toEqual("3500");
-    mockContextConfig.mockRestore();
-  });
-});
diff --git a/packages/app/tests/composables/useTransaction.spec.ts b/packages/app/tests/composables/useTransaction.spec.ts
index 0c2ea496f3..9d8419c8d1 100644
--- a/packages/app/tests/composables/useTransaction.spec.ts
+++ b/packages/app/tests/composables/useTransaction.spec.ts
@@ -2,14 +2,12 @@ import { afterEach, beforeEach, describe, expect, it, type SpyInstance, vi } fro
 
 import { $fetch, FetchError } from "ohmyfetch";
 
-import { useContextMock } from "./../mocks";
+import { ETH_TOKEN_MOCK, useContextMock } from "./../mocks";
 
 import useTransaction, { getTransferNetworkOrigin } from "@/composables/useTransaction";
 
 import type { Context } from "@/composables/useContext";
 
-import { ETH_TOKEN } from "@/utils/constants";
-
 const hash = "0x011b4d03dd8c01f1049143cf9c4c817e4b167f1d1b83e5c6f0f10d89ba1e7bce";
 const hashPaidByPaymaster = "0x111b4d03dd8c01f1049143cf9c4c817e4b167f1d1b83e5c6f0f10d89ba1e7bce";
 
@@ -106,10 +104,10 @@ vi.mock("ohmyfetch", async () => {
               blockNumber: 1162235,
               transactionHash: hash,
               amount: "1561368069251910",
-              tokenAddress: ETH_TOKEN.address,
+              tokenAddress: ETH_TOKEN_MOCK.l2Address,
               type: "fee",
               fields: null,
-              token: ETH_TOKEN,
+              token: ETH_TOKEN_MOCK,
             },
             {
               from: "0x0000000000000000000000000000000000008001",
@@ -117,10 +115,10 @@ vi.mock("ohmyfetch", async () => {
               blockNumber: 1162235,
               transactionHash: hash,
               amount: "116665569251910",
-              tokenAddress: ETH_TOKEN.address,
+              tokenAddress: ETH_TOKEN_MOCK.l2Address,
               type: "refund",
               fields: null,
-              token: ETH_TOKEN,
+              token: ETH_TOKEN_MOCK,
             },
             {
               from: "0x08d211E22dB19741FF25838A22e4e696FeE7eD36",
@@ -156,10 +154,10 @@ vi.mock("ohmyfetch", async () => {
               blockNumber: 1162235,
               transactionHash: hash,
               amount: "867466250000000",
-              tokenAddress: ETH_TOKEN.address,
+              tokenAddress: ETH_TOKEN_MOCK.l2Address,
               type: "refund",
               fields: null,
-              token: ETH_TOKEN,
+              token: ETH_TOKEN_MOCK,
             },
           ],
           meta: {
@@ -186,10 +184,10 @@ vi.mock("ohmyfetch", async () => {
               blockNumber: 1162235,
               transactionHash: hashPaidByPaymaster,
               amount: "1561368069251910",
-              tokenAddress: ETH_TOKEN.address,
+              tokenAddress: ETH_TOKEN_MOCK.l2Address,
               type: "fee",
               fields: null,
-              token: ETH_TOKEN,
+              token: ETH_TOKEN_MOCK,
             },
             {
               from: "0x0000000000000000000000000000000000008001",
@@ -197,10 +195,10 @@ vi.mock("ohmyfetch", async () => {
               blockNumber: 1162235,
               transactionHash: hashPaidByPaymaster,
               amount: "116665569251910",
-              tokenAddress: ETH_TOKEN.address,
+              tokenAddress: ETH_TOKEN_MOCK.l2Address,
               type: "refund",
               fields: null,
-              token: ETH_TOKEN,
+              token: ETH_TOKEN_MOCK,
             },
           ],
           meta: {
@@ -416,6 +414,9 @@ describe("useTransaction:", () => {
                 symbol: "ETH",
                 name: "Ether",
                 decimals: 18,
+                iconURL: null,
+                liquidity: 220000000000,
+                usdPrice: 1800,
               },
             },
             {
@@ -432,6 +433,9 @@ describe("useTransaction:", () => {
                 symbol: "ETH",
                 name: "Ether",
                 decimals: 18,
+                iconURL: null,
+                liquidity: 220000000000,
+                usdPrice: 1800,
               },
             },
           ],
@@ -558,6 +562,9 @@ describe("useTransaction:", () => {
               symbol: "ETH",
               name: "Ether",
               decimals: 18,
+              iconURL: null,
+              liquidity: 220000000000,
+              usdPrice: 1800,
             },
           },
         ],
diff --git a/packages/app/tests/mocks.ts b/packages/app/tests/mocks.ts
index 71309a2118..109d5f2c51 100644
--- a/packages/app/tests/mocks.ts
+++ b/packages/app/tests/mocks.ts
@@ -20,6 +20,20 @@ import * as useTransfers from "@/composables/useTransfers";
 import type { NetworkConfig } from "@/configs";
 import type { Provider } from "zksync-web3";
 
+import { checksumAddress } from "@/utils/formatters";
+
+export const ETH_TOKEN_MOCK = {
+  address: checksumAddress("0x000000000000000000000000000000000000800A"),
+  l1Address: checksumAddress("0x0000000000000000000000000000000000000000"),
+  l2Address: checksumAddress("0x000000000000000000000000000000000000800A"),
+  symbol: "ETH",
+  name: "Ether",
+  decimals: 18,
+  liquidity: 220000000000,
+  usdPrice: 1800,
+  iconURL: null,
+};
+
 export const GOERLI_NETWORK: NetworkConfig = {
   name: "goerli",
   verificationApiUrl: "https://zksync2-testnet-explorer.zksync.dev",

From f3dd4a97d06f7d67e8c32082466fae080ccd93cd Mon Sep 17 00:00:00 2001
From: Roman Petriv <petriv.roma@gmail.com>
Date: Fri, 17 Nov 2023 09:33:30 +0200
Subject: [PATCH 2/5] fix: tests

---
 packages/app/mock/transactions/Execute.json   | 12 +++++-----
 .../transactions/EthAmountPrice.vue           |  3 +--
 .../TokenAmountPriceTableCell.vue             |  8 +++----
 packages/app/src/composables/useToken.ts      | 11 +++------
 packages/app/src/composables/useTransfers.ts  |  3 +++
 packages/app/tests/components/FeeData.spec.ts |  2 +-
 .../components/token/TokenListTable.spec.ts   |  2 +-
 .../transactions/GeneralInfo.spec.ts          | 24 ++++++++++++++-----
 .../transactions/TransferTableCell.spec.ts    |  2 +-
 .../app/tests/composables/useToken.spec.ts    |  1 -
 .../tests/composables/useTransaction.spec.ts  |  6 ++---
 .../tests/composables/useTransfers.spec.ts    |  6 +++++
 packages/app/tests/utils/formatters.spec.ts   | 10 ++++----
 packages/app/tests/views/HomeView.spec.ts     | 14 +++++++++--
 14 files changed, 65 insertions(+), 39 deletions(-)

diff --git a/packages/app/mock/transactions/Execute.json b/packages/app/mock/transactions/Execute.json
index 5dd4e8d3e8..ade6fbb50d 100644
--- a/packages/app/mock/transactions/Execute.json
+++ b/packages/app/mock/transactions/Execute.json
@@ -34,7 +34,7 @@
         "symbol": "LINK",
         "name": "ChainLink Token (goerli)",
         "decimals": 18,
-        "usdPrice": "1"
+        "usdPrice": 1
       },
       "from": "0xcfa3DD0CBa60484d1C8D0cDd22C5432013368875",
       "to": "0xde03a0B5963f75f1C8485B355fF6D30f3093BDE7",
@@ -48,7 +48,7 @@
         "symbol": "LINK",
         "name": "ChainLink Token (goerli)",
         "decimals": 18,
-        "usdPrice": "1"
+        "usdPrice": 1
       },
       "from": "0xcfa3DD0CBa60484d1C8D0cDd22C5432013368875",
       "to": "0x6c557bc88804254760Be210c01fd9B6B5dE96e53",
@@ -63,7 +63,7 @@
       "symbol": "LINK",
       "name": "ChainLink Token (goerli)",
       "decimals": 18,
-      "usdPrice": "1"
+      "usdPrice": 1
     },
     "from": "0xcfa3DD0CBa60484d1C8D0cDd22C5432013368875",
     "to": "0x6c557bc88804254760Be210c01fd9B6B5dE96e53",
@@ -78,7 +78,7 @@
         "symbol": "ETH",
         "name": "Ether",
         "decimals": 18,
-        "usdPrice": "1"
+        "usdPrice": 1
       },
       "from": "0xcfa3DD0CBa60484d1C8D0cDd22C5432013368875",
       "to": "0xde03a0B5963f75f1C8485B355fF6D30f3093BDE7",
@@ -95,7 +95,7 @@
         "symbol": "LINK",
         "name": "ChainLink Token (goerli)",
         "decimals": 18,
-        "usdPrice": "1"
+        "usdPrice": 1
       },
       "from": "0xcfa3DD0CBa60484d1C8D0cDd22C5432013368875",
       "to": "0x6c557bc88804254760Be210c01fd9B6B5dE96e53",
@@ -114,7 +114,7 @@
         "symbol": "LINK",
         "name": "ChainLink Token (goerli)",
         "decimals": 18,
-        "usdPrice": "1"
+        "usdPrice": 1
       },
       "from": "0xcfa3DD0CBa60484d1C8D0cDd22C5432013368875",
       "to": "0x6c557bc88804254760Be210c01fd9B6B5dE96e53",
diff --git a/packages/app/src/components/transactions/EthAmountPrice.vue b/packages/app/src/components/transactions/EthAmountPrice.vue
index 9c9af507f7..60469e4281 100644
--- a/packages/app/src/components/transactions/EthAmountPrice.vue
+++ b/packages/app/src/components/transactions/EthAmountPrice.vue
@@ -6,9 +6,8 @@ import { computed, type PropType } from "vue";
 
 import TokenAmountPrice from "@/components/TokenAmountPrice.vue";
 
-import useToken from "@/composables/useToken";
+import useToken, { type Token } from "@/composables/useToken";
 
-import type { Token } from "@/composables/useToken";
 import type { BigNumberish } from "ethers";
 
 import { ETH_TOKEN_L2_ADDRESS } from "@/utils/constants";
diff --git a/packages/app/src/components/transactions/TokenAmountPriceTableCell.vue b/packages/app/src/components/transactions/TokenAmountPriceTableCell.vue
index 1066083eb2..67281ac996 100644
--- a/packages/app/src/components/transactions/TokenAmountPriceTableCell.vue
+++ b/packages/app/src/components/transactions/TokenAmountPriceTableCell.vue
@@ -1,14 +1,14 @@
 <template>
-  <TokenAmountPrice :token="token" :amount="amount" v-slot="{ token, decimalAmount, priceAmount }">
-    <template v-if="token && decimalAmount">
+  <TokenAmountPrice :token="token" :amount="amount" v-slot="{ token: tokenInfo, decimalAmount, priceAmount }">
+    <template v-if="tokenInfo && decimalAmount">
       <div class="token-amount-symbol">
         <Tooltip class="token-amount-short" :disabled="decimalAmount.length < 10">
           {{ shortenFitText(decimalAmount, "right", 100, 10) }}
 
-          <template #content>{{ decimalAmount }} {{ token.symbol }}</template>
+          <template #content>{{ decimalAmount }} {{ tokenInfo.symbol }}</template>
         </Tooltip>
         <div class="token-amount" :data-testid="$testId.tokenAmount">{{ decimalAmount }}</div>
-        <TokenIconLabel class="token-icon" :address="token.l2Address" :symbol="token.symbol" show-link-symbol />
+        <TokenIconLabel class="token-icon" :address="tokenInfo.l2Address" :symbol="tokenInfo.symbol" show-link-symbol />
       </div>
       <span v-if="showPrice" class="token-price" :data-testid="$testId.tokenAmountPrice">
         {{ priceAmount }}
diff --git a/packages/app/src/composables/useToken.ts b/packages/app/src/composables/useToken.ts
index 94df8f4e72..3f1a7c308f 100644
--- a/packages/app/src/composables/useToken.ts
+++ b/packages/app/src/composables/useToken.ts
@@ -6,11 +6,9 @@ import { $fetch } from "ohmyfetch";
 import useContext, { type Context } from "@/composables/useContext";
 import useTokenLibrary from "@/composables/useTokenLibrary";
 
-import type { Address, Hash } from "@/types";
+import type { Hash } from "@/types";
 
-export type Token = Api.Response.Token & {
-  address: Address;
-};
+export type Token = Api.Response.Token;
 
 export const retrieveToken = useMemoize(
   (tokenAddress: Hash, context: Context = useContext()): Promise<Api.Response.Token> => {
@@ -40,10 +38,7 @@ export default () => {
       await getTokens();
       const tokenFromLibrary = getToken(address);
       const token = tokenFromLibrary || (await retrieveToken(address));
-      tokenInfo.value = {
-        ...token,
-        address: token.l2Address,
-      };
+      tokenInfo.value = token;
     } catch {
       isRequestFailed.value = true;
     } finally {
diff --git a/packages/app/src/composables/useTransfers.ts b/packages/app/src/composables/useTransfers.ts
index d878e42acb..ed710af25c 100644
--- a/packages/app/src/composables/useTransfers.ts
+++ b/packages/app/src/composables/useTransfers.ts
@@ -24,6 +24,9 @@ export default (address: ComputedRef<string>, context = useContext()) => {
         name: null,
         symbol: null,
         decimals: 0,
+        usdPrice: null,
+        liquidity: null,
+        iconURL: null,
       },
       fromNetwork: transfer.type === "deposit" ? "L1" : "L2",
       toNetwork: transfer.type === "withdrawal" ? "L1" : "L2",
diff --git a/packages/app/tests/components/FeeData.spec.ts b/packages/app/tests/components/FeeData.spec.ts
index 1c44300fb3..94e9e713e8 100644
--- a/packages/app/tests/components/FeeData.spec.ts
+++ b/packages/app/tests/components/FeeData.spec.ts
@@ -25,7 +25,7 @@ vi.mock("@/composables/useToken", () => {
         name: "Ether",
         symbol: "ETH",
         decimals: 18,
-        usdPrice: "150",
+        usdPrice: 150,
       })),
     }),
   };
diff --git a/packages/app/tests/components/token/TokenListTable.spec.ts b/packages/app/tests/components/token/TokenListTable.spec.ts
index 7441f9d0ca..9cd397ef5e 100644
--- a/packages/app/tests/components/token/TokenListTable.spec.ts
+++ b/packages/app/tests/components/token/TokenListTable.spec.ts
@@ -29,7 +29,7 @@ vi.mock("@/composables/useToken", () => {
         name: "Ether",
         symbol: "ETH",
         decimals: 18,
-        usdPrice: "150",
+        usdPrice: 150,
       })),
     }),
   };
diff --git a/packages/app/tests/components/transactions/GeneralInfo.spec.ts b/packages/app/tests/components/transactions/GeneralInfo.spec.ts
index 6a153578f0..9b101af347 100644
--- a/packages/app/tests/components/transactions/GeneralInfo.spec.ts
+++ b/packages/app/tests/components/transactions/GeneralInfo.spec.ts
@@ -1,10 +1,12 @@
-import { nextTick } from "vue";
+import { computed, nextTick } from "vue";
 import { createI18n } from "vue-i18n";
 
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 
 import { mount, RouterLinkStub } from "@vue/test-utils";
 
+import { ETH_TOKEN_MOCK } from "../../mocks";
+
 import Badge from "@/components/common/Badge.vue";
 import Tooltip from "@/components/common/Tooltip.vue";
 import Table from "@/components/transactions/infoTable/GeneralInfo.vue";
@@ -46,9 +48,9 @@ const transaction: TransactionItem = {
         toNetwork: "L2",
         type: "refund",
         tokenInfo: {
-          address: "0x0000000000000000000000000000000000000000",
+          address: "0x000000000000000000000000000000000000800A",
           l1Address: "0x0000000000000000000000000000000000000000",
-          l2Address: "0x0000000000000000000000000000000000000000",
+          l2Address: "0x000000000000000000000000000000000000800A",
           symbol: "ETH",
           name: "Ether",
           decimals: 18,
@@ -62,9 +64,9 @@ const transaction: TransactionItem = {
         toNetwork: "L2",
         type: "refund",
         tokenInfo: {
-          address: "0x0000000000000000000000000000000000000000",
+          address: "0x000000000000000000000000000000000000800A",
           l1Address: "0x0000000000000000000000000000000000000000",
-          l2Address: "0x0000000000000000000000000000000000000000",
+          l2Address: "0x000000000000000000000000000000000000800A",
           symbol: "ETH",
           name: "Ether",
           decimals: 18,
@@ -170,6 +172,16 @@ const transaction: TransactionItem = {
   ],
 };
 
+vi.mock("@/composables/useToken", () => {
+  return {
+    default: () => ({
+      getTokenInfo: vi.fn(),
+      tokenInfo: computed(() => ETH_TOKEN_MOCK),
+      isRequestPending: computed(() => false),
+    }),
+  };
+});
+
 describe("Transaction info table", () => {
   const i18n = createI18n({
     locale: "en",
diff --git a/packages/app/tests/components/transactions/TransferTableCell.spec.ts b/packages/app/tests/components/transactions/TransferTableCell.spec.ts
index 72c986fabe..0f7b703484 100644
--- a/packages/app/tests/components/transactions/TransferTableCell.spec.ts
+++ b/packages/app/tests/components/transactions/TransferTableCell.spec.ts
@@ -40,7 +40,7 @@ describe("TransferTableCell:", () => {
             l2Address: "0x4732c03b2cf6ede46500e799de79a15df44929eb",
             name: "ChainLink Token (goerli)",
             symbol: "LINK",
-            usdPrice: "1",
+            usdPrice: 1,
           },
         },
       },
diff --git a/packages/app/tests/composables/useToken.spec.ts b/packages/app/tests/composables/useToken.spec.ts
index 4f7dbb16ab..726f55585d 100644
--- a/packages/app/tests/composables/useToken.spec.ts
+++ b/packages/app/tests/composables/useToken.spec.ts
@@ -43,7 +43,6 @@ describe("useToken:", () => {
     const { getTokenInfo, tokenInfo } = useToken();
     await getTokenInfo(token.l2Address);
     expect(tokenInfo.value).toEqual({
-      address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeb",
       symbol: "ETH",
       name: "Ether",
       decimals: 18,
diff --git a/packages/app/tests/composables/useTransaction.spec.ts b/packages/app/tests/composables/useTransaction.spec.ts
index 9d8419c8d1..089e865f93 100644
--- a/packages/app/tests/composables/useTransaction.spec.ts
+++ b/packages/app/tests/composables/useTransaction.spec.ts
@@ -276,7 +276,7 @@ describe("useTransaction:", () => {
             symbol: "LINK",
             name: "ChainLink Token (goerli)",
             decimals: 18,
-            usdPrice: "1",
+            usdPrice: 1,
           },
           from: "0xcfa3dd0cba60484d1c8d0cdd22c5432013368875",
           to: "0xde03a0b5963f75f1c8485b355ff6d30f3093bde7",
@@ -299,7 +299,7 @@ describe("useTransaction:", () => {
             symbol: "LINK",
             name: "ChainLink Token (goerli)",
             decimals: 18,
-            usdPrice: "1",
+            usdPrice: 1,
           },
           from: "0xcfa3dd0cba60484d1c8d0cdd22c5432013368875",
           to: "0xde03a0b5963f75f1c8485b355ff6d30f3093bde7",
@@ -322,7 +322,7 @@ describe("useTransaction:", () => {
             symbol: "LINK",
             name: "ChainLink Token (goerli)",
             decimals: 18,
-            usdPrice: "1",
+            usdPrice: 1,
           },
           from: "0xcfa3dd0cba60484d1c8d0cdd22c5432013368875",
           to: "0xde03a0b5963f75f1c8485b355ff6d30f3093bde7",
diff --git a/packages/app/tests/composables/useTransfers.spec.ts b/packages/app/tests/composables/useTransfers.spec.ts
index 11a1f1f11a..bd32b7aaea 100644
--- a/packages/app/tests/composables/useTransfers.spec.ts
+++ b/packages/app/tests/composables/useTransfers.spec.ts
@@ -20,6 +20,9 @@ const baseTransferPayload = {
     name: "token name",
     symbol: "token symbol",
     decimals: 18,
+    iconURL: null,
+    usdPrice: null,
+    liquidity: null,
   },
   tokenAddress: "tokenAddress",
 };
@@ -90,6 +93,9 @@ describe("useTransfers:", () => {
           l2Address: "tokenAddress",
           name: null,
           symbol: null,
+          iconURL: null,
+          usdPrice: null,
+          liquidity: null,
         },
         type: "transfer",
         fromNetwork: "L2",
diff --git a/packages/app/tests/utils/formatters.spec.ts b/packages/app/tests/utils/formatters.spec.ts
index 5c944c42f6..1de7381228 100644
--- a/packages/app/tests/utils/formatters.spec.ts
+++ b/packages/app/tests/utils/formatters.spec.ts
@@ -63,16 +63,18 @@ describe("formatters:", () => {
   });
   describe("convert:", () => {
     const token = {
-      address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" as Address,
+      l2Address: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" as Address,
+      l1Address: null,
       symbol: "ETH",
       name: "ETH",
       decimals: 18,
-
-      usdPrice: "3500",
+      usdPrice: 3500,
+      liquidity: null,
+      iconURL: null,
     };
 
     it("return correct price", () => {
-      expect(convert("0x56bc75e2d63100000", token, token.usdPrice!)).toBe("350000.0");
+      expect(convert("0x56bc75e2d63100000", token, token.usdPrice.toString())).toBe("350000.0");
     });
     it("handles float price", () => {
       expect(convert("0x56bc75e2d63100000", token, "0.001")).toBe("0.1");
diff --git a/packages/app/tests/views/HomeView.spec.ts b/packages/app/tests/views/HomeView.spec.ts
index af64f00644..be3fbb269f 100644
--- a/packages/app/tests/views/HomeView.spec.ts
+++ b/packages/app/tests/views/HomeView.spec.ts
@@ -1,4 +1,4 @@
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import { createI18n } from "vue-i18n";
 
 import { describe, expect, it, vi } from "vitest";
@@ -7,7 +7,7 @@ import { render } from "@testing-library/vue";
 import { useTimeAgo } from "@vueuse/core";
 import { $fetch } from "ohmyfetch";
 
-import { useBatchesMock } from "../mocks";
+import { ETH_TOKEN_MOCK, useBatchesMock } from "../mocks";
 import { useTransactionsMock } from "../mocks";
 
 import ExecuteTx from "../../mock/transactions/Execute.json";
@@ -38,6 +38,16 @@ vi.mock("vue-router", () => ({
   useRoute: () => vi.fn(),
 }));
 
+vi.mock("@/composables/useToken", () => {
+  return {
+    default: () => ({
+      getTokenInfo: vi.fn(),
+      tokenInfo: computed(() => ETH_TOKEN_MOCK),
+      isRequestPending: computed(() => false),
+    }),
+  };
+});
+
 describe("HomeView:", () => {
   const i18n = createI18n({
     locale: "en",

From d328351ab25ebdcf24976092d9faef5367491dbe Mon Sep 17 00:00:00 2001
From: Roman Petriv <petriv.roma@gmail.com>
Date: Fri, 17 Nov 2023 10:13:00 +0200
Subject: [PATCH 3/5] fix: remove ERC20 tokens from tokens list tests for
 testnet

---
 packages/app/tests/e2e/features/copying.feature | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/app/tests/e2e/features/copying.feature b/packages/app/tests/e2e/features/copying.feature
index 332a60ee29..f0089581f5 100644
--- a/packages/app/tests/e2e/features/copying.feature
+++ b/packages/app/tests/e2e/features/copying.feature
@@ -167,10 +167,6 @@ Feature: Copying
     Examples:
       | Row             | Text                                       |
       | ETH             | 0x000000000000000000000000000000000000800A |
-      | USDC            | 0x0faF6df7054946141266420b43783387A78d82A9 |
-      | DAI             | 0x3e7676937A7E96CFB7616f255b9AD9FF47363D4b |
-      | wBTC            | 0x0BfcE1D53451B4a8175DD94e6e029F7d8a701e9c |
-      | LINK            | 0x40609141Db628BeEE3BfAB8034Fc2D8278D0Cc78 |
 
   @id275:I @mainnet
   Scenario Outline: Check "<Row>" hashes copying for Tokens page

From 3cc3c6aa9da9047d1cb5f80ce03cbbf7b40b8e42 Mon Sep 17 00:00:00 2001
From: Roman Petriv <petriv.roma@gmail.com>
Date: Fri, 17 Nov 2023 10:16:44 +0200
Subject: [PATCH 4/5] fix: csp

---
 packages/app/firebase.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/firebase.json b/packages/app/firebase.json
index 598ece64f5..f2525ac862 100644
--- a/packages/app/firebase.json
+++ b/packages/app/firebase.json
@@ -36,7 +36,7 @@
             },
             {
               "key": "Content-Security-Policy-Report-Only",
-              "value": "default-src 'self'; child-src 'self' blob:; script-src 'self' 'unsafe-eval' blob:; connect-src https://*.ingest.sentry.io https://firestore.googleapis.com/ https://*.zkscan.io https://*.zksync.io https://*.zksync.dev https://storage.googleapis.com; style-src 'self' fonts.googleapis.com; font-src 'self' fonts.gstatic.com; img-src 'self' 'https://assets.coingecko.com' blob: data: https://firebasestorage.googleapis.com/v0/b/token-library.appspot.com/o/;"
+              "value": "default-src 'self'; child-src 'self' blob:; script-src 'self' 'unsafe-eval' blob:; connect-src https://*.ingest.sentry.io https://firestore.googleapis.com/ https://*.zkscan.io https://*.zksync.io https://*.zksync.dev https://storage.googleapis.com; style-src 'self' fonts.googleapis.com; font-src 'self' fonts.gstatic.com; img-src 'self' https://assets.coingecko.com blob: data: https://firebasestorage.googleapis.com/v0/b/token-library.appspot.com/o/;"
             }
           ]
         }

From ee495b791ebd59ef63b491737f262762b1b66742 Mon Sep 17 00:00:00 2001
From: Roman Petriv <petriv.roma@gmail.com>
Date: Mon, 20 Nov 2023 16:30:20 +0200
Subject: [PATCH 5/5] fix: set min liquidity filter to zero

---
 packages/api/src/token/token.controller.ts                      | 2 +-
 packages/api/src/token/token.service.ts                         | 2 +-
 packages/app/src/composables/useTokenLibrary.ts                 | 2 +-
 packages/worker/.env.example                                    | 2 +-
 packages/worker/src/config.spec.ts                              | 2 +-
 packages/worker/src/config.ts                                   | 2 +-
 .../providers/portalsFiTokenOffChainDataProvider.spec.ts        | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/api/src/token/token.controller.ts b/packages/api/src/token/token.controller.ts
index 4b45ebb218..44ea613065 100644
--- a/packages/api/src/token/token.controller.ts
+++ b/packages/api/src/token/token.controller.ts
@@ -35,7 +35,7 @@ export class TokenController {
     name: "minLiquidity",
     type: "integer",
     description: "Min liquidity filter",
-    example: 1000000,
+    example: 100000,
     required: false,
   })
   public async getTokens(
diff --git a/packages/api/src/token/token.service.ts b/packages/api/src/token/token.service.ts
index ef77a5f9ae..c4dd045655 100644
--- a/packages/api/src/token/token.service.ts
+++ b/packages/api/src/token/token.service.ts
@@ -43,7 +43,7 @@ export class TokenService {
     paginationOptions: IPaginationOptions
   ): Promise<Pagination<Token>> {
     const queryBuilder = this.tokenRepository.createQueryBuilder("token");
-    if (minLiquidity > 0) {
+    if (minLiquidity >= 0) {
       queryBuilder.where({
         liquidity: MoreThanOrEqual(minLiquidity),
       });
diff --git a/packages/app/src/composables/useTokenLibrary.ts b/packages/app/src/composables/useTokenLibrary.ts
index 6db8a5b815..9c92820b45 100644
--- a/packages/app/src/composables/useTokenLibrary.ts
+++ b/packages/app/src/composables/useTokenLibrary.ts
@@ -8,7 +8,7 @@ import useContext, { type Context } from "@/composables/useContext";
 const retrieveTokens = useMemoize(
   async (context: Context): Promise<Api.Response.Token[]> => {
     const tokensResponse = await $fetch<Api.Response.Collection<Api.Response.Token>>(
-      `${context.currentNetwork.value.apiUrl}/tokens?minLiquidity=1000000&limit=100`
+      `${context.currentNetwork.value.apiUrl}/tokens?minLiquidity=0&limit=100`
     );
     return tokensResponse.items;
   },
diff --git a/packages/worker/.env.example b/packages/worker/.env.example
index 6cb58083b4..eb575ece89 100644
--- a/packages/worker/.env.example
+++ b/packages/worker/.env.example
@@ -32,7 +32,7 @@ DISABLE_BLOCKS_REVERT=false
 
 ENABLE_TOKEN_OFFCHAIN_DATA_SAVER=false
 UPDATE_TOKEN_OFFCHAIN_DATA_INTERVAL=86400000
-TOKEN_OFFCHAIN_DATA_MIN_LIQUIDITY_FILTER=1000000
+TOKEN_OFFCHAIN_DATA_MIN_LIQUIDITY_FILTER=0
 
 FROM_BLOCK=0
 TO_BLOCK=
diff --git a/packages/worker/src/config.spec.ts b/packages/worker/src/config.spec.ts
index f4de4129bb..2b5ae3909a 100644
--- a/packages/worker/src/config.spec.ts
+++ b/packages/worker/src/config.spec.ts
@@ -45,7 +45,7 @@ describe("config", () => {
       tokens: {
         enableTokenOffChainDataSaver: false,
         updateTokenOffChainDataInterval: 86_400_000,
-        tokenOffChainDataMinLiquidityFilter: 1000_000,
+        tokenOffChainDataMinLiquidityFilter: 0,
       },
       metrics: {
         collectDbConnectionPoolMetricsInterval: 10000,
diff --git a/packages/worker/src/config.ts b/packages/worker/src/config.ts
index f30fed7b75..bf14f74486 100644
--- a/packages/worker/src/config.ts
+++ b/packages/worker/src/config.ts
@@ -59,7 +59,7 @@ export default () => {
     tokens: {
       enableTokenOffChainDataSaver: ENABLE_TOKEN_OFFCHAIN_DATA_SAVER === "true",
       updateTokenOffChainDataInterval: parseInt(UPDATE_TOKEN_OFFCHAIN_DATA_INTERVAL, 10) || 86_400_000,
-      tokenOffChainDataMinLiquidityFilter: parseInt(TOKEN_OFFCHAIN_DATA_MIN_LIQUIDITY_FILTER, 10) || 1000_000,
+      tokenOffChainDataMinLiquidityFilter: parseInt(TOKEN_OFFCHAIN_DATA_MIN_LIQUIDITY_FILTER, 10) || 0,
     },
     metrics: {
       collectDbConnectionPoolMetricsInterval: parseInt(COLLECT_DB_CONNECTION_POOL_METRICS_INTERVAL, 10) || 10000,
diff --git a/packages/worker/src/token/tokenOffChainData/providers/portalsFiTokenOffChainDataProvider.spec.ts b/packages/worker/src/token/tokenOffChainData/providers/portalsFiTokenOffChainDataProvider.spec.ts
index 98e9ac105a..678c1119b9 100644
--- a/packages/worker/src/token/tokenOffChainData/providers/portalsFiTokenOffChainDataProvider.spec.ts
+++ b/packages/worker/src/token/tokenOffChainData/providers/portalsFiTokenOffChainDataProvider.spec.ts
@@ -7,7 +7,7 @@ import { setTimeout } from "timers/promises";
 import * as rxjs from "rxjs";
 import { PortalsFiTokenOffChainDataProvider } from "./portalsFiTokenOffChainDataProvider";
 
-const MIN_TOKENS_LIQUIDITY_FILTER = 1000000;
+const MIN_TOKENS_LIQUIDITY_FILTER = 0;
 const TOKENS_INFO_API_URL = "https://api.portals.fi/v2/tokens";
 const TOKENS_INFO_API_QUERY = `networks=ethereum&limit=250&sortBy=liquidity&minLiquidity=${MIN_TOKENS_LIQUIDITY_FILTER}&sortDirection=desc`;