Operator pages improvements (#105)

src/avs/AVSDetails.jsx

@@ -28,7 +28,7 @@ export default function AVSDetails() {
   const { avsService } = useServices();
   const [state, dispatch] = useMutativeReducer(reduceState, {
     avsDetails: null,
-    timelineTab: '7days',
+    timelineTab: 'all',
     lstDistributionData: [],
     eigenTVL: BigInt(0),
     beaconTVL: BigInt(0),

src/avs/AVSTotalValueOvertime.jsx

@@ -9,7 +9,7 @@ import AVSTotalValueOvertimeChart from './AVSTotalValueOvertimeChart';
 
 const AVSTotalValueOvertime = ({ avsAddress }) => {
   const [state, dispatch] = useMutativeReducer(reduceState, {
-    timelineTab: '7days',
+    timelineTab: 'all',
     avsTotalValueOvertimeData: null
   });
   const { avsService } = useServices();

src/avs/Operators.jsx

@@ -1,7 +1,7 @@
 import { Card, Input, Skeleton } from '@nextui-org/react';
 import { SearchIcon } from '@nextui-org/shared-icons';
 import { useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 import { useMutativeReducer } from 'use-mutative';
 import { useServices } from '../@services/ServiceContext';
 import { reduceState } from '../shared/helpers';
@@ -114,7 +114,8 @@ export default function Operators({ avsAddress, totalTVL }) {
             filteredOperators.map(
               (operator, i) =>
                 operator.metadata && (
-                  <div
+                  <Link
+                    to={`/operators/${operator.address}`}
                     key={`operator-item-${i}`}
                     className={`border-t border-outline flex flex-row gap-x-2 justify-between items-center p-4 hover:bg-default`}
                   >
@@ -143,7 +144,7 @@ export default function Operators({ avsAddress, totalTVL }) {
                         {formatNumber(operator.strategiesTotal, compact)} ETH
                       </div>
                     </span>
-                  </div>
+                  </Link>
                 )
             )
           ) : (

src/avs/OperatorsOvertime.jsx

@@ -9,7 +9,7 @@ import OperatorsOvertimeChart from './OperatorsOvertimeChart';
 
 const OperatorsOvertime = ({ avsAddress }) => {
   const [state, dispatch] = useMutativeReducer(reduceState, {
-    timelineTab: '7days',
+    timelineTab: 'all',
     operatorsOvertimeData: null
   });
   const { avsService } = useServices();

src/home/EigenLayerTVLOvertime.jsx

@@ -7,7 +7,7 @@ import EigenLayerTVLOvertimeChart from './EigenLayerTVLOvertimeChart';
 
 const EigenLayerTVLOvertime = ({ eigenTVLData }) => {
   const [state, dispatch] = useMutativeReducer(reduceState, {
-    timelineTab: '7days'
+    timelineTab: 'all'
   });
 
   const getDataByRange = useCallback(() => {

src/operators/LSTDistribution.jsx

@@ -39,7 +39,7 @@ const LSTDistribution = ({ strategies, operatorTVL }) => {
     lstDistribution: []
   });
   const [active, setActive] = useState(null);
-  const width = 200;
+  const width = 300;
   const half = width / 2;
 
   const assetFormatter = new Intl.NumberFormat('en-US', {
@@ -99,7 +99,7 @@ const LSTDistribution = ({ strategies, operatorTVL }) => {
 
   return (
     <div className="flex flex-col lg:flex-row gap-y-4">
-      <div className="w-full lg:w-1/2 flex flex-col gap-y-3">
+      <div className="w-full flex flex-col gap-y-3">
         {state.lstDistribution.map((strategy, i) => (
           <LSTShare
             key={`lst-distribution-item-${i}`}
@@ -119,7 +119,7 @@ const LSTDistribution = ({ strategies, operatorTVL }) => {
               pieValue={data => data.tokensInETH}
               outerRadius={half}
               innerRadius={({ data }) => {
-                const size = 30;
+                const size = 50;
                 return half - size;
               }}
               cornerRadius={0}

src/operators/OperatorDetails.jsx

@@ -15,7 +15,7 @@ const OperatorDetails = () => {
   const { operatorService } = useServices();
   const [state, dispatch] = useMutativeReducer(reduceState, {
     operatorTVL: 0,
-    timelineTab: '7days'
+    timelineTab: 'all'
   });
 
   const calculateTVL = strategies => {
@@ -57,35 +57,38 @@ const OperatorDetails = () => {
           <div className="flex flex-row gap-x-2 items-center">
             <div className="flex items-center gap-3">
               <span className="text-foreground-2 text-3xl font-medium">
-                {state.operator?.metadata?.name}
+                {state.operator?.metadata?.name ?? 'Unknown'}
               </span>
             </div>
           </div>
           <div className="py-4 text-sm text-foreground-2">
             {state.operator?.metadata?.description}
           </div>
-          <div className="w-full h-20 flex rounded-lg border border-outline px-10 py-4 justify-between">
+          <div className="w-full min-h-20 flex rounded-lg border border-outline px-10 py-4 justify-between">
             <div className="flex basis-1/4 flex-col gap-y-2 items-center">
-              <span className="text-foreground-1 text-sm">TVL</span>
-              <span>
+              <span className="text-default-2 text-sm text-center">TVL</span>
+              <span className="text-foreground-active text-center">
                 {state.operator?.strategies &&
                   `${assetFormatter.format(formatEther(state.operatorTVL.toString()))} ETH`}
               </span>
             </div>
-            <Divider orientation="vertical" className="bg-outline" />
+            <Divider orientation="vertical" className="bg-outline min-h-14" />
             <div className="flex basis-1/6 flex-col items-center gap-y-2">
-              <span className="text-foreground-1 text-sm">AVS Subscribed</span>
-              <span>{state.operator?.avs.length}</span>
+              <span className="text-default-2 text-sm text-center">
+                AVS Subscribed
+              </span>
+              <span className="text-foreground-active text-center">
+                {state.operator?.avs.length}
+              </span>
             </div>
-            <Divider orientation="vertical" className="bg-outline" />
+            <Divider orientation="vertical" className="bg-outline min-h-14" />
             <div className="flex basis-2/12 flex-col gap-y-2 items-center">
-              <span className="text-foreground-1 text-sm">Stakers</span>
-              <span>{state.operator?.stakerCount}</span>
-            </div>
-            <Divider orientation="vertical" className="bg-outline" />
-            <div className="flex basis-1/12 flex-col gap-y-2 items-center">
-              <span className="text-foreground-1 text-sm">Uptime</span>
-              <span>TODO</span>
+              <span className="text-default-2 text-sm text-center">
+                Restakers
+              </span>
+              <span className="text-foreground-active text-center">
+                {state.operator?.stakerCount}
+              </span>
             </div>
           </div>
         </CardBody>
@@ -99,17 +102,6 @@ const OperatorDetails = () => {
       />
 
       <div className="flex flex-col lg:flex-row gap-4 w-full">
-        <Card
-          radius="md"
-          className="bg-content1 w-full border border-outline p-0"
-        >
-          <CardHeader className="m-4">
-            <span className="text-foreground-2">Restaking Leaderboard</span>
-          </CardHeader>
-          <CardBody>
-            <RestakingLeaderboard />
-          </CardBody>
-        </Card>
         <div className="w-full flex flex-col gap-y-4">
           <RestakersTrend opAddress={address} />
           <Card

src/operators/OperatorTVLOverTime.jsx

@@ -10,7 +10,7 @@ import OperatorTVLOverTimeChart from './OperatorTVLOverTimeChart';
 const OperatorTVLOverTime = ({ opAddress, currentTVL }) => {
   const { operatorService } = useServices();
   const [state, dispatch] = useMutativeReducer(reduceState, {
-    timelineTab: '7days',
+    timelineTab: 'all',
     tvlOvertimeData: []
   });
 
@@ -54,7 +54,7 @@ const OperatorTVLOverTime = ({ opAddress, currentTVL }) => {
     <Card radius="md" className="bg-content1 border border-outline p-4 ">
       <CardHeader className="flex flex-wrap justify-between gap-3">
         <div className="space-y-2 block">
-          <div className="font-light text-lg text-foreground-1">TVL</div>
+          <div className="font-light text-lg text-foreground-active">TVL</div>
           <div className="font-light">
             <div className="text-base ">
               <span>{currentTVL} ETH</span>

src/operators/OperatorsList.jsx

@@ -4,15 +4,19 @@ import { useMutativeReducer } from 'use-mutative';
 import { reduceState } from '../shared/helpers';
 import { Link, useSearchParams } from 'react-router-dom';
 import Pagination from '../shared/Pagination';
-import { Input } from '@nextui-org/react';
+import { Input, Skeleton } from '@nextui-org/react';
+import { formatNumber } from '../utils';
+import { useTailwindBreakpoint } from '../shared/useTailwindBreakpoint';
 import useDebounce from '../shared/hooks/useDebounce';
 
 const OperatorsList = () => {
   const { operatorService } = useServices();
   const [searchParams, setSearchParams] = useSearchParams();
+  const compact = !useTailwindBreakpoint('md');
   const [state, dispatch] = useMutativeReducer(reduceState, {
     searchTerm: searchParams.get('search'),
-    searchTriggered: false
+    searchTriggered: false,
+    error: null
   });
   const debouncedSearchTerm = useDebounce(state.searchTerm, 300);
 
@@ -21,10 +25,14 @@ const OperatorsList = () => {
       const data = await operatorService.getAll(pageIndex - 1, search);
       dispatch({
         operators: data.results,
+        isFetchingOperatorData: false,
         totalPages: Math.ceil(data.totalCount / 10)
       });
     } catch {
-      // TODO: handle error
+      dispatch({
+        error: 'Failed to fetch Operator data',
+        isFetchingOperatorData: false
+      });
     }
   };
 
@@ -107,42 +115,84 @@ const OperatorsList = () => {
       </div>
       <div className="bg-content1 border border-outline rounded-lg text-sm">
         <div className="flex flex-row gap-x-2 justify-between items-center p-4 text-foreground-1">
-          <div className="min-w-5"></div>
+          <div className="min-w-5 lg:min-w-8"></div>
           <span className="basis-1/2">Operators</span>
-          <span className="basis-1/3">Servicing AVS</span>
           <span className="basis-1/4">Restakers</span>
           <span className="basis-1/3 text-end">TVL</span>
         </div>
-        {state.operators?.map((op, i) => (
-          <Link
-            to={`/operators/${op.address}`}
-            key={`operator-item-${i}`}
-            className={`border-t border-outline flex flex-row gap-x-2 justify-between items-center p-4 cursor-pointer hover:bg-default`}
-          >
-            <div className="min-w-5"></div>
-            <img className="h-5 rounded-full min-w-5" src={op.metadata?.logo} />
-            <span className="basis-1/2 truncate">{op.metadata?.name}</span>
-            <span className="basis-1/3">7 AVS</span>
-            <span className="basis-1/4">{op.stakerCount}</span>
-            <span className="basis-1/3 text-end">
-              <div>ETH {assetFormatter.format(op.strategiesTotal)}</div>
-              <div className="text-foreground-1 text-xs">
-                USD {assetFormatter.format(op.strategiesTotal)}
-              </div>
-            </span>
-          </Link>
-        ))}
+        {state.isFetchingOperatorData ? (
+          <OperatorListSkeleton />
+        ) : (
+          <>
+            {state.operators?.map((op, i) => (
+              <Link
+                to={`/operators/${op.address}`}
+                key={`operator-item-${i}`}
+                className={`border-t border-outline flex flex-row gap-x-2 justify-between items-center px-4 py-2 cursor-pointer hover:bg-default`}
+              >
+                <div className="min-w-5 lg:min-w-8 text-foreground-2">
+                  {(searchParams.get('page') - 1) * 10 + i + 1}
+                </div>
+                {op.metadata?.logo ? (
+                  <img
+                    className="h-5 rounded-full min-w-5"
+                    src={op.metadata?.logo}
+                  />
+                ) : (
+                  <span class="material-symbols-outlined h-5 rounded-full text-lg text-yellow-300 min-w-5 flex justify-center items-center">
+                    warning
+                  </span>
+                )}
+                <span className="basis-1/2 truncate">
+                  {op.metadata?.name ?? 'Unknown'}
+                </span>
+                <span className="basis-1/4">
+                  {formatNumber(op.stakerCount, compact)}
+                </span>
+                <span className="basis-1/3 text-end">
+                  <div>ETH {assetFormatter.format(op.strategiesTotal)}</div>
+                  <div className="text-foreground-1 text-xs">
+                    USD {assetFormatter.format(op.strategiesTotal)}
+                  </div>
+                </span>
+              </Link>
+            ))}
 
-        <Pagination
-          totalPages={state.totalPages}
-          currentPage={parseInt(searchParams.get('page'))}
-          handleNext={handleNext}
-          handlePrevious={handlePrevious}
-          handlePageClick={handlePageClick}
-        />
+            <Pagination
+              totalPages={state.totalPages}
+              currentPage={parseInt(searchParams.get('page'))}
+              handleNext={handleNext}
+              handlePrevious={handlePrevious}
+              handlePageClick={handlePageClick}
+            />
+          </>
+        )}
       </div>
     </div>
   );
 };
 
 export default OperatorsList;
+
+const OperatorListSkeleton = () => {
+  return (
+    <div>
+      {[...Array(10)].map((item, i) => (
+        <div
+          key={i}
+          className="p-4 flex justify-normal gap-4 md:gap-8 text-foreground-1 border-t border-outline w-full"
+        >
+          <div className="basis-1/2">
+            <Skeleton className="h-6 rounded-md w-4/5 md:w-2/3 dark:bg-default" />
+          </div>
+          <div className="basis-1/4">
+            <Skeleton className="h-6 rounded-md w-4/5 md:w-2/3 dark:bg-default" />
+          </div>{' '}
+          <div className="basis-1/3">
+            <Skeleton className="h-6 rounded-md w-full dark:bg-default" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};

src/operators/RestakersTrend.jsx

@@ -6,12 +6,13 @@ import { reduceState } from '../shared/helpers';
 import { ParentSize } from '@visx/responsive';
 import RestakersTrendChart from './RestakersTrendChart';
 import { useServices } from '../@services/ServiceContext';
+import { assetFormatter } from '../utils';
 
 const RestakersTrend = ({ opAddress }) => {
   const { operatorService } = useServices();
   const [state, dispatch] = useMutativeReducer(reduceState, {
     restakerTrend: [],
-    timelineTab: '7days'
+    timelineTab: 'all'
   });
 
   const getDataByRange = useCallback(() => {
@@ -45,13 +46,17 @@ const RestakersTrend = ({ opAddress }) => {
     <Card radius="md" className="bg-content1 w-full border border-outline p-4">
       <CardHeader className="flex flex-wrap justify-between gap-3">
         <div className="space-y-2 block">
-          <span className="text-foreground-2">Restaker Trend</span>
+          <span className="text-foreground-active">Restaker Trend</span>
           <div className="font-light">
             <div className="text-base text-foreground-1">
               <span>
                 Total Restakers:{' '}
-                {state.restakerTrend[state.restakerTrend.length - 1]
-                  ?.restakers ?? 'N/A'}
+                {state.restakerTrend[state.restakerTrend.length - 1]?.restakers
+                  ? assetFormatter.format(
+                      state.restakerTrend[state.restakerTrend.length - 1]
+                        ?.restakers
+                    )
+                  : 'N/A'}
               </span>
             </div>
           </div>

src/shared/Sidebar.jsx

@@ -25,10 +25,11 @@ export default function Sidebar({ onOpenChange }) {
       </header>
       <nav className="flex-none">
         {navItems.map((item, i) => {
-          const selected =
-            item.href === location.pathname
-              ? 'border-foreground-1 bg-default text-foreground-1'
-              : 'border-transparent';
+          const selected = new RegExp(`(^|/)${item.href}(/|$)`).test(
+            location.pathname
+          )
+            ? 'border-foreground-1 bg-default text-foreground-1'
+            : 'border-transparent';
           return (
             <Link
               key={`nav-item-${i}`}