Merge branch 'main' into feature/multinetwork

.env.example

@@ -2,6 +2,9 @@
 # "development", "ropsten", "rinkeby", "mainnet", "polygon", "moonbeamalpha"
 GATSBY_NETWORK="rinkeby"
 
+## Define a GATSBY_RBAC_URL to implement permission based restrictions
+#GATSBY_RBAC_URL="http://localhost:3000"
+
 #GATSBY_INFURA_PROJECT_ID="xxx"
 #GATSBY_MARKET_FEE_ADDRESS="0xxx"
 #GATSBY_ANALYTICS_ID="xxx"

app.config.js

@@ -10,6 +10,8 @@ module.exports = {
   // List of all supported chainIds. Used to populate the Chains user preferences list.
   chainIdsSupported: [1, 3, 4, 137, 1287],
 
+  rbacUrl: process.env.GATSBY_RBAC_URL,
+
   infuraProjectId: process.env.GATSBY_INFURA_PROJECT_ID || 'xxx',
 
   // The ETH address the marketplace fee will be sent to.

package-lock.json

@@ -65003,6 +65003,11 @@
         "clsx": "^1.1.1"
       }
     },
+    "reactjs-popup": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.4.tgz",
+      "integrity": "sha512-G5jTXL2JkClKAYAdqedf+K9QvbNsFWvdbrXW1/vWiyanuCU/d7DtQzQux+uKOz2HeNVRsFQHvs7abs0Z7VLAhg=="
+    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",

src/components/atoms/File.module.css

@@ -25,3 +25,7 @@
   width: 4.5rem;
   padding: calc(var(--spacer) / 2) calc(var(--spacer) / 4);
 }
+
+.loaderWrap {
+  margin-right: calc(var(--spacer) / 6);
+}

src/components/atoms/File.tsx

@@ -4,17 +4,28 @@ import filesize from 'filesize'
 import classNames from 'classnames/bind'
 import cleanupContentType from '../../utils/cleanupContentType'
 import styles from './File.module.css'
+import Loader from '../atoms/Loader'
 
 const cx = classNames.bind(styles)
 
