From 68171a3936b2b9dea62d272275bd5ff30cec19df Mon Sep 17 00:00:00 2001
From: Usame Algan <5880855+usame-algan@users.noreply.github.com>
Date: Fri, 11 Aug 2023 08:15:20 +0200
Subject: [PATCH] fix: Add delay to safe app fixture call, pass safe app
 manifest to AppFrame (#2367)

---
 cypress/fixtures/safe-app.html                        | 11 +++++++----
 .../safe-apps/AppFrame/__tests__/AppFrame.test.tsx    |  7 +++++--
 src/components/safe-apps/AppFrame/index.tsx           |  7 +++----
 src/pages/apps/open.tsx                               |  2 +-
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/cypress/fixtures/safe-app.html b/cypress/fixtures/safe-app.html
index f1f5fccf4f..a2d736809d 100644
--- a/cypress/fixtures/safe-app.html
+++ b/cypress/fixtures/safe-app.html
@@ -32,10 +32,13 @@ <h1>Cypress Test App</h1>
         const path = window.location.pathname
         switch (path.split('/')[1]) {
           case 'dummy':
-            sendMessage('sendTransactions', {
-              txs: [{ to: '0x11Df0fa87b30080d59eba632570f620e37f2a8f7', value: '0', data: '0x' }],
-              params: { safeTxGas: 70000 },
-            })
+            // In case that fetching the manifest takes a bit longer
+            setTimeout(() => {
+              sendMessage('sendTransactions', {
+                txs: [{ to: '0x11Df0fa87b30080d59eba632570f620e37f2a8f7', value: '0', data: '0x' }],
+                params: { safeTxGas: 70000 },
+              })
+            }, 1000)
             break
           case 'get-permissions':
             sendMessage('wallet_getPermissions')
diff --git a/src/components/safe-apps/AppFrame/__tests__/AppFrame.test.tsx b/src/components/safe-apps/AppFrame/__tests__/AppFrame.test.tsx
index 1aeb0c67af..9ef6c07eb4 100644
--- a/src/components/safe-apps/AppFrame/__tests__/AppFrame.test.tsx
+++ b/src/components/safe-apps/AppFrame/__tests__/AppFrame.test.tsx
@@ -9,16 +9,19 @@ import {
   TransactionStatus,
 } from '@safe-global/safe-gateway-typescript-sdk'
 import { defaultSafeInfo } from '@/store/safeInfoSlice'
+import { getEmptySafeApp } from '@/components/safe-apps/utils'
+
+const emptySafeApp = getEmptySafeApp()
 
 describe('AppFrame', () => {
   it('should not show the transaction queue bar when there are no queued transactions', () => {
-    render(<AppFrame appUrl="https://app.url" allowedFeaturesList="" />)
+    render(<AppFrame appUrl="https://app.url" allowedFeaturesList="" safeAppFromManifest={emptySafeApp} />)
 
     expect(screen.queryAllByText('(0) Transaction queue').length).toBe(0)
   })
 
   it('should show queued transactions in the queue bar', () => {
-    render(<AppFrame appUrl="https://app.url" allowedFeaturesList="" />, {
+    render(<AppFrame appUrl="https://app.url" allowedFeaturesList="" safeAppFromManifest={emptySafeApp} />, {
       initialReduxState: {
         safeInfo: {
           loading: true,
diff --git a/src/components/safe-apps/AppFrame/index.tsx b/src/components/safe-apps/AppFrame/index.tsx
index aecfec4d6d..d81b5cc835 100644
--- a/src/components/safe-apps/AppFrame/index.tsx
+++ b/src/components/safe-apps/AppFrame/index.tsx
@@ -19,7 +19,6 @@ import { Methods } from '@safe-global/safe-apps-sdk'
 import { trackSafeAppOpenCount } from '@/services/safe-apps/track-app-usage-count'
 import { TxEvent, txSubscribe } from '@/services/tx/txEvents'
 import { SAFE_APPS_EVENTS, trackSafeAppEvent } from '@/services/analytics'
-import { useSafeAppFromManifest } from '@/hooks/safe-apps/useSafeAppFromManifest'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { useSafeAppFromBackend } from '@/hooks/safe-apps/useSafeAppFromBackend'
 import useChainId from '@/hooks/useChainId'
@@ -41,7 +40,7 @@ import { selectSafeMessages } from '@/store/safeMessagesSlice'
 import { isSafeMessageListItem } from '@/utils/safe-message-guards'
 import { isOffchainEIP1271Supported } from '@/utils/safe-messages'
 import PermissionsPrompt from '@/components/safe-apps/PermissionsPrompt'
-import { PermissionStatus } from '@/components/safe-apps/types'
+import { PermissionStatus, type SafeAppDataWithPermissions } from '@/components/safe-apps/types'
 
 import css from './styles.module.css'
 import SafeAppIframe from './SafeAppIframe'
@@ -58,9 +57,10 @@ const UNKNOWN_APP_NAME = 'Unknown Safe App'
 type AppFrameProps = {
   appUrl: string
   allowedFeaturesList: string
+  safeAppFromManifest: SafeAppDataWithPermissions
 }
 
-const AppFrame = ({ appUrl, allowedFeaturesList }: AppFrameProps): ReactElement => {
+const AppFrame = ({ appUrl, allowedFeaturesList, safeAppFromManifest }: AppFrameProps): ReactElement => {
   const chainId = useChainId()
   // We use offChainSigning by default
   const [settings, setSettings] = useState<SafeSettings>({
@@ -84,7 +84,6 @@ const AppFrame = ({ appUrl, allowedFeaturesList }: AppFrameProps): ReactElement
   } = useTransactionQueueBarState()
   const queueBarVisible = transactions.results.length > 0 && !queueBarDismissed
   const [remoteApp, , isBackendAppsLoading] = useSafeAppFromBackend(appUrl, safe.chainId)
-  const { safeApp: safeAppFromManifest } = useSafeAppFromManifest(appUrl, safe.chainId)
   const { thirdPartyCookiesDisabled, setThirdPartyCookiesDisabled } = useThirdPartyCookies()
   const { iframeRef, appIsLoading, isLoadingSlow, setAppIsLoading } = useAppIsLoading()
   useAnalyticsFromSafeApp(iframeRef)
diff --git a/src/pages/apps/open.tsx b/src/pages/apps/open.tsx
index 414c4f7d94..1c83cdd96b 100644
--- a/src/pages/apps/open.tsx
+++ b/src/pages/apps/open.tsx
@@ -78,7 +78,7 @@ const SafeApps: NextPage = () => {
 
   return (
     <SafeAppsErrorBoundary render={() => <SafeAppsLoadError onBackToApps={() => router.back()} />}>
-      <AppFrame appUrl={appUrl} allowedFeaturesList={getAllowedFeaturesList(origin)} />
+      <AppFrame appUrl={appUrl} allowedFeaturesList={getAllowedFeaturesList(origin)} safeAppFromManifest={safeApp} />
     </SafeAppsErrorBoundary>
   )
 }