Persist only locally added safe apps

src/routes/safe/components/Apps/components/AddAppForm/index.tsx

@@ -2,7 +2,7 @@ import { Icon, Link, Loader, Text, TextField } from '@gnosis.pm/safe-react-compo
 import React, { useState, ReactElement } from 'react'
 import styled from 'styled-components'
 
-import { SafeApp } from 'src/routes/safe/components/Apps/types'
+import { SafeApp, StoredSafeApp } from 'src/routes/safe/components/Apps/types'
 import GnoForm from 'src/components/forms/GnoForm'
 import Img from 'src/components/layout/Img'
 import { Modal } from 'src/components/Modal'
@@ -11,7 +11,7 @@ import AppAgreement from './AppAgreement'
 import AppUrl, { AppInfoUpdater, appUrlResolver } from './AppUrl'
 import { FormButtons } from './FormButtons'
 import { APPS_STORAGE_KEY, getEmptySafeApp } from 'src/routes/safe/components/Apps/utils'
-import { saveToStorage } from 'src/utils/storage'
+import { loadFromStorage, saveToStorage } from 'src/utils/storage'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
 import { useHistory, useRouteMatch } from 'react-router-dom'
 
@@ -77,10 +77,12 @@ const AddApp = ({ appList, closeModal }: AddAppProps): ReactElement => {
   const matchSafeWithAddress = useRouteMatch<{ safeAddress: string }>({ path: `${SAFELIST_ADDRESS}/:safeAddress` })
   const [isLoading, setIsLoading] = useState(false)
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
+    const persistedAppList =
+      (await loadFromStorage<(StoredSafeApp & { disabled?: number[] })[]>(APPS_STORAGE_KEY)) || []
     const newAppList = [
       { url: appInfo.url, disabled: false },
-      ...appList.map(({ url, disabled }) => ({ url, disabled })),
+      ...persistedAppList.map(({ url, disabled }) => ({ url, disabled })),
     ]
     saveToStorage(APPS_STORAGE_KEY, newAppList)
     const goToApp = `${matchSafeWithAddress?.url}/apps?appUrl=${encodeURI(appInfo.url)}`

src/routes/safe/components/Apps/hooks/useAppList.ts

@@ -19,6 +19,9 @@ type UseAppListReturnType = {
 const useAppList = (): UseAppListReturnType => {
   const [appList, setAppList] = useState<SafeApp[]>([])
   const [apiAppsList, setApiAppsList] = useState<AppData[]>([])
+  const [persistedAppList, setPersistedAppList] = useState<
+    (StoredSafeApp & { disabled?: boolean; networks?: number[] })[]
+  >([])
   const dispatch = useDispatch()
   const [isLoading, setIsLoading] = useState(false)
 
@@ -57,12 +60,12 @@ const useAppList = (): UseAppListReturnType => {
 
     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 storageAppList =
+        (await loadFromStorage<(StoredSafeApp & { disabled?: boolean; networks?: number[] })[]>(APPS_STORAGE_KEY)) || []
+      setPersistedAppList(storageAppList)
       // backward compatibility. In a previous implementation a safe app could be disabled, that state was
       // persisted in the storage.
-      const customApps = persistedAppList.filter(
+      const customApps = storageAppList.filter(
         (persistedApp) => !apiAppsList.some((app) => app.url === persistedApp.url),
       )
 
@@ -91,15 +94,18 @@ const useAppList = (): UseAppListReturnType => {
     loadApps()
   }, [apiAppsList])
 
-  const removeApp = useCallback((appUrl: string): void => {
-    setAppList((list) => {
-      const newList = list.filter(({ url }) => url !== appUrl)
-      const persistedAppList = newList.map(({ url, disabled }) => ({ url, disabled }))
-      saveToStorage(APPS_STORAGE_KEY, persistedAppList)
+  const removeApp = useCallback(
+    (appUrl: string): void => {
+      setAppList((list) => {
+        const newList = list.filter(({ url }) => url !== appUrl)
+        const newPersistedList = persistedAppList.filter(({ url }) => url !== appUrl)
+        saveToStorage(APPS_STORAGE_KEY, newPersistedList)
 
-      return newList
-    })
-  }, [])
+        return newList
+      })
+    },
+    [persistedAppList],
+  )
 
   return {
     appList,