diff --git a/components/asset/Header.tsx b/components/asset/Header.tsx index 00af2b421..6cc779104 100644 --- a/components/asset/Header.tsx +++ b/components/asset/Header.tsx @@ -14,6 +14,8 @@ import { formatEther, formatUnits } from 'viem'; import useStETHNativeAPR from 'hooks/useStETHNativeAPR'; import { toPercentage } from 'utils/utils'; import { track } from 'utils/segment'; +import { Typography } from '@mui/material'; +import getSymbolDescription from 'utils/getSymbolDescription'; type Props = { symbol: string; @@ -27,6 +29,14 @@ const AssetHeaderInfo: FC = ({ symbol }) => { const nativeAPR = useStETHNativeAPR(); + const assetDescription = useCallback( + (s: string) => { + if (!marketAccount) return ''; + return getSymbolDescription(marketAccount, s); + }, + [marketAccount], + ); + const { floatingDeposits, floatingBorrows, backupBorrows } = useMemo(() => { if (!marketAccount) return {}; @@ -175,6 +185,9 @@ const AssetHeaderInfo: FC = ({ symbol }) => { exaToken={marketAccount.symbol} /> )} + + {assetDescription(symbol)} + {itemsInfo.map(({ label, value, underLabel, tooltipTitle }) => ( diff --git a/utils/getSymbolDescription.ts b/utils/getSymbolDescription.ts index 9eaf4120e..763802528 100644 --- a/utils/getSymbolDescription.ts +++ b/utils/getSymbolDescription.ts @@ -1,5 +1,11 @@ import { MarketAccount } from 'hooks/useAccountData'; export default (marketAccount: MarketAccount, symbol: string) => { - return symbol === 'WETH' ? 'Ether' : marketAccount.assetName; + if (symbol === 'WETH') { + return 'Ether'; + } else if (symbol === 'USDC') { + return 'Bridged USDC'; + } else { + return marketAccount.assetName; + } };