Added camera access permission to the safe apps iframe

package.json

@@ -165,7 +165,7 @@
     ]
   },
   "dependencies": {
-    "@gnosis.pm/safe-apps-sdk": "6.1.0",
+    "@gnosis.pm/safe-apps-sdk": "6.2.0",
     "@gnosis.pm/safe-apps-sdk-v1": "npm:@gnosis.pm/safe-apps-sdk@0.4.2",
     "@gnosis.pm/safe-core-sdk": "^1.1.1",
     "@gnosis.pm/safe-deployments": "^1.5.0",

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

@@ -320,6 +320,7 @@ const AppFrame = ({ appUrl }: Props): ReactElement => {
           src={appUrl}
           title={safeApp.name}
           onLoad={onIframeLoad}
+          allow="camera"
         />
       </StyledCard>
 

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

@@ -1,13 +1,12 @@
-import { SafeAppAccessPolicyTypes } from '@gnosis.pm/safe-react-gateway-sdk'
+import * as safeAppsGatewaySDK from '@gnosis.pm/safe-react-gateway-sdk'
 
+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 * 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 {
@@ -18,20 +17,51 @@ jest.mock('src/routes/routes', () => {
 
 const spyTrackEventGA = jest.fn()
 
-jest.mock('@gnosis.pm/safe-react-gateway-sdk', () => ({
-  __esModule: true,
-  getSafeApps: () =>
+beforeEach(() => {
+  // Includes an id that doesn't exist in the remote apps to check that there's no error
+  saveToStorage(appUtils.PINNED_SAFE_APP_IDS, ['14', '24', '228'])
+
+  // populate custom app
+  saveToStorage(appUtils.APPS_STORAGE_KEY, [
+    {
+      url: 'https://apps.gnosis-safe.io/drain-safe',
+    },
+  ])
+
+  jest.spyOn(googleAnalytics, 'useAnalytics').mockImplementation(() => ({
+    trackPage: jest.fn(),
+    trackEvent: spyTrackEventGA,
+  }))
+
+  jest.spyOn(appUtils, 'getAppInfoFromUrl').mockReturnValueOnce(
+    Promise.resolve({
+      id: '36',
+      url: 'https://apps.gnosis-safe.io/drain-safe',
+      name: 'Drain safe',
+      iconUrl: 'https://apps.gnosis-safe.io/drain-safe/logo.svg',
+      error: false,
+      description: 'Transfer all your assets in batch',
+      chainIds: ['4'],
+      provider: undefined,
+      fetchStatus: FETCH_STATUS.SUCCESS,
+      accessControl: {
+        type: safeAppsGatewaySDK.SafeAppAccessPolicyTypes.NoRestrictions,
+      },
+    }),
+  )
+
+  jest.spyOn(safeAppsGatewaySDK, 'getSafeApps').mockReturnValueOnce(
+    // remove this after update the bug in the types in the safe-react-gateway-sdk
+    // @ts-ignore
     Promise.resolve([
       {
         id: 13,
         url: 'https://cloudflare-ipfs.com/ipfs/QmX31xCdhFDmJzoVG33Y6kJtJ5Ujw8r5EJJBrsp8Fbjm7k',
         name: 'Compound',
         iconUrl: 'https://cloudflare-ipfs.com/ipfs/QmX31xCdhFDmJzoVG33Y6kJtJ5Ujw8r5EJJBrsp8Fbjm7k/Compound.png',
-        error: false,
         description: 'Money markets on the Ethereum blockchain',
-        fetchStatus: 'SUCCESS',
         chainIds: ['1', '4'],
-        provider: null,
+        provider: undefined,
         accessControl: {
           type: 'NO_RESTRICTIONS',
         },
@@ -43,9 +73,8 @@ jest.mock('@gnosis.pm/safe-react-gateway-sdk', () => ({
         iconUrl: 'https://app.ens.domains/android-chrome-144x144.png',
 
         description: 'Decentralised naming for wallets, websites, & more.',
-        fetchStatus: 'SUCCESS',
         chainIds: ['1', '4'],
-        provider: null,
+        provider: undefined,
         accessControl: {
           type: 'DOMAIN_ALLOWLIST',
           value: ['https://gnosis-safe.io'],
@@ -57,9 +86,8 @@ jest.mock('@gnosis.pm/safe-react-gateway-sdk', () => ({
         name: 'Synthetix',
         iconUrl: 'https://cloudflare-ipfs.com/ipfs/QmXLxxczMH4MBEYDeeN9zoiHDzVkeBmB5rBjA3UniPEFcA/Synthetix.png',
         description: 'Trade synthetic assets on Ethereum',
-        fetchStatus: 'SUCCESS',
         chainIds: ['1', '4'],
-        provider: null,
+        provider: undefined,
         accessControl: {
           type: 'NO_RESTRICTIONS',
         },
@@ -70,48 +98,15 @@ jest.mock('@gnosis.pm/safe-react-gateway-sdk', () => ({
         name: 'Transaction Builder',
         iconUrl: 'https://cloudflare-ipfs.com/ipfs/QmdVaZxDov4bVARScTLErQSRQoxgqtBad8anWuw3YPQHCs/tx-builder.png',
         description: 'A Safe app to compose custom transactions',
-        fetchStatus: 'SUCCESS',
         chainIds: ['1', '4', '56', '100', '137', '246', '73799'],
-        provider: null,
+        provider: undefined,
+
         accessControl: {
           type: 'DOMAIN_ALLOWLIST',
           value: ['https://gnosis-safe.io'],
         },
       },
     ]),
-}))
-
-beforeEach(() => {
-  // Includes an id that doesn't exist in the remote apps to check that there's no error
-  saveToStorage(appUtils.PINNED_SAFE_APP_IDS, ['14', '24', '228'])
-
-  // populate custom app
-  saveToStorage(appUtils.APPS_STORAGE_KEY, [
-    {
-      url: 'https://apps.gnosis-safe.io/drain-safe',
-    },
-  ])
-
-  jest.spyOn(googleAnalytics, 'useAnalytics').mockImplementation(() => ({
-    trackPage: jest.fn(),
-    trackEvent: spyTrackEventGA,
-  }))
-
-  jest.spyOn(appUtils, 'getAppInfoFromUrl').mockReturnValueOnce(
-    Promise.resolve({
-      id: '36',
-      url: 'https://apps.gnosis-safe.io/drain-safe',
-      name: 'Drain safe',
-      iconUrl: 'https://apps.gnosis-safe.io/drain-safe/logo.svg',
-      error: false,
-      description: 'Transfer all your assets in batch',
-      chainIds: ['4'],
-      provider: undefined,
-      fetchStatus: FETCH_STATUS.SUCCESS,
-      accessControl: {
-        type: SafeAppAccessPolicyTypes.NoRestrictions,
-      },
-    }),
   )
 })