Pool page optimisation (#2037)

* feat(pool): optimization of pool query (wip) * feat(pool): add use query apr and single pool service * feat(pool): add pool apr stat card loading * feat(pool): fix problem with apr calculating * feat(pool): remove logs * feat(pool): remove unnecessary code * feat(pool): fix problem with apr tooltip * fix calculator error * feat(pool): prevent pools snapshot and prices refetching * feat(pool): add intersection observer * feat(pool): implement fetching apr from sdk * feat(pool): fetch aprs fron sdk * feat(pool): return calculating apr on frontend * feat(pool): fix problem with apr calc * feat(pool): fix apr calc problem * fixes after code review * Fix spacing Co-authored-by: Gareth Fuller <[email protected]>
balancer · Jul 29, 2022 · 5d0ce62 · 5d0ce62 · vercel · Jul 29, 2022
1 parent 3267cb2
commit 5d0ce62
Show file tree

Hide file tree

Showing 20 changed files with 709 additions and 407 deletions.
diff --git a/src/components/contextual/pages/pool/PoolStatCards.vue b/src/components/contextual/pages/pool/PoolStatCards.vue
@@ -6,14 +6,16 @@ import APRTooltip from '@/components/tooltips/APRTooltip/APRTooltip.vue';
 import useNumbers, { FNumFormats } from '@/composables/useNumbers';
 import { totalAprLabel } from '@/composables/usePool';
 import { APR_THRESHOLD } from '@/constants/pools';
-import { Pool } from '@/services/pool/types';
+import { Pool, PoolAPRs } from '@/services/pool/types';
 
 /**
  * TYPES
  */
 type Props = {
   pool: Pool;
+  poolApr: PoolAPRs;
   loading?: boolean;
+  loadingApr?: boolean;
 };
 
 /**
@@ -33,7 +35,7 @@ const { t } = useI18n();
  * COMPUTED
  */
 const aprLabel = computed((): string => {
-  const poolAPRs = props.pool?.apr;
+  const poolAPRs = props.poolApr;
   if (!poolAPRs) return '0';
 
   return totalAprLabel(poolAPRs, props.pool.boost);
@@ -46,40 +48,46 @@ const stats = computed(() => {
     {
       id: 'poolValue',
       label: t('poolValue'),
-      value: fNum2(props.pool.totalLiquidity, FNumFormats.fiat)
+      value: fNum2(props.pool.totalLiquidity, FNumFormats.fiat),
+      loading: props.loading
     },
     {
       id: 'volumeTime',
       label: t('volumeTime', ['24h']),
-      value: fNum2(props.pool.volumeSnapshot || '0', FNumFormats.fiat)
+      value: fNum2(props.pool.volumeSnapshot || '0', FNumFormats.fiat),
+      loading: props.loading
     },
     {
       id: 'feesTime',
       label: t('feesTime', ['24h']),
-      value: fNum2(props.pool.feesSnapshot || '0', FNumFormats.fiat)
+      value: fNum2(props.pool.feesSnapshot || '0', FNumFormats.fiat),
+      loading: props.loading
     },
     {
       id: 'apr',
       label: 'APR',
       value:
-        Number(props.pool?.apr?.total.unstaked || '0') * 100 > APR_THRESHOLD
+        Number(props.poolApr?.total.unstaked || '0') * 100 > APR_THRESHOLD
           ? '-'
-          : aprLabel.value
+          : aprLabel.value,
+      loading: props.loadingApr
     }
   ];
 });
 </script>
 
 <template>
   <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
-    <template v-if="loading">
-      <BalLoadingBlock v-for="n in 4" :key="n" class="h-24" />
-    </template>
-    <template v-else>
-      <BalCard v-for="(stat, i) in stats" :key="i">
+    <template v-for="stat in stats" :key="stat.id">
+      <BalLoadingBlock v-if="stat.loading" class="h-24" />
+      <BalCard v-else>
         <div class="text-sm text-secondary font-medium mb-2 flex">
           <span>{{ stat.label }}</span>
-          <APRTooltip v-if="stat.id === 'apr'" :pool="pool" />
+          <APRTooltip
+            v-if="stat.id === 'apr'"
+            :pool="pool"
+            :poolApr="poolApr"
+          />
         </div>
         <div class="text-xl font-medium truncate flex items-center">
           {{ stat.value }}

diff --git a/...textual/pages/pool/PoolTransactionsCard/InvestmentTransactions/InvestmentTransactions.vue b/...textual/pages/pool/PoolTransactionsCard/InvestmentTransactions/InvestmentTransactions.vue
@@ -65,45 +65,47 @@ const activeTab = ref(tabs.value[0].value);
 
 <template>
   <div>
-    <h4
-      v-text="$t('poolTransactions.tabs.allInvestments')"
-      class="px-4 lg:px-0 mb-5"
-    />
-    <div
-      class="mx-4 lg:mx-0 flex justify-between items-end border-b dark:border-gray-900 mb-6"
-    >
-      <BalTabs v-model="activeTab" :tabs="tabs" no-pad class="-mb-px" />
+    <div>
+      <h4
+        v-text="$t('poolTransactions.tabs.allInvestments')"
+        class="px-4 lg:px-0 mb-5"
+      />
+      <div
+        class="mx-4 lg:mx-0 flex justify-between items-end border-b dark:border-gray-900 mb-6"
+      >
+        <BalTabs v-model="activeTab" :tabs="tabs" no-pad class="-mb-px" />
+      </div>
     </div>
-  </div>
 
-  <template v-if="isStablePhantomPool">
-    <BoostedActivities
-      v-if="activeTab === PoolTransactionsTab.ALL_ACTIVITY"
-      :pool-activity-type="PoolTransactionsTab.ALL_ACTIVITY"
-      :pool="pool"
-      :loading="loading"
-    />
-    <BoostedActivities
-      v-else-if="activeTab === PoolTransactionsTab.USER_ACTIVITY"
-      :pool-activity-type="PoolTransactionsTab.USER_ACTIVITY"
-      :pool="pool"
-      :loading="loading"
-    />
-  </template>
-  <template v-else>
-    <div class="mb-20">
-      <Activities
+    <template v-if="isStablePhantomPool">
+      <BoostedActivities
         v-if="activeTab === PoolTransactionsTab.ALL_ACTIVITY"
         :pool-activity-type="PoolTransactionsTab.ALL_ACTIVITY"
         :pool="pool"
         :loading="loading"
       />
-      <Activities
+      <BoostedActivities
         v-else-if="activeTab === PoolTransactionsTab.USER_ACTIVITY"
         :pool-activity-type="PoolTransactionsTab.USER_ACTIVITY"
         :pool="pool"
         :loading="loading"
       />
-    </div>
-  </template>
+    </template>
+    <template v-else>
+      <div class="mb-20">
+        <Activities
+          v-if="activeTab === PoolTransactionsTab.ALL_ACTIVITY"
+          :pool-activity-type="PoolTransactionsTab.ALL_ACTIVITY"
+          :pool="pool"
+          :loading="loading"
+        />
+        <Activities
+          v-else-if="activeTab === PoolTransactionsTab.USER_ACTIVITY"
+          :pool-activity-type="PoolTransactionsTab.USER_ACTIVITY"
+          :pool="pool"
+          :loading="loading"
+        />
+      </div>
+    </template>
+  </div>
 </template>
diff --git a/src/components/contextual/pages/pool/PoolTransactionsCard/PoolActivities/Table.vue b/src/components/contextual/pages/pool/PoolTransactionsCard/PoolActivities/Table.vue
@@ -135,7 +135,7 @@ function getJoinExitValue(amounts: PoolActivity['amounts']) {
     const amount = amounts[i];
     const address = getAddress(props.tokens[i]);
     const token = getToken(address);
-    const price = priceFor(token.address);
+    const price = priceFor(token?.address);
     const amountNumber = Math.abs(parseFloat(amount));
     // If the price is unknown for any of the positive amounts - the value cannot be computed.
     if (amountNumber > 0 && price === 0) {

diff --git a/...onents/contextual/pages/pool/PoolTransactionsCard/TradeTransactions/TradeTransactions.vue b/...onents/contextual/pages/pool/PoolTransactionsCard/TradeTransactions/TradeTransactions.vue
@@ -61,15 +61,17 @@ function loadMorePoolSwaps() {
 </script>
 
 <template>
-  <h4 v-text="$t('poolTransactions.tabs.trades')" class="px-4 lg:px-0 mb-5" />
+  <div>
+    <h4 v-text="$t('poolTransactions.tabs.trades')" class="px-4 lg:px-0 mb-5" />
 
-  <Table
-    :tokens="pool ? pool.tokensList : []"
-    :pool-swaps="poolSwaps"
-    :is-loading="loading || isLoadingPoolSwaps"
-    :is-loading-more="poolSwapsIsFetchingNextPage"
-    :is-paginated="poolSwapsHasNextPage"
-    @load-more="loadMorePoolSwaps"
-    :no-results-label="$t('poolTransactions.noResults.swaps')"
-  />
+    <Table
+      :tokens="pool ? pool.tokensList : []"
+      :pool-swaps="poolSwaps"
+      :is-loading="loading || isLoadingPoolSwaps"
+      :is-loading-more="poolSwapsIsFetchingNextPage"
+      :is-paginated="poolSwapsHasNextPage"
+      @load-more="loadMorePoolSwaps"
+      :no-results-label="$t('poolTransactions.noResults.swaps')"
+    />
+  </div>
 </template>