261 ne tooltip refactor (#1390)

* creating tooltip component

* using the tooltip component in the node list

* test another storie

* fixing text color in the story

explorer/src/components/CustomColumnHeading.tsx

@@ -1,15 +1,32 @@
 import * as React from 'react';
 import { Box, Typography } from '@mui/material';
 import { ExpandLess, ExpandMore } from '@mui/icons-material';
+import { useTheme } from '@mui/material/styles';
+import { Tooltip } from '@nymproject/react/tooltip/Tooltip';
 
-export const CustomColumnHeading: React.FC<{ headingTitle: string }> = ({ headingTitle }) => {
+export const CustomColumnHeading: React.FC<{ headingTitle: string; tooltipInfo?: string }> = ({
+  headingTitle,
+  tooltipInfo,
+}) => {
   const [filter, toggleFilter] = React.useState<boolean>(false);
+  const theme = useTheme();
 
   const handleClick = () => {
     toggleFilter(!filter);
   };
   return (
     <Box alignItems="center" display="flex" onClick={handleClick}>
+      {tooltipInfo && (
+        <Tooltip
+          title={tooltipInfo}
+          id={headingTitle}
+          placement="top-start"
+          textColor={theme.palette.nym.networkExplorer.tooltip.color}
+          bgColor={theme.palette.nym.networkExplorer.tooltip.background}
+          maxWidth={230}
+          arrow
+        />
+      )}
       <Typography
         sx={{
           fontWeight: 600,

explorer/src/components/MixNodes/Economics/Table.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import {
-  IconButton,
   Paper,
   Table,
   TableBody,
@@ -12,15 +11,13 @@ import {
   useMediaQuery,
 } from '@mui/material';
 import { Box } from '@mui/system';
-import { styled, useTheme, Theme } from '@mui/material/styles';
-import Tooltip, { tooltipClasses, TooltipProps } from '@mui/material/Tooltip';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import { useTheme, Theme } from '@mui/material/styles';
+import { Tooltip } from '@nymproject/react/tooltip/Tooltip';
 import { EconomicsRowsType, EconomicsInfoRowWithIndex } from './types';
 import { EconomicsProgress } from './EconomicsProgress';
 import { cellStyles } from '../../Universal-DataGrid';
 import { UniversalTableProps } from '../../DetailTable';
 
-const tooltipBackGroundColor = '#A0AED1';
 const threshold = 100;
 
 const textColour = (value: EconomicsRowsType, field: string, theme: Theme) => {
@@ -83,16 +80,6 @@ export const DelegatorsInfoTable: React.FC<UniversalTableProps<EconomicsInfoRowW
 }) => {
   const theme = useTheme();
 
-  const CustomTooltip = styled(({ className, ...props }: TooltipProps) => (
-    <Tooltip {...props} classes={{ popper: className }} />
-  ))({
-    [`& .${tooltipClasses.tooltip}`]: {
-      maxWidth: 230,
-      background: tooltipBackGroundColor,
-      color: theme.palette.nym.networkExplorer.nav.hover,
-    },
-  });
-
   return (
     <TableContainer component={Paper}>
       <Table sx={{ minWidth: 650 }} aria-label={tableName}>
@@ -103,34 +90,15 @@ export const DelegatorsInfoTable: React.FC<UniversalTableProps<EconomicsInfoRowW
                 <Box sx={{ display: 'flex', alignItems: 'center' }}>
                   {tooltipInfo && (
                     <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                      <CustomTooltip
+                      <Tooltip
                         title={tooltipInfo}
                         id={field}
                         placement="top-start"
-                        sx={{
-                          '& .MuiTooltip-arrow': {
-                            color: '#A0AED1',
-                          },
-                        }}
+                        textColor={theme.palette.nym.networkExplorer.tooltip.color}
+                        bgColor={theme.palette.nym.networkExplorer.tooltip.background}
+                        maxWidth={230}
                         arrow
-                      >
-                        <IconButton
-                          sx={{
-                            padding: 0,
-                            py: 1,
-                            pr: 1,
-                          }}
-                          disableFocusRipple
-                          disableRipple
-                        >
-                          <InfoOutlinedIcon
-                            sx={{
-                              height: '18px',
-                              width: '18px',
-                            }}
-                          />
-                        </IconButton>
-                      </CustomTooltip>
+                      />
                     </Box>
                   )}
                   {title}

explorer/src/pages/Mixnodes/index.tsx

@@ -181,9 +181,14 @@ export const PageMixnodes: React.FC = () => {
     {
       field: 'stake_saturation',
       headerName: 'Stake Saturation',
-      renderHeader: () => <CustomColumnHeading headingTitle="Stake Saturation" />,
+      renderHeader: () => (
+        <CustomColumnHeading
+          headingTitle="Stake Saturation"
+          tooltipInfo="Level of stake saturation for this node. Nodes receive more rewards the higher their saturation level, up to 100%. Beyond 100% no additional rewards are granted. The current stake saturation level is: 1 million NYM, computed as S/K where S is  total amount of tokens available to stakeholders and K is the number of nodes in the reward set."
+        />
+      ),
       headerClassName: 'MuiDataGrid-header-override',
-      width: 175,
+      width: 190,
       headerAlign: 'left',
       renderCell: (params: GridRenderCellParams) => (
         <MuiLink
@@ -219,9 +224,14 @@ export const PageMixnodes: React.FC = () => {
     {
       field: 'profit_percentage',
       headerName: 'Profit Margin',
-      renderHeader: () => <CustomColumnHeading headingTitle="Profit Margin" />,
+      renderHeader: () => (
+        <CustomColumnHeading
+          headingTitle="Profit Margin"
+          tooltipInfo="Percentage of the delegates rewards that the operator takes as fee before rewards are distributed to the delegates."
+        />
+      ),
       headerClassName: 'MuiDataGrid-header-override',
-      width: 140,
+      width: 165,
       headerAlign: 'left',
       renderCell: (params: GridRenderCellParams) => (
         <MuiLink
@@ -236,7 +246,12 @@ export const PageMixnodes: React.FC = () => {
     {
       field: 'avg_uptime',
       headerName: 'Routing Score',
-      renderHeader: () => <CustomColumnHeading headingTitle="Routing Score" />,
+      renderHeader: () => (
+        <CustomColumnHeading
+          headingTitle="Routing Score"
+          tooltipInfo="Node’s routing score is relative to that of the network. Each time a node is tested, the test packets have to go through the full path of the network (a gateway + 3 nodes). If a node in the path drop packets it will affect the score of other nodes in the test."
+        />
+      ),
       headerClassName: 'MuiDataGrid-header-override',
       width: 160,
       headerAlign: 'left',

ts-packages/mui-theme/src/theme/network-explorer.ts

@@ -45,6 +45,10 @@ export interface NetworkExplorerPalette {
       moderate: string;
       underModerate: string;
     };
+    tooltip: {
+      background: string;
+      color: string;
+    };
   };
 }
 
@@ -94,6 +98,10 @@ export const networkExplorerPalette = (variant: NymPaletteVariant): NetworkExplo
       moderate: variant.selectionChance.moderate,
       underModerate: variant.selectionChance.underModerate,
     },
+    tooltip: {
+      background: '#A0AED1',
+      color: '#111826',
+    }
   },
 });
 

ts-packages/react-components/src/components/tooltip/Tooltip.stories.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { Tooltip } from './Tooltip';
+
+export default {
+  title: 'Basics/Tooltip',
+  component: Tooltip,
+} as ComponentMeta<typeof Tooltip>;
+
+export const Default = () => <Tooltip title="tooltip" id="field-name" placement="top-start" arrow />;
+
+export const NEStyle = () => {
+  return (
+    <Tooltip
+      title="Level of stake saturation for this node. Nodes receive more rewards the higher their saturation level, up to 100%. Beyond 100% no additional rewards are granted. The current stake saturation level is: 1 million NYM, computed as S/K where S is  total amount of tokens available to stakeholders and K is the number of nodes in the reward set."
+      id="field-name"
+      placement="top-start"
+      textColor="#111826"
+      bgColor="#A0AED1"
+      maxWidth={230}
+      arrow
+    />
+  );
+};

ts-packages/react-components/src/components/tooltip/Tooltip.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { Tooltip as MUITooltip, TooltipProps, IconButton } from '@mui/material';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+
+export interface CustomTooltipProps {
+  title: string;
+  arrow?: boolean;
+  id: string;
+  placement?: "bottom" | "left" | "right" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start";
+  textColor?: string;
+  bgColor?: string;
+  maxWidth?: number;
+}
+
+const TooltipInfoIcon: React.ReactElement<any, any> = (
+  <IconButton
+    sx={{
+      padding: 0,
+      py: 1,
+      pr: 1,
+    }}
+    disableFocusRipple
+    disableRipple
+  >
+    <InfoOutlinedIcon
+      sx={{
+        height: '18px',
+        width: '18px',
+      }}
+    />
+  </IconButton>
+);
+
+export const Tooltip = (props: CustomTooltipProps) => {
+  const { title, arrow, id, placement, textColor, bgColor, maxWidth } = props;
+  return (
+    <MUITooltip
+      title={title}
+      id={id}
+      arrow={arrow}
+      placement={placement}
+      componentsProps={{
+        tooltip: {
+          sx: {
+            maxWidth: maxWidth,
+            background: bgColor,
+            color: textColor,
+            '& .MuiTooltip-arrow': {
+              color: bgColor,
+            },
+          },
+        },
+      }}
+    >
+      {TooltipInfoIcon}
+    </MUITooltip>
+  );
+};