From c7096ffad7c05d4c3a84e47af71ba5c4c1091a22 Mon Sep 17 00:00:00 2001 From: bearpong <178402093+bearpong@users.noreply.github.com> Date: Wed, 8 Jan 2025 19:34:56 -0500 Subject: [PATCH] chore(pol): removes loading from vaults homepage --- apps/hub/src/app/vaults/[address]/page.tsx | 17 ++---- .../app/vaults/components/RewardVaults.tsx | 52 +++++++++++++++++++ .../app/vaults/components/gauge-info-card.tsx | 17 +++--- apps/hub/src/app/vaults/components/gauge.tsx | 27 ---------- apps/hub/src/app/vaults/page.tsx | 28 ++++++++-- .../src/components/getRewardVaultsFilter.ts | 32 ++++++++++++ .../components/global-gauge-weight-chart.tsx | 4 +- .../components/global-gauge-weight-table.tsx | 38 +++++--------- apps/hub/src/utils/serverSidePublicClient.ts | 11 ++++ .../src/actions/bgt/getBGTGlobalInfo.ts | 4 +- .../berajs/src/actions/bgt/getGlobalData.ts | 36 +++++++++++++ packages/berajs/src/actions/bgt/index.ts | 2 + .../berajs/src/hooks/modules/bgt/index.ts | 2 +- .../hooks/modules/bgt/usePollGlobalData.ts | 44 +++------------- 14 files changed, 193 insertions(+), 121 deletions(-) create mode 100755 apps/hub/src/app/vaults/components/RewardVaults.tsx delete mode 100755 apps/hub/src/app/vaults/components/gauge.tsx create mode 100644 apps/hub/src/components/getRewardVaultsFilter.ts create mode 100644 apps/hub/src/utils/serverSidePublicClient.ts create mode 100644 packages/berajs/src/actions/bgt/getGlobalData.ts diff --git a/apps/hub/src/app/vaults/[address]/page.tsx b/apps/hub/src/app/vaults/[address]/page.tsx index c8ddc568c..af6b9a758 100755 --- a/apps/hub/src/app/vaults/[address]/page.tsx +++ b/apps/hub/src/app/vaults/[address]/page.tsx @@ -2,21 +2,15 @@ import React from "react"; import { type Metadata } from "next"; import { notFound } from "next/navigation"; import { isIPFS } from "@bera/config"; -import { - Address, - PublicClient, - createPublicClient, - http, - isAddress, -} from "viem"; +import { Address, PublicClient, isAddress } from "viem"; import { VaultDetails } from "./components/VaultDetails"; -import { defaultBeraNetworkConfig } from "@bera/wagmi/config"; import { getRewardVault, getRewardVaultStakingToken, } from "@bera/berajs/actions"; import { ApiVaultFragment } from "@bera/graphql/pol/api"; +import { getServerSidePublicClient } from "~/utils/serverSidePublicClient"; export function generateMetadata(): Metadata { return { @@ -42,12 +36,7 @@ export default async function PoolPage({ notFound(); } - const publicClient = createPublicClient({ - // @ts-ignore viem types - chain: defaultBeraNetworkConfig.chain, - transport: http(), - }); - + const publicClient = await getServerSidePublicClient(); const vaultPromise = getRewardVault(params.address); try { diff --git a/apps/hub/src/app/vaults/components/RewardVaults.tsx b/apps/hub/src/app/vaults/components/RewardVaults.tsx new file mode 100755 index 000000000..e6e7b3044 --- /dev/null +++ b/apps/hub/src/app/vaults/components/RewardVaults.tsx @@ -0,0 +1,52 @@ +"use client"; + +import React from "react"; +import { usePollGlobalData, usePollGlobalDataQueryKey } from "@bera/berajs"; + +import GlobalGaugeWeightChart from "~/components/global-gauge-weight-chart"; +import GaugeTables from "./gauge-tables"; +import GaugeInfoCard from "./gauge-info-card"; +import { GaugeCreation } from "./gauge-creation"; +import { SWRFallback } from "@bera/berajs"; +import { unstable_serialize } from "swr"; +import { useRewardVaultsQueryKey } from "@bera/berajs"; +import { getRewardVaultsFilter } from "~/components/getRewardVaultsFilter"; +import { GetGaugeData, GlobalData } from "@bera/berajs/actions"; + +export default function RewardVaults({ + vaults, + globalInfo, +}: { + vaults: GetGaugeData | undefined; + globalInfo: GlobalData | undefined; +}) { + return ( + + + + ); +} + +export function Gauge() { + const { data, isLoading: isGlobalDataLoading } = usePollGlobalData(); + return ( +
+
+ + +
+ + +
+ ); +} diff --git a/apps/hub/src/app/vaults/components/gauge-info-card.tsx b/apps/hub/src/app/vaults/components/gauge-info-card.tsx index 90427468e..1f87d0d35 100755 --- a/apps/hub/src/app/vaults/components/gauge-info-card.tsx +++ b/apps/hub/src/app/vaults/components/gauge-info-card.tsx @@ -18,8 +18,7 @@ import { Badge } from "@bera/ui/badge"; export default function GaugeInfoCard() { const { data: globalData, isLoading } = usePollGlobalData(); - const { data: bgtInflation, isLoading: isBgtInflationLoading } = - useBgtInflation(); + const { data: bgtInflation } = useBgtInflation(); const blockTime = useBlockTime(); @@ -30,7 +29,7 @@ export default function GaugeInfoCard() {
Active Reward Vaults
- {!isLoading ? ( + {globalData ? ( {globalData?.activeRewardVaultCount} @@ -42,7 +41,7 @@ export default function GaugeInfoCard() {
Active Incentives
- {!isLoading && globalData ? ( + {globalData ? ( Total Circulating BGT - {isLoading ? ( + {!globalData ? ( ) : (
@@ -72,7 +71,7 @@ export default function GaugeInfoCard() {
BGT Distribution (Yearly)
- {isBgtInflationLoading ? ( + {!bgtInflation ? ( ) : (
@@ -84,7 +83,7 @@ export default function GaugeInfoCard() { /> @@ -98,7 +97,7 @@ export default function GaugeInfoCard() {
# Of Active Validators
- {isLoading || !globalData ? ( + {!globalData ? ( ) : (
@@ -111,7 +110,7 @@ export default function GaugeInfoCard() {
Top 3 Validators
- {!isLoading && globalData ? ( + {globalData ? ( globalData.top3EmittingValidators?.map((validator, index) => { const estimatedBgtPerYear = getValidatorEstimatedBgtPerYear( validator, diff --git a/apps/hub/src/app/vaults/components/gauge.tsx b/apps/hub/src/app/vaults/components/gauge.tsx deleted file mode 100755 index 50e4ff870..000000000 --- a/apps/hub/src/app/vaults/components/gauge.tsx +++ /dev/null @@ -1,27 +0,0 @@ -"use client"; - -import React from "react"; -import { usePollGlobalData } from "@bera/berajs"; - -import GlobalGaugeWeightChart from "~/components/global-gauge-weight-chart"; -import GaugeTables from "./gauge-tables"; -import GaugeInfoCard from "./gauge-info-card"; -import { GaugeCreation } from "./gauge-creation"; - -export default function Gauge() { - const { data, isLoading: isGlobalDataLoading } = usePollGlobalData(); - return ( -
-
- - -
- - -
- ); -} diff --git a/apps/hub/src/app/vaults/page.tsx b/apps/hub/src/app/vaults/page.tsx index 6ac86b2eb..610ccaa1e 100755 --- a/apps/hub/src/app/vaults/page.tsx +++ b/apps/hub/src/app/vaults/page.tsx @@ -1,7 +1,29 @@ import React from "react"; -import Gauge from "./components/gauge"; +import RewardVaultsPage from "./components/RewardVaults"; +import { getGlobalData, getRewardVaults } from "@bera/berajs/actions"; +import { getRewardVaultsFilter } from "~/components/getRewardVaultsFilter"; +import { getServerSidePublicClient } from "~/utils/serverSidePublicClient"; +import { defaultBeraConfig } from "@bera/berajs/config"; -export default function Page() { - return ; +export default async function Page() { + const publicClient = await getServerSidePublicClient(); + + const [vaults, globalData] = await Promise.allSettled([ + getRewardVaults({ filter: getRewardVaultsFilter() }), + getGlobalData( + // @ts-ignore viem types + publicClient, + defaultBeraConfig, + ), + ]); + + return ( + + ); } diff --git a/apps/hub/src/components/getRewardVaultsFilter.ts b/apps/hub/src/components/getRewardVaultsFilter.ts new file mode 100644 index 000000000..8706df322 --- /dev/null +++ b/apps/hub/src/components/getRewardVaultsFilter.ts @@ -0,0 +1,32 @@ +import { + GqlRewardVaultOrderBy, + GqlRewardVaultOrderDirection, +} from "@bera/graphql/dex/api"; +import type { SortingState } from "@tanstack/react-table"; + +const map: Record = { + allTimeReceivedBGTAmount: GqlRewardVaultOrderBy.AllTimeBgtReceived, + dynamicData_bgtCapturePercentage: GqlRewardVaultOrderBy.BgtCapturePercentage, +}; +export const REWARD_VAULTS_PAGE_SIZE = 10; + +export const getRewardVaultsFilter = ( + sorting: SortingState = [], + page = 0, + pageSize = REWARD_VAULTS_PAGE_SIZE, + keywords = "", +) => { + return { + orderBy: map[sorting[0]?.id], + orderDirection: + sorting[0] !== undefined + ? sorting[0]?.desc + ? GqlRewardVaultOrderDirection.Desc + : GqlRewardVaultOrderDirection.Asc + : undefined, + skip: pageSize * page, + // filterByProduct: markets, + pageSize: pageSize, + search: keywords === "" || !keywords ? undefined : keywords, + }; +}; diff --git a/apps/hub/src/components/global-gauge-weight-chart.tsx b/apps/hub/src/components/global-gauge-weight-chart.tsx index f3f882cb8..cb04e20d5 100755 --- a/apps/hub/src/components/global-gauge-weight-chart.tsx +++ b/apps/hub/src/components/global-gauge-weight-chart.tsx @@ -139,9 +139,9 @@ export default function GlobalGaugeWeightChart({
{isLoading ? ( - + ) : ( -
+
= { - allTimeReceivedBGTAmount: GqlRewardVaultOrderBy.AllTimeBgtReceived, - dynamicData_bgtCapturePercentage: GqlRewardVaultOrderBy.BgtCapturePercentage, -}; export default function GlobalGaugeWeightTable({ myGauge = false, keywords = "", @@ -48,19 +43,12 @@ export default function GlobalGaugeWeightTable({ }, [markets]); const { data, isLoading, isValidating } = useRewardVaults( - { - orderBy: map[sorting[0]?.id], - orderDirection: - sorting[0] !== undefined - ? sorting[0]?.desc - ? GqlRewardVaultOrderDirection.Desc - : GqlRewardVaultOrderDirection.Asc - : undefined, - skip: GAUGE_PAGE_SIZE * page, - // filterByProduct: markets, - pageSize: GAUGE_PAGE_SIZE, - search: isTyping ? "" : keywords, - }, + getRewardVaultsFilter( + sorting, + page, + REWARD_VAULTS_PAGE_SIZE, + isTyping ? "" : keywords, + ), { opts: { keepPreviousData: true } }, ); @@ -97,7 +85,7 @@ export default function GlobalGaugeWeightTable({ typeof updater === "function" ? updater({ pageIndex: prev ?? 0, - pageSize: GAUGE_PAGE_SIZE, + pageSize: REWARD_VAULTS_PAGE_SIZE, }) : updater; return newPaginationState.pageIndex ?? 0; @@ -120,14 +108,14 @@ export default function GlobalGaugeWeightTable({ state: { pagination: { pageIndex: page, - pageSize: GAUGE_PAGE_SIZE, + pageSize: REWARD_VAULTS_PAGE_SIZE, }, sorting, }, manualSorting: true, manualPagination: true, autoResetPageIndex: false, - pageCount: Math.ceil(gaugeCounts / GAUGE_PAGE_SIZE), + pageCount: Math.ceil(gaugeCounts / REWARD_VAULTS_PAGE_SIZE), onPaginationChange: handlePaginationChange, onSortingChange: handleSortingChange, }, diff --git a/apps/hub/src/utils/serverSidePublicClient.ts b/apps/hub/src/utils/serverSidePublicClient.ts new file mode 100644 index 000000000..e8cb365af --- /dev/null +++ b/apps/hub/src/utils/serverSidePublicClient.ts @@ -0,0 +1,11 @@ +import { defaultBeraNetworkConfig } from "@bera/wagmi/config"; +import "server-only"; +import { createPublicClient, http } from "viem"; + +export const getServerSidePublicClient = async () => { + return createPublicClient({ + // @ts-ignore viem types + chain: defaultBeraNetworkConfig.chain, + transport: http(), + }); +}; diff --git a/packages/berajs/src/actions/bgt/getBGTGlobalInfo.ts b/packages/berajs/src/actions/bgt/getBGTGlobalInfo.ts index 453a83ca8..7d400833c 100755 --- a/packages/berajs/src/actions/bgt/getBGTGlobalInfo.ts +++ b/packages/berajs/src/actions/bgt/getBGTGlobalInfo.ts @@ -20,9 +20,7 @@ export interface GlobalInfo { annualizedBGTInflation: string; } -export const getBGTGlobalInfo = async ( - config: BeraConfig, -): Promise => { +export const getBGTGlobalInfo = async (): Promise => { const apiRes = await bexApiGraphqlClient.query< GlobalDataQuery, GlobalDataQueryVariables diff --git a/packages/berajs/src/actions/bgt/getGlobalData.ts b/packages/berajs/src/actions/bgt/getGlobalData.ts new file mode 100644 index 000000000..bce483003 --- /dev/null +++ b/packages/berajs/src/actions/bgt/getGlobalData.ts @@ -0,0 +1,36 @@ +import { PublicClient } from "viem"; +import { BeraConfig } from "~/types"; +import { getBGTGlobalInfo, GlobalInfo } from "./getBGTGlobalInfo"; +import { getGlobalCuttingBoard } from "./getGlobalCuttingBoard"; +import { getBgtTokenTotalSupply } from "./getBgtTokenTotalSupply"; +import { getBgtTokenTotalBoosts } from "./getBgtTokenTotalBoosts"; +import { ApiRewardAllocationWeightFragment } from "@bera/graphql/pol/api"; + +export interface GlobalData extends GlobalInfo { + globalCuttingBoard: ApiRewardAllocationWeightFragment[]; + bgtTotalSupply: string | undefined; + bgtTotalBoosts: string | undefined; +} +export const getGlobalData = async ( + publicClient: PublicClient, + config: BeraConfig, +): Promise => { + const [globalData, globalCuttingBoard, bgtTotalSupply, bgtTotalBoosts] = + await Promise.all([ + getBGTGlobalInfo(), + getGlobalCuttingBoard(300, config), + getBgtTokenTotalSupply({ + publicClient, + }), + getBgtTokenTotalBoosts({ + publicClient, + }), + ]); + + return { + bgtTotalSupply, + globalCuttingBoard, + bgtTotalBoosts, + ...globalData, + } satisfies GlobalData; +}; diff --git a/packages/berajs/src/actions/bgt/index.ts b/packages/berajs/src/actions/bgt/index.ts index 339b59593..9d684d847 100755 --- a/packages/berajs/src/actions/bgt/index.ts +++ b/packages/berajs/src/actions/bgt/index.ts @@ -1,3 +1,5 @@ export * from "./getUserVaultsReward"; export * from "./getRewardVault"; export * from "./getRewardVaultIncentives"; +export * from "./getRewardVaults"; +export * from "./getGlobalData"; diff --git a/packages/berajs/src/hooks/modules/bgt/index.ts b/packages/berajs/src/hooks/modules/bgt/index.ts index 6e75b7248..fee305ec7 100755 --- a/packages/berajs/src/hooks/modules/bgt/index.ts +++ b/packages/berajs/src/hooks/modules/bgt/index.ts @@ -3,7 +3,7 @@ export { useRewardVaults } from "./useRewardVaults"; export { useBgtApy } from "./useBgtApy"; export { usePollUserQueuedBoost } from "./usePollUserQueuedBoost"; export { usePollVaultsInfo } from "./usePollVaultsInfo"; -export { usePollGlobalData } from "./usePollGlobalData"; +export * from "./usePollGlobalData"; export { useBgtUnstakedBalance } from "./useBgtUnstakedBalance"; export { useUserVaults, type UserVault } from "./useUserVaults"; export { useSelectedValidator } from "./useSelectedValidator"; diff --git a/packages/berajs/src/hooks/modules/bgt/usePollGlobalData.ts b/packages/berajs/src/hooks/modules/bgt/usePollGlobalData.ts index 4d0a2fb3a..580e29d63 100755 --- a/packages/berajs/src/hooks/modules/bgt/usePollGlobalData.ts +++ b/packages/berajs/src/hooks/modules/bgt/usePollGlobalData.ts @@ -1,50 +1,20 @@ import useSWR from "swr"; import { usePublicClient } from "wagmi"; - -import { GlobalInfo, getBGTGlobalInfo } from "~/actions/bgt/getBGTGlobalInfo"; -import { getBgtTokenTotalSupply } from "~/actions/bgt/getBgtTokenTotalSupply"; -import { getGlobalCuttingBoard } from "~/actions/bgt/getGlobalCuttingBoard"; import { DefaultHookOptions, DefaultHookReturnType, useBeraJs } from "../../.."; -import { ApiRewardAllocationWeightFragment } from "@bera/graphql/pol/api"; -import { getBgtTokenTotalBoosts } from "~/actions/bgt/getBgtTokenTotalBoosts"; - -interface GlobalData extends GlobalInfo { - globalCuttingBoard: ApiRewardAllocationWeightFragment[]; - bgtTotalSupply: string | undefined; - bgtTotalBoosts: string | undefined; -} -export interface IUsePollGlobalDataResponse - extends DefaultHookReturnType {} +import { GlobalData, getGlobalData } from "~/actions/bgt/getGlobalData"; +export const usePollGlobalDataQueryKey = () => "usePollGlobalData"; export const usePollGlobalData = ( options?: DefaultHookOptions, -): IUsePollGlobalDataResponse => { +): DefaultHookReturnType => { const publicClient = usePublicClient(); const { config: beraConfig } = useBeraJs(); + const config = options?.beraConfigOverride ?? beraConfig; - const QUERY_KEY = "usePollGlobalData"; - const swrResponse = useSWR( - QUERY_KEY, - async () => { - const [globalData, globalCuttingBoard, bgtTotalSupply, bgtTotalBoosts] = - await Promise.all([ - getBGTGlobalInfo(config), - getGlobalCuttingBoard(300, config), - getBgtTokenTotalSupply({ - publicClient, - }), - getBgtTokenTotalBoosts({ - publicClient, - }), - ]); - return { - bgtTotalSupply, - globalCuttingBoard, - bgtTotalBoosts, - ...globalData, - } as any; - }, + const swrResponse = useSWR( + publicClient ? usePollGlobalDataQueryKey() : null, + async () => getGlobalData(publicClient!, config), { revalidateOnFocus: false, ...options?.opts,