@@ -66,11 +75,11 @@ export default function ButtonGroup({ options, value, onChange, size = 'md', var
equalWidth && 'min-w-[3rem] text-center',
// Position-based styles
- isFirst ? 'rounded-l' : '-ml-px rounded-none',
- isLast ? 'rounded-r' : 'rounded-none',
+ isCompact ? 'rounded-none' : isFirst ? 'rounded-l' : '-ml-px rounded-none',
+ !isCompact && (isLast ? 'rounded-r' : 'rounded-none'),
// Variant & State styles
- variant === 'default' ? variantStyles.default(isSelected) : variantStyles.primary(isSelected),
+ variantStyles[variant](isSelected),
// Hover & Focus styles
'hover:relative hover:z-20',
diff --git a/src/features/analysis/analysis-view.tsx b/src/features/analysis/analysis-view.tsx
new file mode 100644
index 00000000..bcb47f28
--- /dev/null
+++ b/src/features/analysis/analysis-view.tsx
@@ -0,0 +1,1275 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { formatUnits } from 'viem';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Cell, Legend as RechartsLegend, Pie, PieChart, ResponsiveContainer, Tooltip as RechartsTooltip } from 'recharts';
+import { RiDatabase2Line, RiErrorWarningLine, RiNodeTree, RiPieChart2Line, RiScales3Line } from 'react-icons/ri';
+import Header from '@/components/layout/header/Header';
+import { AddressIdentity } from '@/components/shared/address-identity';
+import { NetworkIcon } from '@/components/shared/network-icon';
+import { TokenIcon } from '@/components/shared/token-icon';
+import ButtonGroup, { type ButtonOption } from '@/components/ui/button-group';
+import { Card } from '@/components/ui/card';
+import { Spinner } from '@/components/ui/spinner';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Tooltip } from '@/components/ui/tooltip';
+import { useAllOracleMetadata } from '@/hooks/useOracleMetadata';
+import { useProcessedMarkets } from '@/hooks/useProcessedMarkets';
+import { useChartColors } from '@/constants/chartColors';
+import NetworkFilter from '@/features/markets/components/filters/network-filter';
+import { MarketIdentity, MarketIdentityFocus, MarketIdentityMode } from '@/features/markets/components/market-identity';
+import OracleVendorBadge from '@/features/markets/components/oracle-vendor-badge';
+import { FeedEntry } from '@/features/markets/components/oracle';
+import { getOracleFromMetadata, type OracleOutputData } from '@/hooks/useOracleMetadata';
+import { formatReadableTokenAmount } from '@/utils/balance';
+import { getNetworkName, type SupportedNetworks } from '@/utils/networks';
+import { OracleVendorIcons, PriceFeedVendors } from '@/utils/oracle';
+import { formatUsdValue } from '@/utils/portfolio';
+import { cn } from '@/utils';
+import {
+ buildRiskAnalysis,
+ type AnalysisAssetBucket,
+ type AnalysisBucket,
+ type AnalysisBucketMarket,
+ type AnalysisExposureMetric,
+ type AnalysisMarketRow,
+} from './utils/oracle-risk-analysis';
+
+const EXPOSURE_OPTIONS: ButtonOption[] = [
+ { key: 'supply', label: 'Supply', value: 'supply' },
+ { key: 'borrow', label: 'Borrow', value: 'borrow' },
+];
+
+const DETAIL_OPTIONS: ButtonOption[] = [
+ { key: 'assets', label: 'Asset Split', value: 'assets' },
+ { key: 'chains', label: 'Chain Split', value: 'chains' },
+];
+
+type AssumptionMode = 'peg' | 'vault';
+type ProviderDetailMode = 'assets' | 'chains';
+
+const ASSUMPTION_OPTIONS: ButtonOption[] = [
+ { key: 'peg', label: 'Peg Assumption', value: 'peg' },
+ { key: 'vault', label: 'Vault Conversion', value: 'vault' },
+];
+
+const OTHER_BUCKET_KEY = '__other';
+const MAX_TABLE_ROWS = 8;
+
+type DonutDataPoint = {
+ key: string;
+ label: string;
+ valueUsd: number;
+ marketCount: number;
+};
+
+const formatPercent = (value: number, total: number): string => {
+ if (total <= 0 || value <= 0) return '0.00%';
+ const percent = (value / total) * 100;
+ if (percent > 0 && percent < 0.01) return '<0.01%';
+ return `${percent >= 10 ? percent.toFixed(1) : percent.toFixed(2)}%`;
+};
+
+const formatAssumptionLabel = (label: string): string => {
+ return label
+ .replace(/\s+peg$/i, '')
+ .replace(/\s+vault conversion$/i, '')
+ .trim();
+};
+
+function UsdWithPercent({ valueUsd, totalUsd }: { valueUsd: number; totalUsd: number }) {
+ return (
+
+ {formatUsdValue(valueUsd)}
+ ({formatPercent(valueUsd, totalUsd)})
+
+ );
+}
+
+const getMarketHref = (row: AnalysisMarketRow): string => `/market/${row.chainId}/${row.market.uniqueKey}`;
+
+const getDonutData = (buckets: AnalysisBucket[]): DonutDataPoint[] => {
+ return buckets.map((bucket) => ({
+ key: bucket.key,
+ label: bucket.label,
+ valueUsd: bucket.valueUsd,
+ marketCount: bucket.marketCount,
+ }));
+};
+
+const isKnownVendor = (label: string): label is PriceFeedVendors => {
+ return Object.values(PriceFeedVendors).includes(label as PriceFeedVendors);
+};
+
+const PROVIDER_LINKS: Record
= {
+ [PriceFeedVendors.Chainlink]: 'https://chain.link/data-feeds',
+ [PriceFeedVendors.Redstone]: 'https://redstone.finance/',
+ [PriceFeedVendors.PythNetwork]: 'https://pyth.network/',
+ [PriceFeedVendors.Chronicle]: 'https://chroniclelabs.org/',
+ [PriceFeedVendors.API3]: 'https://api3.org/',
+ [PriceFeedVendors.Pendle]: 'https://www.pendle.finance/',
+ [PriceFeedVendors.Lido]: 'https://lido.fi/',
+ [PriceFeedVendors.Compound]: 'https://compound.finance/',
+ [PriceFeedVendors.Oval]: 'https://oval.xyz/',
+ [PriceFeedVendors.Midas]: 'https://midas.app/',
+ [PriceFeedVendors.Unknown]: undefined,
+};
+
+const UNKNOWN_VENDOR_COLOR = '#94A3B8';
+
+const getProviderLink = (label: string) => PROVIDER_LINKS[label];
+
+function VendorIcon({ label, size = 20 }: { label: string; size?: number }) {
+ const icon = isKnownVendor(label) ? OracleVendorIcons[label] : '';
+
+ if (!icon) {
+ return (
+
+ ?
+
+ );
+ }
+
+ return (
+
+ );
+}
+
+function MetricCard({ label, value, detail, icon }: { label: string; value: string; detail: string; icon: React.ReactNode }) {
+ return (
+
+
+
+ {label}
+ {value}
+ {detail}
+
+
{icon}
+
+
+ onExposureMetricChange(value as AnalysisExposureMetric)}
+ size="sm"
+ variant="compact"
+ />
+
+ );
+}
+
+function DonutTooltip({ active, payload, totalUsd }: { active?: boolean; payload?: { payload: DonutDataPoint }[]; totalUsd: number }) {
+ if (!active || !payload?.[0]) return null;
+ const data = payload[0].payload;
+
+ return (
+
+
+ {data.key !== OTHER_BUCKET_KEY && }
+ {data.label}
+
+
+
+ Exposure
+ {formatUsdValue(data.valueUsd)}
+
+
+ Share
+ {formatPercent(data.valueUsd, totalUsd)}
+
+
+ Markets
+ {data.marketCount}
+
+
+
+
+
+ {
+ const key = visibleData[index]?.key;
+ if (key && key !== OTHER_BUCKET_KEY) {
+ onSelect(key);
+ }
+ }}
+ className="[&_sector]:outline-none"
+ rootTabIndex={-1}
+ style={{
+ cursor: 'pointer',
+ outline: 'none',
+ userSelect: 'none',
+ WebkitTapHighlightColor: 'transparent',
+ }}
+ >
+ {visibleData.map((entry) => (
+ |
+ ))}
+
+ } />
+ (
+
+ {data.map((entry) => {
+ const isHidden = hiddenKeys.has(entry.key);
+ return (
+
+ );
+ })}
+
+ )}
+ />
+
+
+
+
+
+ {leading}
+ {label}
+
+
+
+
+
+
+
+
+
+
{bucket.label}
+
{getOracleTypeSummary(bucket)}
+
+
+ {providerLink && (
+
+ Source
+
+ )}
+
+
+
+
+ {exposureLabel}
+ {formatUsdValue(bucket.valueUsd)}
+
+
+ Share
+ {formatPercent(bucket.valueUsd, totalUsd)}
+
+
+ Markets
+ {bucket.marketCount}
+
+
+
+
+ setDetailMode(value as ProviderDetailMode)}
+ size="sm"
+ />
+
+
+
+ {detailMode === 'assets'
+ ? assetSplit.slice(0, 6).map((item) => (
+
+ }
+ />
+ ))
+ : bucket.chainBreakdown.slice(0, 6).map((chain) => (
+
+ }
+ />
+ ))}
+
+
{label}
;
+}
+
+function LoadingPanel() {
+ return (
+
+
+
+ Loading analysis data
+
+
+ );
+}
+
+function ErrorPanel({ message }: { message: string }) {
+ return (
+
+
+ Analysis unavailable
+ {message}
+
+
+ );
+}
+
+function OracleExposureSection({
+ buckets,
+ activeBucket,
+ activeKey,
+ setActiveKey,
+ totalUsd,
+ exposureMetric,
+ oracleMetadataMap,
+}: {
+ buckets: AnalysisBucket[];
+ activeBucket?: AnalysisBucket;
+ activeKey?: string;
+ setActiveKey: (key: string) => void;
+ totalUsd: number;
+ exposureMetric: AnalysisExposureMetric;
+ oracleMetadataMap?: ReturnType['data'];
+}) {
+ return (
+
+
+
+
+
+
Oracle Vendor Exposure
+ Click legend items to hide slices
+
+
+
+
+
+
+
+
+
total + (exposureMetric === 'borrow' ? row.borrowUsd : row.supplyUsd), 0) ??
+ totalUsd
+ }
+ exposureMetric={exposureMetric}
+ showAssumptions={false}
+ showFeeds
+ oracleMetadataMap={oracleMetadataMap}
+ />
+
+
{title}
+
+ % of {totalLabel}: {formatUsdValue(totalUsd)}
+
+
+ {buckets.length === 0 ? (
+
+ ) : (
+
+ {buckets.slice(0, 8).map((bucket) => {
+ const isActive = bucket.key === activeKey;
+ return (
+
+ );
+ })}
+
+
+ onModeChange(value as AssumptionMode)}
+ size="sm"
+ />
+
+ {buckets.length} {mode === 'peg' ? 'peg' : 'vault'} buckets
+
+
+
+
+
+
+
+
{title}
+ Top assets
+
+ {buckets.length === 0 ? (
+
+ ) : (
+
+ {buckets.slice(0, 8).map((bucket) => (
+
+
+
+
+ {bucket.label}
+
+
+
+
+
+ {bucket.marketCount} markets
+
+
+ ))}
+
+
+
{title}
+
+
{children}
+
+ {assumptions.slice(0, 2).map((assumption) => (
+ {assumption}}
+ >
+ {formatAssumptionLabel(assumption)}
+
+ ))}
+ {assumptions.length > 2 && +{assumptions.length - 2}}
+
+ );
+}
+
+function VaultDependencyBadges({ row }: { row: AnalysisMarketRow }) {
+ if (row.vaultDependencies.length === 0) {
+ return -;
+ }
+
+ return (
+
+ {row.vaultDependencies.slice(0, 2).map((dependency) => (
+
+ ))}
+ {row.vaultDependencies.length > 2 && (
+
+{row.vaultDependencies.length - 2}
+ )}
+
+ {paths.map((path) => (
+
+ ))}
+
+ );
+}
+
+function OracleVendorCell({ row }: { row: AnalysisMarketRow }) {
+ if (!row.market.oracleAddress) {
+ return -;
+ }
+
+ return (
+
+ );
+}
+
+function MarketExposureTable({
+ title,
+ entries,
+ totalUsd,
+ assumptionMode,
+ exposureMetric,
+ showAssumptions = true,
+ showFeeds = false,
+ forceSupplyAmounts = false,
+ centerRiskCell = false,
+ oracleMetadataMap,
+}: {
+ title: string;
+ entries: AnalysisBucketMarket[];
+ totalUsd: number;
+ assumptionMode?: AssumptionMode;
+ exposureMetric: AnalysisExposureMetric;
+ showAssumptions?: boolean;
+ showFeeds?: boolean;
+ forceSupplyAmounts?: boolean;
+ centerRiskCell?: boolean;
+ oracleMetadataMap?: ReturnType['data'];
+}) {
+ const usdHeader = forceSupplyAmounts ? 'Supply (USD)' : exposureMetric === 'borrow' ? 'Borrow (USD)' : 'Supply (USD)';
+ const amountHeader = forceSupplyAmounts ? 'Supply Asset' : exposureMetric === 'borrow' ? 'Borrow Asset' : 'Supply Asset';
+ const riskColumnHeader = assumptionMode === 'vault' ? 'Dependencies' : 'Assumptions';
+
+ return (
+
+ {entries.length === 0 ? (
+
+
+
+ ) : (
+
+
+
+ Chain
+ Market
+ {usdHeader}
+ {amountHeader}
+ {showFeeds ? (
+ Feeds
+ ) : (
+ Oracle
+ )}
+ {showAssumptions && {riskColumnHeader}}
+
+
+
+ {entries.slice(0, MAX_TABLE_ROWS).map(({ row }) => {
+ const assumptions =
+ assumptionMode === 'peg' ? row.pegAssumptions : assumptionMode === 'vault' ? row.vaultAssumptions : row.allAssumptions;
+
+ return (
+
+
+ {getNetworkName(row.chainId) ?? row.chainId}}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {formatLoanAssetAmount(row, exposureMetric, forceSupplyAmounts)}
+
+
+ {showFeeds ? (
+
+ ) : (
+
+
+
+ )}
+
+ {showAssumptions && (
+
+ {assumptionMode === 'vault' ? : }
+
+ )}
+
+ );
+ })}
+
+
+ )}
+
+ );
+}
+
+export default function AnalysisView() {
+ const [selectedNetwork, setSelectedNetwork] = useState(null);
+ const [exposureMetric, setExposureMetric] = useState('supply');
+ const [assumptionMode, setAssumptionMode] = useState('peg');
+ const [selectedOracleKey, setSelectedOracleKey] = useState();
+ const [selectedPegKey, setSelectedPegKey] = useState();
+ const [selectedVaultKey, setSelectedVaultKey] = useState();
+
+ const { whitelistedMarkets, loading, error } = useProcessedMarkets({
+ marketsRefetchInterval: false,
+ marketsRefetchOnWindowFocus: false,
+ });
+ const { data: oracleMetadataMap, isLoading: oracleMetadataLoading, isError: oracleMetadataError } = useAllOracleMetadata();
+
+ const scopedMarkets = useMemo(() => {
+ if (!selectedNetwork) return whitelistedMarkets;
+ return whitelistedMarkets.filter((market) => market.morphoBlue.chain.id === selectedNetwork);
+ }, [selectedNetwork, whitelistedMarkets]);
+
+ const analysis = useMemo(
+ () =>
+ buildRiskAnalysis({
+ markets: scopedMarkets,
+ oracleMetadataMap,
+ exposureMetric,
+ }),
+ [exposureMetric, oracleMetadataMap, scopedMarkets],
+ );
+
+ const activeOracleBucket = analysis.oracleBuckets.find((bucket) => bucket.key === selectedOracleKey) ?? analysis.oracleBuckets[0];
+ const activeVaultBucket =
+ analysis.vaultAssumptionBuckets.find((bucket) => bucket.key === selectedVaultKey) ?? analysis.vaultAssumptionBuckets[0];
+ const pegBuckets = analysis.noPegAssumptionBucket
+ ? [analysis.noPegAssumptionBucket, ...analysis.pegAssumptionBuckets]
+ : analysis.pegAssumptionBuckets;
+ const pegBucketsWithUnknown = analysis.unknownPegRouteBucket ? [...pegBuckets, analysis.unknownPegRouteBucket] : pegBuckets;
+ const assumptionBuckets = assumptionMode === 'peg' ? pegBucketsWithUnknown : analysis.vaultAssumptionBuckets;
+ const activeAssumptionBucket =
+ assumptionMode === 'peg'
+ ? (assumptionBuckets.find((bucket) => bucket.key === selectedPegKey) ?? assumptionBuckets[0])
+ : activeVaultBucket;
+ const activeAssumptionKey = activeAssumptionBucket?.key;
+ const setActiveAssumptionKey = assumptionMode === 'peg' ? setSelectedPegKey : setSelectedVaultKey;
+
+ const isInitialLoading = loading || oracleMetadataLoading;
+ const metricLabel = exposureMetric === 'borrow' ? 'Borrow Exposure' : 'Supply TVL';
+ const pegRiskMetricLabel = exposureMetric === 'borrow' ? 'Borrow Behind Peg Assumptions' : 'Supply Behind Peg Assumptions';
+
+ return (
+ <>
+
+
+
+
+
+
+
+
Morpho Global Dashboard
+
Risk Breakdown
+
+ Oracle vendors, peg assumptions, and asset dominance across the Morpho universe.
+
+
+
+
({ row, attributedUsd: row.exposureUsd }))}
+ totalUsd={analysis.totalExposureUsd}
+ exposureMetric={exposureMetric}
+ />
+ {
return new Error(String(error));
};
+type UseMarketsQueryOptions = {
+ refetchInterval?: number | false;
+ refetchOnWindowFocus?: boolean;
+};
+
/**
* Fetches markets from all supported networks using React Query.
*
@@ -33,7 +38,7 @@ const toError = (error: unknown): Error => {
* const { data: markets, isLoading, isRefetching, refetch } = useMarketsQuery();
* ```
*/
-export const useMarketsQuery = () => {
+export const useMarketsQuery = (options?: UseMarketsQueryOptions) => {
const { customRpcUrls } = useCustomRpcContext();
const rpcIdentity = Object.entries(customRpcUrls).sort(([left], [right]) => Number(left) - Number(right));
@@ -146,7 +151,7 @@ export const useMarketsQuery = () => {
return filtered;
},
staleTime: 5 * 60 * 1000, // Data is fresh for 5 minutes
- refetchInterval: 5 * 60 * 1000, // Auto-refetch every 5 minutes in background
- refetchOnWindowFocus: true, // Refetch when user returns to tab
+ refetchInterval: options?.refetchInterval ?? 5 * 60 * 1000, // Auto-refetch every 5 minutes in background by default
+ refetchOnWindowFocus: options?.refetchOnWindowFocus ?? true, // Refetch when user returns to tab by default
});
};
diff --git a/src/hooks/useProcessedMarkets.ts b/src/hooks/useProcessedMarkets.ts
index 7fb8ea92..539adbac 100644
--- a/src/hooks/useProcessedMarkets.ts
+++ b/src/hooks/useProcessedMarkets.ts
@@ -13,6 +13,11 @@ import { formatBalance } from '@/utils/balance';
import type { TokenPriceInput } from '@/data-sources/morpho-api/prices';
import type { Market } from '@/utils/types';
+type UseProcessedMarketsOptions = {
+ marketsRefetchInterval?: number | false;
+ marketsRefetchOnWindowFocus?: boolean;
+};
+
const EMPTY_RATE_ENRICHMENTS: MarketRateEnrichmentMap = new Map();
const hasSameSupplyingVaults = (current: Market['supplyingVaults'], next: Market['supplyingVaults']): boolean => {
@@ -84,8 +89,17 @@ const computeUsdValue = (assets: string, decimals: number, price: number): numbe
* const { rawMarketsUnfiltered } = useProcessedMarkets(); // For blacklist modal
* ```
*/
-export const useProcessedMarkets = () => {
- const { data: rawMarketsFromQuery, isLoading, isRefetching, error, refetch } = useMarketsQuery();
+export const useProcessedMarkets = (options?: UseProcessedMarketsOptions) => {
+ const {
+ data: rawMarketsFromQuery,
+ isLoading,
+ isRefetching,
+ error,
+ refetch,
+ } = useMarketsQuery({
+ refetchInterval: options?.marketsRefetchInterval,
+ refetchOnWindowFocus: options?.marketsRefetchOnWindowFocus,
+ });
const { whitelistLookup, supplyingVaultsLookup } = useMorphoWhitelistStatusQuery();
const { getAllBlacklistedKeys, customBlacklistedMarkets } = useBlacklistedMarkets();
const { showUnwhitelistedMarkets } = useAppSettings();
diff --git a/src/utils/oracle.ts b/src/utils/oracle.ts
index 2b695986..e2a3dc3f 100644
--- a/src/utils/oracle.ts
+++ b/src/utils/oracle.ts
@@ -77,6 +77,7 @@ export function mapProviderToVendor(provider: OracleFeedProvider): PriceFeedVend
if (normalizedProvider.includes('chronicle')) return PriceFeedVendors.Chronicle;
if (normalizedProvider.includes('pendle')) return PriceFeedVendors.Pendle;
if (normalizedProvider.includes('midas')) return PriceFeedVendors.Midas;
+ if (normalizedProvider.includes('pyth')) return PriceFeedVendors.PythNetwork;
const mapping: Record = {
chainlink: PriceFeedVendors.Chainlink,