Merge pull request #199 from migalabs/dev

[feat] Lido CSM Integration
migalabs · Feb 27, 2025 · 1203e5c · 1203e5c
2 parents f0fdbee + 4c89368
commit 1203e5c
Show file tree

Hide file tree

Showing 26 changed files with 4,616 additions and 1,640 deletions.
diff --git a/packages/client/components/ui/BarChart.tsx b/packages/client/components/ui/BarChart.tsx
@@ -0,0 +1,96 @@
+import React, { useContext, useEffect, useState, useRef } from 'react';
+import { BarChart, Bar, ResponsiveContainer, CartesianGrid, XAxis, YAxis, Tooltip, Legend, LabelList } from 'recharts';
+import ThemeModeContext from '../../contexts/theme-mode/ThemeModeContext';
+
+interface Props {
+    data: Record<string, any>[];
+    width?: number;
+    height?: number;
+    legend?: boolean;
+}
+
+const BarChartComponent: React.FC<Props> = ({ data, width, height, legend = true }) => {
+    const barKeys = data[0] ? Object.keys(data[0]).filter(key => key !== 'name') : [];
+    const { themeMode } = useContext(ThemeModeContext) ?? {};
+    const minValue = Math.min(...data.flatMap(item => barKeys.map(key => item[key]))); 
+    const yMin = minValue < 0.55 ? 0 : 0.5;
+
+    const [smallScreen, setSmallScreen] = useState(false);
+
+    useEffect(() => {
+        const updateScreenSize = () => {
+            if (window.innerWidth > 640) {
+                setSmallScreen(false);
+            } else {
+                setSmallScreen(true);
+            }
+        };
+
+        updateScreenSize();
+
+        window.addEventListener('resize', updateScreenSize);
+
+        return () => window.removeEventListener('resize', updateScreenSize);
+    }, []);
+
+    return (
+        <ResponsiveContainer width={"100%"} height={"100%"}>
+            <BarChart
+                width={width || 500}
+                height={height || 30}
+                data={data}
+            >
+                <CartesianGrid
+                    strokeDasharray='6 6'
+                    vertical={false}
+                    style={{ stroke: themeMode?.darkMode ? 'var(--darkGray)' : 'var(--bgBar)' }}
+                />
+                <XAxis
+                    dataKey='name' 
+                    style={themeMode?.darkMode ? { fill: 'var(--white)' } : { fill: 'var(--black)' }}
+                />
+                <YAxis
+                    tickFormatter={(value) => `${(value * 100).toFixed(0)}%`}
+                    style={{
+                        fill: themeMode?.darkMode ? 'var(--white)': 'var(--black)',
+                        fontSize: smallScreen ? '10px' : '14px',
+                    }}
+                    domain={[yMin, 1]}
+                    ticks={[0.5, 0.65, 0.8, 0.9, 1]}
+                    overlineThickness={0}
+                />
+                <Tooltip
+                    formatter={(value: number) => `${(value * 100).toFixed(1)}%`}
+                    labelStyle={themeMode?.darkMode ? { fill: 'var(--white)' } : { fill: 'var(--black)' }}
+                    itemStyle={themeMode?.darkMode ? { fill: 'var(--white)' } : { fill: 'var(--black)' }}
+                    cursor={themeMode?.darkMode ? { fill: 'var(--bgDarkMode)' } : { fill: 'var(--bgBar)' }}
+                    contentStyle={themeMode?.darkMode ? { backgroundColor: 'var(--bgDarkMode)', color: 'var(--white)' } : { backgroundColor: 'var(--white)', color: 'var(--black)' }}
+                />
+                {legend && <Legend
+                    wrapperStyle={smallScreen ? { fontSize: '10px', margin: '0 0', display: 'block', width: '100%' } : { fontSize: '14px' }}
+                />}
+                {barKeys.map((key, index) => (
+                    <Bar
+                        key={key}
+                        dataKey={key}
+                        fill={themeMode?.darkMode ? ['var(--purple)', 'var(--exitedPurple)', 'var(--purpleDark)'][index] : ['var(--darkPurple)', 'var(--exitedPurple)', 'var(--purpleDark)'][index]}
+                        color='var(--white)'
+                    >
+                        <LabelList
+                            dataKey={key}
+                            position={'middle'}
+                            offset={2}
+                            style={{
+                                fill: themeMode?.darkMode ? 'var(--black)' : 'var(--white)'
+                                }}
+                            className='3xs:text-[12px] md:text-[13px] ml:text-[16px]'
+                            formatter={(value: number) => `${(value * 100).toFixed(1)}%`}
+                        />
+                    </Bar>
+                ))}
+            </BarChart>
+        </ResponsiveContainer>
+  );
+};
+
+export default BarChartComponent;
diff --git a/packages/client/components/ui/CardContent.tsx b/packages/client/components/ui/CardContent.tsx
@@ -6,14 +6,13 @@ type Props = {
     bg: string;
     color: string;
     boxShadow: string;
-    width: number;
 };
 
