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 }) => (
+
+
+
+
+
+
+
+
+ {app.description}
+
+
+
+ Use {app.name}
+
+
+
+
+)
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) => (
- onWidgetClick(e, app)}
- >
-
-
-
-
-
-
-
-
- {app.description}
-
-
-
- Use {app.name}
-
-
-
-
-
+ {isWalletConnectSafeApp(app) ? (
+
+
+
+ ) : (
+
+
+
+ )}
))}
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()
- 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) => (
-
+ {} }}
+ >
{children}
)
@@ -49,7 +51,9 @@ describe('useWalletConnectSessions', () => {
} as unknown as WalletConnectWallet
const wrapper = ({ children }: any) => (
-
+ {} }}
+ >
{children}
)
@@ -97,7 +101,9 @@ describe('useWalletConnectSessions', () => {
} as unknown as WalletConnectWallet
const wrapper = ({ children }: any) => (
-
+ {} }}
+ >
{children}
)