Fix getting stuck after switching network in create app flow

src/backend/api.ts

@@ -20,6 +20,7 @@ import { toast } from 'sonner'
 import { isMachineRemoved } from '../components/MachineStatusIcon/isMachineRemoved.ts'
 import { trackEvent } from 'fathom-client'
 import { getOasisAddressBytesFromEvm } from '../utils/helpers.ts'
+import type { Config } from '@wagmi/core'
 
 const BACKEND_URL = import.meta.env.VITE_ROFL_APP_BACKEND
 
@@ -280,6 +281,29 @@ const trackBootstrapStepEvent = (stepNumber: number, step: string, templateId?:
   )
 }
 
+async function waitForTransactionAndCheckSuccess(
+  wagmiConfig: Config,
+  hash: `0x${string}`,
+  network: 'mainnet' | 'testnet',
+): Promise<void> {
+  const receipt = await waitForTransactionReceipt(wagmiConfig, { hash })
+
+  if (receipt.status === 'reverted') {
+    throw new Error(`Transaction failed: ${hash}`)
+  }
+
+  const response = await GetRuntimeEvents(network, 'sapphire', {
+    tx_hash: hash.replace('0x', ''),
+  })
+
+  const hasError = response.data.events?.some(event => event.type?.includes('error') || event.body?.error)
+
+  if (hasError) {
+    const errorEvent = response.data.events?.find(event => event.type?.includes('error') || event.body?.error)
+    throw new Error(`Subcall transaction failed: ${errorEvent?.body?.error || 'Unknown error'}`)
+  }
+}
+
 export function useCreateAndDeployApp() {
   const { blockNavigatingAway, allowNavigatingAway } = useBlockNavigatingAway()
   const wagmiConfig = useConfig()
@@ -372,6 +396,7 @@ export function useCreateAndDeployApp() {
           .toSubcall(),
       )
       console.log('create app: tx hash', hash)
+      await waitForTransactionAndCheckSuccess(wagmiConfig, hash, network)
       const appId = await waitForAppId(hash, network)
       console.log('appId', appId)
       toast('Got app id ' + appId)
@@ -445,7 +470,7 @@ export function useCreateAndDeployApp() {
           })
           .toSubcall(),
       )
-      await waitForTransactionReceipt(wagmiConfig, { hash })
+      await waitForTransactionAndCheckSuccess(wagmiConfig, hash, network)
       toast('App config updated')
 
       trackBootstrapStepEvent(10, 'updating_completed', appData.template)
@@ -473,7 +498,7 @@ export function useCreateAndDeployApp() {
           })
           .toSubcall(),
       )
-      await waitForTransactionReceipt(wagmiConfig, { hash })
+      await waitForTransactionAndCheckSuccess(wagmiConfig, hash, network)
       toast('Deploy queued')
 
       await waitForAppScheduler(appId, network)

src/pages/CreateApp/BootstrapStep.tsx

@@ -5,7 +5,6 @@ import { Footer } from '../../components/Layout/Footer'
 import type { AppData, MetadataFormData } from './types'
 import { useCreateAndDeployApp } from '../../backend/api'
 import { useRoflAppBackendAuthContext } from '../../contexts/RoflAppBackendAuth/hooks'
-import { useNetwork } from '../../hooks/useNetwork'
 import { Steps } from './AnimatedStepText'
 import { BuildFormData } from '../../types/build-form'
 import { useAccount } from 'wagmi'
@@ -29,6 +28,7 @@ export type Template = {
 type BootstrapStepProps = {
   appData?: AppData
   template: Template | undefined
+  network: 'mainnet' | 'testnet'
 }
 
 type BootstrapState = (typeof BootstrapState)[keyof typeof BootstrapState]
@@ -39,9 +39,8 @@ export const BootstrapState = {
   Error: 'error',
 } as const
 
-export const BootstrapStep: FC<BootstrapStepProps> = ({ appData, template }) => {
+export const BootstrapStep: FC<BootstrapStepProps> = ({ appData, template, network }) => {
   const { address } = useAccount()
-  const network = useNetwork()
   const [buildTriggered, setBuildTriggered] = useState(false)
   const [bootstrapStep, setBootstrapStep] = useState<BootstrapState>(BootstrapState.Pending)
   const { token } = useRoflAppBackendAuthContext()

src/pages/CreateApp/index.tsx

@@ -10,7 +10,7 @@ import { getTemplateById } from './templates'
 import { trackEvent } from 'fathom-client'
 
 export const Create: FC = () => {
-  const { currentStep, setCurrentStep, appData, setAppDataForm } = useCreate()
+  const { currentStep, setCurrentStep, appData, setAppDataForm, network } = useCreate()
   const steps = [
     { component: TemplateStep },
     { component: MetadataStep },
@@ -102,7 +102,7 @@ export const Create: FC = () => {
           customStepTitle={selectedTemplate.customStepTitle}
         />
       )}
-      {currentStep === 5 && <BootstrapStep appData={appData} template={selectedTemplate} />}
+      {currentStep === 5 && <BootstrapStep appData={appData} template={selectedTemplate} network={network} />}
     </div>
   )
 }

src/pages/CreateApp/useCreate.ts

@@ -1,5 +1,6 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import type { AppData } from './types'
+import { useNetwork } from '../../hooks/useNetwork'
 
 const initAppDataState: AppData = {
   template: '',
@@ -30,20 +31,49 @@ const initAppDataState: AppData = {
 
 export const useCreate = () => {
   const [currentStep, setCurrentStep] = useState(0)
-  const [appData, setAppData] = useState<AppData>(initAppDataState)
+  const [appData, setAppData] = useState<AppData>({ ...initAppDataState })
+  const [previousNetwork, setPreviousNetwork] = useState<'mainnet' | 'testnet' | null>(null)
+  const network = useNetwork('mainnet') // fallback to mainnet
+
   const setAppDataForm = (data: Partial<AppData>) => {
     setAppData(prevData => ({ ...prevData, ...data }))
   }
+
   const resetStep = () => {
     setCurrentStep(0)
     setAppData(initAppDataState)
+    setPreviousNetwork(null)
   }
 
+  useEffect(() => {
+    if (previousNetwork !== null && previousNetwork !== network) {
+      setAppData(prevData => ({
+        ...prevData,
+        build: {
+          provider: '',
+          duration: 'hours',
+          number: 2,
+          offerId: '',
+          offerCpus: 0,
+          offerMemory: 0,
+          offerStorage: 0,
+        },
+      }))
+
+      // TODO: Should we reset the deploy step if the network changes?
+      if (currentStep > 3) {
+        setCurrentStep(3)
+      }
+    }
+    setPreviousNetwork(network)
+  }, [network, previousNetwork, currentStep])
+
   return {
     currentStep,
     setCurrentStep,
     resetStep,
     appData,
     setAppDataForm,
+    network,
   }
 }