-const CardContent = ({ content, bg, color, boxShadow, width }: Props) => {
+const CardContent = ({ content, bg, color, boxShadow }: Props) => {
     return (
         <span
-            className='block px-5 rounded-md font-medium capitalize py-2 text-center'
-            style={{ background: bg, color, boxShadow, width }}
+            className='block md:px-6 3xs:px-4 rounded-md font-medium capitalize py-2 text-center 3xs:text-[13px] md:text-[16px] md:h-[40px] 2xs:min-w-[135px] 3xs:min-w-[115px] 3xs:max-w-[170px] md:min-w-[200px] md:max-w-[250px]'
+            style={{ background: bg, color, boxShadow }}
         >
             {content}
         </span>

diff --git a/packages/client/components/ui/EntityCard.tsx b/packages/client/components/ui/EntityCard.tsx
@@ -12,12 +12,21 @@ type Props = {
     pool: string;
 };
 
+function poolRoute(pool: string) {
+    const newName = pool.replace(' ', '-').toLocaleLowerCase();
+    if (pool !== 'Lido CSM') {
+        return '/entities/' + newName;
+    }
+
+    return newName;
+}
+
 const EntityCard = ({ activeValidators, pool }: Props) => {
     // Theme Mode Context
     const { themeMode } = useContext(ThemeModeContext) ?? {};
 
     return (
-        <NetworkLink href={`/entities/${pool.toLocaleLowerCase()}`}>
+        <NetworkLink href={`${poolRoute(pool)}`}>
             <div
                 className='flex md:flex-row flex-col h-[150px] md:h-[100px] bg-[var(--bgFairLightMode)] md:hover:bg-[var(--bgStrongLightMode)] transition md:justify-start items-center justify-center py-4 px-2 border-2 gap-2 rounded-md text-[var(--black)] dark:text-[var(--white)]'
                 style={{
@@ -30,7 +39,7 @@ const EntityCard = ({ activeValidators, pool }: Props) => {
 
                 <div className='flex flex-col items-center md:items-start'>
                     <span className='text-[12px] md:text-[16px] font-semibold uppercase text-center md:text-start md:w-[100%] break-all'>
-                        {pool}
+                        {pool.replace('_', ' ')}
                     </span>
 
                     <span className='font-light text-[14px] md:text-[16px]'>

diff --git a/packages/client/components/ui/LinkEntity.tsx b/packages/client/components/ui/LinkEntity.tsx
@@ -11,7 +11,19 @@ type Props = {
     mxAuto?: boolean;
 };
 
+function cleanOperatorName(entity: string | undefined) {
+    if (!entity) {
+        return 'others';
+    }
+
+    return entity
+        .replace('_', ' ')
+        .replace('_lido', '')
+        .replace(/([a-zA-Z])(\d)/g, '$1 $2');
+}
+
 const LinkEntity = ({ entity, children, mxAuto }: Props) => {
+    const cleanedEntity = cleanOperatorName(entity);
     return (
         <NetworkLink
             href={`/entity/${entity || 'others'}`}
@@ -22,7 +34,7 @@ const LinkEntity = ({ entity, children, mxAuto }: Props) => {
         >
             {children ?? (
                 <>
-                    <p className='break-all'>{entity || 'Others'}</p>
+                    <p className='break-all'>{cleanedEntity}</p>
                     <LinkIcon />
                 </>
             )}

diff --git a/packages/client/components/ui/Menu.tsx b/packages/client/components/ui/Menu.tsx
@@ -11,13 +11,17 @@ import axiosClient from '../../config/axios';
 const Menu = () => {
     // States
     const [isOpen, setIsOpen] = useState(false);
-    const [networks, setNetworks] = useState([]);
+    const [networks, setNetworks] = useState<string[]>([]);
+    const [currentNetwork, setCurrentNetwork] = useState<string | null>(null);
 
+
     useEffect(() => {
         if (networks.length === 0) {
             getNetworks();
         }
-
+        const network = new URLSearchParams(window.location.search).get('network');
+        setCurrentNetwork(network);
+
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -48,6 +52,10 @@ const Menu = () => {
                 name: 'Validators',
                 route: '/validators',
             },
+            {
+                name: 'Slashings',
+                route: '/slashed_validators',
+            },
             {
                 name: 'Blocks',
                 route: '/blocks',
@@ -60,15 +68,23 @@ const Menu = () => {
                 name: 'Clients',
                 route: '/clients',
             },
+            ...(currentNetwork?.includes('mainnet')
+                ? [
+                    {
+                        name: 'Lido CSM',
+                        route: '/lido-csm',
+                    },
+                ]
+                : []),
         ],
         Networks:
             networks.length > 0
                 ? networks.map((network: string) => {
-                      return {
-                          name: network.charAt(0).toUpperCase() + network.slice(1),
-                          route: `/?network=${network}`,
-                      };
-                  })
+                    return {
+                        name: network.charAt(0).toUpperCase() + network.slice(1),
+                        route: `/?network=${network}`,
+                    };
+                })
                 : [],
     };
 

diff --git a/packages/client/components/ui/Pagination.tsx b/packages/client/components/ui/Pagination.tsx
@@ -81,7 +81,7 @@ const Pagination = ({ currentPage, totalPages, fullWidth, onChangePage, onChange
                 <div className='hidden xs:block h-8 w-0.5 bg-[var(--black)] dark:bg-[var(--white)]'></div>
 
                 <select
-                    className='h-6 text-[14px] md:text-[16px] rounded-sm px-1 my-0.5'
+                    className='h-6 text-[14px] md:text-[16px] rounded-sm px-1 my-0.5 bg-transparent'
                     onChange={e => onChangeNumRows(Number(e.target.value))}
                 >
                     <option value={10}>10</option>

diff --git a/packages/client/components/ui/ShareMenu.tsx b/packages/client/components/ui/ShareMenu.tsx
@@ -36,6 +36,8 @@ const ShareMenu = ({ type }: Props) => {
     const [copied, setCopied] = useState(false);
 
     const getShareUrl = (shareLink: string) => {
+        if (typeof window === 'undefined')
+            return '';
         const encodedUrl = window.location.href;
         const encodedTitle = `Check out this ${type} on Ethseer!`;
 

diff --git a/packages/client/components/ui/TabHeader.tsx b/packages/client/components/ui/TabHeader.tsx
@@ -52,7 +52,7 @@ const TabHeader = ({ header, isSelected, onClick }: Props) => {
 
     return (
         <div
-            className='flex items-center justify-center border border-white py-4 px-8 rounded-md cursor-pointer shadow-md transition-all'
+            className='flex items-center justify-center border border-white 2xs:px-5 3xs:px-4 3xs:py-3 sm:py-4 sm:px-8 mt-4 rounded-md cursor-pointer shadow-md transition-all'
             style={hoverStyles}
             onClick={onClick}
             onMouseEnter={handleMouseEnter}

diff --git a/packages/client/components/ui/TitleWithArrows.tsx b/packages/client/components/ui/TitleWithArrows.tsx
@@ -51,7 +51,7 @@ const TitleWithArrows = ({ type, value }: Props) => {
             {getArrow('left')}
 
             <Title className='capitalize' removeMarginTop>
-                {type} {!Number.isNaN(value) && value.toLocaleString()}
+                {type} {!Number.isNaN(value) && value.toLocaleString("en-US")}
             </Title>
 
             {getArrow('right')}

diff --git a/packages/client/components/ui/ValidatorStatus.tsx b/packages/client/components/ui/ValidatorStatus.tsx
@@ -23,12 +23,12 @@ const ValidatorStatus = ({ status }: Props) => {
             setColor('var(--white)');
             setBackgroundColor('var(--missedRed)');
             setBoxShadow('var(--boxShadowRed)');
-        } else if (status === 'exit') {
+        } else if (status === 'exited') {
             setText('exited');
             setColor('var(--white)');
             setBackgroundColor('var(--exitedPurple)');
             setBoxShadow('var(--boxShadowPurple)');
-        } else if (status === 'in queue to activation') {
+        } else if (status === 'in_activation_queue') {
             setText('deposited');
             setColor('var(--white)');
             setBackgroundColor('var(--depositedBlue)');
@@ -40,7 +40,7 @@ const ValidatorStatus = ({ status }: Props) => {
 
     return (
         <span
-            className='block capitalize rounded-md w-40 text-center md:w-52 font-medium pt-2 pb-1 md:pt-[7px] px-5 md:px-10'
+            className='block capitalize rounded-md w-40 text-center md:w-[200px] md:h-[40px] font-medium py-2 md:pt-[7px] px-5 md:px-10 3xs:text-[13px] md:text-[16px]'
             style={{ backgroundColor, borderColor: color, color, boxShadow: boxShadow }}
         >
             {text}