+function LoaderArea() {
+  return (
+    <div className={styles.loaderWrap}>
+      <Loader />
+    </div>
+  )
+}
+
 export default function File({
   file,
   className,
-  small
+  small,
+  isLoading
 }: {
   file: FileMetadata
   className?: string
   small?: boolean
+  isLoading?: boolean
 }): ReactElement {
   if (!file) return null
 
@@ -26,17 +37,23 @@ export default function File({
 
   return (
     <ul className={styleClasses}>
-      {file.contentType || file.contentLength ? (
+      {isLoading === false || isLoading === undefined ? (
         <>
-          <li>{cleanupContentType(file.contentType)}</li>
-          <li>
-            {file.contentLength && file.contentLength !== '0'
-              ? filesize(Number(file.contentLength))
-              : ''}
-          </li>
+          {file.contentType || file.contentLength ? (
+            <>
+              <li>{cleanupContentType(file.contentType)}</li>
+              <li>
+                {file.contentLength && file.contentLength !== '0'
+                  ? filesize(Number(file.contentLength))
+                  : ''}
+              </li>
+            </>
+          ) : (
+            <li className={styles.empty}>No file info available</li>
+          )}
         </>
       ) : (
-        <li className={styles.empty}>No file info available</li>
+        <LoaderArea />
       )}
     </ul>
   )

src/components/organisms/AssetActions/Compute/index.tsx

@@ -39,7 +39,7 @@ import { secondsToString } from '../../../../utils/metadata'
 import { getPreviousOrders, getPrice } from '../../../../utils/subgraph'
 
 const SuccessAction = () => (
-  <Button style="text" to="/history" size="small">
+  <Button style="text" to="/history?defaultTab=ComputeJobs" size="small">
     Go to history →
   </Button>
 )
@@ -47,11 +47,13 @@ const SuccessAction = () => (
 export default function Compute({
   isBalanceSufficient,
   dtBalance,
-  file
+  file,
+  fileIsLoading
 }: {
   isBalanceSufficient: boolean
   dtBalance: string
   file: FileMetadata
+  fileIsLoading?: boolean
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
   const { accountId } = useWeb3()
@@ -369,7 +371,7 @@ export default function Compute({
   return (
     <>
       <div className={styles.info}>
-        <File file={file} small />
+        <File file={file} isLoading={fileIsLoading} small />
         <Price price={price} conversion />
       </div>
 

src/components/organisms/AssetActions/Consume.tsx

@@ -34,12 +34,14 @@ export default function Consume({
   ddo,
   file,
   isBalanceSufficient,
-  dtBalance
+  dtBalance,
+  fileIsLoading
 }: {
   ddo: DDO
   file: FileMetadata
   isBalanceSufficient: boolean
   dtBalance: string
+  fileIsLoading?: boolean
 }): ReactElement {
   const { accountId } = useWeb3()
   const { ocean } = useOcean()
@@ -160,7 +162,7 @@ export default function Consume({
     <aside className={styles.consume}>
       <div className={styles.info}>
         <div className={styles.filewrapper}>
-          <File file={file} />
+          <File file={file} isLoading={fileIsLoading} />
         </div>
         <div className={styles.pricewrapper}>
           <Price price={price} conversion />

src/components/organisms/AssetActions/index.tsx

@@ -1,8 +1,9 @@
 import React, { ReactElement, useState, useEffect } from 'react'
+import Permission from '../Permission'
 import styles from './index.module.css'
 import Compute from './Compute'
 import Consume from './Consume'
-import { Logger } from '@oceanprotocol/lib'
+import { Logger, File as FileMetadata, DID } from '@oceanprotocol/lib'
 import Tabs from '../../atoms/Tabs'
 import compareAsBN from '../../../utils/compareAsBN'
 import Pool from './Pool'
@@ -11,6 +12,8 @@ import { useAsset } from '../../../providers/Asset'
 import { useOcean } from '../../../providers/Ocean'
 import { useWeb3 } from '../../../providers/Web3'
 import Web3Feedback from '../../molecules/Web3Feedback'
+import { getFileInfo } from '../../../utils/provider'
+import axios from 'axios'
 
 export default function AssetActions(): ReactElement {
   const { accountId } = useWeb3()
@@ -19,8 +22,31 @@ export default function AssetActions(): ReactElement {
 
   const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>()
   const [dtBalance, setDtBalance] = useState<string>()
+  const [fileMetadata, setFileMetadata] = useState<FileMetadata>(Object)
+  const [fileIsLoading, setFileIsLoading] = useState<boolean>(false)
   const isCompute = Boolean(ddo?.findServiceByType('compute'))
 
+  useEffect(() => {
+    if (!config) return
+    const source = axios.CancelToken.source()
+    async function initFileInfo() {
+      setFileIsLoading(true)
+      try {
+        const fileInfo = await getFileInfo(
+          DID.parse(`${ddo.id}`),
+          config.providerUri,
+          source.token
+        )
+        setFileMetadata(fileInfo.data[0])
+      } catch (error) {
+        Logger.error(error.message)
+      } finally {
+        setFileIsLoading(false)
+      }
+    }
+    initFileInfo()
+  }, [config, ddo.id])
+
   // Get and set user DT balance
   useEffect(() => {
     if (!ocean || !accountId) return
@@ -56,14 +82,16 @@ export default function AssetActions(): ReactElement {
     <Compute
       dtBalance={dtBalance}
       isBalanceSufficient={isBalanceSufficient}
-      file={metadata?.main.files[0]}
+      file={fileMetadata}
+      fileIsLoading={fileIsLoading}
     />
   ) : (
     <Consume
       ddo={ddo}
       dtBalance={dtBalance}
       isBalanceSufficient={isBalanceSufficient}
-      file={metadata?.main.files[0]}
+      file={fileMetadata}
+      fileIsLoading={fileIsLoading}
     />
   )
 
@@ -88,7 +116,9 @@ export default function AssetActions(): ReactElement {
 
   return (
     <>
-      <Tabs items={tabs} className={styles.actions} />
+      <Permission eventType="consume">
+        <Tabs items={tabs} className={styles.actions} />
+      </Permission>
       {type !== 'algorithm' && (
         <Web3Feedback
           isBalanceSufficient={isBalanceSufficient}

src/components/organisms/Permission.tsx

@@ -0,0 +1,62 @@
+import React, { ReactElement, useEffect, useState } from 'react'
+import { useWeb3 } from '../../providers/Web3'
+import rbacRequest from '../../utils/rbac'
+import Alert from '../atoms/Alert'
+import Loader from '../atoms/Loader'
+import appConfig from '../../../app.config'
+
+export default function Permission({
+  eventType,
+  children
+}: {
+  eventType: string
+  children: ReactElement
+}): ReactElement {
+  const url = appConfig.rbacUrl
+  const [data, updateData] = useState<boolean | 'ERROR'>()
+  const [errorMessage, updateError] = useState<string>()
+  const [messageState, updateMessageState] =
+    useState<'error' | 'warning' | 'info' | 'success'>()
+  const { accountId } = useWeb3()
+  useEffect(() => {
+    if (url === undefined) return
+    const getData = async () => {
+      if (accountId === undefined) {
+        updateError('Please make sure your wallet is connected to proceed.')
+        updateMessageState('info')
+      } else {
+        const data = await rbacRequest(eventType, accountId)
+        updateData(data)
+        if (data === 'ERROR') {
+          updateError(
+            'There was an error verifying your permissions. Please refresh the page or conntact your network administrator'
+          )
+          updateMessageState('error')
+        } else if (data === false) {
+          updateError(
+            `Sorry, you don't have permission to ${eventType}. Please make sure you have connected your registered address.`
+          )
+          updateMessageState('warning')
+        } else if (data !== true) {
+          updateError(
+            'An unkown error occured. Please conntact your network administrator'
+          )
+          updateMessageState('error')
+        }
+      }
+    }
+    getData()
+  }, [eventType, accountId, url])
+
+  if (url === undefined || data === true) {
+    return <>{children}</>
+  }
+
+  return (
+    <>
+      <Alert text={errorMessage} state={messageState} />
+      <br />
+      <Loader />
+    </>
+  )
+}

src/components/pages/History/index.tsx

@@ -31,9 +31,17 @@ const tabs = [
 ]
 
 export default function HistoryPage(): ReactElement {
+  const url = new URL(window.location.href)
+  const defaultTab = url.searchParams.get('defaultTab')
+  let defaultTabIndex = 0
+  defaultTab === 'ComputeJobs' ? (defaultTabIndex = 4) : (defaultTabIndex = 0)
   return (
     <article className={styles.content}>
-      <Tabs items={tabs} className={styles.tabs} />
+      <Tabs
+        items={tabs}
+        className={styles.tabs}
+        defaultIndex={defaultTabIndex}
+      />
     </article>
   )
 }

src/components/pages/Home.tsx

@@ -11,6 +11,7 @@ import Button from '../atoms/Button'
 import Bookmarks from '../molecules/Bookmarks'
 import axios from 'axios'
 import { queryMetadata } from '../../utils/aquarius'
+import Permission from '../organisms/Permission'
 import { getHighestLiquidityDIDs } from '../../utils/subgraph'
 import { DDO, Logger } from '@oceanprotocol/lib'
 import { useSiteMetadata } from '../../hooks/useSiteMetadata'
@@ -132,33 +133,35 @@ export default function HomePage(): ReactElement {
   }, [chainIds])
 
   return (
-    <>
-      <Container narrow className={styles.searchWrap}>
-        <SearchBar size="large" />
-      </Container>
+    <Permission eventType="browse">
+      <>
+        <Container narrow className={styles.searchWrap}>
+          <SearchBar size="large" />
+        </Container>
 
-      <section className={styles.section}>
-        <h3>Bookmarks</h3>
-        {/* <Bookmarks /> */}
-      </section>
+        <section className={styles.section}>
+          <h3>Bookmarks</h3>
+          {/* <Bookmarks /> */}
+        </section>
+
+        {queryAndDids && (
+          <SectionQueryResult
+            title="Highest Liquidity"
+            query={queryAndDids[0]}
+            queryData={queryAndDids[1]}
+          />
+        )}
 
-      {queryAndDids && (
         <SectionQueryResult
-          title="Highest Liquidity"
-          query={queryAndDids[0]}
-          queryData={queryAndDids[1]}
+          title="Recently Published"
+          query={getQueryLatest(chainIds)}
+          action={
+            <Button style="text" to="/search?sort=created&sortOrder=desc">
+              All data sets and algorithms →
+            </Button>
+          }
         />
-      )}
-
-      <SectionQueryResult
-        title="Recently Published"
-        query={getQueryLatest(chainIds)}
-        action={
-          <Button style="text" to="/search?sort=created&sortOrder=desc">
-            All data sets and algorithms →
-          </Button>
-        }
-      />
-    </>
+      </>
+    </Permission>
   )
 }

src/components/pages/Publish/index.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement, useState, useEffect } from 'react'
+import Permission from '../../organisms/Permission'
 import { Formik, FormikState } from 'formik'
 import { usePublish } from '../../../hooks/usePublish'
 import styles from './index.module.css'
@@ -215,86 +216,92 @@ export default function PublishPage({
   }
 
   return isInPurgatory && purgatoryData ? null : (
-    <Formik
-      initialValues={
-        publishType === 'dataset' ? datasetInitialValues : algoInitialValues
-      }
-      initialStatus="empty"
-      validationSchema={
-        publishType === 'dataset' ? validationSchema : validationSchemaAlgorithm
-      }
-      onSubmit={async (values, { resetForm }) => {
-        // move user's focus to top of screen
-        window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
-        // kick off publishing
-        publishType === 'dataset'
-          ? await handleSubmit(values, resetForm)
-          : await handleAlgorithmSubmit(values, resetForm)
-      }}
-      enableReinitialize
-    >
-      {({ values }) => {
-        const tabs = [
-          {
-            title: 'Data Set',
-            content: <TabContent values={values} publishType={publishType} />
-          },
-          {
-            title: 'Algorithm',
-            content: <TabContent values={values} publishType={publishType} />
-          }
-        ]
+    <Permission eventType="publish">
+      <Formik
+        initialValues={
+          publishType === 'dataset' ? datasetInitialValues : algoInitialValues
+        }
+        initialStatus="empty"
+        validationSchema={
+          publishType === 'dataset'
+            ? validationSchema
+            : validationSchemaAlgorithm
+        }
+        onSubmit={async (values, { resetForm }) => {
+          // move user's focus to top of screen
+          window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+          // kick off publishing
+          publishType === 'dataset'
+            ? await handleSubmit(values, resetForm)
+            : await handleAlgorithmSubmit(values, resetForm)
+        }}
+        enableReinitialize
+      >
+        {({ values }) => {
+          const tabs = [
+            {
+              title: 'Data Set',
+              content: <TabContent values={values} publishType={publishType} />
+            },
+            {
+              title: 'Algorithm',
+              content: <TabContent values={values} publishType={publishType} />
+            }
+          ]
 
-        return (
-          <>
-            <Persist
-              name={
-                publishType === 'dataset'
-                  ? formNameDatasets
-                  : formNameAlgorithms
-              }
-              ignoreFields={['isSubmitting']}
-            />
-
-            {hasFeedback ? (
-              <MetadataFeedback
-                title={title}
-                error={error}
-                success={success}
-                loading={publishStepText}
-                setError={setError}
-                successAction={{
-                  name: `Go to ${
-                    publishType === 'dataset' ? 'data set' : 'algorithm'
-                  } →`,
-                  to: `/asset/${did}`
-                }}
+          return (
+            <>
+              <Persist
+                name={
+                  publishType === 'dataset'
+                    ? formNameDatasets
+                    : formNameAlgorithms
+                }
+                ignoreFields={['isSubmitting']}
               />
-            ) : (
-              <>
-                <Alert
-                  text={content.warning}
-                  state="info"
-                  className={styles.alert}
-                />
 
-                <Tabs
-                  className={styles.tabs}
-                  items={tabs}
-                  handleTabChange={(title) => {
-                    setPublishType(title.toLowerCase().replace(' ', '') as any)
-                    title === 'Algorithm'
-                      ? setdatasetInitialValues(values)
-                      : setAlgoInitialValues(values)
+              {hasFeedback ? (
+                <MetadataFeedback
+                  title={title}
+                  error={error}
+                  success={success}
+                  loading={publishStepText}
+                  setError={setError}
+                  successAction={{
+                    name: `Go to ${
+                      publishType === 'dataset' ? 'data set' : 'algorithm'
+                    } →`,
+                    to: `/asset/${did}`
                   }}
                 />
-              </>
-            )}
+              ) : (
+                <>
+                  <Alert
+                    text={content.warning}
+                    state="info"
+                    className={styles.alert}
+                  />
 
-            {debug === true && <Debug values={values} />}
-          </>
-        )
-      }}
-    </Formik>
+                  <Tabs
+                    className={styles.tabs}
+                    items={tabs}
+                    handleTabChange={(title) => {
+                      setPublishType(
+                        title.toLowerCase().replace(' ', '') as any
+                      )
+                      title === 'Algorithm'
+                        ? setdatasetInitialValues(values)
+                        : setAlgoInitialValues(values)
+                    }}
+                  />
+                </>
+              )}
+
+              {debug === true && <Debug values={values} />}
+            </>
+          )
+        }}
+      </Formik>
+    </Permission>
   )
 }

src/components/templates/Page.tsx

@@ -23,7 +23,6 @@ export default function Page({
   return (
     <>
       <Seo title={title} description={description} uri={uri} />
-
       <Container>
         {title && !noPageHeader && (
           <PageHeader

src/components/templates/Search/index.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement, useState, useEffect } from 'react'
+import Permission from '../../organisms/Permission'
 import { QueryResult } from '@oceanprotocol/lib/dist/node/metadatacache/MetadataCache'
 import SearchBar from '../../molecules/SearchBar'
 import AssetList from '../../organisms/AssetList'
@@ -62,34 +63,36 @@ export default function SearchPage({
   }
 
   return (
-    <>
-      <div className={styles.search}>
-        {(text || owner) && (
-          <SearchBar initialValue={(text || owner) as string} />
-        )}
-        <div className={styles.row}>
-          <ServiceFilter
-            serviceType={service}
-            setServiceType={setServiceType}
-          />
-          <Sort
-            sortType={sortType}
-            sortDirection={sortDirection}
-            setSortType={setSortType}
-            setSortDirection={setSortDirection}
+    <Permission eventType="browse">
+      <>
+        <div className={styles.search}>
+          {(text || owner) && (
+            <SearchBar initialValue={(text || owner) as string} />
+          )}
+          <div className={styles.row}>
+            <ServiceFilter
+              serviceType={service}
+              setServiceType={setServiceType}
+            />
+            <Sort
+              sortType={sortType}
+              sortDirection={sortDirection}
+              setSortType={setSortType}
+              setSortDirection={setSortDirection}
+            />
+          </div>
+        </div>
+        <div className={styles.results}>
+          <AssetList
+            assets={queryResult?.results}
+            showPagination
+            isLoading={loading}
+            page={queryResult?.page}
+            totalPages={queryResult?.totalPages}
+            onPageChange={setPage}
           />
         </div>
-      </div>
-      <div className={styles.results}>
-        <AssetList
-          assets={queryResult?.results}
-          showPagination
-          isLoading={loading}
-          page={queryResult?.page}
-          totalPages={queryResult?.totalPages}
-          onPageChange={setPage}
-        />
-      </div>
-    </>
+      </>
+    </Permission>
   )
 }

src/pages/asset/index.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement, useEffect, useState } from 'react'
+import Permission from '../../components/organisms/Permission'
 import { PageProps } from 'gatsby'
 import PageTemplateAssetDetails from '../../components/templates/PageAssetDetails'
 import AssetProvider from '../../providers/Asset'
@@ -12,10 +13,12 @@ export default function PageGatsbyAssetDetails(props: PageProps): ReactElement {
   }, [props.location.pathname])
 
   return (
-    <AssetProvider asset={did}>
-      <OceanProvider>
-        <PageTemplateAssetDetails uri={props.location.pathname} />
-      </OceanProvider>
-    </AssetProvider>
+    <Permission eventType="browse">
+      <AssetProvider asset={did}>
+        <OceanProvider>
+          <PageTemplateAssetDetails uri={props.location.pathname} />
+        </OceanProvider>
+      </AssetProvider>
+    </Permission>
   )
 }

src/utils/provider.ts

@@ -1,6 +1,6 @@
 import axios, { CancelToken, AxiosResponse } from 'axios'
 import { toast } from 'react-toastify'
-import { File as FileMetadata, Logger } from '@oceanprotocol/lib'
+import { DID, File as FileMetadata, Logger } from '@oceanprotocol/lib'
 
 export async function fileinfo(
   url: string,
@@ -57,3 +57,26 @@ export async function fileinfo(
     Logger.error(error.message)
   }
 }
+
+export async function getFileInfo(
+  url: string | DID,
+  providerUri: string,
+  cancelToken: CancelToken
+): Promise<AxiosResponse> {
+  let postBody
+  try {
+    if (url instanceof DID)
+      postBody = {
+        did: url.getDid(),
+        cancelToken
+      }
+    else
+      postBody = {
+        url,
+        cancelToken
+      }
+    return await axios.post(`${providerUri}/api/v1/services/fileinfo`, postBody)
+  } catch (error) {
+    Logger.error(error.message)
+  }
+}

src/utils/rbac.ts

@@ -0,0 +1,34 @@
+import fetch from 'cross-fetch'
+import appConfig from '../../app.config'
+
+export default async function rbacRequest(
+  eventType: string,
+  address: string
+): Promise<boolean | 'ERROR'> {
+  const url = appConfig.rbacUrl
+  if (url === undefined) {
+    return true
+  } else {
+    const data = {
+      component: 'market',
+      eventType,
+      authService: 'address',
+      credentials: {
+        address
+      }
+    }
+    try {
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(data)
+      })
+      return await response.json()
+    } catch (error) {
+      console.error('Error parsing json: ' + error.message)
+      return 'ERROR'
+    }
+  }
+}