Merge branch 'main' into feature/consume

package-lock.json

@@ -1246,6 +1246,11 @@
         "minimist": "^1.2.0"
       }
     },
+    "@coingecko/cryptoformat": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@coingecko/cryptoformat/-/cryptoformat-0.3.8.tgz",
+      "integrity": "sha512-nmHLzakZyFCo49qH8q19PbJIt16j2GQdPvjPZ5+roqj/y8KTDsFG9BrYvm7fpHN1xukN79XPhNMqBQN2RdZNQw=="
+    },
     "@emotion/cache": {
       "version": "10.0.29",
       "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",

package.json

@@ -19,6 +19,7 @@
     "storybook:build": "build-storybook -c .storybook -o public/storybook"
   },
   "dependencies": {
+    "@coingecko/cryptoformat": "^0.3.8",
     "@loadable/component": "^5.13.1",
     "@oceanprotocol/art": "^3.0.0",
     "@oceanprotocol/lib": "^0.1.10",

src/@types/MetaData.d.ts

@@ -22,8 +22,8 @@ export interface MetadataPublishForm {
   author: string
   license: string
   price: {
-    cost: number
     tokensToMint: number
+    type: 'simple' | 'advanced' | string
   }
   access: 'Download' | 'Compute' | string
   termsAndConditions: boolean

src/components/atoms/Loader.module.css

@@ -14,6 +14,7 @@
 }
 
 .message {
+  font-weight: var(--font-weight-base);
   font-size: var(--font-size-small);
   color: var(--brand-grey-light);
   display: block;

src/components/atoms/Price/Conversion.tsx

@@ -3,6 +3,7 @@ import useSWR from 'swr'
 import { fetchData, isBrowser } from '../../../utils'
 import styles from './Conversion.module.css'
 import classNames from 'classnames/bind'
+import { formatCurrency } from '@coingecko/cryptoformat'
 
 const cx = classNames.bind(styles)
 
@@ -34,7 +35,7 @@ export default function Conversion({
 
     const { eur } = data['ocean-protocol']
     const converted = eur * Number(price)
-    setPriceEur(`${converted.toFixed(2)}`)
+    setPriceEur(`${formatCurrency(converted, 'EUR', 'en', true)}`)
   }
 
   useEffect(() => {

src/components/atoms/Price/index.module.css

@@ -12,6 +12,6 @@
 
 .small {
   /* lazy making-conversion-smaller-with-same-markup */
-  transform: scale(0.7);
+  transform: scale(0.8);
   transform-origin: left 80%;
 }

src/components/atoms/Price/index.tsx

@@ -1,8 +1,8 @@
 import React, { ReactElement } from 'react'
-import { fromWei } from 'web3-utils'
 import classNames from 'classnames/bind'
 import PriceConversion from './Conversion'
 import styles from './index.module.css'
+import { formatCurrency } from '@coingecko/cryptoformat'
 
 const cx = classNames.bind(styles)
 
@@ -11,7 +11,7 @@ export default function Price({
   className,
   small
 }: {
-  price: string
+  price: string // expects price in OCEAN, not wei
   className?: string
   small?: boolean
 }): ReactElement {
@@ -27,7 +27,7 @@ export default function Price({
     'Free'
   ) : (
     <>
-      <span>OCEAN</span> {price}
+      <span>OCEAN</span> {formatCurrency(Number(price), '', 'en', false, true)}
       <PriceConversion price={price} />
     </>
   )

src/components/atoms/Tabs.tsx

@@ -9,16 +9,22 @@ interface TabsItem {
 
 export default function Tabs({
   items,
-  className
+  className,
+  handleTabChange
 }: {
   items: TabsItem[]
   className?: string
+  handleTabChange?: (tabName: string) => void
 }): ReactElement {
   return (
     <ReactTabs className={`${className && className}`}>
       <TabList className={styles.tabList}>
         {items.map((item) => (
-          <Tab className={styles.tab} key={item.title}>
+          <Tab
+            className={styles.tab}
+            key={item.title}
+            onClick={() => handleTabChange(item.title)}
+          >
             {item.title}
           </Tab>
         ))}

src/components/molecules/AssetTeaser.tsx

@@ -6,6 +6,7 @@ import Price from '../atoms/Price'
 import styles from './AssetTeaser.module.css'
 import { useMetadata } from '@oceanprotocol/react'
 import { DDO } from '@oceanprotocol/lib'
+import Loader from '../atoms/Loader'
 
 declare type AssetTeaserProps = {
   ddo: DDO
@@ -20,6 +21,7 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
 
   const { name } = metadata.main
   const { description } = metadata.additionalInformation
+  const isCompute = Boolean(ddo.findServiceByType('compute'))
 
   const { getBestPrice } = useMetadata(ddo.id)
   const [price, setPrice] = useState<string>()
@@ -36,9 +38,7 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
     <article className={styles.teaser}>
       <Link to={`/asset/${ddo.id}`} className={styles.link}>
         <h1 className={styles.title}>{name}</h1>
-        {/* {access === 'Compute' && (
-          <div className={styles.accessLabel}>{access}</div>
-        )} */}
+        {isCompute && <div className={styles.accessLabel}>Compute</div>}
 
         <div className={styles.content}>
           <Dotdotdot tagName="p" clamp={3}>
@@ -47,7 +47,11 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
         </div>
 
         <footer className={styles.foot}>
-          {price && <Price price={price} />}
+          {price ? (
+            <Price price={price} small />
+          ) : (
+            <Loader message="Retrieving price..." />
+          )}
         </footer>
       </Link>
     </article>

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

@@ -21,7 +21,7 @@ export default function Advanced({
   onChange: (event: ChangeEvent<HTMLInputElement>) => void
 }): ReactElement {
   const { appConfig } = useSiteMetadata()
-  const { account, balance, chainId } = useOcean()
+  const { account, balance, chainId, refreshBalance } = useOcean()
 
   const [error, setError] = useState<string>()
   const correctNetwork = isCorrectNetwork(chainId)
@@ -42,6 +42,17 @@ export default function Advanced({
     }
   }, [ocean])
 
+  // refetch balance periodically
+  useEffect(() => {
+    if (!account) return
+
+    const balanceInterval = setInterval(() => refreshBalance(), 10000) // 10 sec.
+
+    return () => {
+      clearInterval(balanceInterval)
+    }
+  }, [])
+
   return (
     <div className={stylesIndex.content}>
       <div className={styles.advanced}>

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

@@ -9,7 +9,6 @@ import { useField } from 'formik'
 export default function Price(props: InputProps): ReactElement {
   const [field, meta, helpers] = useField(props)
 
-  const cost = 1
   const weightOnDataToken = '90' // in %
   const [ocean, setOcean] = useState('1')
   const [tokensToMint, setTokensToMint] = useState<number>()
@@ -18,11 +17,17 @@ export default function Price(props: InputProps): ReactElement {
     setOcean(event.target.value)
   }
 
+  function handleTabChange(tabName: string) {
+    const type = tabName.startsWith('Simple') ? 'simple' : 'advanced'
+    helpers.setValue({ ...field.value, type })
+  }
+
   // Always update everything when ocean changes
   useEffect(() => {
     const tokensToMint = Number(ocean) * (Number(weightOnDataToken) / 10)
     setTokensToMint(tokensToMint)
-    helpers.setValue({ cost, tokensToMint })
+    console.log(field.value)
+    helpers.setValue({ ...field.value, tokensToMint })
   }, [ocean])
 
   const tabs = [
@@ -45,7 +50,7 @@ export default function Price(props: InputProps): ReactElement {
 
   return (
     <div className={styles.price}>
-      <Tabs items={tabs} />
+      <Tabs items={tabs} handleTabChange={handleTabChange} />
       <pre>
         <code>{JSON.stringify(field.value)}</code>
       </pre>

src/components/molecules/Wallet/Details.tsx

@@ -6,6 +6,7 @@ import Web3Feedback from './Feedback'
 import { getNetworkName } from '../../../utils/wallet'
 import { getInjectedProviderName } from 'web3modal'
 import Conversion from '../../atoms/Price/Conversion'
+import { formatCurrency } from '@coingecko/cryptoformat'
 
 export default function Details({ attrs }: { attrs: any }): ReactElement {
   const { balance, connect, logout, chainId } = useOcean()
@@ -15,7 +16,8 @@ export default function Details({ attrs }: { attrs: any }): ReactElement {
       <ul>
         {Object.entries(balance).map(([key, value]) => (
           <li className={styles.balance} key={key}>
-            <span>{key.toUpperCase()}</span> {value}
+            <span>{key.toUpperCase()}</span>{' '}
+            {formatCurrency(value, '', 'en', true, true)}
             {key === 'ocean' && <Conversion price={value} />}
           </li>
         ))}

src/components/molecules/Wallet/index.tsx

@@ -14,10 +14,13 @@ const animation = {
 }
 
 export default function Wallet(): ReactElement {
-  const { accountId } = useOcean()
+  const { accountId, refreshBalance } = useOcean()
   const [props, setSpring] = useSpring(() => animation.from)
 
+  // always refetch balance when popover is opened
   function onMount() {
+    accountId && refreshBalance()
+
     setSpring({
       transform: 'scale(1) translateY(0)',
       onRest: (): void => null,

src/components/organisms/AssetActions/Compute.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, ReactElement } from 'react'
 import { DDO } from '@oceanprotocol/lib'
-import { fromWei } from 'web3-utils'
 import compareAsBN, { Comparisson } from '../../../utils/compareAsBN'
 import Loader from '../../atoms/Loader'
 import Web3Feedback from '../../molecules/Wallet/Feedback'
@@ -17,7 +16,13 @@ import Button from '../../atoms/Button'
 import Input from '../../atoms/Input'
 import Alert from '../../atoms/Alert'
 
-export default function Compute({ ddo }: { ddo: DDO }): ReactElement {
+export default function Compute({
+  ddo,
+  price
+}: {
+  ddo: DDO
+  price: string // in OCEAN, not wei
+}): ReactElement {
   const { ocean } = useOcean()
   const { compute, isLoading, computeStepText, computeError } = useCompute()
   const computeService = ddo.findServiceByType('compute').attributes.main
@@ -36,7 +41,7 @@ export default function Compute({ ddo }: { ddo: DDO }): ReactElement {
   const [file, setFile] = useState(null)
   const [isTermsAgreed, setIsTermsAgreed] = useState(true)
 
-  const isFree = computeService.cost === '0'
+  const isFree = price === '0'
 
   const isComputeButtonDisabled =
     isJobStarting ||
@@ -96,7 +101,11 @@ export default function Compute({ ddo }: { ddo: DDO }): ReactElement {
 
   return (
     <div className={styles.compute}>
-      <Price price={computeService.cost} />
+      {price ? (
+        <Price price={price} />
+      ) : (
+        <Loader message="Retrieving price..." />
+      )}
 
       <div className={styles.info}>
         <div className={styles.selectType}>

src/components/organisms/AssetActions/Consume.tsx

@@ -1,5 +1,4 @@
 import React, { ReactElement } from 'react'
-import { fromWei } from 'web3-utils'
 import { toast } from 'react-toastify'
 import { File as FileMetadata, DDO } from '@oceanprotocol/lib'
 import compareAsBN, { Comparisson } from '../../../utils/compareAsBN'
@@ -13,17 +12,18 @@ import { useOcean, useConsume } from '@oceanprotocol/react'
 
 export default function Consume({
   ddo,
+  price,
   file
 }: {
   ddo: DDO
+  price: string // in OCEAN, not wei
   file: FileMetadata
 }): ReactElement {
   const accessService = ddo.findServiceByType('access')
-  const { cost } = accessService.attributes.main
   const { ocean } = useOcean()
   const { consumeStepText, consume, consumeError } = useConsume()
 
-  const isFree = cost === '0'
+  const isFree = price === '0'
   // const isBalanceSufficient =
   //  isFree || compareAsBN(balanceInOcean, fromWei(cost), Comparisson.gte)
   const isDisabled = !ocean
@@ -52,7 +52,11 @@ export default function Consume({
           <File file={file} />
         </div>
         <div className={styles.pricewrapper}>
-          {/* <Price price={cost} className={styles.price} /> */}
+          {price ? (
+            <Price price={price} />
+          ) : (
+            <Loader message="Retrieving price..." />
+          )}
           <PurchaseButton />
         </div>
       </div>

src/components/organisms/AssetActions/index.tsx

@@ -1,10 +1,11 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useState, useEffect } from 'react'
 import styles from './index.module.css'
 import Compute from './Compute'
 import Consume from './Consume'
 import { MetadataMarket } from '../../../@types/Metadata'
 import { DDO } from '@oceanprotocol/lib'
 import Tabs from '../../atoms/Tabs'
+import { useMetadata } from '@oceanprotocol/react'
 
 export default function AssetActions({
   metadata,
@@ -13,12 +14,22 @@ export default function AssetActions({
   metadata: MetadataMarket
   ddo: DDO
 }): ReactElement {
-  const { access } = metadata.additionalInformation
-  const isCompute = access && access === 'Compute'
+  const { getBestPrice } = useMetadata(ddo.id)
+  const [price, setPrice] = useState<string>()
+
+  useEffect(() => {
+    async function init() {
+      const price = await getBestPrice(ddo.dataToken)
+      price && setPrice(price)
+    }
+    init()
+  }, [])
+
+  const isCompute = Boolean(ddo.findServiceByType('compute'))
   const UseContent = isCompute ? (
-    <Compute ddo={ddo} />
+    <Compute ddo={ddo} price={price} />
   ) : (
-    <Consume ddo={ddo} file={metadata.main.files[0]} />
+    <Consume ddo={ddo} price={price} file={metadata.main.files[0]} />
   )
 
   const tabs = [

src/components/pages/Publish/index.tsx

@@ -29,14 +29,13 @@ export default function PublishPage({
     `)
 
     const metadata = transformPublishFormToMetadata(values)
-    const { cost, tokensToMint } = values.price
+    const { tokensToMint, type } = values.price
     const serviceType = values.access === 'Download' ? 'access' : 'compute'
 
     console.log(`
       Transformed metadata values:
       ----------------------
       ${JSON.stringify(metadata, null, 2)}
-      Cost: ${cost}
       Tokens to mint: ${tokensToMint}
     `)
 

src/global/_code.css

@@ -22,14 +22,11 @@ pre {
   max-height: 800px;
   width: 100%;
   position: relative;
+  white-space: pre-wrap;
 }
 
 pre code {
   padding: 0;
-  white-space: pre;
   display: block;
-  overflow-wrap: normal;
-  word-wrap: normal;
-  word-break: normal;
   width: 100%;
 }

src/models/FormPublish.ts

@@ -7,8 +7,10 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
   name: Yup.string().required('Required'),
   author: Yup.string().required('Required'),
   price: Yup.object().shape({
-    cost: Yup.number().required('Required'),
-    tokensToMint: Yup.number().required('Required')
+    tokensToMint: Yup.number().required('Required'),
+    type: Yup.string()
+      .matches(/simple|advanced/g)
+      .required('Required')
   }),
   files: Yup.array<FileMetadata>().required('Required').nullable(),
   description: Yup.string().required('Required'),
@@ -28,7 +30,7 @@ export const initialValues: MetadataPublishForm = {
   name: undefined,
   author: undefined,
   price: {
-    cost: 1,
+    type: 'simple',
     tokensToMint: 1
   },
   files: undefined,