feat: add tooltips to market table headers (#1203)

VenusProtocol · Jul 26, 2023 · e25d5ce · e25d5ce
1 parent 503b8b6
commit e25d5ce
Show file tree

Hide file tree

Showing 14 changed files with 412 additions and 289 deletions.
diff --git a/src/components/Table/TableCards.tsx b/src/components/Table/TableCards.tsx
@@ -42,7 +42,7 @@ export function TableCards<R>({
 
         const option: SelectOption = {
           value: column.key,
-          label: column.label,
+          label: column.selectOptionLabel,
         };
 
         return [...acc, option];

diff --git a/src/components/Table/storiesUtils.tsx b/src/components/Table/storiesUtils.tsx
@@ -63,23 +63,27 @@ export const columns: TableColumn<Row>[] = [
   {
     key: 'asset',
     label: 'Asset',
+    selectOptionLabel: 'Asset',
     renderCell: ({ token }) => <TokenIconWithSymbol token={token} />,
   },
   {
     key: 'apy',
     label: 'APY',
+    selectOptionLabel: 'APY',
     renderCell: ({ apy }) => (
       <div style={{ color: '#18df8b' }}>{formatPercentageToReadableValue(apy)}</div>
     ),
   },
   {
     key: 'wallet',
     label: 'Wallet',
+    selectOptionLabel: 'Wallet',
     renderCell: ({ wallet, token }) => `${wallet} ${token.symbol}`,
   },
   {
     key: 'collateral',
     label: 'Collateral',
+    selectOptionLabel: 'Collateral',
     renderCell: ({ collateral }) => <Toggle onChange={console.log} value={collateral} />,
   },
 ];

diff --git a/src/components/Table/types.ts b/src/components/Table/types.ts
@@ -4,7 +4,8 @@ import { BREAKPOINTS } from 'theme/MuiThemeProvider/muiTheme';
 
 export interface TableColumn<R> {
   key: string;
-  label: string;
+  label: React.ReactNode | string;
+  selectOptionLabel: string;
   renderCell: (row: R, rowIndex: number) => React.ReactNode | string;
   sortRows?: (rowA: R, rowB: R, direction: 'asc' | 'desc') => number;
   align?: 'left' | 'center' | 'right';

diff --git a/src/containers/MarketTable/styles.ts b/src/containers/MarketTable/styles.ts
@@ -5,6 +5,15 @@ export const useStyles = () => {
   const theme = useTheme();
 
   return {
+    getColumnLabelInfoIcon: ({ hasRightMargin }: { hasRightMargin: boolean }) => css`
+      vertical-align: sub;
+      margin-left: ${theme.spacing(1)};
+
+      ${hasRightMargin &&
+      css`
+        margin-right: ${theme.spacing(1)};
+      `};
+    `,
     marketLink: css`
       text-decoration: underline;
       color: ${theme.palette.text.primary};