explore page: use common numeraire

src/pages/explore/api/use-summaries.ts

@@ -5,7 +5,8 @@ import { SummaryData } from '@/shared/api/server/summary/types';
 import { DurationWindow } from '@/shared/utils/duration';
 import { apiFetch } from '@/shared/utils/api-fetch';
 
-const BASE_LIMIT = 15;
+/// The base limit will need to be increased as more trading pairs are added to the explore page.
+const BASE_LIMIT = 20;
 const BASE_PAGE = 0;
 const BASE_WINDOW: DurationWindow = '1d';
 

src/pages/explore/ui/pair-card.tsx

@@ -17,6 +17,7 @@ import { Skeleton } from '@/shared/ui/skeleton';
 import SparklineChart from './sparkline-chart.svg';
 import ChevronDown from './chevron-down.svg';
 import { PreviewChart } from './preview-chart';
+import { useRegistryAssets } from '@/shared/api/registry';
 
 const ShimmeringBars = () => {
   return (
@@ -65,6 +66,9 @@ export const PairCard = ({ loading, summary }: PairCardProps) => {
   const today = new Date();
   const yesterday = subDays(new Date(), 1);
 
+  const { data: assets } = useRegistryAssets();
+  const usdc = assets?.find(asset => asset.symbol === 'USDC');
+
   return (
     <Link
       href={loading ? `/trade` : `/trade/${summary.baseAsset.symbol}/${summary.quoteAsset.symbol}`}
@@ -119,7 +123,7 @@ export const PairCard = ({ loading, summary }: PairCardProps) => {
               {shortify(Number(getFormattedAmtFromValueView(summary.liquidity)))}
             </Text>
             <Text detail color='text.secondary'>
-              {summary.quoteAsset.symbol}
+              {usdc?.symbol}
             </Text>
           </>
         )}
@@ -134,7 +138,7 @@ export const PairCard = ({ loading, summary }: PairCardProps) => {
               {shortify(Number(getFormattedAmtFromValueView(summary.directVolume)))}
             </Text>
             <Text detail color='text.secondary'>
-              {summary.quoteAsset.symbol}
+              {usdc?.symbol}
             </Text>
           </>
         )}

src/pages/trade/model/useMarketPrice.ts

@@ -1,4 +1,4 @@
-import { useSummary } from './useSummary';
+import { useSummary } from '../api/use-summary';
 
 export const useMarketPrice = (baseSymbol?: string, quoteSymbol?: string) => {
   const { data: summary } = useSummary('1d', baseSymbol, quoteSymbol);

src/pages/trade/ui/summary.tsx

@@ -3,7 +3,7 @@ import cn from 'clsx';
 import { useAutoAnimate } from '@formkit/auto-animate/react';
 import { Text } from '@penumbra-zone/ui/Text';
 import { Skeleton } from '@/shared/ui/skeleton';
-import { useSummary } from '../model/useSummary';
+import { useSummary } from '../api/use-summary';
 import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
 import { round } from '@penumbra-zone/types/round';
 import { Density } from '@penumbra-zone/ui/Density';

src/shared/api/server/stats.ts

@@ -88,14 +88,17 @@ export const getStats = async (): Promise<Serialized<StatsResponse>> => {
       largestPairLiquidity:
         largestPairEnd &&
         toValueView({
-          amount: stats.largest_dv_trading_pair_volume,
+          amount: Math.floor(stats.largest_dv_trading_pair_volume),
           metadata: largestPairEnd,
         }),
       liquidity: toValueView({
-        amount: parseInt(`${stats.liquidity}`),
+        amount: Math.floor(parseInt(`${stats.liquidity}`)),
+        metadata: usdcMetadata,
+      }),
+      directVolume: toValueView({
+        amount: Math.floor(stats.direct_volume),
         metadata: usdcMetadata,
       }),
-      directVolume: toValueView({ amount: stats.direct_volume, metadata: usdcMetadata }),
     });
   } catch (error) {
     return { error: (error as Error).message };

src/shared/api/server/summary/all.ts

@@ -29,19 +29,17 @@ export const getAllSummaries = async (
 
   const registryClient = new ChainRegistryClient();
   const registry = await registryClient.remote.get(chainId);
+  const allAssets = registry.getAllAssets();
 
-  const stablecoins = registry
-    .getAllAssets()
-    .filter(asset => ['USDT', 'USDC', 'USDY'].includes(asset.symbol))
-    .map(asset => asset.penumbraAssetId) as AssetId[];
+  const stablecoins = allAssets.filter(asset => ['USDT', 'USDC', 'USDY'].includes(asset.symbol));
+  const usdc = stablecoins.find(asset => asset.symbol === 'USDC');
 
   const results = await pindexer.summaries({
     ...params,
-    stablecoins,
+    stablecoins: stablecoins.map(asset => asset.penumbraAssetId) as AssetId[],
+    usdc: usdc?.penumbraAssetId as AssetId,
   });
 
-  const allAssets = registry.getAllAssets();
-
   const summaries = await Promise.all(
     results.map(summary => {
       const baseAsset = getAssetById(allAssets, summary.asset_start);
@@ -54,6 +52,7 @@ export const getAllSummaries = async (
         summary,
         baseAsset,
         quoteAsset,
+        usdc,
         summary.candles,
         summary.candle_times,
       );

src/shared/api/server/summary/types.ts

@@ -4,6 +4,7 @@ import { DexExPairsSummary } from '@/shared/database/schema';
 import { calculateDisplayPrice } from '@/shared/utils/price-conversion';
 import { round } from '@penumbra-zone/types/round';
 import { toValueView } from '@/shared/utils/value-view';
+import { getDisplayDenomExponent } from '@penumbra-zone/getters/metadata';
 
 const priceDiffLabel = (num: number): ChangeData['sign'] => {
   if (num === 0) {
@@ -39,19 +40,41 @@ export const adaptSummary = (
   summary: DexExPairsSummary,
   baseAsset: Metadata,
   quoteAsset: Metadata,
+  usdc: Metadata | undefined,
   candles?: number[],
   candleTimes?: Date[],
 ): SummaryData => {
-  const directVolume = toValueView({
-    amount: Math.floor(summary.direct_volume_over_window),
+  let liquidity = toValueView({
+    amount: Math.floor(summary.liquidity),
     metadata: quoteAsset,
   });
 
-  const liquidity = toValueView({
-    amount: Math.floor(summary.liquidity),
+  let directVolume = toValueView({
+    amount: Math.floor(summary.direct_volume_over_window),
     metadata: quoteAsset,
   });
 
+  if (summary.usdc_price) {
+    const expDiffLiquidity = Math.abs(
+      getDisplayDenomExponent(quoteAsset) - getDisplayDenomExponent(usdc),
+    );
+    const resultLiquidity = summary.liquidity * summary.usdc_price * 10 ** expDiffLiquidity;
+    liquidity = toValueView({
+      amount: Math.floor(resultLiquidity),
+      metadata: quoteAsset,
+    });
+
+    const expDiffDirectVolume = Math.abs(
+      getDisplayDenomExponent(quoteAsset) - getDisplayDenomExponent(usdc),
+    );
+    const resultDirectVolume =
+      summary.direct_volume_over_window * summary.usdc_price * 10 ** expDiffDirectVolume;
+    directVolume = toValueView({
+      amount: Math.floor(resultDirectVolume),
+      metadata: quoteAsset,
+    });
+  }
+
   const priceDiff = summary.price - summary.price_then;
   const change = {
     value: calculateDisplayPrice(priceDiff, baseAsset, quoteAsset),

src/shared/database/index.ts

@@ -146,6 +146,7 @@ class Pindexer {
     limit,
     offset,
     stablecoins,
+    usdc,
     // TODO: implement search of assets
     // search,
   }: {
@@ -161,7 +162,15 @@ class Pindexer {
     search: string;
     limit: number;
     offset: number;
+    usdc: AssetId;
   }) {
+    const usdcTable = this.db
+      .selectFrom('dex_ex_pairs_summary')
+      .where('asset_end', '=', Buffer.from(usdc.inner))
+      .where('the_window', '=', '1m')
+      .groupBy(['asset_end', 'asset_start', 'the_window'])
+      .selectAll();
+
     // Selects only distinct pairs (USDT/USDC, but not reverse) with its data
     const summaryTable = this.db
       .selectFrom('dex_ex_pairs_summary')
@@ -207,7 +216,7 @@ class Pindexer {
           .onRef('candles.asset_start', '=', 'summary.asset_start')
           .onRef('candles.asset_end', '=', 'summary.asset_end'),
       )
-      // TODO: sort by volume expressed in USD. Question: how to get it expressed in USD?
+      .leftJoin(usdcTable.as('usdc'), 'summary.asset_end', 'usdc.asset_start')
       .orderBy('trades_over_window', 'desc')
       .select([
         'summary.asset_start',
@@ -224,7 +233,9 @@ class Pindexer {
         'summary.high',
         'candles.candles',
         'candles.candle_times',
+        'usdc.price as usdc_price',
       ])
+      .orderBy('summary.liquidity', 'desc')
       .limit(limit)
       .offset(offset);
 

src/shared/database/schema.ts

@@ -97,6 +97,7 @@ export interface DexExPairsSummary {
   swap_volume_over_window: number;
   the_window: DurationWindow;
   trades_over_window: number;
+  usdc_price: number | null;
 }
 
 export interface DexExPositionExecutions {