From 524eb00b444de2ae1704561a210590be26f15fb8 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..7e51ee6f8e
--- /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: 0 var(--space-2) var(--space-2);
+}