From 115fd39321ced3fef29a04ddeed297b7fa00df9c Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Mon, 2 Nov 2020 15:35:47 -0300
Subject: [PATCH 01/39] speed-up load time  for safe-apps

---
 .../safe/components/Apps/AddAppForm/index.tsx |  11 +-
 .../safe/components/Apps/hooks/useAppList.ts  | 161 +++++++++++-------
 src/routes/safe/components/Apps/index.tsx     |  17 +-
 src/routes/safe/components/Apps/types.d.ts    |  10 +-
 src/routes/safe/components/Apps/utils.ts      |  23 ++-
 5 files changed, 139 insertions(+), 83 deletions(-)

diff --git a/src/routes/safe/components/Apps/AddAppForm/index.tsx b/src/routes/safe/components/Apps/AddAppForm/index.tsx
index 292f522f53..f3451b1c8c 100644
--- a/src/routes/safe/components/Apps/AddAppForm/index.tsx
+++ b/src/routes/safe/components/Apps/AddAppForm/index.tsx
@@ -9,7 +9,7 @@ import SubmitButtonStatus from './SubmitButtonStatus'
 import { SafeApp } from 'src/routes/safe/components/Apps/types.d'
 import GnoForm from 'src/components/forms/GnoForm'
 import Img from 'src/components/layout/Img'
-import appsIconSvg from 'src/routes/safe/components/Transactions/TxsTable/TxType/assets/appsIcon.svg'
+import { getEmptySafeApp } from '../utils'
 
 const StyledText = styled(Text)`
   margin-bottom: 19px;
@@ -39,14 +39,7 @@ const INITIAL_VALUES: AddAppFormValues = {
   agreementAccepted: false,
 }
 
-const APP_INFO: SafeApp = {
-  id: '',
-  url: '',
-  name: '',
-  iconUrl: appsIconSvg,
-  error: false,
-  description: '',
-}
+const APP_INFO = getEmptySafeApp()
 
 interface AddAppProps {
   appList: SafeApp[]
diff --git a/src/routes/safe/components/Apps/hooks/useAppList.ts b/src/routes/safe/components/Apps/hooks/useAppList.ts
index c2f13c1393..007f7672c4 100644
--- a/src/routes/safe/components/Apps/hooks/useAppList.ts
+++ b/src/routes/safe/components/Apps/hooks/useAppList.ts
@@ -1,9 +1,11 @@
 import { useState, useEffect, useCallback } from 'react'
 import { loadFromStorage, saveToStorage } from 'src/utils/storage'
-import { getAppInfoFromUrl, staticAppsList } from '../utils'
-import { SafeApp, StoredSafeApp } from '../types'
+import { getAppInfoFromUrl, getEmptySafeApp, staticAppsList } from '../utils'
+import { SafeApp, StoredSafeApp, SAFE_APP_LOADING_STATUS } from '../types.d'
 import { getNetworkId } from 'src/config'
 
+const loaderDotsSvg = require('src/routes/opening/assets/loader-dots.svg')
+
 const APPS_STORAGE_KEY = 'APPS_STORAGE_KEY'
 
 type onAppToggleHandler = (appId: string, enabled: boolean) => Promise<void>
@@ -12,7 +14,7 @@ type onAppRemovedHandler = (appId: string) => void
 
 type UseAppListReturnType = {
   appList: SafeApp[]
-  loadingAppList: boolean
+  //  loadingAppList: boolean
   onAppToggle: onAppToggleHandler
   onAppAdded: onAppAddedHandler
   onAppRemoved: onAppRemovedHandler
@@ -20,67 +22,6 @@ type UseAppListReturnType = {
 
 const useAppList = (): UseAppListReturnType => {
   const [appList, setAppList] = useState<SafeApp[]>([])
-  const [loadingAppList, setLoadingAppList] = useState<boolean>(true)
-
-  // Load apps list
-  useEffect(() => {
-    const loadApps = async () => {
-      // recover apps from storage:
-      // * third-party apps added by the user
-      // * disabled status for both static and third-party apps
-      const persistedAppList = (await loadFromStorage<StoredSafeApp[]>(APPS_STORAGE_KEY)) || []
-      let list: (StoredSafeApp & { isDeletable: boolean; networks?: number[] })[] = persistedAppList.map((a) => ({
-        ...a,
-        isDeletable: true,
-      }))
-
-      // merge stored apps with static apps (apps added manually can be deleted by the user)
-      staticAppsList.forEach((staticApp) => {
-        const app = list.find((persistedApp) => persistedApp.url === staticApp.url)
-        if (app) {
-          app.isDeletable = false
-          app.networks = staticApp.networks
-        } else {
-          list.push({ ...staticApp, isDeletable: false })
-        }
-      })
-
-      // filter app by network
-      list = list.filter((app) => {
-        // if the app does not expose supported networks, include them. (backward compatible)
-        if (!app.networks) {
-          return true
-        }
-        return app.networks.includes(getNetworkId())
-      })
-
-      let apps: SafeApp[] = []
-      // using the appURL to recover app info
-      for (let index = 0; index < list.length; index++) {
-        try {
-          const currentApp = list[index]
-
-          const appInfo: SafeApp = await getAppInfoFromUrl(currentApp.url)
-          if (appInfo.error) {
-            throw Error(`There was a problem trying to load app ${currentApp.url}`)
-          }
-
-          appInfo.disabled = Boolean(currentApp.disabled)
-          appInfo.isDeletable = Boolean(currentApp.isDeletable) === undefined ? true : currentApp.isDeletable
-
-          apps.push(appInfo)
-        } catch (error) {
-          console.error(error)
-        }
-      }
-      apps = apps.sort((a, b) => a.name.localeCompare(b.name))
-
-      setAppList(apps)
-      setLoadingAppList(false)
-    }
-
-    loadApps()
-  }, [])
 
   const onAppToggle: onAppToggleHandler = useCallback(
     async (appId, enabled) => {
@@ -130,9 +71,99 @@ const useAppList = (): UseAppListReturnType => {
     [appList],
   )
 
+  // Load apps list
+  // for each URL we return a mocked safe-app with a loading status
+  // it was developed to speed up initial page load, otherwise the
+  // app renders a loading until all the safe-apps are fetched.
+  useEffect(() => {
+    const loadApps = async () => {
+      // recover apps from storage:
+      // * third-party apps added by the user
+      // * disabled status for both static and third-party apps
+      const persistedAppList = (await loadFromStorage<StoredSafeApp[]>(APPS_STORAGE_KEY)) || []
+      let list: (StoredSafeApp & { isDeletable: boolean; networks?: number[] })[] = persistedAppList.map((a) => ({
+        ...a,
+        isDeletable: true,
+      }))
+
+      // merge stored apps with static apps (apps added manually can be deleted by the user)
+      staticAppsList.forEach((staticApp) => {
+        const app = list.find((persistedApp) => persistedApp.url === staticApp.url)
+        if (app) {
+          app.isDeletable = false
+          app.networks = staticApp.networks
+        } else {
+          list.push({ ...staticApp, isDeletable: false })
+        }
+      })
+
+      // filter app by network
+      list = list.filter((app) => {
+        // if the app does not expose supported networks, include them. (backward compatible)
+        if (!app.networks) {
+          return true
+        }
+        return app.networks.includes(getNetworkId())
+      })
+
+      const apps: SafeApp[] = []
+      for (let index = 0; index < list.length; index++) {
+        const currentApp = list[index]
+        const appUrl = currentApp.url.trim()
+
+        const appInfo = {
+          ...getEmptySafeApp(),
+          url: appUrl,
+          name: 'loading',
+          iconUrl: loaderDotsSvg,
+        }
+
+        appInfo.disabled = Boolean(currentApp.disabled)
+        appInfo.isDeletable = Boolean(currentApp.isDeletable) === undefined ? true : currentApp.isDeletable
+
+        apps.push(appInfo)
+      }
+
+      setAppList(apps)
+    }
+
+    if (!appList.length) {
+      loadApps()
+    }
+  }, [appList])
+
+  // fetch each safe-app
+  // replace real data if it was success remove it from the list otherwise
+  useEffect(() => {
+    if (!appList?.length) {
+      return
+    }
+
+    appList
+      .filter((app) => app.loadingStatus === SAFE_APP_LOADING_STATUS.ADDED)
+      .forEach((resApp) => {
+        let cpApps = [...appList]
+        const index = appList.findIndex((currentApp) => currentApp.url === resApp.url)
+        cpApps[index] = { ...cpApps[index], loadingStatus: SAFE_APP_LOADING_STATUS.LOADING }
+        setAppList(cpApps)
+
+        getAppInfoFromUrl(resApp.url).then((res: SafeApp) => {
+          if (res.error) {
+            // if there was an error trying to load the safe-app, remove it from the list
+            cpApps.splice(index, 1)
+            throw Error(`There was a problem trying to load app ${res.url}`)
+          } else {
+            // if the safe app was loaded correctly, update the safe-app info
+            cpApps[index] = res
+          }
+          cpApps = cpApps.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
+          setAppList(cpApps)
+        })
+      })
+  }, [appList])
+
   return {
     appList,
-    loadingAppList,
     onAppToggle,
     onAppAdded,
     onAppRemoved,
diff --git a/src/routes/safe/components/Apps/index.tsx b/src/routes/safe/components/Apps/index.tsx
index 64cd9b74a8..91ecff0638 100644
--- a/src/routes/safe/components/Apps/index.tsx
+++ b/src/routes/safe/components/Apps/index.tsx
@@ -13,7 +13,7 @@ import styled, { css } from 'styled-components'
 import ManageApps from './components/ManageApps'
 import AppFrame from './components/AppFrame'
 import { useAppList } from './hooks/useAppList'
-import { SafeApp } from './types.d'
+import { SafeApp, SAFE_APP_LOADING_STATUS } from './types.d'
 
 import LCL from 'src/components/ListContentLayout'
 import { grantedSelector } from 'src/routes/safe/container/selector'
@@ -67,7 +67,7 @@ const INITIAL_CONFIRM_TX_MODAL_STATE: ConfirmTransactionModalState = {
 const NETWORK_NAME = getNetworkName()
 
 const Apps = (): React.ReactElement => {
-  const { appList, loadingAppList, onAppToggle, onAppAdded, onAppRemoved } = useAppList()
+  const { appList, onAppToggle, onAppAdded, onAppRemoved } = useAppList()
 
   const [appIsLoading, setAppIsLoading] = useState<boolean>(true)
   const [selectedAppId, setSelectedAppId] = useState<string>()
@@ -97,7 +97,7 @@ const Apps = (): React.ReactElement => {
   ])
 
   const selectedApp = useMemo(() => appList.find((app) => app.id === selectedAppId), [appList, selectedAppId])
-  const enabledApps = useMemo(() => appList.filter((a) => !a.disabled), [appList])
+  const enabledApps = useMemo(() => appList.filter((app) => !app.disabled), [appList])
   const { sendMessageToIframe } = useIframeMessageHandler(
     selectedApp,
     openConfirmationModal,
@@ -134,8 +134,15 @@ const Apps = (): React.ReactElement => {
   // Auto Select app first App
   useEffect(() => {
     const selectFirstEnabledApp = () => {
+      const areAppsLoading = appList.some((a) =>
+        [SAFE_APP_LOADING_STATUS.LOADING, SAFE_APP_LOADING_STATUS.ADDED].includes(a.loadingStatus),
+      )
+      if (areAppsLoading) {
+        return
+      }
+
       const firstEnabledApp = appList.find((a) => !a.disabled)
-      if (firstEnabledApp) {
+      if (firstEnabledApp && firstEnabledApp.loadingStatus === SAFE_APP_LOADING_STATUS.SUCCESS) {
         setSelectedAppId(firstEnabledApp.id)
       }
     }
@@ -171,7 +178,7 @@ const Apps = (): React.ReactElement => {
     })
   }, [ethBalance, safeAddress, selectedApp, sendMessageToIframe])
 
-  if (loadingAppList || !appList.length || !safeAddress) {
+  if (!appList.length || !safeAddress) {
     return (
       <LoadingContainer>
         <Loader size="md" />
diff --git a/src/routes/safe/components/Apps/types.d.ts b/src/routes/safe/components/Apps/types.d.ts
index db8b49d112..27004312c3 100644
--- a/src/routes/safe/components/Apps/types.d.ts
+++ b/src/routes/safe/components/Apps/types.d.ts
@@ -1,3 +1,10 @@
+export enum SAFE_APP_LOADING_STATUS {
+  ADDED = 'ADDED',
+  LOADING = 'LOADING',
+  SUCCESS = 'SUCCESS',
+  ERROR = 'ERROR',
+}
+
 export type SafeApp = {
   id: string
   url: string
@@ -5,8 +12,9 @@ export type SafeApp = {
   iconUrl: string
   disabled?: boolean
   isDeletable?: boolean
-  error: boolean
   description: string
+  error: boolean
+  loadingStatus: SAFE_APP_LOADING_STATUS
 }
 
 export type StoredSafeApp = {
diff --git a/src/routes/safe/components/Apps/utils.ts b/src/routes/safe/components/Apps/utils.ts
index 75c1b88103..11572a7941 100644
--- a/src/routes/safe/components/Apps/utils.ts
+++ b/src/routes/safe/components/Apps/utils.ts
@@ -1,7 +1,7 @@
 import axios from 'axios'
 import memoize from 'lodash.memoize'
 
-import { SafeApp } from './types.d'
+import { SafeApp, SAFE_APP_LOADING_STATUS } from './types.d'
 
 import { getGnosisSafeAppsUrl } from 'src/config'
 import { getContentFromENS } from 'src/logic/wallets/getWeb3'
@@ -111,7 +111,7 @@ export const staticAppsList: Array<{ url: string; disabled: boolean; networks: n
   },
 ]
 
-export const getAppInfoFromOrigin = (origin: string): Record<string, string> | null => {
+export const getAppInfoFromOrigin = (origin: string): { url: string; name: string } | null => {
   try {
     return JSON.parse(origin)
   } catch (error) {
@@ -132,9 +132,25 @@ export const isAppManifestValid = (appInfo: SafeApp): boolean =>
   // no `error` (or `error` undefined)
   !appInfo.error
 
+export const getEmptySafeApp = (): SafeApp => {
+  return {
+    id: Math.random().toString(),
+    url: '',
+    name: 'unknown',
+    iconUrl: appsIconSvg,
+    error: false,
+    description: '',
+    loadingStatus: SAFE_APP_LOADING_STATUS.ADDED,
+  }
+}
+
 export const getAppInfoFromUrl = memoize(
   async (appUrl: string): Promise<SafeApp> => {
-    let res = { id: '', url: appUrl, name: 'unknown', iconUrl: appsIconSvg, error: true, description: '' }
+    let res = {
+      ...getEmptySafeApp(),
+      error: true,
+      loadingStatus: SAFE_APP_LOADING_STATUS.ERROR,
+    }
 
     if (!appUrl?.length) {
       return res
@@ -161,6 +177,7 @@ export const getAppInfoFromUrl = memoize(
         ...appInfo.data,
         id: JSON.stringify({ url: res.url, name: appInfo.data.name.substring(0, remainingSpace) }),
         error: false,
+        loadingStatus: SAFE_APP_LOADING_STATUS.SUCCESS,
       }
 
       if (appInfo.data.iconPath) {

From f03a901b17046963bb6d87f9e47fc685db2b0be6 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 3 Nov 2020 14:50:13 -0300
Subject: [PATCH 02/39] show loading status until all the apps are loaded

---
 src/routes/safe/components/Apps/hooks/useAppList.ts |  4 ----
 src/routes/safe/components/Apps/index.tsx           | 12 +++++++++++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/routes/safe/components/Apps/hooks/useAppList.ts b/src/routes/safe/components/Apps/hooks/useAppList.ts
index 007f7672c4..ea4f3c59f2 100644
--- a/src/routes/safe/components/Apps/hooks/useAppList.ts
+++ b/src/routes/safe/components/Apps/hooks/useAppList.ts
@@ -4,8 +4,6 @@ import { getAppInfoFromUrl, getEmptySafeApp, staticAppsList } from '../utils'
 import { SafeApp, StoredSafeApp, SAFE_APP_LOADING_STATUS } from '../types.d'
 import { getNetworkId } from 'src/config'
 
-const loaderDotsSvg = require('src/routes/opening/assets/loader-dots.svg')
-
 const APPS_STORAGE_KEY = 'APPS_STORAGE_KEY'
 
 type onAppToggleHandler = (appId: string, enabled: boolean) => Promise<void>
@@ -114,8 +112,6 @@ const useAppList = (): UseAppListReturnType => {
         const appInfo = {
           ...getEmptySafeApp(),
           url: appUrl,
-          name: 'loading',
-          iconUrl: loaderDotsSvg,
         }
 
         appInfo.disabled = Boolean(currentApp.disabled)
diff --git a/src/routes/safe/components/Apps/index.tsx b/src/routes/safe/components/Apps/index.tsx
index 91ecff0638..e049ecae8e 100644
--- a/src/routes/safe/components/Apps/index.tsx
+++ b/src/routes/safe/components/Apps/index.tsx
@@ -28,6 +28,8 @@ import ConfirmTransactionModal from './components/ConfirmTransactionModal'
 import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
 import { getNetworkName } from 'src/config'
 
+const loaderDotsSvg = require('src/routes/opening/assets/loader-dots.svg')
+
 const centerCSS = css`
   display: flex;
   align-items: center;
@@ -97,7 +99,15 @@ const Apps = (): React.ReactElement => {
   ])
 
   const selectedApp = useMemo(() => appList.find((app) => app.id === selectedAppId), [appList, selectedAppId])
