Config service file with safe apps retrieval

src/logic/configService/index.ts

@@ -0,0 +1,20 @@
+import axios from 'axios'
+import { getNetworkId } from 'src/config'
+import { CONFIG_SERVICE_URL } from 'src/utils/constants'
+
+export type AppData = {
+  url: string
+  name?: string
+  disabled?: boolean
+  description?: string
+  networks: number[]
+}
+
+enum Endpoints {
+  SAFE_APPS = '/safe-apps/',
+}
+
+export const fetchSafeAppsList = async (): Promise<AppData[]> => {
+  const networkId = getNetworkId()
+  return axios.get(`${CONFIG_SERVICE_URL}${Endpoints['SAFE_APPS']}?network_id=${networkId}`).then(({ data }) => data)
+}

src/routes/safe/components/Apps/api/config-service.ts

@@ -1,22 +0,0 @@
-import axios from 'axios'
-import { getNetworkId } from 'src/config'
-import { SAFE_APPS_LIST_URL } from 'src/utils/constants'
-
-export type TokenListResult = {
-  name: string
-  timestamp: string
-  apps: AppData[]
-}
-
-export type AppData = {
-  url: string
-  name?: string
-  disabled?: boolean
-  description?: string
-  networks: number[]
-}
-
-export const fetchSafeAppsList = async (): Promise<TokenListResult> => {
-  const networkId = getNetworkId()
-  return axios.get(`${SAFE_APPS_LIST_URL}?network_id=${networkId}`).then(({ data }) => data)
-}

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/config-service'
+import { AppData } from 'src/logic/configService/index'
 
 const Wrapper = styled.div`
   height: 100%;

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, getEmptySafeApp } from '../utils'
-import { AppData, fetchSafeAppsList } from '../api/config-service'
+import { AppData, fetchSafeAppsList } from 'src/logic/configService'
 import { SafeApp, StoredSafeApp, SAFE_APP_FETCH_STATUS } from '../types'
 import { getNetworkId } from 'src/config'
 import enqueueSnackbar from 'src/logic/notifications/store/actions/enqueueSnackbar'
@@ -26,7 +26,7 @@ const useAppList = (): UseAppListReturnType => {
       setIsLoading(true)
       try {
         const result = await fetchSafeAppsList()
-        setApiAppsList(result && result?.apps.length ? result.apps : apiAppsList)
+        setApiAppsList(result && result?.length ? result : apiAppsList)
       } catch (err) {
         dispatch(enqueueSnackbar(NOTIFICATIONS.SAFE_APPS_FETCH_ERROR_MSG))
       }

src/utils/constants.ts

@@ -26,8 +26,7 @@ export const ETHERSCAN_API_KEY = process.env.REACT_APP_ETHERSCAN_API_KEY
 export const ETHGASSTATION_API_KEY = process.env.REACT_APP_ETHGASSTATION_API_KEY
 export const EXCHANGE_RATE_URL = 'https://api.exchangeratesapi.io/latest'
 export const EXCHANGE_RATE_URL_FALLBACK = 'https://api.coinbase.com/v2/exchange-rates'
-export const SAFE_APPS_LIST_URL =
-  process.env.REACT_APP_SAFE_APPS_LIST_URL || 'https://safe-config.staging.gnosisdev.com/api/v1/safe-apps/'
+export const CONFIG_SERVICE_URL = process.env.CONFIG_SERVICE_URL || 'https://safe-config.staging.gnosisdev.com/api/v1'
 export const IPFS_GATEWAY = process.env.REACT_APP_IPFS_GATEWAY
 export const SPENDING_LIMIT_MODULE_ADDRESS =
   process.env.REACT_APP_SPENDING_LIMIT_MODULE_ADDRESS || '0xCFbFaC74C26F8647cBDb8c5caf80BB5b32E43134'