From 596b102591e5163361980eaf2c1e079b3c12cd2a Mon Sep 17 00:00:00 2001 From: Usame Algan <usame@safe.global> Date: Tue, 17 Dec 2024 14:26:18 +0100 Subject: [PATCH] fix: Change QueueActions to a button instead of an a element --- .../components/QueueActions/index.tsx | 64 +++++++++---------- .../components/QueueActions/styles.module.css | 15 +++++ 2 files changed, 45 insertions(+), 34 deletions(-) create mode 100644 src/features/myAccounts/components/QueueActions/styles.module.css diff --git a/src/features/myAccounts/components/QueueActions/index.tsx b/src/features/myAccounts/components/QueueActions/index.tsx index 5da57be62e..f651de62c9 100644 --- a/src/features/myAccounts/components/QueueActions/index.tsx +++ b/src/features/myAccounts/components/QueueActions/index.tsx @@ -1,12 +1,13 @@ -import { useMemo, type ReactNode } from 'react' -import type { UrlObject } from 'url' -import NextLink from 'next/link' -import { Box, Chip, Typography, SvgIcon } from '@mui/material' +import classnames from 'classnames' +import { useRouter } from 'next/router' +import { type ReactNode, useCallback, type MouseEvent } from 'react' +import { Chip, Typography, SvgIcon } from '@mui/material' import CheckIcon from '@mui/icons-material/Check' import TransactionsIcon from '@/public/images/transactions/transactions.svg' import Track from '@/components/common/Track' import { OVERVIEW_EVENTS } from '@/services/analytics/events/overview' import { AppRoutes } from '@/config/routes' +import css from './styles.module.css' const ChipLink = ({ children, color }: { children: ReactNode; color?: string }) => ( <Chip @@ -40,12 +41,17 @@ const QueueActions = ({ awaitingConfirmation: number isMobile?: boolean }) => { - const queueLink = useMemo<UrlObject>( - () => ({ - pathname: AppRoutes.transactions.queue, - query: { safe: `${chainShortName}:${safeAddress}` }, - }), - [chainShortName, safeAddress], + const router = useRouter() + + const onQueueClick = useCallback( + (e: MouseEvent<HTMLButtonElement>) => { + e.preventDefault() + router.push({ + pathname: AppRoutes.transactions.queue, + query: { safe: `${chainShortName}:${safeAddress}` }, + }) + }, + [chainShortName, router, safeAddress], ) if (!queued && !awaitingConfirmation) { @@ -54,31 +60,21 @@ const QueueActions = ({ return ( <Track {...OVERVIEW_EVENTS.OPEN_MISSING_SIGNATURES}> - <NextLink href={queueLink}> - <Box - sx={{ - px: isMobile ? 2 : 0, - pb: isMobile ? 2 : 0, - display: 'flex', - gap: 1, - alignItems: 'center', - }} - > - {queued > 0 && ( - <ChipLink> - <SvgIcon component={TransactionsIcon} inheritViewBox sx={{ fontSize: 'small' }} /> - {queued} pending - </ChipLink> - )} + <button onClick={onQueueClick} className={classnames(css.queueButton, { [css.isMobile]: isMobile })}> + {queued > 0 && ( + <ChipLink> + <SvgIcon component={TransactionsIcon} inheritViewBox sx={{ fontSize: 'small' }} /> + {queued} pending + </ChipLink> + )} - {awaitingConfirmation > 0 && ( - <ChipLink color="warning"> - <SvgIcon component={CheckIcon} inheritViewBox sx={{ fontSize: 'small', color: 'warning' }} /> - {awaitingConfirmation} to confirm - </ChipLink> - )} - </Box> - </NextLink> + {awaitingConfirmation > 0 && ( + <ChipLink color="warning"> + <SvgIcon component={CheckIcon} inheritViewBox sx={{ fontSize: 'small', color: 'warning' }} /> + {awaitingConfirmation} to confirm + </ChipLink> + )} + </button> </Track> ) } diff --git a/src/features/myAccounts/components/QueueActions/styles.module.css b/src/features/myAccounts/components/QueueActions/styles.module.css new file mode 100644 index 0000000000..330e8fe184 --- /dev/null +++ b/src/features/myAccounts/components/QueueActions/styles.module.css @@ -0,0 +1,15 @@ +.queueButton { + display: flex; + gap: var(--space-1); + align-items: center; + padding: 0; + border: 0; + cursor: pointer; + position: relative; + z-index: 1; + background: transparent; +} + +.isMobile { + padding: var(--space-2) var(--space-2) 0; +}