feat: improve portals page

src/hooks/useCountdown.ts

@@ -0,0 +1,10 @@
+import { relativeDateFormat } from '@i18n';
+
+import { useTicker } from './useTicker';
+
+export function useCountdown({ timestamp }: { timestamp?: Date | string | number | undefined }) {
+  const curTimestamp = useTicker(() => Date.now(), 1000);
+  const timeLeft = timestamp ? relativeDateFormat(curTimestamp, timestamp) : undefined;
+
+  return timeLeft;
+}

src/i18n/dateFormat.ts

@@ -4,18 +4,18 @@ export function dateFormat(
   value: Date | string | number | undefined,
   tpl: 'dateTime' | 'date' | string = 'date',
 ) {
-  if (!value) return null;
+  if (!value) return undefined;
 
   if (tpl === 'dateTime') {
     tpl = 'dd.MM.yyyy HH:mm:ss';
   } else if (tpl === 'date') {
     tpl = 'dd.MM.yyyy';
   }
 
-  if (value.valueOf() == 0) return null;
+  if (value.valueOf() == 0) return undefined;
 
   const date = new Date(value);
-  if (!isValid(date)) return null;
+  if (!isValid(date)) return undefined;
 
   return format(new Date(value), tpl);
 }

src/layouts/NetworkLayout/BasicMenuItem.tsx

