[Explore Page] Hide tokens & pools with zero tvl

src/views/Explore/Container.vue

@@ -57,7 +57,7 @@ export default class ExploreContainer extends Mixins(mixins.LoadingMixin, Transl
   @getter.wallet.account.isLoggedIn private isLoggedIn!: boolean;
 
   exploreQuery = '';
-  isAccountItems = Boolean(storage.get(storageKey as any));
+  isAccountItems = JSON.parse(storage.get(storageKey as any) ?? false);
 
   get isAccountItemsOnly(): boolean {
     return this.isAccountItems;

src/views/Explore/Pools.vue

@@ -120,7 +120,7 @@ import PoolApyMixin from '@/components/mixins/PoolApyMixin';
 import { state, getter } from '@/store/decorators';
 import { lazyComponent } from '@/router';
 import { Components } from '@/consts';
-import { formatAmountWithSuffix, formatDecimalPlaces } from '@/utils';
+import { formatAmountWithSuffix, formatDecimalPlaces, asZeroValue } from '@/utils';
 
 import type { Asset, Whitelist } from '@sora-substrate/util/build/assets/types';
 import type { AccountLiquidity } from '@sora-substrate/util/build/poolXyk/types';
@@ -157,6 +157,9 @@ export default class ExplorePools extends Mixins(ExplorePageMixin, TranslationMi
 
   get items(): TableItem[] {
     return Object.entries(this.poolReserves).reduce<any>((buffer, [key, reserves]) => {
+      // dont show empty pools
+      if (reserves.some((reserve) => asZeroValue(reserve))) return buffer;
+
       const matches = key.match(/0x\w{64}/g);
 
       if (!matches || !matches[0] || !matches[1] || !this.whitelist[matches[0]] || !this.whitelist[matches[1]])

src/views/Explore/Tokens.vue

@@ -187,7 +187,7 @@ type TableItem = {
 
 const AssetsQuery = gql`
   query AssetsQuery($after: Cursor, $ids: [String!], $dayTimestamp: Int, $weekTimestamp: Int) {
-    assets(after: $after, filter: { id: { in: $ids } }) {
+    assets(after: $after, filter: { and: [{ id: { in: $ids } }, { liquidity: { greaterThan: "0" } }] }) {
       pageInfo {
         hasNextPage
         endCursor
@@ -243,20 +243,23 @@ export default class Tokens extends Mixins(ExplorePageMixin, TranslationMixin) {
   }
 
   get preparedItems(): TableItem[] {
-    return this.items.map((item) => {
-      const fpPrice = FPNumber.fromCodecValue(this.getAssetFiatPrice(item) ?? 0);
-      const fpPriceDay = this.tokensData[item.address]?.startPriceDay ?? FPNumber.ZERO;
-      const fpPriceWeek = this.tokensData[item.address]?.startPriceWeek ?? FPNumber.ZERO;
-      const fpVolumeWeek = this.tokensData[item.address]?.volume ?? FPNumber.ZERO;
+    return Object.entries(this.tokensData).reduce<TableItem[]>((buffer, [address, tokenData]) => {
+      const asset = this.getAsset(address);
 
+      if (!asset) return buffer;
+
+      const fpPrice = FPNumber.fromCodecValue(this.getAssetFiatPrice(asset) ?? 0);
+      const fpPriceDay = tokenData?.startPriceDay ?? FPNumber.ZERO;
+      const fpPriceWeek = tokenData?.startPriceWeek ?? FPNumber.ZERO;
+      const fpVolumeWeek = tokenData?.volume ?? FPNumber.ZERO;
       const fpPriceChangeDay = calcPriceChange(fpPrice, fpPriceDay);
       const fpPriceChangeWeek = calcPriceChange(fpPrice, fpPriceWeek);
 
-      const reserves = this.tokensData[item.address]?.reserves ?? FPNumber.ZERO;
+      const reserves = tokenData?.reserves ?? FPNumber.ZERO;
       const tvl = reserves.mul(fpPrice);
 
-      return {
-        ...item,
+      buffer.push({
+        ...asset,
         price: fpPrice.toNumber(),
         priceFormatted: new FPNumber(fpPrice.toFixed(7)).toLocaleString(),
         priceChangeDay: fpPriceChangeDay.toNumber(),
@@ -267,8 +270,10 @@ export default class Tokens extends Mixins(ExplorePageMixin, TranslationMixin) {
         volumeWeekFormatted: formatAmountWithSuffix(fpVolumeWeek),
         tvl: tvl.toNumber(),
         tvlFormatted: formatAmountWithSuffix(tvl),
-      };
-    });
+      });
+
+      return buffer;
+    }, []);
   }
 
   // ExplorePageMixin method implementation
@@ -284,7 +289,7 @@ export default class Tokens extends Mixins(ExplorePageMixin, TranslationMixin) {
     const now = Math.floor(Date.now() / (5 * 60 * 1000)) * (5 * 60); // rounded to latest 5min snapshot (unix)
     const dayTimestamp = now - 60 * 60 * 24; // latest day snapshot (unix)
     const weekTimestamp = now - 60 * 60 * 24 * 7; // latest week snapshot (unix)
-    const ids = this.items.map((item) => item.address);
+    const ids = this.items.map((item) => item.address); // only whitelisted assets
 
     const tokensData = {};
     let hasNextPage = true;