feat: redesign rest pages

subsquid · Jul 1, 2024 · da8bb35 · da8bb35
1 parent 4eb3688
commit da8bb35
Show file tree

Hide file tree

Showing 27 changed files with 375 additions and 348 deletions.
diff --git a/src/api/contracts/claim.ts b/src/api/contracts/claim.ts
@@ -68,7 +68,7 @@ function useClaimFromVestingContract() {
 export function useClaim() {
   const client = useClient();
   const { setWaitHeight } = useSquidNetworkHeight();
-  const [isLoading, setLoading] = useState(false);
+  const [isPending, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const claimFromWallet = useClaimFromWallet();
@@ -99,7 +99,7 @@ export function useClaim() {
 
   return {
     claim,
-    isLoading,
+    isPending,
     error,
   };
 }
diff --git a/src/api/contracts/staking.ts b/src/api/contracts/staking.ts
@@ -105,7 +105,7 @@ function useDepositFromVestingContract() {
 export function useWorkerDelegate() {
   const client = useClient();
   const { setWaitHeight } = useSquidNetworkHeight();
-  const [isLoading, setLoading] = useState(false);
+  const [isPending, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const depositFromWallet = useDelegateFromWallet();
@@ -140,7 +140,7 @@ export function useWorkerDelegate() {
 
   return {
     delegateToWorker,
-    isLoading,
+    isPending,
     error,
   };
 }
@@ -196,7 +196,7 @@ function useUndelegateFromVestingContract() {
 export function useWorkerUndelegate() {
   const client = usePublicClient();
   const { setWaitHeight } = useSquidNetworkHeight();
-  const [isLoading, setLoading] = useState(false);
+  const [isPending, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const undelegateFromWallet = useUndelegateFromWallet();
@@ -231,7 +231,7 @@ export function useWorkerUndelegate() {
 
   return {
     undelegateFromWorker,
-    isLoading,
+    isPending,
     error,
   };
 }

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 
-import { Box, Paper, styled } from '@mui/material';
+import { Box, Paper, styled, Theme } from '@mui/material';
 import { SxProps } from '@mui/system/styleFunctionSx';
 import classNames from 'classnames';
 
@@ -31,6 +31,13 @@ export const CardWrapper = styled(Paper, { name: 'CardWrapper' })(({ theme }) =>
     padding: 0,
   },
 
+  '&.outlined': {
+    background: theme.palette.background.default,
+    borderColor: theme.palette.divider,
+    borderWidth: 1,
+    borderStyle: 'solid',
+  },
+
   '&.noShadow': {
     boxShadow: 'none',
   },
@@ -41,12 +48,14 @@ export const Card = ({
   title,
   noShadow,
   noPadding,
+  outlined,
   sx,
 }: PropsWithChildren<{
   noShadow?: boolean;
   title?: React.ReactNode;
-  sx?: SxProps;
+  sx?: SxProps<Theme>;
   noPadding?: boolean;
+  outlined?: boolean;
 }>) => {
   return (
     <>
@@ -55,6 +64,7 @@ export const Card = ({
         className={classNames({
           noShadow,
           noPadding,
+          outlined,
         })}
         sx={sx}
       >

diff --git a/src/components/ConfirmDialog/ConfirmDialog.tsx b/src/components/ConfirmDialog/ConfirmDialog.tsx
@@ -29,7 +29,7 @@ export const ConfirmDialogTitle = styled(Box, {
   fontSize: '1.125rem',
   position: 'relative',
   paddingRight: 45,
-  [breakpoints.down('xxs')]: {
+  [breakpoints.down('sm')]: {
     margin: spacing(4, 3, 2, 3),
     fontSize: '1rem',
   },
@@ -42,16 +42,17 @@ export const CloseIconButton = styled(IconButton, {
   top: -6,
   right: -6,
   opacity: 0.5,
-  [breakpoints.down('xxs')]: {
-    paddingLeft: '10px',
-  },
+  padding: 0,
+  // [breakpoints.down('xxs')]: {
+  //   paddingLeft: '10px',
+  // },
 }));
 
 export const Content = styled(DialogContent)(({ theme: { spacing, breakpoints } }) => ({
   padding: 0,
   margin: spacing(1, 4, 4),
   overflowY: 'visible',
-  [breakpoints.down('xxs')]: {
+  [breakpoints.down('sm')]: {
     margin: spacing(0, 3, 4, 3),
   },
 }));
@@ -65,7 +66,7 @@ export const Actions = styled(Box)(({ theme: { spacing, breakpoints } }) => ({
   '* > :not(:first-of-type)': {
     marginLeft: 0,
   },
-  [breakpoints.down('xxs')]: {
+  [breakpoints.down('sm')]: {
     margin: spacing(3, 3),
   },
 }));
@@ -94,8 +95,8 @@ export function ConfirmDialog({
   maxWidth = 440,
   minWidth = 440,
   confirmColor = 'info',
-  confirmButtonText = 'Confirm',
-  cancelButtonText = 'Cancel',
+  confirmButtonText = 'CONFIRM',
+  cancelButtonText = 'CANCEL',
   disableBackdropClick = false,
   disableConfirmButton = false,
   hideCancelButton = false,
@@ -105,7 +106,7 @@ export function ConfirmDialog({
   onApprove,
 }: PropsWithChildren<ConfirmDialogProps>) {
   const theme = useTheme();
-  const mobile = useMediaQuery(theme.breakpoints.down('xxs'));
+  const mobile = useMediaQuery(theme.breakpoints.down('sm'));
   const onReject = (e: SyntheticEvent, reason?: 'backdropClick' | 'escapeKeyDown') => {
     if (disableBackdropClick && reason === 'backdropClick') return;
 

diff --git a/src/components/ContractCallDialog/ContractCallDialog.tsx b/src/components/ContractCallDialog/ContractCallDialog.tsx
@@ -14,8 +14,8 @@ export function ContractCallDialog({
   maxWidth,
   minWidth = 600,
   confirmColor = 'info',
-  confirmButtonText = title,
-  cancelButtonText = 'Cancel',
+  confirmButtonText = title.toUpperCase(),
+  cancelButtonText,
   hideCancelButton = true,
   disableBackdropClick = true,
   disableConfirmButton = false,

diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
@@ -4,7 +4,7 @@ export const Dialog = styled(DialogMui, {
   name: 'Dialog',
 })(({ theme }) => ({
   '& .MuiBackdrop-root': {
-    // backdropFilter: 'blur(1px)',
+    backdropFilter: 'blur(0.5px)',
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
   },
 }));
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
@@ -13,7 +13,7 @@ export function Form({
   sx?: SxProps;
 }>) {
   return (
-    <Box component="form" onSubmit={onSubmit} sx={{ mb: 4, mt: 4, maxWidth, ...sx }}>
+    <Box component="form" onSubmit={onSubmit} sx={{ maxWidth, ...sx }}>
       {children}
     </Box>
   );

diff --git a/src/components/RoundIconButton/RoundIconButton.tsx b/src/components/RoundIconButton/RoundIconButton.tsx
@@ -1,23 +1,25 @@
 import { IconButton, iconButtonClasses, styled } from '@mui/material';
 
 export const RoundIconButton = styled(IconButton)(({ theme: { palette } }) => ({
-  background: palette.primary.main,
   color: palette.primary.contrastText,
   width: 32,
   height: 32,
   transition: 'all 300ms ease-out',
+  borderWidth: 1,
+  borderStyle: 'solid',
+  borderColor: palette.secondary.main,
 
   '&.transparent': {
     background: 'transparent',
     color: palette.text.primary,
     opacity: 0.6,
   },
 
-  '&:hover': {
-    background: palette.primary.light,
-    color: palette.primary.contrastText,
-    opacity: 1,
-  },
+  // '&:hover': {
+  //   background: palette.primary.light,
+  //   color: palette.primary.contrastText,
+  //   opacity: 1,
+  // },
 
   [`&.${iconButtonClasses.sizeMedium}`]: {
     width: 32,

diff --git a/src/icons/CloseIcon.tsx b/src/icons/CloseIcon.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export function CloseIcon({ size = 40 }: { size?: number }) {
+export function CloseIcon({ size = 28 }: { size?: number }) {
   return (
     <svg
       width={size}

diff --git a/src/icons/EditIcon.tsx b/src/icons/EditIcon.tsx
@@ -3,31 +3,14 @@ export function EditIcon({ size = 20, color = '#384955' }: { size?: number; colo
     <svg
       width={size}
       height={size}
-      viewBox="0 0 20 20"
+      viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clipPath="url(#clip0_4156_5672)">
-        <path
-          d="M15 1.66406L18.3333 4.9974"
-          stroke={color}
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M6.25033 17.0807L15.8337 7.4974L12.5003 4.16406L2.91699 13.7474L1.66699 18.3307L6.25033 17.0807Z"
-          stroke={color}
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_4156_5672">
-          <rect width="20" height="20" fill="white" />
-        </clipPath>
-      </defs>
+      <path
+        d="M2.16667 13.8333H3.35417L11.5 5.6875L10.3125 4.5L2.16667 12.6458V13.8333ZM0.5 15.5V11.9583L11.5 0.979167C11.6667 0.826389 11.8507 0.708333 12.0521 0.625C12.2535 0.541667 12.4653 0.5 12.6875 0.5C12.9097 0.5 13.125 0.541667 13.3333 0.625C13.5417 0.708333 13.7222 0.833333 13.875 1L15.0208 2.16667C15.1875 2.31944 15.309 2.5 15.3854 2.70833C15.4618 2.91667 15.5 3.125 15.5 3.33333C15.5 3.55556 15.4618 3.76736 15.3854 3.96875C15.309 4.17014 15.1875 4.35417 15.0208 4.52083L4.04167 15.5H0.5ZM10.8958 5.10417L10.3125 4.5L11.5 5.6875L10.8958 5.10417Z"
+        fill="#3E4A5C"
+      />
     </svg>
   );
 }
diff --git a/src/layouts/NetworkLayout/NetworkLayout.tsx b/src/layouts/NetworkLayout/NetworkLayout.tsx
@@ -4,6 +4,7 @@ import { PropsWithChildren, useEffect, useState } from 'react';
 
 import {
   AppBar as AppBarMaterial,
+  Backdrop,
   Box,
   IconButton,
   Slide,
@@ -19,6 +20,7 @@ import { useDisconnect, useWalletClient } from 'wagmi';
 import { Logo } from '@components/Logo';
 // import { NetworkSwitcher } from '@components/NetworkSwitcher';
 import { useBannerHeight } from '@components/TopBanner';
+import { MenuIcon } from '@icons/MenuIcon';
 import { useAccount } from '@network/useAccount';
 import { getChainId, getSubsquidNetwork } from '@network/useSubsquidNetwork';
 
@@ -50,7 +52,7 @@ export const AppToolbar = styled(Box, { name: 'AppToolbar' })(({ theme }) => ({
   alignItems: 'center',
   height: APP_BAR_HEIGHT,
   paddingRight: theme.spacing(3),
-  marginLeft: 56,
+  marginLeft: 12,
 
   [theme.breakpoints.down('xs')]: {
     paddingRight: theme.spacing(2),
@@ -130,17 +132,18 @@ export const ContentWrapper = styled('div', {
   // alignSelf: 'center',
   // color: alpha(theme.palette.text.primary, 0.8),
   maxWidth: '100%',
+  overflowX: 'clip',
 
   [theme.breakpoints.up('xl')]: {
     maxWidth: 1336,
     boxSizing: 'content-box',
   },
-  [theme.breakpoints.down('md')]: {
-    padding: theme.spacing(7.5, 3),
-  },
-  [theme.breakpoints.down('sm')]: {
-    padding: theme.spacing(3, 2),
-  },
+  // [theme.breakpoints.down('md')]: {
+  //   padding: theme.spacing(7.5, 3),
+  // },
+  // [theme.breakpoints.down('sm')]: {
+  //   padding: theme.spacing(3, 2),
+  // },
 }));
 
 const Sidebar = styled('div', {
@@ -289,21 +292,27 @@ export const NetworkLayout = ({
           {/* <AppToolbarSidebar> */}
           {/* {narrowXs ? null : <Logo />} */}
           {/* {narrowLg ? (
-              <MenuButton
-                className={classnames({
-                  open: isMenuOpen,
-                })}
-                onClick={() => setIsMenuOpen(open => !open)}
-              >
-                <MenuIcon />
-              </MenuButton>
+  
             ) : null} */}
           {/* </AppToolbarSidebar> */}
+          <MenuButton
+            className={classnames({
+              open: isMenuOpen,
+            })}
+            onClick={() => setIsMenuOpen(open => !open)}
+          >
+            <MenuIcon />
+          </MenuButton>
           <AppToolbarContent></AppToolbarContent>
           {/* <NetworkSwitcher hideText={isMobile} /> */}
           {/*{narrowXs ? null : <AppToolbarDivider />}*/}
           {narrowXs ? <AppToolbarContent /> : null}
           <UserMenu />
+          <Backdrop
+            open={isMenuOpen}
+            onClick={() => setIsMenuOpen(false)}
+            sx={{ background: '#fff0' }}
+          />
         </AppToolbar>
       </AppBar>