feat: preliminary redisign (#35)

* save * save * save
subsquid · Jun 29, 2024 · f718973 · f718973
1 parent 7beb43e
commit f718973
Show file tree

Hide file tree

Showing 53 changed files with 1,812 additions and 1,328 deletions.
diff --git a/index.html b/index.html
@@ -117,7 +117,7 @@
       min-height: 100%;
       height: 100%;
       font-family: 'Inter', sans-serif;
-      background: #f6f8fb;
+      background: #fff;
     }
   </style>
 </head>

diff --git a/package.json b/package.json
@@ -21,9 +21,10 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.14",
-    "@mui/lab": "^5.0.0-alpha.169",
-    "@mui/material": "^5.15.14",
+    "@mui/icons-material": "^5.15.20",
+    "@mui/lab": "^5.0.0-alpha.170",
+    "@mui/material": "^5.15.20",
+    "@mui/x-charts": "^7.7.1",
     "@rainbow-me/rainbowkit": "^2.0.8",
     "@sentry/react": "^7.108.0",
     "@tanstack/react-query": "^5.37.1",
@@ -36,7 +37,6 @@
     "classnames": "^2.5.1",
     "country-list": "^2.3.0",
     "date-fns": "^3.6.0",
-    "ethers": "^6.11.1",
     "formik": "^2.4.5",
     "graphql": "^16.8.1",
     "lodash-es": "^4.17.21",

