Add 8004.scan navigation link

Author: lubej

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

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,

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

src/pages/Dashboard/AppDetails/index.tsx

@@ -195,6 +195,7 @@ export const AppDetails: FC = () => {
                   policy={roflApp.policy}
                   setViewMetadataState={setViewMetadataState}
                   editEnabled={editEnabled}
+                  instancesWithERC8004Token={instancesWithERC8004Token}
                 />
               </TabsContent>
               <TabsContent value="secrets" className="relative pt-10">
@@ -220,7 +221,7 @@ export const AppDetails: FC = () => {
               </TabsContent>
               {hasInstancesWithERC8004Token && (
                 <TabsContent value="erc-8004">
-                  <AppERC8004 roflInstances={instancesWithERC8004Token} />
+                  <AppERC8004 instancesWithERC8004Token={instancesWithERC8004Token} />
                 </TabsContent>
               )}
             </Tabs>

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