-  const enabledApps = useMemo(() => appList.filter((app) => !app.disabled), [appList])
+  const enabledApps = useMemo(() => {
+    const areAppsLoading = appList.some((app) =>
+      [SAFE_APP_LOADING_STATUS.ADDED, SAFE_APP_LOADING_STATUS.LOADING].includes(app.loadingStatus),
+    )
+
+    return areAppsLoading
+      ? appList.map((app) => ({ ...app, name: 'Loading', iconUrl: loaderDotsSvg }))
+      : appList.filter((app) => !app.disabled)
+  }, [appList])
   const { sendMessageToIframe } = useIframeMessageHandler(
     selectedApp,
     openConfirmationModal,

From 89d30af123d0fa05bd20d2e2089244004dc8de00 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 3 Nov 2020 14:51:46 -0300
Subject: [PATCH 03/39] remove commented code

---
 src/routes/safe/components/Apps/hooks/useAppList.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/safe/components/Apps/hooks/useAppList.ts b/src/routes/safe/components/Apps/hooks/useAppList.ts
index ea4f3c59f2..1e13065024 100644
--- a/src/routes/safe/components/Apps/hooks/useAppList.ts
+++ b/src/routes/safe/components/Apps/hooks/useAppList.ts
@@ -12,7 +12,6 @@ type onAppRemovedHandler = (appId: string) => void
 
 type UseAppListReturnType = {
   appList: SafeApp[]
-  //  loadingAppList: boolean
   onAppToggle: onAppToggleHandler
   onAppAdded: onAppAddedHandler
   onAppRemoved: onAppRemovedHandler

From 45c6b95cd0e3b7be9480238476db3d1dd052d87a Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 10 Nov 2020 15:59:26 -0300
Subject: [PATCH 04/39] Add App route

---
 src/routes/safe/components/App/index.tsx  | 21 +++++++++++++++++++++
 src/routes/safe/components/Apps/index.tsx | 22 +++++++++++++++-------
 src/routes/safe/container/index.tsx       | 18 ++++++++++++++++--
 3 files changed, 52 insertions(+), 9 deletions(-)
 create mode 100644 src/routes/safe/components/App/index.tsx

diff --git a/src/routes/safe/components/App/index.tsx b/src/routes/safe/components/App/index.tsx
new file mode 100644
index 0000000000..ad169fb745
--- /dev/null
+++ b/src/routes/safe/components/App/index.tsx
@@ -0,0 +1,21 @@
+import React, { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+function useQuery() {
+  return new URLSearchParams(useLocation().search)
+}
+
+const App = (): React.ReactElement => {
+  const query = useQuery()
+  const appUrl = query.get('appUrl')
+
+  useEffect(() => {
+    if (!appUrl) {
+      throw Error('No safe-app provided')
+    }
+  }, [appUrl])
+
+  return <div>ID: {appUrl} </div>
+}
+
+export default App
diff --git a/src/routes/safe/components/Apps/index.tsx b/src/routes/safe/components/Apps/index.tsx
index e049ecae8e..26792a6bae 100644
--- a/src/routes/safe/components/Apps/index.tsx
+++ b/src/routes/safe/components/Apps/index.tsx
@@ -27,6 +27,8 @@ import { useIframeMessageHandler } from './hooks/useIframeMessageHandler'
 import ConfirmTransactionModal from './components/ConfirmTransactionModal'
 import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
 import { getNetworkName } from 'src/config'
+import { useRouteMatch, useHistory } from 'react-router-dom'
+import { SAFELIST_ADDRESS } from 'src/routes/routes'
 
 const loaderDotsSvg = require('src/routes/opening/assets/loader-dots.svg')
 
@@ -69,6 +71,9 @@ const INITIAL_CONFIRM_TX_MODAL_STATE: ConfirmTransactionModalState = {
 const NETWORK_NAME = getNetworkName()
 
 const Apps = (): React.ReactElement => {
+  const history = useHistory()
+  const matchSafeWithAddress = useRouteMatch<{ safeAddress: string }>({ path: `${SAFELIST_ADDRESS}/:safeAddress` })
+
   const { appList, onAppToggle, onAppAdded, onAppRemoved } = useAppList()
 
   const [appIsLoading, setAppIsLoading] = useState<boolean>(true)
@@ -106,7 +111,7 @@ const Apps = (): React.ReactElement => {
 
     return areAppsLoading
       ? appList.map((app) => ({ ...app, name: 'Loading', iconUrl: loaderDotsSvg }))
-      : appList.filter((app) => !app.disabled)
+      : appList.filter((app) => !app.disabled).map((app) => ({ ...app, id: app.url }))
   }, [appList])
   const { sendMessageToIframe } = useIframeMessageHandler(
     selectedApp,
@@ -130,15 +135,18 @@ const Apps = (): React.ReactElement => {
   }
 
   const onSelectApp = useCallback(
-    (appId) => {
-      if (selectedAppId === appId) {
+    (appUrl) => {
+      if (selectedAppId === appUrl) {
         return
       }
+      const goToApp = `${matchSafeWithAddress?.url}/app?appUrl=${encodeURI(appUrl)}`
+      debugger
+      history.push(goToApp)
 
-      setAppIsLoading(true)
-      setSelectedAppId(appId)
+      //setAppIsLoading(true)
+      //setSelectedAppId(appId)
     },
-    [selectedAppId],
+    [selectedAppId, history, matchSafeWithAddress],
   )
 
   // Auto Select app first App
@@ -153,7 +161,7 @@ const Apps = (): React.ReactElement => {
 
       const firstEnabledApp = appList.find((a) => !a.disabled)
       if (firstEnabledApp && firstEnabledApp.loadingStatus === SAFE_APP_LOADING_STATUS.SUCCESS) {
-        setSelectedAppId(firstEnabledApp.id)
+        setSelectedAppId(firstEnabledApp.url)
       }
     }
 
diff --git a/src/routes/safe/container/index.tsx b/src/routes/safe/container/index.tsx
index f0008b308e..773044d31e 100644
--- a/src/routes/safe/container/index.tsx
+++ b/src/routes/safe/container/index.tsx
@@ -20,6 +20,7 @@ export const SAFE_VIEW_NAME_HEADING_TEST_ID = 'safe-name-heading'
 export const TRANSACTIONS_TAB_NEW_BTN_TEST_ID = 'transactions-tab-new-btn'
 
 const Apps = React.lazy(() => import('../components/Apps'))
+const App = React.lazy(() => import('../components/App'))
 const Settings = React.lazy(() => import('../components/Settings'))
 const Balances = React.lazy(() => import('../components/Balances'))
 const TxsTable = React.lazy(() => import('src/routes/safe/components/Transactions/TxsTable'))
@@ -46,7 +47,7 @@ const Container = (): React.ReactElement => {
       return left === right
     },
   )
-  const matchSafeWithAddress = useRouteMatch<{ safeAddress: string }>({ path: `${SAFELIST_ADDRESS}/:safeAddress` })
+  const matchSafeWithAddress = useRouteMatch({ path: `${SAFELIST_ADDRESS}/:safeAddress` })
   const safeAppsEnabled = Boolean(featuresEnabled?.includes(FEATURES.SAFE_APPS))
 
   if (!safeAddress) {
@@ -90,7 +91,20 @@ const Container = (): React.ReactElement => {
             return wrapInSuspense(<Apps />, null)
           }}
         />
-
+        <Route
+          exact
+          path={`${matchSafeWithAddress?.path}/app`}
+          render={(
+            {
+              /* history */
+            },
+          ) => {
+            // if (!safeAppsEnabled) {
+            //   history.push(`${matchSafeWithAddress?.url}/balances`)
+            // }
+            return wrapInSuspense(<App />, null)
+          }}
+        />
         <Route
           exact
           path={`${matchSafeWithAddress?.path}/settings`}

From 0ac4c03d93484bbd0ff708c92c0cf3f67f45de0a Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 11 Nov 2020 12:08:09 -0300
Subject: [PATCH 05/39] partial imp (broken)

---
 .../appsIcon.svg => assets/icons/apps.svg}    |  0
 src/routes/safe/components/App/index.tsx      | 21 -----
 .../safe/components/Apps/assets/addApp.svg    | 31 +++++++
 .../Apps/components/AppCard/index.stories.tsx | 24 ++++++
 .../Apps/components/AppCard/index.tsx         | 80 +++++++++++++++++++
 .../components/Apps/components/AppFrame.tsx   | 42 +++++-----
 .../components/Apps/components/ManageApps.tsx |  2 +-
 .../Apps/hooks/useIframeMessageHandler.ts     |  8 +-
 src/routes/safe/components/Apps/index.tsx     | 59 ++++++++------
 src/routes/safe/components/Apps/utils.ts      |  2 +-
 .../safe/components/assets/AppsIcon.tsx       | 18 -----
 src/routes/safe/container/index.tsx           | 29 +++----
 12 files changed, 208 insertions(+), 108 deletions(-)
 rename src/{routes/safe/components/Transactions/TxsTable/TxType/assets/appsIcon.svg => assets/icons/apps.svg} (100%)
 delete mode 100644 src/routes/safe/components/App/index.tsx
 create mode 100644 src/routes/safe/components/Apps/assets/addApp.svg
 create mode 100644 src/routes/safe/components/Apps/components/AppCard/index.stories.tsx
 create mode 100644 src/routes/safe/components/Apps/components/AppCard/index.tsx
 delete mode 100644 src/routes/safe/components/assets/AppsIcon.tsx

diff --git a/src/routes/safe/components/Transactions/TxsTable/TxType/assets/appsIcon.svg b/src/assets/icons/apps.svg
similarity index 100%
rename from src/routes/safe/components/Transactions/TxsTable/TxType/assets/appsIcon.svg
rename to src/assets/icons/apps.svg
diff --git a/src/routes/safe/components/App/index.tsx b/src/routes/safe/components/App/index.tsx
deleted file mode 100644
index ad169fb745..0000000000
--- a/src/routes/safe/components/App/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, { useEffect } from 'react'
-import { useLocation } from 'react-router-dom'
-
-function useQuery() {
-  return new URLSearchParams(useLocation().search)
-}
-
-const App = (): React.ReactElement => {
-  const query = useQuery()
-  const appUrl = query.get('appUrl')
-
-  useEffect(() => {
-    if (!appUrl) {
-      throw Error('No safe-app provided')
-    }
-  }, [appUrl])
-
-  return <div>ID: {appUrl} </div>
-}
-
-export default App
diff --git a/src/routes/safe/components/Apps/assets/addApp.svg b/src/routes/safe/components/Apps/assets/addApp.svg
new file mode 100644
index 0000000000..76500778d3
--- /dev/null
+++ b/src/routes/safe/components/Apps/assets/addApp.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="102" height="92" viewBox="0 0 102 92">
+    <defs>
+        <path id="611coc912a" d="M0.033 0L92.033 0 92.033 92 0.033 92z"/>
+        <path id="vvw5qne11c" d="M0 0.355L21.594 0.355 21.594 21.949 0 21.949z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g transform="translate(-286 -140) translate(286 140) translate(6)">
+                    <mask id="vl08viacbb" fill="#fff">
+                        <use xlink:href="#611coc912a"/>
+                    </mask>
+                    <path fill="#F7F5F5" d="M46.033 0c25.404 0 46 20.595 46 46 0 25.404-20.596 46-46 46-25.405 0-46-20.596-46-46 0-25.405 20.595-46 46-46" mask="url(#vl08viacbb)"/>
+                </g>
+                <path fill="#B2B5B2" d="M14.613 32.974h-7.59c-3.867 0-7 3.134-7 7v7.591c0 3.865 3.133 7 7 7h7.59c3.866 0 7-3.135 7-7v-7.59c0-3.867-3.134-7-7-7m0 4c1.654 0 3 1.345 3 3v7.59c0 1.653-1.346 3-3 3h-7.59c-1.655 0-3-1.347-3-3v-7.59c0-1.655 1.345-3 3-3h7.59M37.201 32.974h-.04c-5.95 0-10.775 4.824-10.775 10.774v.041c0 5.952 4.824 10.776 10.774 10.776h.041c5.951 0 10.775-4.824 10.775-10.776v-.04c0-5.95-4.824-10.775-10.775-10.775m0 4c3.735 0 6.775 3.04 6.775 6.815 0 3.736-3.04 6.776-6.816 6.776-3.735 0-6.774-3.04-6.774-6.817 0-3.735 3.04-6.774 6.774-6.774h.041M41.002 59.363H33.41c-3.866 0-7 3.134-7 7v7.59c0 3.867 3.134 7 7 7H41c3.867 0 7-3.133 7-7v-7.59c0-3.866-3.133-7-7-7m0 4c1.655 0 3 1.346 3 3v7.59c0 1.654-1.345 3-3 3h-7.59c-1.654 0-3-1.346-3-3v-7.59c0-1.654 1.346-3 3-3H41M20.924 80.273l-.006.006c-.894.894-2.357.894-3.252 0L.67 63.284c-.894-.895-.894-2.358 0-3.252l.006-.006c.894-.895 2.357-.895 3.252 0L20.924 77.02c.895.895.895 2.357 0 3.252" transform="translate(-286 -140) translate(286 140)"/>
+                <g transform="translate(-286 -140) translate(286 140) translate(0 59)">
+                    <mask id="i3d0m5zbyd" fill="#fff">
+                        <use xlink:href="#vvw5qne11c"/>
+                    </mask>
+                    <path fill="#B2B5B2" d="M.67 21.273l.007.006c.894.894 2.357.894 3.252 0L20.924 4.284c.894-.895.894-2.358 0-3.252l-.006-.006c-.894-.895-2.357-.895-3.252 0L.67 18.02c-.895.895-.895 2.357 0 3.252" mask="url(#i3d0m5zbyd)"/>
+                </g>
+                <path stroke="#008C73" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M12.031 15.984L36.031 15.984M24.031 27.984L24.031 3.984" transform="translate(-286 -140) translate(286 140)"/>
+                <path fill="#F7F5F5" d="M48.719 67.994c-3.136 0-5.687-2.552-5.687-5.687V25.68c0-3.135 2.55-5.687 5.687-5.687h44.625c3.136 0 5.688 2.552 5.688 5.687v36.626c0 3.135-2.552 5.687-5.688 5.687H48.719z" transform="translate(-286 -140) translate(286 140)"/>
+                <path fill="#B2B5B2" d="M93.344 17.994H48.719c-4.246 0-7.688 3.44-7.688 7.687v36.626c0 4.246 3.442 7.687 7.688 7.687h44.625c4.245 0 7.687-3.441 7.687-7.687V25.68c0-4.246-3.442-7.687-7.687-7.687m0 4c2.033 0 3.688 1.654 3.688 3.687v36.626c0 2.033-1.655 3.687-3.688 3.687H48.719c-2.034 0-3.688-1.654-3.688-3.687V25.68c0-2.033 1.654-3.687 3.688-3.687h44.625" transform="translate(-286 -140) translate(286 140)"/>
+                <path stroke="#B2B5B2" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M44.566 33.978L97.566 33.978" transform="translate(-286 -140) translate(286 140)"/>
+                <path fill="#B2B5B2" d="M52.032 26.977c0 1.104-.896 2-2 2s-2-.896-2-2 .896-2 2-2 2 .896 2 2M59.007 26.977c0 1.104-.896 2-2 2s-2-.896-2-2 .896-2 2-2 2 .896 2 2M66.024 26.977c0 1.104-.896 2-2 2s-2-.896-2-2 .896-2 2-2 2 .896 2 2" transform="translate(-286 -140) translate(286 140)"/>
+                <path stroke="#B2B5B2" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M66.033 59.977L57.033 50.977 66.033 41.977M76.016 59.977L85.016 50.977 76.016 41.977" transform="translate(-286 -140) translate(286 140)"/>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx b/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx
new file mode 100644
index 0000000000..8b3f137da7
--- /dev/null
+++ b/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+import App from './index'
+
+import AddAppIcon from 'src/routes/safe/components/Apps/assets/addApp.svg'
+
+export default {
+  title: 'Apps/AppCard',
+  component: App,
+}
+
+export const Loading = (): React.ReactElement => <App isLoading />
+
+export const AddCustomApp = (): React.ReactElement => (
+  <App iconUrl={AddAppIcon} onButtonClick={console.log} buttonText="Add custom app" />
+)
+
+export const LoadedApp = (): React.ReactElement => (
+  <App
+    iconUrl="https://cryptologos.cc/logos/versions/gnosis-gno-gno-logo-circle.svg?v=007"
+    name="Gnosis"
+    description="Gnosis safe app"
+  />
+)
diff --git a/src/routes/safe/components/Apps/components/AppCard/index.tsx b/src/routes/safe/components/Apps/components/AppCard/index.tsx
new file mode 100644
index 0000000000..dbd62d9024
--- /dev/null
+++ b/src/routes/safe/components/Apps/components/AppCard/index.tsx
@@ -0,0 +1,80 @@
+import React, { SyntheticEvent } from 'react'
+import styled from 'styled-components'
+import { fade } from '@material-ui/core/styles/colorManipulator'
+import { Title, Text, Button } from '@gnosis.pm/safe-react-components'
+
+import appsIconSvg from 'src/assets/icons/apps.svg'
+
+const StyledApps = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: space-evenly;
+  box-shadow: 1px 2px 10px 0 ${({ theme }) => fade(theme.colors.shadow.color, 0.18)};
+  border-radius: 8px;
+  padding: 24px;
+  margin: 10px;
+  background-color: ${({ theme }) => theme.colors.white};
+  width: 244px;
+  height: 232px;
+
+  :hover {
+    box-shadow: 1px 2px 16px 0 ${({ theme }) => fade(theme.colors.shadow.color, 0.35)};
+    transition: box-shadow 0.3s ease-in-out;
+    cursor: pointer;
+
+    h4 {
+      color: ${({ theme }) => theme.colors.primary};
+    }
+  }
+`
+
+const IconImg = styled.img`
+  width: 92px;
+`
+
+type Props = {
+  isLoading?: boolean
+  className?: string
+  name?: string
+  description?: string
+  iconUrl?: string
+  buttonText?: string
+  onButtonClick?: () => void
+}
+
+export const setAppImageFallback = (error: SyntheticEvent<HTMLImageElement, Event>): void => {
+  error.currentTarget.onerror = null
+  error.currentTarget.src = appsIconSvg
+}
+
+const Apps = ({
+  isLoading = false,
+  className,
+  name,
+  description,
+  iconUrl,
+  buttonText,
+  onButtonClick,
+}: Props): React.ReactElement => {
+  if (isLoading) {
+    return <div>skeleton</div>
+  }
+
+  return (
+    <StyledApps className={className}>
+      <IconImg alt={`${name || 'App'} Logo`} src={iconUrl} onError={setAppImageFallback} />
+
+      {name && <Title size="sm">{name}</Title>}
+      {description && <Text size="lg">{description} </Text>}
+
+      {onButtonClick && (
+        <Button size="md" color="primary" variant="contained">
+          {buttonText}
+        </Button>
+      )}
+    </StyledApps>
+  )
+}
+
+export default Apps
diff --git a/src/routes/safe/components/Apps/components/AppFrame.tsx b/src/routes/safe/components/Apps/components/AppFrame.tsx
index 9d021a8125..258c740b63 100644
--- a/src/routes/safe/components/Apps/components/AppFrame.tsx
+++ b/src/routes/safe/components/Apps/components/AppFrame.tsx
@@ -4,7 +4,6 @@ import { FixedIcon, Loader, Title } from '@gnosis.pm/safe-react-components'
 import { useHistory } from 'react-router-dom'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
 import { useLegalConsent } from '../hooks/useLegalConsent'
-import { SafeApp } from '../types'
 import LegalDisclaimer from './LegalDisclaimer'
 
 const StyledIframe = styled.iframe`
@@ -37,7 +36,7 @@ const Centered = styled.div`
 `
 
 type AppFrameProps = {
-  selectedApp: SafeApp | undefined
+  appUrl: string
   safeAddress: string
   network: string
   granted: boolean
@@ -46,14 +45,14 @@ type AppFrameProps = {
 }
 
 const AppFrame = forwardRef<HTMLIFrameElement, AppFrameProps>(function AppFrameComponent(
-  { selectedApp, safeAddress, network, appIsLoading, granted, onIframeLoad },
+  { appUrl, safeAddress, network, appIsLoading, granted, onIframeLoad },
   iframeRef,
 ): React.ReactElement {
   const history = useHistory()
   const { consentReceived, onConsentReceipt } = useLegalConsent()
   const redirectToBalance = () => history.push(`${SAFELIST_ADDRESS}/${safeAddress}/balances`)
 
-  if (!selectedApp) {
+  if (!appUrl) {
     return <div />
   }
 
@@ -71,21 +70,26 @@ const AppFrame = forwardRef<HTMLIFrameElement, AppFrameProps>(function AppFrameC
   }
 
   return (
-    <IframeWrapper>
-      {appIsLoading && (
-        <LoadingContainer>
-          <Loader size="md" />
-        </LoadingContainer>
-      )}
-      <StyledIframe
-        frameBorder="0"
-        id={`iframe-${selectedApp.name}`}
-        ref={iframeRef}
-        src={selectedApp.url}
-        title={selectedApp.name}
-        onLoad={onIframeLoad}
-      />
-    </IframeWrapper>
+    <>
+      {/* <Menu>
+        <ManageApps appList={appList} onAppAdded={onAppAdded} onAppToggle={onAppToggle} onAppRemoved={onAppRemoved} />
+      </Menu> */}
+      <IframeWrapper>
+        {appIsLoading && (
+          <LoadingContainer>
+            <Loader size="md" />
+          </LoadingContainer>
+        )}
+        <StyledIframe
+          frameBorder="0"
+          id={`iframe-${appUrl}`}
+          ref={iframeRef}
+          src={appUrl}
+          title={appUrl} // TODO: Change it!
+          onLoad={onIframeLoad}
+        />
+      </IframeWrapper>
+    </>
   )
 })
 
diff --git a/src/routes/safe/components/Apps/components/ManageApps.tsx b/src/routes/safe/components/Apps/components/ManageApps.tsx
index 26ccb49416..0ad60a986c 100644
--- a/src/routes/safe/components/Apps/components/ManageApps.tsx
+++ b/src/routes/safe/components/Apps/components/ManageApps.tsx
@@ -1,7 +1,7 @@
 import { ButtonLink, ManageListModal } from '@gnosis.pm/safe-react-components'
 import React, { useState } from 'react'
 
-import appsIconSvg from 'src/routes/safe/components/Transactions/TxsTable/TxType/assets/appsIcon.svg'
+import appsIconSvg from 'src/assets/icons/apps.svg'
 import AddAppForm from '../AddAppForm'
 import { SafeApp } from '../types'
 
diff --git a/src/routes/safe/components/Apps/hooks/useIframeMessageHandler.ts b/src/routes/safe/components/Apps/hooks/useIframeMessageHandler.ts
index 3ca4844a8a..dfa75a501e 100644
--- a/src/routes/safe/components/Apps/hooks/useIframeMessageHandler.ts
+++ b/src/routes/safe/components/Apps/hooks/useIframeMessageHandler.ts
@@ -161,10 +161,10 @@ const useIframeMessageHandler = (
       if (message.origin === window.origin) {
         return
       }
-      if (!selectedApp?.url.includes(message.origin)) {
-        console.error(`ThirdPartyApp: A message was received from an unknown origin ${message.origin}`)
-        return
-      }
+      // if (!selectedApp?.url.includes(message.origin)) {
+      //   console.error(`ThirdPartyApp: A message was received from an unknown origin ${message.origin}`)
+      //   return
+      // }
       handleIframeMessage(message.data.messageId, message.data.data, message.data.requestId)
     }
 
diff --git a/src/routes/safe/components/Apps/index.tsx b/src/routes/safe/components/Apps/index.tsx
index 26792a6bae..13d0622789 100644
--- a/src/routes/safe/components/Apps/index.tsx
+++ b/src/routes/safe/components/Apps/index.tsx
@@ -27,7 +27,7 @@ import { useIframeMessageHandler } from './hooks/useIframeMessageHandler'
 import ConfirmTransactionModal from './components/ConfirmTransactionModal'
 import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
 import { getNetworkName } from 'src/config'
-import { useRouteMatch, useHistory } from 'react-router-dom'
+import { useRouteMatch, useHistory, useLocation } from 'react-router-dom'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
 
 const loaderDotsSvg = require('src/routes/opening/assets/loader-dots.svg')
@@ -70,10 +70,17 @@ const INITIAL_CONFIRM_TX_MODAL_STATE: ConfirmTransactionModalState = {
 
 const NETWORK_NAME = getNetworkName()
 
+const useQuery = () => {
+  return new URLSearchParams(useLocation().search)
+}
+
 const Apps = (): React.ReactElement => {
   const history = useHistory()
   const matchSafeWithAddress = useRouteMatch<{ safeAddress: string }>({ path: `${SAFELIST_ADDRESS}/:safeAddress` })
 
+  const query = useQuery()
+  const appUrl = query.get('appUrl')
+
   const { appList, onAppToggle, onAppAdded, onAppRemoved } = useAppList()
 
   const [appIsLoading, setAppIsLoading] = useState<boolean>(true)
@@ -104,14 +111,14 @@ const Apps = (): React.ReactElement => {
   ])
 
   const selectedApp = useMemo(() => appList.find((app) => app.id === selectedAppId), [appList, selectedAppId])
-  const enabledApps = useMemo(() => {
+  const apps = useMemo(() => {
     const areAppsLoading = appList.some((app) =>
       [SAFE_APP_LOADING_STATUS.ADDED, SAFE_APP_LOADING_STATUS.LOADING].includes(app.loadingStatus),
     )
 
     return areAppsLoading
       ? appList.map((app) => ({ ...app, name: 'Loading', iconUrl: loaderDotsSvg }))
-      : appList.filter((app) => !app.disabled).map((app) => ({ ...app, id: app.url }))
+      : appList.map((app) => ({ ...app, id: app.url }))
   }, [appList])
   const { sendMessageToIframe } = useIframeMessageHandler(
     selectedApp,
@@ -139,8 +146,7 @@ const Apps = (): React.ReactElement => {
       if (selectedAppId === appUrl) {
         return
       }
-      const goToApp = `${matchSafeWithAddress?.url}/app?appUrl=${encodeURI(appUrl)}`
-      debugger
+      const goToApp = `${matchSafeWithAddress?.url}/apps?appUrl=${encodeURI(appUrl)}`
       history.push(goToApp)
 
       //setAppIsLoading(true)
@@ -181,7 +187,7 @@ const Apps = (): React.ReactElement => {
 
   const handleIframeLoad = useCallback(() => {
     const iframe = iframeRef.current
-    if (!iframe || !selectedApp || !isSameURL(iframe.src, selectedApp.url)) {
+    if (!iframe || !isSameURL(iframe.src, appUrl as string)) {
       return
     }
 
@@ -194,7 +200,7 @@ const Apps = (): React.ReactElement => {
         ethBalance: ethBalance as string,
       },
     })
-  }, [ethBalance, safeAddress, selectedApp, sendMessageToIframe])
+  }, [ethBalance, safeAddress, appUrl, sendMessageToIframe])
 
   if (!appList.length || !safeAddress) {
     return (
@@ -204,27 +210,32 @@ const Apps = (): React.ReactElement => {
     )
   }
 
+  if (appUrl) {
+    return (
+      <AppFrame
+        ref={iframeRef}
+        granted={granted}
+        appUrl={appUrl}
+        safeAddress={safeAddress}
+        network={NETWORK_NAME}
+        appIsLoading={appIsLoading}
+        onIframeLoad={handleIframeLoad}
+      />
+    )
+  }
+
   return (
     <>
-      <Menu>
+      {/* <Menu>
         <ManageApps appList={appList} onAppAdded={onAppAdded} onAppToggle={onAppToggle} onAppRemoved={onAppRemoved} />
-      </Menu>
-      {enabledApps.length ? (
+      </Menu> */}
+
+      {apps.map((a) => {}) ? (
         <LCL.Wrapper>
           <LCL.Menu>
-            <LCL.List activeItem={selectedAppId} items={enabledApps} onItemClick={onSelectApp} />
+            <LCL.List activeItem={selectedAppId} items={apps} onItemClick={onSelectApp} />
           </LCL.Menu>
-          <LCL.Content>
-            <AppFrame
-              ref={iframeRef}
-              granted={granted}
-              selectedApp={selectedApp}
-              safeAddress={safeAddress}
-              network={NETWORK_NAME}
-              appIsLoading={appIsLoading}
-              onIframeLoad={handleIframeLoad}
-            />
-          </LCL.Content>
+          <LCL.Content></LCL.Content>
         </LCL.Wrapper>
       ) : (
         <StyledCard>
@@ -240,7 +251,7 @@ const Apps = (): React.ReactElement => {
           textSize="sm"
         />
       </CenteredMT>
-      <ConfirmTransactionModal
+      {/* <ConfirmTransactionModal
         isOpen={confirmTransactionModal.isOpen}
         app={selectedApp as SafeApp}
         safeAddress={safeAddress}
@@ -251,7 +262,7 @@ const Apps = (): React.ReactElement => {
         onUserConfirm={onUserTxConfirm}
         params={confirmTransactionModal.params}
         onTxReject={onTxReject}
-      />
+      /> */}
     </>
   )
 }
diff --git a/src/routes/safe/components/Apps/utils.ts b/src/routes/safe/components/Apps/utils.ts
index 20d27da69b..6f4800f7e2 100644
--- a/src/routes/safe/components/Apps/utils.ts
+++ b/src/routes/safe/components/Apps/utils.ts
@@ -5,7 +5,7 @@ import { SafeApp, SAFE_APP_LOADING_STATUS } from './types.d'
 
 import { getGnosisSafeAppsUrl } from 'src/config'
 import { getContentFromENS } from 'src/logic/wallets/getWeb3'
-import appsIconSvg from 'src/routes/safe/components/Transactions/TxsTable/TxType/assets/appsIcon.svg'
+import appsIconSvg from 'src/assets/icons/apps.svg'
 import { ETHEREUM_NETWORK } from 'src/config/networks/network.d'
 
 const removeLastTrailingSlash = (url) => {
diff --git a/src/routes/safe/components/assets/AppsIcon.tsx b/src/routes/safe/components/assets/AppsIcon.tsx
deleted file mode 100644
index 9bd1639d8a..0000000000
--- a/src/routes/safe/components/assets/AppsIcon.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-
-export const AppsIcon = () => (
-  <svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fillRule="evenodd">
-      <path d="M0 0h16v16H0z" />
-      <path
-        className="fill"
-        d="M2 1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm1 2v2h2V3H3zM10 9h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1zm1 2v2h2v-2h-2zM12 7a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-1.9a1.1 1.1 0 1 1 0-2.2 1.1 1.1 0 0 1 0 2.2z"
-        fillRule="nonzero"
-      />
-      <path
-        className="fill"
-        d="M2.641 11.999l-1.36-1.361A.96.96 0 0 1 2.637 9.28l1.36 1.36 1.362-1.36a.959.959 0 1 1 1.357 1.357l-1.36 1.36 1.36 1.362a.96.96 0 0 1-1.357 1.358L4 13.356l-1.361 1.362a.962.962 0 0 1-1.358 0 .964.964 0 0 1 0-1.358l1.361-1.361z"
-      />
-    </g>
-  </svg>
-)
diff --git a/src/routes/safe/container/index.tsx b/src/routes/safe/container/index.tsx
index 773044d31e..bb6836c879 100644
--- a/src/routes/safe/container/index.tsx
+++ b/src/routes/safe/container/index.tsx
@@ -20,7 +20,6 @@ export const SAFE_VIEW_NAME_HEADING_TEST_ID = 'safe-name-heading'
 export const TRANSACTIONS_TAB_NEW_BTN_TEST_ID = 'transactions-tab-new-btn'
 
 const Apps = React.lazy(() => import('../components/Apps'))
-const App = React.lazy(() => import('../components/App'))
 const Settings = React.lazy(() => import('../components/Settings'))
 const Balances = React.lazy(() => import('../components/Balances'))
 const TxsTable = React.lazy(() => import('src/routes/safe/components/Transactions/TxsTable'))
@@ -84,26 +83,16 @@ const Container = (): React.ReactElement => {
         <Route
           exact
           path={`${matchSafeWithAddress?.path}/apps`}
-          render={({ history }) => {
-            if (!safeAppsEnabled) {
-              history.push(`${matchSafeWithAddress?.url}/balances`)
+          render={
+            (/* {
+            history
+          } */) => {
+              // if (!safeAppsEnabled) {
+              //   history.push(`${matchSafeWithAddress?.url}/balances`)
+              // }
+              return wrapInSuspense(<Apps />, null)
             }
-            return wrapInSuspense(<Apps />, null)
-          }}
-        />
-        <Route
-          exact
-          path={`${matchSafeWithAddress?.path}/app`}
-          render={(
-            {
-              /* history */
-            },
-          ) => {
-            // if (!safeAppsEnabled) {
-            //   history.push(`${matchSafeWithAddress?.url}/balances`)
-            // }
-            return wrapInSuspense(<App />, null)
-          }}
+          }
         />
         <Route
           exact

From c16d66f622a29e89735976dffb69009d48189e01 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 11 Nov 2020 12:45:22 -0300
Subject: [PATCH 06/39] Add cards for each safe-app

---
 .../Apps/components/AppCard/index.stories.tsx | 10 +++----
 src/routes/safe/components/Apps/index.tsx     | 29 +++++++++----------
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx b/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx
index 8b3f137da7..e37eb58afa 100644
--- a/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx
+++ b/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx
@@ -1,22 +1,22 @@
 import React from 'react'
 
-import App from './index'
+import AppCard from './index'
 
 import AddAppIcon from 'src/routes/safe/components/Apps/assets/addApp.svg'
 
 export default {
   title: 'Apps/AppCard',
-  component: App,
+  component: AppCard,
 }
 
-export const Loading = (): React.ReactElement => <App isLoading />
+export const Loading = (): React.ReactElement => <AppCard isLoading />
 
 export const AddCustomApp = (): React.ReactElement => (
-  <App iconUrl={AddAppIcon} onButtonClick={console.log} buttonText="Add custom app" />
+  <AppCard iconUrl={AddAppIcon} onButtonClick={console.log} buttonText="Add custom app" />
 )
 
 export const LoadedApp = (): React.ReactElement => (
-  <App
+  <AppCard
     iconUrl="https://cryptologos.cc/logos/versions/gnosis-gno-gno-logo-circle.svg?v=007"
     name="Gnosis"
     description="Gnosis safe app"
diff --git a/src/routes/safe/components/Apps/index.tsx b/src/routes/safe/components/Apps/index.tsx
index 13d0622789..a04dcecfc3 100644
--- a/src/routes/safe/components/Apps/index.tsx
+++ b/src/routes/safe/components/Apps/index.tsx
@@ -15,6 +15,8 @@ import AppFrame from './components/AppFrame'
 import { useAppList } from './hooks/useAppList'
 import { SafeApp, SAFE_APP_LOADING_STATUS } from './types.d'
 
+import AppCard from 'src/routes/safe/components/Apps/components/AppCard'
+import AddAppIcon from 'src/routes/safe/components/Apps/assets/addApp.svg'
 import LCL from 'src/components/ListContentLayout'
 import { grantedSelector } from 'src/routes/safe/container/selector'
 import {
@@ -44,9 +46,10 @@ const LoadingContainer = styled.div`
   ${centerCSS};
 `
 
-const StyledCard = styled(Card)`
-  margin-bottom: 24px;
-  ${centerCSS};
+const CardsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: justify-content-center;
 `
 
 const CenteredMT = styled.div`
@@ -230,18 +233,14 @@ const Apps = (): React.ReactElement => {
         <ManageApps appList={appList} onAppAdded={onAppAdded} onAppToggle={onAppToggle} onAppRemoved={onAppRemoved} />
       </Menu> */}
 
-      {apps.map((a) => {}) ? (
-        <LCL.Wrapper>
-          <LCL.Menu>
-            <LCL.List activeItem={selectedAppId} items={apps} onItemClick={onSelectApp} />
-          </LCL.Menu>
-          <LCL.Content></LCL.Content>
-        </LCL.Wrapper>
-      ) : (
-        <StyledCard>
-          <Title size="xs">No Apps Enabled</Title>
-        </StyledCard>
-      )}
+      <CardsWrapper>
+        <AppCard iconUrl={AddAppIcon} onButtonClick={console.log} buttonText="Add custom app" />
+
+        {apps.map((a) => (
+          <AppCard key={a.url} iconUrl={a.iconUrl} name={a.name} description={a.description} />
+        ))}
+      </CardsWrapper>
+
       <CenteredMT>
         <IconText
           color="secondary"

From 74435713a1d09197446b1e9e77b42aba3fbbf985 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 11 Nov 2020 15:28:05 -0300
Subject: [PATCH 07/39] move logic to AppFrame

---
 .../Apps/components/AppCard/index.tsx         |   4 +-
 .../components/Apps/components/AppFrame.tsx   | 149 +++++++++++--
 src/routes/safe/components/Apps/index.tsx     | 201 +++---------------
 3 files changed, 164 insertions(+), 190 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AppCard/index.tsx b/src/routes/safe/components/Apps/components/AppCard/index.tsx
index dbd62d9024..e18b0366f3 100644
--- a/src/routes/safe/components/Apps/components/AppCard/index.tsx
+++ b/src/routes/safe/components/Apps/components/AppCard/index.tsx
@@ -41,6 +41,7 @@ type Props = {
   iconUrl?: string
   buttonText?: string
   onButtonClick?: () => void
+  onCardClick?: () => void
 }
 
 export const setAppImageFallback = (error: SyntheticEvent<HTMLImageElement, Event>): void => {
@@ -56,13 +57,14 @@ const Apps = ({
   iconUrl,
   buttonText,
   onButtonClick,
+  onCardClick,
 }: Props): React.ReactElement => {
   if (isLoading) {
     return <div>skeleton</div>
   }
 
   return (
-    <StyledApps className={className}>
+    <StyledApps className={className} onClick={onButtonClick ? () => undefined : onCardClick}>
       <IconImg alt={`${name || 'App'} Logo`} src={iconUrl} onError={setAppImageFallback} />
 
       {name && <Title size="sm">{name}</Title>}
diff --git a/src/routes/safe/components/Apps/components/AppFrame.tsx b/src/routes/safe/components/Apps/components/AppFrame.tsx
index 258c740b63..deb63216aa 100644
--- a/src/routes/safe/components/Apps/components/AppFrame.tsx
+++ b/src/routes/safe/components/Apps/components/AppFrame.tsx
@@ -1,10 +1,32 @@
-import React, { forwardRef } from 'react'
+import React, { useState, useRef, useCallback, useEffect } from 'react'
 import styled from 'styled-components'
 import { FixedIcon, Loader, Title } from '@gnosis.pm/safe-react-components'
 import { useHistory } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+import {
+  INTERFACE_MESSAGES,
+  Transaction,
+  RequestId,
+  LowercaseNetworks,
+  SendTransactionParams,
+} from '@gnosis.pm/safe-apps-sdk'
+
+import {
+  safeEthBalanceSelector,
+  safeParamAddressFromStateSelector,
+  safeNameSelector,
+} from 'src/logic/safe/store/selectors'
+import { grantedSelector } from 'src/routes/safe/container/selector'
+import { getNetworkName } from 'src/config'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
+import { isSameURL } from 'src/utils/url'
+
+import ConfirmTransactionModal from '../components/ConfirmTransactionModal'
+import { useIframeMessageHandler } from '../hooks/useIframeMessageHandler'
 import { useLegalConsent } from '../hooks/useLegalConsent'
 import LegalDisclaimer from './LegalDisclaimer'
+import { getAppInfoFromUrl } from '../utils'
+import { SafeApp } from '../types.d'
 
 const StyledIframe = styled.iframe`
   padding: 15px;
@@ -34,33 +56,119 @@ const Centered = styled.div`
   justify-content: center;
   flex-direction: column;
 `
+type ConfirmTransactionModalState = {
+  isOpen: boolean
+  txs: Transaction[]
+  requestId?: RequestId
+  params?: SendTransactionParams
+}
 
-type AppFrameProps = {
+type Props = {
   appUrl: string
-  safeAddress: string
-  network: string
-  granted: boolean
-  appIsLoading: boolean
-  onIframeLoad: () => void
 }
 
-const AppFrame = forwardRef<HTMLIFrameElement, AppFrameProps>(function AppFrameComponent(
-  { appUrl, safeAddress, network, appIsLoading, granted, onIframeLoad },
-  iframeRef,
-): React.ReactElement {
+const NETWORK_NAME = getNetworkName()
+
+const INITIAL_CONFIRM_TX_MODAL_STATE: ConfirmTransactionModalState = {
+  isOpen: false,
+  txs: [],
+  requestId: undefined,
+  params: undefined,
+}
+
+const AppFrame = ({ appUrl }: Props): React.ReactElement => {
+  const granted = useSelector(grantedSelector)
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
+  const ethBalance = useSelector(safeEthBalanceSelector)
+  const safeName = useSelector(safeNameSelector)
+
   const history = useHistory()
   const { consentReceived, onConsentReceipt } = useLegalConsent()
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+
+  const [confirmTransactionModal, setConfirmTransactionModal] = useState<ConfirmTransactionModalState>(
+    INITIAL_CONFIRM_TX_MODAL_STATE,
+  )
+  const [appIsLoading, setAppIsLoading] = useState<boolean>(true)
+  const [selectedApp, setSelectedApp] = useState<SafeApp | undefined>()
+
   const redirectToBalance = () => history.push(`${SAFELIST_ADDRESS}/${safeAddress}/balances`)
 
+  const openConfirmationModal = useCallback(
+    (txs: Transaction[], params: SendTransactionParams | undefined, requestId: RequestId) =>
+      setConfirmTransactionModal({
+        isOpen: true,
+        txs,
+        requestId,
+        params,
+      }),
+    [setConfirmTransactionModal],
+  )
+  const closeConfirmationModal = useCallback(() => setConfirmTransactionModal(INITIAL_CONFIRM_TX_MODAL_STATE), [
+    setConfirmTransactionModal,
+  ])
+
+  const { sendMessageToIframe } = useIframeMessageHandler(
+    selectedApp,
+    openConfirmationModal,
+    closeConfirmationModal,
+    iframeRef,
+  )
+
+  const onIframeLoad = useCallback(() => {
+    const iframe = iframeRef.current
+    if (!iframe || !isSameURL(iframe.src, appUrl as string)) {
+      return
+    }
+
+    setAppIsLoading(false)
+    sendMessageToIframe({
+      messageId: INTERFACE_MESSAGES.ON_SAFE_INFO,
+      data: {
+        safeAddress: safeAddress as string,
+        network: NETWORK_NAME.toLowerCase() as LowercaseNetworks,
+        ethBalance: ethBalance as string,
+      },
+    })
+  }, [ethBalance, safeAddress, appUrl, sendMessageToIframe])
+
+  const onUserTxConfirm = (safeTxHash: string) => {
+    sendMessageToIframe(
+      { messageId: INTERFACE_MESSAGES.TRANSACTION_CONFIRMED, data: { safeTxHash } },
+      confirmTransactionModal.requestId,
+    )
+  }
+
+  const onTxReject = () => {
+    sendMessageToIframe(
+      { messageId: INTERFACE_MESSAGES.TRANSACTION_REJECTED, data: {} },
+      confirmTransactionModal.requestId,
+    )
+  }
+
+  useEffect(() => {
+    const loadApp = async () => {
+      const app = await getAppInfoFromUrl(appUrl)
+      setSelectedApp(app)
+    }
+
+    loadApp()
+  }, [appUrl])
+
+  // TODO check if URL
   if (!appUrl) {
-    return <div />
+    throw Error('App url No provided or it is invalid.')
+  }
+
+  if (!selectedApp) {
+    return <div>Loading...</div>
   }
 
   if (!consentReceived) {
     return <LegalDisclaimer onCancel={redirectToBalance} onConfirm={onConsentReceipt} />
   }
 
-  if (network === 'UNKNOWN' || !granted) {
+  if (NETWORK_NAME === 'UNKNOWN' || !granted) {
     return (
       <Centered style={{ height: '476px' }}>
         <FixedIcon type="notOwner" />
@@ -89,8 +197,21 @@ const AppFrame = forwardRef<HTMLIFrameElement, AppFrameProps>(function AppFrameC
           onLoad={onIframeLoad}
         />
       </IframeWrapper>
+
+      <ConfirmTransactionModal
+        isOpen={confirmTransactionModal.isOpen}
+        app={selectedApp as SafeApp}
+        safeAddress={safeAddress}
+        ethBalance={ethBalance as string}
+        safeName={safeName as string}
+        txs={confirmTransactionModal.txs}
+        onClose={closeConfirmationModal}
+        onUserConfirm={onUserTxConfirm}
+        params={confirmTransactionModal.params}
+        onTxReject={onTxReject}
+      />
     </>
   )
-})
+}
 
 export default AppFrame
diff --git a/src/routes/safe/components/Apps/index.tsx b/src/routes/safe/components/Apps/index.tsx
index a04dcecfc3..8d1eadcdef 100644
--- a/src/routes/safe/components/Apps/index.tsx
+++ b/src/routes/safe/components/Apps/index.tsx
@@ -1,34 +1,17 @@
-import React, { useCallback, useEffect, useRef, useState, useMemo } from 'react'
-import {
-  INTERFACE_MESSAGES,
-  Transaction,
-  RequestId,
-  LowercaseNetworks,
-  SendTransactionParams,
-} from '@gnosis.pm/safe-apps-sdk'
-import { Card, IconText, Loader, Menu, Title } from '@gnosis.pm/safe-react-components'
-import { useSelector } from 'react-redux'
+import React, { useMemo } from 'react'
+import { IconText, Loader } from '@gnosis.pm/safe-react-components'
 import styled, { css } from 'styled-components'
+import { useSelector } from 'react-redux'
 
-import ManageApps from './components/ManageApps'
 import AppFrame from './components/AppFrame'
 import { useAppList } from './hooks/useAppList'
-import { SafeApp, SAFE_APP_LOADING_STATUS } from './types.d'
+import { SAFE_APP_LOADING_STATUS } from './types.d'
 
+import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import AppCard from 'src/routes/safe/components/Apps/components/AppCard'
 import AddAppIcon from 'src/routes/safe/components/Apps/assets/addApp.svg'
-import LCL from 'src/components/ListContentLayout'
-import { grantedSelector } from 'src/routes/safe/container/selector'
-import {
-  safeEthBalanceSelector,
-  safeParamAddressFromStateSelector,
-  safeNameSelector,
-} from 'src/logic/safe/store/selectors'
-import { isSameURL } from 'src/utils/url'
-import { useIframeMessageHandler } from './hooks/useIframeMessageHandler'
-import ConfirmTransactionModal from './components/ConfirmTransactionModal'
-import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
-import { getNetworkName } from 'src/config'
+// import { useAnalytics /* SAFE_NAVIGATION_EVENT */ } from 'src/utils/googleAnalytics'
+
 import { useRouteMatch, useHistory, useLocation } from 'react-router-dom'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
 
@@ -57,22 +40,6 @@ const CenteredMT = styled.div`
   margin-top: 16px;
 `
 
-type ConfirmTransactionModalState = {
-  isOpen: boolean
-  txs: Transaction[]
-  requestId?: RequestId
-  params?: SendTransactionParams
-}
-
-const INITIAL_CONFIRM_TX_MODAL_STATE: ConfirmTransactionModalState = {
-  isOpen: false,
-  txs: [],
-  requestId: undefined,
-  params: undefined,
-}
-
-const NETWORK_NAME = getNetworkName()
-
 const useQuery = () => {
   return new URLSearchParams(useLocation().search)
 }
@@ -80,40 +47,15 @@ const useQuery = () => {
 const Apps = (): React.ReactElement => {
   const history = useHistory()
   const matchSafeWithAddress = useRouteMatch<{ safeAddress: string }>({ path: `${SAFELIST_ADDRESS}/:safeAddress` })
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
 
   const query = useQuery()
   const appUrl = query.get('appUrl')
 
-  const { appList, onAppToggle, onAppAdded, onAppRemoved } = useAppList()
-
-  const [appIsLoading, setAppIsLoading] = useState<boolean>(true)
-  const [selectedAppId, setSelectedAppId] = useState<string>()
-  const [confirmTransactionModal, setConfirmTransactionModal] = useState<ConfirmTransactionModalState>(
-    INITIAL_CONFIRM_TX_MODAL_STATE,
-  )
-  const iframeRef = useRef<HTMLIFrameElement>(null)
-
-  const { trackEvent } = useAnalytics()
-  const granted = useSelector(grantedSelector)
-  const safeAddress = useSelector(safeParamAddressFromStateSelector)
-  const safeName = useSelector(safeNameSelector)
-  const ethBalance = useSelector(safeEthBalanceSelector)
+  const { appList /* onAppAdded, onAppRemoved */ } = useAppList()
 
-  const openConfirmationModal = useCallback(
-    (txs: Transaction[], params: SendTransactionParams | undefined, requestId: RequestId) =>
-      setConfirmTransactionModal({
-        isOpen: true,
-        txs,
-        requestId,
-        params,
-      }),
-    [setConfirmTransactionModal],
-  )
-  const closeConfirmationModal = useCallback(() => setConfirmTransactionModal(INITIAL_CONFIRM_TX_MODAL_STATE), [
-    setConfirmTransactionModal,
-  ])
+  // const { trackEvent } = useAnalytics()
 
-  const selectedApp = useMemo(() => appList.find((app) => app.id === selectedAppId), [appList, selectedAppId])
   const apps = useMemo(() => {
     const areAppsLoading = appList.some((app) =>
       [SAFE_APP_LOADING_STATUS.ADDED, SAFE_APP_LOADING_STATUS.LOADING].includes(app.loadingStatus),
@@ -123,87 +65,13 @@ const Apps = (): React.ReactElement => {
       ? appList.map((app) => ({ ...app, name: 'Loading', iconUrl: loaderDotsSvg }))
       : appList.map((app) => ({ ...app, id: app.url }))
   }, [appList])
-  const { sendMessageToIframe } = useIframeMessageHandler(
-    selectedApp,
-    openConfirmationModal,
-    closeConfirmationModal,
-    iframeRef,
-  )
-
-  const onUserTxConfirm = (safeTxHash: string) => {
-    sendMessageToIframe(
-      { messageId: INTERFACE_MESSAGES.TRANSACTION_CONFIRMED, data: { safeTxHash } },
-      confirmTransactionModal.requestId,
-    )
-  }
-
-  const onTxReject = () => {
-    sendMessageToIframe(
-      { messageId: INTERFACE_MESSAGES.TRANSACTION_REJECTED, data: {} },
-      confirmTransactionModal.requestId,
-    )
-  }
-
-  const onSelectApp = useCallback(
-    (appUrl) => {
-      if (selectedAppId === appUrl) {
-        return
-      }
-      const goToApp = `${matchSafeWithAddress?.url}/apps?appUrl=${encodeURI(appUrl)}`
-      history.push(goToApp)
-
-      //setAppIsLoading(true)
-      //setSelectedAppId(appId)
-    },
-    [selectedAppId, history, matchSafeWithAddress],
-  )
-
-  // Auto Select app first App
-  useEffect(() => {
-    const selectFirstEnabledApp = () => {
-      const areAppsLoading = appList.some((a) =>
-        [SAFE_APP_LOADING_STATUS.LOADING, SAFE_APP_LOADING_STATUS.ADDED].includes(a.loadingStatus),
-      )
-      if (areAppsLoading) {
-        return
-      }
-
-      const firstEnabledApp = appList.find((a) => !a.disabled)
-      if (firstEnabledApp && firstEnabledApp.loadingStatus === SAFE_APP_LOADING_STATUS.SUCCESS) {
-        setSelectedAppId(firstEnabledApp.url)
-      }
-    }
-
-    const initialSelect = appList.length && !selectedAppId
-    const currentAppWasDisabled = selectedApp?.disabled
-    if (initialSelect || currentAppWasDisabled) {
-      selectFirstEnabledApp()
-    }
-  }, [appList, selectedApp, selectedAppId, trackEvent])
 
   // track GA
-  useEffect(() => {
-    if (selectedApp) {
-      trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Apps', label: selectedApp.name })
-    }
-  }, [selectedApp, trackEvent])
-
-  const handleIframeLoad = useCallback(() => {
-    const iframe = iframeRef.current
-    if (!iframe || !isSameURL(iframe.src, appUrl as string)) {
-      return
-    }
-
-    setAppIsLoading(false)
-    sendMessageToIframe({
-      messageId: INTERFACE_MESSAGES.ON_SAFE_INFO,
-      data: {
-        safeAddress: safeAddress as string,
-        network: NETWORK_NAME.toLowerCase() as LowercaseNetworks,
-        ethBalance: ethBalance as string,
-      },
-    })
-  }, [ethBalance, safeAddress, appUrl, sendMessageToIframe])
+  // useEffect(() => {
+  //   if (selectedApp) {
+  //     trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Apps', label: selectedApp.name })
+  //   }
+  // }, [selectedApp, trackEvent])
 
   if (!appList.length || !safeAddress) {
     return (
@@ -214,30 +82,25 @@ const Apps = (): React.ReactElement => {
   }
 
   if (appUrl) {
-    return (
-      <AppFrame
-        ref={iframeRef}
-        granted={granted}
-        appUrl={appUrl}
-        safeAddress={safeAddress}
-        network={NETWORK_NAME}
-        appIsLoading={appIsLoading}
-        onIframeLoad={handleIframeLoad}
-      />
-    )
+    return <AppFrame appUrl={appUrl} />
   }
 
   return (
     <>
-      {/* <Menu>
-        <ManageApps appList={appList} onAppAdded={onAppAdded} onAppToggle={onAppToggle} onAppRemoved={onAppRemoved} />
-      </Menu> */}
-
       <CardsWrapper>
         <AppCard iconUrl={AddAppIcon} onButtonClick={console.log} buttonText="Add custom app" />
 
         {apps.map((a) => (
-          <AppCard key={a.url} iconUrl={a.iconUrl} name={a.name} description={a.description} />
+          <AppCard
+            key={a.url}
+            iconUrl={a.iconUrl}
+            name={a.name}
+            description={a.description}
+            onCardClick={() => {
+              const goToApp = `${matchSafeWithAddress?.url}/apps?appUrl=${encodeURI(a.url)}`
+              history.push(goToApp)
+            }}
+          />
         ))}
       </CardsWrapper>
 
@@ -250,18 +113,6 @@ const Apps = (): React.ReactElement => {
           textSize="sm"
         />
       </CenteredMT>
-      {/* <ConfirmTransactionModal
-        isOpen={confirmTransactionModal.isOpen}
-        app={selectedApp as SafeApp}
-        safeAddress={safeAddress}
-        ethBalance={ethBalance as string}
-        safeName={safeName as string}
-        txs={confirmTransactionModal.txs}
-        onClose={closeConfirmationModal}
-        onUserConfirm={onUserTxConfirm}
-        params={confirmTransactionModal.params}
-        onTxReject={onTxReject}
-      /> */}
     </>
   )
 }

From 1220f6c99859586854e41ad4c8292cee28da350d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 11 Nov 2020 16:00:26 -0300
Subject: [PATCH 08/39] add basic skeleton styles

---
 .../Apps/components/AppCard/index.tsx         | 32 +++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AppCard/index.tsx b/src/routes/safe/components/Apps/components/AppCard/index.tsx
index dbd62d9024..5837700b24 100644
--- a/src/routes/safe/components/Apps/components/AppCard/index.tsx
+++ b/src/routes/safe/components/Apps/components/AppCard/index.tsx
@@ -28,7 +28,26 @@ const StyledApps = styled.div`
     }
   }
 `
-
+const Skeleton = styled.div``
+const AppIconSK = styled.div`
+  height: 60px;
+  width: 60px;
+  border-radius: 30px;
+  margin: 0 auto;
+  background-color: lightgrey;
+`
+const TitleSK = styled.div`
+  height: 24px;
+  width: 160px;
+  margin: 24px auto;
+  background-color: lightgrey;
+`
+const DescriptionSK = styled.div`
+  height: 16px;
+  width: 200px;
+  margin: 8px auto;
+  background-color: lightgrey;
+`
 const IconImg = styled.img`
   width: 92px;
 `
@@ -58,7 +77,16 @@ const Apps = ({
   onButtonClick,
 }: Props): React.ReactElement => {
   if (isLoading) {
-    return <div>skeleton</div>
+    return (
+      <StyledApps className={className}>
+        <Skeleton>
+          <AppIconSK />
+          <TitleSK />
+          <DescriptionSK />
+          <DescriptionSK />
+        </Skeleton>
+      </StyledApps>
+    )
   }
 
   return (

From 1fbb740c5563791981725f8e926c77dc91cc0f34 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 11 Nov 2020 17:28:15 -0300
Subject: [PATCH 09/39] css fixes

---
 .../components/Apps/components/AppFrame.tsx   | 20 +++++++++++++++----
 src/routes/safe/components/Apps/index.tsx     | 11 ++++++++--
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AppFrame.tsx b/src/routes/safe/components/Apps/components/AppFrame.tsx
index deb63216aa..0ab3dd8612 100644
--- a/src/routes/safe/components/Apps/components/AppFrame.tsx
+++ b/src/routes/safe/components/Apps/components/AppFrame.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react'
 import styled from 'styled-components'
-import { FixedIcon, Loader, Title } from '@gnosis.pm/safe-react-components'
+import { FixedIcon, Loader, Title, Card } from '@gnosis.pm/safe-react-components'
 import { useHistory } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import {
@@ -56,6 +56,14 @@ const Centered = styled.div`
   justify-content: center;
   flex-direction: column;
 `
+
+const ContentWrapper = styled(Card)`
+  height: calc(100% - 73px);
+  width: calc(100% - 50px);
+  margin: 20px 0;
+  overflow: auto;
+`
+
 type ConfirmTransactionModalState = {
   isOpen: boolean
   txs: Transaction[]
@@ -161,7 +169,11 @@ const AppFrame = ({ appUrl }: Props): React.ReactElement => {
   }
 
   if (!selectedApp) {
-    return <div>Loading...</div>
+    return (
+      <LoadingContainer>
+        <Loader size="md" />
+      </LoadingContainer>
+    )
   }
 
   if (!consentReceived) {
@@ -178,7 +190,7 @@ const AppFrame = ({ appUrl }: Props): React.ReactElement => {
   }
 
   return (
-    <>
+    <ContentWrapper>
       {/* <Menu>
         <ManageApps appList={appList} onAppAdded={onAppAdded} onAppToggle={onAppToggle} onAppRemoved={onAppRemoved} />
       </Menu> */}
@@ -210,7 +222,7 @@ const AppFrame = ({ appUrl }: Props): React.ReactElement => {
         params={confirmTransactionModal.params}
         onTxReject={onTxReject}
       />
-    </>
+    </ContentWrapper>
   )
 }
 
diff --git a/src/routes/safe/components/Apps/index.tsx b/src/routes/safe/components/Apps/index.tsx
index 8d1eadcdef..a25ea50994 100644
--- a/src/routes/safe/components/Apps/index.tsx
+++ b/src/routes/safe/components/Apps/index.tsx
@@ -40,6 +40,13 @@ const CenteredMT = styled.div`
   margin-top: 16px;
 `
 
+const ContentWrapper = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`
+
 const useQuery = () => {
   return new URLSearchParams(useLocation().search)
 }
@@ -86,7 +93,7 @@ const Apps = (): React.ReactElement => {
   }
 
   return (
-    <>
+    <ContentWrapper>
       <CardsWrapper>
         <AppCard iconUrl={AddAppIcon} onButtonClick={console.log} buttonText="Add custom app" />
 
@@ -113,7 +120,7 @@ const Apps = (): React.ReactElement => {
           textSize="sm"
         />
       </CenteredMT>
-    </>
+    </ContentWrapper>
   )
 }
 

From fc2d00a4764bb186185b0ff082b5cec773ffa5e1 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 11 Nov 2020 17:43:47 -0300
Subject: [PATCH 10/39] fix image sizes

---
 .../safe/components/Apps/components/AppCard/index.tsx  | 10 +++++++---
 src/routes/safe/components/Apps/index.tsx              |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AppCard/index.tsx b/src/routes/safe/components/Apps/components/AppCard/index.tsx
index e18b0366f3..8fccdf055b 100644
--- a/src/routes/safe/components/Apps/components/AppCard/index.tsx
+++ b/src/routes/safe/components/Apps/components/AppCard/index.tsx
@@ -29,8 +29,10 @@ const StyledApps = styled.div`
   }
 `
 
-const IconImg = styled.img`
-  width: 92px;
+const IconImg = styled.img<{ size: 'md' | 'lg' }>`
+  width: ${({ size }) => (size === 'md' ? '48px' : '102px')};
+  height: ${({ size }) => (size === 'md' ? '60px' : '92px')};
+  object-fit: contain;
 `
 
 type Props = {
@@ -39,6 +41,7 @@ type Props = {
   name?: string
   description?: string
   iconUrl?: string
+  iconSize?: 'md' | 'lg'
   buttonText?: string
   onButtonClick?: () => void
   onCardClick?: () => void
@@ -55,6 +58,7 @@ const Apps = ({
   name,
   description,
   iconUrl,
+  iconSize = 'md',
   buttonText,
   onButtonClick,
   onCardClick,
@@ -65,7 +69,7 @@ const Apps = ({
 
   return (
     <StyledApps className={className} onClick={onButtonClick ? () => undefined : onCardClick}>
-      <IconImg alt={`${name || 'App'} Logo`} src={iconUrl} onError={setAppImageFallback} />
+      <IconImg alt={`${name || 'App'} Logo`} src={iconUrl} onError={setAppImageFallback} size={iconSize} />
 
       {name && <Title size="sm">{name}</Title>}
       {description && <Text size="lg">{description} </Text>}
diff --git a/src/routes/safe/components/Apps/index.tsx b/src/routes/safe/components/Apps/index.tsx
index a25ea50994..b83116f198 100644
--- a/src/routes/safe/components/Apps/index.tsx
+++ b/src/routes/safe/components/Apps/index.tsx
@@ -95,7 +95,7 @@ const Apps = (): React.ReactElement => {
   return (
     <ContentWrapper>
       <CardsWrapper>
-        <AppCard iconUrl={AddAppIcon} onButtonClick={console.log} buttonText="Add custom app" />
+        <AppCard iconUrl={AddAppIcon} onButtonClick={console.log} buttonText="Add custom app" iconSize="lg" />
 
         {apps.map((a) => (
           <AppCard

From da31053689628c408fab9a3df6fa303b7aeff858 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Thu, 12 Nov 2020 11:21:38 -0300
Subject: [PATCH 11/39] add transition animation to skeleton

---
 .../Apps/components/AppCard/index.tsx         | 169 +++++++++++++++++-
 1 file changed, 160 insertions(+), 9 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AppCard/index.tsx b/src/routes/safe/components/Apps/components/AppCard/index.tsx
index 73373a3abc..716fafb1e5 100644
--- a/src/routes/safe/components/Apps/components/AppCard/index.tsx
+++ b/src/routes/safe/components/Apps/components/AppCard/index.tsx
@@ -35,26 +35,179 @@ const IconImg = styled.img<{ size: 'md' | 'lg' }>`
   object-fit: contain;
 `
 
-const Skeleton = styled.div``
-
 const AppIconSK = styled.div`
   height: 60px;
   width: 60px;
   border-radius: 30px;
   margin: 0 auto;
   background-color: lightgrey;
+  background: linear-gradient(84deg, lightgrey, transparent);
+  background-size: 400% 400%;
+
+  -webkit-animation: gradient-SK 1.5s ease infinite;
+  -moz-animation: gradient-SK 1.5s ease infinite;
+  -o-animation: gradient-SK 1.5s ease infinite;
+  animation: gradient-SK 1.5s ease infinite;
+
+  @-webkit-keyframes gradient-SK {
+    0% {
+      background-position: 0% 54%;
+    }
+    50% {
+      background-position: 100% 47%;
+    }
+    100% {
+      background-position: 0% 54%;
+    }
+  }
+  @-moz-keyframes gradient-SK {
+    0% {
+      background-position: 0% 54%;
+    }
+    50% {
+      background-position: 100% 47%;
+    }
+    100% {
+      background-position: 0% 54%;
+    }
+  }
+  @-o-keyframes gradient-SK {
+    0% {
+      background-position: 0% 54%;
+    }
+    50% {
+      background-position: 100% 47%;
+    }
+    100% {
+      background-position: 0% 54%;
+    }
+  }
+  @keyframes gradient-SK {
+    0% {
+      background-position: 0% 54%;
+    }
+    50% {
+      background-position: 100% 47%;
+    }
+    100% {
+      background-position: 0% 54%;
+    }
+  }
 `
 const TitleSK = styled.div`
   height: 24px;
   width: 160px;
   margin: 24px auto;
   background-color: lightgrey;
+  background: linear-gradient(84deg, lightgrey, transparent);
+  background-size: 400% 400%;
+
+  -webkit-animation: gradient-SK 1.5s ease infinite;
+  -moz-animation: gradient-SK 1.5s ease infinite;
+  -o-animation: gradient-SK 1.5s ease infinite;
+  animation: gradient-SK 1.5s ease infinite;
+
+  @-webkit-keyframes gradient-SK {
+    0% {
+      background-position: 0% 54%;
+    }
+    50% {
+      background-position: 100% 47%;
+    }
+    100% {
+      background-position: 0% 54%;
+    }
+  }
+  @-moz-keyframes gradient-SK {
+    0% {
+      background-position: 0% 54%;
+    }
+    50% {
+      background-position: 100% 47%;
+    }
+    100% {
+      background-position: 0% 54%;
+    }
+  }
+  @-o-keyframes gradient-SK {
+    0% {
+      background-position: 0% 54%;
+    }
+    50% {
+      background-position: 100% 47%;
+    }
+    100% {
+      background-position: 0% 54%;
+    }
+  }
+  @keyframes gradient-SK {
+    0% {
+      background-position: 0% 54%;
+    }
+    50% {
+      background-position: 100% 47%;
+    }
+    100% {
+      background-position: 0% 54%;
+    }
+  }
 `
 const DescriptionSK = styled.div`
   height: 16px;
   width: 200px;
-  margin: 8px auto;
   background-color: lightgrey;
+  background: linear-gradient(84deg, lightgrey, transparent);
+  background-size: 400% 400%;
+
+  -webkit-animation: gradient-SK 1.5s ease infinite;
+  -moz-animation: gradient-SK 1.5s ease infinite;
+  -o-animation: gradient-SK 1.5s ease infinite;
+  animation: gradient-SK 1.5s ease infinite;
+
+  @-webkit-keyframes gradient-SK {
+    0% {
+      background-position: 0% 54%;
+    }
+    50% {
+      background-position: 100% 47%;
+    }
+    100% {
+      background-position: 0% 54%;
+    }
+  }
+  @-moz-keyframes gradient-SK {
+    0% {
+      background-position: 0% 54%;
+    }
+    50% {
+      background-position: 100% 47%;
+    }
+    100% {
+      background-position: 0% 54%;
+    }
+  }
+  @-o-keyframes gradient-SK {
+    0% {
+      background-position: 0% 54%;
+    }
+    50% {
+      background-position: 100% 47%;
+    }
+    100% {
+      background-position: 0% 54%;
+    }
+  }
+  @keyframes gradient-SK {
+    0% {
+      background-position: 0% 54%;
+    }
+    50% {
+      background-position: 100% 47%;
+    }
+    100% {
+      background-position: 0% 54%;
+    }
+  }
 `
 
 type Props = {
@@ -88,12 +241,10 @@ const Apps = ({
   if (isLoading) {
     return (
       <StyledApps className={className}>
-        <Skeleton>
-          <AppIconSK />
-          <TitleSK />
-          <DescriptionSK />
-          <DescriptionSK />
-        </Skeleton>
+        <AppIconSK />
+        <TitleSK />
+        <DescriptionSK />
+        <DescriptionSK />
       </StyledApps>
     )
   }

From 1562e108394dd995b18336ff259e898acab9cffb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Thu, 12 Nov 2020 11:23:29 -0300
Subject: [PATCH 12/39] remove duplicated code

---
 .../Apps/components/AppCard/index.tsx         | 90 -------------------
 1 file changed, 90 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AppCard/index.tsx b/src/routes/safe/components/Apps/components/AppCard/index.tsx
index 716fafb1e5..67e2f6c084 100644
--- a/src/routes/safe/components/Apps/components/AppCard/index.tsx
+++ b/src/routes/safe/components/Apps/components/AppCard/index.tsx
@@ -106,51 +106,6 @@ const TitleSK = styled.div`
   -moz-animation: gradient-SK 1.5s ease infinite;
   -o-animation: gradient-SK 1.5s ease infinite;
   animation: gradient-SK 1.5s ease infinite;
-
-  @-webkit-keyframes gradient-SK {
-    0% {
-      background-position: 0% 54%;
-    }
-    50% {
-      background-position: 100% 47%;
-    }
-    100% {
-      background-position: 0% 54%;
-    }
-  }
-  @-moz-keyframes gradient-SK {
-    0% {
-      background-position: 0% 54%;
-    }
-    50% {
-      background-position: 100% 47%;
-    }
-    100% {
-      background-position: 0% 54%;
-    }
-  }
-  @-o-keyframes gradient-SK {
-    0% {
-      background-position: 0% 54%;
-    }
-    50% {
-      background-position: 100% 47%;
-    }
-    100% {
-      background-position: 0% 54%;
-    }
-  }
-  @keyframes gradient-SK {
-    0% {
-      background-position: 0% 54%;
-    }
-    50% {
-      background-position: 100% 47%;
-    }
-    100% {
-      background-position: 0% 54%;
-    }
-  }
 `
 const DescriptionSK = styled.div`
   height: 16px;
@@ -163,51 +118,6 @@ const DescriptionSK = styled.div`
   -moz-animation: gradient-SK 1.5s ease infinite;
   -o-animation: gradient-SK 1.5s ease infinite;
   animation: gradient-SK 1.5s ease infinite;
-
-  @-webkit-keyframes gradient-SK {
-    0% {
-      background-position: 0% 54%;
-    }
-    50% {
-      background-position: 100% 47%;
-    }
-    100% {
-      background-position: 0% 54%;
-    }
-  }
-  @-moz-keyframes gradient-SK {
-    0% {
-      background-position: 0% 54%;
-    }
-    50% {
-      background-position: 100% 47%;
-    }
-    100% {
-      background-position: 0% 54%;
-    }
-  }
-  @-o-keyframes gradient-SK {
-    0% {
-      background-position: 0% 54%;
-    }
-    50% {
-      background-position: 100% 47%;
-    }
-    100% {
-      background-position: 0% 54%;
-    }
-  }
-  @keyframes gradient-SK {
-    0% {
-      background-position: 0% 54%;
-    }
-    50% {
-      background-position: 100% 47%;
-    }
-    100% {
-      background-position: 0% 54%;
-    }
-  }
 `
 
 type Props = {

From 164d7ce47f690baf5eb4422f0eefa5e82f469806 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Thu, 12 Nov 2020 17:40:26 -0300
Subject: [PATCH 13/39] Modals

---
 .../Apps/AddAppForm/SubmitButtonStatus.tsx    |  27 ----
 .../AddAppForm/AppAgreement.tsx               |   0
 .../{ => components}/AddAppForm/AppUrl.tsx    |   0
 .../AddAppForm/SubmitButtonStatus.tsx         |  51 ++++++
 .../{ => components}/AddAppForm/index.tsx     |  46 +++---
 .../Apps/components/AppCard/index.tsx         |  16 +-
 .../components/Apps/components/AppFrame.tsx   | 150 +++++++++++++-----
 .../components/Apps/components/AppsList.tsx   | 125 +++++++++++++++
 .../components/Apps/components/ManageApps.tsx |  75 ---------
 .../safe/components/Apps/hooks/useAppList.ts  |  77 +--------
 src/routes/safe/components/Apps/index.tsx     | 114 +------------
 src/routes/safe/components/Apps/types.d.ts    |   2 -
 src/routes/safe/components/Apps/utils.ts      |  11 +-
 src/routes/safe/container/index.tsx           |  32 ++--
 14 files changed, 350 insertions(+), 376 deletions(-)
 delete mode 100644 src/routes/safe/components/Apps/AddAppForm/SubmitButtonStatus.tsx
 rename src/routes/safe/components/Apps/{ => components}/AddAppForm/AppAgreement.tsx (100%)
 rename src/routes/safe/components/Apps/{ => components}/AddAppForm/AppUrl.tsx (100%)
 create mode 100644 src/routes/safe/components/Apps/components/AddAppForm/SubmitButtonStatus.tsx
 rename src/routes/safe/components/Apps/{ => components}/AddAppForm/index.tsx (56%)
 create mode 100644 src/routes/safe/components/Apps/components/AppsList.tsx
 delete mode 100644 src/routes/safe/components/Apps/components/ManageApps.tsx

diff --git a/src/routes/safe/components/Apps/AddAppForm/SubmitButtonStatus.tsx b/src/routes/safe/components/Apps/AddAppForm/SubmitButtonStatus.tsx
deleted file mode 100644
index b79a888fcf..0000000000
--- a/src/routes/safe/components/Apps/AddAppForm/SubmitButtonStatus.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react'
-import { useFormState } from 'react-final-form'
-
-import { SafeApp } from 'src/routes/safe/components/Apps/types.d'
-import { isAppManifestValid } from 'src/routes/safe/components/Apps/utils'
-
-interface SubmitButtonStatusProps {
-  appInfo: SafeApp
-  onSubmitButtonStatusChange: (disabled: boolean) => void
-}
-
-const SubmitButtonStatus = ({ appInfo, onSubmitButtonStatusChange }: SubmitButtonStatusProps): null => {
-  const { valid, validating, visited } = useFormState({
-    subscription: { valid: true, validating: true, visited: true },
-  })
-
-  React.useEffect(() => {
-    // if non visited, fields were not evaluated yet. Then, the default value is considered invalid
-    const fieldsVisited = visited?.agreementAccepted && visited.appUrl
-
-    onSubmitButtonStatusChange(validating || !valid || !fieldsVisited || !isAppManifestValid(appInfo))
-  }, [validating, valid, visited, onSubmitButtonStatusChange, appInfo])
-
-  return null
-}
-
-export default SubmitButtonStatus
diff --git a/src/routes/safe/components/Apps/AddAppForm/AppAgreement.tsx b/src/routes/safe/components/Apps/components/AddAppForm/AppAgreement.tsx
similarity index 100%
rename from src/routes/safe/components/Apps/AddAppForm/AppAgreement.tsx
rename to src/routes/safe/components/Apps/components/AddAppForm/AppAgreement.tsx
diff --git a/src/routes/safe/components/Apps/AddAppForm/AppUrl.tsx b/src/routes/safe/components/Apps/components/AddAppForm/AppUrl.tsx
similarity index 100%
rename from src/routes/safe/components/Apps/AddAppForm/AppUrl.tsx
rename to src/routes/safe/components/Apps/components/AddAppForm/AppUrl.tsx
diff --git a/src/routes/safe/components/Apps/components/AddAppForm/SubmitButtonStatus.tsx b/src/routes/safe/components/Apps/components/AddAppForm/SubmitButtonStatus.tsx
new file mode 100644
index 0000000000..b0248076c4
--- /dev/null
+++ b/src/routes/safe/components/Apps/components/AddAppForm/SubmitButtonStatus.tsx
@@ -0,0 +1,51 @@
+import { Button, Divider } from '@gnosis.pm/safe-react-components'
+import React, { ReactElement, useMemo } from 'react'
+import { useFormState } from 'react-final-form'
+import styled from 'styled-components'
+
+import GnoButton from 'src/components/layout/Button'
+import { SafeApp } from 'src/routes/safe/components/Apps/types.d'
+import { isAppManifestValid } from 'src/routes/safe/components/Apps/utils'
+
+const StyledDivider = styled(Divider)`
+  margin: 16px -24px;
+`
+
+const ButtonsContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+`
+
+interface SubmitButtonStatusProps {
+  appInfo: SafeApp
+  onCancel: () => void
+}
+
+const SubmitButtonStatus = ({ appInfo, onCancel }: SubmitButtonStatusProps): ReactElement => {
+  const { valid, validating, visited } = useFormState({
+    subscription: { valid: true, validating: true, visited: true },
+  })
+
+  const isSubmitDisabled = useMemo(() => {
+    // if non visited, fields were not evaluated yet. Then, the default value is considered invalid
+    const fieldsVisited = visited?.agreementAccepted && visited.appUrl
+
+    return validating || !valid || !fieldsVisited || !isAppManifestValid(appInfo)
+  }, [validating, valid, visited, appInfo])
+
+  return (
+    <>
+      <StyledDivider />
+      <ButtonsContainer>
+        <Button size="md" onClick={onCancel} color="secondary">
+          Cancel
+        </Button>
+        <GnoButton color="primary" variant="contained" type="submit" disabled={isSubmitDisabled}>
+          Add
+        </GnoButton>
+      </ButtonsContainer>
+    </>
+  )
+}
+
+export default SubmitButtonStatus
diff --git a/src/routes/safe/components/Apps/AddAppForm/index.tsx b/src/routes/safe/components/Apps/components/AddAppForm/index.tsx
similarity index 56%
rename from src/routes/safe/components/Apps/AddAppForm/index.tsx
rename to src/routes/safe/components/Apps/components/AddAppForm/index.tsx
index f3451b1c8c..8483cacc35 100644
--- a/src/routes/safe/components/Apps/AddAppForm/index.tsx
+++ b/src/routes/safe/components/Apps/components/AddAppForm/index.tsx
@@ -1,19 +1,20 @@
-import { Text, TextField } from '@gnosis.pm/safe-react-components'
-import React from 'react'
+import { TextField } from '@gnosis.pm/safe-react-components'
+import React, { useState, ReactElement } from 'react'
 import styled from 'styled-components'
 
-import AppAgreement from './AppAgreement'
-import AppUrl, { AppInfoUpdater, appUrlResolver } from './AppUrl'
-import SubmitButtonStatus from './SubmitButtonStatus'
-
 import { SafeApp } from 'src/routes/safe/components/Apps/types.d'
 import GnoForm from 'src/components/forms/GnoForm'
 import Img from 'src/components/layout/Img'
-import { getEmptySafeApp } from '../utils'
 
-const StyledText = styled(Text)`
-  margin-bottom: 19px;
-`
+import AppAgreement from './AppAgreement'
+import AppUrl, { AppInfoUpdater, appUrlResolver } from './AppUrl'
+import SubmitButtonStatus from './SubmitButtonStatus'
+import { APPS_STORAGE_KEY, getEmptySafeApp } from '../../utils'
+import { saveToStorage } from 'src/utils/storage'
+import { SAFELIST_ADDRESS } from 'src/routes/routes'
+import { useHistory, useRouteMatch } from 'react-router-dom'
+
+const FORM_ID = 'add-apps-form'
 
 const StyledTextFileAppName = styled(TextField)`
   && {
@@ -44,26 +45,29 @@ const APP_INFO = getEmptySafeApp()
 interface AddAppProps {
   appList: SafeApp[]
   closeModal: () => void
-  formId: string
-  onAppAdded: (app: SafeApp) => void
-  setIsSubmitDisabled: (disabled: boolean) => void
 }
 
-const AddApp = ({ appList, closeModal, formId, onAppAdded, setIsSubmitDisabled }: AddAppProps): React.ReactElement => {
-  const [appInfo, setAppInfo] = React.useState<SafeApp>(APP_INFO)
+const AddApp = ({ appList, closeModal }: AddAppProps): ReactElement => {
+  const [appInfo, setAppInfo] = useState<SafeApp>(APP_INFO)
+  const history = useHistory()
+  const matchSafeWithAddress = useRouteMatch<{ safeAddress: string }>({ path: `${SAFELIST_ADDRESS}/:safeAddress` })
 
   const handleSubmit = () => {
-    closeModal()
-    onAppAdded(appInfo)
+    const newAppList = [
+      { url: appInfo.url, disabled: false },
+      ...appList.map(({ url, disabled }) => ({ url, disabled })),
+    ]
+    saveToStorage(APPS_STORAGE_KEY, newAppList)
+    const goToApp = `${matchSafeWithAddress?.url}/apps?appUrl=${encodeURI(appInfo.url)}`
+    history.push(goToApp)
   }
 
   return (
-    <GnoForm decorators={[appUrlResolver]} initialValues={INITIAL_VALUES} onSubmit={handleSubmit} testId={formId}>
+    <GnoForm decorators={[appUrlResolver]} initialValues={INITIAL_VALUES} onSubmit={handleSubmit} testId={FORM_ID}>
       {() => (
         <>
-          <StyledText size="xl">Add custom app</StyledText>
-
           <AppUrl appList={appList} />
+
           {/* Fetch app from url and return a SafeApp */}
           <AppInfoUpdater onAppInfo={setAppInfo} />
 
@@ -74,7 +78,7 @@ const AddApp = ({ appList, closeModal, formId, onAppAdded, setIsSubmitDisabled }
 
           <AppAgreement />
 
-          <SubmitButtonStatus onSubmitButtonStatusChange={setIsSubmitDisabled} appInfo={appInfo} />
+          <SubmitButtonStatus appInfo={appInfo} onCancel={closeModal} />
         </>
       )}
     </GnoForm>
diff --git a/src/routes/safe/components/Apps/components/AppCard/index.tsx b/src/routes/safe/components/Apps/components/AppCard/index.tsx
index 73373a3abc..631fbdb6d0 100644
--- a/src/routes/safe/components/Apps/components/AppCard/index.tsx
+++ b/src/routes/safe/components/Apps/components/AppCard/index.tsx
@@ -32,7 +32,7 @@ const StyledApps = styled.div`
 const IconImg = styled.img<{ size: 'md' | 'lg' }>`
   width: ${({ size }) => (size === 'md' ? '48px' : '102px')};
   height: ${({ size }) => (size === 'md' ? '60px' : '92px')};
-  object-fit: contain;
+  object-fit: cover;
 `
 
 const Skeleton = styled.div``
@@ -57,6 +57,14 @@ const DescriptionSK = styled.div`
   background-color: lightgrey;
 `
 
+const AppName = styled(Title)`
+  text-align: center;
+`
+
+const AppDescription = styled(Text)`
+  height: 40px;
+`
+
 type Props = {
   isLoading?: boolean
   className?: string
@@ -102,11 +110,11 @@ const Apps = ({
     <StyledApps className={className} onClick={onButtonClick ? () => undefined : onCardClick}>
       <IconImg alt={`${name || 'App'} Logo`} src={iconUrl} onError={setAppImageFallback} size={iconSize} />
 
-      {name && <Title size="sm">{name}</Title>}
-      {description && <Text size="lg">{description} </Text>}
+      {name && <AppName size="sm">{name}</AppName>}
+      {description && <AppDescription size="lg">{description} </AppDescription>}
 
       {onButtonClick && (
-        <Button size="md" color="primary" variant="contained">
+        <Button size="md" color="primary" variant="contained" onClick={onButtonClick}>
           {buttonText}
         </Button>
       )}
diff --git a/src/routes/safe/components/Apps/components/AppFrame.tsx b/src/routes/safe/components/Apps/components/AppFrame.tsx
index 0ab3dd8612..c5a11d372e 100644
--- a/src/routes/safe/components/Apps/components/AppFrame.tsx
+++ b/src/routes/safe/components/Apps/components/AppFrame.tsx
@@ -1,7 +1,17 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react'
 import styled from 'styled-components'
-import { FixedIcon, Loader, Title, Card } from '@gnosis.pm/safe-react-components'
-import { useHistory } from 'react-router-dom'
+import {
+  FixedIcon,
+  Loader,
+  Title,
+  Text,
+  Card,
+  GenericModal,
+  ModalFooterConfirmation,
+  Menu,
+  ButtonLink,
+} from '@gnosis.pm/safe-react-components'
+import { useHistory, useRouteMatch } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import {
   INTERFACE_MESSAGES,
@@ -20,13 +30,16 @@ import { grantedSelector } from 'src/routes/safe/container/selector'
 import { getNetworkName } from 'src/config'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
 import { isSameURL } from 'src/utils/url'
+import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
+import { loadFromStorage, saveToStorage } from 'src/utils/storage'
+import { staticAppsList } from 'src/routes/safe/components/Apps/utils'
 
 import ConfirmTransactionModal from '../components/ConfirmTransactionModal'
 import { useIframeMessageHandler } from '../hooks/useIframeMessageHandler'
 import { useLegalConsent } from '../hooks/useLegalConsent'
 import LegalDisclaimer from './LegalDisclaimer'
-import { getAppInfoFromUrl } from '../utils'
-import { SafeApp } from '../types.d'
+import { APPS_STORAGE_KEY, getAppInfoFromUrl } from '../utils'
+import { SafeApp, StoredSafeApp } from '../types.d'
 
 const StyledIframe = styled.iframe`
   padding: 15px;
@@ -58,7 +71,7 @@ const Centered = styled.div`
 `
 
 const ContentWrapper = styled(Card)`
-  height: calc(100% - 73px);
+  height: calc(100% - 127px);
   width: calc(100% - 50px);
   margin: 20px 0;
   overflow: auto;
@@ -89,16 +102,20 @@ const AppFrame = ({ appUrl }: Props): React.ReactElement => {
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const ethBalance = useSelector(safeEthBalanceSelector)
   const safeName = useSelector(safeNameSelector)
-
+  const { trackEvent } = useAnalytics()
   const history = useHistory()
   const { consentReceived, onConsentReceipt } = useLegalConsent()
-  const iframeRef = useRef<HTMLIFrameElement>(null)
 
+  const matchSafeWithAddress = useRouteMatch<{ safeAddress: string }>({ path: `${SAFELIST_ADDRESS}/:safeAddress` })
+
+  const iframeRef = useRef<HTMLIFrameElement>(null)
   const [confirmTransactionModal, setConfirmTransactionModal] = useState<ConfirmTransactionModalState>(
     INITIAL_CONFIRM_TX_MODAL_STATE,
   )
   const [appIsLoading, setAppIsLoading] = useState<boolean>(true)
-  const [selectedApp, setSelectedApp] = useState<SafeApp | undefined>()
+  const [safeApp, setSafeApp] = useState<SafeApp | undefined>()
+  const [isRemoveModalOpen, setIsRemoveModalOpen] = useState(false)
+  const [isAppDeletable, setIsAppDeletable] = useState<boolean | undefined>()
 
   const redirectToBalance = () => history.push(`${SAFELIST_ADDRESS}/${safeAddress}/balances`)
 
@@ -117,7 +134,7 @@ const AppFrame = ({ appUrl }: Props): React.ReactElement => {
   ])
 
   const { sendMessageToIframe } = useIframeMessageHandler(
-    selectedApp,
+    safeApp,
     openConfirmationModal,
     closeConfirmationModal,
     iframeRef,
@@ -154,21 +171,44 @@ const AppFrame = ({ appUrl }: Props): React.ReactElement => {
     )
   }
 
+  const openRemoveModal = () => setIsRemoveModalOpen(true)
+
+  const closeRemoveModal = () => setIsRemoveModalOpen(false)
+
+  const removeApp = async () => {
+    const persistedAppList = (await loadFromStorage<StoredSafeApp[]>(APPS_STORAGE_KEY)) || []
+    const filteredList = persistedAppList.filter((a) => a.url !== safeApp?.url)
+    saveToStorage(APPS_STORAGE_KEY, filteredList)
+
+    const goToApp = `${matchSafeWithAddress?.url}/apps`
+    history.push(goToApp)
+  }
+
   useEffect(() => {
     const loadApp = async () => {
       const app = await getAppInfoFromUrl(appUrl)
-      setSelectedApp(app)
+
+      const existsStaticApp = staticAppsList.some((staticApp) => staticApp.url === app.url)
+      setIsAppDeletable(!existsStaticApp)
+      setSafeApp(app)
     }
 
     loadApp()
   }, [appUrl])
 
+  //track GA
+  useEffect(() => {
+    if (safeApp) {
+      trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Apps', label: safeApp.name })
+    }
+  }, [safeApp, trackEvent])
+
   // TODO check if URL
   if (!appUrl) {
     throw Error('App url No provided or it is invalid.')
   }
 
-  if (!selectedApp) {
+  if (!safeApp) {
     return (
       <LoadingContainer>
         <Loader size="md" />
@@ -190,39 +230,65 @@ const AppFrame = ({ appUrl }: Props): React.ReactElement => {
   }
 
   return (
-    <ContentWrapper>
-      {/* <Menu>
-        <ManageApps appList={appList} onAppAdded={onAppAdded} onAppToggle={onAppToggle} onAppRemoved={onAppRemoved} />
-      </Menu> */}
-      <IframeWrapper>
-        {appIsLoading && (
-          <LoadingContainer>
-            <Loader size="md" />
-          </LoadingContainer>
+    <>
+      <Menu>
+        {isAppDeletable && (
+          <ButtonLink color="error" iconType="delete" onClick={openRemoveModal}>
+            Remove app
+          </ButtonLink>
+        )}
+      </Menu>
+      <ContentWrapper>
+        <IframeWrapper>
+          {appIsLoading && (
+            <LoadingContainer>
+              <Loader size="md" />
+            </LoadingContainer>
+          )}
+          <StyledIframe
+            frameBorder="0"
+            id={`iframe-${appUrl}`}
+            ref={iframeRef}
+            src={appUrl}
+            title={appUrl} // TODO: Change it!
+            onLoad={onIframeLoad}
+          />
+        </IframeWrapper>
+
+        {isRemoveModalOpen && (
+          <GenericModal
+            title={
+              <Title size="sm" withoutMargin>
+                Remove app
+              </Title>
+            }
+            body={<Text size="md">This action will remove {safeApp.name} from the interface</Text>}
+            footer={
+              <ModalFooterConfirmation
+                cancelText="Cancel"
+                handleCancel={closeRemoveModal}
+                handleOk={removeApp}
+                okText="Remove"
+              />
+            }
+            onClose={closeRemoveModal}
+          />
         )}
-        <StyledIframe
-          frameBorder="0"
-          id={`iframe-${appUrl}`}
-          ref={iframeRef}
-          src={appUrl}
-          title={appUrl} // TODO: Change it!
-          onLoad={onIframeLoad}
+
+        <ConfirmTransactionModal
+          isOpen={confirmTransactionModal.isOpen}
+          app={safeApp as SafeApp}
+          safeAddress={safeAddress}
+          ethBalance={ethBalance as string}
+          safeName={safeName as string}
+          txs={confirmTransactionModal.txs}
+          onClose={closeConfirmationModal}
+          onUserConfirm={onUserTxConfirm}
+          params={confirmTransactionModal.params}
+          onTxReject={onTxReject}
         />
-      </IframeWrapper>
-
-      <ConfirmTransactionModal
-        isOpen={confirmTransactionModal.isOpen}
-        app={selectedApp as SafeApp}
-        safeAddress={safeAddress}
-        ethBalance={ethBalance as string}
-        safeName={safeName as string}
-        txs={confirmTransactionModal.txs}
-        onClose={closeConfirmationModal}
-        onUserConfirm={onUserTxConfirm}
-        params={confirmTransactionModal.params}
-        onTxReject={onTxReject}
-      />
-    </ContentWrapper>
+      </ContentWrapper>
+    </>
   )
 }
 
diff --git a/src/routes/safe/components/Apps/components/AppsList.tsx b/src/routes/safe/components/Apps/components/AppsList.tsx
new file mode 100644
index 0000000000..f52c58cd9a
--- /dev/null
+++ b/src/routes/safe/components/Apps/components/AppsList.tsx
@@ -0,0 +1,125 @@
+import React, { useMemo, useState } from 'react'
+import styled, { css } from 'styled-components'
+import { useSelector } from 'react-redux'
+import { GenericModal, IconText, Loader, Menu } from '@gnosis.pm/safe-react-components'
+
+import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
+import AppCard from 'src/routes/safe/components/Apps/components/AppCard'
+import AddAppIcon from 'src/routes/safe/components/Apps/assets/addApp.svg'
+import { useRouteMatch, useHistory } from 'react-router-dom'
+import { SAFELIST_ADDRESS } from 'src/routes/routes'
+
+import { useAppList } from '../hooks/useAppList'
+import { SAFE_APP_LOADING_STATUS } from '../types.d'
+import AddAppForm from './AddAppForm'
+
+const loaderDotsSvg = require('src/routes/opening/assets/loader-dots.svg')
+
+const centerCSS = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const LoadingContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  ${centerCSS};
+`
+
+const CardsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: justify-content-center;
+`
+
+const CenteredMT = styled.div`
+  ${centerCSS};
+  margin-top: 16px;
+`
+
+const ContentWrapper = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`
+
+const AppsList = (): React.ReactElement => {
+  const history = useHistory()
+  const matchSafeWithAddress = useRouteMatch<{ safeAddress: string }>({ path: `${SAFELIST_ADDRESS}/:safeAddress` })
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
+  const { appList } = useAppList()
+  const [isAddAppModalOpen, setIsAddAppModalOpen] = useState<boolean>(false)
+
+  const onAddAppHandler = (url: string) => () => {
+    const goToApp = `${matchSafeWithAddress?.url}/apps?appUrl=${encodeURI(url)}`
+    history.push(goToApp)
+  }
+
+  const openAddAppModal = () => setIsAddAppModalOpen(true)
+
+  const closeAddAppModal = () => setIsAddAppModalOpen(false)
+
+  const apps = useMemo(() => {
+    const areAppsLoading = appList.some((app) =>
+      [SAFE_APP_LOADING_STATUS.ADDED, SAFE_APP_LOADING_STATUS.LOADING].includes(app.loadingStatus),
+    )
+
+    return areAppsLoading
+      ? appList.map((app) => ({ ...app, name: 'Loading', iconUrl: loaderDotsSvg }))
+      : appList.map((app) => ({ ...app, id: app.url }))
+  }, [appList])
+
+  if (!appList.length || !safeAddress) {
+    return (
+      <LoadingContainer>
+        <Loader size="md" />
+      </LoadingContainer>
+    )
+  }
+
+  return (
+    <>
+      <Menu>
+        {/* TODO: Add navigation breadcrumb. Empty for now to give top margin */}
+        <div />
+      </Menu>
+      <ContentWrapper>
+        <CardsWrapper>
+          <AppCard iconUrl={AddAppIcon} onButtonClick={openAddAppModal} buttonText="Add custom app" iconSize="lg" />
+
+          {apps.map((a) => (
+            <AppCard
+              key={a.url}
+              iconUrl={a.iconUrl}
+              name={a.name}
+              description={a.description}
+              onCardClick={onAddAppHandler(a.url)}
+            />
+          ))}
+        </CardsWrapper>
+
+        <CenteredMT>
+          <IconText
+            color="secondary"
+            iconSize="sm"
+            iconType="info"
+            text="These are third-party apps, which means they are not owned, controlled, maintained or audited by Gnosis. Interacting with the apps is at your own risk."
+            textSize="sm"
+          />
+        </CenteredMT>
+      </ContentWrapper>
+
+      {isAddAppModalOpen && (
+        <GenericModal
+          title="Add custom app"
+          body={<AddAppForm closeModal={closeAddAppModal} appList={appList} />}
+          onClose={closeAddAppModal}
+        />
+      )}
+    </>
+  )
+}
+
+export default AppsList
diff --git a/src/routes/safe/components/Apps/components/ManageApps.tsx b/src/routes/safe/components/Apps/components/ManageApps.tsx
deleted file mode 100644
index 0ad60a986c..0000000000
--- a/src/routes/safe/components/Apps/components/ManageApps.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { ButtonLink, ManageListModal } from '@gnosis.pm/safe-react-components'
-import React, { useState } from 'react'
-
-import appsIconSvg from 'src/assets/icons/apps.svg'
-import AddAppForm from '../AddAppForm'
-import { SafeApp } from '../types'
-
-const FORM_ID = 'add-apps-form'
-
-type Props = {
-  appList: Array<SafeApp>
-  onAppAdded: (app: SafeApp) => void
-  onAppToggle: (appId: string, enabled: boolean) => void
-  onAppRemoved: (appId: string) => void
-}
-
-type AppListItem = SafeApp & { checked: boolean }
-
-const ManageApps = ({ appList, onAppAdded, onAppToggle, onAppRemoved }: Props): React.ReactElement => {
-  const [isOpen, setIsOpen] = useState(false)
-  const [isSubmitDisabled, setIsSubmitDisabled] = useState(true)
-
-  const onSubmitForm = () => {
-    // This sucks, but it's the way the docs suggest
-    // https://github.com/final-form/react-final-form/blob/master/docs/faq.md#via-documentgetelementbyid
-    document.querySelectorAll(`[data-testId=${FORM_ID}]`)[0].dispatchEvent(new Event('submit', { cancelable: true }))
-  }
-
-  const toggleOpen = () => setIsOpen(!isOpen)
-
-  const closeModal = () => setIsOpen(false)
-
-  const getItemList = (): AppListItem[] =>
-    appList.map((a) => {
-      return { ...a, checked: !a.disabled }
-    })
-
-  const onItemToggle = (itemId: string, checked: boolean): void => {
-    onAppToggle(itemId, checked)
-  }
-
-  const Form = (
-    <AddAppForm
-      formId={FORM_ID}
-      appList={appList}
-      closeModal={closeModal}
-      onAppAdded={onAppAdded}
-      setIsSubmitDisabled={setIsSubmitDisabled}
-    />
-  )
-
-  return (
-    <>
-      <ButtonLink color="primary" onClick={toggleOpen}>
-        Manage Apps
-      </ButtonLink>
-      {isOpen && (
-        <ManageListModal
-          addButtonLabel="Add custom app"
-          showDeleteButton
-          defaultIconUrl={appsIconSvg}
-          formBody={Form}
-          isSubmitFormDisabled={isSubmitDisabled}
-          itemList={getItemList()}
-          onClose={closeModal}
-          onItemToggle={onItemToggle}
-          onItemDeleted={onAppRemoved}
-          onSubmitForm={onSubmitForm}
-        />
-      )}
-    </>
-  )
-}
-
-export default ManageApps
diff --git a/src/routes/safe/components/Apps/hooks/useAppList.ts b/src/routes/safe/components/Apps/hooks/useAppList.ts
index 1e13065024..f3fda83517 100644
--- a/src/routes/safe/components/Apps/hooks/useAppList.ts
+++ b/src/routes/safe/components/Apps/hooks/useAppList.ts
@@ -1,73 +1,16 @@
-import { useState, useEffect, useCallback } from 'react'
-import { loadFromStorage, saveToStorage } from 'src/utils/storage'
-import { getAppInfoFromUrl, getEmptySafeApp, staticAppsList } from '../utils'
+import { useState, useEffect } from 'react'
+import { loadFromStorage } from 'src/utils/storage'
+import { APPS_STORAGE_KEY, getAppInfoFromUrl, getEmptySafeApp, staticAppsList } from '../utils'
 import { SafeApp, StoredSafeApp, SAFE_APP_LOADING_STATUS } from '../types.d'
 import { getNetworkId } from 'src/config'
 
-const APPS_STORAGE_KEY = 'APPS_STORAGE_KEY'
-
-type onAppToggleHandler = (appId: string, enabled: boolean) => Promise<void>
-type onAppAddedHandler = (app: SafeApp) => void
-type onAppRemovedHandler = (appId: string) => void
-
 type UseAppListReturnType = {
   appList: SafeApp[]
-  onAppToggle: onAppToggleHandler
-  onAppAdded: onAppAddedHandler
-  onAppRemoved: onAppRemovedHandler
 }
 
 const useAppList = (): UseAppListReturnType => {
   const [appList, setAppList] = useState<SafeApp[]>([])
 
-  const onAppToggle: onAppToggleHandler = useCallback(
-    async (appId, enabled) => {
-      // update in-memory list
-      const appListCopy = [...appList]
-
-      const app = appListCopy.find((a) => a.id === appId)
-      if (!app) {
-        return
-      }
-      app.disabled = !enabled
-
-      setAppList(appListCopy)
-
-      // update storage list
-      const listToPersist: StoredSafeApp[] = appListCopy.map(({ url, disabled }) => ({ url, disabled }))
-      saveToStorage(APPS_STORAGE_KEY, listToPersist)
-    },
-    [appList],
-  )
-
-  const onAppAdded: onAppAddedHandler = useCallback(
-    (app) => {
-      const newAppList = [
-        { url: app.url, disabled: false },
-        ...appList.map((a) => ({
-          url: a.url,
-          disabled: a.disabled,
-        })),
-      ]
-      saveToStorage(APPS_STORAGE_KEY, newAppList)
-
-      setAppList([...appList, { ...app, isDeletable: true }])
-    },
-    [appList],
-  )
-
-  const onAppRemoved: onAppRemovedHandler = useCallback(
-    (appId) => {
-      const appListCopy = appList.filter((a) => a.id !== appId)
-
-      setAppList(appListCopy)
-
-      const listToPersist: StoredSafeApp[] = appListCopy.map(({ url, disabled }) => ({ url, disabled }))
-      saveToStorage(APPS_STORAGE_KEY, listToPersist)
-    },
-    [appList],
-  )
-
   // Load apps list
   // for each URL we return a mocked safe-app with a loading status
   // it was developed to speed up initial page load, otherwise the
@@ -78,19 +21,15 @@ const useAppList = (): UseAppListReturnType => {
       // * third-party apps added by the user
       // * disabled status for both static and third-party apps
       const persistedAppList = (await loadFromStorage<StoredSafeApp[]>(APPS_STORAGE_KEY)) || []
-      let list: (StoredSafeApp & { isDeletable: boolean; networks?: number[] })[] = persistedAppList.map((a) => ({
-        ...a,
-        isDeletable: true,
-      }))
+      let list: (StoredSafeApp & { networks?: number[] })[] = [...persistedAppList]
 
       // merge stored apps with static apps (apps added manually can be deleted by the user)
       staticAppsList.forEach((staticApp) => {
         const app = list.find((persistedApp) => persistedApp.url === staticApp.url)
         if (app) {
-          app.isDeletable = false
           app.networks = staticApp.networks
         } else {
-          list.push({ ...staticApp, isDeletable: false })
+          list.push({ ...staticApp })
         }
       })
 
@@ -113,9 +52,6 @@ const useAppList = (): UseAppListReturnType => {
           url: appUrl,
         }
 
-        appInfo.disabled = Boolean(currentApp.disabled)
-        appInfo.isDeletable = Boolean(currentApp.isDeletable) === undefined ? true : currentApp.isDeletable
-
         apps.push(appInfo)
       }
 
@@ -159,9 +95,6 @@ const useAppList = (): UseAppListReturnType => {
 
   return {
     appList,
-    onAppToggle,
-    onAppAdded,
-    onAppRemoved,
   }
 }
 
diff --git a/src/routes/safe/components/Apps/index.tsx b/src/routes/safe/components/Apps/index.tsx
index b83116f198..06d9c7e7a5 100644
--- a/src/routes/safe/components/Apps/index.tsx
+++ b/src/routes/safe/components/Apps/index.tsx
@@ -1,127 +1,23 @@
-import React, { useMemo } from 'react'
-import { IconText, Loader } from '@gnosis.pm/safe-react-components'
-import styled, { css } from 'styled-components'
-import { useSelector } from 'react-redux'
+import React from 'react'
 
 import AppFrame from './components/AppFrame'
-import { useAppList } from './hooks/useAppList'
-import { SAFE_APP_LOADING_STATUS } from './types.d'
+import AppsList from './components/AppsList'
 
-import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
-import AppCard from 'src/routes/safe/components/Apps/components/AppCard'
-import AddAppIcon from 'src/routes/safe/components/Apps/assets/addApp.svg'
-// import { useAnalytics /* SAFE_NAVIGATION_EVENT */ } from 'src/utils/googleAnalytics'
-
-import { useRouteMatch, useHistory, useLocation } from 'react-router-dom'
-import { SAFELIST_ADDRESS } from 'src/routes/routes'
-
-const loaderDotsSvg = require('src/routes/opening/assets/loader-dots.svg')
-
-const centerCSS = css`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`
-
-const LoadingContainer = styled.div`
-  width: 100%;
-  height: 100%;
-  ${centerCSS};
-`
-
-const CardsWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: justify-content-center;
-`
-
-const CenteredMT = styled.div`
-  ${centerCSS};
-  margin-top: 16px;
-`
-
-const ContentWrapper = styled.div`
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-`
+import { useLocation } from 'react-router-dom'
 
 const useQuery = () => {
   return new URLSearchParams(useLocation().search)
 }
 
 const Apps = (): React.ReactElement => {
-  const history = useHistory()
-  const matchSafeWithAddress = useRouteMatch<{ safeAddress: string }>({ path: `${SAFELIST_ADDRESS}/:safeAddress` })
-  const safeAddress = useSelector(safeParamAddressFromStateSelector)
-
   const query = useQuery()
   const appUrl = query.get('appUrl')
 
-  const { appList /* onAppAdded, onAppRemoved */ } = useAppList()
-
-  // const { trackEvent } = useAnalytics()
-
-  const apps = useMemo(() => {
-    const areAppsLoading = appList.some((app) =>
-      [SAFE_APP_LOADING_STATUS.ADDED, SAFE_APP_LOADING_STATUS.LOADING].includes(app.loadingStatus),
-    )
-
-    return areAppsLoading
-      ? appList.map((app) => ({ ...app, name: 'Loading', iconUrl: loaderDotsSvg }))
-      : appList.map((app) => ({ ...app, id: app.url }))
-  }, [appList])
-
-  // track GA
-  // useEffect(() => {
-  //   if (selectedApp) {
-  //     trackEvent({ category: SAFE_NAVIGATION_EVENT, action: 'Apps', label: selectedApp.name })
-  //   }
-  // }, [selectedApp, trackEvent])
-
-  if (!appList.length || !safeAddress) {
-    return (
-      <LoadingContainer>
-        <Loader size="md" />
-      </LoadingContainer>
-    )
-  }
-
   if (appUrl) {
     return <AppFrame appUrl={appUrl} />
+  } else {
+    return <AppsList />
   }
-
-  return (
-    <ContentWrapper>
-      <CardsWrapper>
-        <AppCard iconUrl={AddAppIcon} onButtonClick={console.log} buttonText="Add custom app" iconSize="lg" />
-
-        {apps.map((a) => (
-          <AppCard
-            key={a.url}
-            iconUrl={a.iconUrl}
-            name={a.name}
-            description={a.description}
-            onCardClick={() => {
-              const goToApp = `${matchSafeWithAddress?.url}/apps?appUrl=${encodeURI(a.url)}`
-              history.push(goToApp)
-            }}
-          />
-        ))}
-      </CardsWrapper>
-
-      <CenteredMT>
-        <IconText
-          color="secondary"
-          iconSize="sm"
-          iconType="info"
-          text="These are third-party apps, which means they are not owned, controlled, maintained or audited by Gnosis. Interacting with the apps is at your own risk."
-          textSize="sm"
-        />
-      </CenteredMT>
-    </ContentWrapper>
-  )
 }
 
 export default Apps
diff --git a/src/routes/safe/components/Apps/types.d.ts b/src/routes/safe/components/Apps/types.d.ts
index 27004312c3..54698ac9d7 100644
--- a/src/routes/safe/components/Apps/types.d.ts
+++ b/src/routes/safe/components/Apps/types.d.ts
@@ -11,7 +11,6 @@ export type SafeApp = {
   name: string
   iconUrl: string
   disabled?: boolean
-  isDeletable?: boolean
   description: string
   error: boolean
   loadingStatus: SAFE_APP_LOADING_STATUS
@@ -19,5 +18,4 @@ export type SafeApp = {
 
 export type StoredSafeApp = {
   url: string
-  disabled?: boolean
 }
diff --git a/src/routes/safe/components/Apps/utils.ts b/src/routes/safe/components/Apps/utils.ts
index 6f4800f7e2..02ae8e43f4 100644
--- a/src/routes/safe/components/Apps/utils.ts
+++ b/src/routes/safe/components/Apps/utils.ts
@@ -8,6 +8,8 @@ import { getContentFromENS } from 'src/logic/wallets/getWeb3'
 import appsIconSvg from 'src/assets/icons/apps.svg'
 import { ETHEREUM_NETWORK } from 'src/config/networks/network.d'
 
+export const APPS_STORAGE_KEY = 'APPS_STORAGE_KEY'
+
 const removeLastTrailingSlash = (url) => {
   if (url.substr(-1) === '/') {
     return url.substr(0, url.length - 1)
@@ -16,7 +18,12 @@ const removeLastTrailingSlash = (url) => {
 }
 
 const gnosisAppsUrl = removeLastTrailingSlash(getGnosisSafeAppsUrl())
-export const staticAppsList: Array<{ url: string; disabled: boolean; networks: number[] }> = [
+export type StaticAppInfo = {
+  url: string
+  disabled: boolean
+  networks: number[]
+}
+export const staticAppsList: Array<StaticAppInfo> = [
   // 1inch
   {
     url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmUDTSghr154kCCGguyA3cbG5HRVd2tQgNR7yD69bcsjm5`,
@@ -213,10 +220,10 @@ export const getIpfsLinkFromEns = memoize(
 )
 
 export const uniqueApp = (appList: SafeApp[]) => (url: string): string | undefined => {
+  const newUrl = new URL(url)
   const exists = appList.some((a) => {
     try {
       const currentUrl = new URL(a.url)
-      const newUrl = new URL(url)
       return currentUrl.href === newUrl.href
     } catch (error) {
       console.error('There was a problem trying to validate the URL existence.', error.message)
diff --git a/src/routes/safe/container/index.tsx b/src/routes/safe/container/index.tsx
index bb6836c879..443c471d24 100644
--- a/src/routes/safe/container/index.tsx
+++ b/src/routes/safe/container/index.tsx
@@ -5,11 +5,11 @@ import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'
 
 import NoSafe from 'src/components/NoSafe'
 import { providerNameSelector } from 'src/logic/wallets/store/selectors'
-import { safeFeaturesEnabledSelector, safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
-import { AppReduxState } from 'src/store'
+import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { wrapInSuspense } from 'src/utils/wrapInSuspense'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
 import { FEATURES } from 'src/config/networks/network.d'
+import { getNetworkConfigDisabledFeatures } from 'src/config'
 
 export const BALANCES_TAB_BTN_TEST_ID = 'balances-tab-btn'
 export const SETTINGS_TAB_BTN_TEST_ID = 'settings-tab-btn'
@@ -36,18 +36,7 @@ const Container = (): React.ReactElement => {
 
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const provider = useSelector(providerNameSelector)
-  const featuresEnabled = useSelector<AppReduxState, FEATURES[] | undefined>(
-    safeFeaturesEnabledSelector,
-    (left, right) => {
-      if (Array.isArray(left) && Array.isArray(right)) {
-        return JSON.stringify(left) === JSON.stringify(right)
-      }
-
-      return left === right
-    },
-  )
   const matchSafeWithAddress = useRouteMatch({ path: `${SAFELIST_ADDRESS}/:safeAddress` })
-  const safeAppsEnabled = Boolean(featuresEnabled?.includes(FEATURES.SAFE_APPS))
 
   if (!safeAddress) {
     return <NoSafe provider={provider} text="Safe not found" />
@@ -83,16 +72,15 @@ const Container = (): React.ReactElement => {
         <Route
           exact
           path={`${matchSafeWithAddress?.path}/apps`}
-          render={
-            (/* {
-            history
-          } */) => {
-              // if (!safeAppsEnabled) {
-              //   history.push(`${matchSafeWithAddress?.url}/balances`)
-              // }
-              return wrapInSuspense(<Apps />, null)
+          render={({ history }) => {
+            // TODO: This will only check if Safe apps are disabled by network config
+            // I removed the check for safe version features because seems to be a race-condition issue
+            const disabledFeatures = getNetworkConfigDisabledFeatures()
+            if (disabledFeatures[FEATURES.SAFE_APPS]) {
+              history.push(`${matchSafeWithAddress?.url}/balances`)
             }
-          }
+            return wrapInSuspense(<Apps />, null)
+          }}
         />
         <Route
           exact

From 510d0a7dc48d6335555082a6c8d09e952240218f Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Thu, 12 Nov 2020 18:48:28 -0300
Subject: [PATCH 14/39] refactor skeleton

---
 .../Apps/components/AppCard/index.tsx         | 101 ++----------------
 .../Apps/components/AppCard/skeleton.tsx      |  86 +++++++++++++++
 .../components/Apps/components/AppsList.tsx   |  20 ++--
 3 files changed, 101 insertions(+), 106 deletions(-)
 create mode 100644 src/routes/safe/components/Apps/components/AppCard/skeleton.tsx

diff --git a/src/routes/safe/components/Apps/components/AppCard/index.tsx b/src/routes/safe/components/Apps/components/AppCard/index.tsx
index ccb3113b6d..e2da1d985a 100644
--- a/src/routes/safe/components/Apps/components/AppCard/index.tsx
+++ b/src/routes/safe/components/Apps/components/AppCard/index.tsx
@@ -4,8 +4,9 @@ import { fade } from '@material-ui/core/styles/colorManipulator'
 import { Title, Text, Button } from '@gnosis.pm/safe-react-components'
 
 import appsIconSvg from 'src/assets/icons/apps.svg'
+import { AppIconSK, DescriptionSK, TitleSK } from './skeleton'
 
-const StyledApps = styled.div`
+const AppCard = styled.div`
   display: flex;
   align-items: center;
   flex-direction: column;
@@ -29,95 +30,10 @@ const StyledApps = styled.div`
   }
 `
 
-const IconImg = styled.img<{ size: 'md' | 'lg' }>`
+const IconImg = styled.img<{ size: 'md' | 'lg'; src: string | undefined }>`
   width: ${({ size }) => (size === 'md' ? '48px' : '102px')};
   height: ${({ size }) => (size === 'md' ? '60px' : '92px')};
-  object-fit: cover;
-`
-
-const AppIconSK = styled.div`
-  height: 60px;
-  width: 60px;
-  border-radius: 30px;
-  margin: 0 auto;
-  background-color: lightgrey;
-  background: linear-gradient(84deg, lightgrey, transparent);
-  background-size: 400% 400%;
-
-  -webkit-animation: gradient-SK 1.5s ease infinite;
-  -moz-animation: gradient-SK 1.5s ease infinite;
-  -o-animation: gradient-SK 1.5s ease infinite;
-  animation: gradient-SK 1.5s ease infinite;
-
-  @-webkit-keyframes gradient-SK {
-    0% {
-      background-position: 0% 54%;
-    }
-    50% {
-      background-position: 100% 47%;
-    }
-    100% {
-      background-position: 0% 54%;
-    }
-  }
-  @-moz-keyframes gradient-SK {
-    0% {
-      background-position: 0% 54%;
-    }
-    50% {
-      background-position: 100% 47%;
-    }
-    100% {
-      background-position: 0% 54%;
-    }
-  }
-  @-o-keyframes gradient-SK {
-    0% {
-      background-position: 0% 54%;
-    }
-    50% {
-      background-position: 100% 47%;
-    }
-    100% {
-      background-position: 0% 54%;
-    }
-  }
-  @keyframes gradient-SK {
-    0% {
-      background-position: 0% 54%;
-    }
-    50% {
-      background-position: 100% 47%;
-    }
-    100% {
-      background-position: 0% 54%;
-    }
-  }
-`
-const TitleSK = styled.div`
-  height: 24px;
-  width: 160px;
-  margin: 24px auto;
-  background-color: lightgrey;
-  background: linear-gradient(84deg, lightgrey, transparent);
-  background-size: 400% 400%;
-
-  -webkit-animation: gradient-SK 1.5s ease infinite;
-  -moz-animation: gradient-SK 1.5s ease infinite;
-  -o-animation: gradient-SK 1.5s ease infinite;
-  animation: gradient-SK 1.5s ease infinite;
-`
-const DescriptionSK = styled.div`
-  height: 16px;
-  width: 200px;
-  background-color: lightgrey;
-  background: linear-gradient(84deg, lightgrey, transparent);
-  background-size: 400% 400%;
-
-  -webkit-animation: gradient-SK 1.5s ease infinite;
-  -moz-animation: gradient-SK 1.5s ease infinite;
-  -o-animation: gradient-SK 1.5s ease infinite;
-  animation: gradient-SK 1.5s ease infinite;
+  object-fit: contain;
 `
 
 const AppName = styled(Title)`
@@ -126,6 +42,7 @@ const AppName = styled(Title)`
 
 const AppDescription = styled(Text)`
   height: 40px;
+  text-align: center;
 `
 
 type Props = {
@@ -158,17 +75,17 @@ const Apps = ({
 }: Props): React.ReactElement => {
   if (isLoading) {
     return (
-      <StyledApps className={className}>
+      <AppCard className={className}>
         <AppIconSK />
         <TitleSK />
         <DescriptionSK />
         <DescriptionSK />
-      </StyledApps>
+      </AppCard>
     )
   }
 
   return (
-    <StyledApps className={className} onClick={onButtonClick ? () => undefined : onCardClick}>
+    <AppCard className={className} onClick={onButtonClick ? () => undefined : onCardClick}>
       <IconImg alt={`${name || 'App'} Logo`} src={iconUrl} onError={setAppImageFallback} size={iconSize} />
 
       {name && <AppName size="sm">{name}</AppName>}
@@ -179,7 +96,7 @@ const Apps = ({
           {buttonText}
         </Button>
       )}
-    </StyledApps>
+    </AppCard>
   )
 }
 
diff --git a/src/routes/safe/components/Apps/components/AppCard/skeleton.tsx b/src/routes/safe/components/Apps/components/AppCard/skeleton.tsx
new file mode 100644
index 0000000000..1cd86fce8f
--- /dev/null
+++ b/src/routes/safe/components/Apps/components/AppCard/skeleton.tsx
@@ -0,0 +1,86 @@
+import styled from 'styled-components'
+
+export const AppIconSK = styled.div`
+  height: 60px;
+  width: 60px;
+  border-radius: 30px;
+  margin: 0 auto;
+  background-color: lightgrey;
+  background: linear-gradient(84deg, lightgrey, transparent);
+  background-size: 400% 400%;
+
+  -webkit-animation: gradient-SK 1.5s ease infinite;
+  -moz-animation: gradient-SK 1.5s ease infinite;
+  -o-animation: gradient-SK 1.5s ease infinite;
+  animation: gradient-SK 1.5s ease infinite;
+
+  @-webkit-keyframes gradient-SK {
+    0% {
+      background-position: 0% 54%;
+    }
+    50% {
+      background-position: 100% 47%;
+    }
+    100% {
+      background-position: 0% 54%;
+    }
+  }
+  @-moz-keyframes gradient-SK {
+    0% {
+      background-position: 0% 54%;
+    }
+    50% {
+      background-position: 100% 47%;
+    }
+    100% {
+      background-position: 0% 54%;
+    }
+  }
+  @-o-keyframes gradient-SK {
+    0% {
+      background-position: 0% 54%;
+    }
+    50% {
+      background-position: 100% 47%;
+    }
+    100% {
+      background-position: 0% 54%;
+    }
+  }
+  @keyframes gradient-SK {
+    0% {
+      background-position: 0% 54%;
+    }
+    50% {
+      background-position: 100% 47%;
+    }
+    100% {
+      background-position: 0% 54%;
+    }
+  }
+`
+export const TitleSK = styled.div`
+  height: 24px;
+  width: 160px;
+  margin: 24px auto;
+  background-color: lightgrey;
+  background: linear-gradient(84deg, lightgrey, transparent);
+  background-size: 400% 400%;
+
+  -webkit-animation: gradient-SK 1.5s ease infinite;
+  -moz-animation: gradient-SK 1.5s ease infinite;
+  -o-animation: gradient-SK 1.5s ease infinite;
+  animation: gradient-SK 1.5s ease infinite;
+`
+export const DescriptionSK = styled.div`
+  height: 16px;
+  width: 200px;
+  background-color: lightgrey;
+  background: linear-gradient(84deg, lightgrey, transparent);
+  background-size: 400% 400%;
+
+  -webkit-animation: gradient-SK 1.5s ease infinite;
+  -moz-animation: gradient-SK 1.5s ease infinite;
+  -o-animation: gradient-SK 1.5s ease infinite;
+  animation: gradient-SK 1.5s ease infinite;
+`
diff --git a/src/routes/safe/components/Apps/components/AppsList.tsx b/src/routes/safe/components/Apps/components/AppsList.tsx
index f52c58cd9a..88b88333d4 100644
--- a/src/routes/safe/components/Apps/components/AppsList.tsx
+++ b/src/routes/safe/components/Apps/components/AppsList.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react'
+import React, { useState } from 'react'
 import styled, { css } from 'styled-components'
 import { useSelector } from 'react-redux'
 import { GenericModal, IconText, Loader, Menu } from '@gnosis.pm/safe-react-components'
@@ -10,11 +10,9 @@ import { useRouteMatch, useHistory } from 'react-router-dom'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
 
 import { useAppList } from '../hooks/useAppList'
-import { SAFE_APP_LOADING_STATUS } from '../types.d'
+import { SAFE_APP_LOADING_STATUS, SafeApp } from '../types.d'
 import AddAppForm from './AddAppForm'
 
-const loaderDotsSvg = require('src/routes/opening/assets/loader-dots.svg')
-
 const centerCSS = css`
   display: flex;
   align-items: center;
@@ -61,15 +59,8 @@ const AppsList = (): React.ReactElement => {
 
   const closeAddAppModal = () => setIsAddAppModalOpen(false)
 
-  const apps = useMemo(() => {
-    const areAppsLoading = appList.some((app) =>
-      [SAFE_APP_LOADING_STATUS.ADDED, SAFE_APP_LOADING_STATUS.LOADING].includes(app.loadingStatus),
-    )
-
-    return areAppsLoading
-      ? appList.map((app) => ({ ...app, name: 'Loading', iconUrl: loaderDotsSvg }))
-      : appList.map((app) => ({ ...app, id: app.url }))
-  }, [appList])
+  const isAppLoading = (app: SafeApp) =>
+    [SAFE_APP_LOADING_STATUS.ADDED, SAFE_APP_LOADING_STATUS.LOADING].includes(app.loadingStatus)
 
   if (!appList.length || !safeAddress) {
     return (
@@ -89,8 +80,9 @@ const AppsList = (): React.ReactElement => {
         <CardsWrapper>
           <AppCard iconUrl={AddAppIcon} onButtonClick={openAddAppModal} buttonText="Add custom app" iconSize="lg" />
 
-          {apps.map((a) => (
+          {appList.map((a) => (
             <AppCard
+              isLoading={isAppLoading(a)}
               key={a.url}
               iconUrl={a.iconUrl}
               name={a.name}

From 133b987d489009edb4e8d1d64d686aeee18600a1 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Fri, 13 Nov 2020 16:26:26 -0300
Subject: [PATCH 15/39] refactor layout using flexfox

---
 src/components/AppLayout/index.tsx | 116 ++++++++++++++++-------------
 1 file changed, 63 insertions(+), 53 deletions(-)

diff --git a/src/components/AppLayout/index.tsx b/src/components/AppLayout/index.tsx
index 4ac72c9e21..5704ec0c28 100644
--- a/src/components/AppLayout/index.tsx
+++ b/src/components/AppLayout/index.tsx
@@ -6,53 +6,63 @@ import Header from './Header'
 import Footer from './Footer'
 import Sidebar from './Sidebar'
 
-const Grid = styled.div`
-  height: 100%;
-  overflow: auto;
+const Container = styled.div`
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+
   background-color: ${({ theme }) => theme.colors.background};
-  display: grid;
-  grid-template-columns: 200px 1fr;
-  grid-template-rows: 54px 1fr;
-  grid-template-areas:
-    'topbar topbar'
-    'sidebar body';
 `
 
-const GridTopbarWrapper = styled.nav`
+const HeaderWrapper = styled.nav`
+  height: 54px;
+  width: 100%;
+  z-index: 1;
+
   background-color: white;
-  box-shadow: 0 2px 4px 0 rgba(212, 212, 211, 0.59);
-  border-bottom: 2px solid ${({ theme }) => theme.colors.separator};
-  z-index: 999;
-  grid-area: topbar;
+  box-shadow: 0 0 4px 0 rgba(212, 212, 211, 0.59);
 `
 
-const GridSidebarWrapper = styled.aside`
-  width: 200px;
-  padding: 62px 8px 0 8px;
+const BodyWrapper = styled.div`
+  height: calc(100% - 54px);
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+`
+
+const SidebarWrapper = styled.aside`
   height: 100%;
-  background-color: ${({ theme }) => theme.colors.white};
-  border-right: 2px solid ${({ theme }) => theme.colors.separator};
+  width: 200px;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
-  box-sizing: border-box;
-  position: fixed;
-  grid-area: sidebar;
+  z-index: 1;
+
+  padding: 8px 8px 0 8px;
+  background-color: ${({ theme }) => theme.colors.white};
+  border-right: 2px solid ${({ theme }) => theme.colors.separator};
 `
 
-const GridBodyWrapper = styled.section`
-  margin: 0 16px 0 16px;
-  grid-area: body;
+const ContentWrapper = styled.section`
+  width: 100%;
   display: flex;
   flex-direction: column;
-  align-content: stretch;
-`
+  overflow-x: auto;
 
-export const BodyWrapper = styled.div`
-  flex: 1 100%;
-`
+  padding: 0 16px;
+
+  > :nth-child(1) {
+    flex-grow: 1;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+  }
 
-export const FooterWrapper = styled.footer`
-  margin: 0 16px;
+  > :nth-child(2) {
+    width: 100%;
+    height: 59px;
+  }
 `
 
 type Props = {
@@ -77,29 +87,29 @@ const Layout: React.FC<Props> = ({
   children,
   sidebarItems,
 }): React.ReactElement => (
-  <Grid>
-    <GridTopbarWrapper>
+  <Container>
+    <HeaderWrapper>
       <Header />
-    </GridTopbarWrapper>
-    <GridSidebarWrapper>
-      <Sidebar
-        items={sidebarItems}
-        safeAddress={safeAddress}
-        safeName={safeName}
-        balance={balance}
-        granted={granted}
-        onToggleSafeList={onToggleSafeList}
-        onReceiveClick={onReceiveClick}
-        onNewTransactionClick={onNewTransactionClick}
-      />
-    </GridSidebarWrapper>
-    <GridBodyWrapper>
-      <BodyWrapper>{children}</BodyWrapper>
-      <FooterWrapper>
+    </HeaderWrapper>
+    <BodyWrapper>
+      <SidebarWrapper>
+        <Sidebar
+          items={sidebarItems}
+          safeAddress={safeAddress}
+          safeName={safeName}
+          balance={balance}
+          granted={granted}
+          onToggleSafeList={onToggleSafeList}
+          onReceiveClick={onReceiveClick}
+          onNewTransactionClick={onNewTransactionClick}
+        />
+      </SidebarWrapper>
+      <ContentWrapper>
+        <div>{children}</div>
         <Footer />
-      </FooterWrapper>
-    </GridBodyWrapper>
-  </Grid>
+      </ContentWrapper>
+    </BodyWrapper>
+  </Container>
 )
 
 export default Layout

From 1f00af2639082efd8736408b2e890286b895cde1 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Fri, 13 Nov 2020 17:09:52 -0300
Subject: [PATCH 16/39] comments

---
 src/components/AppLayout/Sidebar/SafeHeader/index.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx b/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
index 16a0268d1d..ee1503d499 100644
--- a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
+++ b/src/components/AppLayout/Sidebar/SafeHeader/index.tsx
@@ -130,10 +130,13 @@ const SafeHeader = ({
 
   return (
     <>
+      {/* Network */}
       <StyledTextLabel size="sm" networkInfo={networkInfo}>
         {networkInfo.label}
       </StyledTextLabel>
+
       <Container>
+        {/* Identicon */}
         <IdenticonContainer>
           <FlexSpacer />
           <Identicon address={address} size="lg" />
@@ -142,6 +145,7 @@ const SafeHeader = ({
           </UnStyledButton>
         </IdenticonContainer>
 
+        {/* SafeInfo */}
         <Text size="xl">{safeName}</Text>
         <StyledEthHashInfo hash={address} shortenHash={4} textSize="sm" />
         <IconContainer>

From 4350492b16b966ac3d91385ae964a7e803155d7d Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Mon, 16 Nov 2020 10:33:20 -0300
Subject: [PATCH 17/39] make content clickable in cards

---
 .../Apps/components/AppCard/index.stories.tsx |  6 +-
 .../Apps/components/AppCard/index.tsx         | 61 ++++++++++++++-----
 .../components/Apps/components/AppsList.tsx   | 13 +++-
 3 files changed, 60 insertions(+), 20 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx b/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx
index e37eb58afa..2cc1b76f40 100644
--- a/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx
+++ b/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import AppCard from './index'
+import AppCard, { TriggerType } from './index'
 
 import AddAppIcon from 'src/routes/safe/components/Apps/assets/addApp.svg'
 
@@ -12,7 +12,7 @@ export default {
 export const Loading = (): React.ReactElement => <AppCard isLoading />
 
 export const AddCustomApp = (): React.ReactElement => (
-  <AppCard iconUrl={AddAppIcon} onButtonClick={console.log} buttonText="Add custom app" />
+  <AppCard iconUrl={AddAppIcon} onClick={console.log} buttonText="Add custom app" actionTrigger={TriggerType.Content} />
 )
 
 export const LoadedApp = (): React.ReactElement => (
@@ -20,5 +20,7 @@ export const LoadedApp = (): React.ReactElement => (
     iconUrl="https://cryptologos.cc/logos/versions/gnosis-gno-gno-logo-circle.svg?v=007"
     name="Gnosis"
     description="Gnosis safe app"
+    actionTrigger={TriggerType.Button}
+    onClick={console.log}
   />
 )
diff --git a/src/routes/safe/components/Apps/components/AppCard/index.tsx b/src/routes/safe/components/Apps/components/AppCard/index.tsx
index e2da1d985a..87fc2b7524 100644
--- a/src/routes/safe/components/Apps/components/AppCard/index.tsx
+++ b/src/routes/safe/components/Apps/components/AppCard/index.tsx
@@ -18,6 +18,7 @@ const AppCard = styled.div`
   background-color: ${({ theme }) => theme.colors.white};
   width: 244px;
   height: 232px;
+  cursor: default !important;
 
   :hover {
     box-shadow: 1px 2px 16px 0 ${({ theme }) => fade(theme.colors.shadow.color, 0.35)};
@@ -45,7 +46,33 @@ const AppDescription = styled(Text)`
   text-align: center;
 `
 
+const ClickableContent = styled.div`
+  cursor: pointer;
+`
+
+export const setAppImageFallback = (error: SyntheticEvent<HTMLImageElement, Event>): void => {
+  error.currentTarget.onerror = null
+  error.currentTarget.src = appsIconSvg
+}
+
+const ConditionalClickableContent = ({
+  isClickable,
+  onClick,
+  children,
+}: {
+  isClickable: boolean
+  onClick: () => void
+  children: React.ReactNode
+}): React.ReactElement => <ClickableContent onClick={isClickable ? onClick : undefined}>{children}</ClickableContent>
+
+export enum TriggerType {
+  Button,
+  Content,
+}
+
 type Props = {
+  onClick?: () => void
+  actionTrigger?: TriggerType
   isLoading?: boolean
   className?: string
   name?: string
@@ -53,13 +80,6 @@ type Props = {
   iconUrl?: string
   iconSize?: 'md' | 'lg'
   buttonText?: string
-  onButtonClick?: () => void
-  onCardClick?: () => void
-}
-
-export const setAppImageFallback = (error: SyntheticEvent<HTMLImageElement, Event>): void => {
-  error.currentTarget.onerror = null
-  error.currentTarget.src = appsIconSvg
 }
 
 const Apps = ({
@@ -70,8 +90,8 @@ const Apps = ({
   iconUrl,
   iconSize = 'md',
   buttonText,
-  onButtonClick,
-  onCardClick,
+  onClick = () => undefined,
+  actionTrigger,
 }: Props): React.ReactElement => {
   if (isLoading) {
     return (
@@ -85,14 +105,25 @@ const Apps = ({
   }
 
   return (
-    <AppCard className={className} onClick={onButtonClick ? () => undefined : onCardClick}>
-      <IconImg alt={`${name || 'App'} Logo`} src={iconUrl} onError={setAppImageFallback} size={iconSize} />
+    <AppCard className={className}>
+      <ConditionalClickableContent isClickable={actionTrigger === TriggerType.Content} onClick={onClick}>
+        <IconImg alt={`${name || 'App'} Logo`} src={iconUrl} onError={setAppImageFallback} size={iconSize} />
+      </ConditionalClickableContent>
+
+      {name && (
+        <ConditionalClickableContent isClickable={actionTrigger === TriggerType.Content} onClick={onClick}>
+          <AppName size="sm">{name}</AppName>
+        </ConditionalClickableContent>
+      )}
 
-      {name && <AppName size="sm">{name}</AppName>}
-      {description && <AppDescription size="lg">{description} </AppDescription>}
+      {description && (
+        <ConditionalClickableContent isClickable={actionTrigger === TriggerType.Content} onClick={onClick}>
+          <AppDescription size="lg">{description} </AppDescription>
+        </ConditionalClickableContent>
+      )}
 
-      {onButtonClick && (
-        <Button size="md" color="primary" variant="contained" onClick={onButtonClick}>
+      {actionTrigger === TriggerType.Button && (
+        <Button size="md" color="primary" variant="contained" onClick={onClick}>
           {buttonText}
         </Button>
       )}
diff --git a/src/routes/safe/components/Apps/components/AppsList.tsx b/src/routes/safe/components/Apps/components/AppsList.tsx
index 88b88333d4..11d8cb4d74 100644
--- a/src/routes/safe/components/Apps/components/AppsList.tsx
+++ b/src/routes/safe/components/Apps/components/AppsList.tsx
@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'
 import { GenericModal, IconText, Loader, Menu } from '@gnosis.pm/safe-react-components'
 
 import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
-import AppCard from 'src/routes/safe/components/Apps/components/AppCard'
+import AppCard, { TriggerType } from 'src/routes/safe/components/Apps/components/AppCard'
 import AddAppIcon from 'src/routes/safe/components/Apps/assets/addApp.svg'
 import { useRouteMatch, useHistory } from 'react-router-dom'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
@@ -78,7 +78,13 @@ const AppsList = (): React.ReactElement => {
       </Menu>
       <ContentWrapper>
         <CardsWrapper>
-          <AppCard iconUrl={AddAppIcon} onButtonClick={openAddAppModal} buttonText="Add custom app" iconSize="lg" />
+          <AppCard
+            iconUrl={AddAppIcon}
+            onClick={openAddAppModal}
+            buttonText="Add custom app"
+            iconSize="lg"
+            actionTrigger={TriggerType.Button}
+          />
 
           {appList.map((a) => (
             <AppCard
@@ -87,7 +93,8 @@ const AppsList = (): React.ReactElement => {
               iconUrl={a.iconUrl}
               name={a.name}
               description={a.description}
-              onCardClick={onAddAppHandler(a.url)}
+              onClick={onAddAppHandler(a.url)}
+              actionTrigger={TriggerType.Content}
             />
           ))}
         </CardsWrapper>

From 2e84d1de7902179bb7b6380bba7260e3f03fd80b Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Mon, 16 Nov 2020 13:24:01 -0300
Subject: [PATCH 18/39] cards container as css-grid

---
 .../components/Apps/components/AppsList.tsx   | 44 ++++++++++---------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AppsList.tsx b/src/routes/safe/components/Apps/components/AppsList.tsx
index 11d8cb4d74..df99426ba0 100644
--- a/src/routes/safe/components/Apps/components/AppsList.tsx
+++ b/src/routes/safe/components/Apps/components/AppsList.tsx
@@ -13,6 +13,12 @@ import { useAppList } from '../hooks/useAppList'
 import { SAFE_APP_LOADING_STATUS, SafeApp } from '../types.d'
 import AddAppForm from './AddAppForm'
 
+const Wrapper = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`
+
 const centerCSS = css`
   display: flex;
   align-items: center;
@@ -26,21 +32,20 @@ const LoadingContainer = styled.div`
 `
 
 const CardsWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: justify-content-center;
-`
-
-const CenteredMT = styled.div`
-  ${centerCSS};
-  margin-top: 16px;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, auto));
+  column-gap: 20px;
+  row-gap: 20px;
+  justify-content: space-evenly;
 `
 
 const ContentWrapper = styled.div`
-  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  flex-grow: 1;
+  align-items: center;
 `
 
 const AppsList = (): React.ReactElement => {
@@ -71,11 +76,12 @@ const AppsList = (): React.ReactElement => {
   }
 
   return (
-    <>
+    <Wrapper>
       <Menu>
         {/* TODO: Add navigation breadcrumb. Empty for now to give top margin */}
         <div />
       </Menu>
+
       <ContentWrapper>
         <CardsWrapper>
           <AppCard
@@ -99,15 +105,13 @@ const AppsList = (): React.ReactElement => {
           ))}
         </CardsWrapper>
 
-        <CenteredMT>
-          <IconText
-            color="secondary"
-            iconSize="sm"
-            iconType="info"
-            text="These are third-party apps, which means they are not owned, controlled, maintained or audited by Gnosis. Interacting with the apps is at your own risk."
-            textSize="sm"
-          />
-        </CenteredMT>
+        <IconText
+          color="secondary"
+          iconSize="sm"
+          iconType="info"
+          text="These are third-party apps, which means they are not owned, controlled, maintained or audited by Gnosis. Interacting with the apps is at your own risk."
+          textSize="sm"
+        />
       </ContentWrapper>
 
       {isAddAppModalOpen && (
@@ -117,7 +121,7 @@ const AppsList = (): React.ReactElement => {
           onClose={closeAddAppModal}
         />
       )}
-    </>
+    </Wrapper>
   )
 }
 

From 1c2a8331701ed86172d60e65fc2c188bebd1f2b5 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Mon, 16 Nov 2020 13:42:42 -0300
Subject: [PATCH 19/39] remove fixed width for cards

---
 src/routes/safe/components/Apps/components/AppCard/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/safe/components/Apps/components/AppCard/index.tsx b/src/routes/safe/components/Apps/components/AppCard/index.tsx
index 87fc2b7524..c7702808a7 100644
--- a/src/routes/safe/components/Apps/components/AppCard/index.tsx
+++ b/src/routes/safe/components/Apps/components/AppCard/index.tsx
@@ -16,7 +16,6 @@ const AppCard = styled.div`
   padding: 24px;
   margin: 10px;
   background-color: ${({ theme }) => theme.colors.white};
-  width: 244px;
   height: 232px;
   cursor: default !important;
 

From d1f2acfb19278b14f6234309f8a0ff336136ba93 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Mon, 16 Nov 2020 13:53:10 -0300
Subject: [PATCH 20/39] replace auto by 1fr

---
 src/routes/safe/components/Apps/components/AppsList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/safe/components/Apps/components/AppsList.tsx b/src/routes/safe/components/Apps/components/AppsList.tsx
index df99426ba0..d637cd8a13 100644
--- a/src/routes/safe/components/Apps/components/AppsList.tsx
+++ b/src/routes/safe/components/Apps/components/AppsList.tsx
@@ -34,7 +34,7 @@ const LoadingContainer = styled.div`
 const CardsWrapper = styled.div`
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, auto));
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   column-gap: 20px;
   row-gap: 20px;
   justify-content: space-evenly;

From 49accc957496403346f1e214fb57705b6222d65d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Mon, 16 Nov 2020 14:40:46 -0300
Subject: [PATCH 21/39] remove margin for cards

---
 src/routes/safe/components/Apps/components/AppCard/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/safe/components/Apps/components/AppCard/index.tsx b/src/routes/safe/components/Apps/components/AppCard/index.tsx
index c7702808a7..5a3ca600ec 100644
--- a/src/routes/safe/components/Apps/components/AppCard/index.tsx
+++ b/src/routes/safe/components/Apps/components/AppCard/index.tsx
@@ -14,7 +14,6 @@ const AppCard = styled.div`
   box-shadow: 1px 2px 10px 0 ${({ theme }) => fade(theme.colors.shadow.color, 0.18)};
   border-radius: 8px;
   padding: 24px;
-  margin: 10px;
   background-color: ${({ theme }) => theme.colors.white};
   height: 232px;
   cursor: default !important;

From 118873284e732af50278ce18a54dcf1b1f6af7c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Mon, 16 Nov 2020 14:54:54 -0300
Subject: [PATCH 22/39] add card component and remove some css

---
 .../safe/components/Apps/components/AppCard/index.tsx      | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AppCard/index.tsx b/src/routes/safe/components/Apps/components/AppCard/index.tsx
index 5a3ca600ec..b12d43b724 100644
--- a/src/routes/safe/components/Apps/components/AppCard/index.tsx
+++ b/src/routes/safe/components/Apps/components/AppCard/index.tsx
@@ -1,20 +1,17 @@
 import React, { SyntheticEvent } from 'react'
 import styled from 'styled-components'
 import { fade } from '@material-ui/core/styles/colorManipulator'
-import { Title, Text, Button } from '@gnosis.pm/safe-react-components'
+import { Title, Text, Button, Card } from '@gnosis.pm/safe-react-components'
 
 import appsIconSvg from 'src/assets/icons/apps.svg'
 import { AppIconSK, DescriptionSK, TitleSK } from './skeleton'
 
-const AppCard = styled.div`
+const AppCard = styled(Card)`
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: space-evenly;
   box-shadow: 1px 2px 10px 0 ${({ theme }) => fade(theme.colors.shadow.color, 0.18)};
-  border-radius: 8px;
-  padding: 24px;
-  background-color: ${({ theme }) => theme.colors.white};
   height: 232px;
   cursor: default !important;
 

From fdbcd99b342368958a322eec4a2c6b9fd6458c8e Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Mon, 16 Nov 2020 14:56:00 -0300
Subject: [PATCH 23/39] rename buttons

---
 .../AddAppForm/{SubmitButtonStatus.tsx => FormButtons.tsx}  | 6 +++---
 .../safe/components/Apps/components/AddAppForm/index.tsx    | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)
 rename src/routes/safe/components/Apps/components/AddAppForm/{SubmitButtonStatus.tsx => FormButtons.tsx} (89%)

diff --git a/src/routes/safe/components/Apps/components/AddAppForm/SubmitButtonStatus.tsx b/src/routes/safe/components/Apps/components/AddAppForm/FormButtons.tsx
similarity index 89%
rename from src/routes/safe/components/Apps/components/AddAppForm/SubmitButtonStatus.tsx
rename to src/routes/safe/components/Apps/components/AddAppForm/FormButtons.tsx
index b0248076c4..5b1f33f93e 100644
--- a/src/routes/safe/components/Apps/components/AddAppForm/SubmitButtonStatus.tsx
+++ b/src/routes/safe/components/Apps/components/AddAppForm/FormButtons.tsx
@@ -16,12 +16,12 @@ const ButtonsContainer = styled.div`
   justify-content: space-between;
 `
 
-interface SubmitButtonStatusProps {
+interface Props {
   appInfo: SafeApp
   onCancel: () => void
 }
 
-const SubmitButtonStatus = ({ appInfo, onCancel }: SubmitButtonStatusProps): ReactElement => {
+const FormButtons = ({ appInfo, onCancel }: Props): ReactElement => {
   const { valid, validating, visited } = useFormState({
     subscription: { valid: true, validating: true, visited: true },
   })
@@ -48,4 +48,4 @@ const SubmitButtonStatus = ({ appInfo, onCancel }: SubmitButtonStatusProps): Rea
   )
 }
 
-export default SubmitButtonStatus
+export default FormButtons
diff --git a/src/routes/safe/components/Apps/components/AddAppForm/index.tsx b/src/routes/safe/components/Apps/components/AddAppForm/index.tsx
index 8483cacc35..32cfaefc36 100644
--- a/src/routes/safe/components/Apps/components/AddAppForm/index.tsx
+++ b/src/routes/safe/components/Apps/components/AddAppForm/index.tsx
@@ -8,7 +8,7 @@ import Img from 'src/components/layout/Img'
 
 import AppAgreement from './AppAgreement'
 import AppUrl, { AppInfoUpdater, appUrlResolver } from './AppUrl'
-import SubmitButtonStatus from './SubmitButtonStatus'
+import FormButtons from './FormButtons'
 import { APPS_STORAGE_KEY, getEmptySafeApp } from '../../utils'
 import { saveToStorage } from 'src/utils/storage'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
@@ -78,7 +78,7 @@ const AddApp = ({ appList, closeModal }: AddAppProps): ReactElement => {
 
           <AppAgreement />
 
-          <SubmitButtonStatus appInfo={appInfo} onCancel={closeModal} />
+          <FormButtons appInfo={appInfo} onCancel={closeModal} />
         </>
       )}
     </GnoForm>

From 7b2db47aa55ec99b4819eadf91fa23810883618d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Mon, 16 Nov 2020 14:57:44 -0300
Subject: [PATCH 24/39] add margin to app list

---
 src/routes/safe/components/Apps/components/AppsList.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/safe/components/Apps/components/AppsList.tsx b/src/routes/safe/components/Apps/components/AppsList.tsx
index d637cd8a13..6eccabdc0b 100644
--- a/src/routes/safe/components/Apps/components/AppsList.tsx
+++ b/src/routes/safe/components/Apps/components/AppsList.tsx
@@ -38,6 +38,7 @@ const CardsWrapper = styled.div`
   column-gap: 20px;
   row-gap: 20px;
   justify-content: space-evenly;
+  margin: 0 0 16px 0;
 `
 
 const ContentWrapper = styled.div`

From dade47e8b2f9f594b8541042d00b353aeb7838d9 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Mon, 16 Nov 2020 17:52:35 -0300
Subject: [PATCH 25/39] refactor useAppList

---
 .../components/Apps/components/AppsList.tsx   | 32 ++++---
 .../safe/components/Apps/hooks/useAppList.ts  | 91 ++++++-------------
 src/routes/safe/components/Apps/types.d.ts    |  5 +-
 src/routes/safe/components/Apps/utils.ts      |  8 +-
 4 files changed, 50 insertions(+), 86 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AppsList.tsx b/src/routes/safe/components/Apps/components/AppsList.tsx
index 6eccabdc0b..0660a14597 100644
--- a/src/routes/safe/components/Apps/components/AppsList.tsx
+++ b/src/routes/safe/components/Apps/components/AppsList.tsx
@@ -10,7 +10,7 @@ import { useRouteMatch, useHistory } from 'react-router-dom'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
 
 import { useAppList } from '../hooks/useAppList'
-import { SAFE_APP_LOADING_STATUS, SafeApp } from '../types.d'
+import { SAFE_APP_FETCH_STATUS, SafeApp } from '../types.d'
 import AddAppForm from './AddAppForm'
 
 const Wrapper = styled.div`
@@ -65,8 +65,7 @@ const AppsList = (): React.ReactElement => {
 
   const closeAddAppModal = () => setIsAddAppModalOpen(false)
 
-  const isAppLoading = (app: SafeApp) =>
-    [SAFE_APP_LOADING_STATUS.ADDED, SAFE_APP_LOADING_STATUS.LOADING].includes(app.loadingStatus)
+  const isAppLoading = (app: SafeApp) => SAFE_APP_FETCH_STATUS.LOADING === app.fetchStatus
 
   if (!appList.length || !safeAddress) {
     return (
@@ -79,7 +78,7 @@ const AppsList = (): React.ReactElement => {
   return (
     <Wrapper>
       <Menu>
-        {/* TODO: Add navigation breadcrumb. Empty for now to give top margin */}
+        {/* TODO: Add navigation breadcrumb. Empty for now to give some top margin */}
         <div />
       </Menu>
 
@@ -93,17 +92,20 @@ const AppsList = (): React.ReactElement => {
             actionTrigger={TriggerType.Button}
           />
 
-          {appList.map((a) => (
-            <AppCard
-              isLoading={isAppLoading(a)}
-              key={a.url}
-              iconUrl={a.iconUrl}
-              name={a.name}
-              description={a.description}
-              onClick={onAddAppHandler(a.url)}
-              actionTrigger={TriggerType.Content}
-            />
-          ))}
+          {appList
+            .filter((a) => a.fetchStatus !== SAFE_APP_FETCH_STATUS.ERROR)
+            .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
+            .map((a) => (
+              <AppCard
+                isLoading={isAppLoading(a)}
+                key={a.url}
+                iconUrl={a.iconUrl}
+                name={a.name}
+                description={a.description}
+                onClick={onAddAppHandler(a.url)}
+                actionTrigger={TriggerType.Content}
+              />
+            ))}
         </CardsWrapper>
 
         <IconText
diff --git a/src/routes/safe/components/Apps/hooks/useAppList.ts b/src/routes/safe/components/Apps/hooks/useAppList.ts
index f3fda83517..bd29f43b06 100644
--- a/src/routes/safe/components/Apps/hooks/useAppList.ts
+++ b/src/routes/safe/components/Apps/hooks/useAppList.ts
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { loadFromStorage } from 'src/utils/storage'
 import { APPS_STORAGE_KEY, getAppInfoFromUrl, getEmptySafeApp, staticAppsList } from '../utils'
-import { SafeApp, StoredSafeApp, SAFE_APP_LOADING_STATUS } from '../types.d'
+import { SafeApp, StoredSafeApp, SAFE_APP_FETCH_STATUS } from '../types.d'
 import { getNetworkId } from 'src/config'
 
 type UseAppListReturnType = {
@@ -10,52 +10,45 @@ type UseAppListReturnType = {
 
 const useAppList = (): UseAppListReturnType => {
   const [appList, setAppList] = useState<SafeApp[]>([])
+  // const [appListPivot, setAppListPivot] = useState<{ string: SafeApp }>({} as { string: SafeApp })
 
   // Load apps list
   // for each URL we return a mocked safe-app with a loading status
   // it was developed to speed up initial page load, otherwise the
   // app renders a loading until all the safe-apps are fetched.
   useEffect(() => {
-    const loadApps = async () => {
-      // recover apps from storage:
-      // * third-party apps added by the user
-      // * disabled status for both static and third-party apps
-      const persistedAppList = (await loadFromStorage<StoredSafeApp[]>(APPS_STORAGE_KEY)) || []
-      let list: (StoredSafeApp & { networks?: number[] })[] = [...persistedAppList]
-
-      // merge stored apps with static apps (apps added manually can be deleted by the user)
-      staticAppsList.forEach((staticApp) => {
-        const app = list.find((persistedApp) => persistedApp.url === staticApp.url)
-        if (app) {
-          app.networks = staticApp.networks
-        } else {
-          list.push({ ...staticApp })
-        }
+    const fetchAppCallback = (res: SafeApp) => {
+      setAppList((prevStatus) => {
+        const cpPrevStatus = [...prevStatus]
+        const appIndex = cpPrevStatus.findIndex((a) => a.url === res.url)
+        const newStatus = res.error ? SAFE_APP_FETCH_STATUS.ERROR : SAFE_APP_FETCH_STATUS.SUCCESS
+        cpPrevStatus[appIndex] = { ...res, fetchStatus: newStatus }
+        return cpPrevStatus
       })
+    }
 
-      // filter app by network
-      list = list.filter((app) => {
-        // if the app does not expose supported networks, include them. (backward compatible)
-        if (!app.networks) {
-          return true
-        }
-        return app.networks.includes(getNetworkId())
-      })
+    const loadApps = async () => {
+      // recover apps from storage (third-party apps added by the user)
+      const persistedAppList =
+        (await loadFromStorage<(StoredSafeApp & { networks?: number[] })[]>(APPS_STORAGE_KEY)) || []
 
-      const apps: SafeApp[] = []
-      for (let index = 0; index < list.length; index++) {
-        const currentApp = list[index]
-        const appUrl = currentApp.url.trim()
+      // backward compatibility. In a previous implementation a safe app could be disabled, that state was
+      // persisted in the storage.
+      const customApps = persistedAppList.filter(
+        (persistedApp) => !staticAppsList.some((staticApp) => staticApp.url === persistedApp.url),
+      )
 
-        const appInfo = {
+      const apps: SafeApp[] = [...staticAppsList, ...customApps]
+        // if the app does not expose supported networks, include them. (backward compatible)
+        .filter((app) => (!app.networks ? true : app.networks.includes(getNetworkId())))
+        .map((app) => ({
           ...getEmptySafeApp(),
-          url: appUrl,
-        }
-
-        apps.push(appInfo)
-      }
+          url: app.url.trim(),
+        }))
 
       setAppList(apps)
+
+      apps.forEach((app) => getAppInfoFromUrl(app.url).then(fetchAppCallback))
     }
 
     if (!appList.length) {
@@ -63,36 +56,6 @@ const useAppList = (): UseAppListReturnType => {
     }
   }, [appList])
 
-  // fetch each safe-app
-  // replace real data if it was success remove it from the list otherwise
-  useEffect(() => {
-    if (!appList?.length) {
-      return
-    }
-
-    appList
-      .filter((app) => app.loadingStatus === SAFE_APP_LOADING_STATUS.ADDED)
-      .forEach((resApp) => {
-        let cpApps = [...appList]
-        const index = appList.findIndex((currentApp) => currentApp.url === resApp.url)
-        cpApps[index] = { ...cpApps[index], loadingStatus: SAFE_APP_LOADING_STATUS.LOADING }
-        setAppList(cpApps)
-
-        getAppInfoFromUrl(resApp.url).then((res: SafeApp) => {
-          if (res.error) {
-            // if there was an error trying to load the safe-app, remove it from the list
-            cpApps.splice(index, 1)
-            throw Error(`There was a problem trying to load app ${res.url}`)
-          } else {
-            // if the safe app was loaded correctly, update the safe-app info
-            cpApps[index] = res
-          }
-          cpApps = cpApps.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
-          setAppList(cpApps)
-        })
-      })
-  }, [appList])
-
   return {
     appList,
   }
diff --git a/src/routes/safe/components/Apps/types.d.ts b/src/routes/safe/components/Apps/types.d.ts
index 54698ac9d7..898a84a2d2 100644
--- a/src/routes/safe/components/Apps/types.d.ts
+++ b/src/routes/safe/components/Apps/types.d.ts
@@ -1,5 +1,4 @@
-export enum SAFE_APP_LOADING_STATUS {
-  ADDED = 'ADDED',
+export enum SAFE_APP_FETCH_STATUS {
   LOADING = 'LOADING',
   SUCCESS = 'SUCCESS',
   ERROR = 'ERROR',
@@ -13,7 +12,7 @@ export type SafeApp = {
   disabled?: boolean
   description: string
   error: boolean
-  loadingStatus: SAFE_APP_LOADING_STATUS
+  fetchStatus: SAFE_APP_FETCH_STATUS
 }
 
 export type StoredSafeApp = {
diff --git a/src/routes/safe/components/Apps/utils.ts b/src/routes/safe/components/Apps/utils.ts
index 02ae8e43f4..c99f3d9d87 100644
--- a/src/routes/safe/components/Apps/utils.ts
+++ b/src/routes/safe/components/Apps/utils.ts
@@ -1,7 +1,7 @@
 import axios from 'axios'
 import memoize from 'lodash.memoize'
 
-import { SafeApp, SAFE_APP_LOADING_STATUS } from './types.d'
+import { SafeApp, SAFE_APP_FETCH_STATUS } from './types.d'
 
 import { getGnosisSafeAppsUrl } from 'src/config'
 import { getContentFromENS } from 'src/logic/wallets/getWeb3'
@@ -147,7 +147,7 @@ export const getEmptySafeApp = (): SafeApp => {
     iconUrl: appsIconSvg,
     error: false,
     description: '',
-    loadingStatus: SAFE_APP_LOADING_STATUS.ADDED,
+    fetchStatus: SAFE_APP_FETCH_STATUS.LOADING,
   }
 }
 
@@ -156,7 +156,7 @@ export const getAppInfoFromUrl = memoize(
     let res = {
       ...getEmptySafeApp(),
       error: true,
-      loadingStatus: SAFE_APP_LOADING_STATUS.ERROR,
+      loadingStatus: SAFE_APP_FETCH_STATUS.ERROR,
     }
 
     if (!appUrl?.length) {
@@ -184,7 +184,7 @@ export const getAppInfoFromUrl = memoize(
         ...appInfo.data,
         id: JSON.stringify({ url: res.url, name: appInfo.data.name.substring(0, remainingSpace) }),
         error: false,
-        loadingStatus: SAFE_APP_LOADING_STATUS.SUCCESS,
+        loadingStatus: SAFE_APP_FETCH_STATUS.SUCCESS,
       }
 
       if (appInfo.data.iconPath) {

From 81284b3128e9497f96217243ce9a4b4d73d1337a Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Mon, 16 Nov 2020 18:01:54 -0300
Subject: [PATCH 26/39] fix disclaimer always flashing

---
 src/routes/safe/components/Apps/components/AppFrame.tsx  | 2 +-
 src/routes/safe/components/Apps/hooks/useLegalConsent.ts | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AppFrame.tsx b/src/routes/safe/components/Apps/components/AppFrame.tsx
index c5a11d372e..3b55c7929f 100644
--- a/src/routes/safe/components/Apps/components/AppFrame.tsx
+++ b/src/routes/safe/components/Apps/components/AppFrame.tsx
@@ -216,7 +216,7 @@ const AppFrame = ({ appUrl }: Props): React.ReactElement => {
     )
   }
 
-  if (!consentReceived) {
+  if (consentReceived === false) {
     return <LegalDisclaimer onCancel={redirectToBalance} onConfirm={onConsentReceipt} />
   }
 
diff --git a/src/routes/safe/components/Apps/hooks/useLegalConsent.ts b/src/routes/safe/components/Apps/hooks/useLegalConsent.ts
index ec224c8723..c9bbf86ada 100644
--- a/src/routes/safe/components/Apps/hooks/useLegalConsent.ts
+++ b/src/routes/safe/components/Apps/hooks/useLegalConsent.ts
@@ -3,8 +3,8 @@ import { loadFromStorage, saveToStorage } from 'src/utils/storage'
 
 const APPS_LEGAL_CONSENT_RECEIVED = 'APPS_LEGAL_CONSENT_RECEIVED'
 
-const useLegalConsent = (): { consentReceived: boolean; onConsentReceipt: () => void } => {
-  const [consentReceived, setConsentReceived] = useState<boolean>(false)
+const useLegalConsent = (): { consentReceived: boolean | undefined; onConsentReceipt: () => void } => {
+  const [consentReceived, setConsentReceived] = useState<boolean | undefined>()
 
   useEffect(() => {
     const checkLegalDisclaimer = async () => {
@@ -12,6 +12,8 @@ const useLegalConsent = (): { consentReceived: boolean; onConsentReceipt: () =>
 
       if (storedConsentReceived) {
         setConsentReceived(true)
+      } else {
+        setConsentReceived(false)
       }
     }
 

From c518f11f4a4a8af518d3778a76555f0e8cca363c Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Mon, 16 Nov 2020 18:02:54 -0300
Subject: [PATCH 27/39] fix pointer cursor for Add app icon

---
 .../safe/components/Apps/components/AppCard/index.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AppCard/index.tsx b/src/routes/safe/components/Apps/components/AppCard/index.tsx
index b12d43b724..48dadf6b58 100644
--- a/src/routes/safe/components/Apps/components/AppCard/index.tsx
+++ b/src/routes/safe/components/Apps/components/AppCard/index.tsx
@@ -26,9 +26,10 @@ const AppCard = styled(Card)`
   }
 `
 
-const IconImg = styled.img<{ size: 'md' | 'lg'; src: string | undefined }>`
+const IconImg = styled.img<{ size: 'md' | 'lg'; src: string | undefined; isClickable: boolean }>`
   width: ${({ size }) => (size === 'md' ? '48px' : '102px')};
   height: ${({ size }) => (size === 'md' ? '60px' : '92px')};
+  cursor: ${({ isClickable }) => (isClickable ? 'pointer' : 'default')};
   object-fit: contain;
 `
 
@@ -102,7 +103,13 @@ const Apps = ({
   return (
     <AppCard className={className}>
       <ConditionalClickableContent isClickable={actionTrigger === TriggerType.Content} onClick={onClick}>
-        <IconImg alt={`${name || 'App'} Logo`} src={iconUrl} onError={setAppImageFallback} size={iconSize} />
+        <IconImg
+          alt={`${name || 'App'} Logo`}
+          src={iconUrl}
+          onError={setAppImageFallback}
+          size={iconSize}
+          isClickable={actionTrigger === TriggerType.Content}
+        />
       </ConditionalClickableContent>
 
       {name && (

From 5b81c6ea496c9dcc35ead98c201e4942d1f73547 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Mon, 16 Nov 2020 18:12:43 -0300
Subject: [PATCH 28/39] uncoment needed code

---
 .../safe/components/Apps/hooks/useIframeMessageHandler.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/routes/safe/components/Apps/hooks/useIframeMessageHandler.ts b/src/routes/safe/components/Apps/hooks/useIframeMessageHandler.ts
index dfa75a501e..3ca4844a8a 100644
--- a/src/routes/safe/components/Apps/hooks/useIframeMessageHandler.ts
+++ b/src/routes/safe/components/Apps/hooks/useIframeMessageHandler.ts
@@ -161,10 +161,10 @@ const useIframeMessageHandler = (
       if (message.origin === window.origin) {
         return
       }
-      // if (!selectedApp?.url.includes(message.origin)) {
-      //   console.error(`ThirdPartyApp: A message was received from an unknown origin ${message.origin}`)
-      //   return
-      // }
+      if (!selectedApp?.url.includes(message.origin)) {
+        console.error(`ThirdPartyApp: A message was received from an unknown origin ${message.origin}`)
+        return
+      }
       handleIframeMessage(message.data.messageId, message.data.data, message.data.requestId)
     }
 

From f0f4da46a6f742244e950e2119ccb30f3bd4d308 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Tue, 17 Nov 2020 11:01:23 -0300
Subject: [PATCH 29/39] add styled component keyframe

---
 .../Apps/components/AppCard/skeleton.tsx      | 77 ++++---------------
 1 file changed, 16 insertions(+), 61 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AppCard/skeleton.tsx b/src/routes/safe/components/Apps/components/AppCard/skeleton.tsx
index 1cd86fce8f..92ef8718d2 100644
--- a/src/routes/safe/components/Apps/components/AppCard/skeleton.tsx
+++ b/src/routes/safe/components/Apps/components/AppCard/skeleton.tsx
@@ -1,4 +1,16 @@
-import styled from 'styled-components'
+import styled, { keyframes } from 'styled-components'
+
+const gradientSK = keyframes`
+  0% {
+    background-position: 0% 54%;
+  }
+  50% {
+    background-position: 100% 47%;
+  }
+  100% {
+    background-position: 0% 54%;
+  }
+`
 
 export const AppIconSK = styled.div`
   height: 60px;
@@ -8,56 +20,7 @@ export const AppIconSK = styled.div`
   background-color: lightgrey;
   background: linear-gradient(84deg, lightgrey, transparent);
   background-size: 400% 400%;
-
-  -webkit-animation: gradient-SK 1.5s ease infinite;
-  -moz-animation: gradient-SK 1.5s ease infinite;
-  -o-animation: gradient-SK 1.5s ease infinite;
-  animation: gradient-SK 1.5s ease infinite;
-
-  @-webkit-keyframes gradient-SK {
-    0% {
-      background-position: 0% 54%;
-    }
-    50% {
-      background-position: 100% 47%;
-    }
-    100% {
-      background-position: 0% 54%;
-    }
-  }
-  @-moz-keyframes gradient-SK {
-    0% {
-      background-position: 0% 54%;
-    }
-    50% {
-      background-position: 100% 47%;
-    }
-    100% {
-      background-position: 0% 54%;
-    }
-  }
-  @-o-keyframes gradient-SK {
-    0% {
-      background-position: 0% 54%;
-    }
-    50% {
-      background-position: 100% 47%;
-    }
-    100% {
-      background-position: 0% 54%;
-    }
-  }
-  @keyframes gradient-SK {
-    0% {
-      background-position: 0% 54%;
-    }
-    50% {
-      background-position: 100% 47%;
-    }
-    100% {
-      background-position: 0% 54%;
-    }
-  }
+  animation: ${gradientSK} 1.5s ease infinite;
 `
 export const TitleSK = styled.div`
   height: 24px;
@@ -66,11 +29,7 @@ export const TitleSK = styled.div`
   background-color: lightgrey;
   background: linear-gradient(84deg, lightgrey, transparent);
   background-size: 400% 400%;
-
-  -webkit-animation: gradient-SK 1.5s ease infinite;
-  -moz-animation: gradient-SK 1.5s ease infinite;
-  -o-animation: gradient-SK 1.5s ease infinite;
-  animation: gradient-SK 1.5s ease infinite;
+  animation: ${gradientSK} 1.5s ease infinite;
 `
 export const DescriptionSK = styled.div`
   height: 16px;
@@ -78,9 +37,5 @@ export const DescriptionSK = styled.div`
   background-color: lightgrey;
   background: linear-gradient(84deg, lightgrey, transparent);
   background-size: 400% 400%;
-
-  -webkit-animation: gradient-SK 1.5s ease infinite;
-  -moz-animation: gradient-SK 1.5s ease infinite;
-  -o-animation: gradient-SK 1.5s ease infinite;
-  animation: gradient-SK 1.5s ease infinite;
+  animation: ${gradientSK} 1.5s ease infinite;
 `

From 421c7a4213b27358cd71bc8a47f36ad329b59ed4 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 17 Nov 2020 13:45:42 -0300
Subject: [PATCH 30/39] update safe-react-components

---
 package.json | 2 +-
 yarn.lock    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 038b862e83..eb9139b49f 100644
--- a/package.json
+++ b/package.json
@@ -168,7 +168,7 @@
   "dependencies": {
     "@gnosis.pm/safe-apps-sdk": "https://github.com/gnosis/safe-apps-sdk.git#3f0689f",
     "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
-    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#03ff672d6f73366297986d58631f9582fe2ed4a3",
+    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#ff29c3c",
     "@gnosis.pm/util-contracts": "2.0.6",
     "@ledgerhq/hw-transport-node-hid": "5.28.0",
     "@material-ui/core": "4.11.0",
diff --git a/yarn.lock b/yarn.lock
index c9c34bc5af..198ec5fa4c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1522,9 +1522,9 @@
     solc "0.5.14"
     truffle "^5.1.21"
 
-"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#03ff672d6f73366297986d58631f9582fe2ed4a3":
+"@gnosis.pm/safe-react-components@https://github.com/gnosis/safe-react-components.git#ff29c3c":
   version "0.4.0"
-  resolved "https://github.com/gnosis/safe-react-components.git#03ff672d6f73366297986d58631f9582fe2ed4a3"
+  resolved "https://github.com/gnosis/safe-react-components.git#ff29c3ccfd391142b92edefba0f773aaf16f1799"
   dependencies:
     classnames "^2.2.6"
     polished "^3.6.7"

From 2d6fd859cada69913700e0670083ede2a168b234 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 17 Nov 2020 13:46:05 -0300
Subject: [PATCH 31/39] review fixes

---
 .../Apps/components/AppCard/index.stories.tsx |   5 +-
 .../Apps/components/AppCard/index.tsx         |  49 ++-----
 .../components/Apps/components/AppFrame.tsx   | 136 +++++++++---------
 .../components/Apps/components/AppsList.tsx   |  11 +-
 4 files changed, 79 insertions(+), 122 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx b/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx
index 2cc1b76f40..32020d3ee2 100644
--- a/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx
+++ b/src/routes/safe/components/Apps/components/AppCard/index.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-import AppCard, { TriggerType } from './index'
+import AppCard from './index'
 
 import AddAppIcon from 'src/routes/safe/components/Apps/assets/addApp.svg'
 
@@ -12,7 +12,7 @@ export default {
 export const Loading = (): React.ReactElement => <AppCard isLoading />
 
 export const AddCustomApp = (): React.ReactElement => (
-  <AppCard iconUrl={AddAppIcon} onClick={console.log} buttonText="Add custom app" actionTrigger={TriggerType.Content} />
+  <AppCard iconUrl={AddAppIcon} onClick={console.log} buttonText="Add custom app" />
 )
 
 export const LoadedApp = (): React.ReactElement => (
@@ -20,7 +20,6 @@ export const LoadedApp = (): React.ReactElement => (
     iconUrl="https://cryptologos.cc/logos/versions/gnosis-gno-gno-logo-circle.svg?v=007"
     name="Gnosis"
     description="Gnosis safe app"
-    actionTrigger={TriggerType.Button}
     onClick={console.log}
   />
 )
diff --git a/src/routes/safe/components/Apps/components/AppCard/index.tsx b/src/routes/safe/components/Apps/components/AppCard/index.tsx
index 48dadf6b58..0035b54404 100644
--- a/src/routes/safe/components/Apps/components/AppCard/index.tsx
+++ b/src/routes/safe/components/Apps/components/AppCard/index.tsx
@@ -13,7 +13,7 @@ const AppCard = styled(Card)`
   justify-content: space-evenly;
   box-shadow: 1px 2px 10px 0 ${({ theme }) => fade(theme.colors.shadow.color, 0.18)};
   height: 232px;
-  cursor: default !important;
+  cursor: pointer;
 
   :hover {
     box-shadow: 1px 2px 16px 0 ${({ theme }) => fade(theme.colors.shadow.color, 0.35)};
@@ -26,10 +26,9 @@ const AppCard = styled(Card)`
   }
 `
 
-const IconImg = styled.img<{ size: 'md' | 'lg'; src: string | undefined; isClickable: boolean }>`
+const IconImg = styled.img<{ size: 'md' | 'lg'; src: string | undefined }>`
   width: ${({ size }) => (size === 'md' ? '48px' : '102px')};
   height: ${({ size }) => (size === 'md' ? '60px' : '92px')};
-  cursor: ${({ isClickable }) => (isClickable ? 'pointer' : 'default')};
   object-fit: contain;
 `
 
@@ -42,25 +41,11 @@ const AppDescription = styled(Text)`
   text-align: center;
 `
 
-const ClickableContent = styled.div`
-  cursor: pointer;
-`
-
 export const setAppImageFallback = (error: SyntheticEvent<HTMLImageElement, Event>): void => {
   error.currentTarget.onerror = null
   error.currentTarget.src = appsIconSvg
 }
 
-const ConditionalClickableContent = ({
-  isClickable,
-  onClick,
-  children,
-}: {
-  isClickable: boolean
-  onClick: () => void
-  children: React.ReactNode
-}): React.ReactElement => <ClickableContent onClick={isClickable ? onClick : undefined}>{children}</ClickableContent>
-
 export enum TriggerType {
   Button,
   Content,
@@ -68,7 +53,6 @@ export enum TriggerType {
 
 type Props = {
   onClick?: () => void
-  actionTrigger?: TriggerType
   isLoading?: boolean
   className?: string
   name?: string
@@ -87,7 +71,6 @@ const Apps = ({
   iconSize = 'md',
   buttonText,
   onClick = () => undefined,
-  actionTrigger,
 }: Props): React.ReactElement => {
   if (isLoading) {
     return (
@@ -101,30 +84,14 @@ const Apps = ({
   }
 
   return (
-    <AppCard className={className}>
-      <ConditionalClickableContent isClickable={actionTrigger === TriggerType.Content} onClick={onClick}>
-        <IconImg
-          alt={`${name || 'App'} Logo`}
-          src={iconUrl}
-          onError={setAppImageFallback}
-          size={iconSize}
-          isClickable={actionTrigger === TriggerType.Content}
-        />
-      </ConditionalClickableContent>
-
-      {name && (
-        <ConditionalClickableContent isClickable={actionTrigger === TriggerType.Content} onClick={onClick}>
-          <AppName size="sm">{name}</AppName>
-        </ConditionalClickableContent>
-      )}
+    <AppCard className={className} onClick={onClick}>
+      <IconImg alt={`${name || 'App'} Logo`} src={iconUrl} onError={setAppImageFallback} size={iconSize} />
 
-      {description && (
-        <ConditionalClickableContent isClickable={actionTrigger === TriggerType.Content} onClick={onClick}>
-          <AppDescription size="lg">{description} </AppDescription>
-        </ConditionalClickableContent>
-      )}
+      {name && <AppName size="sm">{name}</AppName>}
+
+      {description && <AppDescription size="lg">{description} </AppDescription>}
 
-      {actionTrigger === TriggerType.Button && (
+      {buttonText && (
         <Button size="md" color="primary" variant="contained" onClick={onClick}>
           {buttonText}
         </Button>
diff --git a/src/routes/safe/components/Apps/components/AppFrame.tsx b/src/routes/safe/components/Apps/components/AppFrame.tsx
index 3b55c7929f..60f56b6aae 100644
--- a/src/routes/safe/components/Apps/components/AppFrame.tsx
+++ b/src/routes/safe/components/Apps/components/AppFrame.tsx
@@ -41,13 +41,6 @@ import LegalDisclaimer from './LegalDisclaimer'
 import { APPS_STORAGE_KEY, getAppInfoFromUrl } from '../utils'
 import { SafeApp, StoredSafeApp } from '../types.d'
 
-const StyledIframe = styled.iframe`
-  padding: 15px;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-`
-
 const LoadingContainer = styled.div`
   width: 100%;
   height: 100%;
@@ -56,25 +49,30 @@ const LoadingContainer = styled.div`
   justify-content: center;
 `
 
-const IframeWrapper = styled.div`
-  position: relative;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-`
-
-const Centered = styled.div`
+const OwnerDisclaimer = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
+  height: 476px;
 `
 
-const ContentWrapper = styled(Card)`
-  height: calc(100% - 127px);
-  width: calc(100% - 50px);
+const AppWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`
+
+const StyledCard = styled(Card)`
   margin: 20px 0;
+  flex-grow: 1;
+`
+
+const StyledIframe = styled.iframe`
+  height: 100%;
+  width: 100%;
   overflow: auto;
+  box-sizing: border-box;
 `
 
 type ConfirmTransactionModalState = {
@@ -222,15 +220,15 @@ const AppFrame = ({ appUrl }: Props): React.ReactElement => {
 
   if (NETWORK_NAME === 'UNKNOWN' || !granted) {
     return (
-      <Centered style={{ height: '476px' }}>
+      <OwnerDisclaimer>
         <FixedIcon type="notOwner" />
         <Title size="xs">To use apps, you must be an owner of this Safe</Title>
-      </Centered>
+      </OwnerDisclaimer>
     )
   }
 
   return (
-    <>
+    <AppWrapper>
       <Menu>
         {isAppDeletable && (
           <ButtonLink color="error" iconType="delete" onClick={openRemoveModal}>
@@ -238,57 +236,57 @@ const AppFrame = ({ appUrl }: Props): React.ReactElement => {
           </ButtonLink>
         )}
       </Menu>
-      <ContentWrapper>
-        <IframeWrapper>
-          {appIsLoading && (
-            <LoadingContainer>
-              <Loader size="md" />
-            </LoadingContainer>
-          )}
-          <StyledIframe
-            frameBorder="0"
-            id={`iframe-${appUrl}`}
-            ref={iframeRef}
-            src={appUrl}
-            title={appUrl} // TODO: Change it!
-            onLoad={onIframeLoad}
-          />
-        </IframeWrapper>
-
-        {isRemoveModalOpen && (
-          <GenericModal
-            title={
-              <Title size="sm" withoutMargin>
-                Remove app
-              </Title>
-            }
-            body={<Text size="md">This action will remove {safeApp.name} from the interface</Text>}
-            footer={
-              <ModalFooterConfirmation
-                cancelText="Cancel"
-                handleCancel={closeRemoveModal}
-                handleOk={removeApp}
-                okText="Remove"
-              />
-            }
-            onClose={closeRemoveModal}
-          />
+
+      <StyledCard>
+        {appIsLoading && (
+          <LoadingContainer>
+            <Loader size="md" />
+          </LoadingContainer>
         )}
 
-        <ConfirmTransactionModal
-          isOpen={confirmTransactionModal.isOpen}
-          app={safeApp as SafeApp}
-          safeAddress={safeAddress}
-          ethBalance={ethBalance as string}
-          safeName={safeName as string}
-          txs={confirmTransactionModal.txs}
-          onClose={closeConfirmationModal}
-          onUserConfirm={onUserTxConfirm}
-          params={confirmTransactionModal.params}
-          onTxReject={onTxReject}
+        <StyledIframe
+          frameBorder="0"
+          id={`iframe-${appUrl}`}
+          ref={iframeRef}
+          src={appUrl}
+          title={safeApp.name}
+          onLoad={onIframeLoad}
+        />
+      </StyledCard>
+
+      {isRemoveModalOpen && (
+        <GenericModal
+          title={
+            <Title size="sm" withoutMargin>
+              Remove app
+            </Title>
+          }
+          body={<Text size="md">This action will remove {safeApp.name} from the interface</Text>}
+          footer={
+            <ModalFooterConfirmation
+              cancelText="Cancel"
+              handleCancel={closeRemoveModal}
+              handleOk={removeApp}
+              okText="Remove"
+            />
+          }
+          onClose={closeRemoveModal}
         />
-      </ContentWrapper>
-    </>
+      )}
+
+      <ConfirmTransactionModal
+        isOpen={confirmTransactionModal.isOpen}
+        app={safeApp as SafeApp}
+        safeAddress={safeAddress}
+        ethBalance={ethBalance as string}
+        safeName={safeName as string}
+        txs={confirmTransactionModal.txs}
+        onClose={closeConfirmationModal}
+        onUserConfirm={onUserTxConfirm}
+        params={confirmTransactionModal.params}
+        onTxReject={onTxReject}
+      />
+    </AppWrapper>
   )
 }
 
diff --git a/src/routes/safe/components/Apps/components/AppsList.tsx b/src/routes/safe/components/Apps/components/AppsList.tsx
index 0660a14597..44e242492f 100644
--- a/src/routes/safe/components/Apps/components/AppsList.tsx
+++ b/src/routes/safe/components/Apps/components/AppsList.tsx
@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'
 import { GenericModal, IconText, Loader, Menu } from '@gnosis.pm/safe-react-components'
 
 import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
-import AppCard, { TriggerType } from 'src/routes/safe/components/Apps/components/AppCard'
+import AppCard from 'src/routes/safe/components/Apps/components/AppCard'
 import AddAppIcon from 'src/routes/safe/components/Apps/assets/addApp.svg'
 import { useRouteMatch, useHistory } from 'react-router-dom'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
@@ -84,13 +84,7 @@ const AppsList = (): React.ReactElement => {
 
       <ContentWrapper>
         <CardsWrapper>
-          <AppCard
-            iconUrl={AddAppIcon}
-            onClick={openAddAppModal}
-            buttonText="Add custom app"
-            iconSize="lg"
-            actionTrigger={TriggerType.Button}
-          />
+          <AppCard iconUrl={AddAppIcon} onClick={openAddAppModal} buttonText="Add custom app" iconSize="lg" />
 
           {appList
             .filter((a) => a.fetchStatus !== SAFE_APP_FETCH_STATUS.ERROR)
@@ -103,7 +97,6 @@ const AppsList = (): React.ReactElement => {
                 name={a.name}
                 description={a.description}
                 onClick={onAddAppHandler(a.url)}
-                actionTrigger={TriggerType.Content}
               />
             ))}
         </CardsWrapper>

From 1fbb83dda09b1179e528d930f7d0ca5a66e60ab8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Tue, 17 Nov 2020 14:28:00 -0300
Subject: [PATCH 32/39] fix margin and card height, icon size

---
 .../components/Apps/components/AppCard/index.tsx     | 12 +++++++-----
 .../safe/components/Apps/components/AppsList.tsx     |  2 +-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AppCard/index.tsx b/src/routes/safe/components/Apps/components/AppCard/index.tsx
index 48dadf6b58..c956b10218 100644
--- a/src/routes/safe/components/Apps/components/AppCard/index.tsx
+++ b/src/routes/safe/components/Apps/components/AppCard/index.tsx
@@ -12,22 +12,24 @@ const AppCard = styled(Card)`
   flex-direction: column;
   justify-content: space-evenly;
   box-shadow: 1px 2px 10px 0 ${({ theme }) => fade(theme.colors.shadow.color, 0.18)};
-  height: 232px;
+  height: 232px !important;
   cursor: default !important;
+  box-sizing: border-box;
 
   :hover {
     box-shadow: 1px 2px 16px 0 ${({ theme }) => fade(theme.colors.shadow.color, 0.35)};
     transition: box-shadow 0.3s ease-in-out;
+    background-color: ${({ theme }) => theme.colors.background};
     cursor: pointer;
 
-    h4 {
+    h5 {
       color: ${({ theme }) => theme.colors.primary};
     }
   }
 `
 
 const IconImg = styled.img<{ size: 'md' | 'lg'; src: string | undefined; isClickable: boolean }>`
-  width: ${({ size }) => (size === 'md' ? '48px' : '102px')};
+  width: ${({ size }) => (size === 'md' ? '60px' : '102px')};
   height: ${({ size }) => (size === 'md' ? '60px' : '92px')};
   cursor: ${({ isClickable }) => (isClickable ? 'pointer' : 'default')};
   object-fit: contain;
@@ -38,7 +40,7 @@ const AppName = styled(Title)`
 `
 
 const AppDescription = styled(Text)`
-  height: 40px;
+  height: 71px;
   text-align: center;
 `
 
@@ -114,7 +116,7 @@ const Apps = ({
 
       {name && (
         <ConditionalClickableContent isClickable={actionTrigger === TriggerType.Content} onClick={onClick}>
-          <AppName size="sm">{name}</AppName>
+          <AppName size="xs">{name}</AppName>
         </ConditionalClickableContent>
       )}
 
diff --git a/src/routes/safe/components/Apps/components/AppsList.tsx b/src/routes/safe/components/Apps/components/AppsList.tsx
index 0660a14597..d518e635fb 100644
--- a/src/routes/safe/components/Apps/components/AppsList.tsx
+++ b/src/routes/safe/components/Apps/components/AppsList.tsx
@@ -34,7 +34,7 @@ const LoadingContainer = styled.div`
 const CardsWrapper = styled.div`
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(243px, 1fr));
   column-gap: 20px;
   row-gap: 20px;
   justify-content: space-evenly;

From a121c17aa028fe8412c3a0a40eaa64c8985f3958 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Tue, 17 Nov 2020 14:55:09 -0300
Subject: [PATCH 33/39] fix margin in iconImg and app name

---
 src/routes/safe/components/Apps/components/AppCard/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/routes/safe/components/Apps/components/AppCard/index.tsx b/src/routes/safe/components/Apps/components/AppCard/index.tsx
index 854f95163e..65601c914c 100644
--- a/src/routes/safe/components/Apps/components/AppCard/index.tsx
+++ b/src/routes/safe/components/Apps/components/AppCard/index.tsx
@@ -31,11 +31,13 @@ const AppCard = styled(Card)`
 const IconImg = styled.img<{ size: 'md' | 'lg'; src: string | undefined }>`
   width: ${({ size }) => (size === 'md' ? '60px' : '102px')};
   height: ${({ size }) => (size === 'md' ? '60px' : '92px')};
+  margin-top: ${({ size }) => (size === 'md' ? '0' : '-16px')};
   object-fit: contain;
 `
 
 const AppName = styled(Title)`
   text-align: center;
+  margin: 16px 0 9px 0;
 `
 
 const AppDescription = styled(Text)`

From 210358bc4de04cf018ef1605279933bb13de0940 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 18 Nov 2020 12:04:06 -0300
Subject: [PATCH 34/39] fix margins on apps container (breadcrumb area)

---
 src/routes/safe/components/Apps/components/AppFrame.tsx | 7 ++++++-
 src/routes/safe/components/Apps/components/AppsList.tsx | 5 ++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AppFrame.tsx b/src/routes/safe/components/Apps/components/AppFrame.tsx
index 60f56b6aae..49653926b7 100644
--- a/src/routes/safe/components/Apps/components/AppFrame.tsx
+++ b/src/routes/safe/components/Apps/components/AppFrame.tsx
@@ -64,7 +64,7 @@ const AppWrapper = styled.div`
 `
 
 const StyledCard = styled(Card)`
-  margin: 20px 0;
+  /* margin: 20px 0; */
   flex-grow: 1;
 `
 
@@ -75,6 +75,10 @@ const StyledIframe = styled.iframe`
   box-sizing: border-box;
 `
 
+const Breadcrumb = styled.div`
+  height: 51px;
+`
+
 type ConfirmTransactionModalState = {
   isOpen: boolean
   txs: Transaction[]
@@ -230,6 +234,7 @@ const AppFrame = ({ appUrl }: Props): React.ReactElement => {
   return (
     <AppWrapper>
       <Menu>
+        <Breadcrumb />
         {isAppDeletable && (
           <ButtonLink color="error" iconType="delete" onClick={openRemoveModal}>
             Remove app
diff --git a/src/routes/safe/components/Apps/components/AppsList.tsx b/src/routes/safe/components/Apps/components/AppsList.tsx
index 929b9f6205..ac369dc62b 100644
--- a/src/routes/safe/components/Apps/components/AppsList.tsx
+++ b/src/routes/safe/components/Apps/components/AppsList.tsx
@@ -48,6 +48,9 @@ const ContentWrapper = styled.div`
   flex-grow: 1;
   align-items: center;
 `
+const Breadcrumb = styled.div`
+  height: 51px;
+`
 
 const AppsList = (): React.ReactElement => {
   const history = useHistory()
@@ -79,7 +82,7 @@ const AppsList = (): React.ReactElement => {
     <Wrapper>
       <Menu>
         {/* TODO: Add navigation breadcrumb. Empty for now to give some top margin */}
-        <div />
+        <Breadcrumb />
       </Menu>
 
       <ContentWrapper>

From 36131225af5e57500a8babe65bdff7f23f2c442a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 18 Nov 2020 12:06:24 -0300
Subject: [PATCH 35/39] remove style comment

---
 src/routes/safe/components/Apps/components/AppFrame.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/safe/components/Apps/components/AppFrame.tsx b/src/routes/safe/components/Apps/components/AppFrame.tsx
index 49653926b7..aa3f37ee56 100644
--- a/src/routes/safe/components/Apps/components/AppFrame.tsx
+++ b/src/routes/safe/components/Apps/components/AppFrame.tsx
@@ -64,7 +64,6 @@ const AppWrapper = styled.div`
 `
 
 const StyledCard = styled(Card)`
-  /* margin: 20px 0; */
   flex-grow: 1;
 `
 

From 2937fb4716b6a1ec793705e9bbbc7c2c96c41d23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Fri, 20 Nov 2020 09:36:58 -0300
Subject: [PATCH 36/39] fix margin on HelpCenter / remove overflow in sidebar

---
 src/components/AppLayout/Sidebar/index.tsx | 2 +-
 src/components/AppLayout/index.tsx         | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/AppLayout/Sidebar/index.tsx b/src/components/AppLayout/Sidebar/index.tsx
index 673b994dd6..b01876a823 100644
--- a/src/components/AppLayout/Sidebar/index.tsx
+++ b/src/components/AppLayout/Sidebar/index.tsx
@@ -16,7 +16,7 @@ const HelpContainer = styled.div`
 const HelpCenterLink = styled.a`
   height: 30px;
   width: 166px;
-  padding: 6px 0 0 16px;
+  padding: 6px 0 8px 16px;
   margin: 14px 0px;
   text-decoration: none;
   display: block;
diff --git a/src/components/AppLayout/index.tsx b/src/components/AppLayout/index.tsx
index 5704ec0c28..1426788ae5 100644
--- a/src/components/AppLayout/index.tsx
+++ b/src/components/AppLayout/index.tsx
@@ -34,7 +34,6 @@ const BodyWrapper = styled.div`
 const SidebarWrapper = styled.aside`
   height: 100%;
   width: 200px;
-  overflow-y: auto;
   display: flex;
   flex-direction: column;
   z-index: 1;

From 497ada5d0fd3533aaf64fdb6d8dca9c446150199 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 24 Nov 2020 15:34:19 -0300
Subject: [PATCH 37/39] review changes

---
 .../safe/components/Apps/components/AddAppForm/FormButtons.tsx  | 2 +-
 src/routes/safe/components/Apps/components/AddAppForm/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AddAppForm/FormButtons.tsx b/src/routes/safe/components/Apps/components/AddAppForm/FormButtons.tsx
index 5b1f33f93e..fbdcace706 100644
--- a/src/routes/safe/components/Apps/components/AddAppForm/FormButtons.tsx
+++ b/src/routes/safe/components/Apps/components/AddAppForm/FormButtons.tsx
@@ -28,7 +28,7 @@ const FormButtons = ({ appInfo, onCancel }: Props): ReactElement => {
 
   const isSubmitDisabled = useMemo(() => {
     // if non visited, fields were not evaluated yet. Then, the default value is considered invalid
-    const fieldsVisited = visited?.agreementAccepted && visited.appUrl
+    const fieldsVisited = visited?.agreementAccepted && visited?.appUrl
 
     return validating || !valid || !fieldsVisited || !isAppManifestValid(appInfo)
   }, [validating, valid, visited, appInfo])
diff --git a/src/routes/safe/components/Apps/components/AddAppForm/index.tsx b/src/routes/safe/components/Apps/components/AddAppForm/index.tsx
index 32cfaefc36..0841e27af4 100644
--- a/src/routes/safe/components/Apps/components/AddAppForm/index.tsx
+++ b/src/routes/safe/components/Apps/components/AddAppForm/index.tsx
@@ -9,7 +9,7 @@ import Img from 'src/components/layout/Img'
 import AppAgreement from './AppAgreement'
 import AppUrl, { AppInfoUpdater, appUrlResolver } from './AppUrl'
 import FormButtons from './FormButtons'
-import { APPS_STORAGE_KEY, getEmptySafeApp } from '../../utils'
+import { APPS_STORAGE_KEY, getEmptySafeApp } from 'src/routes/safe/components/Apps/utils'
 import { saveToStorage } from 'src/utils/storage'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
 import { useHistory, useRouteMatch } from 'react-router-dom'

From 3dac823ad52edbb6ab27708314914704be2f4233 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 24 Nov 2020 16:55:47 -0300
Subject: [PATCH 38/39] review changes

---
 .../components/Apps/components/AppCard/index.tsx   | 14 +++++++-------
 .../safe/components/Apps/components/AppsList.tsx   |  1 -
 .../safe/components/Apps/hooks/useAppList.ts       |  2 +-
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/routes/safe/components/Apps/components/AppCard/index.tsx b/src/routes/safe/components/Apps/components/AppCard/index.tsx
index 65601c914c..a28053d098 100644
--- a/src/routes/safe/components/Apps/components/AppCard/index.tsx
+++ b/src/routes/safe/components/Apps/components/AppCard/index.tsx
@@ -6,7 +6,7 @@ import { Title, Text, Button, Card } from '@gnosis.pm/safe-react-components'
 import appsIconSvg from 'src/assets/icons/apps.svg'
 import { AppIconSK, DescriptionSK, TitleSK } from './skeleton'
 
-const AppCard = styled(Card)`
+const StyledAppCard = styled(Card)`
   display: flex;
   align-items: center;
   flex-direction: column;
@@ -66,7 +66,7 @@ type Props = {
   buttonText?: string
 }
 
-const Apps = ({
+const AppCard = ({
   isLoading = false,
   className,
   name,
@@ -78,17 +78,17 @@ const Apps = ({
 }: Props): React.ReactElement => {
   if (isLoading) {
     return (
-      <AppCard className={className}>
+      <StyledAppCard className={className}>
         <AppIconSK />
         <TitleSK />
         <DescriptionSK />
         <DescriptionSK />
-      </AppCard>
+      </StyledAppCard>
     )
   }
 
   return (
-    <AppCard className={className} onClick={onClick}>
+    <StyledAppCard className={className} onClick={onClick}>
       <IconImg alt={`${name || 'App'} Logo`} src={iconUrl} onError={setAppImageFallback} size={iconSize} />
 
       {name && <AppName size="xs">{name}</AppName>}
@@ -100,8 +100,8 @@ const Apps = ({
           {buttonText}
         </Button>
       )}
-    </AppCard>
+    </StyledAppCard>
   )
 }
 
-export default Apps
+export default AppCard
diff --git a/src/routes/safe/components/Apps/components/AppsList.tsx b/src/routes/safe/components/Apps/components/AppsList.tsx
index ac369dc62b..0681290b7d 100644
--- a/src/routes/safe/components/Apps/components/AppsList.tsx
+++ b/src/routes/safe/components/Apps/components/AppsList.tsx
@@ -91,7 +91,6 @@ const AppsList = (): React.ReactElement => {
 
           {appList
             .filter((a) => a.fetchStatus !== SAFE_APP_FETCH_STATUS.ERROR)
-            .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
             .map((a) => (
               <AppCard
                 isLoading={isAppLoading(a)}
diff --git a/src/routes/safe/components/Apps/hooks/useAppList.ts b/src/routes/safe/components/Apps/hooks/useAppList.ts
index bd29f43b06..2f2fbf840b 100644
--- a/src/routes/safe/components/Apps/hooks/useAppList.ts
+++ b/src/routes/safe/components/Apps/hooks/useAppList.ts
@@ -23,7 +23,7 @@ const useAppList = (): UseAppListReturnType => {
         const appIndex = cpPrevStatus.findIndex((a) => a.url === res.url)
         const newStatus = res.error ? SAFE_APP_FETCH_STATUS.ERROR : SAFE_APP_FETCH_STATUS.SUCCESS
         cpPrevStatus[appIndex] = { ...res, fetchStatus: newStatus }
-        return cpPrevStatus
+        return cpPrevStatus.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
       })
     }
 

From 3dd6d67c8e5f6962c65b12817358926bcc70993b Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 25 Nov 2020 12:01:09 -0300
Subject: [PATCH 39/39] Improve featuresEnabled for sidebar and apps page.

---
 .../AppLayout/Sidebar/useSidebarItems.tsx     |  4 ++--
 src/components/LoaderContainer/index.tsx      |  9 +++++++++
 src/logic/safe/utils/safeVersion.ts           | 11 ++++++----
 .../components/Apps/components/AppFrame.tsx   | 10 +---------
 .../safe/components/Apps/hooks/useAppList.ts  |  1 -
 src/routes/safe/container/index.tsx           | 20 ++++++++++++-------
 6 files changed, 32 insertions(+), 23 deletions(-)
 create mode 100644 src/components/LoaderContainer/index.tsx

diff --git a/src/components/AppLayout/Sidebar/useSidebarItems.tsx b/src/components/AppLayout/Sidebar/useSidebarItems.tsx
index 4cf8e76bbb..c31b4cbea0 100644
--- a/src/components/AppLayout/Sidebar/useSidebarItems.tsx
+++ b/src/components/AppLayout/Sidebar/useSidebarItems.tsx
@@ -19,7 +19,7 @@ const useSidebarItems = (): ListItemType[] => {
   }
 
   return useMemo((): ListItemType[] => {
-    if (!matchSafe || !matchSafeWithAddress) {
+    if (!matchSafe || !matchSafeWithAddress || !featuresEnabled) {
       return []
     }
 
@@ -63,7 +63,7 @@ const useSidebarItems = (): ListItemType[] => {
       },
       ...safeSidebar,
     ]
-  }, [matchSafe, matchSafeWithAction, matchSafeWithAddress, safeAppsEnabled])
+  }, [matchSafe, matchSafeWithAction, matchSafeWithAddress, safeAppsEnabled, featuresEnabled])
 }
 
 export { useSidebarItems }
diff --git a/src/components/LoaderContainer/index.tsx b/src/components/LoaderContainer/index.tsx
new file mode 100644
index 0000000000..3b706e04ed
--- /dev/null
+++ b/src/components/LoaderContainer/index.tsx
@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+export const LoadingContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
diff --git a/src/logic/safe/utils/safeVersion.ts b/src/logic/safe/utils/safeVersion.ts
index 00d9884d0d..1c08522588 100644
--- a/src/logic/safe/utils/safeVersion.ts
+++ b/src/logic/safe/utils/safeVersion.ts
@@ -36,17 +36,20 @@ export const safeNeedsUpdate = (currentVersion?: string, latestVersion?: string)
 export const getCurrentSafeVersion = (gnosisSafeInstance: GnosisSafe): Promise<string> =>
   gnosisSafeInstance.methods.VERSION().call()
 
-const checkFeatureEnabledByVersion = (featureConfig: FeatureConfigByVersion, version: string) => {
+const checkFeatureEnabledByVersion = (featureConfig: FeatureConfigByVersion, version?: string) => {
+  if (!version) {
+    return false
+  }
   return featureConfig.validVersion ? semverSatisfies(version, featureConfig.validVersion) : true
 }
 
 export const enabledFeatures = (version?: string): FEATURES[] => {
-  return FEATURES_BY_VERSION.reduce((acc: FEATURES[], feature: Feature) => {
-    if (isFeatureEnabled(feature.name) && version && checkFeatureEnabledByVersion(feature, version)) {
+  return FEATURES_BY_VERSION.reduce((acc, feature: Feature) => {
+    if (isFeatureEnabled(feature.name) && checkFeatureEnabledByVersion(feature, version)) {
       acc.push(feature.name)
     }
     return acc
-  }, [])
+  }, [] as FEATURES[])
 }
 
 interface SafeVersionInfo {
diff --git a/src/routes/safe/components/Apps/components/AppFrame.tsx b/src/routes/safe/components/Apps/components/AppFrame.tsx
index aa3f37ee56..fd18610635 100644
--- a/src/routes/safe/components/Apps/components/AppFrame.tsx
+++ b/src/routes/safe/components/Apps/components/AppFrame.tsx
@@ -40,14 +40,7 @@ import { useLegalConsent } from '../hooks/useLegalConsent'
 import LegalDisclaimer from './LegalDisclaimer'
 import { APPS_STORAGE_KEY, getAppInfoFromUrl } from '../utils'
 import { SafeApp, StoredSafeApp } from '../types.d'
-
-const LoadingContainer = styled.div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`
+import { LoadingContainer } from 'src/components/LoaderContainer'
 
 const OwnerDisclaimer = styled.div`
   display: flex;
@@ -204,7 +197,6 @@ const AppFrame = ({ appUrl }: Props): React.ReactElement => {
     }
   }, [safeApp, trackEvent])
 
-  // TODO check if URL
   if (!appUrl) {
     throw Error('App url No provided or it is invalid.')
   }
diff --git a/src/routes/safe/components/Apps/hooks/useAppList.ts b/src/routes/safe/components/Apps/hooks/useAppList.ts
index 2f2fbf840b..e005a4dde2 100644
--- a/src/routes/safe/components/Apps/hooks/useAppList.ts
+++ b/src/routes/safe/components/Apps/hooks/useAppList.ts
@@ -10,7 +10,6 @@ type UseAppListReturnType = {
 
 const useAppList = (): UseAppListReturnType => {
   const [appList, setAppList] = useState<SafeApp[]>([])
-  // const [appListPivot, setAppListPivot] = useState<{ string: SafeApp }>({} as { string: SafeApp })
 
   // Load apps list
   // for each URL we return a mocked safe-app with a loading status
diff --git a/src/routes/safe/container/index.tsx b/src/routes/safe/container/index.tsx
index 443c471d24..7149a74406 100644
--- a/src/routes/safe/container/index.tsx
+++ b/src/routes/safe/container/index.tsx
@@ -1,15 +1,15 @@
-import { GenericModal } from '@gnosis.pm/safe-react-components'
+import { GenericModal, Loader } from '@gnosis.pm/safe-react-components'
 import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
 import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'
 
 import NoSafe from 'src/components/NoSafe'
 import { providerNameSelector } from 'src/logic/wallets/store/selectors'
-import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
+import { safeFeaturesEnabledSelector, safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { wrapInSuspense } from 'src/utils/wrapInSuspense'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
 import { FEATURES } from 'src/config/networks/network.d'
-import { getNetworkConfigDisabledFeatures } from 'src/config'
+import { LoadingContainer } from 'src/components/LoaderContainer'
 
 export const BALANCES_TAB_BTN_TEST_ID = 'balances-tab-btn'
 export const SETTINGS_TAB_BTN_TEST_ID = 'settings-tab-btn'
@@ -26,6 +26,7 @@ const TxsTable = React.lazy(() => import('src/routes/safe/components/Transaction
 const AddressBookTable = React.lazy(() => import('src/routes/safe/components/AddressBook'))
 
 const Container = (): React.ReactElement => {
+  const featuresEnabled = useSelector(safeFeaturesEnabledSelector)
   const [modal, setModal] = useState({
     isOpen: false,
     title: null,
@@ -42,6 +43,14 @@ const Container = (): React.ReactElement => {
     return <NoSafe provider={provider} text="Safe not found" />
   }
 
+  if (!featuresEnabled) {
+    return (
+      <LoadingContainer>
+        <Loader size="md" />
+      </LoadingContainer>
+    )
+  }
+
   const closeGenericModal = () => {
     if (modal.onClose) {
       modal.onClose?.()
@@ -73,10 +82,7 @@ const Container = (): React.ReactElement => {
           exact
           path={`${matchSafeWithAddress?.path}/apps`}
           render={({ history }) => {
-            // TODO: This will only check if Safe apps are disabled by network config
-            // I removed the check for safe version features because seems to be a race-condition issue
-            const disabledFeatures = getNetworkConfigDisabledFeatures()
-            if (disabledFeatures[FEATURES.SAFE_APPS]) {
+            if (!featuresEnabled.includes(FEATURES.SAFE_APPS)) {
               history.push(`${matchSafeWithAddress?.url}/balances`)
             }
             return wrapInSuspense(<Apps />, null)