Merge branch 'main' into feature/consume

package.json

@@ -5,7 +5,7 @@
   "license": "Apache-2.0",
   "homepage": "https://oceanprotocol.com",
   "scripts": {
-    "start": "gatsby clean && gatsby develop --host 0.0.0.0",
+    "start": "gatsby develop --host 0.0.0.0",
     "build": "gatsby clean && gatsby build",
     "serve": "serve -s public/",
     "jest": "NODE_ENV=test jest -c tests/unit/jest.config.js",
@@ -38,7 +38,7 @@
     "filesize": "^6.1.0",
     "formik": "^2.1.5",
     "formik-persist": "^1.1.0",
-    "gatsby": "^2.24.24",
+    "gatsby": "^2.24.27",
     "gatsby-image": "^2.4.14",
     "gatsby-plugin-manifest": "^2.4.21",
     "gatsby-plugin-react-helmet": "^3.3.10",
@@ -70,23 +70,23 @@
     "shortid": "^2.2.15",
     "slugify": "^1.4.5",
     "swr": "^0.3.0",
-    "yup": "^0.29.2"
+    "yup": "^0.29.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.0",
+    "@babel/core": "^7.11.1",
     "@babel/preset-typescript": "^7.10.1",
-    "@storybook/addon-actions": "^6.0.0-rc.24",
-    "@storybook/addon-storyshots": "^6.0.0-rc.24",
-    "@storybook/react": "^6.0.0-rc.24",
+    "@storybook/addon-actions": "^6.0.0-rc.26",
+    "@storybook/addon-storyshots": "^6.0.0-rc.26",
+    "@storybook/react": "^6.0.0-rc.26",
     "@svgr/webpack": "^5.4.0",
     "@testing-library/jest-dom": "^5.11.2",
-    "@testing-library/react": "^10.4.7",
+    "@testing-library/react": "^10.4.8",
     "@types/jest": "^26.0.8",
     "@types/loadable__component": "^5.13.0",
     "@types/node": "^14.0.27",
     "@types/react": "^16.9.44",
     "@types/react-datepicker": "^3.1.1",
-    "@types/react-helmet": "^6.0.0",
+    "@types/react-helmet": "^6.1.0",
     "@types/react-paginate": "^6.2.1",
     "@types/react-tabs": "^2.3.2",
     "@types/shortid": "0.0.29",

src/components/atoms/Input/InputElement.tsx

@@ -6,26 +6,17 @@ import FilesInput from '../../molecules/FormFields/FilesInput'
 import Terms from '../../molecules/FormFields/Terms'
 import Price from '../../molecules/FormFields/Price'
 
-const DefaultInput = (
-  { name, type }: { name: string; type?: string },
-  props: InputProps
-) => (
-  <input
-    id={name}
-    className={styles.input}
-    name={name}
-    {...props}
-    type={type || 'text'}
-  />
+const DefaultInput = (props: InputProps) => (
+  <input className={styles.input} id={props.name} {...props} />
 )
 
 export default function InputElement(props: InputProps): ReactElement {
-  const { type, options, rows, name, prefix, postfix } = props
+  const { type, options, name, prefix, postfix } = props
 
   switch (type) {
     case 'select':
       return (
-        <select id={name} className={styles.select} name={name} {...props}>
+        <select id={name} className={styles.select} {...props}>
           <option value="">---</option>
           {options &&
             options
@@ -38,15 +29,7 @@ export default function InputElement(props: InputProps): ReactElement {
         </select>
       )
     case 'textarea':
-      return (
-        <textarea
-          id={name}
-          className={styles.input}
-          rows={rows}
-          name={name}
-          {...props}
-        />
-      )
+      return <textarea id={name} className={styles.input} {...props} />
     case 'radio':
     case 'checkbox':
       return (
@@ -58,7 +41,6 @@ export default function InputElement(props: InputProps): ReactElement {
                   className={styles.radio}
                   id={slugify(option)}
                   type={type}
-                  name={name}
                   {...props}
                 />
                 <label className={styles.radioLabel} htmlFor={slugify(option)}>
@@ -69,20 +51,20 @@ export default function InputElement(props: InputProps): ReactElement {
         </div>
       )
     case 'files':
-      return <FilesInput name={name} {...props} />
+      return <FilesInput {...props} />
     case 'price':
-      return <Price name={name} {...props} />
+      return <Price {...props} />
     case 'terms':
-      return <Terms name={name} {...props} />
+      return <Terms {...props} />
     default:
       return prefix || postfix ? (
         <div className={`${prefix ? styles.prefixGroup : styles.postfixGroup}`}>
           {prefix && <div className={styles.prefix}>{prefix}</div>}
-          <DefaultInput name={name} type={type || 'text'} />
+          <DefaultInput type={type || 'text'} {...props} />
           {postfix && <div className={styles.postfix}>{postfix}</div>}
         </div>
       ) : (
-        <DefaultInput name={name} type={type || 'text'} />
+        <DefaultInput type={type || 'text'} {...props} />
       )
   }
 }

src/components/molecules/AssetTeaser.tsx

@@ -1,31 +1,44 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { Link } from 'gatsby'
 import Dotdotdot from 'react-dotdotdot'
 import { MetadataMarket } from '../../@types/Metadata'
 import Price from '../atoms/Price'
 import styles from './AssetTeaser.module.css'
+import { useMetadata } from '@oceanprotocol/react'
+import { DDO } from '@oceanprotocol/lib'
 
 declare type AssetTeaserProps = {
-  did: string
+  ddo: DDO
   metadata: MetadataMarket
 }
 
 const AssetTeaser: React.FC<AssetTeaserProps> = ({
-  did,
+  ddo,
   metadata
 }: AssetTeaserProps) => {
   if (!metadata.additionalInformation) return null
 
   const { name } = metadata.main
-  const { description, access } = metadata.additionalInformation
+  const { description } = metadata.additionalInformation
+
+  const { getBestPrice } = useMetadata(ddo.id)
+  const [price, setPrice] = useState<string>()
+
+  useEffect(() => {
+    async function init() {
+      const price = await getBestPrice(ddo.dataToken)
+      price && setPrice(price)
+    }
+    init()
+  }, [])
 
   return (
     <article className={styles.teaser}>
-      <Link to={`/asset/${did}`} className={styles.link}>
+      <Link to={`/asset/${ddo.id}`} className={styles.link}>
         <h1 className={styles.title}>{name}</h1>
-        {access === 'Compute' && (
+        {/* {access === 'Compute' && (
           <div className={styles.accessLabel}>{access}</div>
-        )}
+        )} */}
 
         <div className={styles.content}>
           <Dotdotdot tagName="p" clamp={3}>
@@ -33,7 +46,9 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
           </Dotdotdot>
         </div>
 
-        <footer className={styles.foot}>{/* <Price price={price} /> */}</footer>
+        <footer className={styles.foot}>
+          {price && <Price price={price} />}
+        </footer>
       </Link>
     </article>
   )

src/components/molecules/FormFields/Price/Simple.tsx

@@ -21,7 +21,7 @@ export default function Simple({
           this data set, worth the entered amount of OCEAN will be created.
         </FormHelp>
 
-        <form className={styles.form}>
+        <div className={styles.form}>
           <Label htmlFor="ocean">Ocean Tokens</Label>
 
           <InputElement
@@ -33,7 +33,7 @@ export default function Simple({
           />
 
           <Conversion price={ocean} className={stylesIndex.conversion} />
-        </form>
+        </div>
       </div>
     </div>
   )

src/components/organisms/AssetList.tsx

@@ -50,9 +50,7 @@ const AssetList: React.FC<AssetListProps> = ({ queryResult }) => {
               'metadata'
             )
 
-            return (
-              <AssetTeaser did={ddo.id} metadata={attributes} key={ddo.id} />
-            )
+            return <AssetTeaser ddo={ddo} metadata={attributes} key={ddo.id} />
           })
         ) : (
           <div className={styles.empty}>