feat: use new tokens api (#91)

# What ❔

- use new tokens API
- remove token library
- remove token price API usage
- refactoring

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(

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

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/;"
             }
           ]
         }

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",

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",

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,16 +81,16 @@ 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) {
     return BigNumber.from(props.feeData.amountPaid).add(props.feeData.amountRefunded).toHexString();
   }
   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>

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>

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>
 

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>
 

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) {

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

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: {

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

@@ -6,12 +6,11 @@ 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 } from "@/utils/constants";
+import { ETH_TOKEN_L2_ADDRESS } from "@/utils/constants";
 
 defineProps({
   amount: {
@@ -22,9 +21,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>