diff --git a/src/components/dashboard/FeaturedApps/FeaturedApps.tsx b/src/components/dashboard/FeaturedApps/FeaturedApps.tsx index bdb9da7c73..d450a6252f 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,8 +11,32 @@ import { useRemoteSafeApps } from '@/hooks/safe-apps/useRemoteSafeApps' import SafeAppIconCard from '@/components/safe-apps/SafeAppIconCard' import { WalletConnectContext } from '@/services/walletconnect/WalletConnectContext' +const isWalletConnectSafeApp = (app: SafeAppData): boolean => { + return WALLET_CONNECT.test(app.url) +} + const WALLET_CONNECT = /wallet-connect/ +const FeaturedAppCard = ({ app }: { app: SafeAppData }) => ( + + + + + + + + + {app.description} + + + + Use {app.name} + + + + +) + export const FeaturedApps = ({ stackedLayout }: { stackedLayout: boolean }): ReactElement | null => { const router = useRouter() const [featuredApps, _, remoteSafeAppsLoading] = useRemoteSafeApps(SafeAppsTag.DASHBOARD_FEATURED) @@ -19,11 +44,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 +63,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} )