new AssetActions component

package-lock.json

@@ -6279,6 +6279,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-tabs": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@types/react-tabs/-/react-tabs-2.3.2.tgz",
+      "integrity": "sha512-QfMelaJSdMcp+CenKhATp12XFFqqUcLXILgwpX3dgWfVYNZPtsLXZDDCRsVn+kwmBOWB+DFPKpQorxbUhnXINw==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/reactcss": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.3.tgz",
@@ -10304,6 +10313,11 @@
         "mimic-response": "^1.0.0"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -28810,6 +28824,15 @@
         "refractor": "^2.4.1"
       }
     },
+    "react-tabs": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-3.1.1.tgz",
+      "integrity": "sha512-HpySC29NN1BkzBAnOC+ajfzPbTaVZcSWzMSjk56uAhPC/rBGtli8lTysR4CfPAyEE/hfweIzagOIoJ7nu80yng==",
+      "requires": {
+        "clsx": "^1.1.0",
+        "prop-types": "^15.5.0"
+      }
+    },
     "react-test-renderer": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.13.1.tgz",

package.json

@@ -64,6 +64,7 @@
     "react-rating": "^2.0.5",
     "react-responsive-modal": "^5.0.2",
     "react-spring": "^8.0.27",
+    "react-tabs": "^3.1.1",
     "react-toastify": "^6.0.8",
     "shortid": "^2.2.15",
     "slugify": "^1.4.4",
@@ -87,6 +88,7 @@
     "@types/react-helmet": "^6.0.0",
     "@types/react-jsonschema-form": "^1.7.3",
     "@types/react-paginate": "^6.2.1",
+    "@types/react-tabs": "^2.3.2",
     "@types/shortid": "0.0.29",
     "@typescript-eslint/eslint-plugin": "^3.6.0",
     "@typescript-eslint/parser": "^3.6.0",

src/components/organisms/AssetActions/Compute.module.css

@@ -1,5 +1,4 @@
 .compute {
-  composes: box from '../atoms/Box.module.css';
   display: flex;
   flex-wrap: wrap;
 }
