Display ERC-8004 metadata in AppDetails

Author: lubej

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')} format="json" />
+            </div>
+          )}
+          {error && <div className="text-red-500">Error loading metadata: {error.message}</div>}
+        </>
+      )}
+    </div>
+  )
+}

src/pages/Dashboard/AppDetails/index.tsx

@@ -19,6 +19,8 @@ import { RemoveAppButton } from './RemoveAppButton'
 import { Dialog, DialogContent } from '@oasisprotocol/ui-library/src/components/ui/dialog'
 import { HelpWidget } from '../../CreateApp/HelpWidget'
 import { AddSecret } from '../../../components/SecretsTable/AddSecret'
+import { ROFL_8004_METADATA_KEY } from '../../../constants/rofl-8004.ts'
+import { AppERC8004 } from './AppERC8004.tsx'
 
 function setDefaultMetadataViewState(metadata: RoflAppMetadata | undefined = {}): ViewMetadataState {
   return {
@@ -63,6 +65,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
   const removeApp = useRemoveApp()
   const updateApp = useUpdateApp()
@@ -176,6 +182,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>
@@ -211,6 +218,11 @@ export const AppDetails: FC = () => {
                   composeYaml={composeYaml}
                 />
               </TabsContent>
+              {hasInstancesWithERC8004Token && (
+                <TabsContent value="erc-8004">
+                  <AppERC8004 roflInstances={instancesWithERC8004Token} />
+                </TabsContent>
+              )}
             </Tabs>
           </div>
         </>