Merge pull request #2 from deltaDAO/feature/vp-integration

Integrate Verifiable Presentation Registry (preview version)

app.config.js

@@ -10,6 +10,10 @@ module.exports = {
   metadataCacheUri:
     process.env.GATSBY_METADATACACHE_URI || 'https://aquarius.delta-dao.com',
 
+  vpRegistryUri:
+    process.env.GATSBY_VP_REGISTRY_URI ||
+    'https://vp-registry.gaiax.delta-dao.com',
+
   // List of chainIds which metadata cache queries will return by default.
   // This preselects the Chains user preferences.
   chainIds: getDefaultChainIds(),

content/pages/history.json

@@ -1,5 +1,17 @@
 {
   "compute": {
     "storage": "Results are stored for 30 days."
+  },
+  "verify": {
+    "data": [
+      {
+        "name": "file",
+        "label": "Verifiable Presentation File",
+        "placeholder": "e.g. https://file.com/vp.json",
+        "help": "Please enter the URL to your verifiable presentation file and click \"ADD FILE\" to validate the data. This URL will be stored encrypted after publishing. For a compute data set, your file should match the file type required by the algorithm, and should not exceed 1 GB in file size.",
+        "type": "files",
+        "required": true
+      }
+    ]
   }
 }

src/@types/Form.d.ts

@@ -13,8 +13,6 @@ export interface FormFieldProps {
   placeholder?: string
   pattern?: string
   min?: string
-  disclaimer?: string
-  disclaimerValues?: string[]
   advanced?: boolean
   disclaimer?: string
   disclaimerValues?: string[]

src/@types/Verification.d.ts

@@ -0,0 +1,25 @@
+export interface RegisterVPPayload {
+  signature: string
+  hashedMessage: string
+  fileUrl: string
+}
+
+type RegistryApiResponseBody = SignatureMessageBody | VpDataBody
+
+export interface RegistryApiResponse<RegistryApiResponseBody> {
+  data: {
+    data: RegistryApiResponseBody
+    message: string
+  }
+}
+
+export interface SignatureMessageBody {
+  message: string
+}
+
+export interface VpDataBody {
+  _id: string
+  address: string
+  transactionHash: string
+  fileUrl: string
+}

src/components/atoms/Input/index.tsx

@@ -103,7 +103,13 @@ export default function Input(props: Partial<InputProps>): ReactElement {
 
       {field && hasError && (
         <div className={styles.error}>
-          <ErrorMessage name={field.name} />
+          <ErrorMessage
+            name={field.name}
+            render={(msg) => {
+              console.log('ERROR:', msg)
+              return <>{msg.toString()}</>
+            }}
+          />
         </div>
       )}
 

src/components/atoms/VerifiedPublisher.module.css

@@ -0,0 +1,31 @@
+.loader,
+.verifiedBadge {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: calc(var(--spacer) / 3);
+  height: calc(var(--spacer) * 1.5);
+}
+
+.verifiedBadge {
+  border-radius: var(--border-radius);
+
+  background: var(--color-primary);
+  color: var(--brand-white);
+
+  font-weight: var(--font-weight-bold);
+}
+
+.verifiedBadge svg {
+  display: inline-block;
+  height: 100%;
+}
+
+.verifiedBadge svg path {
+  fill: var(--brand-white);
+}
+
+.loader span,
+.verifiedBadge span {
+  padding: 0 calc(var(--spacer) / 4);
+}

src/components/atoms/VerifiedPublisher.tsx

@@ -0,0 +1,50 @@
+import React, { ReactElement, useEffect, useState } from 'react'
+import styles from './VerifiedPublisher.module.css'
+import { ReactComponent as VerifiedPatch } from '../../images/patch_check.svg'
+import axios, { AxiosResponse } from 'axios'
+import Loader from './Loader'
+import { Logger } from '@oceanprotocol/lib'
+import { useSiteMetadata } from '../../hooks/useSiteMetadata'
+
+export default function VerifiedPublisher({
+  address
+}: {
+  address: string
+}): ReactElement {
+  const [verified, setVerified] = useState(false)
+  const [loading, setLoading] = useState(false)
+
+  const { vpRegistryUri } = useSiteMetadata().appConfig
+
+  useEffect(() => {
+    const verify = async () => {
+      if (address) {
+        setLoading(true)
+        try {
+          const response: AxiosResponse<any> = await axios.get(
+            `${vpRegistryUri}/vp/${address}/verify`
+          )
+          Logger.debug('[Verification] publisher verification:', response.data)
+          setVerified(response.data?.data?.verified)
+        } catch (err) {
+          Logger.error('[Verification] verification error:', err.message)
+          setVerified(false)
+        } finally {
+          setLoading(false)
+        }
+      }
+    }
+    verify()
+  }, [address])
+
+  return loading ? (
+    <div className={styles.loader}>
+      <Loader />
+      <span>verifying...</span>
+    </div>
+  ) : verified ? (
+    <div className={styles.verifiedBadge}>
+      <VerifiedPatch /> <span>Verified Publisher</span>
+    </div>
+  ) : null
+}

src/components/molecules/FormFields/FilesInput/index.tsx

@@ -1,5 +1,4 @@
 import React, { ReactElement, useState, useEffect } from 'react'
-import axios from 'axios'
 import { useField } from 'formik'
 import { toast } from 'react-toastify'
 import FileInfo from './Info'

src/components/organisms/AssetContent/index.module.css

@@ -1,5 +1,7 @@
 .networkWrap {
-  display: block;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-top: -1rem;
 }
 

src/components/organisms/AssetContent/index.tsx

@@ -20,6 +20,7 @@ import styles from './index.module.css'
 import EditAdvancedSettings from '../AssetActions/Edit/EditAdvancedSettings'
 import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 import NetworkName from '../../atoms/NetworkName'
+import VerifiedPublisher from '../../atoms/VerifiedPublisher'
 
 export interface AssetContentProps {
   path?: string
@@ -102,6 +103,7 @@ export default function AssetContent(props: AssetContentProps): ReactElement {
     <>
       <div className={styles.networkWrap}>
         <NetworkName networkId={ddo.chainId} className={styles.network} />
+        <VerifiedPublisher address={owner} className={styles.verified} />
       </div>
 
       <article className={tutorial ? styles.gridTutorial : styles.grid}>

src/components/pages/Profile/Header/index.tsx

@@ -5,6 +5,7 @@ import Stats from './Stats'
 import Account from './Account'
 import styles from './index.module.css'
 import { useProfile } from '../../../../providers/Profile'
+import { useWeb3 } from '../../../../providers/Web3'
 
 const isDescriptionTextClamped = () => {
   const el = document.getElementById('description')
@@ -30,6 +31,7 @@ export default function AccountHeader({
   const toogleShowMore = () => {
     setIsShowMore(!isShowMore)
   }
+  const account = useWeb3().accountId
 
   return (
     <div className={styles.grid}>

src/components/pages/Profile/History/PublishedList.module.css

@@ -1,4 +1,7 @@
-.filters {
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-top: -1rem;
 }
 

src/components/pages/Profile/History/PublishedList.tsx

@@ -8,6 +8,7 @@ import { useUserPreferences } from '../../../../providers/UserPreferences'
 import styles from './PublishedList.module.css'
 import { useCancelToken } from '../../../../hooks/useCancelToken'
 import { PagedAssets } from '../../../../models/PagedAssets'
+import VerifiedPublisher from '../../../atoms/VerifiedPublisher'
 
 export default function PublishedList({
   accountId
@@ -67,13 +68,16 @@ export default function PublishedList({
 
   return accountId ? (
     <>
-      <Filters
-        serviceType={service}
-        setServiceType={setServiceType}
-        accessType={access}
-        setAccessType={setAccsesType}
-        className={styles.filters}
-      />
+      <div className={styles.header}>
+        <Filters
+          serviceType={service}
+          setServiceType={setServiceType}
+          accessType={access}
+          setAccessType={setAccsesType}
+          className={styles.filters}
+        />
+        <VerifiedPublisher address={accountId} />
+      </div>
       <AssetList
         assets={queryResult?.results}
         isLoading={isLoading}

src/components/pages/Profile/History/Verify.module.css

@@ -0,0 +1,4 @@
+.title {
+  font-size: var(--font-size-h4);
+  display: inline-flex;
+}