From d4173336fff581b10ba146756936a4d8a9b83ef9 Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Thu, 20 Nov 2025 15:27:46 +0100
Subject: [PATCH 01/34] Add ROFL-8004 constants

---
 src/constants/rofl-8004.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/constants/rofl-8004.ts

diff --git a/src/constants/rofl-8004.ts b/src/constants/rofl-8004.ts
new file mode 100644
index 00000000..0d7cc6f9
--- /dev/null
+++ b/src/constants/rofl-8004.ts
@@ -0,0 +1,14 @@
+import { sepolia } from 'viem/chains'
+import { createPublicClient, http } from 'viem'
+
+export const ROFL_8004_SERVICE_NAME = 'rofl-8004'
+export const ROFL_8004_SERVICE_ENV_PREFIX = 'ERC_8004'
+export const ROFL_8004_SERVICE_RPC_URL_BASE = 'https://sepolia.infura.io/v3/'
+
+export const ROFL_8004_CHAIN = sepolia
+export const ROFL_8004_PUBLIC_CLIENT = createPublicClient({
+  chain: ROFL_8004_CHAIN,
+  transport: http(),
+})
+export const ROFL_8004_AGENT_IDENTITY_CONTRACT = '0x8004a6090cd10a7288092483047b097295fb8847'
+export const ROFL_8004_METADATA_KEY = 'net.oasis.app.erc8004_agent_id' // "{chainId}:{agentId}"

From 5859ae2ec1f9d9f23f155dac31922443a5682681 Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Thu, 20 Nov 2025 15:28:06 +0100
Subject: [PATCH 02/34] Add ROFL-8004 utils

---
 src/utils/rofl-8004.ts | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/utils/rofl-8004.ts

diff --git a/src/utils/rofl-8004.ts b/src/utils/rofl-8004.ts
new file mode 100644
index 00000000..81518fb3
--- /dev/null
+++ b/src/utils/rofl-8004.ts
@@ -0,0 +1,30 @@
+import {
+  ROFL_8004_CHAIN,
+  ROFL_8004_METADATA_KEY,
+  ROFL_8004_SERVICE_RPC_URL_BASE,
+} from '../constants/rofl-8004.ts'
+import { RoflInstance } from '../nexus/generated/api.ts'
+
+export const stripROFL8004RpcPrefix = (url: string | undefined): string => {
+  if (!url) return ''
+  return url.startsWith(ROFL_8004_SERVICE_RPC_URL_BASE)
+    ? url.slice(ROFL_8004_SERVICE_RPC_URL_BASE.length)
+    : url
+}
+export const addROFL8004RpcPrefix = (apiToken: string): string => {
+  if (!apiToken) return ''
+  return `${ROFL_8004_SERVICE_RPC_URL_BASE}${apiToken}`
+}
+
+export const fromMetadataToAgentId = (metadata: RoflInstance['metadata']) => {
+  const agentId = metadata?.[ROFL_8004_METADATA_KEY] as string
+  const splitAgentId = agentId?.split(':')
+  const chainId = Number(splitAgentId[0])
+
+  if (chainId !== ROFL_8004_CHAIN.id)
+    throw new Error(`Invalid chainId: ${chainId}. Expected: ${ROFL_8004_CHAIN.id}`)
+
+  return BigInt(splitAgentId[1])
+}
+
+export const tokenURIToLink = (tokenURI: string) => tokenURI.replace('ipfs://', 'https://ipfs.io/ipfs/')

From c1a370a336220b8e396d540da7c840eeaad6a6a6 Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Thu, 20 Nov 2025 15:28:49 +0100
Subject: [PATCH 03/34] Add disabled prop to InputFormField textarea

---
 src/components/InputFormField/index.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/InputFormField/index.tsx b/src/components/InputFormField/index.tsx
index a0485534..698c5966 100644
--- a/src/components/InputFormField/index.tsx
+++ b/src/components/InputFormField/index.tsx
@@ -78,7 +78,13 @@ export const InputFormField = <T extends FieldValues>({
                 )}
               </div>
             ) : (
-              <Textarea id={name} placeholder={placeholder} {...field} aria-invalid={!!fieldState.error} />
+              <Textarea
+                id={name}
+                placeholder={placeholder}
+                {...field}
+                aria-invalid={!!fieldState.error}
+                disabled={disabled}
+              />
             )}
             {fieldState.error && <div className="text-destructive text-sm">{fieldState.error.message}</div>}
           </>

From c8b95d6be0e46d6689f1eb4557e7dd1538a9ae80 Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Thu, 20 Nov 2025 15:32:57 +0100
Subject: [PATCH 04/34] Add ERC-8004 step in create flow

---
 src/pages/CreateApp/CreateLayout.tsx         | 10 ++-
 src/pages/CreateApp/CustomBuildSetupForm.tsx | 10 +--
 src/pages/CreateApp/CustomInputsStep.tsx     | 37 +++++---
 src/pages/CreateApp/ERC8004Form.tsx          | 95 ++++++++++++++++++++
 src/pages/CreateApp/ERC8004Step.tsx          | 62 +++++++++++++
 src/pages/CreateApp/HlCopyTraderForm.tsx     |  8 +-
 src/pages/CreateApp/TgbotAgentForm.tsx       |  8 +-
 src/pages/CreateApp/XAgentForm.tsx           |  8 +-
 src/pages/CreateApp/index.tsx                | 22 ++++-
 src/pages/CreateApp/types.ts                 | 33 ++++++-
 10 files changed, 257 insertions(+), 36 deletions(-)
 create mode 100644 src/pages/CreateApp/ERC8004Form.tsx
 create mode 100644 src/pages/CreateApp/ERC8004Step.tsx

