Fix: don't fetch manifest for unknown Safe Apps (#3400)

* Fix: don't fetch manifest for unknown Safe Apps

* Update e2e tests

* Fix tx_modal test

cypress/e2e/safe-apps/browser_permissions.cy.js

@@ -18,13 +18,14 @@ describe('Browser permissions tests', () => {
     main.acceptCookies()
   })
 
-  it('Verify a permissions slide to the user is displayed', () => {
+  // @TODO: unknown apps don't have permissions
+  xit('Verify a permissions slide to the user is displayed', () => {
     safeapps.clickOnContinueBtn()
     safeapps.verifyCameraCheckBoxExists()
     safeapps.verifyMicrofoneCheckBoxExists()
   })
 
-  it('Verify the selection can be changed, accepted and stored', () => {
+  xit('Verify the selection can be changed, accepted and stored', () => {
     safeapps.verifyMicrofoneCheckBoxExists().click()
     safeapps.clickOnContinueBtn()
     safeapps.verifyWarningDefaultAppMsgIsDisplayed()

cypress/e2e/safe-apps/tx_modal.cy.js

@@ -4,6 +4,8 @@ import * as safeapps from '../pages/safeapps.pages'
 
 const testAppName = 'Cypress Test App'
 const testAppDescr = 'Cypress Test App Description'
+const unknownApp = 'unknown'
+const confirmTx = 'Confirm transaction'
 
 describe('Transaction modal tests', () => {
   beforeEach(() => {
@@ -28,7 +30,8 @@ describe('Transaction modal tests', () => {
       safeapps.verifyWarningDefaultAppMsgIsDisplayed()
       safeapps.clickOnContinueBtn()
       cy.findByRole('dialog').within(() => {
-        cy.findByText(testAppName)
+        cy.findByText(confirmTx)
+        cy.findByText(unknownApp)
       })
     },
   )

src/components/safe-apps/SafeAppLandingPage/index.tsx

@@ -22,8 +22,8 @@ type Props = {
 const CHAIN_ID_WITH_A_DEMO = '1'
 
 const SafeAppLanding = ({ appUrl, chain }: Props) => {
-  const { safeApp, isLoading } = useSafeAppFromManifest(appUrl, chain.chainId)
   const [backendApp, , backendAppLoading] = useSafeAppFromBackend(appUrl, chain.chainId)
+  const { safeApp, isLoading } = useSafeAppFromManifest(appUrl, chain.chainId, backendApp)
   const wallet = useWallet()
   const onboard = useOnboard()
   // show demo if the app was shared for mainnet or we can find the mainnet chain id on the backend

src/components/safe-apps/utils.ts

@@ -63,7 +63,7 @@ export const getLegacyChainName = (chainName: string, chainId: string): string =
   return network
 }
 
-export const getEmptySafeApp = (url = ''): SafeAppDataWithPermissions => {
+export const getEmptySafeApp = (url = '', appData?: SafeAppData): SafeAppDataWithPermissions => {
   return {
     id: Math.random(),
     url,
@@ -75,10 +75,11 @@ export const getEmptySafeApp = (url = ''): SafeAppDataWithPermissions => {
       type: SafeAppAccessPolicyTypes.NoRestrictions,
     },
     tags: [],
-    safeAppsPermissions: [],
     features: [],
-    socialProfiles: [],
     developerWebsite: '',
+    socialProfiles: [],
+    ...appData,
+    safeAppsPermissions: [],
   }
 }
 

src/hooks/safe-apps/useSafeAppFromManifest.ts

@@ -1,4 +1,5 @@
 import { useEffect, useMemo } from 'react'
+import type { SafeAppData } from '@safe-global/safe-gateway-typescript-sdk'
 import { Errors, logError } from '@/services/exceptions'
 import { fetchSafeAppFromManifest } from '@/services/safe-apps/manifest'
 import useAsync from '@/hooks/useAsync'
@@ -11,12 +12,16 @@ type UseSafeAppFromManifestReturnType = {
   isLoading: boolean
 }
 
-const useSafeAppFromManifest = (appUrl: string, chainId: string): UseSafeAppFromManifestReturnType => {
+const useSafeAppFromManifest = (
+  appUrl: string,
+  chainId: string,
+  safeAppData?: SafeAppData,
+): UseSafeAppFromManifestReturnType => {
   const [data, error, isLoading] = useAsync<SafeAppDataWithPermissions>(() => {
-    if (appUrl && chainId) return fetchSafeAppFromManifest(appUrl, chainId)
-  }, [appUrl, chainId])
+    if (appUrl && chainId && safeAppData) return fetchSafeAppFromManifest(appUrl, chainId)
+  }, [appUrl, chainId, safeAppData])
 
-  const emptyApp = useMemo(() => getEmptySafeApp(appUrl), [appUrl])
+  const emptyApp = useMemo(() => getEmptySafeApp(appUrl, safeAppData), [appUrl, safeAppData])
 
   useEffect(() => {
     if (!error) return

src/pages/apps/open.tsx

@@ -24,12 +24,12 @@ const SafeApps: NextPage = () => {
   const chainId = useChainId()
   const router = useRouter()
   const appUrl = useSafeAppUrl()
-  const { safeApp, isLoading } = useSafeAppFromManifest(appUrl || '', chainId)
+  const { allSafeApps, remoteSafeAppsLoading } = useSafeApps()
+  const safeAppData = allSafeApps.find((app) => app.url === appUrl)
+  const { safeApp, isLoading } = useSafeAppFromManifest(appUrl || '', chainId, safeAppData)
   const isSafeAppsEnabled = useHasFeature(FEATURES.SAFE_APPS)
   const isWalletConnectEnabled = useHasFeature(FEATURES.NATIVE_WALLETCONNECT)
 
-  const { remoteSafeApps, remoteSafeAppsLoading } = useSafeApps()
-
   const { addPermissions, getPermissions, getAllowedFeaturesList } = useBrowserPermissions()
   const origin = getOrigin(appUrl)
   const {
@@ -41,7 +41,7 @@ const SafeApps: NextPage = () => {
     onComplete,
   } = useSafeAppsInfoModal({
     url: origin,
-    safeApp: remoteSafeApps.find((app) => app.url === appUrl),
+    safeApp: safeAppData,
     permissions: safeApp?.safeAppsPermissions || [],
     addPermissions,
     getPermissions,