From de5e2ea78802ce9fbb7722ad5d37d1f3f121fc0d Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Thu, 19 Oct 2023 15:35:15 +0200
Subject: [PATCH] Lint

---
 .../dashboard/FeaturedApps/FeaturedApps.tsx   | 72 +++++++++++--------
 .../walletconnect/HeaderWidget/index.tsx      |  8 ++-
 .../useWalletConnectSessions.test.tsx         | 12 +++-
 3 files changed, 55 insertions(+), 37 deletions(-)

diff --git a/src/components/dashboard/FeaturedApps/FeaturedApps.tsx b/src/components/dashboard/FeaturedApps/FeaturedApps.tsx
index bdb9da7c73..6f9ebe139c 100644
--- a/src/components/dashboard/FeaturedApps/FeaturedApps.tsx
+++ b/src/components/dashboard/FeaturedApps/FeaturedApps.tsx
@@ -1,6 +1,7 @@
-import { ReactElement, useContext } from 'react'
+import type { ReactElement } from 'react'
+import { useContext } from 'react'
 import { Box, Grid, Typography, Link } from '@mui/material'
-import type { SafeAppInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import type { SafeAppData } from '@safe-global/safe-gateway-typescript-sdk'
 import { Card, WidgetBody, WidgetContainer } from '../styled'
 import { useRouter } from 'next/router'
 import NextLink from 'next/link'
@@ -10,7 +11,30 @@ import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps'
 import SafeAppIconCard from '@/components/safe-apps/SafeAppIconCard'
 import { WalletConnectContext } from '@/services/walletconnect/WalletConnectContext'
 
-const WALLET_CONNECT = /wallet-connect/
+const isWalletConnectSafeApp = (app: SafeAppData): boolean => {
+  const WALLET_CONNECT = /wallet-connect/
+  return WALLET_CONNECT.test(app.url)
+}
+
+const FeaturedAppCard = ({ app }: { app: SafeAppData }) => (
+  <Card>
+    <Grid container alignItems="center" spacing={3}>
+      <Grid item xs={12} md={3}>
+        <SafeAppIconCard src={app.iconUrl} alt={app.name} width={64} height={64} />
+      </Grid>
+
+      <Grid item xs={12} md={9}>
+        <Box mb={1.01}>
+          <Typography fontSize="lg">{app.description}</Typography>
+        </Box>
+
+        <Link color="primary.main" fontWeight="bold" component="span">
+          Use {app.name}
+        </Link>
+      </Grid>
+    </Grid>
+  </Card>
+)
 
 export const FeaturedApps = ({ stackedLayout }: { stackedLayout: boolean }): ReactElement | null => {
   const router = useRouter()
@@ -19,11 +43,8 @@ export const FeaturedApps = ({ stackedLayout }: { stackedLayout: boolean }): Rea
 
   if (!featuredApps?.length && !remoteSafeAppsLoading) return null
 
-  const onWidgetClick = (e: Event, app: SafeAppInfo) => {
-    if (WALLET_CONNECT.test(app.url)) {
-      e.preventDefault()
-      setOpen(true)
-    }
+  const onWcWidgetClick = () => {
+    setOpen(true)
   }
 
   return (
@@ -41,29 +62,18 @@ export const FeaturedApps = ({ stackedLayout }: { stackedLayout: boolean }): Rea
           >
             {featuredApps?.map((app) => (
               <Grid item xs md key={app.id}>
-                <NextLink
-                  passHref
-                  href={{ pathname: AppRoutes.apps.open, query: { ...router.query, appUrl: app.url } }}
-                  onClick={(e) => onWidgetClick(e, app)}
-                >
-                  <Card>
-                    <Grid container alignItems="center" spacing={3}>
-                      <Grid item xs={12} md={3}>
-                        <SafeAppIconCard src={app.iconUrl} alt={app.name} width={64} height={64} />
-                      </Grid>
-
-                      <Grid item xs={12} md={9}>
-                        <Box mb={1.01}>
-                          <Typography fontSize="lg">{app.description}</Typography>
-                        </Box>
-
-                        <Link color="primary.main" fontWeight="bold" component="span">
-                          Use {app.name}
-                        </Link>
-                      </Grid>
-                    </Grid>
-                  </Card>
-                </NextLink>
+                {isWalletConnectSafeApp(app) ? (
+                  <a onClick={onWcWidgetClick} style={{ cursor: 'pointer' }}>
+                    <FeaturedAppCard app={app} />
+                  </a>
+                ) : (
+                  <NextLink
+                    passHref
+                    href={{ pathname: AppRoutes.apps.open, query: { ...router.query, appUrl: app.url } }}
+                  >
+                    <FeaturedAppCard app={app} />
+                  </NextLink>
+                )}
               </Grid>
             ))}
           </Grid>
diff --git a/src/components/walletconnect/HeaderWidget/index.tsx b/src/components/walletconnect/HeaderWidget/index.tsx
index 3660f53e21..d487b614d3 100644
--- a/src/components/walletconnect/HeaderWidget/index.tsx
+++ b/src/components/walletconnect/HeaderWidget/index.tsx
@@ -32,13 +32,15 @@ const WalletConnectHeaderWidget = (): ReactElement => {
   const [uri, clearUri] = usePrepopulatedUri()
   const [metadata, setMetadata] = useState<CoreTypes.Metadata>()
 
-  const onOpenSessionManager = useCallback(() => setOpen(true), [])
+  const onOpenSessionManager = useCallback(() => setOpen(true), [setOpen])
+
   const onCloseSessionManager = useCallback(() => {
     setOpen(false)
     clearUri()
-  }, [clearUri])
+  }, [setOpen, clearUri])
 
   const onCloseSuccesBanner = useCallback(() => setMetadata(undefined), [])
+
   const onSuccess = useCallback(
     ({ peer }: SessionTypes.Struct) => {
       onCloseSessionManager()
@@ -72,7 +74,7 @@ const WalletConnectHeaderWidget = (): ReactElement => {
   // Open the popup when a prepopulated uri is found
   useEffect(() => {
     if (uri) setOpen(true)
-  }, [uri])
+  }, [uri, setOpen])
 
   return (
     <>
diff --git a/src/services/walletconnect/__tests__/useWalletConnectSessions.test.tsx b/src/services/walletconnect/__tests__/useWalletConnectSessions.test.tsx
index e1e16213ba..1d5221880a 100644
--- a/src/services/walletconnect/__tests__/useWalletConnectSessions.test.tsx
+++ b/src/services/walletconnect/__tests__/useWalletConnectSessions.test.tsx
@@ -31,7 +31,9 @@ describe('useWalletConnectSessions', () => {
     } as unknown as WalletConnectWallet
 
     const wrapper = ({ children }: any) => (
-      <WalletConnectContext.Provider value={{ walletConnect: mockWalletConnect, error: null }}>
+      <WalletConnectContext.Provider
+        value={{ walletConnect: mockWalletConnect, error: null, open: false, setOpen: () => {} }}
+      >
         {children}
       </WalletConnectContext.Provider>
     )
@@ -49,7 +51,9 @@ describe('useWalletConnectSessions', () => {
     } as unknown as WalletConnectWallet
 
     const wrapper = ({ children }: any) => (
-      <WalletConnectContext.Provider value={{ walletConnect: mockWalletConnect, error: null }}>
+      <WalletConnectContext.Provider
+        value={{ walletConnect: mockWalletConnect, error: null, open: false, setOpen: () => {} }}
+      >
         {children}
       </WalletConnectContext.Provider>
     )
@@ -97,7 +101,9 @@ describe('useWalletConnectSessions', () => {
     } as unknown as WalletConnectWallet
 
     const wrapper = ({ children }: any) => (
-      <WalletConnectContext.Provider value={{ walletConnect: mockWalletConnect, error: null }}>
+      <WalletConnectContext.Provider
+        value={{ walletConnect: mockWalletConnect, error: null, open: false, setOpen: () => {} }}
+      >
         {children}
       </WalletConnectContext.Provider>
     )