diff --git a/src/pages/CreateApp/CreateLayout.tsx b/src/pages/CreateApp/CreateLayout.tsx
index a9faf6ff..45583847 100644
--- a/src/pages/CreateApp/CreateLayout.tsx
+++ b/src/pages/CreateApp/CreateLayout.tsx
@@ -40,8 +40,14 @@ export const CreateLayout: FC<CreateLayoutProps> = ({
   const sidebarItems = [
     { label: 'Input Metadata', active: currentStep === 1 },
     { label: customStepTitle, active: currentStep === 2 },
-    { label: 'Configure Machine', active: currentStep === 3 },
-    { label: 'Payment', active: currentStep === 4 },
+    ...(selectedTemplateId !== 'custom-build'
+      ? [{ label: 'Setup ERC-8004', active: currentStep === 3 }]
+      : []),
+    { label: 'Configure Machine', active: currentStep === 4 },
+    {
+      label: 'Payment',
+      active: currentStep === 5,
+    },
   ]
 
   return (
diff --git a/src/pages/CreateApp/CustomBuildSetupForm.tsx b/src/pages/CreateApp/CustomBuildSetupForm.tsx
index 78d29a4d..6877d9ff 100644
--- a/src/pages/CreateApp/CustomBuildSetupForm.tsx
+++ b/src/pages/CreateApp/CustomBuildSetupForm.tsx
@@ -2,7 +2,7 @@ import { type FC, useState } from 'react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { CreateFormNavigation } from './CreateFormNavigation'
-import { customBuildFormSchema, type CustomBuildFormData } from './types'
+import { customBuildFormSchema, type CustomBuildFormData, ERC8004FormData } from './types'
 import { SecretsTable } from '../../components/SecretsTable'
 import { CodeDisplay } from '../../components/CodeDisplay'
 import { type RoflAppSecrets } from '../../nexus/api'
@@ -14,8 +14,8 @@ import { composePlaceholder } from './composePlaceholder'
 type CustomBuildSetupFormProps = {
   handleNext: () => void
   handleBack: () => void
-  inputs?: CustomBuildFormData
-  setAppDataForm: (data: { inputs: CustomBuildFormData }) => void
+  inputs?: CustomBuildFormData & ERC8004FormData
+  setAppDataForm: (data: { inputs: CustomBuildFormData & ERC8004FormData }) => void
 }
 
 export const CustomBuildSetupForm: FC<CustomBuildSetupFormProps> = ({
@@ -59,13 +59,13 @@ export const CustomBuildSetupForm: FC<CustomBuildSetupFormProps> = ({
     const isValid = await validateCompose(compose)
 
     if (isValid) {
-      setAppDataForm({ inputs: { compose, secrets } as CustomBuildFormData })
+      setAppDataForm({ inputs: { compose, secrets } as CustomBuildFormData & ERC8004FormData })
       handleNext()
     }
   }
 
   const navigateBack = () => {
-    setAppDataForm({ inputs: { compose, secrets } as CustomBuildFormData })
+    setAppDataForm({ inputs: { compose, secrets } as CustomBuildFormData & ERC8004FormData })
     handleBack()
   }
 
diff --git a/src/pages/CreateApp/CustomInputsStep.tsx b/src/pages/CreateApp/CustomInputsStep.tsx
index d08b1bfc..a2585b37 100644
--- a/src/pages/CreateApp/CustomInputsStep.tsx
+++ b/src/pages/CreateApp/CustomInputsStep.tsx
@@ -9,16 +9,16 @@ import {
   type XAgentFormData,
   type HlCopyTraderFormData,
   type CustomBuildFormData,
+  type AppDataInputs,
+  ERC8004FormData,
 } from './types'
 import { CustomBuildSetupForm } from './CustomBuildSetupForm'
 
 type CustomInputsStepProps = {
   handleNext: () => void
   handleBack: () => void
-  inputs?: AgentFormData | XAgentFormData | HlCopyTraderFormData | CustomBuildFormData
-  setAppDataForm: (data: {
-    inputs: AgentFormData | XAgentFormData | HlCopyTraderFormData | CustomBuildFormData
-  }) => void
+  inputs?: AppDataInputs
+  setAppDataForm: (data: { inputs: AppDataInputs }) => void
   selectedTemplateName?: string
   selectedTemplateId?: string
   customStepTitle: string
@@ -33,6 +33,19 @@ export const CustomInputsStep: FC<CustomInputsStepProps> = ({
   selectedTemplateId,
   customStepTitle,
 }) => {
+  const setAppDataInputs = (appDataInputs: { inputs: AppDataInputs }) => {
+    // Merge secrets, so the ERC-8004 configuration is not overridden
+    setAppDataForm({
+      inputs: {
+        ...(inputs ?? {}),
+        secrets: {
+          ...(inputs?.secrets ?? {}),
+          ...appDataInputs.inputs.secrets,
+        },
+      } as AppDataInputs,
+    })
+  }
+
   return (
     <CreateLayout
       currentStep={2}
@@ -46,8 +59,8 @@ export const CustomInputsStep: FC<CustomInputsStepProps> = ({
         <CustomBuildSetupForm
           handleNext={handleNext}
           handleBack={handleBack}
-          inputs={inputs as CustomBuildFormData}
-          setAppDataForm={setAppDataForm}
+          inputs={inputs as CustomBuildFormData & ERC8004FormData}
+          setAppDataForm={setAppDataInputs}
         />
       )}
 
@@ -55,24 +68,24 @@ export const CustomInputsStep: FC<CustomInputsStepProps> = ({
         <TgbotAgentForm
           handleNext={handleNext}
           handleBack={handleBack}
-          inputs={inputs as AgentFormData}
-          setAppDataForm={setAppDataForm}
+          inputs={inputs as AgentFormData & ERC8004FormData}
+          setAppDataForm={setAppDataInputs}
         />
       )}
       {selectedTemplateId === 'x-agent' && (
         <XAgentForm
           handleNext={handleNext}
           handleBack={handleBack}
-          inputs={inputs as XAgentFormData}
-          setAppDataForm={setAppDataForm}
+          inputs={inputs as XAgentFormData & ERC8004FormData}
+          setAppDataForm={setAppDataInputs}
         />
       )}
       {selectedTemplateId === 'hl-copy-trader' && (
         <HlCopyTraderForm
           handleNext={handleNext}
           handleBack={handleBack}
-          inputs={inputs as HlCopyTraderFormData}
-          setAppDataForm={setAppDataForm}
+          inputs={inputs as HlCopyTraderFormData & ERC8004FormData}
+          setAppDataForm={setAppDataInputs}
         />
       )}
     </CreateLayout>
diff --git a/src/pages/CreateApp/ERC8004Form.tsx b/src/pages/CreateApp/ERC8004Form.tsx
new file mode 100644
index 00000000..4db21392
--- /dev/null
+++ b/src/pages/CreateApp/ERC8004Form.tsx
@@ -0,0 +1,95 @@
+import { type FC, useState } from 'react'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { CreateFormNavigation } from './CreateFormNavigation'
+import { erc8004Schema, type ERC8004FormData, type AppDataInputs } from './types'
+import { InputFormField } from '../../components/InputFormField'
+import { Label } from '@oasisprotocol/ui-library/src/components/ui/label'
+import { Checkbox } from '@oasisprotocol/ui-library/src/components/ui/checkbox'
+import { addROFL8004RpcPrefix, stripROFL8004RpcPrefix } from '../../utils/rofl-8004.ts'
+
+type Props = {
+  handleNext: () => void
+  handleBack: () => void
+  inputs?: AppDataInputs
+  setAppDataForm: (data: { inputs: AppDataInputs }) => void
+}
+
+export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, setAppDataForm }) => {
+  const [skipERC8004, setSkipERC8004] = useState(false)
+
+  const form = useForm<ERC8004FormData>({
+    resolver: skipERC8004 ? undefined : zodResolver(erc8004Schema),
+    defaultValues: {
+      secrets: {
+        ERC_8004_RPC_URL: stripROFL8004RpcPrefix(inputs?.secrets?.ERC_8004_RPC_URL),
+        ERC_8004_PINATA_JWT: '',
+        ERC_8004_PRIVATE_KEY: '',
+        ...inputs?.secrets,
+      },
+    },
+  })
+
+  function onSubmit(values: ERC8004FormData) {
+    if (skipERC8004) {
+      setAppDataForm({
+        inputs: {
+          secrets: {},
+        } as AppDataInputs,
+      })
+    } else {
+      setAppDataForm({
+        inputs: {
+          ...values,
+          secrets: {
+            ...values.secrets,
+            ERC_8004_RPC_URL: addROFL8004RpcPrefix(values.secrets.ERC_8004_RPC_URL || ''),
+          },
+        } as AppDataInputs,
+      })
+    }
+    handleNext()
+  }
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 mb-6 w-full">
+      <InputFormField
+        control={form.control}
+        type="textarea"
+        name="secrets.ERC_8004_PINATA_JWT"
+        label="Pinata JWT Token"
+        placeholder="1234567890abcde..."
+        disabled={skipERC8004}
+      />
+
+      <InputFormField
+        control={form.control}
+        type="password"
+        name="secrets.ERC_8004_RPC_URL"
+        label="Infura API Token"
+        placeholder="1234567890abcde1234567890abcde12"
+        disabled={skipERC8004}
+      />
+
+      <InputFormField
+        control={form.control}
+        type="password"
+        name="secrets.ERC_8004_PRIVATE_KEY"
+        label="Private key for agent submittion"
+        placeholder="0x1234567890abcde1234567890abcde1234567890abcde1234567890abcde123"
+        disabled={skipERC8004}
+      />
+
+      <div className="flex items-center gap-2 mt-12">
+        <Checkbox
+          id="skip-erc-8004"
+          checked={skipERC8004}
+          onCheckedChange={checked => setSkipERC8004(checked === true)}
+        />
+        <Label htmlFor="skip-erc-8004">I don't want to use ERC-8004 Identity Registration</Label>
+      </div>
+
+      <CreateFormNavigation handleBack={handleBack} disabled={form.formState.isSubmitting} />
+    </form>
+  )
+}
diff --git a/src/pages/CreateApp/ERC8004Step.tsx b/src/pages/CreateApp/ERC8004Step.tsx
new file mode 100644
index 00000000..cfa71a09
--- /dev/null
+++ b/src/pages/CreateApp/ERC8004Step.tsx
@@ -0,0 +1,62 @@
+import { type FC, useEffect } from 'react'
+import { CreateLayout } from './CreateLayout'
+import { CreateFormHeader } from './CreateFormHeader'
+import { AppDataInputs } from './types'
+import { ERC8004Form } from './ERC8004Form.tsx'
+
+type CustomInputsStepProps = {
+  handleNext: () => void
+  handleBack: () => void
+  inputs?: AppDataInputs
+  setAppDataForm: (data: { inputs: AppDataInputs }) => void
+  selectedTemplateName?: string
+  selectedTemplateId?: string
+  customStepTitle: string
+}
+
+export const ERC8004Step: FC<CustomInputsStepProps> = ({
+  handleNext,
+  handleBack,
+  inputs,
+  setAppDataForm,
+  selectedTemplateName,
+  selectedTemplateId,
+  customStepTitle,
+}) => {
+  useEffect(() => {
+    if (selectedTemplateId === 'custom-build') {
+      handleNext()
+    }
+  }, [handleNext, selectedTemplateId])
+
+  if (selectedTemplateId === 'custom-build') {
+    return null
+  }
+
+  return (
+    <CreateLayout
+      currentStep={3}
+      selectedTemplateName={selectedTemplateName}
+      selectedTemplateId={selectedTemplateId}
+      customStepTitle={customStepTitle}
+    >
+      <CreateFormHeader title={customStepTitle} />
+      <ERC8004Form
+        handleNext={handleNext}
+        handleBack={handleBack}
+        inputs={inputs}
+        setAppDataForm={erc8004Inputs => {
+          setAppDataForm({
+            inputs: {
+              ...inputs,
+              secrets: {
+                ...inputs!.secrets,
+                ...erc8004Inputs.inputs.secrets,
+              },
+            } as AppDataInputs,
+          })
+        }}
+      />
+    </CreateLayout>
+  )
+}
diff --git a/src/pages/CreateApp/HlCopyTraderForm.tsx b/src/pages/CreateApp/HlCopyTraderForm.tsx
index bd9919cc..0404477f 100644
--- a/src/pages/CreateApp/HlCopyTraderForm.tsx
+++ b/src/pages/CreateApp/HlCopyTraderForm.tsx
@@ -2,14 +2,14 @@ import { type FC } from 'react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { CreateFormNavigation } from './CreateFormNavigation'
-import { hlCopyTraderFormSchema, type HlCopyTraderFormData } from './types'
+import { hlCopyTraderFormSchema, type HlCopyTraderFormData, type ERC8004FormData } from './types'
 import { InputFormField } from '../../components/InputFormField'
 
 type HlCopyTraderFormProps = {
   handleNext: () => void
   handleBack: () => void
-  inputs?: HlCopyTraderFormData
-  setAppDataForm: (data: { inputs: HlCopyTraderFormData }) => void
+  inputs?: HlCopyTraderFormData & ERC8004FormData
+  setAppDataForm: (data: { inputs: HlCopyTraderFormData & ERC8004FormData }) => void
 }
 
 export const HlCopyTraderForm: FC<HlCopyTraderFormProps> = ({
@@ -31,7 +31,7 @@ export const HlCopyTraderForm: FC<HlCopyTraderFormProps> = ({
   })
 
   function onSubmit(values: HlCopyTraderFormData) {
-    setAppDataForm({ inputs: values })
+    setAppDataForm({ inputs: values as HlCopyTraderFormData & ERC8004FormData })
     handleNext()
   }
 
diff --git a/src/pages/CreateApp/TgbotAgentForm.tsx b/src/pages/CreateApp/TgbotAgentForm.tsx
index 9e9dc5ed..fcc66845 100644
--- a/src/pages/CreateApp/TgbotAgentForm.tsx
+++ b/src/pages/CreateApp/TgbotAgentForm.tsx
@@ -3,14 +3,14 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { SelectFormField } from '../../components/SelectFormField'
 import { CreateFormNavigation } from './CreateFormNavigation'
-import { tgbotFormSchema, type AgentFormData } from './types'
+import { tgbotFormSchema, type AgentFormData, type ERC8004FormData } from './types'
 import { InputFormField } from '../../components/InputFormField'
 
 type TgbotAgentFormProps = {
   handleNext: () => void
   handleBack: () => void
-  inputs?: AgentFormData
-  setAppDataForm: (data: { inputs: AgentFormData }) => void
+  inputs?: AgentFormData & ERC8004FormData
+  setAppDataForm: (data: { inputs: AgentFormData & ERC8004FormData }) => void
 }
 
 export const TgbotAgentForm: FC<TgbotAgentFormProps> = ({
@@ -32,7 +32,7 @@ export const TgbotAgentForm: FC<TgbotAgentFormProps> = ({
   })
 
   function onSubmit(values: AgentFormData) {
-    setAppDataForm({ inputs: values })
+    setAppDataForm({ inputs: values as AgentFormData & ERC8004FormData })
     handleNext()
   }
 
diff --git a/src/pages/CreateApp/XAgentForm.tsx b/src/pages/CreateApp/XAgentForm.tsx
index c70e5434..232624b0 100644
--- a/src/pages/CreateApp/XAgentForm.tsx
+++ b/src/pages/CreateApp/XAgentForm.tsx
@@ -3,14 +3,14 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { SelectFormField } from '../../components/SelectFormField'
 import { CreateFormNavigation } from './CreateFormNavigation'
-import { xAgentFormSchema, type XAgentFormData } from './types'
+import { xAgentFormSchema, type XAgentFormData, type ERC8004FormData } from './types'
 import { InputFormField } from '../../components/InputFormField'
 
 type XAgentFormProps = {
   handleNext: () => void
   handleBack: () => void
-  inputs?: XAgentFormData
-  setAppDataForm: (data: { inputs: XAgentFormData }) => void
+  inputs?: XAgentFormData & ERC8004FormData
+  setAppDataForm: (data: { inputs: XAgentFormData & ERC8004FormData }) => void
 }
 
 export const XAgentForm: FC<XAgentFormProps> = ({ handleNext, handleBack, inputs, setAppDataForm }) => {
@@ -32,7 +32,7 @@ export const XAgentForm: FC<XAgentFormProps> = ({ handleNext, handleBack, inputs
   })
 
   function onSubmit(values: XAgentFormData) {
-    setAppDataForm({ inputs: values })
+    setAppDataForm({ inputs: values as XAgentFormData & ERC8004FormData })
     handleNext()
   }
 
diff --git a/src/pages/CreateApp/index.tsx b/src/pages/CreateApp/index.tsx
index d0a74d97..73a7312a 100644
--- a/src/pages/CreateApp/index.tsx
+++ b/src/pages/CreateApp/index.tsx
@@ -9,6 +9,7 @@ import { BootstrapStep } from './BootstrapStep'
 import { getCustomTemplate, getTemplateById } from './templates'
 import { trackEvent } from 'fathom-client'
 import type { CustomBuildFormData } from './types'
+import { ERC8004Step } from './ERC8004Step.tsx'
 
 export const Create: FC = () => {
   const { currentStep, setCurrentStep, appData, setAppDataForm } = useCreate()
@@ -16,6 +17,7 @@ export const Create: FC = () => {
     { component: TemplateStep },
     { component: MetadataStep },
     { component: CustomInputsStep },
+    { component: ERC8004Step },
     { component: BuildStep },
     { component: PaymentStep },
     { component: BootstrapStep },
@@ -38,8 +40,11 @@ export const Create: FC = () => {
       trackEvent(`Create app flow/3/agent/${appData?.templateId}`)
       trackedEvents.current.add(3)
     } else if (currentStep === 4 && !trackedEvents.current.has(4)) {
-      trackEvent(`Create app flow/4/payment/${appData?.templateId}`)
+      trackEvent(`Create app flow/4/erc-8004/${appData?.templateId}`)
       trackedEvents.current.add(4)
+    } else if (currentStep === 5 && !trackedEvents.current.has(5)) {
+      trackEvent(`Create app flow/5/payment/${appData?.templateId}`)
+      trackedEvents.current.add(5)
     }
   }, [currentStep, appData?.templateId])
 
@@ -80,6 +85,17 @@ export const Create: FC = () => {
         />
       )}
       {currentStep === 3 && selectedTemplate && (
+        <ERC8004Step
+          handleNext={handleNext}
+          handleBack={handleBack}
+          inputs={appData?.inputs}
+          setAppDataForm={setAppDataForm}
+          selectedTemplateName={selectedTemplate.name}
+          selectedTemplateId={selectedTemplate.id}
+          customStepTitle={selectedTemplate.customStepTitle}
+        />
+      )}
+      {currentStep === 4 && selectedTemplate && (
         <BuildStep
           handleNext={handleNext}
           handleBack={handleBack}
@@ -96,7 +112,7 @@ export const Create: FC = () => {
           customStepTitle={selectedTemplate.customStepTitle}
         />
       )}
-      {currentStep === 4 && selectedTemplate && (
+      {currentStep === 5 && selectedTemplate && (
         <PaymentStep
           handleNext={handleNext}
           handleBack={handleBack}
@@ -106,7 +122,7 @@ export const Create: FC = () => {
           customStepTitle={selectedTemplate.customStepTitle}
         />
       )}
-      {currentStep === 5 && <BootstrapStep appData={appData} template={selectedTemplate} />}
+      {currentStep === 6 && <BootstrapStep appData={appData} template={selectedTemplate} />}
     </div>
   )
 }
diff --git a/src/pages/CreateApp/types.ts b/src/pages/CreateApp/types.ts
index 27621e76..1d4314c7 100644
--- a/src/pages/CreateApp/types.ts
+++ b/src/pages/CreateApp/types.ts
@@ -133,6 +133,32 @@ export const customBuildFormSchema = z.object({
   value: z.string().default(''),
 })
 
+// Make sure that the secrets object contains variables prefixed with (const ROFL_8004_SERVICE_ENV_PREFIX)
+export const erc8004Schema = z.object({
+  secrets: z.object({
+    // Hardcoded to Sepolia prefix using Infura
+    ERC_8004_RPC_URL: z
+      .string()
+      .min(1, {
+        message: 'Infura API token is required.',
+      })
+      .max(100, {
+        message: 'Infura API token must be less than 100 characters.',
+      }),
+    ERC_8004_PINATA_JWT: z
+      .string()
+      .min(1, {
+        message: 'Pinata JWT is required.',
+      })
+      .max(1000, {
+        message: 'Pinata JWT must be less than 1000 characters.',
+      }),
+    ERC_8004_PRIVATE_KEY: z.string().regex(/^0x[a-fA-F0-9]{64}$/, {
+      message: 'Please enter a valid Ethereum private key (64 hexadecimal characters).',
+    }),
+  }),
+})
+
 export const tgbotFormSchema = z.object({
   secrets: z.object({
     OLLAMA_MODEL: z.string().min(1, {
@@ -203,17 +229,20 @@ export const hlCopyTraderFormSchema = z.object({
   }),
 })
 
-export type TemplateFormData = string
 export type MetadataFormData = z.infer<typeof metadataFormSchema>
 export type CustomBuildFormData = z.infer<typeof customBuildFormSchema>
+export type ERC8004FormData = z.infer<typeof erc8004Schema>
 export type AgentFormData = z.infer<typeof tgbotFormSchema>
 export type XAgentFormData = z.infer<typeof xAgentFormSchema>
 export type HlCopyTraderFormData = z.infer<typeof hlCopyTraderFormSchema>
 
+export type AppDataInputs = (CustomBuildFormData | AgentFormData | XAgentFormData | HlCopyTraderFormData) &
+  ERC8004FormData
+
 export type AppData = {
   templateId?: string
   metadata?: MetadataFormData
-  inputs?: CustomBuildFormData | AgentFormData | XAgentFormData | HlCopyTraderFormData
+  inputs?: AppDataInputs
   network: 'mainnet' | 'testnet'
   build?: BuildFormData
 }

From d9f0abd560cb4730b0f6bb58545a0f1325f9c5dd Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Thu, 20 Nov 2025 15:34:47 +0100
Subject: [PATCH 05/34] Add ROFL-8004 to compose.yaml in case configuration is
 set

---
 src/backend/api.ts                | 14 ++++++++++++--
 src/pages/CreateApp/templates.tsx | 27 ++++++++++++++++++++++++++-
 src/pages/CreateApp/useCreate.ts  |  2 +-
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/backend/api.ts b/src/backend/api.ts
index 31a281af..a59a6088 100644
--- a/src/backend/api.ts
+++ b/src/backend/api.ts
@@ -15,7 +15,12 @@ import { useBlockNavigatingAway } from '../pages/CreateApp/useBlockNavigatingAwa
 import { BuildFormData } from '../types/build-form.ts'
 import { convertToDurationTerms } from './helpers.ts'
 import { toastWithDuration } from '../utils/toastWithDuration.tsx'
-import { getReadmeByTemplateId, fillTemplate } from '../pages/CreateApp/templates.tsx'
+import {
+  getReadmeByTemplateId,
+  fillTemplate,
+  hasRofl8004ServiceSecrets,
+  addRofl8004ServiceToCompose,
+} from '../pages/CreateApp/templates.tsx'
 import { toast } from 'sonner'
 import { isMachineRemoved } from '../components/MachineStatusIcon/isMachineRemoved.ts'
 import { trackEvent } from 'fathom-client'
@@ -432,7 +437,12 @@ export function useCreateAndDeployApp() {
       const manifest = yaml.stringify(
         fillTemplate(roflTemplateYaml, appData.metadata!, build, network, appId, address),
       )
-      const compose = template.yaml.compose
+
+      let compose = template.yaml.compose
+      if (hasRofl8004ServiceSecrets(appData)) {
+        compose = addRofl8004ServiceToCompose(template.yaml.compose)
+      }
+
       console.log('Build?')
       setCurrentStep('building')
 
diff --git a/src/pages/CreateApp/templates.tsx b/src/pages/CreateApp/templates.tsx
index a97be999..fb5ec93f 100644
--- a/src/pages/CreateApp/templates.tsx
+++ b/src/pages/CreateApp/templates.tsx
@@ -1,3 +1,4 @@
+import * as yaml from 'yaml'
 import { parse } from 'yaml'
 import tgbotThumbnail from '../../../templates/tgbot/app.webp'
 import tgbotTemplate from '../../../templates/tgbot/rofl-template.yaml?raw'
@@ -14,9 +15,10 @@ import hlCopyTraderDocs from '../../../templates/hl-copy-trader/README.md?raw'
 import customBuildTemplate from '../../../templates/custom-build/rofl-template.yaml?raw'
 import customBuildDocs from '../../../templates/custom-build/README.md?raw'
 import defaultDeployments from '../../../templates/default-deployments.yaml?raw'
-import type { MetadataFormData } from './types'
+import type { AppData, MetadataFormData } from './types'
 import { BuildFormData } from '../../types/build-form'
 import { getEvmBech32Address } from '../../utils/helpers'
+import { ROFL_8004_SERVICE_ENV_PREFIX, ROFL_8004_SERVICE_NAME } from '../../constants/rofl-8004.ts'
 
 const parsedDefaultDeployments = parse(defaultDeployments)
 const parsedTgbotTemplate = parse(tgbotTemplate)
@@ -125,6 +127,29 @@ export const fillTemplate = (
   }
 }
 
+export const hasRofl8004ServiceSecrets = (appData: AppData) => {
+  return Object.keys(appData.inputs?.secrets ?? {}).some(key =>
+    key.toUpperCase().startsWith(ROFL_8004_SERVICE_ENV_PREFIX),
+  )
+}
+
+export const addRofl8004ServiceToCompose = (composeYaml: string): string => {
+  const compose = parse(composeYaml)
+
+  compose.services[ROFL_8004_SERVICE_NAME] = {
+    image: 'ghcr.io/oasisprotocol/rofl-8004:latest',
+    platform: 'linux/amd64',
+    environment: {
+      RPC_URL: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_RPC_URL}`,
+      PRIVATE_KEY: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_PRIVATE_KEY}`,
+      PINATA_JWT: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_PINATA_JWT}`,
+    },
+    volumes: ['/run/rofl-appd.sock:/run/rofl-appd.sock'],
+  }
+
+  return yaml.stringify(compose)
+}
+
 export const templates = [
   {
     name: parsedTgbotTemplate.name,
diff --git a/src/pages/CreateApp/useCreate.ts b/src/pages/CreateApp/useCreate.ts
index 69ad2a71..e9555c6d 100644
--- a/src/pages/CreateApp/useCreate.ts
+++ b/src/pages/CreateApp/useCreate.ts
@@ -36,7 +36,7 @@ export const useCreate = () => {
   }
 
   if (appData.network !== network) {
-    setCurrentStep(step => (step > 3 ? 3 : step))
+    setCurrentStep(step => (step > 4 ? 4 : step))
     // If user switches chain then reset provider + offer id
     const initData = initAppDataState(network)
     setAppData(prevData => ({

From 5d73aa65dba4625703825b433c8925de8799e5b2 Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Thu, 20 Nov 2025 15:35:25 +0100
Subject: [PATCH 06/34] Add json language to CodeDisplay

---
 src/components/CodeDisplay/index.tsx | 45 ++++++++++++++++++++++++++--
 1 file changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/components/CodeDisplay/index.tsx b/src/components/CodeDisplay/index.tsx
index 28b4da37..73384f18 100644
--- a/src/components/CodeDisplay/index.tsx
+++ b/src/components/CodeDisplay/index.tsx
@@ -15,14 +15,26 @@ const MonacoEditor = lazy(async () => {
   try {
     const monaco = await import('monaco-editor')
     const monacoReact = await import('@monaco-editor/react')
+
     window.MonacoEnvironment = {
-      getWorker() {
+      getWorker(_, label) {
+        // JSON worker
+        if (label === 'json') {
+          return new Worker(
+            new URL(
+              '../../../node_modules/monaco-editor/esm/vs/language/json/json.worker.js',
+              import.meta.url,
+            ),
+            { type: 'module' },
+          )
+        }
         return new Worker(
           new URL('../../../node_modules/monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url),
           { type: 'module' },
         )
       },
     }
+
     monacoReact.loader.config({ monaco })
 
     return monacoReact
@@ -43,6 +55,7 @@ type CodeDisplayProps = {
   onChange?: (value: string | undefined) => void
   // CSS white-space set in index.css for proper placeholder rendering
   placeholder?: string
+  language?: 'yaml' | 'json'
 }
 
 export const CodeDisplay: FC<CodeDisplayProps> = ({
@@ -51,6 +64,7 @@ export const CodeDisplay: FC<CodeDisplayProps> = ({
   readOnly = true,
   onChange,
   placeholder,
+  language = 'yaml',
 }) => {
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null)
   const monacoInstanceRef = useRef<typeof monaco | null>(null)
@@ -130,6 +144,25 @@ export const CodeDisplay: FC<CodeDisplayProps> = ({
     monacoInstance.editor.setModelMarkers(model, 'highlightYamlErrors', markers)
   }
 
+  const highlightJsonErrors = (newData: string | undefined) => {
+    const monacoInstance = monacoInstanceRef.current
+    if (!monacoInstance || !editorRef.current || newData === undefined) {
+      return
+    }
+    const model = editorRef.current.getModel()
+    if (!model) return
+
+    const markers: monaco.editor.IMarkerData[] = []
+
+    try {
+      JSON.parse(newData)
+    } catch (e) {
+      console.warn(e)
+    }
+
+    monacoInstance.editor.setModelMarkers(model, 'highlightJsonErrors', markers)
+  }
+
   const handleEditorDidMount = (
     editor: monaco.editor.IStandaloneCodeEditor,
     monacoInstance: typeof monaco,
@@ -140,7 +173,13 @@ export const CodeDisplay: FC<CodeDisplayProps> = ({
   }
 
   const handleEditorChange = (newData: string | undefined) => {
-    if (!readOnly) highlightYamlErrors(newData)
+    if (!readOnly) {
+      if (language === 'yaml') {
+        highlightYamlErrors(newData)
+      } else if (language === 'json') {
+        highlightJsonErrors(newData)
+      }
+    }
 
     highlightErrorLogs(newData)
 
@@ -152,7 +191,7 @@ export const CodeDisplay: FC<CodeDisplayProps> = ({
       <Suspense fallback={<TextAreaFallback value={data} />}>
         <MonacoEditor
           loading={<TextAreaFallback value={data} />}
-          language="yaml"
+          language={language}
           value={data}
           theme="customTheme"
           beforeMount={handleEditorWillMount}

From f6713653bfe7ffabc419e3f368ee0186d24aebcf Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Thu, 20 Nov 2025 15:36:05 +0100
Subject: [PATCH 07/34] Add ERC-8004 contract interactions

---
 src/contracts/ERC-8004_ABI.json | 19 +++++++++++++++++++
 src/contracts/erc-8004.ts       | 30 ++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 src/contracts/ERC-8004_ABI.json
 create mode 100644 src/contracts/erc-8004.ts

diff --git a/src/contracts/ERC-8004_ABI.json b/src/contracts/ERC-8004_ABI.json
new file mode 100644
index 00000000..f84ef535
--- /dev/null
+++ b/src/contracts/ERC-8004_ABI.json
@@ -0,0 +1,19 @@
+[
+  {
+    "inputs": [
+      { "name": "agentId", "type": "uint256" },
+      { "name": "key", "type": "string" }
+    ],
+    "name": "getMetadata",
+    "outputs": [{ "name": "", "type": "bytes" }],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [{ "name": "tokenId", "type": "uint256" }],
+    "name": "tokenURI",
+    "outputs": [{ "name": "", "type": "string" }],
+    "stateMutability": "view",
+    "type": "function"
+  }
+]
diff --git a/src/contracts/erc-8004.ts b/src/contracts/erc-8004.ts
new file mode 100644
index 00000000..4a3c6f8c
--- /dev/null
+++ b/src/contracts/erc-8004.ts
@@ -0,0 +1,30 @@
+import ERC_8004_ABI from './ERC-8004_ABI.json'
+import { ROFL_8004_AGENT_IDENTITY_CONTRACT, ROFL_8004_PUBLIC_CLIENT } from '../constants/rofl-8004.ts'
+
+export const getMetadata = async (agentId: bigint, key?: string): Promise<`0x${string}`> => {
+  try {
+    return (await ROFL_8004_PUBLIC_CLIENT.readContract({
+      address: ROFL_8004_AGENT_IDENTITY_CONTRACT,
+      abi: ERC_8004_ABI,
+      functionName: 'getMetadata',
+      args: [agentId, key],
+    })) as `0x${string}`
+  } catch (error) {
+    console.error(`Error fetching metadata for agent ${agentId}`, error)
+    throw error
+  }
+}
+
+export const getTokenURI = async (agentId: bigint): Promise<string> => {
+  try {
+    return (await ROFL_8004_PUBLIC_CLIENT.readContract({
+      address: ROFL_8004_AGENT_IDENTITY_CONTRACT,
+      abi: ERC_8004_ABI,
+      functionName: 'tokenURI',
+      args: [agentId],
+    })) as string
+  } catch (error) {
+    console.error(`Error fetching tokenURI for agent ${agentId}:`, error)
+    throw error
+  }
+}

From 8f70a900b4a2efbbe0b98ba9f3265fa464f515ba Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Thu, 20 Nov 2025 15:36:37 +0100
Subject: [PATCH 08/34] Add useERC8000TokenURI

---
 src/hooks/useERC8004TokenURI.ts | 50 +++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 src/hooks/useERC8004TokenURI.ts

diff --git a/src/hooks/useERC8004TokenURI.ts b/src/hooks/useERC8004TokenURI.ts
new file mode 100644
index 00000000..ff9917aa
--- /dev/null
+++ b/src/hooks/useERC8004TokenURI.ts
@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react'
+import { getTokenURI } from '../contracts/erc-8004.ts'
+
+interface UseERC8004TokenURIReturnType {
+  data: string | null
+  isLoading: boolean
+  error: Error | null
+  refetch: () => void
+}
+
+export function useERC8004TokenURI(
+  agentId: bigint | undefined,
+  enabled = true,
+): UseERC8004TokenURIReturnType {
+  const [data, setData] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  const fetchTokenURI = async () => {
+    if (!agentId) return
+
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const result = await getTokenURI(agentId)
+
+      setData(result)
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Failed to fetch token URI'))
+      console.error('Error fetching ERC-8004 token URI:', err)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (enabled && agentId) {
+      fetchTokenURI()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [agentId, enabled])
+
+  return {
+    data,
+    isLoading,
+    error,
+    refetch: fetchTokenURI,
+  }
+}

From a210ca85d75d20cf843f33992fd9f894618f5753 Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Thu, 20 Nov 2025 15:37:02 +0100
Subject: [PATCH 09/34] Display ERC-8004 metadata in AppDetails

---
 src/pages/Dashboard/AppDetails/AppERC8004.tsx | 58 +++++++++++++++++++
 src/pages/Dashboard/AppDetails/index.tsx      | 12 ++++
 2 files changed, 70 insertions(+)
 create mode 100644 src/pages/Dashboard/AppDetails/AppERC8004.tsx

diff --git a/src/pages/Dashboard/AppDetails/AppERC8004.tsx b/src/pages/Dashboard/AppDetails/AppERC8004.tsx
new file mode 100644
index 00000000..5f41492a
--- /dev/null
+++ b/src/pages/Dashboard/AppDetails/AppERC8004.tsx
@@ -0,0 +1,58 @@
+import { type FC } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import axios from 'axios'
+import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
+import { RoflInstance } from '../../../nexus/generated/api.ts'
+import { useERC8004TokenURI } from '../../../hooks/useERC8004TokenURI.ts'
+import { fromMetadataToAgentId, tokenURIToLink } from '../../../utils/rofl-8004.ts'
+import { CodeDisplay } from '../../../components/CodeDisplay'
+
+type Props = {
+  roflInstances: RoflInstance[]
+}
+
+export const AppERC8004: FC<Props> = ({ roflInstances }) => {
+  // TODO: Display all instances
+  const [instance] = roflInstances
+  const tokenId = fromMetadataToAgentId(instance.metadata)
+  const {
+    isLoading: isLoadingTokenURI,
+    data: tokenURI,
+    error: tokenURIError,
+  } = useERC8004TokenURI(BigInt(tokenId))
+
+  const {
+    data: metadata,
+    isLoading: isLoadingMetadata,
+    error: metadataError,
+  } = useQuery({
+    queryKey: ['erc8004-metadata', tokenURI],
+    queryFn: async () => {
+      if (!tokenURI) throw new Error('No tokenURI available')
+      const httpLink = tokenURIToLink(tokenURI)
+      const response = await axios.get(httpLink)
+      return response.data
+    },
+    enabled: !!tokenURI,
+  })
+
+  const isLoading = isLoadingTokenURI || isLoadingMetadata
+  const error = tokenURIError || metadataError
+
+  return (
+    <div className="space-y-6">
+      {isLoading && <Skeleton className="w-full h-[400px]" />}
+      {!isLoading && (
+        <>
+          {metadata && (
+            <div>
+              <h3 className="text-lg font-semibold mb-2">ERC-8004 Metadata</h3>
+              <CodeDisplay data={JSON.stringify(metadata, null, '\t')} language="json" />
+            </div>
+          )}
+          {error && <div className="text-red-500">Error loading metadata: {error.message}</div>}
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/src/pages/Dashboard/AppDetails/index.tsx b/src/pages/Dashboard/AppDetails/index.tsx
index 735c4509..d9dcdb52 100644
--- a/src/pages/Dashboard/AppDetails/index.tsx
+++ b/src/pages/Dashboard/AppDetails/index.tsx
@@ -20,6 +20,8 @@ import { Dialog, DialogContent } from '@oasisprotocol/ui-library/src/components/
 import { HelpWidget } from '../../CreateApp/HelpWidget'
 import { AddSecret } from '../../../components/SecretsTable/AddSecret'
 import { useAccount } from 'wagmi'
+import { ROFL_8004_METADATA_KEY } from '../../../constants/rofl-8004.ts'
+import { AppERC8004 } from './AppERC8004.tsx'
 
 function setDefaultMetadataViewState(metadata: RoflAppMetadata | undefined = {}): ViewMetadataState {
   return {
@@ -65,6 +67,10 @@ export const AppDetails: FC = () => {
   )
   const { data: readme } = useDownloadArtifact(`${id}-readme-md`, token)
 
+  const instancesWithERC8004Token =
+    roflApp?.active_instances.filter(({ metadata }) => metadata?.[ROFL_8004_METADATA_KEY]) ?? []
+  const hasInstancesWithERC8004Token = instancesWithERC8004Token.length > 0
+
   const editEnabled = !!token && !roflApp?.removed && roflApp?.admin_eth === account.address
   const removeApp = useRemoveApp()
   const updateApp = useUpdateApp()
@@ -179,6 +185,7 @@ export const AppDetails: FC = () => {
                       <TabsTrigger value="details">Details</TabsTrigger>
                       <TabsTrigger value="secrets">Secrets</TabsTrigger>
                       <TabsTrigger value="compose">Manifest</TabsTrigger>
+                      {hasInstancesWithERC8004Token && <TabsTrigger value="erc-8004">ERC-8004</TabsTrigger>}
                     </TabsList>
                   </div>
                 </div>
@@ -214,6 +221,11 @@ export const AppDetails: FC = () => {
                   composeYaml={composeYaml}
                 />
               </TabsContent>
+              {hasInstancesWithERC8004Token && (
+                <TabsContent value="erc-8004">
+                  <AppERC8004 roflInstances={instancesWithERC8004Token} />
+                </TabsContent>
+              )}
             </Tabs>
           </div>
         </>

From 1fd1fe13ff4e922252d794a489b7534ae58e0fd5 Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Thu, 20 Nov 2025 15:49:42 +0100
Subject: [PATCH 10/34] Add changelog

---
 .changelog/361.feature.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 .changelog/361.feature.md

diff --git a/.changelog/361.feature.md b/.changelog/361.feature.md
new file mode 100644
index 00000000..1175b273
--- /dev/null
+++ b/.changelog/361.feature.md
@@ -0,0 +1 @@
+Add initial ERC-8004 support

From 80ef70f6cebac37ca4ec865fcc8904e3d95cfbf7 Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Fri, 21 Nov 2025 06:26:43 +0100
Subject: [PATCH 11/34] Add additional fields to ERC8004 form

- change prefix to ERC8004
---
 src/backend/api.ts                      | 10 ++--
 src/components/InputFormField/index.tsx | 26 +++++++++-
 src/constants/rofl-8004.ts              |  2 +-
 src/pages/CreateApp/ERC8004Form.tsx     | 67 ++++++++++++++++++++++---
 src/pages/CreateApp/templates.tsx       | 27 +---------
 src/pages/CreateApp/types.ts            | 15 ++++--
 src/utils/rofl-8004.ts                  | 43 ++++++++++++++++
 7 files changed, 144 insertions(+), 46 deletions(-)

diff --git a/src/backend/api.ts b/src/backend/api.ts
index a59a6088..8ee3d754 100644
--- a/src/backend/api.ts
+++ b/src/backend/api.ts
@@ -15,16 +15,12 @@ import { useBlockNavigatingAway } from '../pages/CreateApp/useBlockNavigatingAwa
 import { BuildFormData } from '../types/build-form.ts'
 import { convertToDurationTerms } from './helpers.ts'
 import { toastWithDuration } from '../utils/toastWithDuration.tsx'
-import {
-  getReadmeByTemplateId,
-  fillTemplate,
-  hasRofl8004ServiceSecrets,
-  addRofl8004ServiceToCompose,
-} from '../pages/CreateApp/templates.tsx'
+import { getReadmeByTemplateId, fillTemplate } from '../pages/CreateApp/templates.tsx'
 import { toast } from 'sonner'
 import { isMachineRemoved } from '../components/MachineStatusIcon/isMachineRemoved.ts'
 import { trackEvent } from 'fathom-client'
 import { getOasisAddressBytesFromEvm } from '../utils/helpers.ts'
+import { addRofl8004ServiceToCompose, hasRofl8004ServiceSecrets } from '../utils/rofl-8004.ts'
 
 const BACKEND_URL = import.meta.env.VITE_ROFL_APP_BACKEND
 
@@ -440,7 +436,7 @@ export function useCreateAndDeployApp() {
 
       let compose = template.yaml.compose
       if (hasRofl8004ServiceSecrets(appData)) {
-        compose = addRofl8004ServiceToCompose(template.yaml.compose)
+        compose = addRofl8004ServiceToCompose(template.yaml.compose, appData)
       }
 
       console.log('Build?')
diff --git a/src/components/InputFormField/index.tsx b/src/components/InputFormField/index.tsx
index 698c5966..2d2a8071 100644
--- a/src/components/InputFormField/index.tsx
+++ b/src/components/InputFormField/index.tsx
@@ -4,7 +4,13 @@ import { Input } from '@oasisprotocol/ui-library/src/components/ui/input'
 import { Textarea } from '@oasisprotocol/ui-library/src/components/ui/textarea'
 import { Label } from '@oasisprotocol/ui-library/src/components/ui/label'
 import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
-import { Eye, EyeOff } from 'lucide-react'
+import { Eye, EyeOff, Info } from 'lucide-react'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipProvider,
+} from '@oasisprotocol/ui-library/src/components/ui/tooltip'
 
 type InputFormFieldProps<T extends FieldValues> = {
   control: Control<T>
@@ -14,6 +20,7 @@ type InputFormFieldProps<T extends FieldValues> = {
   type?: 'input' | 'password' | 'number' | 'textarea'
   disabled?: boolean
   min?: number
+  info?: string
 }
 
 export const InputFormField = <T extends FieldValues>({
@@ -24,6 +31,7 @@ export const InputFormField = <T extends FieldValues>({
   type = 'input',
   disabled = false,
   min,
+  info,
 }: InputFormFieldProps<T>): ReactNode => {
   const [showPassword, setShowPassword] = useState(false)
 
@@ -40,7 +48,21 @@ export const InputFormField = <T extends FieldValues>({
 
   return (
     <div className="grid gap-2">
-      {label && <Label htmlFor={name}>{label}</Label>}
+      {label && (
+        <div className="flex items-center gap-1.5">
+          <Label htmlFor={name}>{label}</Label>
+          {info && (
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Info className="h-4 w-4 text-muted-foreground cursor-help" />
+                </TooltipTrigger>
+                <TooltipContent>{info}</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          )}
+        </div>
+      )}
       <Controller
         control={control}
         name={name}
diff --git a/src/constants/rofl-8004.ts b/src/constants/rofl-8004.ts
index 0d7cc6f9..762e04ef 100644
--- a/src/constants/rofl-8004.ts
+++ b/src/constants/rofl-8004.ts
@@ -2,7 +2,7 @@ import { sepolia } from 'viem/chains'
 import { createPublicClient, http } from 'viem'
 
 export const ROFL_8004_SERVICE_NAME = 'rofl-8004'
-export const ROFL_8004_SERVICE_ENV_PREFIX = 'ERC_8004'
+export const ROFL_8004_SERVICE_ENV_PREFIX = 'ERC8004'
 export const ROFL_8004_SERVICE_RPC_URL_BASE = 'https://sepolia.infura.io/v3/'
 
 export const ROFL_8004_CHAIN = sepolia
diff --git a/src/pages/CreateApp/ERC8004Form.tsx b/src/pages/CreateApp/ERC8004Form.tsx
index 4db21392..475dd0a2 100644
--- a/src/pages/CreateApp/ERC8004Form.tsx
+++ b/src/pages/CreateApp/ERC8004Form.tsx
@@ -22,9 +22,14 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, setAppD
     resolver: skipERC8004 ? undefined : zodResolver(erc8004Schema),
     defaultValues: {
       secrets: {
-        ERC_8004_RPC_URL: stripROFL8004RpcPrefix(inputs?.secrets?.ERC_8004_RPC_URL),
-        ERC_8004_PINATA_JWT: '',
-        ERC_8004_PRIVATE_KEY: '',
+        ERC8004_RPC_URL: stripROFL8004RpcPrefix(inputs?.secrets?.ERC8004_RPC_URL),
+        ERC8004_PINATA_JWT: '',
+        ERC8004_SIGNING_KEY: '',
+        ERC8004_AGENT_NAME: '',
+        ERC8004_AGENT_DESCRIPTION: '',
+        ERC8004_AGENT_VERSION: '',
+        ERC8004_AGENT_CATEGORY: '',
+        ERC8004_AGENT_IMAGE: '',
         ...inputs?.secrets,
       },
     },
@@ -43,7 +48,7 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, setAppD
           ...values,
           secrets: {
             ...values.secrets,
-            ERC_8004_RPC_URL: addROFL8004RpcPrefix(values.secrets.ERC_8004_RPC_URL || ''),
+            ERC8004_RPC_URL: addROFL8004RpcPrefix(values.secrets.ERC8004_RPC_URL || ''),
           },
         } as AppDataInputs,
       })
@@ -56,28 +61,76 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, setAppD
       <InputFormField
         control={form.control}
         type="textarea"
-        name="secrets.ERC_8004_PINATA_JWT"
+        name="secrets.ERC8004_PINATA_JWT"
         label="Pinata JWT Token"
         placeholder="1234567890abcde..."
         disabled={skipERC8004}
+        info="Your Pinata JWT token is used to pin agent metadata to IPFS. Get it from pinata.cloud"
       />
 
       <InputFormField
         control={form.control}
         type="password"
-        name="secrets.ERC_8004_RPC_URL"
+        name="secrets.ERC8004_RPC_URL"
         label="Infura API Token"
         placeholder="1234567890abcde1234567890abcde12"
         disabled={skipERC8004}
+        info="Your Infura API token for Sepolia network. Get it from infura.io"
       />
 
       <InputFormField
         control={form.control}
         type="password"
-        name="secrets.ERC_8004_PRIVATE_KEY"
+        name="secrets.ERC8004_SIGNING_KEY"
         label="Private key for agent submittion"
         placeholder="0x1234567890abcde1234567890abcde1234567890abcde1234567890abcde123"
         disabled={skipERC8004}
+        info="The private key used to sign and submit your agent to the ERC-8004 registry. Add some funds on Sepolia network."
+      />
+
+      <InputFormField
+        control={form.control}
+        type="input"
+        name="secrets.ERC8004_AGENT_NAME"
+        label="Agent Name (Optional)"
+        placeholder="rofl-agent"
+        disabled={skipERC8004}
+      />
+
+      <InputFormField
+        control={form.control}
+        type="textarea"
+        name="secrets.ERC8004_AGENT_DESCRIPTION"
+        label="Agent Description (Optional)"
+        placeholder="Oasis ROFL-powered trustless agent"
+        disabled={skipERC8004}
+      />
+
+      <InputFormField
+        control={form.control}
+        type="input"
+        name="secrets.ERC8004_AGENT_IMAGE"
+        label="Agent Image URL (Optional)"
+        placeholder="https://example.com/logo.png"
+        disabled={skipERC8004}
+      />
+
+      <InputFormField
+        control={form.control}
+        type="input"
+        name="secrets.ERC8004_AGENT_VERSION"
+        label="Agent Version (Optional)"
+        placeholder="0.1.0"
+        disabled={skipERC8004}
+      />
+
+      <InputFormField
+        control={form.control}
+        type="input"
+        name="secrets.ERC8004_AGENT_CATEGORY"
+        label="Agent Category (Optional)"
+        placeholder="rofl"
+        disabled={skipERC8004}
       />
 
       <div className="flex items-center gap-2 mt-12">
diff --git a/src/pages/CreateApp/templates.tsx b/src/pages/CreateApp/templates.tsx
index fb5ec93f..a97be999 100644
--- a/src/pages/CreateApp/templates.tsx
+++ b/src/pages/CreateApp/templates.tsx
@@ -1,4 +1,3 @@
-import * as yaml from 'yaml'
 import { parse } from 'yaml'
 import tgbotThumbnail from '../../../templates/tgbot/app.webp'
 import tgbotTemplate from '../../../templates/tgbot/rofl-template.yaml?raw'
@@ -15,10 +14,9 @@ import hlCopyTraderDocs from '../../../templates/hl-copy-trader/README.md?raw'
 import customBuildTemplate from '../../../templates/custom-build/rofl-template.yaml?raw'
 import customBuildDocs from '../../../templates/custom-build/README.md?raw'
 import defaultDeployments from '../../../templates/default-deployments.yaml?raw'
-import type { AppData, MetadataFormData } from './types'
+import type { MetadataFormData } from './types'
 import { BuildFormData } from '../../types/build-form'
 import { getEvmBech32Address } from '../../utils/helpers'
-import { ROFL_8004_SERVICE_ENV_PREFIX, ROFL_8004_SERVICE_NAME } from '../../constants/rofl-8004.ts'
 
 const parsedDefaultDeployments = parse(defaultDeployments)
 const parsedTgbotTemplate = parse(tgbotTemplate)
@@ -127,29 +125,6 @@ export const fillTemplate = (
   }
 }
 
-export const hasRofl8004ServiceSecrets = (appData: AppData) => {
-  return Object.keys(appData.inputs?.secrets ?? {}).some(key =>
-    key.toUpperCase().startsWith(ROFL_8004_SERVICE_ENV_PREFIX),
-  )
-}
-
-export const addRofl8004ServiceToCompose = (composeYaml: string): string => {
-  const compose = parse(composeYaml)
-
-  compose.services[ROFL_8004_SERVICE_NAME] = {
-    image: 'ghcr.io/oasisprotocol/rofl-8004:latest',
-    platform: 'linux/amd64',
-    environment: {
-      RPC_URL: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_RPC_URL}`,
-      PRIVATE_KEY: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_PRIVATE_KEY}`,
-      PINATA_JWT: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_PINATA_JWT}`,
-    },
-    volumes: ['/run/rofl-appd.sock:/run/rofl-appd.sock'],
-  }
-
-  return yaml.stringify(compose)
-}
-
 export const templates = [
   {
     name: parsedTgbotTemplate.name,
diff --git a/src/pages/CreateApp/types.ts b/src/pages/CreateApp/types.ts
index 1d4314c7..bea2fe74 100644
--- a/src/pages/CreateApp/types.ts
+++ b/src/pages/CreateApp/types.ts
@@ -137,7 +137,7 @@ export const customBuildFormSchema = z.object({
 export const erc8004Schema = z.object({
   secrets: z.object({
     // Hardcoded to Sepolia prefix using Infura
-    ERC_8004_RPC_URL: z
+    ERC8004_RPC_URL: z
       .string()
       .min(1, {
         message: 'Infura API token is required.',
@@ -145,7 +145,7 @@ export const erc8004Schema = z.object({
       .max(100, {
         message: 'Infura API token must be less than 100 characters.',
       }),
-    ERC_8004_PINATA_JWT: z
+    ERC8004_PINATA_JWT: z
       .string()
       .min(1, {
         message: 'Pinata JWT is required.',
@@ -153,9 +153,18 @@ export const erc8004Schema = z.object({
       .max(1000, {
         message: 'Pinata JWT must be less than 1000 characters.',
       }),
-    ERC_8004_PRIVATE_KEY: z.string().regex(/^0x[a-fA-F0-9]{64}$/, {
+    ERC8004_SIGNING_KEY: z.string().regex(/^0x[a-fA-F0-9]{64}$/, {
       message: 'Please enter a valid Ethereum private key (64 hexadecimal characters).',
     }),
+    ERC8004_AGENT_NAME: z.string().optional(),
+    ERC8004_AGENT_DESCRIPTION: z.string().optional(),
+    ERC8004_AGENT_IMAGE: z
+      .string()
+      .url({ message: 'Please enter a valid URL.' })
+      .optional()
+      .or(z.literal('')),
+    ERC8004_AGENT_VERSION: z.string().optional().or(z.literal('')),
+    ERC8004_AGENT_CATEGORY: z.string().optional(),
   }),
 })
 
diff --git a/src/utils/rofl-8004.ts b/src/utils/rofl-8004.ts
index 81518fb3..f8913984 100644
--- a/src/utils/rofl-8004.ts
+++ b/src/utils/rofl-8004.ts
@@ -1,9 +1,14 @@
 import {
   ROFL_8004_CHAIN,
   ROFL_8004_METADATA_KEY,
+  ROFL_8004_SERVICE_ENV_PREFIX,
+  ROFL_8004_SERVICE_NAME,
   ROFL_8004_SERVICE_RPC_URL_BASE,
 } from '../constants/rofl-8004.ts'
 import { RoflInstance } from '../nexus/generated/api.ts'
+import { AppData, ERC8004FormData } from '../pages/CreateApp/types.ts'
+import * as yaml from 'yaml'
+import { parse } from 'yaml'
 
 export const stripROFL8004RpcPrefix = (url: string | undefined): string => {
   if (!url) return ''
@@ -28,3 +33,41 @@ export const fromMetadataToAgentId = (metadata: RoflInstance['metadata']) => {
 }
 
 export const tokenURIToLink = (tokenURI: string) => tokenURI.replace('ipfs://', 'https://ipfs.io/ipfs/')
+
+export const hasRofl8004ServiceSecrets = (appData: AppData) => {
+  return Object.keys(appData.inputs?.secrets ?? {}).some(key =>
+    key.toUpperCase().startsWith(ROFL_8004_SERVICE_ENV_PREFIX),
+  )
+}
+
+export const addRofl8004ServiceToCompose = (composeYaml: string, appData: AppData): string => {
+  const compose = parse(composeYaml)
+
+  const environment = Object.keys(appData.inputs?.secrets ?? {})
+    .filter(key => key.toUpperCase().startsWith(ROFL_8004_SERVICE_ENV_PREFIX))
+    .reduce(
+      (acc, key) => {
+        const erc8004Key = key as keyof ERC8004FormData['secrets']
+
+        if (appData.inputs?.secrets?.[erc8004Key]) {
+          // Exception: ERC8004_SIGNING_KEY does not need to strip the prefix
+          const envKey = ['ERC8004_SIGNING_KEY'].includes(key)
+            ? key
+            : key.replace(/^ERC8004_/, `${ROFL_8004_SERVICE_ENV_PREFIX}_`)
+          acc[envKey] = appData.inputs?.secrets?.[erc8004Key]
+        }
+
+        return acc
+      },
+      {} as Record<string, string>,
+    )
+
+  compose.services[ROFL_8004_SERVICE_NAME] = {
+    image: 'ghcr.io/oasisprotocol/rofl-8004:latest',
+    platform: 'linux/amd64',
+    environment,
+    volumes: ['/run/rofl-appd.sock:/run/rofl-appd.sock'],
+  }
+
+  return yaml.stringify(compose)
+}

From dd9fb70f953571070121ab0adf2f51b4b2cb2daa Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Fri, 21 Nov 2025 06:34:45 +0100
Subject: [PATCH 12/34] Add ERC-8004 step to custom build

- add validation for ERC-8004 reserved fields
---
 src/pages/CreateApp/CreateLayout.tsx         | 4 +---
 src/pages/CreateApp/CustomBuildSetupForm.tsx | 9 +++++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/pages/CreateApp/CreateLayout.tsx b/src/pages/CreateApp/CreateLayout.tsx
index 45583847..e1af1ee6 100644
--- a/src/pages/CreateApp/CreateLayout.tsx
+++ b/src/pages/CreateApp/CreateLayout.tsx
@@ -40,9 +40,7 @@ export const CreateLayout: FC<CreateLayoutProps> = ({
   const sidebarItems = [
     { label: 'Input Metadata', active: currentStep === 1 },
     { label: customStepTitle, active: currentStep === 2 },
-    ...(selectedTemplateId !== 'custom-build'
-      ? [{ label: 'Setup ERC-8004', active: currentStep === 3 }]
-      : []),
+    { label: 'Setup ERC-8004', active: currentStep === 3 },
     { label: 'Configure Machine', active: currentStep === 4 },
     {
       label: 'Payment',
diff --git a/src/pages/CreateApp/CustomBuildSetupForm.tsx b/src/pages/CreateApp/CustomBuildSetupForm.tsx
index 6877d9ff..bcccdb3f 100644
--- a/src/pages/CreateApp/CustomBuildSetupForm.tsx
+++ b/src/pages/CreateApp/CustomBuildSetupForm.tsx
@@ -10,6 +10,7 @@ import { AddSecretFormContent } from '../../components/SecretsTable/AddSecretFor
 import { useComposeValidation } from './useComposeValidation'
 import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
 import { composePlaceholder } from './composePlaceholder'
+import { ROFL_8004_SERVICE_ENV_PREFIX } from '../../constants/rofl-8004.ts'
 
 type CustomBuildSetupFormProps = {
   handleNext: () => void
@@ -91,6 +92,14 @@ export const CustomBuildSetupForm: FC<CustomBuildSetupFormProps> = ({
       hasError = true
     }
 
+    if (name && name.startsWith(ROFL_8004_SERVICE_ENV_PREFIX)) {
+      form.setError('name', {
+        type: 'manual',
+        message: `Secret names starting with "${ROFL_8004_SERVICE_ENV_PREFIX}" are reserved and cannot be used.`,
+      })
+      hasError = true
+    }
+
     if (!value || value.trim() === '') {
       form.setError('value', { type: 'manual', message: 'Secret is required.' })
       hasError = true

From 5a21b15177d983f5cb9a6bf7cfbcfd7e9e93d3ce Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Fri, 21 Nov 2025 07:53:32 +0100
Subject: [PATCH 13/34] Prefill ERC8004Form with metadata

---
 src/pages/CreateApp/ERC8004Form.tsx | 11 ++++++-----
 src/pages/CreateApp/ERC8004Step.tsx |  5 ++++-
 src/pages/CreateApp/index.tsx       |  1 +
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/pages/CreateApp/ERC8004Form.tsx b/src/pages/CreateApp/ERC8004Form.tsx
index 475dd0a2..629d0767 100644
--- a/src/pages/CreateApp/ERC8004Form.tsx
+++ b/src/pages/CreateApp/ERC8004Form.tsx
@@ -2,7 +2,7 @@ import { type FC, useState } from 'react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { CreateFormNavigation } from './CreateFormNavigation'
-import { erc8004Schema, type ERC8004FormData, type AppDataInputs } from './types'
+import { erc8004Schema, type ERC8004FormData, type AppDataInputs, type MetadataFormData } from './types'
 import { InputFormField } from '../../components/InputFormField'
 import { Label } from '@oasisprotocol/ui-library/src/components/ui/label'
 import { Checkbox } from '@oasisprotocol/ui-library/src/components/ui/checkbox'
@@ -11,11 +11,12 @@ import { addROFL8004RpcPrefix, stripROFL8004RpcPrefix } from '../../utils/rofl-8
 type Props = {
   handleNext: () => void
   handleBack: () => void
+  metadata?: MetadataFormData
   inputs?: AppDataInputs
   setAppDataForm: (data: { inputs: AppDataInputs }) => void
 }
 
-export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, setAppDataForm }) => {
+export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadata, setAppDataForm }) => {
   const [skipERC8004, setSkipERC8004] = useState(false)
 
   const form = useForm<ERC8004FormData>({
@@ -25,9 +26,9 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, setAppD
         ERC8004_RPC_URL: stripROFL8004RpcPrefix(inputs?.secrets?.ERC8004_RPC_URL),
         ERC8004_PINATA_JWT: '',
         ERC8004_SIGNING_KEY: '',
-        ERC8004_AGENT_NAME: '',
-        ERC8004_AGENT_DESCRIPTION: '',
-        ERC8004_AGENT_VERSION: '',
+        ERC8004_AGENT_NAME: metadata?.name ?? '',
+        ERC8004_AGENT_DESCRIPTION: metadata?.description ?? '',
+        ERC8004_AGENT_VERSION: metadata?.version ?? '',
         ERC8004_AGENT_CATEGORY: '',
         ERC8004_AGENT_IMAGE: '',
         ...inputs?.secrets,
diff --git a/src/pages/CreateApp/ERC8004Step.tsx b/src/pages/CreateApp/ERC8004Step.tsx
index cfa71a09..735945be 100644
--- a/src/pages/CreateApp/ERC8004Step.tsx
+++ b/src/pages/CreateApp/ERC8004Step.tsx
@@ -1,12 +1,13 @@
 import { type FC, useEffect } from 'react'
 import { CreateLayout } from './CreateLayout'
 import { CreateFormHeader } from './CreateFormHeader'
-import { AppDataInputs } from './types'
+import { AppDataInputs, type MetadataFormData } from './types'
 import { ERC8004Form } from './ERC8004Form.tsx'
 
 type CustomInputsStepProps = {
   handleNext: () => void
   handleBack: () => void
+  metadata?: MetadataFormData
   inputs?: AppDataInputs
   setAppDataForm: (data: { inputs: AppDataInputs }) => void
   selectedTemplateName?: string
@@ -17,6 +18,7 @@ type CustomInputsStepProps = {
 export const ERC8004Step: FC<CustomInputsStepProps> = ({
   handleNext,
   handleBack,
+  metadata,
   inputs,
   setAppDataForm,
   selectedTemplateName,
@@ -44,6 +46,7 @@ export const ERC8004Step: FC<CustomInputsStepProps> = ({
       <ERC8004Form
         handleNext={handleNext}
         handleBack={handleBack}
+        metadata={metadata}
         inputs={inputs}
         setAppDataForm={erc8004Inputs => {
           setAppDataForm({
diff --git a/src/pages/CreateApp/index.tsx b/src/pages/CreateApp/index.tsx
index 73a7312a..e122b2a8 100644
--- a/src/pages/CreateApp/index.tsx
+++ b/src/pages/CreateApp/index.tsx
@@ -89,6 +89,7 @@ export const Create: FC = () => {
           handleNext={handleNext}
           handleBack={handleBack}
           inputs={appData?.inputs}
+          metadata={appData?.metadata}
           setAppDataForm={setAppDataForm}
           selectedTemplateName={selectedTemplate.name}
           selectedTemplateId={selectedTemplate.id}

From ac6e0ebaaa6444f01ab00a6e4aa1ac307334fc6c Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Fri, 21 Nov 2025 08:20:25 +0100
Subject: [PATCH 14/34] Update correct step indexes

- Remove custom build skip for ERC8004Step
---
 src/pages/CreateApp/BuildStep.tsx   |  2 +-
 src/pages/CreateApp/ERC8004Step.tsx | 68 ++++++++++++-----------------
 src/pages/CreateApp/PaymentStep.tsx |  2 +-
 3 files changed, 30 insertions(+), 42 deletions(-)

diff --git a/src/pages/CreateApp/BuildStep.tsx b/src/pages/CreateApp/BuildStep.tsx
index 07fe1544..133fa225 100644
--- a/src/pages/CreateApp/BuildStep.tsx
+++ b/src/pages/CreateApp/BuildStep.tsx
@@ -38,7 +38,7 @@ export const BuildStep: FC<BuildStepProps> = ({
 
   return (
     <CreateLayout
-      currentStep={3}
+      currentStep={4}
       selectedTemplateName={selectedTemplateName}
       selectedTemplateId={selectedTemplateId}
       customStepTitle={customStepTitle}
diff --git a/src/pages/CreateApp/ERC8004Step.tsx b/src/pages/CreateApp/ERC8004Step.tsx
index 735945be..df3704cd 100644
--- a/src/pages/CreateApp/ERC8004Step.tsx
+++ b/src/pages/CreateApp/ERC8004Step.tsx
@@ -1,4 +1,4 @@
-import { type FC, useEffect } from 'react'
+import { type FC } from 'react'
 import { CreateLayout } from './CreateLayout'
 import { CreateFormHeader } from './CreateFormHeader'
 import { AppDataInputs, type MetadataFormData } from './types'
@@ -24,42 +24,30 @@ export const ERC8004Step: FC<CustomInputsStepProps> = ({
   selectedTemplateName,
   selectedTemplateId,
   customStepTitle,
-}) => {
-  useEffect(() => {
-    if (selectedTemplateId === 'custom-build') {
-      handleNext()
-    }
-  }, [handleNext, selectedTemplateId])
-
-  if (selectedTemplateId === 'custom-build') {
-    return null
-  }
-
-  return (
-    <CreateLayout
-      currentStep={3}
-      selectedTemplateName={selectedTemplateName}
-      selectedTemplateId={selectedTemplateId}
-      customStepTitle={customStepTitle}
-    >
-      <CreateFormHeader title={customStepTitle} />
-      <ERC8004Form
-        handleNext={handleNext}
-        handleBack={handleBack}
-        metadata={metadata}
-        inputs={inputs}
-        setAppDataForm={erc8004Inputs => {
-          setAppDataForm({
-            inputs: {
-              ...inputs,
-              secrets: {
-                ...inputs!.secrets,
-                ...erc8004Inputs.inputs.secrets,
-              },
-            } as AppDataInputs,
-          })
-        }}
-      />
-    </CreateLayout>
-  )
-}
+}) => (
+  <CreateLayout
+    currentStep={3}
+    selectedTemplateName={selectedTemplateName}
+    selectedTemplateId={selectedTemplateId}
+    customStepTitle={customStepTitle}
+  >
+    <CreateFormHeader title={customStepTitle} />
+    <ERC8004Form
+      handleNext={handleNext}
+      handleBack={handleBack}
+      metadata={metadata}
+      inputs={inputs}
+      setAppDataForm={erc8004Inputs => {
+        setAppDataForm({
+          inputs: {
+            ...inputs,
+            secrets: {
+              ...inputs!.secrets,
+              ...erc8004Inputs.inputs.secrets,
+            },
+          } as AppDataInputs,
+        })
+      }}
+    />
+  </CreateLayout>
+)
diff --git a/src/pages/CreateApp/PaymentStep.tsx b/src/pages/CreateApp/PaymentStep.tsx
index 1c58d454..57056b9b 100644
--- a/src/pages/CreateApp/PaymentStep.tsx
+++ b/src/pages/CreateApp/PaymentStep.tsx
@@ -78,7 +78,7 @@ export const PaymentStep: FC<PaymentStepProps> = ({
 
   return (
     <CreateLayout
-      currentStep={4}
+      currentStep={5}
       selectedTemplateName={selectedTemplateName}
       selectedTemplateId={selectedTemplateId}
       customStepTitle={customStepTitle}

From c5a216bec7792b101aafb0c590f6c0717b769d17 Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Fri, 21 Nov 2025 08:21:00 +0100
Subject: [PATCH 15/34] Fix wrong merge in CustomInputsStep

---
 src/pages/CreateApp/CustomInputsStep.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/CreateApp/CustomInputsStep.tsx b/src/pages/CreateApp/CustomInputsStep.tsx
index a2585b37..c5716c70 100644
--- a/src/pages/CreateApp/CustomInputsStep.tsx
+++ b/src/pages/CreateApp/CustomInputsStep.tsx
@@ -38,6 +38,7 @@ export const CustomInputsStep: FC<CustomInputsStepProps> = ({
     setAppDataForm({
       inputs: {
         ...(inputs ?? {}),
+        ...appDataInputs.inputs,
         secrets: {
           ...(inputs?.secrets ?? {}),
           ...appDataInputs.inputs.secrets,

From 783d2faeab930d241f03e5b46adea37b8875680e Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Fri, 21 Nov 2025 08:33:12 +0100
Subject: [PATCH 16/34] Fix environment mapping

---
 src/utils/rofl-8004.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/rofl-8004.ts b/src/utils/rofl-8004.ts
index f8913984..56653820 100644
--- a/src/utils/rofl-8004.ts
+++ b/src/utils/rofl-8004.ts
@@ -53,8 +53,8 @@ export const addRofl8004ServiceToCompose = (composeYaml: string, appData: AppDat
           // Exception: ERC8004_SIGNING_KEY does not need to strip the prefix
           const envKey = ['ERC8004_SIGNING_KEY'].includes(key)
             ? key
-            : key.replace(/^ERC8004_/, `${ROFL_8004_SERVICE_ENV_PREFIX}_`)
-          acc[envKey] = appData.inputs?.secrets?.[erc8004Key]
+            : key.replace(`${ROFL_8004_SERVICE_ENV_PREFIX}_`, '')
+          acc[envKey] = `\${${key}}`
         }
 
         return acc

From e09f899d60db017582d03c47ea1ad4f73ff69ec2 Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Fri, 21 Nov 2025 11:06:16 +0100
Subject: [PATCH 17/34] Add additional variables rofl-8004 env

---
 src/utils/rofl-8004.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/utils/rofl-8004.ts b/src/utils/rofl-8004.ts
index 56653820..dbbf8966 100644
--- a/src/utils/rofl-8004.ts
+++ b/src/utils/rofl-8004.ts
@@ -59,7 +59,14 @@ export const addRofl8004ServiceToCompose = (composeYaml: string, appData: AppDat
 
         return acc
       },
-      {} as Record<string, string>,
+      {
+        // Pre-existing agent ID, if it is already registered.
+        AGENT_ID: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_AGENT_ID}`,
+        // Additional TEE-derived public keys to be stored inside ROFL Metadata
+        PUBLIC_KEY_IDS: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_PUBLIC_KEY_IDS}`,
+        // Validator address on ERC-8004 chain.
+        VALIDATOR_ADDRESS: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_VALIDATOR_ADDRESS}`,
+      } as Record<string, string>,
     )
 
   compose.services[ROFL_8004_SERVICE_NAME] = {

From 7e8287bbf5f14adc4122d888d87610934cc4a91a Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Fri, 21 Nov 2025 11:17:29 +0100
Subject: [PATCH 18/34] Add reserved service name validation tp custom build

---
 src/pages/CreateApp/useComposeValidation.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/pages/CreateApp/useComposeValidation.ts b/src/pages/CreateApp/useComposeValidation.ts
index 6978ec8e..acf4b251 100644
--- a/src/pages/CreateApp/useComposeValidation.ts
+++ b/src/pages/CreateApp/useComposeValidation.ts
@@ -1,6 +1,8 @@
+import * as yaml from 'yaml'
 import { useState } from 'react'
 import { useValidateRofl } from '../../backend/api'
 import { useRoflAppBackendAuthContext } from '../../contexts/RoflAppBackendAuth/hooks'
+import { ROFL_8004_SERVICE_NAME } from '../../constants/rofl-8004.ts'
 
 type ValidationState = {
   isValidating: boolean
@@ -34,6 +36,20 @@ export function useComposeValidation() {
       validationError: null,
     })
 
+    try {
+      const parsed = yaml.parse(compose)
+      if (parsed?.services?.[ROFL_8004_SERVICE_NAME]) {
+        setValidationState({
+          isValidating: false,
+          validationError: `Service name "${ROFL_8004_SERVICE_NAME}" is reserved and cannot be used.`,
+        })
+        return false
+      }
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- ignore YAML parsing error
+    } catch (_err) {
+      // Let backend validation handle the error
+    }
+
     try {
       const response = (await validateRofl({ compose })) as RoflValidateApiResponse
 

From f43c8112bd49f29f196712d44591d8eddaa6a648 Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Fri, 21 Nov 2025 14:48:48 +0100
Subject: [PATCH 19/34] Remove 0x validation from ERC8004 signing key

---
 src/pages/CreateApp/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/CreateApp/types.ts b/src/pages/CreateApp/types.ts
index bea2fe74..aeb2c526 100644
--- a/src/pages/CreateApp/types.ts
+++ b/src/pages/CreateApp/types.ts
@@ -153,7 +153,7 @@ export const erc8004Schema = z.object({
       .max(1000, {
         message: 'Pinata JWT must be less than 1000 characters.',
       }),
-    ERC8004_SIGNING_KEY: z.string().regex(/^0x[a-fA-F0-9]{64}$/, {
+    ERC8004_SIGNING_KEY: z.string().regex(/^[a-fA-F0-9]{64}$/, {
       message: 'Please enter a valid Ethereum private key (64 hexadecimal characters).',
     }),
     ERC8004_AGENT_NAME: z.string().optional(),

From 423872ad90f895f07505bc1f2dd30b4a88c78b4b Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Fri, 21 Nov 2025 14:49:42 +0100
Subject: [PATCH 20/34] Remove additional environment variables

- pin rofl-8004 image
---
 src/utils/rofl-8004.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/utils/rofl-8004.ts b/src/utils/rofl-8004.ts
index dbbf8966..a34b0a7b 100644
--- a/src/utils/rofl-8004.ts
+++ b/src/utils/rofl-8004.ts
@@ -60,17 +60,19 @@ export const addRofl8004ServiceToCompose = (composeYaml: string, appData: AppDat
         return acc
       },
       {
+        // TODO: Fails, as docker will default to empty string, and not None(Python)
         // Pre-existing agent ID, if it is already registered.
-        AGENT_ID: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_AGENT_ID}`,
+        // AGENT_ID: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_AGENT_ID-}`,
         // Additional TEE-derived public keys to be stored inside ROFL Metadata
-        PUBLIC_KEY_IDS: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_PUBLIC_KEY_IDS}`,
+        // PUBLIC_KEY_IDS: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_PUBLIC_KEY_IDS-}`,
         // Validator address on ERC-8004 chain.
-        VALIDATOR_ADDRESS: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_VALIDATOR_ADDRESS}`,
+        // VALIDATOR_ADDRESS: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_VALIDATOR_ADDRESS-}`,
       } as Record<string, string>,
     )
 
   compose.services[ROFL_8004_SERVICE_NAME] = {
-    image: 'ghcr.io/oasisprotocol/rofl-8004:latest',
+    image:
+      'ghcr.io/oasisprotocol/rofl-8004:latest@sha256:f57373103814a0ca4c0a03608284451221b026e695b0b8ce9ca3d4153819a349',
     platform: 'linux/amd64',
     environment,
     volumes: ['/run/rofl-appd.sock:/run/rofl-appd.sock'],

From f5851497e64068a5fe99e037ad3b84971b718ffd Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Fri, 21 Nov 2025 14:52:37 +0100
Subject: [PATCH 21/34] Remove empty entries in ERC8004 form

- update signing key placeholder to reflect the validation
---
 src/pages/CreateApp/ERC8004Form.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/pages/CreateApp/ERC8004Form.tsx b/src/pages/CreateApp/ERC8004Form.tsx
index 629d0767..d9b4758a 100644
--- a/src/pages/CreateApp/ERC8004Form.tsx
+++ b/src/pages/CreateApp/ERC8004Form.tsx
@@ -44,13 +44,17 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadat
         } as AppDataInputs,
       })
     } else {
+      const nonEmptySecrets = Object.fromEntries(
+        Object.entries({
+          ...values.secrets,
+          ERC8004_RPC_URL: addROFL8004RpcPrefix(values.secrets.ERC8004_RPC_URL || ''),
+        }).filter(([, value]) => value !== '' && value !== null && value !== undefined),
+      )
+
       setAppDataForm({
         inputs: {
           ...values,
-          secrets: {
-            ...values.secrets,
-            ERC8004_RPC_URL: addROFL8004RpcPrefix(values.secrets.ERC8004_RPC_URL || ''),
-          },
+          secrets: nonEmptySecrets,
         } as AppDataInputs,
       })
     }
@@ -84,7 +88,7 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadat
         type="password"
         name="secrets.ERC8004_SIGNING_KEY"
         label="Private key for agent submittion"
-        placeholder="0x1234567890abcde1234567890abcde1234567890abcde1234567890abcde123"
+        placeholder="1234567890abcde1234567890abcde1234567890abcde1234567890abcde123"
         disabled={skipERC8004}
         info="The private key used to sign and submit your agent to the ERC-8004 registry. Add some funds on Sepolia network."
       />

From 3683592c2b8cac7e66f1e5e20e9bd6e887034cd5 Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Sat, 29 Nov 2025 14:48:40 +0100
Subject: [PATCH 22/34] Add rofl-8004 docker image to constants

- enable rest of the optional configuration keys
---
 src/constants/rofl-8004.ts |  2 ++
 src/utils/rofl-8004.ts     | 10 ++++------
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/constants/rofl-8004.ts b/src/constants/rofl-8004.ts
index 762e04ef..70a75186 100644
--- a/src/constants/rofl-8004.ts
+++ b/src/constants/rofl-8004.ts
@@ -1,6 +1,8 @@
 import { sepolia } from 'viem/chains'
 import { createPublicClient, http } from 'viem'
 
+export const ROFL_8004_DOCKER_IMAGE =
+  'ghcr.io/oasisprotocol/rofl-8004:latest@sha256:3b4348cb5fe192c28398be93955abc025e3d9977d1f80121ef1068458d6d1f77'
 export const ROFL_8004_SERVICE_NAME = 'rofl-8004'
 export const ROFL_8004_SERVICE_ENV_PREFIX = 'ERC8004'
 export const ROFL_8004_SERVICE_RPC_URL_BASE = 'https://sepolia.infura.io/v3/'
diff --git a/src/utils/rofl-8004.ts b/src/utils/rofl-8004.ts
index a34b0a7b..a31c95af 100644
--- a/src/utils/rofl-8004.ts
+++ b/src/utils/rofl-8004.ts
@@ -60,19 +60,17 @@ export const addRofl8004ServiceToCompose = (composeYaml: string, appData: AppDat
         return acc
       },
       {
-        // TODO: Fails, as docker will default to empty string, and not None(Python)
         // Pre-existing agent ID, if it is already registered.
-        // AGENT_ID: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_AGENT_ID-}`,
+        AGENT_ID: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_AGENT_ID-}`,
         // Additional TEE-derived public keys to be stored inside ROFL Metadata
-        // PUBLIC_KEY_IDS: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_PUBLIC_KEY_IDS-}`,
+        PUBLIC_KEY_IDS: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_PUBLIC_KEY_IDS-}`,
         // Validator address on ERC-8004 chain.
-        // VALIDATOR_ADDRESS: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_VALIDATOR_ADDRESS-}`,
+        VALIDATOR_ADDRESS: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_VALIDATOR_ADDRESS-}`,
       } as Record<string, string>,
     )
 
   compose.services[ROFL_8004_SERVICE_NAME] = {
-    image:
-      'ghcr.io/oasisprotocol/rofl-8004:latest@sha256:f57373103814a0ca4c0a03608284451221b026e695b0b8ce9ca3d4153819a349',
+    image: ROFL_8004_DOCKER_IMAGE,
     platform: 'linux/amd64',
     environment,
     volumes: ['/run/rofl-appd.sock:/run/rofl-appd.sock'],

From 725b9601b038cdafb94fb97be00d11305daec6ef Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Sat, 29 Nov 2025 14:49:42 +0100
Subject: [PATCH 23/34] Add chain dropdown in ERC8004Form

- Make signing key optional
---
 src/constants/rofl-8004.ts                    | 16 ++--
 src/contracts/erc-8004.ts                     | 29 ++++--
 src/hooks/useERC8004TokenURI.ts               |  7 +-
 src/pages/CreateApp/ERC8004Form.tsx           | 88 +++++++++++++------
 src/pages/CreateApp/types.ts                  | 86 +++++++++++-------
 src/pages/Dashboard/AppDetails/AppERC8004.tsx |  5 +-
 src/utils/rofl-8004.ts                        | 28 +++---
 7 files changed, 163 insertions(+), 96 deletions(-)

diff --git a/src/constants/rofl-8004.ts b/src/constants/rofl-8004.ts
index 70a75186..d58925ee 100644
--- a/src/constants/rofl-8004.ts
+++ b/src/constants/rofl-8004.ts
@@ -1,16 +1,16 @@
 import { sepolia } from 'viem/chains'
-import { createPublicClient, http } from 'viem'
 
 export const ROFL_8004_DOCKER_IMAGE =
   'ghcr.io/oasisprotocol/rofl-8004:latest@sha256:3b4348cb5fe192c28398be93955abc025e3d9977d1f80121ef1068458d6d1f77'
 export const ROFL_8004_SERVICE_NAME = 'rofl-8004'
 export const ROFL_8004_SERVICE_ENV_PREFIX = 'ERC8004'
-export const ROFL_8004_SERVICE_RPC_URL_BASE = 'https://sepolia.infura.io/v3/'
 
-export const ROFL_8004_CHAIN = sepolia
-export const ROFL_8004_PUBLIC_CLIENT = createPublicClient({
-  chain: ROFL_8004_CHAIN,
-  transport: http(),
-})
-export const ROFL_8004_AGENT_IDENTITY_CONTRACT = '0x8004a6090cd10a7288092483047b097295fb8847'
 export const ROFL_8004_METADATA_KEY = 'net.oasis.app.erc8004_agent_id' // "{chainId}:{agentId}"
+
+export const ROFL_8004_SUPPORTED_CHAINS = {
+  [sepolia.id.toString()]: {
+    chain: sepolia,
+    rpcUrl: sepolia.rpcUrls.default.http,
+    identityContract: '0x8004a6090cd10a7288092483047b097295fb8847',
+  },
+}
diff --git a/src/contracts/erc-8004.ts b/src/contracts/erc-8004.ts
index 4a3c6f8c..1ba5d314 100644
--- a/src/contracts/erc-8004.ts
+++ b/src/contracts/erc-8004.ts
@@ -1,10 +1,20 @@
 import ERC_8004_ABI from './ERC-8004_ABI.json'
-import { ROFL_8004_AGENT_IDENTITY_CONTRACT, ROFL_8004_PUBLIC_CLIENT } from '../constants/rofl-8004.ts'
+import { ROFL_8004_SUPPORTED_CHAINS } from '../constants/rofl-8004.ts'
+import { createPublicClient, http } from 'viem'
+
+export const getMetadata = async (
+  chainId: number | string,
+  agentId: bigint,
+  key?: string,
+): Promise<`0x${string}`> => {
+  const supportedNetwork = ROFL_8004_SUPPORTED_CHAINS[chainId.toString()]
 
-export const getMetadata = async (agentId: bigint, key?: string): Promise<`0x${string}`> => {
   try {
-    return (await ROFL_8004_PUBLIC_CLIENT.readContract({
-      address: ROFL_8004_AGENT_IDENTITY_CONTRACT,
+    return (await createPublicClient({
+      chain: supportedNetwork.chain,
+      transport: http(),
+    }).readContract({
+      address: supportedNetwork.identityContract as `0x${string}`,
       abi: ERC_8004_ABI,
       functionName: 'getMetadata',
       args: [agentId, key],
@@ -15,10 +25,15 @@ export const getMetadata = async (agentId: bigint, key?: string): Promise<`0x${s
   }
 }
 
-export const getTokenURI = async (agentId: bigint): Promise<string> => {
+export const getTokenURI = async (chainId: number | string, agentId: bigint): Promise<string> => {
+  const supportedNetwork = ROFL_8004_SUPPORTED_CHAINS[chainId.toString()]
+
   try {
-    return (await ROFL_8004_PUBLIC_CLIENT.readContract({
-      address: ROFL_8004_AGENT_IDENTITY_CONTRACT,
+    return (await createPublicClient({
+      chain: supportedNetwork.chain,
+      transport: http(),
+    }).readContract({
+      address: supportedNetwork.identityContract as `0x${string}`,
       abi: ERC_8004_ABI,
       functionName: 'tokenURI',
       args: [agentId],
diff --git a/src/hooks/useERC8004TokenURI.ts b/src/hooks/useERC8004TokenURI.ts
index ff9917aa..867361dd 100644
--- a/src/hooks/useERC8004TokenURI.ts
+++ b/src/hooks/useERC8004TokenURI.ts
@@ -9,6 +9,7 @@ interface UseERC8004TokenURIReturnType {
 }
 
 export function useERC8004TokenURI(
+  chainId: number | string,
   agentId: bigint | undefined,
   enabled = true,
 ): UseERC8004TokenURIReturnType {
@@ -23,7 +24,7 @@ export function useERC8004TokenURI(
     setError(null)
 
     try {
-      const result = await getTokenURI(agentId)
+      const result = await getTokenURI(chainId, agentId)
 
       setData(result)
     } catch (err) {
@@ -35,11 +36,11 @@ export function useERC8004TokenURI(
   }
 
   useEffect(() => {
-    if (enabled && agentId) {
+    if (enabled && chainId && agentId) {
       fetchTokenURI()
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [agentId, enabled])
+  }, [agentId, chainId && enabled])
 
   return {
     data,
diff --git a/src/pages/CreateApp/ERC8004Form.tsx b/src/pages/CreateApp/ERC8004Form.tsx
index d9b4758a..32fe5261 100644
--- a/src/pages/CreateApp/ERC8004Form.tsx
+++ b/src/pages/CreateApp/ERC8004Form.tsx
@@ -6,7 +6,8 @@ import { erc8004Schema, type ERC8004FormData, type AppDataInputs, type MetadataF
 import { InputFormField } from '../../components/InputFormField'
 import { Label } from '@oasisprotocol/ui-library/src/components/ui/label'
 import { Checkbox } from '@oasisprotocol/ui-library/src/components/ui/checkbox'
-import { addROFL8004RpcPrefix, stripROFL8004RpcPrefix } from '../../utils/rofl-8004.ts'
+import { ROFL_8004_SUPPORTED_CHAINS } from '../../constants/rofl-8004.ts'
+import { SelectFormField } from '../../components/SelectFormField'
 
 type Props = {
   handleNext: () => void
@@ -23,7 +24,8 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadat
     resolver: skipERC8004 ? undefined : zodResolver(erc8004Schema),
     defaultValues: {
       secrets: {
-        ERC8004_RPC_URL: stripROFL8004RpcPrefix(inputs?.secrets?.ERC8004_RPC_URL),
+        ERC8004_CHAIN_SELECTION: 'custom',
+        ERC8004_RPC_URL: (inputs as ERC8004FormData | undefined)?.secrets?.ERC8004_RPC_URL ?? '',
         ERC8004_PINATA_JWT: '',
         ERC8004_SIGNING_KEY: '',
         ERC8004_AGENT_NAME: metadata?.name ?? '',
@@ -31,11 +33,23 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadat
         ERC8004_AGENT_VERSION: metadata?.version ?? '',
         ERC8004_AGENT_CATEGORY: '',
         ERC8004_AGENT_IMAGE: '',
-        ...inputs?.secrets,
+        ...(inputs as ERC8004FormData | undefined)?.secrets,
       },
     },
   })
 
+  const chainSelection = form.watch('secrets.ERC8004_CHAIN_SELECTION')
+  const isCustomChain = chainSelection === 'custom'
+
+  // Prepare chain options
+  const chainOptions = [
+    ...Object.entries(ROFL_8004_SUPPORTED_CHAINS).map(([key, config]) => ({
+      value: key,
+      label: config.chain.name,
+    })),
+    { value: 'custom', label: 'Custom RPC URL' },
+  ]
+
   function onSubmit(values: ERC8004FormData) {
     if (skipERC8004) {
       setAppDataForm({
@@ -47,9 +61,20 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadat
       const nonEmptySecrets = Object.fromEntries(
         Object.entries({
           ...values.secrets,
-          ERC8004_RPC_URL: addROFL8004RpcPrefix(values.secrets.ERC8004_RPC_URL || ''),
-        }).filter(([, value]) => value !== '' && value !== null && value !== undefined),
-      )
+          ERC8004_RPC_URL:
+            values.secrets.ERC8004_CHAIN_SELECTION !== 'custom'
+              ? ROFL_8004_SUPPORTED_CHAINS[
+                  values.secrets.ERC8004_CHAIN_SELECTION as keyof typeof ROFL_8004_SUPPORTED_CHAINS
+                ]?.rpcUrl
+              : values.secrets.ERC8004_RPC_URL,
+        }).filter(
+          ([key, value]) =>
+            !['ERC8004_CHAIN_SELECTION'].includes(key) &&
+            value !== '' &&
+            value !== null &&
+            value !== undefined,
+        ),
+      ) as ERC8004FormData['secrets']
 
       setAppDataForm({
         inputs: {
@@ -63,34 +88,35 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadat
 
   return (
     <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 mb-6 w-full">
-      <InputFormField
+      <SelectFormField
         control={form.control}
-        type="textarea"
-        name="secrets.ERC8004_PINATA_JWT"
-        label="Pinata JWT Token"
-        placeholder="1234567890abcde..."
+        name="secrets.ERC8004_CHAIN_SELECTION"
+        label="Chain for token registration"
+        placeholder="Select chain"
+        options={chainOptions}
         disabled={skipERC8004}
-        info="Your Pinata JWT token is used to pin agent metadata to IPFS. Get it from pinata.cloud"
       />
 
-      <InputFormField
-        control={form.control}
-        type="password"
-        name="secrets.ERC8004_RPC_URL"
-        label="Infura API Token"
-        placeholder="1234567890abcde1234567890abcde12"
-        disabled={skipERC8004}
-        info="Your Infura API token for Sepolia network. Get it from infura.io"
-      />
+      {isCustomChain && (
+        <InputFormField
+          control={form.control}
+          type="input"
+          name="secrets.ERC8004_RPC_URL"
+          label="Custom RPC URL"
+          placeholder="https://your-rpc-url.com"
+          disabled={skipERC8004}
+          info="Enter the full RPC URL for your chain"
+        />
+      )}
 
       <InputFormField
         control={form.control}
-        type="password"
-        name="secrets.ERC8004_SIGNING_KEY"
-        label="Private key for agent submittion"
-        placeholder="1234567890abcde1234567890abcde1234567890abcde1234567890abcde123"
+        type="textarea"
+        name="secrets.ERC8004_PINATA_JWT"
+        label="Pinata JWT Token"
+        placeholder="1234567890abcde..."
         disabled={skipERC8004}
-        info="The private key used to sign and submit your agent to the ERC-8004 registry. Add some funds on Sepolia network."
+        info="Your Pinata JWT token is used to pin agent metadata to IPFS. Get it from pinata.cloud"
       />
 
       <InputFormField
@@ -138,6 +164,16 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadat
         disabled={skipERC8004}
       />
 
+      <InputFormField
+        control={form.control}
+        type="password"
+        name="secrets.ERC8004_SIGNING_KEY"
+        label="Private key for agent submittion (Optional)"
+        placeholder="1234567890abcde1234567890abcde1234567890abcde1234567890abcde123"
+        disabled={skipERC8004}
+        info="The private key used to sign and submit your agent to the ERC-8004 registry. Add some funds on selected network for token registration."
+      />
+
       <div className="flex items-center gap-2 mt-12">
         <Checkbox
           id="skip-erc-8004"
diff --git a/src/pages/CreateApp/types.ts b/src/pages/CreateApp/types.ts
index aeb2c526..741fc3cc 100644
--- a/src/pages/CreateApp/types.ts
+++ b/src/pages/CreateApp/types.ts
@@ -1,6 +1,7 @@
 import { z, RefinementCtx } from 'zod'
 import { BuildFormData } from '../../types/build-form.ts'
 import * as yaml from 'yaml'
+import { sepolia } from 'viem/chains'
 
 /**
  * This is like z.string().url(), but also accepts domain names without the protocol prefix,
@@ -134,39 +135,60 @@ export const customBuildFormSchema = z.object({
 })
 
 // Make sure that the secrets object contains variables prefixed with (const ROFL_8004_SERVICE_ENV_PREFIX)
-export const erc8004Schema = z.object({
-  secrets: z.object({
-    // Hardcoded to Sepolia prefix using Infura
-    ERC8004_RPC_URL: z
-      .string()
-      .min(1, {
-        message: 'Infura API token is required.',
-      })
-      .max(100, {
-        message: 'Infura API token must be less than 100 characters.',
-      }),
-    ERC8004_PINATA_JWT: z
-      .string()
-      .min(1, {
-        message: 'Pinata JWT is required.',
-      })
-      .max(1000, {
-        message: 'Pinata JWT must be less than 1000 characters.',
-      }),
-    ERC8004_SIGNING_KEY: z.string().regex(/^[a-fA-F0-9]{64}$/, {
-      message: 'Please enter a valid Ethereum private key (64 hexadecimal characters).',
+export const erc8004Schema = z
+  .object({
+    secrets: z.object({
+      ERC8004_CHAIN_SELECTION: z.enum([sepolia.id.toString(), 'custom']).optional(),
+      ERC8004_RPC_URL: z
+        .string()
+        .url({ message: 'Please enter a valid URL.' })
+        .max(200, {
+          message: 'RPC URL must be less than 200 characters.',
+        })
+        .optional()
+        .or(z.literal('')),
+      ERC8004_PINATA_JWT: z
+        .string()
+        .min(1, {
+          message: 'Pinata JWT is required.',
+        })
+        .max(1000, {
+          message: 'Pinata JWT must be less than 1000 characters.',
+        }),
+      ERC8004_SIGNING_KEY: z
+        .string()
+        .optional()
+        .or(z.literal(''))
+        .refine(
+          value => {
+            if (!value || value === '') return true
+            return /^[a-fA-F0-9]{64}$/.test(value)
+          },
+          {
+            message: 'Please enter a valid Ethereum private key (64 hexadecimal characters).',
+          },
+        ),
+      ERC8004_AGENT_NAME: z.string().optional(),
+      ERC8004_AGENT_DESCRIPTION: z.string().optional(),
+      ERC8004_AGENT_IMAGE: z
+        .string()
+        .url({ message: 'Please enter a valid URL.' })
+        .optional()
+        .or(z.literal('')),
+      ERC8004_AGENT_VERSION: z.string().optional().or(z.literal('')),
+      ERC8004_AGENT_CATEGORY: z.string().optional(),
     }),
-    ERC8004_AGENT_NAME: z.string().optional(),
-    ERC8004_AGENT_DESCRIPTION: z.string().optional(),
-    ERC8004_AGENT_IMAGE: z
-      .string()
-      .url({ message: 'Please enter a valid URL.' })
-      .optional()
-      .or(z.literal('')),
-    ERC8004_AGENT_VERSION: z.string().optional().or(z.literal('')),
-    ERC8004_AGENT_CATEGORY: z.string().optional(),
-  }),
-})
+  })
+  .superRefine((data, ctx) => {
+    // Custom validation: if using custom chain, RPC URL is required
+    if (data.secrets.ERC8004_CHAIN_SELECTION === 'custom' && !data.secrets.ERC8004_RPC_URL) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'RPC URL is required when using a custom chain.',
+        path: ['secrets', 'ERC8004_RPC_URL'],
+      })
+    }
+  })
 
 export const tgbotFormSchema = z.object({
   secrets: z.object({
diff --git a/src/pages/Dashboard/AppDetails/AppERC8004.tsx b/src/pages/Dashboard/AppDetails/AppERC8004.tsx
index 5f41492a..e471cdcb 100644
--- a/src/pages/Dashboard/AppDetails/AppERC8004.tsx
+++ b/src/pages/Dashboard/AppDetails/AppERC8004.tsx
@@ -12,14 +12,13 @@ type Props = {
 }
 
 export const AppERC8004: FC<Props> = ({ roflInstances }) => {
-  // TODO: Display all instances
   const [instance] = roflInstances
-  const tokenId = fromMetadataToAgentId(instance.metadata)
+  const [chainId, tokenId] = fromMetadataToAgentId(instance.metadata)
   const {
     isLoading: isLoadingTokenURI,
     data: tokenURI,
     error: tokenURIError,
-  } = useERC8004TokenURI(BigInt(tokenId))
+  } = useERC8004TokenURI(chainId!, tokenId!, !!chainId && !!tokenId)
 
   const {
     data: metadata,
diff --git a/src/utils/rofl-8004.ts b/src/utils/rofl-8004.ts
index a31c95af..e3f97f43 100644
--- a/src/utils/rofl-8004.ts
+++ b/src/utils/rofl-8004.ts
@@ -1,35 +1,29 @@
 import {
-  ROFL_8004_CHAIN,
+  ROFL_8004_DOCKER_IMAGE,
   ROFL_8004_METADATA_KEY,
   ROFL_8004_SERVICE_ENV_PREFIX,
   ROFL_8004_SERVICE_NAME,
-  ROFL_8004_SERVICE_RPC_URL_BASE,
+  ROFL_8004_SUPPORTED_CHAINS,
 } from '../constants/rofl-8004.ts'
 import { RoflInstance } from '../nexus/generated/api.ts'
 import { AppData, ERC8004FormData } from '../pages/CreateApp/types.ts'
 import * as yaml from 'yaml'
 import { parse } from 'yaml'
 
-export const stripROFL8004RpcPrefix = (url: string | undefined): string => {
-  if (!url) return ''
-  return url.startsWith(ROFL_8004_SERVICE_RPC_URL_BASE)
-    ? url.slice(ROFL_8004_SERVICE_RPC_URL_BASE.length)
-    : url
-}
-export const addROFL8004RpcPrefix = (apiToken: string): string => {
-  if (!apiToken) return ''
-  return `${ROFL_8004_SERVICE_RPC_URL_BASE}${apiToken}`
-}
-
-export const fromMetadataToAgentId = (metadata: RoflInstance['metadata']) => {
+export const fromMetadataToAgentId = (metadata: RoflInstance['metadata']): [number | null, bigint | null] => {
   const agentId = metadata?.[ROFL_8004_METADATA_KEY] as string
   const splitAgentId = agentId?.split(':')
   const chainId = Number(splitAgentId[0])
 
-  if (chainId !== ROFL_8004_CHAIN.id)
-    throw new Error(`Invalid chainId: ${chainId}. Expected: ${ROFL_8004_CHAIN.id}`)
+  if (!Object.keys(ROFL_8004_SUPPORTED_CHAINS).includes(chainId.toString())) {
+    console.warn(
+      `Invalid chainId: ${chainId}. Expected: ${Object.keys(ROFL_8004_SUPPORTED_CHAINS).join(',')}`,
+    )
+    // Silently fail
+    return [null, null]
+  }
 
-  return BigInt(splitAgentId[1])
+  return [chainId, BigInt(splitAgentId[1])]
 }
 
 export const tokenURIToLink = (tokenURI: string) => tokenURI.replace('ipfs://', 'https://ipfs.io/ipfs/')

From 14d670dba68fd9ea95a28ffa4216271651b1e92f Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Mon, 1 Dec 2025 16:59:29 +0100
Subject: [PATCH 24/34] ERC8004Form layout changes

- Add MCP,A2A,ENS fields
---
 src/constants/rofl-8004.ts          |  2 ++
 src/pages/CreateApp/ERC8004Form.tsx | 54 +++++++++++++++++++++++------
 src/pages/CreateApp/ERC8004Step.tsx | 21 ++++++++++-
 src/pages/CreateApp/types.ts        |  5 ++-
 4 files changed, 69 insertions(+), 13 deletions(-)

diff --git a/src/constants/rofl-8004.ts b/src/constants/rofl-8004.ts
index d58925ee..6b1d1623 100644
--- a/src/constants/rofl-8004.ts
+++ b/src/constants/rofl-8004.ts
@@ -14,3 +14,5 @@ export const ROFL_8004_SUPPORTED_CHAINS = {
     identityContract: '0x8004a6090cd10a7288092483047b097295fb8847',
   },
 }
+
+export const ERC_8004_ETHEREUM_EIP_URL = 'https://eips.ethereum.org/EIPS/eip-8004'
diff --git a/src/pages/CreateApp/ERC8004Form.tsx b/src/pages/CreateApp/ERC8004Form.tsx
index 32fe5261..b53b4a4a 100644
--- a/src/pages/CreateApp/ERC8004Form.tsx
+++ b/src/pages/CreateApp/ERC8004Form.tsx
@@ -33,6 +33,9 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadat
         ERC8004_AGENT_VERSION: metadata?.version ?? '',
         ERC8004_AGENT_CATEGORY: '',
         ERC8004_AGENT_IMAGE: '',
+        ERC8004_AGENT_MCP: '',
+        ERC8004_AGENT_A2A: '',
+        ERC8004_AGENT_ENS: '',
         ...(inputs as ERC8004FormData | undefined)?.secrets,
       },
     },
@@ -88,10 +91,21 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadat
 
   return (
     <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 mb-6 w-full">
+      <div className="flex items-center gap-2 mb-4">
+        <Checkbox
+          id="skip-erc-8004"
+          checked={skipERC8004}
+          onCheckedChange={checked => setSkipERC8004(checked === true)}
+        />
+        <Label htmlFor="skip-erc-8004">Skip ERC-8004 Identity Registration</Label>
+      </div>
+
+      <hr />
+
       <SelectFormField
         control={form.control}
         name="secrets.ERC8004_CHAIN_SELECTION"
-        label="Chain for token registration"
+        label="Chain for trustless agent registration"
         placeholder="Select chain"
         options={chainOptions}
         disabled={skipERC8004}
@@ -105,7 +119,7 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadat
           label="Custom RPC URL"
           placeholder="https://your-rpc-url.com"
           disabled={skipERC8004}
-          info="Enter the full RPC URL for your chain"
+          info="Enter the full RPC URL for trustless agent registration"
         />
       )}
 
@@ -164,6 +178,33 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadat
         disabled={skipERC8004}
       />
 
+      <InputFormField
+        control={form.control}
+        type="input"
+        name="secrets.ERC8004_AGENT_MCP"
+        label="Agent MCP (Optonal)"
+        placeholder="https://mcp.agent.com"
+        disabled={skipERC8004}
+      />
+
+      <InputFormField
+        control={form.control}
+        type="input"
+        name="secrets.ERC8004_AGENT_A2A"
+        label="Agent A2A (Optonal)"
+        placeholder="https://agent.example/.well-known/agent-card.json"
+        disabled={skipERC8004}
+      />
+
+      <InputFormField
+        control={form.control}
+        type="input"
+        name="secrets.ERC8004_AGENT_ENS"
+        label="Agent ENS (Optonal)"
+        placeholder="agent.eth"
+        disabled={skipERC8004}
+      />
+
       <InputFormField
         control={form.control}
         type="password"
@@ -174,15 +215,6 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadat
         info="The private key used to sign and submit your agent to the ERC-8004 registry. Add some funds on selected network for token registration."
       />
 
-      <div className="flex items-center gap-2 mt-12">
-        <Checkbox
-          id="skip-erc-8004"
-          checked={skipERC8004}
-          onCheckedChange={checked => setSkipERC8004(checked === true)}
-        />
-        <Label htmlFor="skip-erc-8004">I don't want to use ERC-8004 Identity Registration</Label>
-      </div>
-
       <CreateFormNavigation handleBack={handleBack} disabled={form.formState.isSubmitting} />
     </form>
   )
diff --git a/src/pages/CreateApp/ERC8004Step.tsx b/src/pages/CreateApp/ERC8004Step.tsx
index df3704cd..d9c29445 100644
--- a/src/pages/CreateApp/ERC8004Step.tsx
+++ b/src/pages/CreateApp/ERC8004Step.tsx
@@ -3,6 +3,7 @@ import { CreateLayout } from './CreateLayout'
 import { CreateFormHeader } from './CreateFormHeader'
 import { AppDataInputs, type MetadataFormData } from './types'
 import { ERC8004Form } from './ERC8004Form.tsx'
+import { ERC_8004_ETHEREUM_EIP_URL } from '../../constants/rofl-8004.ts'
 
 type CustomInputsStepProps = {
   handleNext: () => void
@@ -31,7 +32,25 @@ export const ERC8004Step: FC<CustomInputsStepProps> = ({
     selectedTemplateId={selectedTemplateId}
     customStepTitle={customStepTitle}
   >
-    <CreateFormHeader title={customStepTitle} />
+    <CreateFormHeader
+      title="Trustless agents registration"
+      description={
+        <>
+          <a
+            href={ERC_8004_ETHEREUM_EIP_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary"
+          >
+            ERC-8004
+          </a>
+          &nbsp; introduces a blockchain-based framework for discovering and trusting agents across
+          organizations without prior relationships. It defines identity, reputation, and validation
+          registries to enable secure, transparent agent economies where trust is established through
+          feedback, cryptographic proofs, or validator checks.
+        </>
+      }
+    />
     <ERC8004Form
       handleNext={handleNext}
       handleBack={handleBack}
diff --git a/src/pages/CreateApp/types.ts b/src/pages/CreateApp/types.ts
index 741fc3cc..c60d273b 100644
--- a/src/pages/CreateApp/types.ts
+++ b/src/pages/CreateApp/types.ts
@@ -175,8 +175,11 @@ export const erc8004Schema = z
         .url({ message: 'Please enter a valid URL.' })
         .optional()
         .or(z.literal('')),
-      ERC8004_AGENT_VERSION: z.string().optional().or(z.literal('')),
+      ERC8004_AGENT_VERSION: z.string().optional(),
       ERC8004_AGENT_CATEGORY: z.string().optional(),
+      ERC8004_AGENT_MCP: z.string().optional(),
+      ERC8004_AGENT_A2A: z.string().optional(),
+      ERC8004_AGENT_ENS: z.string().optional(),
     }),
   })
   .superRefine((data, ctx) => {

From c15cfa7f5b53c212830a2dfb47a93179b94e240f Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Tue, 2 Dec 2025 16:33:34 +0100
Subject: [PATCH 25/34] Add validator address as an option

---
 src/constants/rofl-8004.ts          |  1 +
 src/pages/CreateApp/ERC8004Form.tsx | 42 ++++++++++++++++++++---------
 src/pages/CreateApp/types.ts        | 15 ++++++++++-
 src/utils/rofl-8004.ts              |  2 --
 4 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/src/constants/rofl-8004.ts b/src/constants/rofl-8004.ts
index 6b1d1623..589487c2 100644
--- a/src/constants/rofl-8004.ts
+++ b/src/constants/rofl-8004.ts
@@ -12,6 +12,7 @@ export const ROFL_8004_SUPPORTED_CHAINS = {
     chain: sepolia,
     rpcUrl: sepolia.rpcUrls.default.http,
     identityContract: '0x8004a6090cd10a7288092483047b097295fb8847',
+    validatorAddress: '0x7cd2eccd146b6626c8a500ab5644b1a506115e6f',
   },
 }
 
diff --git a/src/pages/CreateApp/ERC8004Form.tsx b/src/pages/CreateApp/ERC8004Form.tsx
index b53b4a4a..f6eb054f 100644
--- a/src/pages/CreateApp/ERC8004Form.tsx
+++ b/src/pages/CreateApp/ERC8004Form.tsx
@@ -25,7 +25,7 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadat
     defaultValues: {
       secrets: {
         ERC8004_CHAIN_SELECTION: 'custom',
-        ERC8004_RPC_URL: (inputs as ERC8004FormData | undefined)?.secrets?.ERC8004_RPC_URL ?? '',
+        ERC8004_RPC_URL: inputs?.secrets?.ERC8004_RPC_URL ?? '',
         ERC8004_PINATA_JWT: '',
         ERC8004_SIGNING_KEY: '',
         ERC8004_AGENT_NAME: metadata?.name ?? '',
@@ -36,7 +36,7 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadat
         ERC8004_AGENT_MCP: '',
         ERC8004_AGENT_A2A: '',
         ERC8004_AGENT_ENS: '',
-        ...(inputs as ERC8004FormData | undefined)?.secrets,
+        ...inputs?.secrets,
       },
     },
   })
@@ -44,7 +44,6 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadat
   const chainSelection = form.watch('secrets.ERC8004_CHAIN_SELECTION')
   const isCustomChain = chainSelection === 'custom'
 
-  // Prepare chain options
   const chainOptions = [
     ...Object.entries(ROFL_8004_SUPPORTED_CHAINS).map(([key, config]) => ({
       value: key,
@@ -70,6 +69,12 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadat
                   values.secrets.ERC8004_CHAIN_SELECTION as keyof typeof ROFL_8004_SUPPORTED_CHAINS
                 ]?.rpcUrl
               : values.secrets.ERC8004_RPC_URL,
+          ERC8004_VALIDATOR_ADDRESS:
+            values.secrets.ERC8004_CHAIN_SELECTION !== 'custom'
+              ? ROFL_8004_SUPPORTED_CHAINS[
+                  values.secrets.ERC8004_CHAIN_SELECTION as keyof typeof ROFL_8004_SUPPORTED_CHAINS
+                ]?.validatorAddress
+              : values.secrets.ERC8004_VALIDATOR_ADDRESS,
         }).filter(
           ([key, value]) =>
             !['ERC8004_CHAIN_SELECTION'].includes(key) &&
@@ -112,15 +117,26 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadat
       />
 
       {isCustomChain && (
-        <InputFormField
-          control={form.control}
-          type="input"
-          name="secrets.ERC8004_RPC_URL"
-          label="Custom RPC URL"
-          placeholder="https://your-rpc-url.com"
-          disabled={skipERC8004}
-          info="Enter the full RPC URL for trustless agent registration"
-        />
+        <>
+          <InputFormField
+            control={form.control}
+            type="input"
+            name="secrets.ERC8004_RPC_URL"
+            label="Custom RPC URL"
+            placeholder="https://your-rpc-url.com"
+            disabled={skipERC8004}
+            info="Enter the full RPC URL for trustless agent registration"
+          />
+
+          <InputFormField
+            control={form.control}
+            type="input"
+            name="secrets.ERC8004_VALIDATOR_ADDRESS"
+            label="Validator address (Optional)"
+            placeholder="0x1234567890abcde1234567890abcde1234567890"
+            disabled={skipERC8004}
+          />
+        </>
       )}
 
       <InputFormField
@@ -209,7 +225,7 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadat
         control={form.control}
         type="password"
         name="secrets.ERC8004_SIGNING_KEY"
-        label="Private key for agent submittion (Optional)"
+        label="Private key for trustless agent registration (Optional)"
         placeholder="1234567890abcde1234567890abcde1234567890abcde1234567890abcde123"
         disabled={skipERC8004}
         info="The private key used to sign and submit your agent to the ERC-8004 registry. Add some funds on selected network for token registration."
diff --git a/src/pages/CreateApp/types.ts b/src/pages/CreateApp/types.ts
index c60d273b..b6e68846 100644
--- a/src/pages/CreateApp/types.ts
+++ b/src/pages/CreateApp/types.ts
@@ -147,6 +147,19 @@ export const erc8004Schema = z
         })
         .optional()
         .or(z.literal('')),
+      ERC8004_VALIDATOR_ADDRESS: z
+        .string()
+        .optional()
+        .or(z.literal(''))
+        .refine(
+          value => {
+            if (!value || value === '') return true
+            return /^0x[a-fA-F0-9]{40}$/.test(value)
+          },
+          {
+            message: 'Please enter a valid address.',
+          },
+        ),
       ERC8004_PINATA_JWT: z
         .string()
         .min(1, {
@@ -165,7 +178,7 @@ export const erc8004Schema = z
             return /^[a-fA-F0-9]{64}$/.test(value)
           },
           {
-            message: 'Please enter a valid Ethereum private key (64 hexadecimal characters).',
+            message: 'Please enter a valid private key (64 hexadecimal characters).',
           },
         ),
       ERC8004_AGENT_NAME: z.string().optional(),
diff --git a/src/utils/rofl-8004.ts b/src/utils/rofl-8004.ts
index e3f97f43..deb0a93b 100644
--- a/src/utils/rofl-8004.ts
+++ b/src/utils/rofl-8004.ts
@@ -58,8 +58,6 @@ export const addRofl8004ServiceToCompose = (composeYaml: string, appData: AppDat
         AGENT_ID: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_AGENT_ID-}`,
         // Additional TEE-derived public keys to be stored inside ROFL Metadata
         PUBLIC_KEY_IDS: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_PUBLIC_KEY_IDS-}`,
-        // Validator address on ERC-8004 chain.
-        VALIDATOR_ADDRESS: `\${${ROFL_8004_SERVICE_ENV_PREFIX}_VALIDATOR_ADDRESS-}`,
       } as Record<string, string>,
     )
 

From c8c6ee858719d22921d90d3743d80cab119ad50a Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Tue, 2 Dec 2025 16:36:58 +0100
Subject: [PATCH 26/34] Set skip ERC-8004 registration as default

---
 src/pages/CreateApp/ERC8004Form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/CreateApp/ERC8004Form.tsx b/src/pages/CreateApp/ERC8004Form.tsx
index f6eb054f..9c57d705 100644
--- a/src/pages/CreateApp/ERC8004Form.tsx
+++ b/src/pages/CreateApp/ERC8004Form.tsx
@@ -18,7 +18,7 @@ type Props = {
 }
 
 export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadata, setAppDataForm }) => {
-  const [skipERC8004, setSkipERC8004] = useState(false)
+  const [skipERC8004, setSkipERC8004] = useState(true)
 
   const form = useForm<ERC8004FormData>({
     resolver: skipERC8004 ? undefined : zodResolver(erc8004Schema),

From 9396725839d1ff9cf6a0c033c6aa86008374c5ac Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Tue, 2 Dec 2025 16:52:35 +0100
Subject: [PATCH 27/34] Add 8004.scan navigation link

---
 src/constants/rofl-8004.ts                    |  2 ++
 src/pages/Dashboard/AppDetails/AppERC8004.tsx | 15 ++++++++-----
 .../Dashboard/AppDetails/AppMetadata.tsx      | 22 +++++++++++++++++++
 src/pages/Dashboard/AppDetails/index.tsx      |  3 ++-
 src/utils/rofl-8004.ts                        | 12 +++++++---
 5 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/src/constants/rofl-8004.ts b/src/constants/rofl-8004.ts
index 589487c2..ffd3fd59 100644
--- a/src/constants/rofl-8004.ts
+++ b/src/constants/rofl-8004.ts
@@ -17,3 +17,5 @@ export const ROFL_8004_SUPPORTED_CHAINS = {
 }
 
 export const ERC_8004_ETHEREUM_EIP_URL = 'https://eips.ethereum.org/EIPS/eip-8004'
+export const get8004ScanUrl = (chainName: string, agentId: string) =>
+  `https://www.8004scan.io/${chainName}/agent/${agentId}`
diff --git a/src/pages/Dashboard/AppDetails/AppERC8004.tsx b/src/pages/Dashboard/AppDetails/AppERC8004.tsx
index e471cdcb..70be3aa6 100644
--- a/src/pages/Dashboard/AppDetails/AppERC8004.tsx
+++ b/src/pages/Dashboard/AppDetails/AppERC8004.tsx
@@ -4,21 +4,24 @@ import axios from 'axios'
 import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
 import { RoflInstance } from '../../../nexus/generated/api.ts'
 import { useERC8004TokenURI } from '../../../hooks/useERC8004TokenURI.ts'
-import { fromMetadataToAgentId, tokenURIToLink } from '../../../utils/rofl-8004.ts'
+import { fromMetadataToAgentMetadata, tokenURIToLink } from '../../../utils/rofl-8004.ts'
 import { CodeDisplay } from '../../../components/CodeDisplay'
 
 type Props = {
-  roflInstances: RoflInstance[]
+  instancesWithERC8004Token: RoflInstance[]
 }
 
-export const AppERC8004: FC<Props> = ({ roflInstances }) => {
-  const [instance] = roflInstances
-  const [chainId, tokenId] = fromMetadataToAgentId(instance.metadata)
+export const AppERC8004: FC<Props> = ({ instancesWithERC8004Token }) => {
+  const [instance] = instancesWithERC8004Token
+  const agentMetadata = fromMetadataToAgentMetadata(instance.metadata)
+  const agentChainId = agentMetadata?.chainId
+  const agentTokenId = agentMetadata?.agentId
+
   const {
     isLoading: isLoadingTokenURI,
     data: tokenURI,
     error: tokenURIError,
-  } = useERC8004TokenURI(chainId!, tokenId!, !!chainId && !!tokenId)
+  } = useERC8004TokenURI(agentChainId!, agentTokenId!, !!agentChainId && !!agentTokenId)
 
   const {
     data: metadata,
diff --git a/src/pages/Dashboard/AppDetails/AppMetadata.tsx b/src/pages/Dashboard/AppDetails/AppMetadata.tsx
index 7f115f16..31d9551e 100644
--- a/src/pages/Dashboard/AppDetails/AppMetadata.tsx
+++ b/src/pages/Dashboard/AppDetails/AppMetadata.tsx
@@ -5,6 +5,7 @@ import {
   useGetRuntimeRoflAppsIdTransactions,
   useGetRuntimeRoflmarketInstances,
   type RoflAppPolicy,
+  RoflInstance,
 } from '../../../nexus/api'
 import { useNetwork } from '../../../hooks/useNetwork'
 import { isUrlSafe } from '../../../utils/url'
@@ -25,6 +26,8 @@ import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
 import { useAccount } from 'wagmi'
 import { getEvmBech32Address } from '../../../utils/helpers'
 import { useRoflAppDomains } from '../../../backend/useRoflAppDomains'
+import { fromMetadataToAgentMetadata } from '../../../utils/rofl-8004.ts'
+import { get8004ScanUrl } from '../../../constants/rofl-8004.ts'
 
 type AppMetadataProps = {
   id: string
@@ -33,6 +36,7 @@ type AppMetadataProps = {
   policy: RoflAppPolicy
   setViewMetadataState: (state: ViewMetadataState) => void
   editEnabled?: boolean
+  instancesWithERC8004Token: RoflInstance[]
 }
 
 export const AppMetadata: FC<AppMetadataProps> = ({
@@ -42,6 +46,7 @@ export const AppMetadata: FC<AppMetadataProps> = ({
   policy,
   setViewMetadataState,
   editEnabled,
+  instancesWithERC8004Token,
 }) => {
   const network = useNetwork()
   const { data } = useGetRuntimeRoflAppsIdTransactions(network, 'sapphire', id, {
@@ -64,6 +69,11 @@ export const AppMetadata: FC<AppMetadataProps> = ({
 
   const appDomains = useRoflAppDomains(network, id)
 
+  const [instance] = instancesWithERC8004Token
+  const agentMetadata = fromMetadataToAgentMetadata(instance.metadata)
+  const agentChainName = agentMetadata?.chainName
+  const agentTokenId = agentMetadata?.agentId
+
   return (
     <div className="space-y-4">
       {isMachineLoading && <Skeleton className="w-full h-60px]" />}
@@ -188,6 +198,18 @@ export const AppMetadata: FC<AppMetadataProps> = ({
           ))}
         </div>
       </DetailsSectionRow>
+      {agentChainName && agentTokenId && (
+        <DetailsSectionRow label="ERC-8004 agent registration">
+          <a
+            href={get8004ScanUrl(agentChainName, agentTokenId.toString())}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary"
+          >
+            {get8004ScanUrl(agentChainName, agentTokenId.toString())}
+          </a>
+        </DetailsSectionRow>
+      )}
       <div className="text-xl font-bold">Policy</div>
       <DetailsSectionRow label="Who can run this app">
         <Endorsements endorsements={policy.endorsements} />
diff --git a/src/pages/Dashboard/AppDetails/index.tsx b/src/pages/Dashboard/AppDetails/index.tsx
index d9dcdb52..333d40c7 100644
--- a/src/pages/Dashboard/AppDetails/index.tsx
+++ b/src/pages/Dashboard/AppDetails/index.tsx
@@ -198,6 +198,7 @@ export const AppDetails: FC = () => {
                   policy={roflApp.policy}
                   setViewMetadataState={setViewMetadataState}
                   editEnabled={editEnabled}
+                  instancesWithERC8004Token={instancesWithERC8004Token}
                 />
               </TabsContent>
               <TabsContent value="secrets" className="relative pt-10">
@@ -223,7 +224,7 @@ export const AppDetails: FC = () => {
               </TabsContent>
               {hasInstancesWithERC8004Token && (
                 <TabsContent value="erc-8004">
-                  <AppERC8004 roflInstances={instancesWithERC8004Token} />
+                  <AppERC8004 instancesWithERC8004Token={instancesWithERC8004Token} />
                 </TabsContent>
               )}
             </Tabs>
diff --git a/src/utils/rofl-8004.ts b/src/utils/rofl-8004.ts
index deb0a93b..fcfe1fb3 100644
--- a/src/utils/rofl-8004.ts
+++ b/src/utils/rofl-8004.ts
@@ -10,7 +10,9 @@ import { AppData, ERC8004FormData } from '../pages/CreateApp/types.ts'
 import * as yaml from 'yaml'
 import { parse } from 'yaml'
 
-export const fromMetadataToAgentId = (metadata: RoflInstance['metadata']): [number | null, bigint | null] => {
+export const fromMetadataToAgentMetadata = (
+  metadata: RoflInstance['metadata'],
+): { chainId: number | null; agentId: bigint | null; chainName: string | null } | null => {
   const agentId = metadata?.[ROFL_8004_METADATA_KEY] as string
   const splitAgentId = agentId?.split(':')
   const chainId = Number(splitAgentId[0])
@@ -20,10 +22,14 @@ export const fromMetadataToAgentId = (metadata: RoflInstance['metadata']): [numb
       `Invalid chainId: ${chainId}. Expected: ${Object.keys(ROFL_8004_SUPPORTED_CHAINS).join(',')}`,
     )
     // Silently fail
-    return [null, null]
+    return null
   }
 
-  return [chainId, BigInt(splitAgentId[1])]
+  return {
+    chainId,
+    chainName: ROFL_8004_SUPPORTED_CHAINS[chainId.toString()].chain.name.toLowerCase(),
+    agentId: BigInt(splitAgentId[1]),
+  }
 }
 
 export const tokenURIToLink = (tokenURI: string) => tokenURI.replace('ipfs://', 'https://ipfs.io/ipfs/')

From 77b72a8196eacc0ab7fae0101742086c2d32d286 Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Thu, 8 Jan 2026 15:09:18 +0100
Subject: [PATCH 28/34] Add rofl-8004-volume

- according to https://github.com/oasisprotocol/erc-8004 README
---
 src/constants/rofl-8004.ts                  |  1 +
 src/pages/CreateApp/useComposeValidation.ts | 10 +++++++++-
 src/utils/rofl-8004.ts                      | 16 ++++++++++++++--
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/constants/rofl-8004.ts b/src/constants/rofl-8004.ts
index ffd3fd59..f4de76c0 100644
--- a/src/constants/rofl-8004.ts
+++ b/src/constants/rofl-8004.ts
@@ -3,6 +3,7 @@ import { sepolia } from 'viem/chains'
 export const ROFL_8004_DOCKER_IMAGE =
   'ghcr.io/oasisprotocol/rofl-8004:latest@sha256:3b4348cb5fe192c28398be93955abc025e3d9977d1f80121ef1068458d6d1f77'
 export const ROFL_8004_SERVICE_NAME = 'rofl-8004'
+export const ROFL_8004_VOLUME_NAME = 'rofl-8004-volume'
 export const ROFL_8004_SERVICE_ENV_PREFIX = 'ERC8004'
 
 export const ROFL_8004_METADATA_KEY = 'net.oasis.app.erc8004_agent_id' // "{chainId}:{agentId}"
diff --git a/src/pages/CreateApp/useComposeValidation.ts b/src/pages/CreateApp/useComposeValidation.ts
index acf4b251..31a3e5db 100644
--- a/src/pages/CreateApp/useComposeValidation.ts
+++ b/src/pages/CreateApp/useComposeValidation.ts
@@ -2,7 +2,7 @@ import * as yaml from 'yaml'
 import { useState } from 'react'
 import { useValidateRofl } from '../../backend/api'
 import { useRoflAppBackendAuthContext } from '../../contexts/RoflAppBackendAuth/hooks'
-import { ROFL_8004_SERVICE_NAME } from '../../constants/rofl-8004.ts'
+import { ROFL_8004_SERVICE_NAME, ROFL_8004_VOLUME_NAME } from '../../constants/rofl-8004.ts'
 
 type ValidationState = {
   isValidating: boolean
@@ -45,6 +45,14 @@ export function useComposeValidation() {
         })
         return false
       }
+
+      if (parsed?.volumes?.[ROFL_8004_VOLUME_NAME]) {
+        setValidationState({
+          isValidating: false,
+          validationError: `Volume name "${ROFL_8004_VOLUME_NAME}" is reserved and cannot be used.`,
+        })
+        return false
+      }
       // eslint-disable-next-line @typescript-eslint/no-unused-vars -- ignore YAML parsing error
     } catch (_err) {
       // Let backend validation handle the error
diff --git a/src/utils/rofl-8004.ts b/src/utils/rofl-8004.ts
index fcfe1fb3..3c52848b 100644
--- a/src/utils/rofl-8004.ts
+++ b/src/utils/rofl-8004.ts
@@ -4,12 +4,19 @@ import {
   ROFL_8004_SERVICE_ENV_PREFIX,
   ROFL_8004_SERVICE_NAME,
   ROFL_8004_SUPPORTED_CHAINS,
+  ROFL_8004_VOLUME_NAME,
 } from '../constants/rofl-8004.ts'
 import { RoflInstance } from '../nexus/generated/api.ts'
 import { AppData, ERC8004FormData } from '../pages/CreateApp/types.ts'
 import * as yaml from 'yaml'
 import { parse } from 'yaml'
 
+interface ComposeFile {
+  services: Record<string, unknown>
+  volumes?: Record<string, unknown | null>
+  [key: string]: unknown
+}
+
 export const fromMetadataToAgentMetadata = (
   metadata: RoflInstance['metadata'],
 ): { chainId: number | null; agentId: bigint | null; chainName: string | null } | null => {
@@ -41,7 +48,7 @@ export const hasRofl8004ServiceSecrets = (appData: AppData) => {
 }
 
 export const addRofl8004ServiceToCompose = (composeYaml: string, appData: AppData): string => {
-  const compose = parse(composeYaml)
+  const compose = parse(composeYaml) as ComposeFile
 
   const environment = Object.keys(appData.inputs?.secrets ?? {})
     .filter(key => key.toUpperCase().startsWith(ROFL_8004_SERVICE_ENV_PREFIX))
@@ -71,8 +78,13 @@ export const addRofl8004ServiceToCompose = (composeYaml: string, appData: AppDat
     image: ROFL_8004_DOCKER_IMAGE,
     platform: 'linux/amd64',
     environment,
-    volumes: ['/run/rofl-appd.sock:/run/rofl-appd.sock'],
+    volumes: ['/run/rofl-appd.sock:/run/rofl-appd.sock', `${ROFL_8004_VOLUME_NAME}:/root/.rofl-8004`],
+  }
+
+  if (!compose.volumes) {
+    compose.volumes = {}
   }
+  compose.volumes[ROFL_8004_VOLUME_NAME] = null
 
   return yaml.stringify(compose)
 }

From e2aa40a15754d7c5f55c1b52a0f29236dc72300f Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Mon, 12 Jan 2026 13:12:15 +0100
Subject: [PATCH 29/34] Update rofl-8004 image version

---
 src/constants/rofl-8004.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/constants/rofl-8004.ts b/src/constants/rofl-8004.ts
index f4de76c0..208ffb45 100644
--- a/src/constants/rofl-8004.ts
+++ b/src/constants/rofl-8004.ts
@@ -1,7 +1,7 @@
 import { sepolia } from 'viem/chains'
 
 export const ROFL_8004_DOCKER_IMAGE =
-  'ghcr.io/oasisprotocol/rofl-8004:latest@sha256:3b4348cb5fe192c28398be93955abc025e3d9977d1f80121ef1068458d6d1f77'
+  'ghcr.io/oasisprotocol/rofl-8004:latest@sha256:671633f634402e147f90115d1c139ba4d955842276eadf95e29a9034d14a7d49'
 export const ROFL_8004_SERVICE_NAME = 'rofl-8004'
 export const ROFL_8004_VOLUME_NAME = 'rofl-8004-volume'
 export const ROFL_8004_SERVICE_ENV_PREFIX = 'ERC8004'

From 489cabf3b1522d229713db4979aa0a783df4d8fc Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Mon, 12 Jan 2026 13:15:37 +0100
Subject: [PATCH 30/34] Fix in case there is no instance with ERC8004Token

---
 src/pages/Dashboard/AppDetails/AppMetadata.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Dashboard/AppDetails/AppMetadata.tsx b/src/pages/Dashboard/AppDetails/AppMetadata.tsx
index 31d9551e..13c54966 100644
--- a/src/pages/Dashboard/AppDetails/AppMetadata.tsx
+++ b/src/pages/Dashboard/AppDetails/AppMetadata.tsx
@@ -70,7 +70,7 @@ export const AppMetadata: FC<AppMetadataProps> = ({
   const appDomains = useRoflAppDomains(network, id)
 
   const [instance] = instancesWithERC8004Token
-  const agentMetadata = fromMetadataToAgentMetadata(instance.metadata)
+  const agentMetadata = instance ? fromMetadataToAgentMetadata(instance.metadata) : undefined
   const agentChainName = agentMetadata?.chainName
   const agentTokenId = agentMetadata?.agentId
 

From 6a33ae12248528f564dfec8d809a2605fb5f41f4 Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Mon, 12 Jan 2026 14:32:31 +0100
Subject: [PATCH 31/34] Update RPC url

---
 src/constants/rofl-8004.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/constants/rofl-8004.ts b/src/constants/rofl-8004.ts
index 208ffb45..2359859b 100644
--- a/src/constants/rofl-8004.ts
+++ b/src/constants/rofl-8004.ts
@@ -11,8 +11,8 @@ export const ROFL_8004_METADATA_KEY = 'net.oasis.app.erc8004_agent_id' // "{chai
 export const ROFL_8004_SUPPORTED_CHAINS = {
   [sepolia.id.toString()]: {
     chain: sepolia,
-    rpcUrl: sepolia.rpcUrls.default.http,
     identityContract: '0x8004a6090cd10a7288092483047b097295fb8847',
+    rpcUrl: ['https://ethereum-sepolia-rpc.publicnode.com'],
     validatorAddress: '0x7cd2eccd146b6626c8a500ab5644b1a506115e6f',
   },
 }

From 94aa606c6c31f2673c32d152c12139e2a0e6df0c Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Mon, 12 Jan 2026 14:32:46 +0100
Subject: [PATCH 32/34] Update 8004scan URL

---
 src/constants/rofl-8004.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/constants/rofl-8004.ts b/src/constants/rofl-8004.ts
index 2359859b..a60af171 100644
--- a/src/constants/rofl-8004.ts
+++ b/src/constants/rofl-8004.ts
@@ -19,4 +19,4 @@ export const ROFL_8004_SUPPORTED_CHAINS = {
 
 export const ERC_8004_ETHEREUM_EIP_URL = 'https://eips.ethereum.org/EIPS/eip-8004'
 export const get8004ScanUrl = (chainName: string, agentId: string) =>
-  `https://www.8004scan.io/${chainName}/agent/${agentId}`
+  `https://www.8004scan.io/agents/${chainName}/${agentId}`

From 5a2c2cc831078de0be64f220cd7680a3cebef089 Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Mon, 12 Jan 2026 14:33:11 +0100
Subject: [PATCH 33/34] Use RPC URL from config

---
 src/contracts/erc-8004.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/contracts/erc-8004.ts b/src/contracts/erc-8004.ts
index 1ba5d314..79b9b90a 100644
--- a/src/contracts/erc-8004.ts
+++ b/src/contracts/erc-8004.ts
@@ -12,7 +12,7 @@ export const getMetadata = async (
   try {
     return (await createPublicClient({
       chain: supportedNetwork.chain,
-      transport: http(),
+      transport: http(supportedNetwork.rpcUrl[0]),
     }).readContract({
       address: supportedNetwork.identityContract as `0x${string}`,
       abi: ERC_8004_ABI,
@@ -31,7 +31,7 @@ export const getTokenURI = async (chainId: number | string, agentId: bigint): Pr
   try {
     return (await createPublicClient({
       chain: supportedNetwork.chain,
-      transport: http(),
+      transport: http(supportedNetwork.rpcUrl[0]),
     }).readContract({
       address: supportedNetwork.identityContract as `0x${string}`,
       abi: ERC_8004_ABI,

From 597eaf1c1d01bd553dfe34ceec4f67ff5b4496b3 Mon Sep 17 00:00:00 2001
From: lubej <matej.lubej@oasisprotocol.org>
Date: Wed, 14 Jan 2026 10:16:29 +0100
Subject: [PATCH 34/34] Address PR feedback

- ERC-8004 checkbox unchecked by default, hide/show
- Sepolia selected by default
- Change info box for private key
---
 src/pages/CreateApp/ERC8004Form.tsx | 231 +++++++++++++---------------
 1 file changed, 111 insertions(+), 120 deletions(-)

diff --git a/src/pages/CreateApp/ERC8004Form.tsx b/src/pages/CreateApp/ERC8004Form.tsx
index 9c57d705..c2ed204f 100644
--- a/src/pages/CreateApp/ERC8004Form.tsx
+++ b/src/pages/CreateApp/ERC8004Form.tsx
@@ -18,13 +18,13 @@ type Props = {
 }
 
 export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadata, setAppDataForm }) => {
-  const [skipERC8004, setSkipERC8004] = useState(true)
+  const [enableERC8004, setEnableERC8004] = useState(false)
 
   const form = useForm<ERC8004FormData>({
-    resolver: skipERC8004 ? undefined : zodResolver(erc8004Schema),
+    resolver: enableERC8004 ? zodResolver(erc8004Schema) : undefined,
     defaultValues: {
       secrets: {
-        ERC8004_CHAIN_SELECTION: 'custom',
+        ERC8004_CHAIN_SELECTION: '11155111',
         ERC8004_RPC_URL: inputs?.secrets?.ERC8004_RPC_URL ?? '',
         ERC8004_PINATA_JWT: '',
         ERC8004_SIGNING_KEY: '',
@@ -53,7 +53,7 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadat
   ]
 
   function onSubmit(values: ERC8004FormData) {
-    if (skipERC8004) {
+    if (!enableERC8004) {
       setAppDataForm({
         inputs: {
           secrets: {},
@@ -98,139 +98,130 @@ export const ERC8004Form: FC<Props> = ({ handleNext, handleBack, inputs, metadat
     <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 mb-6 w-full">
       <div className="flex items-center gap-2 mb-4">
         <Checkbox
-          id="skip-erc-8004"
-          checked={skipERC8004}
-          onCheckedChange={checked => setSkipERC8004(checked === true)}
+          id="enable-erc-8004"
+          checked={enableERC8004}
+          onCheckedChange={checked => setEnableERC8004(checked === true)}
         />
-        <Label htmlFor="skip-erc-8004">Skip ERC-8004 Identity Registration</Label>
+        <Label htmlFor="enable-erc-8004">Enable ERC-8004 Identity Registration</Label>
       </div>
 
-      <hr />
+      {enableERC8004 && (
+        <>
+          <hr />
+
+          <SelectFormField
+            control={form.control}
+            name="secrets.ERC8004_CHAIN_SELECTION"
+            label="Chain for trustless agent registration"
+            placeholder="Select chain"
+            options={chainOptions}
+          />
 
-      <SelectFormField
-        control={form.control}
-        name="secrets.ERC8004_CHAIN_SELECTION"
-        label="Chain for trustless agent registration"
-        placeholder="Select chain"
-        options={chainOptions}
-        disabled={skipERC8004}
-      />
+          {isCustomChain && (
+            <>
+              <InputFormField
+                control={form.control}
+                type="input"
+                name="secrets.ERC8004_RPC_URL"
+                label="Custom RPC URL"
+                placeholder="https://your-rpc-url.com"
+                info="Enter the full RPC URL for trustless agent registration"
+              />
+
+              <InputFormField
+                control={form.control}
+                type="input"
+                name="secrets.ERC8004_VALIDATOR_ADDRESS"
+                label="Validator address (Optional)"
+                placeholder="0x1234567890abcde1234567890abcde1234567890"
+              />
+            </>
+          )}
+
+          <InputFormField
+            control={form.control}
+            type="textarea"
+            name="secrets.ERC8004_PINATA_JWT"
+            label="Pinata JWT Token"
+            placeholder="1234567890abcde..."
+            info="Your Pinata JWT token is used to pin agent metadata to IPFS. Get it from pinata.cloud"
+          />
+
+          <InputFormField
+            control={form.control}
+            type="input"
+            name="secrets.ERC8004_AGENT_NAME"
+            label="Agent Name (Optional)"
+            placeholder="rofl-agent"
+          />
+
+          <InputFormField
+            control={form.control}
+            type="textarea"
+            name="secrets.ERC8004_AGENT_DESCRIPTION"
+            label="Agent Description (Optional)"
+            placeholder="Oasis ROFL-powered trustless agent"
+          />
 
-      {isCustomChain && (
-        <>
           <InputFormField
             control={form.control}
             type="input"
-            name="secrets.ERC8004_RPC_URL"
-            label="Custom RPC URL"
-            placeholder="https://your-rpc-url.com"
-            disabled={skipERC8004}
-            info="Enter the full RPC URL for trustless agent registration"
+            name="secrets.ERC8004_AGENT_IMAGE"
+            label="Agent Image URL (Optional)"
+            placeholder="https://example.com/logo.png"
           />
 
           <InputFormField
             control={form.control}
             type="input"
-            name="secrets.ERC8004_VALIDATOR_ADDRESS"
-            label="Validator address (Optional)"
-            placeholder="0x1234567890abcde1234567890abcde1234567890"
-            disabled={skipERC8004}
+            name="secrets.ERC8004_AGENT_VERSION"
+            label="Agent Version (Optional)"
+            placeholder="0.1.0"
+          />
+
+          <InputFormField
+            control={form.control}
+            type="input"
+            name="secrets.ERC8004_AGENT_CATEGORY"
+            label="Agent Category (Optional)"
+            placeholder="rofl"
+          />
+
+          <InputFormField
+            control={form.control}
+            type="input"
+            name="secrets.ERC8004_AGENT_MCP"
+            label="Agent MCP (Optonal)"
+            placeholder="https://mcp.agent.com"
+          />
+
+          <InputFormField
+            control={form.control}
+            type="input"
+            name="secrets.ERC8004_AGENT_A2A"
+            label="Agent A2A (Optonal)"
+            placeholder="https://agent.example/.well-known/agent-card.json"
+          />
+
+          <InputFormField
+            control={form.control}
+            type="input"
+            name="secrets.ERC8004_AGENT_ENS"
+            label="Agent ENS (Optonal)"
+            placeholder="agent.eth"
+          />
+
+          <InputFormField
+            control={form.control}
+            type="password"
+            name="secrets.ERC8004_SIGNING_KEY"
+            label="Private key for trustless agent registration (Optional)"
+            placeholder="1234567890abcde1234567890abcde1234567890abcde1234567890abcde123"
+            info="Optional private key used to sign and submit your agent to the ERC-8004 registry. If not provided, a fresh keypair will be generated inside ROFL and its address reported in the erc8004_signing_key replica metadata field."
           />
         </>
       )}
 
-      <InputFormField
-        control={form.control}
-        type="textarea"
-        name="secrets.ERC8004_PINATA_JWT"
-        label="Pinata JWT Token"
-        placeholder="1234567890abcde..."
-        disabled={skipERC8004}
-        info="Your Pinata JWT token is used to pin agent metadata to IPFS. Get it from pinata.cloud"
-      />
-
-      <InputFormField
-        control={form.control}
-        type="input"
-        name="secrets.ERC8004_AGENT_NAME"
-        label="Agent Name (Optional)"
-        placeholder="rofl-agent"
-        disabled={skipERC8004}
-      />
-
-      <InputFormField
-        control={form.control}
-        type="textarea"
-        name="secrets.ERC8004_AGENT_DESCRIPTION"
-        label="Agent Description (Optional)"
-        placeholder="Oasis ROFL-powered trustless agent"
-        disabled={skipERC8004}
-      />
-
-      <InputFormField
-        control={form.control}
-        type="input"
-        name="secrets.ERC8004_AGENT_IMAGE"
-        label="Agent Image URL (Optional)"
-        placeholder="https://example.com/logo.png"
-        disabled={skipERC8004}
-      />
-
-      <InputFormField
-        control={form.control}
-        type="input"
-        name="secrets.ERC8004_AGENT_VERSION"
-        label="Agent Version (Optional)"
-        placeholder="0.1.0"
-        disabled={skipERC8004}
-      />
-
-      <InputFormField
-        control={form.control}
-        type="input"
-        name="secrets.ERC8004_AGENT_CATEGORY"
-        label="Agent Category (Optional)"
-        placeholder="rofl"
-        disabled={skipERC8004}
-      />
-
-      <InputFormField
-        control={form.control}
-        type="input"
-        name="secrets.ERC8004_AGENT_MCP"
-        label="Agent MCP (Optonal)"
-        placeholder="https://mcp.agent.com"
-        disabled={skipERC8004}
-      />
-
-      <InputFormField
-        control={form.control}
-        type="input"
-        name="secrets.ERC8004_AGENT_A2A"
-        label="Agent A2A (Optonal)"
-        placeholder="https://agent.example/.well-known/agent-card.json"
-        disabled={skipERC8004}
-      />
-
-      <InputFormField
-        control={form.control}
-        type="input"
-        name="secrets.ERC8004_AGENT_ENS"
-        label="Agent ENS (Optonal)"
-        placeholder="agent.eth"
-        disabled={skipERC8004}
-      />
-
-      <InputFormField
-        control={form.control}
-        type="password"
-        name="secrets.ERC8004_SIGNING_KEY"
-        label="Private key for trustless agent registration (Optional)"
-        placeholder="1234567890abcde1234567890abcde1234567890abcde1234567890abcde123"
-        disabled={skipERC8004}
-        info="The private key used to sign and submit your agent to the ERC-8004 registry. Add some funds on selected network for token registration."
-      />
-
       <CreateFormNavigation handleBack={handleBack} disabled={form.formState.isSubmitting} />
     </form>
   )