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,6 +37,8 @@ export default function File({
 
   return (
     <ul className={styleClasses}>
+      {isLoading === false || isLoading === undefined ? (
+        <>
           {file.contentType || file.contentLength ? (
             <>
               <li>{cleanupContentType(file.contentType)}</li>
@@ -38,6 +51,10 @@ export default function File({
           ) : (
             <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 (
     <>
+      <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,6 +133,7 @@ export default function HomePage(): ReactElement {
   }, [chainIds])
 
   return (
+    <Permission eventType="browse">
       <>
         <Container narrow className={styles.searchWrap}>
           <SearchBar size="large" />
@@ -160,5 +162,6 @@ export default function HomePage(): ReactElement {
           }
         />
       </>
+    </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,13 +216,16 @@ export default function PublishPage({
   }
 
   return isInPurgatory && purgatoryData ? null : (
+    <Permission eventType="publish">
       <Formik
         initialValues={
           publishType === 'dataset' ? datasetInitialValues : algoInitialValues
         }
         initialStatus="empty"
         validationSchema={
-        publishType === 'dataset' ? validationSchema : validationSchemaAlgorithm
+          publishType === 'dataset'
+            ? validationSchema
+            : validationSchemaAlgorithm
         }
         onSubmit={async (values, { resetForm }) => {
           // move user's focus to top of screen
@@ -282,7 +286,9 @@ export default function PublishPage({
                     className={styles.tabs}
                     items={tabs}
                     handleTabChange={(title) => {
-                    setPublishType(title.toLowerCase().replace(' ', '') as any)
+                      setPublishType(
+                        title.toLowerCase().replace(' ', '') as any
+                      )
                       title === 'Algorithm'
                         ? setdatasetInitialValues(values)
                         : setAlgoInitialValues(values)
@@ -296,5 +302,6 @@ export default function PublishPage({
           )
         }}
       </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,6 +63,7 @@ export default function SearchPage({
   }
 
   return (
+    <Permission eventType="browse">
       <>
         <div className={styles.search}>
           {(text || owner) && (
@@ -91,5 +93,6 @@ export default function SearchPage({
           />
         </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 (
+    <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'
+    }
+  }
+}