Renames and deleted unnecesary dependencies

src/routes/safe/components/Apps/components/AppFrame.tsx

@@ -16,7 +16,6 @@ import { getNetworkId, getNetworkName, getTxServiceUrl } 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 { useAppList } from '../hooks/useAppList'
 import { LoadingContainer } from 'src/components/LoaderContainer/index'
 import { TIMEOUT } from 'src/utils/constants'
 import { web3ReadOnly } from 'src/logic/wallets/getWeb3'
@@ -92,7 +91,6 @@ const AppFrame = ({ appUrl }: Props): ReactElement => {
   const { trackEvent } = useAnalytics()
   const history = useHistory()
   const { consentReceived, onConsentReceipt } = useLegalConsent()
-  const { isLoading } = useAppList(false)
 
   const iframeRef = useRef<HTMLIFrameElement>(null)
   const [confirmTransactionModal, setConfirmTransactionModal] = useState<ConfirmTransactionModalState>(
@@ -247,10 +245,8 @@ const AppFrame = ({ appUrl }: Props): ReactElement => {
 
       setSafeApp(app)
     }
-    if (!isLoading) {
-      loadApp()
-    }
-  }, [appUrl, isLoading])
+    loadApp()
+  }, [appUrl])
 
   //track GA
   useEffect(() => {

src/routes/safe/components/Apps/components/AppsList.tsx

@@ -14,7 +14,7 @@ import { SAFELIST_ADDRESS } from 'src/routes/routes'
 import { useAppList } from '../hooks/useAppList'
 import { SAFE_APP_FETCH_STATUS, SafeApp } from '../types'
 import AddAppForm from './AddAppForm'
-import { AppData } from '../api/fetchSafeAppsList'
+import { AppData } from '../api/config-service'
 
 const Wrapper = styled.div`
   height: 100%;
@@ -81,12 +81,12 @@ const AppContainer = styled.div`
 `
 
 const isAppLoading = (app: SafeApp) => SAFE_APP_FETCH_STATUS.LOADING === app.fetchStatus
-const isCustomApp = (appUrl: string, staticAppsList: AppData[]) => !staticAppsList.some(({ url }) => url === appUrl)
+const isCustomApp = (appUrl: string, appsList: AppData[]) => !appsList.some(({ url }) => url === appUrl)
 
 const AppsList = (): React.ReactElement => {
   const matchSafeWithAddress = useRouteMatch<{ safeAddress: string }>({ path: `${SAFELIST_ADDRESS}/:safeAddress` })
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
-  const { appList, removeApp, staticAppsList, isLoading } = useAppList(true)
+  const { appList, removeApp, apiAppsList, isLoading } = useAppList()
   const [isAddAppModalOpen, setIsAddAppModalOpen] = useState<boolean>(false)
   const [appToRemove, setAppToRemove] = useState<SafeApp | null>(null)
 
@@ -120,7 +120,7 @@ const AppsList = (): React.ReactElement => {
                 <StyledLink key={a.url} to={`${matchSafeWithAddress?.url}/apps?appUrl=${encodeURI(a.url)}`}>
                   <AppCard isLoading={isAppLoading(a)} iconUrl={a.iconUrl} name={a.name} description={a.description} />
                 </StyledLink>
-                {isCustomApp(a.url, staticAppsList) && (
+                {isCustomApp(a.url, apiAppsList) && (
                   <IconBtn
                     title="Remove"
                     onClick={(e) => {

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

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from 'react'
 import { loadFromStorage, saveToStorage } from 'src/utils/storage'
-import { APPS_STORAGE_KEY, getAppInfoFromUrl, getAppsList, getEmptySafeApp } from '../utils'
-import { AppData } from '../api/fetchSafeAppsList'
+import { APPS_STORAGE_KEY, getAppInfoFromUrl, getEmptySafeApp } from '../utils'
+import { AppData, fetchSafeAppsList } from '../api/config-service'
 import { SafeApp, StoredSafeApp, SAFE_APP_FETCH_STATUS } from '../types'
 import { getNetworkId } from 'src/config'
 import enqueueSnackbar from 'src/logic/notifications/store/actions/enqueueSnackbar'
@@ -11,13 +11,13 @@ import { useDispatch } from 'react-redux'
 type UseAppListReturnType = {
   appList: SafeApp[]
   removeApp: (appUrl: string) => void
-  staticAppsList: AppData[]
+  apiAppsList: AppData[]
   isLoading: boolean
 }
 
-const useAppList = (showError: boolean): UseAppListReturnType => {
+const useAppList = (): UseAppListReturnType => {
   const [appList, setAppList] = useState<SafeApp[]>([])
-  const [staticAppsList, setStaticAppsList] = useState<AppData[]>([])
+  const [apiAppsList, setApiAppsList] = useState<AppData[]>([])
   const dispatch = useDispatch()
   const [isLoading, setIsLoading] = useState(false)
 
@@ -26,20 +26,18 @@ const useAppList = (showError: boolean): UseAppListReturnType => {
       setIsLoading(true)
       let result
       try {
-        result = await getAppsList()
+        result = await fetchSafeAppsList()
       } catch (err) {
-        if (showError) {
-          dispatch(enqueueSnackbar(NOTIFICATIONS.SAFE_APPS_FETCH_ERROR_MSG))
-        }
+        dispatch(enqueueSnackbar(NOTIFICATIONS.SAFE_APPS_FETCH_ERROR_MSG))
       }
-      setStaticAppsList(result && result?.length ? result : staticAppsList)
+      setApiAppsList(result && result?.length ? result : apiAppsList)
       setIsLoading(false)
     }
 
-    if (!staticAppsList.length) {
+    if (!apiAppsList.length) {
       loadAppsList()
     }
-  }, [dispatch, showError, staticAppsList])
+  }, [dispatch, apiAppsList])
 
   // Load apps list
   // for each URL we return a mocked safe-app with a loading status
@@ -64,10 +62,10 @@ const useAppList = (showError: boolean): UseAppListReturnType => {
       // 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),
+        (persistedApp) => !apiAppsList.some((app) => app.url === persistedApp.url),
       )
 
-      const apps: SafeApp[] = [...staticAppsList, ...customApps]
+      const apps: SafeApp[] = [...apiAppsList, ...customApps]
         // if the app does not expose supported networks, include them. (backward compatible)
         .filter((app) => (!app.networks ? true : app.networks.includes(getNetworkId())))
         .map((app) => ({
@@ -90,7 +88,7 @@ const useAppList = (showError: boolean): UseAppListReturnType => {
     }
 
     loadApps()
-  }, [staticAppsList])
+  }, [apiAppsList])
 
   const removeApp = useCallback((appUrl: string): void => {
     setAppList((list) => {
@@ -104,7 +102,7 @@ const useAppList = (showError: boolean): UseAppListReturnType => {
 
   return {
     appList,
-    staticAppsList,
+    apiAppsList,
     removeApp,
     isLoading,
   }

src/routes/safe/components/Apps/utils.ts

@@ -5,9 +5,7 @@ import { SafeApp, SAFE_APP_FETCH_STATUS } from './types'
 
 import { getContentFromENS } from 'src/logic/wallets/getWeb3'
 import appsIconSvg from 'src/assets/icons/apps.svg'
-import { ETHEREUM_NETWORK } from 'src/config/networks/network.d'
 import { logError, Errors } from 'src/logic/exceptions/CodedException'
-import { fetchSafeAppsList, TokenListResult } from './api/fetchSafeAppsList'
 
 export const APPS_STORAGE_KEY = 'APPS_STORAGE_KEY'
 
@@ -18,169 +16,6 @@ const removeLastTrailingSlash = (url: string): string => {
   return url
 }
 
-export type StaticAppInfo = {
-  url: string
-  disabled: boolean
-  networks: number[]
-}
-export const staticAppsList: Array<StaticAppInfo> = [
-  // 1inch
-  {
-    url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmUXF1yVGdqUfMbhNyfM3jpP6Bw66cYnKPoWq6iHkhd3Aw`,
-    disabled: false,
-    networks: [ETHEREUM_NETWORK.MAINNET],
-  },
-  // Aave
-  {
-    url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmQ3w2ezp2zx3u2LYQHyuNzMrLDJFjyL1rjAFTjNMcQ4cK`,
-    disabled: false,
-    networks: [ETHEREUM_NETWORK.MAINNET],
-  },
-  // Aave v2
-  {
-    url: `https://app.aave.com/`,
-    disabled: false,
-    networks: [ETHEREUM_NETWORK.MAINNET],
-  },
-  //Balancer Exchange
-  {
-    url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmRb2VfPVYBrv6gi2zDywgVgTg3A19ZCRMqwL13Ez5f5AS`,
-    disabled: false,
-    networks: [ETHEREUM_NETWORK.MAINNET],
-  },
-  // Balancer Pool
-  {
-    url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmVaxypk2FTyfcTS9oZKxmpQziPUTu2VRhhW7sso1mGysf`,
-    disabled: false,
-    networks: [ETHEREUM_NETWORK.MAINNET],
-  },
-  // CMM
-  // Point to a static server to allow app update without Safe deployment
-  {
-    url: `https://safe-cmm.gnosis.io`,
-    disabled: false,
-    networks: [ETHEREUM_NETWORK.RINKEBY, ETHEREUM_NETWORK.XDAI],
-  },
-  // Compound
-  {
-    url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmX31xCdhFDmJzoVG33Y6kJtJ5Ujw8r5EJJBrsp8Fbjm7k`,
-    disabled: false,
-    networks: [ETHEREUM_NETWORK.MAINNET, ETHEREUM_NETWORK.RINKEBY],
-  },
-  // dHedge
-  {
-    url: `https://app.dhedge.org/`,
-    disabled: false,
-    networks: [ETHEREUM_NETWORK.MAINNET],
-  },
-  // ENS
-  {
-    url: `https://app.ens.domains/`,
-    disabled: false,
-    networks: [ETHEREUM_NETWORK.MAINNET, ETHEREUM_NETWORK.RINKEBY],
-  },
-  // Gnosis Starter
-  {
-    url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmdCwUutYH8GXXNgTShB4cKJ8YJq4PqZ55QxMznKc9DbeS`,
-    disabled: false,
-    networks: [ETHEREUM_NETWORK.MAINNET, ETHEREUM_NETWORK.RINKEBY],
-  },
-  // Idle
-  {
-    url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmTvrLwJtyjG8QFHgvqdPhcV5DBMQ7oZceSU4uvPw9vQaj`,
-    disabled: false,
-    networks: [ETHEREUM_NETWORK.MAINNET, ETHEREUM_NETWORK.RINKEBY],
-  },
-  // Lido finance
-  {
-    url: `${process.env.REACT_APP_IPFS_GATEWAY}/Qmde8dsa9r8bB59CNGww6LRiaZABuKaJfuzvu94hFkatJC`,
-    disabled: false,
-    networks: [ETHEREUM_NETWORK.MAINNET],
-  },
-  // Liquity
-  {
-    url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmYzTAH6Nzexu35tbWmhVrLYwWj9MdbD1iECejgaGHFk8P`,
-    disabled: false,
-    networks: [ETHEREUM_NETWORK.MAINNET, ETHEREUM_NETWORK.RINKEBY],
-  },
-  // Mushrooms finance
-  {
-    url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmT96aES2YA9BssByc6DVizQDkofmKRErs8gJyqWipjyS8`,
-    disabled: false,
-    networks: [ETHEREUM_NETWORK.MAINNET],
-  },
-  // Pooltogether
-  {
-    url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmTa21pi77hiT1sLCGy5BeVwcyzExUSp2z7byxZukye8hr`,
-    disabled: false,
-    networks: [ETHEREUM_NETWORK.MAINNET, ETHEREUM_NETWORK.RINKEBY],
-  },
-  // Request
-  {
-    url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmTBBaiDQyGa17DJ7DdviyHbc51fTVgf6Z5PW5w2YUTkgR`,
-    disabled: false,
-    networks: [ETHEREUM_NETWORK.MAINNET],
-  },
-  // Sablier
-  {
-    url: `${process.env.REACT_APP_IPFS_GATEWAY}/Qmb1Xpfu9mnX4A3trpoVeBZ9sTiNtEuRoFKEiaVXWntDxB`,
-    disabled: false,
-    networks: [ETHEREUM_NETWORK.MAINNET, ETHEREUM_NETWORK.RINKEBY],
-  },
-  // Synthetix
-  {
-    url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmXLxxczMH4MBEYDeeN9zoiHDzVkeBmB5rBjA3UniPEFcA`,
-    disabled: false,
-    networks: [ETHEREUM_NETWORK.MAINNET, ETHEREUM_NETWORK.RINKEBY],
-  },
-  // OpenZeppelin
-  {
-    url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmQovvfYYMUXjZfNbysQDUEXR8nr55iJRwcYgJQGJR7KEA`,
-    disabled: false,
-    networks: [
-      ETHEREUM_NETWORK.MAINNET,
-      ETHEREUM_NETWORK.RINKEBY,
-      //ETHEREUM_NETWORK.ENERGY_WEB_CHAIN,
-      //ETHEREUM_NETWORK.VOLTA,
-      // ETHEREUM_NETWORK.XDAI,
-    ],
-  },
-  // TX-Builder
-  {
-    url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmZBgEvjqi9Jg8xATr9uUgNUVmnfYiECNxZv9Taux7mzgV`,
-    disabled: false,
-    networks: [
-      ETHEREUM_NETWORK.MAINNET,
-      ETHEREUM_NETWORK.RINKEBY,
-      ETHEREUM_NETWORK.ENERGY_WEB_CHAIN,
-      ETHEREUM_NETWORK.VOLTA,
-      ETHEREUM_NETWORK.XDAI,
-    ],
-  },
-  // Wallet-Connect
-  {
-    url: `${process.env.REACT_APP_IPFS_GATEWAY}/QmX9B982ZAaBzbm6yBoZUS3uLgcizYA6wW65RCXVRZkG6f`,
-    disabled: false,
-    networks: [
-      ETHEREUM_NETWORK.MAINNET,
-      ETHEREUM_NETWORK.RINKEBY,
-      ETHEREUM_NETWORK.ENERGY_WEB_CHAIN,
-      ETHEREUM_NETWORK.VOLTA,
-      ETHEREUM_NETWORK.XDAI,
-    ],
-  },
-  // Yearn Vaults
-  {
-    url: `${process.env.REACT_APP_IPFS_GATEWAY}/Qme9HuPPhgCtgfj1CktvaDKhTesMueGCV2Kui1Sqna3Xs9`,
-    disabled: false,
-    networks: [ETHEREUM_NETWORK.MAINNET],
-  },
-]
-
-export const getAppsList = async (): Promise<TokenListResult> => {
-  return fetchSafeAppsList()
-}
-
 export const getAppInfoFromOrigin = (origin: string): { url: string; name: string } | null => {
   try {
     return JSON.parse(origin)