feat: partially rework worker page

src/api/subsquid-network-squid/api.graphql

@@ -57,6 +57,7 @@ fragment WorkerFragment on Worker {
   jailed
   dialOk
   locked
+  version
   owner {
     id
   }

src/layouts/NetworkLayout/NetworkPageTitle.tsx

@@ -8,7 +8,7 @@ import { BackButton } from '@components/BackButton';
 const PageTitleWrapper = styled('div', {
   name: 'PageTitleWrapper',
 })(({ theme }) => ({
-  marginBottom: theme.spacing(5),
+  marginBottom: theme.spacing(2.5),
   minHeight: theme.spacing(5),
 
   '& .title': {

src/pages/WorkersPage/UptimeGraph.tsx

@@ -16,7 +16,7 @@ const StyledTitle = styled(Box)(({ theme: { spacing } }) => ({
 
 const StyledGraph = styled(Box)(({ theme: { spacing } }) => ({
   display: 'flex',
-  justifyContent: 'space-between',
+  justifyContent: 'space-around',
   marginBottom: spacing(1),
 }));
 
@@ -66,7 +66,7 @@ export const UptimeGraph = ({ worker }: { worker: BlockchainApiFullWorker }) =>
 
   return (
     <Box sx={{ mt: 4 }}>
-      <StyledTitle>{displayedDays} days uptime</StyledTitle>
+      <StyledTitle>Uptime graph</StyledTitle>
       <StyledGraph>
         {data.map(d => (
           <StatusBar key={d.date} dayUptime={d} />

src/pages/WorkersPage/Worker.tsx

@@ -1,29 +1,29 @@
 import React from 'react';
 
-import { Divider } from '@mui/material';
+import { Stack } from '@mui/material';
 import { Box } from '@mui/system';
 import { useParams, useSearchParams } from 'react-router-dom';
 
 import { useWorkerByPeerId } from '@api/subsquid-network-squid';
-import { BackButton } from '@components/BackButton';
 import { Card } from '@components/Card';
 import { Loader } from '@components/Loader';
-import { CenteredPageWrapper } from '@layouts/NetworkLayout';
+import { CenteredPageWrapper, NetworkPageTitle } from '@layouts/NetworkLayout';
 import { WorkerUnregister } from '@pages/WorkersPage/WorkerUnregister';
 
-import { MyWorkerStat } from './MyWorkerStat';
 import { WorkerCard } from './WorkerCard';
+import { WorkerDelegate } from './WorkerDelegate';
 import { WorkerStatistics } from './WorkerStatistics';
+import { WorkerUndelegate } from './WorkerUndelegate';
 
-const sx = {
-  background: '#000',
-  color: '#fff',
+// const sx = {
+//   background: '#000',
+//   color: '#fff',
 
-  '&:hover': {
-    background: '#333',
-    color: '#fff',
-  },
-};
+//   '&:hover': {
+//     background: '#333',
+//     color: '#fff',
+//   },
+// };
 
 export const Worker = ({ backPath }: { backPath: string }) => {
   const { peerId } = useParams<{ peerId: string }>();
@@ -42,29 +42,27 @@ export const Worker = ({ backPath }: { backPath: string }) => {
 
   return (
     <CenteredPageWrapper className="wide">
-      <Box sx={{ mb: 3 }}>
-        <BackButton sx={sx} path={searchParams.get('backPath') || backPath} />
-      </Box>
+      <NetworkPageTitle
+        backPath={searchParams.get('backPath') || backPath}
+        endAdornment={
+          <Stack direction="row" spacing={2}>
+            <WorkerDelegate worker={worker} />
+            <WorkerUndelegate worker={worker} />
+          </Stack>
+        }
+      />
+
       <Card>
         <WorkerCard worker={worker} />
-
-        {worker.ownedByMe ? (
-          <Box sx={{ mt: 7.5 }}>
-            <MyWorkerStat worker={worker} />
-          </Box>
-        ) : null}
-
-        <Box sx={{ mt: 7.5 }}>
+        <Box sx={{ mt: 5 }}>
           <WorkerStatistics worker={worker} />
         </Box>
-
-        {worker.ownedByMe ? (
-          <>
-            <Divider sx={{ my: 4 }} />
-            <WorkerUnregister worker={worker} />
-          </>
-        ) : null}
       </Card>
+      {worker.ownedByMe ? (
+        <Box mt={2.5}>
+          <WorkerUnregister worker={worker} />
+        </Box>
+      ) : null}
     </CenteredPageWrapper>
   );
 };

src/pages/WorkersPage/WorkerCard.tsx

@@ -5,17 +5,12 @@ import { Divider, IconButton, Stack, styled } from '@mui/material';
 import { Box } from '@mui/system';
 import { Link } from 'react-router-dom';
 
-import {
-  BlockchainApiFullWorker,
-  WorkerStatus as BlockchainWorkerStatus,
-} from '@api/subsquid-network-squid';
+import { BlockchainApiFullWorker } from '@api/subsquid-network-squid';
 import { Avatar } from '@components/Avatar';
 import { CopyToClipboard } from '@components/CopyToClipboard';
 import { EditIcon } from '@icons/EditIcon';
 
-import { WorkerDelegate } from './WorkerDelegate';
 import { WorkerStatus } from './WorkerStatus';
-import { WorkerUndelegate } from './WorkerUndelegate';
 
 export const WorkerDescLabel = styled(Box, {
   name: 'WorkerDescLabel',
@@ -58,12 +53,6 @@ function WorkerTitle({ worker }: { worker: BlockchainApiFullWorker }) {
       <Box sx={{ flex: 1, ml: 1 }}>
         <WorkerStatus worker={worker} />
       </Box>
-      <Stack direction="row" spacing={2}>
-        {worker.status === BlockchainWorkerStatus.Active ? (
-          <WorkerDelegate worker={worker} />
-        ) : null}
-        {worker.myDelegationsTotal.greaterThan(0) ? <WorkerUndelegate worker={worker} /> : null}
-      </Stack>
     </Box>
   );
 }
@@ -89,7 +78,7 @@ export const WorkerCard = ({ worker }: { worker: BlockchainApiFullWorker }) => {
           </Box>
 
           <Divider sx={{ my: 1 }} />
-          <Stack spacing={1} direction="row" justifyContent="space-between">
+          <Stack spacing={1} direction="row">
             {/*<Stack direction="row" spacing={1}>*/}
             {/*  <WorkerDescLabel>Website</WorkerDescLabel>*/}
             {/*  <WorkerDescValue>{worker.website || '-'}</WorkerDescValue>*/}
@@ -106,6 +95,10 @@ export const WorkerCard = ({ worker }: { worker: BlockchainApiFullWorker }) => {
               <WorkerDescLabel>Joined</WorkerDescLabel>
               <WorkerDescValue>{dateFormat(worker.createdAt)}</WorkerDescValue>
             </Stack>
+            <Stack direction="row" spacing={1}>
+              <WorkerDescLabel>Version</WorkerDescLabel>
+              <WorkerDescValue>{worker.version || '-'}</WorkerDescValue>
+            </Stack>
           </Stack>
         </Box>
       </Stack>

src/pages/WorkersPage/WorkerDelegate.tsx

@@ -30,7 +30,13 @@ export const delegateSchema = (SQD_TOKEN: string) =>
     max: yup.number().label('Max').required('Max is required'),
   });
 
-export function WorkerDelegate({ worker }: { worker: BlockchainApiWorker }) {
+export function WorkerDelegate({
+  worker,
+  disabled,
+}: {
+  worker: BlockchainApiWorker;
+  disabled?: boolean;
+}) {
   const { delegateToWorker, error, isLoading } = useWorkerDelegate();
   const { SQD_TOKEN } = useContracts();
 
@@ -94,7 +100,11 @@ export function WorkerDelegate({ worker }: { worker: BlockchainApiWorker }) {
 
   return (
     <>
-      <Button disabled={!worker.delegationEnabled} onClick={handleOpen} variant="contained">
+      <Button
+        disabled={disabled || !worker.delegationEnabled}
+        onClick={handleOpen}
+        variant="contained"
+      >
         Delegate
       </Button>
       <ContractCallDialog