@@ -10,7 +9,6 @@
 
 .feedback {
   width: 100%;
-  margin-top: var(--spacer);
 }
 
 .compute button {

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

@@ -1,10 +1,10 @@
 import React from 'react'
 import Compute from './Compute'
-import ddo from '../../../tests/unit/__fixtures__/ddo'
-import web3Mock from '../../../tests/unit/__mocks__/web3'
+import ddo from '../../../../tests/unit/__fixtures__/ddo'
+import web3Mock from '../../../../tests/unit/__mocks__/web3'
 import { DDO } from '@oceanprotocol/squid'
 import oceanMock from '../../../tests/unit/__mocks__/ocean-mock'
-import { context } from '../../../tests/unit/__mocks__/web3provider'
+import { context } from '../../../../tests/unit/__mocks__/web3provider'
 
 export default {
   title: 'Organisms/Consumejob',

src/components/organisms/AssetActions/Compute.tsx

@@ -1,21 +1,21 @@
 import React, { useState, useEffect, ReactElement } from 'react'
 import { Ocean } from '@oceanprotocol/squid'
 import { fromWei } from 'web3-utils'
-import compareAsBN, { Comparisson } from '../../utils/compareAsBN'
-import Loader from '../atoms/Loader'
-import Web3Feedback from '../molecules/Wallet/Feedback'
-import Dropzone from '../atoms/Dropzone'
-import Price from '../atoms/Price'
+import compareAsBN, { Comparisson } from '../../../utils/compareAsBN'
+import Loader from '../../atoms/Loader'
+import Web3Feedback from '../../molecules/Wallet/Feedback'
+import Dropzone from '../../atoms/Dropzone'
+import Price from '../../atoms/Price'
 import {
   computeOptions,
   useCompute,
   readFileContent
 } from '@oceanprotocol/react'
 import styles from './Compute.module.css'
-import Button from '../atoms/Button'
-import Input from '../atoms/Input'
-import { MetaDataMarket } from '../../@types/MetaData'
-import { Alert } from '../atoms/Alert'
+import Button from '../../atoms/Button'
+import Input from '../../atoms/Input'
+import { MetaDataMarket } from '../../../@types/MetaData'
+import { Alert } from '../../atoms/Alert'
 
 export default function Compute({
   did,
@@ -126,7 +126,7 @@ export default function Compute({
           {/* <TermsCheckbox onChange={onCheck} /> */}
         </div>
 
-        <div className={styles.feedback}>
+        <footer className={styles.feedback}>
           {isLoading && <Loader message={computeStepText} />}
           {computeError !== undefined && (
             <Alert text={computeError} state="error" />
@@ -138,12 +138,9 @@ export default function Compute({
               state="success"
             />
           )}
-        </div>
+          <Web3Feedback isBalanceInsufficient={!isBalanceSufficient} />
+        </footer>
       </div>
-
-      <footer className={styles.feedback}>
-        <Web3Feedback isBalanceInsufficient={!isBalanceSufficient} />
-      </footer>
     </div>
   )
 }

src/components/organisms/AssetActions/Consume.module.css

@@ -1,9 +1,6 @@
 .consume {
-  composes: box from '../atoms/Box.module.css';
   display: flex;
   flex-wrap: wrap;
-  max-width: 35rem;
-  margin: auto;
 }
 
 .info {
@@ -24,11 +21,9 @@
 }
 
 .price {
-  margin-top: calc(var(--spacer) / 4);
   margin-bottom: calc(var(--spacer) / 2);
 }
 
 .feedback {
   width: 100%;
-  margin-top: calc(var(--spacer) * 1.5);
 }

src/components/organisms/AssetActions/Consume.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import Consume from './Consume'
-import ddo from '../../../tests/unit/__fixtures__/ddo'
-import web3Mock from '../../../tests/unit/__mocks__/web3'
+import ddo from '../../../../tests/unit/__fixtures__/ddo'
+import web3Mock from '../../../../tests/unit/__mocks__/web3'
 import { DDO } from '@oceanprotocol/squid'
-import { context } from '../../../tests/unit/__mocks__/web3provider'
+import { context } from '../../../../tests/unit/__mocks__/web3provider'
 
 export default {
   title: 'Organisms/Consume',

src/components/organisms/AssetActions/Consume.tsx

@@ -1,14 +1,14 @@
 import React, { ReactElement } from 'react'
 import Web3 from 'web3'
-import compareAsBN, { Comparisson } from '../../utils/compareAsBN'
-import Button from '../atoms/Button'
-import File from '../atoms/File'
-import Price from '../atoms/Price'
-import Web3Feedback from '../molecules/Wallet/Feedback'
+import compareAsBN, { Comparisson } from '../../../utils/compareAsBN'
+import Button from '../../atoms/Button'
+import File from '../../atoms/File'
+import Price from '../../atoms/Price'
+import Web3Feedback from '../../molecules/Wallet/Feedback'
 import styles from './Consume.module.css'
-import Loader from '../atoms/Loader'
+import Loader from '../../atoms/Loader'
 import { useOcean, useConsume } from '@oceanprotocol/react'
-import { MetaDataMarket } from '../../@types/MetaData'
+import { MetaDataMarket } from '../../../@types/MetaData'
 
 export default function Consume({
   did,

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

@@ -0,0 +1,32 @@
+.actions {
+  composes: box from '../../atoms/Box.module.css';
+  max-width: 35rem;
+  margin: auto;
+  padding: 0;
+}
+
+.tabList {
+  text-align: center;
+  border-bottom: 1px solid var(--brand-grey-lighter);
+  padding-top: calc(var(--spacer) / 2);
+  padding-bottom: calc(var(--spacer) / 2);
+}
+
+.tab {
+  display: inline-block;
+  padding: calc(var(--spacer) / 12) var(--spacer);
+  border-radius: var(--border-radius);
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+  cursor: pointer;
+  color: var(--brand-grey-light);
+}
+
+.tab[aria-selected='true'] {
+  background: var(--brand-black);
+  color: var(--brand-white);
+}
+
+.tabContent {
+  padding: var(--spacer);
+}

src/components/organisms/AssetActions/index.tsx

@@ -0,0 +1,43 @@
+import React, { ReactElement } from 'react'
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
+import styles from './index.module.css'
+import Compute from './Compute'
+import Consume from './Consume'
+import { useOcean } from '@oceanprotocol/react'
+import { MetaDataMarket } from '../../../@types/MetaData'
+
+export default function AssetActions({
+  metadata,
+  did
+}: {
+  metadata: MetaDataMarket
+  did: string
+}): ReactElement {
+  const { ocean, balanceInOcean } = useOcean()
+  const { access } = metadata.additionalInformation
+  const isCompute = access && access === 'Compute'
+
+  return (
+    <Tabs className={styles.actions}>
+      <TabList className={styles.tabList}>
+        <Tab className={styles.tab}>Use</Tab>
+        <Tab className={styles.tab}>Trade</Tab>
+      </TabList>
+      <div className={styles.tabContent}>
+        <TabPanel>
+          {isCompute ? (
+            <Compute
+              did={did}
+              metadata={metadata}
+              ocean={ocean}
+              balance={balanceInOcean}
+            />
+          ) : (
+            <Consume did={did} metadata={metadata} />
+          )}
+        </TabPanel>
+        <TabPanel>Trade Me</TabPanel>
+      </div>
+    </Tabs>
+  )
+}

src/components/organisms/AssetContent/index.tsx

@@ -6,10 +6,9 @@ import { Link } from 'gatsby'
 import Markdown from '../../atoms/Markdown'
 import Tags from '../../atoms/Tags'
 import MetaFull from './MetaFull'
-import Compute from '../Compute'
-import Consume from '../Consume'
 import MetaSecondary from './MetaSecondary'
 import styles from './index.module.css'
+import AssetActions from '../AssetActions'
 
 export interface AssetContentProps {
   metadata: MetaDataMarket
@@ -21,15 +20,8 @@ export default function AssetContent({
   metadata,
   did
 }: AssetContentProps): ReactElement {
-  const { ocean, balanceInOcean } = useOcean()
   const { datePublished } = metadata.main
-  const {
-    description,
-    categories,
-    tags,
-    access
-  } = metadata.additionalInformation
-  const isCompute = access && access === 'Compute'
+  const { description, categories, tags } = metadata.additionalInformation
 
   // const { curation } = metadata
 
@@ -81,16 +73,7 @@ export default function AssetContent({
       </div>
       <div>
         <div className={styles.sticky}>
-          {isCompute ? (
-            <Compute
-              did={did}
-              metadata={metadata}
-              ocean={ocean}
-              balance={balanceInOcean}
-            />
-          ) : (
-            <Consume did={did} metadata={metadata} />
-          )}
+          <AssetActions metadata={metadata} did={did} />
 
           {/* <RatingAction did={did} onVote={onVoteUpdate} /> */}
         </div>