🚸 asset: add asset description in asset page

exactly · Dec 7, 2023 · 2102f00 · 2102f00
1 parent 46c554b
commit 2102f00
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git 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<Props> = ({ 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<Props> = ({ symbol }) => {
             exaToken={marketAccount.symbol}
           />
         )}
+        <Typography sx={{ width: '100%' }} variant="dashboardMainSubtitle">
+          {assetDescription(symbol)}
+        </Typography>
       </Grid>
       <Grid item container spacing={4}>
         {itemsInfo.map(({ label, value, underLabel, tooltipTitle }) => (

diff --git a/components/markets/MarketsTables/poolMobile/index.tsx b/components/markets/MarketsTables/poolMobile/index.tsx
@@ -192,7 +192,7 @@ const GridAPRItem: FC<{
                 <ImportExportIcon sx={{ fontSize: 14, color: palette.operation.variable }} />
               )}
               <Typography width="fit-content" variant="subtitle2" color="grey.500">
-                {maturity ? parseTimestamp(maturity) : 'Open-endened'}
+                {maturity ? parseTimestamp(maturity) : 'Open-ended'}
               </Typography>
             </Grid>
           </Grid>

diff --git a/components/markets/MarketsTables/poolTable/index.tsx b/components/markets/MarketsTables/poolTable/index.tsx
@@ -194,7 +194,7 @@ const PoolTable: FC<PoolTableProps> = ({ isLoading, headers, rows }) => {
                             <ImportExportIcon sx={{ fontSize: 16, color: palette.operation.variable }} />
                           )}
                           <Typography width="fit-content" variant="subtitle2" color="grey.500">
-                            {depositMaturity ? parseTimestamp(depositMaturity) : 'Open-endened'}
+                            {depositMaturity ? parseTimestamp(depositMaturity) : 'Open-ended'}
                           </Typography>
                         </Grid>
                       </Box>
@@ -255,7 +255,7 @@ const PoolTable: FC<PoolTableProps> = ({ isLoading, headers, rows }) => {
                             <ImportExportIcon sx={{ fontSize: 16, color: palette.operation.variable }} />
                           )}
                           <Typography width="fit-content" variant="subtitle2" color="grey.500">
-                            {borrowMaturity ? parseTimestamp(borrowMaturity) : 'Open-endened'}
+                            {borrowMaturity ? parseTimestamp(borrowMaturity) : 'Open-ended'}
                           </Typography>
                         </Grid>
                       </Box>

diff --git 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;
+  }
 };