Feature: Retrieve Safe Apps only guaranteed to work on the current client

package.json

@@ -170,7 +170,7 @@
     "@gnosis.pm/safe-core-sdk": "^1.1.1",
     "@gnosis.pm/safe-deployments": "^1.5.0",
     "@gnosis.pm/safe-react-components": "^0.9.0",
-    "@gnosis.pm/safe-react-gateway-sdk": "2.7.5",
+    "@gnosis.pm/safe-react-gateway-sdk": "2.8.1",
     "@ledgerhq/hw-transport-node-hid-singleton": "6.20.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.0",

src/config/index.ts

@@ -8,7 +8,6 @@ import {
 } from '@gnosis.pm/safe-react-gateway-sdk'
 
 import {
-  GATEWAY_URL,
   DEFAULT_CHAIN_ID,
   ETHERSCAN_API_KEY,
   INFURA_TOKEN,

src/logic/safe/api/fetchSafeApps.ts

@@ -4,5 +4,7 @@ import { _getChainId } from 'src/config'
 import { GATEWAY_URL } from 'src/utils/constants'
 
 export const fetchSafeAppsList = async (): Promise<SafeAppData[]> => {
-  return getSafeApps(GATEWAY_URL, _getChainId())
+  return getSafeApps(GATEWAY_URL, _getChainId(), {
+    client_url: window.location.origin,
+  })
 }

src/routes/safe/components/Apps/components/AppCard/index.stories.tsx

@@ -1,3 +1,4 @@
+import { SafeAppAccessPolicyTypes } from '@gnosis.pm/safe-react-gateway-sdk'
 import { FETCH_STATUS } from 'src/utils/requests'
 import { getEmptySafeApp } from '../../utils'
 import { AppCard, AddCustomAppCard } from './index'
@@ -22,6 +23,9 @@ export const LoadedApp = (): React.ReactElement => (
       description: 'Gnosis safe app',
       fetchStatus: FETCH_STATUS.SUCCESS,
       chainIds: ['4'],
+      accessControl: {
+        type: SafeAppAccessPolicyTypes.NoRestrictions,
+      },
     }}
   />
 )

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

@@ -1,11 +1,13 @@
-import AppsList, { PINNED_APPS_LIST_TEST_ID, ALL_APPS_LIST_TEST_ID } from './AppsList'
-import { render, screen, fireEvent, within, act, waitFor } from 'src/utils/test-utils'
+import { SafeAppAccessPolicyTypes } from '@gnosis.pm/safe-react-gateway-sdk'
 
+import { render, screen, fireEvent, within, act, waitFor } from 'src/utils/test-utils'
 import * as appUtils from 'src/routes/safe/components/Apps/utils'
 import { FETCH_STATUS } from 'src/utils/requests'
 import { loadFromStorage, saveToStorage } from 'src/utils/storage'
 import * as googleAnalytics from 'src/utils/googleAnalytics'
 
+import AppsList, { PINNED_APPS_LIST_TEST_ID, ALL_APPS_LIST_TEST_ID } from './AppsList'
+
 jest.mock('src/routes/routes', () => {
   const original = jest.requireActual('src/routes/routes')
   return {
@@ -30,6 +32,9 @@ jest.mock('@gnosis.pm/safe-react-gateway-sdk', () => ({
         fetchStatus: 'SUCCESS',
         chainIds: ['1', '4'],
         provider: null,
+        accessControl: {
+          type: 'NO_RESTRICTIONS',
+        },
       },
       {
         id: 3,
@@ -41,6 +46,10 @@ jest.mock('@gnosis.pm/safe-react-gateway-sdk', () => ({
         fetchStatus: 'SUCCESS',
         chainIds: ['1', '4'],
         provider: null,
+        accessControl: {
+          type: 'DOMAIN_ALLOWLIST',
+          value: ['https://gnosis-safe.io'],
+        },
       },
       {
         id: 14,
@@ -51,6 +60,9 @@ jest.mock('@gnosis.pm/safe-react-gateway-sdk', () => ({
         fetchStatus: 'SUCCESS',
         chainIds: ['1', '4'],
         provider: null,
+        accessControl: {
+          type: 'NO_RESTRICTIONS',
+        },
       },
       {
         id: 24,
@@ -61,6 +73,10 @@ jest.mock('@gnosis.pm/safe-react-gateway-sdk', () => ({
         fetchStatus: 'SUCCESS',
         chainIds: ['1', '4', '56', '100', '137', '246', '73799'],
         provider: null,
+        accessControl: {
+          type: 'DOMAIN_ALLOWLIST',
+          value: ['https://gnosis-safe.io'],
+        },
       },
     ]),
 }))
@@ -92,6 +108,9 @@ beforeEach(() => {
       chainIds: ['4'],
       provider: undefined,
       fetchStatus: FETCH_STATUS.SUCCESS,
+      accessControl: {
+        type: SafeAppAccessPolicyTypes.NoRestrictions,
+      },
     }),
   )
 })

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

@@ -4,6 +4,7 @@ import memoize from 'lodash/memoize'
 import { getContentFromENS } from 'src/logic/wallets/getWeb3'
 import appsIconSvg from 'src/assets/icons/apps.svg'
 import { FETCH_STATUS } from 'src/utils/requests'
+import { SafeAppAccessPolicyTypes } from '@gnosis.pm/safe-react-gateway-sdk'
 
 import { SafeApp } from './types'
 
@@ -47,6 +48,9 @@ export const getEmptySafeApp = (url = ''): SafeApp => {
     description: '',
     fetchStatus: FETCH_STATUS.LOADING,
     chainIds: [],
+    accessControl: {
+      type: SafeAppAccessPolicyTypes.NoRestrictions,
+    },
   }
 }
 

yarn.lock

@@ -2163,10 +2163,10 @@
     react-media "^1.10.0"
     web3-utils "^1.6.0"
 
-"@gnosis.pm/safe-react-gateway-sdk@2.7.5":
-  version "2.7.5"
-  resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-react-gateway-sdk/-/safe-react-gateway-sdk-2.7.5.tgz#5640fc8c3972397ea1135f1e552d0c3333acb8fa"
-  integrity sha512-kY2aOLqfm9fxZbeMa8JkyKr7S3RYdxL/B0n2rU2fRAoPULleq+a6wZ2Y+zHC+XrHpjsNi6QIA183apP+XcRYIQ==
+"@gnosis.pm/safe-react-gateway-sdk@2.8.1":
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-react-gateway-sdk/-/safe-react-gateway-sdk-2.8.1.tgz#3ed166fb49fa19837c9ce8d9ba4f29a14755e9c4"
+  integrity sha512-J6gJT6sbXvEPqhrWepEEgwYseo4UVUU3wNS9GNIpGMuh0zi7ZU0Gld+yXqSAoZWtS3hCntg7lyuM8W31AEjQLQ==
   dependencies:
     isomorphic-unfetch "^3.1.0"