feat: update Market page

Author: therealemjy

.changeset/flat-dots-serve.md

@@ -0,0 +1,5 @@
+---
+"@venusprotocol/evm": minor
+---
+
+update Market page

apps/evm/src/__mocks__/models/asset.ts

@@ -20,6 +20,7 @@ export const assetData: Asset[] = [
     reserveTokens: new BigNumber(1000),
     cashTokens: new BigNumber(10),
     tokenPriceCents: new BigNumber('127.86734'),
+    tokenPriceOracleAddress: '0xfakeResilientOracle',
     liquidityCents: new BigNumber(8036465875),
     badDebtMantissa: 6789000000000000000n,
     supplierCount: 100,
@@ -92,6 +93,7 @@ export const assetData: Asset[] = [
     reserveTokens: new BigNumber(1000),
     cashTokens: new BigNumber(10),
     tokenPriceCents: new BigNumber('99.99364'),
+    tokenPriceOracleAddress: '0xfakeResilientOracle',
     liquidityCents: new BigNumber(1702951959),
     badDebtMantissa: 0n,
     supplierCount: 100,
@@ -182,6 +184,7 @@ export const assetData: Asset[] = [
     reserveTokens: new BigNumber(1000),
     cashTokens: new BigNumber(10),
     tokenPriceCents: new BigNumber('100.024602'),
+    tokenPriceOracleAddress: '0xfakeChainlinkOracle',
     liquidityCents: new BigNumber(5534102886),
     badDebtMantissa: 0n,
     supplierCount: 100,
@@ -268,6 +271,7 @@ export const assetData: Asset[] = [
     reserveTokens: new BigNumber(1000),
     cashTokens: new BigNumber(10),
     tokenPriceCents: new BigNumber('100.000922'),
+    tokenPriceOracleAddress: '0xfakeChainlinkOracle',
     liquidityCents: new BigNumber(3654492935),
     badDebtMantissa: 0n,
     supplierCount: 100,

apps/evm/src/clients/api/queries/useGetPools/__tests__/__snapshots__/index.eMode.spec.ts.snap

@@ -266,6 +266,8 @@ export const formatOutput = ({
         vToken,
         disabledTokenActions,
         tokenPriceCents,
+        tokenPriceOracleAddress:
+          correspondingOraclePrice.priceOracleAddress ?? correspondingOraclePrice.mainOracleAddress,
         reserveFactor,
         collateralFactor,
         liquidationThresholdPercentage,

apps/evm/src/clients/api/queries/useGetPools/getPools/formatOutput/index.ts

@@ -143,6 +143,8 @@ export interface ApiTokenPrice {
   priceMantissa: string;
   priceSource: 'oracle' | 'merkl' | 'coingecko';
   priceOracleAddress: Address | null;
+  mainOracleName: string;
+  mainOracleAddress: Address;
   isPriceInvalid: boolean;
   hasErrorFetchingPrice: boolean;
 }

apps/evm/src/clients/api/queries/useGetPools/getPools/getApiPools/index.ts

@@ -27,8 +27,7 @@ export const CellGroup: React.FC<CellGroupProps> = ({
         'p-4 grid grid-cols-2 rounded-xl gap-4 sm:flex sm:flex-wrap sm:gap-0 sm:px-6 sm:py-4',
       variant === 'secondary' &&
         'p-0 flex overflow-y-auto scrollbar-hidden bg-transparent sm:p-0 md:p-0 xl:p-0',
-      variant === 'tertiary' &&
-        'gap-2 bg-transparent p-0 grid grid-cols-2 sm:p-0 xl:bg-cards xl:flex xl:p-6 xl:flex-wrap xl:rounded-xl xl:gap-x-0',
+      variant === 'tertiary' && 'flex flex-wrap p-0 gap-x-6 gap-y-3 sm:grid sm:grid-cols-3 md:flex',
       className,
     )}
     {...containerProps}
@@ -50,10 +49,10 @@ export const CellGroup: React.FC<CellGroupProps> = ({
         {index < cells.length - 1 && (
           <div
             className={cn(
-              'w-px self-stretch shrink-0 bg-dark-grey',
+              'w-px self-stretch shrink-0 bg-dark-blue-hover',
               variant === 'primary' && 'hidden sm:block',
               variant === 'secondary' && 'bg-white/10',
-              variant === 'tertiary' && 'hidden xl:block',
+              variant === 'tertiary' && 'hidden md:block',
             )}
           />
         )}

apps/evm/src/components/CellGroup/index.tsx

@@ -12,7 +12,6 @@ export interface MarketCardProps<R> {
   row: R;
   index: number;
   columns: TableProps<R>['columns'];
-  key: string;
   href?: To;
   onClick?: TableProps<R>['rowOnClick'];
   onControlClick?: TableProps<R>['rowControlOnClick'];
@@ -27,7 +26,6 @@ export function MarketCard<R>({
   onClick,
   onControlClick,
   className,
-  key,
 }: MarketCardProps<R>) {
   const [titleColumn, ...otherColumns] = columns;
 
@@ -43,7 +41,7 @@ export function MarketCard<R>({
 
       <div className="space-y-6">
         {otherColumns.map(column => (
-          <LabeledInlineContent key={`${key}-${column.key}`} label={column.label}>
+          <LabeledInlineContent key={column.key} label={column.label}>
             <div className="text-right inline-flex">{column.renderCell(row, index)}</div>
           </LabeledInlineContent>
         ))}
@@ -59,7 +57,6 @@ export function MarketCard<R>({
       )}
       asChild
       onClick={e => onClick?.(e, row)}
-      key={key}
     >
       {href ? (
         <Link className="text-white no-underline hover:no-underline" noStyle to={href}>

apps/evm/src/components/Table/TableCards/MarketCard/index.tsx

@@ -36,6 +36,7 @@ export function Table<R>({
   breakpoint,
   isFetching,
   variant = 'primary',
+  size = 'md',
   header,
   placeholder,
   selectVariant,
@@ -144,6 +145,7 @@ export function Table<R>({
                             rounded: variant === 'secondary',
                           }),
                         ]}
+                        className={cn(size === 'md' ? 'h-18' : 'h-14')}
                         onClick={rowOnClick ? e => rowOnClick(e, row) : undefined}
                         {...additionalProps}
                       >

apps/evm/src/components/Table/index.tsx

@@ -89,8 +89,6 @@ export const useStyles = (props?: StylesProps) => {
       }
     `,
     getTableRow: ({ clickable, rounded }: { clickable: boolean; rounded: boolean }) => css`
-      height: ${theme.spacing(18)};
-
       :hover {
         background-color: ${theme.palette.interactive.hover} !important;
         overflow: hidden;

apps/evm/src/components/Table/styles.ts

@@ -38,6 +38,7 @@ export interface TableProps<R> extends Omit<CardProps, 'title'> {
   selectVariant?: SelectProps['variant'];
   cellHeight?: CSSProperties['height'];
   variant?: 'primary' | 'secondary';
+  size?: 'sm' | 'md';
   controls?: boolean;
 }