@@ -15,7 +15,7 @@ const Item = styled(MenuItem)(({ theme }) => ({
   transition: 'all ease-out 150ms',
   // paddingLeft: theme.spacing(1.5),
   // paddingRight: theme.spacing(1),
-  // borderRadius: '2px',
+  borderRadius: '4px',
   '& path': {
     transition: 'fill ease-out 150ms',
   },

src/layouts/NetworkLayout/UserMenu.tsx

@@ -12,7 +12,7 @@ import { LogoutMenuItem } from './LogoutMenuItem';
 
 export const UserMenuStyled = styled(Menu, {
   name: 'UserMenuStyled',
-})(() => ({
+})(({ theme }) => ({
   minWidth: '100%',
 }));
 
@@ -71,6 +71,10 @@ export function UserMenu() {
             sx: {
               overflow: 'visible',
               width: 192,
+              pl: 1,
+              pr: 1,
+              pt: 0.5,
+              pb: 0.5,
             },
           },
         }}

src/pages/AssetsPage/Assets.tsx

@@ -281,7 +281,7 @@ export function MyAssets() {
               <Stack divider={<Divider flexItem />} spacing={1} flex={1}>
                 <TokenBalance balance={balances[3]} />
                 <TokenBalance balance={balances[4]} />
-                <TokenBalance balance={balances[5]} />
+                {/* <TokenBalance balance={balances[5]} /> */}
               </Stack>
             </Stack>
           </Grid>

src/pages/DashboardPage/Summary.tsx

@@ -1,6 +1,5 @@
 import React, { PropsWithChildren, useEffect, useMemo, useState } from 'react';
 
-import { relativeDateFormat } from '@i18n';
 import {
   bytesFormatter,
   numberWithCommasFormatter,
@@ -26,7 +25,7 @@ import { useNetworkSummary } from '@api/subsquid-network-squid';
 import SquaredChip from '@components/Chip/SquaredChip';
 import { HelpTooltip } from '@components/HelpTooltip';
 import { Loader } from '@components/Loader';
-import { useTicker } from '@hooks/useTicker';
+import { useCountdown } from '@hooks/useCountdown';
 import { useContracts } from '@network/useContracts';
 
 export function ColumnLabel({ children, color }: PropsWithChildren<{ color?: string }>) {
@@ -108,14 +107,13 @@ function OnlineInfo() {
 }
 
 function CurrentEpochEstimation({ epochEnd }: { epochEnd: number }) {
-  const curTime = useTicker(() => Date.now(), 1000);
-  const epochEndsIn = useMemo(() => relativeDateFormat(curTime, epochEnd), [curTime, epochEnd]);
+  const timeLeft = useCountdown({ timestamp: epochEnd });
 
   return (
     <Stack direction="row" spacing={1}>
       <span>Ends in</span>
       <SquaredChip
-        label={<Typography variant="subtitle1">~{epochEndsIn}</Typography>}
+        label={<Typography variant="subtitle1">~{timeLeft}</Typography>}
         color="warning"
       />
     </Stack>

src/pages/GatewaysPage/GatewayStake.tsx

@@ -296,7 +296,11 @@ export function GatewayStakeDialog({
           <FormRow>
             <FormikTextInput
               id="amount"
-              label="Amount"
+              label={
+                <HelpTooltip title="Locking additional SQD increases the number of CUs available per epoch">
+                  <span>Amount</span>
+                </HelpTooltip>
+              }
               formik={formik}
               showErrorOnlyOfTouched
               autoComplete="off"
@@ -324,7 +328,7 @@ export function GatewayStakeDialog({
               id="durationBlocks"
               label={
                 // TODO: add tooltip text
-                <span>Duration</span>
+                <span>Duration (blocks)</span>
               }
               formik={formik}
               showErrorOnlyOfTouched

src/pages/GatewaysPage/GatewayUnstake.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 
-import { LockOpen as LockOpenIcon } from '@mui/icons-material';
+import { dateFormat } from '@i18n';
+import { Lock } from '@mui/icons-material';
 import { LoadingButton } from '@mui/lab';
-import { SxProps } from '@mui/material';
+import { Box, SxProps, Tooltip } from '@mui/material';
 import toast from 'react-hot-toast';
 import { useClient } from 'wagmi';
 import * as yup from 'yup';
@@ -11,6 +12,7 @@ import { gatewayRegistryAbi } from '@api/contracts';
 import { useWriteSQDTransaction } from '@api/contracts/useWriteTransaction';
 import { errorMessage } from '@api/contracts/utils';
 import { ContractCallDialog } from '@components/ContractCallDialog';
+import { useCountdown } from '@hooks/useCountdown';
 import { useSquidHeight } from '@hooks/useSquidNetworkHeightHooks';
 import { useContracts } from '@network/useContracts';
 
@@ -24,22 +26,68 @@ export const stakeSchema = yup.object({
   //   .max(yup.ref('max'), ({ max }) => `Amount should be less than ${formatSqd(max)} `),
 });
 
-export function GatewayUnstakeButton({ sx, disabled }: { sx?: SxProps; disabled?: boolean }) {
+function UnlocksTooltip({ timestamp }: { timestamp?: Date | string | number | undefined }) {
+  const timeLeft = useCountdown({ timestamp });
+
+  return `Unlocks in ${timeLeft} (${dateFormat(timestamp, 'dateTime')})`;
+}
+
+export function GatewayUnstakeButton({
+  sx,
+  disabled,
+  source,
+}: {
+  sx?: SxProps;
+  disabled?: boolean;
+  source: {
+    locked: boolean;
+    unlockedAt?: string;
+  };
+}) {
   const [open, setOpen] = useState(false);
 
   return (
     <>
-      <LoadingButton
-        startIcon={<LockOpenIcon />}
-        disabled={disabled}
-        loading={open}
-        variant="contained"
-        color="error"
-        onClick={() => setOpen(true)}
-        sx={sx}
+      <Tooltip
+        hidden={disabled}
+        title={
+          !disabled &&
+          (source.unlockedAt ? (
+            <UnlocksTooltip timestamp={source.unlockedAt} />
+          ) : (
+            'Auto-extension is enabled'
+          ))
+        }
+        placement="top"
       >
-        WITHDRAW
-      </LoadingButton>
+        <Box sx={{ position: 'relative', display: 'inline-flex', alignItems: 'center' }}>
+          {source.locked && !disabled && (
+            <Lock
+              fontSize="small"
+              // color="secondary"
+              sx={{
+                color: '#3e4a5c',
+                position: 'absolute',
+                top: '0px',
+                right: '0px',
+                transform: 'translate(0%, -25%)',
+                zIndex: 1,
+              }}
+            />
+          )}
+          <LoadingButton
+            // startIcon={<LockOpenIcon />}
+            disabled={disabled || source.locked}
+            loading={open}
+            variant="contained"
+            color="error"
+            onClick={() => setOpen(true)}
+            sx={sx}
+          >
+            WITHDRAW
+          </LoadingButton>
+        </Box>
+      </Tooltip>
       <GatewayUnstakeDialog open={open} onClose={() => setOpen(false)} />
     </>
   );