Merge pull request #30 from Kolektivo-Labs/AnotherDev/Add-pools-header

Another dev/add pools header

src/components/_global/BalCard/BalCard.vue

@@ -129,7 +129,7 @@ export default defineComponent({
 }
 
 .card-container {
-  @apply flex flex-col;
+  @apply flex flex-col h-full;
 }
 
 .card-container::-webkit-scrollbar {

src/components/contextual/pages/dashboard/Cards/RefiProfileCard.vue

@@ -8,6 +8,7 @@ import MintNFTModal from '../Modals/MintNFTModal.vue';
 import { NFTData as TNFTData } from '@/services/campaigns/campaigns.service';
 import IsMintingNFTModal from '../Modals/IsMintingNFTModal.vue';
 import IsUpgradingNFTModal from '../Modals/IsUpgradingNFTModal.vue';
+import { ref, computed, watch } from 'vue';
 
 const { startConnectWithInjectedProvider } = useWeb3();
 const { isMobile, bp } = useBreakpoints();
@@ -30,6 +31,8 @@ const hasNFT = computed(
 
 const isAbleToUpgradeNFT = computed(() => NFTData?.value?.isAbleToUpgrade[0]);
 
+const isImageLoaded = ref<boolean>(false);
+
 const isOpenUpgradeNFTModal = ref(false);
 const isOpenMintNFTModal = ref(false);
 
@@ -55,10 +58,6 @@ watch([isRefetchingNFTData, isMintingNFTStatus.value], () => {
     };
   }
 });
-watch(NFTData, () => {
-  console.debug(NFTData.value);
-});
-
 onMounted(() => {
   isUpgradingNFTStatus.value = {
     loading: false,
@@ -291,15 +290,23 @@ function handleMintNFTClose() {
       :nftData="(NFTData as TNFTData)"
       :isOpenModal="isOpenUpgradeNFTModal"
       :nftImage="(nftImageSrc as string)"
-      @load="isImageLoaded = true"
+      @load="
+        () => {
+          isImageLoaded = true;
+        }
+      "
       @close="handleUpgradeNFTClose"
     />
     <MintNFTModal
       :nftData="(NFTData as TNFTData)"
       :isOpenModal="isOpenMintNFTModal"
       :nftImage="(nftImageSrc as string)"
       @close="handleMintNFTClose"
-      @load="isImageLoaded = true"
+      @load="
+        () => {
+          isImageLoaded = true;
+        }
+      "
     />
     <IsMintingNFTModal v-if="isMintingNFTStatus.loadingTxn && !isImageLoaded" />
     <IsUpgradingNFTModal

src/components/heros/HomePageHero.vue

@@ -1,16 +1,73 @@
 <script lang="ts" setup>
-import AppHero from '@/components/heros/AppHero.vue';
+import usePoolsVolumeQuery from '@/composables/queries/usePoolsVolumeQuery';
+import useNumbers from '@/composables/useNumbers';
+
+const { data: poolsVolumes, isLoading: isPoolsVolumesLoading } =
+  usePoolsVolumeQuery();
+const { toFiatLabel } = useNumbers();
+type Props = {
+  tokensAmount: number;
+};
+
+defineProps<Props>();
 </script>
 
+
+
 <template>
-  <AppHero class="h-44">
-    <h1 class="headline" v-text="$t('defiLiquidityPools')" />
-    <p class="mt-2 text-xl text-white" v-text="$t('builtOnBalancer')" />
-  </AppHero>
+  <div class="xl:container xl:px-4 pt-10 md:pt-8 xl:mx-auto">
+    <div class="flex flex-col lg:flex-row gap-4">
+      <BalCard exposeOverflow>
+        <div class="flex flex-col gap-4">
+          <div class="flex flex-row gap-4 justify-center items-center">
+            <div
+              class="py-2 px-3 w-full rounded-md border dark:border-gray-900 shadow-xl"
+            >
+              <h4
+                v-if="isPoolsVolumesLoading"
+                class="w-full text-base font-medium whitespace-nowrap"
+              >
+                TVL: ~$ --
+              </h4>
+              <h4 v-else class="w-full text-base font-medium whitespace-nowrap">
+                TVL: ~{{ toFiatLabel(poolsVolumes?.totalLiquidity) }}
+              </h4>
+            </div>
+            <div
+              class="py-2 px-3 w-full rounded-md border dark:border-gray-900 shadow-xl"
+            >
+              <h4
+                v-if="isPoolsVolumesLoading"
+                class="w-full text-base font-medium whitespace-nowrap"
+              >
+                Volume: ~$ --
+              </h4>
+              <h4 v-else class="w-full text-base font-medium whitespace-nowrap">
+                Volume: ~{{ toFiatLabel(poolsVolumes?.totalVolume) }}
+              </h4>
+            </div>
+          </div>
+          <p>
+            There are currently {{ tokensAmount }} tokens listed.
+            <a class="underline underline-offset-2" href="#">View all tokens</a>
+            or
+            <a class="underline underline-offset-2" href="#">
+              request a new token listing.
+            </a>
+          </p>
+        </div>
+      </BalCard>
+      <BalCard growContent>
+        <div class="flex flex-col justify-between items-start w-full h-full">
+          <h4>How pools function</h4>
+          <p>
+            Liquidity Providers add It is a long established fact that a reader
+            will be distracted by the readable content of a page when looking at
+            its layout. The point of using Lorem Ipsum is that it has.
+          </p>
+          <a class="underline underline-offset-2" href="#">Learn more</a>
+        </div>
+      </BalCard>
+    </div>
+  </div>
 </template>
-
-<style>
-.headline {
-  @apply text-white text-center text-4xl md:text-5xl pb-2 font-display font-normal;
-}
-</style>

src/composables/queries/usePoolsVolumeQuery.ts

@@ -0,0 +1,27 @@
+import { balancerSubgraphService } from '@/services/balancer/subgraph/balancer-subgraph.service';
+import { useQuery } from '@tanstack/vue-query';
+import useNetwork from '../useNetwork';
+import QUERY_KEYS from '@/constants/queryKeys';
+
+export default function usePoolsVolumeQuery() {
+  const { networkId } = useNetwork();
+
+  const getPoolsVolumesQueryFn = async () => {
+    try {
+      const { balancers: volumes } =
+        await balancerSubgraphService.balancers.get();
+      return {
+        totalLiquidity: volumes[0].totalLiquidity,
+        totalVolume: volumes[0].totalSwapVolume,
+      };
+    } catch (error) {
+      console.error('Error fetching TVL:', error);
+      throw error;
+    }
+  };
+  const getPoolsVolumesQueryKey = reactive(
+    QUERY_KEYS.Balancers.Pools(networkId)
+  );
+
+  return useQuery(getPoolsVolumesQueryKey, getPoolsVolumesQueryFn);
+}

src/constants/queryKeys.ts

@@ -290,6 +290,9 @@ const QUERY_KEYS = {
       endTime: number
     ) => ['swaps', 'week', { networkId, account, startTime, endTime }],
   },
+  Balancers: {
+    Pools: (networkId: Ref<Network>) => ['balancers', 'pools', { networkId }],
+  },
 };
 
 export default QUERY_KEYS;

src/pages/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
 
-import HomePageHero from '@/components/heros/HomePageHero.vue';
 import TokenSearchInput from '@/components/inputs/TokenSearchInput.vue';
 import FeaturedProtocols from '@/components/sections/FeaturedProtocols.vue';
 import PoolsTable from '@/components/tables/PoolsTable/PoolsTable.vue';
@@ -16,6 +15,7 @@ import { PoolType } from '@/services/pool/types';
 import PoolFeatureSelect from '@/components/inputs/PoolFeatureSelect.vue';
 import { useTokens } from '@/providers/tokens.provider';
 import { PoolAttributeFilter, PoolTypeFilter } from '@/types/pools';
+import HomePageHero from '@/components/heros/HomePageHero.vue';
 
 const featuredProtocolsSentinel = ref<HTMLDivElement | null>(null);
 const isFeaturedProtocolsVisible = ref(false);
@@ -29,6 +29,7 @@ useIntersectionObserver(featuredProtocolsSentinel, ([{ isIntersecting }]) => {
  * STATE
  */
 const route = useRoute();
+
 const urlSortParam = route.query?.sort as string | undefined;
 const initSortCol =
   urlSortParam || lsGet(LS_KEYS.App.PoolSorting) || 'totalLiquidity';
@@ -42,7 +43,7 @@ const filterPoolAttributes = ref<PoolAttributeFilter[]>([]);
  * COMPOSABLES
  */
 const router = useRouter();
-const { getToken } = useTokens();
+const { getToken, activeTokenListTokens } = useTokens();
 const { appNetworkConfig } = useNetwork();
 const isElementSupported = appNetworkConfig.supportsElementPools;
 const { selectedTokens, addSelectedToken, removeSelectedToken } =
@@ -60,6 +61,9 @@ const { upToSmallBreakpoint } = useBreakpoints();
 const { networkSlug, networkConfig } = useNetwork();
 
 const isPaginated = computed(() => pools.value.length >= 10);
+const currentTokensAmount = computed(
+  () => Object.keys(activeTokenListTokens.value).length
+);
 
 /**
  * METHODS
@@ -114,7 +118,7 @@ watch(poolTypeFilter, newPoolTypeFilter => {
 
 <template>
   <div>
-    <HomePageHero />
+    <HomePageHero :tokensAmount="currentTokensAmount" />
     <div class="xl:container xl:px-4 pt-10 md:pt-8 xl:mx-auto">
       <!-- <UserInvestedInAffectedPoolAlert /> -->
       <BalStack vertical>

src/providers/token-lists.provider.ts

@@ -38,7 +38,7 @@ const state: TokenListsState = reactive({
 const allTokenLists = ref({});
 
 const isTestMode = import.meta.env.MODE === 'test';
-const tokensListPromise = isTestMode // Return empty promise only in tests (vitest)
+const tokensListPromise = isTestMode // Return empty promise only in tests< (vitest)
   ? Promise.resolve()
   : import(`@/assets/data/tokenlists/tokens-${networkId.value}.json`);
 

src/services/balancer/subgraph/balancer-subgraph.service.ts

@@ -8,6 +8,7 @@ import PoolSnapshots from './entities/poolSnapshots';
 import PoolSwaps from './entities/poolSwaps';
 import TradePairSnapshots from './entities/swapPairs';
 import userSwaps from './entities/userSwaps';
+import balancers from './entities/balancers';
 
 export default class BalancerSubgraphService {
   pools: Pools;
@@ -17,19 +18,21 @@ export default class BalancerSubgraphService {
   poolSnapshots: PoolSnapshots;
   tradePairSnapshots: TradePairSnapshots;
   userSwaps: userSwaps;
+  balancers: balancers;
 
   constructor(
     readonly client = balancerSubgraphClient,
     readonly rpcProviderService = _rpcProviderService
   ) {
-    // Init entities
+    // Init entitiesp
     this.pools = new Pools(this);
     this.poolShares = new PoolShares(this);
     this.poolActivities = new PoolActivities(this);
     this.poolSwaps = new PoolSwaps(this);
     this.poolSnapshots = new PoolSnapshots(this);
     this.tradePairSnapshots = new TradePairSnapshots(this);
     this.userSwaps = new userSwaps(this);
+    this.balancers = new balancers(this);
   }
 }
 

src/services/balancer/subgraph/entities/balancers/index.ts

@@ -0,0 +1,19 @@
+import Service from '../../balancer-subgraph.service';
+import queryBuilder from './query';
+import { QueryBuilder } from '@/types/subgraph';
+
+export default class Balancers {
+  service: Service;
+  query: QueryBuilder;
+
+  constructor(service: Service, query: QueryBuilder = queryBuilder) {
+    this.service = service;
+    this.query = query;
+  }
+
+  public async get(args = {}, attrs = {}): Promise<any> {
+    const query = this.query(args, attrs);
+    const balancers = await this.service.client.get(query);
+    return balancers;
+  }
+}

src/services/balancer/subgraph/entities/balancers/query.ts

@@ -0,0 +1,14 @@
+import { merge } from 'lodash';
+
+const defaultArgs = {};
+const defaultAttrs = {
+  totalLiquidity: true,
+  totalSwapVolume: true,
+};
+
+export default (args = {}, attrs = {}) => ({
+  balancers: {
+    __args: merge({}, defaultArgs, args),
+    ...merge({}, defaultAttrs, attrs),
+  },
+});

vite.config.ts

@@ -19,7 +19,6 @@ import viteImagemin from 'vite-plugin-imagemin';
 export default defineConfig(({ mode }) => {
   const envConfig = loadEnv(mode, process.cwd());
   const isBuildAnalysis = process.env.BUILD_ANALIZE;
-
   const plugins = [
     vue(),
     createHtmlPlugin({
@@ -146,6 +145,7 @@ export default defineConfig(({ mode }) => {
         // Allows to import tailwind.config.js from useTailwind.ts
         // Check: https://github.com/tailwindlabs/tailwindcss.com/issues/765
         include: [
+          'tailwind.config.js',
           'button-options',
           'node_modules/**',
           'src/components/_global/BalBtn/button-options.js',