fix: Add delay to safe app fixture call, pass safe app manifest to Ap…

…pFrame (#2367)

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')

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,

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)

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>
   )
 }