diff --git a/apps/dapp/pages/[[...tab]].tsx b/apps/dapp/pages/[[...tab]].tsx index 0e7f046c7..81b151a40 100644 --- a/apps/dapp/pages/[[...tab]].tsx +++ b/apps/dapp/pages/[[...tab]].tsx @@ -57,7 +57,7 @@ export const getStaticProps: GetStaticProps = async ({ ].map((chainId) => getDaoInfoForChainId(chainId, [])) // Get all or chain-specific stats and TVL. - const [tvl, stats] = await Promise.all([ + const [tvl, allStats, monthStats, weekStats] = await Promise.all([ querySnapper({ query: chainId ? 'daodao-chain-tvl' : 'daodao-all-tvl', parameters: chainId ? { chainId } : undefined, @@ -66,9 +66,23 @@ export const getStaticProps: GetStaticProps = async ({ query: chainId ? 'daodao-chain-stats' : 'daodao-all-stats', parameters: chainId ? { chainId } : undefined, }), + querySnapper({ + query: chainId ? 'daodao-chain-stats' : 'daodao-all-stats', + parameters: { + ...(chainId ? { chainId } : undefined), + daysAgo: 30, + }, + }), + querySnapper({ + query: chainId ? 'daodao-chain-stats' : 'daodao-all-stats', + parameters: { + ...(chainId ? { chainId } : undefined), + daysAgo: 7, + }, + }), ]) - if (!tvl || !stats) { + if (!tvl || !allStats || !monthStats || !weekStats) { processError('Failed to fetch TVL/stats for home page', { forceCapture: true, tags: { @@ -85,7 +99,9 @@ export const getStaticProps: GetStaticProps = async ({ ...(chainId && { chainId }), // All or chain-specific stats. stats: { - ...stats, + all: allStats, + month: monthStats, + week: weekStats, // If chain is 1, it will not be shown. chains: chainId ? 1 : getSupportedChains().length, tvl, diff --git a/packages/stateless/pages/Home.tsx b/packages/stateless/pages/Home.tsx index a57012412..8db2681c3 100644 --- a/packages/stateless/pages/Home.tsx +++ b/packages/stateless/pages/Home.tsx @@ -8,7 +8,7 @@ import { Search, } from '@mui/icons-material' import clsx from 'clsx' -import { ComponentType } from 'react' +import { ComponentType, useState } from 'react' import { useTranslation } from 'react-i18next' import { @@ -18,7 +18,12 @@ import { } from '@dao-dao/types' import { UNDO_PAGE_PADDING_HORIZONTAL_CLASSES } from '@dao-dao/utils' -import { Button, DaoInfoCards, HorizontalScroller } from '../components' +import { + Button, + DaoInfoCards, + HorizontalScroller, + SegmentedControls, +} from '../components' export type HomeProps = { /** @@ -52,51 +57,78 @@ export const Home = ({ }: HomeProps) => { const { t } = useTranslation() + const [statsMode, setStatsMode] = useState<'all' | 'month' | 'week'>('all') + return ( <> + + 1 + // Only show TVL and chain count when all is selected. + ...(statsMode === 'all' ? [ { - Icon: Link, - label: t('title.chains'), - tooltip: t('info.chainsDeployedTooltip'), - value: stats.chains.toLocaleString(), + Icon: LockOutlined, + label: t('title.tvl'), + tooltip: t('info.estimatedTreasuryUsdValueTooltip'), + value: + '$' + + stats.tvl.toLocaleString(undefined, { + minimumFractionDigits: 2, + maximumFractionDigits: 2, + }), }, + // Only show the chain count if more than 1 (i.e. not on a + // chain-specific home page). + ...(stats.chains > 1 + ? [ + { + Icon: Link, + label: t('title.chains'), + tooltip: t('info.chainsDeployedTooltip'), + value: stats.chains.toLocaleString(), + }, + ] + : []), ] : []), ]} diff --git a/packages/types/indexer.ts b/packages/types/indexer.ts index bc4efc4cd..1de97b863 100644 --- a/packages/types/indexer.ts +++ b/packages/types/indexer.ts @@ -50,7 +50,25 @@ export type DaoDaoIndexerChainStats = { uniqueVoters: number } -export type DaoDaoIndexerAllStats = DaoDaoIndexerChainStats & { +export type DaoDaoIndexerAllStats = { + /** + * Stats from all time. + */ + all: DaoDaoIndexerChainStats + /** + * Stats from last 30 days. + */ + month: DaoDaoIndexerChainStats + /** + * Stats from last 7 days. + */ + week: DaoDaoIndexerChainStats + /** + * Number of chains DAO DAO is deployed on. + */ chains: number + /** + * Total TVL. + */ tvl: number }