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

@@ -119,7 +119,7 @@ export const PairCard = ({ loading, summary }: PairCardProps) => {
               {shortify(Number(getFormattedAmtFromValueView(summary.liquidity)))}
             </Text>
             <Text detail color='text.secondary'>
-              {summary.quoteAsset.symbol}
+              {'USDC'}
             </Text>
           </>
         )}
@@ -134,7 +134,7 @@ export const PairCard = ({ loading, summary }: PairCardProps) => {
               {shortify(Number(getFormattedAmtFromValueView(summary.directVolume)))}
             </Text>
             <Text detail color='text.secondary'>
-              {summary.quoteAsset.symbol}
+              {'USDC'}
             </Text>
           </>
         )}

src/pages/explore/ui/pairs.tsx

@@ -9,6 +9,9 @@
 import { PairCard } from '@/pages/explore/ui/pair-card';
 import { useSummaries } from '@/pages/explore/api/use-summaries';
 import SpinnerIcon from '@/shared/assets/spinner-icon.svg';
+import { useMultipleSummaries } from '@/pages/trade/model/useSummary';
+import { SummaryData } from '@/shared/api/server/summary/types';
+import { calculateScaledAmount, collectQuoteAssets } from '@/shared/utils/price-conversion';
 
 /** A hook that fires the callback when observed element (on the bottom of the page) is in the view */
 const useObserver = (disabled: boolean, cb: VoidFunction) => {
@@ -51,8 +54,49 @@
 
   const [search, setSearch] = useState('');
 
+  // Fetch trading pair summaries.
   const { data, isLoading, isRefetching, isFetchingNextPage, fetchNextPage } = useSummaries(search);
 
+  // Create temporary translator to normalize volumes/liquidity to USDC values.
+  // Deep clone is neccesary since objects are passed by reference in typeScript.
+  let translator = data?.pages ? structuredClone(data.pages) : undefined;
+
+  // Extract quote assets from all trading pairs.
+  let quoteAssetsList: string[] = [];
+  if (translator) {
+    quoteAssetsList = collectQuoteAssets(translator);
+  }
+
+  // Get USDC exchange rates for all quote assets.
+  const usdcPriceQueries = useMultipleSummaries(quoteAssetsList);
+
+  // Calculate USDC-denominated volumes and liquidity for each trading pair.
+  // For each pair, scale the values using USDC price of the quote asset.
+  let volumePairs: bigint[] = [];
+  let liquidityPairs: bigint[] = [];
+
+  data?.pages[0]?.forEach((item, index) => {
+    let usdcPrice = usdcPriceQueries[index]?.data as SummaryData;
+
+    if (usdcPrice && 'directVolume' in usdcPrice && 'liquidity' in usdcPrice) {
+      calculateScaledAmount(item, usdcPrice, 'directVolume', volumePairs, index);
+      calculateScaledAmount(item, usdcPrice, 'liquidity', liquidityPairs, index);
+    }
+  });
+
+  // Update volume and liquidity amounts with their respective USDC-normalized values,
+  // skipping USDC pairs.
+  if (translator) {
+    translator.forEach(page => {
+      page.forEach((item, itemIndex) => {
+        if (quoteAssetsList[itemIndex] !== 'USDC') {
+          item.directVolume.valueView.value!.amount!.lo = volumePairs[itemIndex]!;
+          item.liquidity.valueView.value!.amount!.lo = liquidityPairs[itemIndex]!;
+        }
+      });
+    });
+  }
+
   const { observerEl } = useObserver(isLoading || isRefetching || isFetchingNextPage, () => {
     void fetchNextPage();
   });
@@ -100,7 +144,7 @@
           </>
         )}
 
-        {data?.pages.map(page =>
+        {translator?.map(page =>
           page.map(summary => (
             <PairCard
               loading={false}

src/pages/trade/model/useSummary.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQueries, useQuery } from '@tanstack/react-query';
 import { usePathSymbols } from '@/pages/trade/model/use-path.ts';
 import { DurationWindow } from '@/shared/utils/duration.ts';
 import { NoSummaryData, SummaryData } from '@/shared/api/server/summary/types.ts';
@@ -24,3 +24,24 @@ export const useSummary = (window: DurationWindow) => {
 
   return query;
 };
+
+// Fetch USDC-denominated prices for each quote asset to enable cross-pair comparisons.
+// Uses 'useQueries' hook for handling multiple dynamic numbers of queries
+export const useMultipleSummaries = (quoteAssets: string[]) => {
+  const queries = useQueries<Array<{ data: SummaryData | NoSummaryData | undefined }>>({
+    queries: quoteAssets.map(asset => ({
+      queryKey: ['multipleSummaries', asset, 'USDC'] as const,
+      queryFn: async () => {
+        return apiFetch<SummaryData | NoSummaryData>('/api/summary', {
+          durationWindow: '1d' as DurationWindow,
+          baseAsset: asset,
+          quoteAsset: 'USDC',
+        });
+      },
+    })),
+  });
+
+  // TODO: add block-based fetching
+
+  return queries;
+};

src/shared/utils/price-conversion.ts

@@ -1,5 +1,6 @@
 import { Metadata } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
 import { getDisplayDenomExponent } from '@penumbra-zone/getters/metadata';
+import { SummaryData } from '../api/server/summary/types';
 
 /**
  * Calculates the display price based on the base price and display exponents.
@@ -22,3 +23,44 @@ export const calculateDisplayPrice = (
     return baseCalculatedPrice / divisor;
   }
 };
+
+/**
+ * Collect the quote assets from all trading pairs.
+ */
+export const collectQuoteAssets = (summaryData: SummaryData[][]): string[] => {
+  let quoteAssetsList: string[] = [];
+  if (summaryData) {
+    summaryData.forEach(page => {
+      page.forEach(item => {
+        const quoteAsset = item.quoteAsset.symbol;
+        quoteAssetsList.push(quoteAsset);
+      });
+    });
+  }
+
+  return quoteAssetsList;
+};
+
+/**
+ * Calculates USDC-normalized amounts for trading pair values (volume or liquidity)
+ */
+export const calculateScaledAmount = (
+  item: SummaryData, // trading pair data to normalize
+  usdcPrice: SummaryData, // USDC price data for the quote asset
+  type: 'directVolume' | 'liquidity',
+  results: bigint[],
+  index: number,
+) => {
+  if (item && type in item) {
+    // Scale the USDC price by the quote asset's decimal places.
+    const scaledPrice = Math.floor(
+      usdcPrice.price * 100 ** getDisplayDenomExponent(usdcPrice.quoteAsset),
+    );
+
+    // Multiply the original amount (volume or liquidity) by the scaled USDC price.
+    const result = item[type].valueView.value?.amount?.lo! * BigInt(scaledPrice);
+
+    // Divide by scaling factor to get the final USDC-denominated value.
+    results[index] = result / BigInt(100 ** getDisplayDenomExponent(usdcPrice.quoteAsset));
+  }
+};