diff --git a/src/api/subsquid-network-squid/workers-graphql.ts b/src/api/subsquid-network-squid/workers-graphql.ts index 0667f4b..6f0a481 100644 --- a/src/api/subsquid-network-squid/workers-graphql.ts +++ b/src/api/subsquid-network-squid/workers-graphql.ts @@ -76,6 +76,29 @@ export class BlockchainApiWorker { this.totalReward = new Decimal(this.claimedReward).add(this.claimableReward).toFixed(0); } + + canEdit() { + if (!this.ownedByMe) return false; + + switch (this.status) { + case WorkerStatus.Registering: + case WorkerStatus.Active: + return true; + default: + return false; + } + } + + displayStats() { + switch (this.status) { + case WorkerStatus.Registering: + case WorkerStatus.Active: + case WorkerStatus.Deregistering: + return true; + default: + return false; + } + } } // inherit API interface for internal class diff --git a/src/components/Table/BorderedTable.tsx b/src/components/Table/BorderedTable.tsx index 768fc08..d8324df 100644 --- a/src/components/Table/BorderedTable.tsx +++ b/src/components/Table/BorderedTable.tsx @@ -13,7 +13,7 @@ export const BorderedTable = styled(Table)(({ theme }) => ({ borderRadius: borderRadius, borderSpacing: 0, borderCollapse: 'separate', - border: `1px solid #e8e8e8`, // FIXME: color should not be hardcoded + border: `1px solid ${theme.palette.divider}`, '& td, & th': { background: theme.palette.background.paper, diff --git a/src/pages/DashboardPage/Workers.tsx b/src/pages/DashboardPage/Workers.tsx index 84c5d1f..bdc75e7 100644 --- a/src/pages/DashboardPage/Workers.tsx +++ b/src/pages/DashboardPage/Workers.tsx @@ -118,7 +118,7 @@ export function Workers() { {/* Delegation capacity*/} {/**/} - Joined date + Registered diff --git a/src/pages/WorkersPage/UptimeGraph.tsx b/src/pages/WorkersPage/UptimeGraph.tsx index 1046640..3849ceb 100644 --- a/src/pages/WorkersPage/UptimeGraph.tsx +++ b/src/pages/WorkersPage/UptimeGraph.tsx @@ -20,13 +20,13 @@ const StyledGraph = styled(Box)(({ theme: { spacing } }) => ({ marginBottom: spacing(1), })); -const StyledNotes = styled(Box)(({ theme: { spacing } }) => ({ +const StyledNotes = styled(Box)(({ theme }) => ({ display: 'flex', justifyContent: 'space-between', fontSize: '.875rem', lineHeight: '1.25rem', - opacity: '.8', - marginBottom: spacing(2), + color: theme.palette.text.secondary, + marginBottom: theme.spacing(2), })); const oneDayInMilliseconds = 24 * 60 * 60 * 1000; diff --git a/src/pages/WorkersPage/Worker.tsx b/src/pages/WorkersPage/Worker.tsx index 231a84e..35e9004 100644 --- a/src/pages/WorkersPage/Worker.tsx +++ b/src/pages/WorkersPage/Worker.tsx @@ -4,7 +4,7 @@ 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 { useWorkerByPeerId, WorkerStatus } from '@api/subsquid-network-squid'; import { Card } from '@components/Card'; import { Loader } from '@components/Loader'; import { CenteredPageWrapper, NetworkPageTitle } from '@layouts/NetworkLayout'; @@ -54,11 +54,11 @@ export const Worker = ({ backPath }: { backPath: string }) => { - + - {worker.ownedByMe ? ( + {worker.ownedByMe && worker.status !== WorkerStatus.Withdrawn ? ( diff --git a/src/pages/WorkersPage/WorkerCard.tsx b/src/pages/WorkersPage/WorkerCard.tsx index 04f50a3..8e7431b 100644 --- a/src/pages/WorkersPage/WorkerCard.tsx +++ b/src/pages/WorkersPage/WorkerCard.tsx @@ -1,27 +1,17 @@ import React from 'react'; -import { dateFormat } from '@i18n'; -import { Divider, IconButton, Stack, styled } from '@mui/material'; +import { IconButton, Stack, styled, useMediaQuery, useTheme } from '@mui/material'; import { Box } from '@mui/system'; import { Link } from 'react-router-dom'; import { BlockchainApiFullWorker } from '@api/subsquid-network-squid'; import { Avatar } from '@components/Avatar'; import { CopyToClipboard } from '@components/CopyToClipboard'; +import { shortPeerId } from '@components/PeerId'; import { EditIcon } from '@icons/EditIcon'; import { WorkerStatus } from './WorkerStatus'; -export const WorkerDescLabel = styled(Box, { - name: 'WorkerDescLabel', -})(({ theme }) => ({ - color: theme.palette.text.primary, -})); -export const WorkerDescValue = styled(Box, { - name: 'WorkerDescValue', -})(({ theme }) => ({ - color: theme.palette.text.secondary, -})); export const PeerIdRow = styled(Box, { name: 'PeerIdRow', })(({ theme }) => ({ @@ -29,79 +19,47 @@ export const PeerIdRow = styled(Box, { marginBottom: theme.spacing(1.5), color: theme.palette.importantLink.main, fontSize: '0.875rem', -})); - -export const WorkerDescription = styled(Box, { - name: 'WorkerDescription', -})(({ theme }) => ({ - fontSize: '1rem', - color: theme.palette.text.secondary, - lineHeight: 1.8, + overflowWrap: 'anywhere', })); function WorkerTitle({ worker }: { worker: BlockchainApiFullWorker }) { return ( - {worker.name || worker.peerId} - {worker.ownedByMe ? ( - - - - - - ) : null} - - + + {worker.name || worker.peerId} + {worker.canEdit() ? ( + + + + ) : null} ); } export const WorkerCard = ({ worker }: { worker: BlockchainApiFullWorker }) => { - return ( - - - - - - - {worker.description} - - - - - + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down('xs')); - - - {/**/} - {/* Website*/} - {/* {worker.website || '-'}*/} - {/**/} - {/**/} - {/* Contact*/} - {/* {worker.email || '-'}*/} - {/**/} - {/**/} - {/* Version*/} - {/* -*/} - {/**/} - - Joined - {dateFormat(worker.createdAt)} - - - Version - {worker.version || '-'} - - - - - + return ( + + + + + + + + + + {/* {worker.description} */} + ); }; diff --git a/src/pages/WorkersPage/WorkerName.tsx b/src/pages/WorkersPage/WorkerName.tsx index a0e5681..09779c7 100644 --- a/src/pages/WorkersPage/WorkerName.tsx +++ b/src/pages/WorkersPage/WorkerName.tsx @@ -15,6 +15,7 @@ const Name = styled(Box, { })(({ theme }) => ({ marginBottom: theme.spacing(0.5), fontWeight: 500, + whiteSpace: 'nowrap', })); export const WorkerName = ({ @@ -32,7 +33,9 @@ export const WorkerName = ({ colorDescriminator={worker.peerId} /> - {worker.name ? {worker.name} : null} + {worker.name ? ( + {worker.name.length > 50 ? worker.name.slice(0, 47) + '...' : worker.name} + ) : null} ({ - flex: 1, - fontWeight: 500, + flex: 0.5, + color: theme.palette.text.secondary, whiteSpace: 'balance', maxWidth: theme.spacing(25), + fontSize: '1rem', })); export const WorkerColumn = styled(Box, { @@ -47,92 +50,125 @@ export const WorkerDescValue = styled(Box, { name: 'WorkerDescValue', })(({ theme }) => ({ flex: 1, - color: theme.palette.text.secondary, marginLeft: theme.spacing(2), + overflowWrap: 'anywhere', })); export const Title = styled(Box)(({ theme }) => ({ - fontWeight: 500, - fontSize: '1.5rem', + fontSize: '1.25rem', lineHeight: 1, - marginBottom: theme.spacing(5), + marginBottom: theme.spacing(3), })); export const WorkerStatistics = ({ worker }: { worker: BlockchainApiFullWorker }) => { const { SQD_TOKEN } = useContracts(); return ( - }> - - Bond - - - Worker APR, 7d - - {worker.apr != null ? percentFormatter(worker.apr) : '-'} - - - - Bonded - {formatSqd(SQD_TOKEN, worker.bond, 8)} - - - Total rewards - {formatSqd(SQD_TOKEN, worker.totalReward, 8)} - - - - + }> - Delegation - + - Delegator APR, 7d - - {worker.stakerApr != null ? percentFormatter(worker.stakerApr) : '-'} - - - - Delegators - {worker.delegationCount} - - - Total delegated - {formatSqd(SQD_TOKEN, worker.totalDelegation, 8)} + Registered + {dateFormat(worker.createdAt)} - - - - - Statistics - - - Uptime, 24h / 90d - - {percentFormatter(worker.uptime24Hours)} / {percentFormatter(worker.uptime90Days)} - + + Version + {worker.version || '-'} - - Queries, 24h / 90d + + Website - {numberWithSpacesFormatter(worker.queries24Hours)} /{' '} - {numberWithSpacesFormatter(worker.queries90Days)} + {worker.website ? {worker.website} : '-'} - - Data served, 24h / 90d + + Contact - {bytesFormatter(worker.servedData24Hours)} / {bytesFormatter(worker.servedData90Days)} + {worker.email ? : '-'} - - Data stored - {bytesFormatter(worker.storedData)} + + Description + {worker.description || '-'} - - + + {worker.displayStats() ? ( + }> + + Bond + + + Worker APR, 7d + + {worker.apr != null ? percentFormatter(worker.apr) : '-'} + + + + Bonded + {formatSqd(SQD_TOKEN, worker.bond, 8)} + + + Total rewards + {formatSqd(SQD_TOKEN, worker.totalReward, 8)} + + + + + + Delegation + + + Delegator APR, 7d + + {worker.stakerApr != null ? percentFormatter(worker.stakerApr) : '-'} + + + + Delegators + {worker.delegationCount} + + + Total delegated + {formatSqd(SQD_TOKEN, worker.totalDelegation, 8)} + + + + + + Statistics + + + Uptime, 24h / 90d + + {percentFormatter(worker.uptime24Hours)} / {percentFormatter(worker.uptime90Days)} + + + + Queries, 24h / 90d + + {numberWithSpacesFormatter(worker.queries24Hours)} /{' '} + {numberWithSpacesFormatter(worker.queries90Days)} + + + + Data served, 24h / 90d + + {bytesFormatter(worker.servedData24Hours)} /{' '} + {bytesFormatter(worker.servedData90Days)} + + + + Data stored + {bytesFormatter(worker.storedData)} + + + + + + + ) : null} ); }; diff --git a/src/pages/WorkersPage/WorkerUnregister.tsx b/src/pages/WorkersPage/WorkerUnregister.tsx index 8c1d240..52def52 100644 --- a/src/pages/WorkersPage/WorkerUnregister.tsx +++ b/src/pages/WorkersPage/WorkerUnregister.tsx @@ -21,7 +21,8 @@ export function WorkerUnregister({ worker }: { worker: BlockchainApiFullWorker } return ( - {worker.status === WorkerStatus.Deregistered ? ( + {worker.status === WorkerStatus.Deregistered || + worker.status === WorkerStatus.Deregistering ? ( { @@ -32,7 +33,7 @@ export function WorkerUnregister({ worker }: { worker: BlockchainApiFullWorker } }} disabled={worker.locked} variant="contained" - color="success" + color="error" > Withdraw diff --git a/src/theme/network-light.ts b/src/theme/network-light.ts index 52b856e..21f91f2 100644 --- a/src/theme/network-light.ts +++ b/src/theme/network-light.ts @@ -47,7 +47,7 @@ export const NetworkLightTheme = { input: '#f2f2f2', content: '#f6f8fb', }, - divider: 'rgba(29, 29, 31, 0.1)', + divider: '#e8e8e8', code: { background: '#FBFBFB', border: alpha('#1D1D1F', 0.1), diff --git a/src/theme/theme.tsx b/src/theme/theme.tsx index a29e2cb..4c4675a 100644 --- a/src/theme/theme.tsx +++ b/src/theme/theme.tsx @@ -544,9 +544,11 @@ export const useCreateTheme = (mode: PaletteType) => { }, MuiPaper: { styleOverrides: { - root: { + elevation1: { border: `1px solid ${colors.divider}`, boxShadow: 'none', + }, + rounded: { borderRadius: 8, }, },