feat: service credentials id check

content/pages/editMetadata.json

@@ -144,11 +144,11 @@
         "required": true
       },
       {
-        "name": "serviceSD",
-        "label": "Service Self-Description",
-        "placeholder": "e.g. https://file.com/service-self-description.json",
-        "help": "Please enter the URL to a valid service self-description and click \"ADD FILE\" to validate the data. This file URL and its content will be publicly available after publishing",
-        "type": "serviceSD"
+        "name": "serviceCredential",
+        "label": "Service Credential",
+        "placeholder": "e.g. https://file.com/service-credential.json",
+        "help": "Please enter the URL to a valid service credential and click \"ADD FILE\" to validate the data. This file URL and its content will be publicly available after publishing",
+        "type": "serviceCredential"
       },
       {
         "name": "tags",

content/pages/verify.json

@@ -1,22 +1,9 @@
 {
-  "title": "Service Self-Description Verifier",
-  "description": "Visualize and verify service self-descriptions via DID.",
+  "title": "Service Credential Verifier",
+  "description": "Visualize and verify service credentials via DID.",
   "input": {
     "label": "Enter a valid did:op",
     "placeholder": "did:op:87152E582e3B05Cc6940E9763b9e0c22eA812448",
     "buttonLabel": "Verify"
-  },
-  "serviceSDSection": {
-    "title": "Service Self-Description",
-    "badgeLabel": "Verified Self-Description"
-  },
-  "errorSection": {
-    "title": "Validation Errors",
-    "badgeLabel": "Invalid Self-Description"
-  },
-  "errorList": {
-    "invalidDid": "The provided DID:OP does not refer to any DDO.",
-    "noServiceSD": "The requested DDO does not contain a service self-description.",
-    "default": "An unexpected error occurred. Please try again later."
   }
 }

content/publish/form.json

@@ -30,11 +30,11 @@
         "required": true
       },
       {
-        "name": "serviceSD",
-        "label": "Service Self-Description",
-        "placeholder": "e.g. https://file.com/service-self-description.json",
-        "help": "Please enter the URL to a valid service self-description and click \"ADD FILE\" to validate the data. This file URL and its content will be publicly available after publishing",
-        "type": "serviceSD"
+        "name": "serviceCredential",
+        "label": "Service Credential",
+        "placeholder": "e.g. https://file.com/service-credential.json",
+        "help": "Please enter the URL to a valid service credential and click \"ADD FILE\" to validate the data. This file URL and its content will be publicly available after publishing",
+        "type": "serviceCredential"
       },
       {
         "name": "tags",

src/@context/Asset.tsx

@@ -20,9 +20,9 @@ import { assetStateToString } from '@utils/assetState'
 import { isValidDid } from '@utils/ddo'
 import { useAddressConfig } from '@hooks/useAddressConfig'
 import {
-  getPublisherFromServiceSD,
-  getServiceSD,
-  verifyRawServiceSD
+  getPublisherFromServiceCredential,
+  getServiceCredential,
+  verifyRawServiceCredential
 } from '@components/Publish/_utils'
 
 export interface AssetProviderValue {
@@ -37,9 +37,10 @@ export interface AssetProviderValue {
   oceanConfig: Config
   loading: boolean
   assetState: string
-  isVerifyingSD: boolean
-  isServiceSDVerified: boolean
-  serviceSDVersion: string
+  isVerifyingServiceCredential: boolean
+  isServiceCredentialVerified: boolean
+  serviceCredentialIdMatch?: boolean
+  serviceCredentialVersion: string
   verifiedServiceProviderName: string
   fetchAsset: (token?: CancelToken) => Promise<void>
 }
@@ -68,9 +69,14 @@ function AssetProvider({
   const [isAssetNetwork, setIsAssetNetwork] = useState<boolean>()
   const [oceanConfig, setOceanConfig] = useState<Config>()
   const [assetState, setAssetState] = useState<string>()
-  const [isVerifyingSD, setIsVerifyingSD] = useState(false)
-  const [isServiceSDVerified, setIsServiceSDVerified] = useState<boolean>()
-  const [serviceSDVersion, setServiceSDVersion] = useState<string>()
+  const [isVerifyingServiceCredential, setIsVerifyingServiceCredential] =
+    useState(false)
+  const [isServiceCredentialVerified, setIsServiceCredentialVerified] =
+    useState<boolean>()
+  const [serviceCredentialIdMatch, setServiceCredentialIdMatch] =
+    useState<boolean>()
+  const [serviceCredentialVersion, setServiceCredentialVersion] =
+    useState<string>()
   const [verifiedServiceProviderName, setVerifiedServiceProviderName] =
     useState<string>()
 
@@ -162,43 +168,50 @@ function AssetProvider({
   }, [asset?.chainId, asset?.services, accountId, did])
 
   // -----------------------------------
-  // Helper: Get and set asset Self-Description state
+  // Helper: Get and set asset Service Credential state
   // -----------------------------------
-  const checkServiceSD = useCallback(
+  const checkServiceCredential = useCallback(
     async (asset: AssetExtended): Promise<void> => {
       if (!asset) return
-      setIsVerifyingSD(true)
+      setIsVerifyingServiceCredential(true)
 
       try {
         const { additionalInformation } = asset.metadata
-        const serviceSD = additionalInformation?.gaiaXInformation?.serviceSD
+        const serviceCredential =
+          additionalInformation?.gaiaXInformation?.serviceSD
 
-        if (!serviceSD || !Object.keys(serviceSD)?.length) {
-          setIsServiceSDVerified(false)
-          setServiceSDVersion(undefined)
+        if (!serviceCredential || !Object.keys(serviceCredential)?.length) {
+          setIsServiceCredentialVerified(false)
+          setServiceCredentialIdMatch(false)
+          setServiceCredentialVersion(undefined)
           setVerifiedServiceProviderName(undefined)
           return
         }
 
-        const serviceSDContent = serviceSD?.url
-          ? await getServiceSD(serviceSD?.url)
-          : serviceSD?.raw
+        const serviceCredentialContent = serviceCredential?.url
+          ? await getServiceCredential(serviceCredential?.url)
+          : serviceCredential?.raw
 
-        const { verified, complianceApiVersion } = await verifyRawServiceSD(
-          serviceSDContent
-        )
+        const { verified, complianceApiVersion, idMatch } =
+          await verifyRawServiceCredential(serviceCredentialContent, asset.id)
 
-        setIsServiceSDVerified(verified && !!serviceSDContent)
-        setServiceSDVersion(complianceApiVersion)
-        const serviceProviderName = getPublisherFromServiceSD(serviceSDContent)
+        setIsServiceCredentialVerified(verified && !!serviceCredentialContent)
+        setServiceCredentialIdMatch(
+          verified && !!serviceCredentialContent && idMatch
+        )
+        setServiceCredentialVersion(complianceApiVersion)
+        const serviceProviderName = getPublisherFromServiceCredential(
+          serviceCredentialContent
+        )
         setVerifiedServiceProviderName(serviceProviderName)
       } catch (error) {
-        setIsServiceSDVerified(false)
-        setServiceSDVersion(undefined)
+        setIsServiceCredentialVerified(false)
+        setServiceCredentialIdMatch(false)
+        setServiceCredentialVersion(undefined)
         setVerifiedServiceProviderName(undefined)
         LoggerInstance.error(error)
       } finally {
-        setIsVerifyingSD(false)
+        setIsVerifyingServiceCredential(false)
       }
     },
     []
@@ -269,13 +282,13 @@ function AssetProvider({
   }, [asset])
 
   // -----------------------------------
-  // Set Asset Self-Description state
+  // Set Asset Service Credential state
   // -----------------------------------
   useEffect(() => {
     if (!asset) return
 
-    checkServiceSD(asset)
-  }, [asset, checkServiceSD])
+    checkServiceCredential(asset)
+  }, [asset, checkServiceCredential])
 
   return (
     <AssetContext.Provider
@@ -294,9 +307,10 @@ function AssetProvider({
           isOwner,
           oceanConfig,
           assetState,
-          isVerifyingSD,
-          isServiceSDVerified,
-          serviceSDVersion,
+          isVerifyingServiceCredential,
+          isServiceCredentialVerified,
+          serviceCredentialIdMatch,
+          serviceCredentialVersion,
           verifiedServiceProviderName
         } as AssetProviderValue
       }

src/@types/gaia-x/2210/ServiceCredential.d.ts

@@ -0,0 +1,6 @@
+export interface ServiceCredential {
+  raw?: string
+  url?: string
+  isVerified?: boolean
+  idMatch?: boolean
+}

src/components/@shared/FormInput/InputElement/ServiceSD/index.tsx → src/components/@shared/FormInput/InputElement/ServiceCredential/index.tsx

@@ -9,15 +9,15 @@ import Loader from '@components/@shared/atoms/Loader'
 import styles from './index.module.css'
 import {
   getFormattedCodeString,
-  getServiceSD,
-  signServiceSD,
+  getServiceCredential,
+  signServiceCredential,
   storeRawServiceSD,
-  verifyRawServiceSD
+  verifyRawServiceCredential
 } from '@components/Publish/_utils'
 import URLInput from '../URLInput'
 import FileInfo from '../FilesInput/Info'
 
-const serviceSelfDescriptionOptions = [
+const serviceCredentialOptions = [
   {
     name: 'url',
     checked: false,
@@ -30,18 +30,19 @@ const serviceSelfDescriptionOptions = [
   }
 ]
 
-export default function ServiceSD(props: InputProps): ReactElement {
+export default function ServiceCredential(props: InputProps): ReactElement {
   const [field, meta, helpers] = useField(props.name)
   const [userSelection, setUserSelection] = useState<string>()
   const [isVerified, setIsVerified] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
-  const [rawServiceSDPreview, setRawServiceSDPreview] = useState<string>()
+  const [rawServiceCredentialPreview, setRawServiceCredentialPreview] =
+    useState<string>()
 
   const validateUrl = async (url: string): Promise<string> => {
     try {
       setIsLoading(true)
-      const serviceSD = await getServiceSD(url)
-      const { verified } = await verifyRawServiceSD(serviceSD)
+      const serviceCredential = await getServiceCredential(url)
+      const { verified } = await verifyRawServiceCredential(serviceCredential)
       setIsVerified(verified)
 
       if (!verified) {
@@ -50,15 +51,15 @@ export default function ServiceSD(props: InputProps): ReactElement {
         )
         return
       }
-      if (!serviceSD) {
+      if (!serviceCredential) {
         toast.error(
           'The linked file is not accessible. Please verify your service provider allows access from this domain and try again.'
         )
         return
       }
 
       helpers.setValue({ url, isVerified: verified })
-      toast.success('Great! The provided service self-description looks good.')
+      toast.success('Great! The provided service credential looks good.')
     } catch (error) {
       toast.error('Could not fetch file info. Please check URL and try again')
       console.error(error.message)
@@ -67,31 +68,34 @@ export default function ServiceSD(props: InputProps): ReactElement {
     }
   }
 
-  const verifyRawBody = async (rawServiceSD: string) => {
+  const verifyRawBody = async (rawServiceCredential: string) => {
     try {
       setIsLoading(true)
 
-      const parsedServiceSD = JSON.parse(rawServiceSD)
-      const signedServiceSD = parsedServiceSD?.complianceCredential
-        ? parsedServiceSD
-        : await signServiceSD(parsedServiceSD)
+      const parsedServiceCredential = JSON.parse(rawServiceCredential)
+      const signedServiceCredential =
+        parsedServiceCredential?.complianceCredential
+          ? parsedServiceCredential
+          : await signServiceCredential(parsedServiceCredential)
 
-      const { verified, storedSdUrl } = await storeRawServiceSD(signedServiceSD)
+      const { verified, storedSdUrl } = await storeRawServiceSD(
+        signedServiceCredential
+      )
       setIsVerified(verified)
 
       if (!verified) {
         toast.error(
-          'The data you entered appears to be invalid. Please check the provided service self-description and try again'
+          'The data you entered appears to be invalid. Please check the provided service credential and try again'
         )
         return
       }
 
-      setRawServiceSDPreview(signedServiceSD)
+      setRawServiceCredentialPreview(signedServiceCredential)
       helpers.setValue({ url: storedSdUrl })
-      toast.success('Great! The provided service self-description looks good.')
+      toast.success('Great! The provided service credential looks good.')
     } catch (error) {
       toast.error(
-        'Something went wrong. Please check the provided service self-description and try again'
+        'Something went wrong. Please check the provided service credential and try again'
       )
       console.error(error.message)
     } finally {

src/components/@shared/FormInput/InputElement/index.tsx

@@ -14,7 +14,7 @@ import ContainerInput from '@shared/FormInput/InputElement/ContainerInput'
 import TagsAutoComplete from './TagsAutoComplete'
 import TabsFile from '@shared/atoms/TabsFile'
 import { extensions, oceanTheme } from '@utils/codemirror'
-import ServiceSD from './ServiceSD'
+import ServiceCredential from './ServiceCredential'
 
 const cx = classNames.bind(styles)
 
@@ -176,8 +176,8 @@ const InputElement = forwardRef(
         )
       case 'files':
         return <FilesInput {...field} form={form} {...props} />
-      case 'serviceSD':
-        return <ServiceSD {...field} {...props} />
+      case 'serviceCredential':
+        return <ServiceCredential {...field} {...props} />
       case 'container':
         return <ContainerInput {...field} {...props} />
       case 'providerUrl':

src/components/@shared/SDVisualizer/index.module.css → src/components/@shared/ServiceCredentialVisualizer/index.module.css

@@ -1,3 +1,7 @@
+.container {
+  margin-top: var(--spacer);
+}
+
 .header {
   display: flex;
   justify-content: space-between;
@@ -9,6 +13,10 @@
   position: relative;
 }
 
+.markdownContainer pre {
+  margin-top: 0;
+}
+
 .copyContainer {
   position: absolute;
   top: calc(var(--spacer) / 2);