diff --git a/src/api/subsquid-network-squid/api.graphql b/src/api/subsquid-network-squid/api.graphql
@@ -98,7 +98,7 @@ fragment WorkerFullFragment on Worker {
 }
 
 query allWorkers {
-  workers(where: { status_eq: ACTIVE }) {
+  workers(where: { status_eq: ACTIVE }, orderBy: totalDelegation_ASC) {
     ...WorkerFragment
   }
 }

diff --git a/src/api/subsquid-network-squid/graphql.tsx b/src/api/subsquid-network-squid/graphql.tsx
@@ -6203,7 +6203,7 @@ export const useAccountQuery = <TData = AccountQuery, TError = unknown>(
 
 export const AllWorkersDocument = `
     query allWorkers {
-  workers(where: {status_eq: ACTIVE}) {
+  workers(where: {status_eq: ACTIVE}, orderBy: totalDelegation_ASC) {
     ...WorkerFragment
   }
 }

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -33,7 +33,7 @@ function stringToColor(string: string) {
 export const Avatar = ({
   name,
   colorDiscriminator = name,
-  size = 44,
+  size = 40,
   variant,
   // online,
 }: {
@@ -48,10 +48,18 @@ export const Avatar = ({
   }, [colorDiscriminator]);
 
   return (
-    <Box position="relative">
+    <Box
+      position="relative"
+      sx={{ fontSize: '20px', lineHeight: '20px', fontWeight: 300, textAlign: 'center' }}
+    >
       <MaterialAvatar
         variant={variant}
-        sx={{ bgcolor: color, width: size, height: size, color: 'white' }}
+        sx={{
+          bgcolor: color,
+          width: size,
+          height: size,
+          color: 'white',
+        }}
       >
         {name.slice(0, 2).toUpperCase()}
       </MaterialAvatar>

diff --git a/src/components/Button/ConnectButton.tsx b/src/components/Button/ConnectButton.tsx
@@ -0,0 +1,15 @@
+import { MouseEventHandler } from 'react';
+
+import { Button } from '@mui/material';
+
+import { WalletIcon } from '@icons/WalletIcon';
+
+function ConnectButton({ onClick }: { onClick?: MouseEventHandler }) {
+  return (
+    <Button startIcon={<WalletIcon />} onClick={onClick} variant="contained" color="info">
+      CONNECT WALLET
+    </Button>
+  );
+}
+
+export default ConnectButton;
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -12,8 +12,9 @@ export const CardTitle = styled(Box)(({ theme }) => ({
 }));
 
 export const CardWrapper = styled(Paper, { name: 'CardWrapper' })(({ theme }) => ({
-  padding: theme.spacing(2.5, 5),
-  boxShadow: `0px 4px 12px 0px #9595953D`,
+  padding: theme.spacing(1.5, 1.5),
+  // boxShadow: `0px 4px 12px 0px #9595953D`,
+  boxShadow: 'none',
   overflowX: 'auto',
   scrollbarWidth: 'thin',
 
@@ -48,7 +49,7 @@ export const Card = ({
   noPadding?: boolean;
 }>) => {
   return (
-    <Box>
+    <>
       {title ? <CardTitle>{title}</CardTitle> : null}
       <CardWrapper
         className={classNames({
@@ -59,6 +60,6 @@ export const Card = ({
       >
         {children}
       </CardWrapper>
-    </Box>
+    </>
   );
 };
diff --git a/src/components/Chip/SquaredChip.tsx b/src/components/Chip/SquaredChip.tsx
@@ -0,0 +1,13 @@
+import { Chip as MaterialChip, styled, chipClasses } from '@mui/material';
+
+const SquaredChip = styled(MaterialChip)(({ theme }) => ({
+  borderRadius: 4,
+  fontSize: 16,
+  fontWeight: 600,
+
+  [`& .${chipClasses.label}`]: {
+    padding: theme.spacing(0, 0.5),
+  },
+}));
+
+export default SquaredChip;
diff --git a/src/components/ContractCallDialog/ContractCallDialog.tsx b/src/components/ContractCallDialog/ContractCallDialog.tsx
@@ -1,11 +1,11 @@
 import React, { PropsWithChildren } from 'react';
 
-import { Box, Button } from '@mui/material';
+import { Box } from '@mui/material';
 import { useConnectModal } from '@rainbow-me/rainbowkit';
 import { useAccount } from 'wagmi';
 
+import ConnectButton from '@components/Button/ConnectButton';
 import { ConfirmDialog, ConfirmDialogProps } from '@components/ConfirmDialog';
-import { WalletIcon } from '@icons/WalletIcon';
 
 export function ContractCallDialog({
   title,
@@ -54,9 +54,7 @@ export function ContractCallDialog({
         >
           <Box sx={{ textAlign: 'center' }}>
             <Box sx={{ mb: 2 }}>Connect your wallet to proceed</Box>
-            <Button variant="contained" startIcon={<WalletIcon />} onClick={openConnectModal}>
-              Connect wallet
-            </Button>
+            <ConnectButton onClick={openConnectModal} />
           </Box>
         </Box>
       </ConfirmDialog>

diff --git a/src/components/CopyToClipboard/CopyToClipboard.tsx b/src/components/CopyToClipboard/CopyToClipboard.tsx
@@ -14,9 +14,6 @@ export const Wrapper = styled(Stack)(({ theme }) => ({
     // marginTop: theme.spacing(-1),
     padding: 0,
     backgroundColor: 'transparent',
-    '& path': {
-      stroke: theme.palette.primary.main,
-    },
   },
   '&.gutterBottom': {
     marginBottom: theme.spacing(1.5),

diff --git a/src/components/HelpTooltip/HelpTooltip.tsx b/src/components/HelpTooltip/HelpTooltip.tsx
@@ -1,7 +1,8 @@
 import React, { PropsWithChildren } from 'react';
 
-import { HelpOutline } from '@mui/icons-material';
-import { Box, Stack, Tooltip } from '@mui/material';
+import { Box, Tooltip } from '@mui/material';
+
+import { InfoIcon } from '@icons/InfoIcon';
 
 // export const Help = styled(Box)(({ theme, color }) => ({
 //   width: 15,
@@ -19,17 +20,15 @@ import { Box, Stack, Tooltip } from '@mui/material';
 // }));
 
 export const HelpTooltip = ({
-  help,
-  children,
+  title,
 }: PropsWithChildren<{
-  help: React.ReactNode;
+  title: React.ReactNode;
 }>) => {
   return (
-    <Stack direction="row" alignItems="center" spacing={1}>
-      <Box>{children}</Box>
-      <Tooltip title={help} placement="top" arrow>
-        <HelpOutline sx={{ width: 16, height: 16 }} />
-      </Tooltip>
-    </Stack>
+    <Tooltip title={title} placement="top">
+      <Box display="flex">
+        <InfoIcon />
+      </Box>
+    </Tooltip>
   );
 };
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 
-import { Box, useTheme } from '@mui/material';
+import { Box, CircularProgress, useTheme } from '@mui/material';
 
 export const Loader = ({
   minHeight = 300,
@@ -17,14 +17,15 @@ export const Loader = ({
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          '& .subsquid-loader:after': {
-            backgroundColor: theme.palette.primary.main,
-          },
+          // '& .subsquid-loader:after': {
+          //   backgroundColor: theme.palette.primary.main,
+          // },
         }}
       >
-        <div className="show visible">
+        {/* <div className="show visible">
           <div className="subsquid-loader"></div>
-        </div>
+        </div> */}
+        <CircularProgress color="primary" />
       </Box>
     );
   }

diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
@@ -7,12 +7,13 @@ import { getSubsquidNetwork } from '@network/useSubsquidNetwork';
 
 export const LogoWrapper = styled('div', {
   name: 'LogoWrapper',
-})(() => ({
+})(({theme}) => ({
   display: 'flex',
   alignItems: 'center',
+  justifyContent: 'center',
   '& img': {
-    display: 'block',
-    marginRight: 2,
+    // display: 'block',
+    // marginRight: 2,
   },
   userSelect: 'none',
 }));
@@ -41,19 +42,19 @@ export const LogoSecondary = styled(Box, {
 export function Logo({ color = '#fff' }: { color?: string }) {
   const theme = useTheme();
   const narrow = useMediaQuery(theme.breakpoints.down('lg'));
-  const size = 32;
+  const size = 40;
 
   const network = getSubsquidNetwork();
 
   return (
     <LogoWrapper>
       <img width={size} height={size} src="/logo.png" />
-      {!narrow ? (
+      {/* {!narrow ? (
         <>
           <LogoPrimary sx={{ color }}>SUBSQUID</LogoPrimary>
           <LogoSecondary sx={{ color }}>{upperFirst(network)}</LogoSecondary>
         </>
-      ) : null}
+      ) : null} */}
     </LogoWrapper>
   );
 }
diff --git a/src/components/NoItems/index.tsx b/src/components/NoItems/index.tsx
@@ -0,0 +1,9 @@
+import { Box, SxProps, Typography } from '@mui/material';
+
+export function NoItems({ sx }: { sx?: SxProps }) {
+  return (
+    <Box display="flex" justifyContent="center" alignItems="center" height="100%" sx={sx}>
+      <Typography>No items to show</Typography>
+    </Box>
+  );
+}
diff --git a/src/components/Placeholer/index.tsx b/src/components/Placeholer/index.tsx
@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+
+import { Box, SxProps } from '@mui/material';
+
+function Placeholder({ children, sx }: PropsWithChildren<{ sx?: SxProps }>) {
+  return (
+    <Box className="placeholder" sx={sx}>
+      {children}
+    </Box>
+  );
+}
+
+export default Placeholder;
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
@@ -1,25 +1,24 @@
 import React, { useCallback, useState } from 'react';
 
-import SearchIcon from '@mui/icons-material/Search';
 import { Box, styled } from '@mui/material';
 
 import { TextField } from '@components/Form';
+import { SearchIcon } from '@icons/SearchIcon';
 
 export const Field = styled(TextField)(({ theme }) => ({
   // background: theme.palette.background.default,
   [`& .MuiInputBase-root`]: {
-    paddingLeft: 10,
+    padding: theme.spacing(0, 1),
   },
   // '& svg': {
   //   position: 'absolute',
   // },
   '& input': {
     paddingTop: 0,
     paddingBottom: 0,
-    paddingLeft: 5,
-    minHeight: 36,
+    paddingLeft: theme.spacing(1),
+    minHeight: 28,
   },
-  borderRadius: 6,
 }));
 
 export const Search = ({
@@ -45,7 +44,7 @@ export const Search = ({
   const handleChange = useCallback((value: string) => onChange?.(value), [onChange]);
 
   return (
-    <Box sx={{ flex: fullWidth ? 1 : '0 0 250px', position: 'relative' }}>
+    <Box sx={{ flex: fullWidth ? 1 : '0 0 200px', position: 'relative' }}>
       <Field
         placeholder={placeholder}
         variant="filled"
@@ -59,7 +58,7 @@ export const Search = ({
           handleChange(value);
         }}
         InputProps={{
-          startAdornment: <SearchIcon sx={{ width: 20, height: 20, opacity: 0.5 }} />,
+          startAdornment: <SearchIcon />,
         }}
       />
       {/*<CircularProgress*/}

diff --git a/src/components/Table/BorderedTable.tsx b/src/components/Table/BorderedTable.tsx
@@ -123,16 +123,12 @@ export function SortableHeaderCell<S extends string>({
 
   return (
     <HeaderCell help={help}>
-      <ClickableStack
-        onClick={handleSortChange(sort)}
-        direction="row"
-        spacing={1}
-        alignItems="center"
-      >
+      <ClickableStack onClick={handleSortChange(sort)} direction="row" spacing={1}>
         <Box>{children}</Box>
         <Box>
           <SortIcon query={query} value={sort} />
         </Box>
+        {/* <TableSortLabel direction={query.sortDir as any} /> */}
       </ClickableStack>
     </HeaderCell>
   );