fix: Open custom safe apps on click (#2350)

safe-global · Aug 7, 2023 · bd9118c · bd9118c
1 parent beae29d
commit bd9118c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 11 deletions.
diff --git a/src/components/safe-apps/SafeAppCard/index.tsx b/src/components/safe-apps/SafeAppCard/index.tsx
@@ -19,7 +19,6 @@ import SafeAppTags from '@/components/safe-apps/SafeAppTags'
 import { isOptimizedForBatchTransactions } from '@/components/safe-apps/utils'
 import { AppRoutes } from '@/config/routes'
 import BatchIcon from '@/public/images/apps/batch-icon.svg'
-import { useOpenedSafeApps } from '@/hooks/safe-apps/useOpenedSafeApps'
 import css from './styles.module.css'
 
 export type SafeAppsViewMode = 'list-view' | 'grid-view'
@@ -111,7 +110,7 @@ const SafeAppCardGridView = ({
   openPreviewDrawer,
 }: SafeAppCardViewProps) => {
   return (
-    <SafeAppCardContainer safeApp={safeApp} safeAppUrl={safeAppUrl} onClickSafeApp={onClickSafeApp} height={'100%'}>
+    <SafeAppCardContainer safeAppUrl={safeAppUrl} onClickSafeApp={onClickSafeApp} height={'100%'}>
       {/* Safe App Header */}
       <CardHeader
         className={css.safeAppHeader}
@@ -168,7 +167,7 @@ const SafeAppCardListView = ({
   openPreviewDrawer,
 }: SafeAppCardViewProps) => {
   return (
-    <SafeAppCardContainer safeApp={safeApp} safeAppUrl={safeAppUrl} onClickSafeApp={onClickSafeApp}>
+    <SafeAppCardContainer safeAppUrl={safeAppUrl} onClickSafeApp={onClickSafeApp}>
       <CardContent sx={{ pb: '16px !important' }}>
         <Box display="flex" flexDirection="row" alignItems="center" gap={2}>
           <div className={css.safeAppIconContainer}>
@@ -204,7 +203,6 @@ const SafeAppCardListView = ({
 
 type SafeAppCardContainerProps = {
   onClickSafeApp?: () => void
-  safeApp?: SafeAppData
   safeAppUrl: string
   children: ReactNode
   height?: string
@@ -213,18 +211,15 @@ type SafeAppCardContainerProps = {
 
 export const SafeAppCardContainer = ({
   children,
-  safeApp,
   safeAppUrl,
   onClickSafeApp,
   height,
   className,
 }: SafeAppCardContainerProps) => {
-  const { openedSafeAppIds } = useOpenedSafeApps()
-
   const handleClickSafeApp = (event: SyntheticEvent) => {
-    if (safeApp && !openedSafeAppIds.includes(safeApp.id)) {
+    if (onClickSafeApp) {
       event.preventDefault()
-      onClickSafeApp?.()
+      onClickSafeApp()
     }
   }
 

diff --git a/src/components/safe-apps/SafeAppList/index.tsx b/src/components/safe-apps/SafeAppList/index.tsx
@@ -14,6 +14,7 @@ import useSafeAppPreviewDrawer from '@/hooks/safe-apps/useSafeAppPreviewDrawer'
 import css from './styles.module.css'
 import { Skeleton } from '@mui/material'
 import useLocalStorage from '@/services/local-storage/useLocalStorage'
+import { useOpenedSafeApps } from '@/hooks/safe-apps/useOpenedSafeApps'
 
 type SafeAppListProps = {
   safeAppsList: SafeAppData[]
@@ -38,6 +39,7 @@ const SafeAppList = ({
 }: SafeAppListProps) => {
   const [safeAppsViewMode = GRID_VIEW_MODE, setSafeAppsViewMode] = useLocalStorage<SafeAppsViewMode>(VIEW_MODE_KEY)
   const { isPreviewDrawerOpen, previewDrawerApp, openPreviewDrawer, closePreviewDrawer } = useSafeAppPreviewDrawer()
+  const { openedSafeAppIds } = useOpenedSafeApps()
 
   const { filteredApps, query, setQuery, setSelectedCategories, setOptimizedWithBatchFilter, selectedCategories } =
     useSafeAppsFilters(safeAppsList)
@@ -48,11 +50,11 @@ const SafeAppList = ({
     (safeApp: SafeAppData) => {
       const isCustomApp = safeApp.id < 1
 
-      if (isCustomApp) return
+      if (isCustomApp || openedSafeAppIds.includes(safeApp.id)) return
 
       return () => openPreviewDrawer(safeApp)
     },
-    [openPreviewDrawer],
+    [openPreviewDrawer, openedSafeAppIds],
   )
 
   return (