added total orders to asset details (#1556)

* added total orders to asset details

* bump ocean.js to v1.1.5, bump web3 packages

* move component, rename copy

* center asset stats for now, cleanup

* tweak no sales condition style

Co-authored-by: Matthias Kretschmann <m@kretschmann.io>

package-lock.json

@@ -13,7 +13,7 @@
         "@coingecko/cryptoformat": "^0.5.4",
         "@loadable/component": "^5.15.2",
         "@oceanprotocol/art": "^3.2.0",
-        "@oceanprotocol/lib": "^1.1.3",
+        "@oceanprotocol/lib": "^1.1.5",
         "@oceanprotocol/typographies": "^0.1.0",
         "@tippyjs/react": "^4.2.6",
         "@urql/exchange-refocus": "^0.2.5",
@@ -55,8 +55,8 @@
         "swr": "^1.3.0",
         "urql": "^2.2.1",
         "use-dark-mode": "^2.3.1",
-        "web3": "^1.7.3",
+        "web3": "^1.7.4",
-        "web3modal": "^1.9.7",
+        "web3modal": "^1.9.8",
         "yup": "^0.32.11"
       },
       "devDependencies": {
@@ -4598,9 +4598,9 @@
       "integrity": "sha512-rDCIooe1WHipLejuGhx2Wv/88SB7bWrN3+XHCWxXyPKTmmSQsgxKZPPzbIVBQ0ESChQZqGSBBJyqErqwwW4eBw=="
     },
     "node_modules/@oceanprotocol/lib": {
-      "version": "1.1.3",
+      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.1.5.tgz",
-      "integrity": "sha512-+lTu3RoveuVWAYHfg5r+t3RAD4cfA0hFIc52kvCHMtbOj6RlwV6We0uq2hyv9WKqonL4z3l42cAegaxeP+FJVg==",
+      "integrity": "sha512-quc2SGAr8G1v664ll3eOystA2v94OQleW6KGKhVWEPXDldnNAAhlG/QTi86XWRU9HmncGE7OghC5am+9DRGWcQ==",
       "dependencies": {
         "@oceanprotocol/contracts": "^1.0.0",
         "bignumber.js": "^9.0.2",
@@ -40866,9 +40866,9 @@
       }
     },
     "node_modules/web3modal": {
-      "version": "1.9.7",
+      "version": "1.9.8",
-      "resolved": "https://registry.npmjs.org/web3modal/-/web3modal-1.9.7.tgz",
+      "resolved": "https://registry.npmjs.org/web3modal/-/web3modal-1.9.8.tgz",
-      "integrity": "sha512-z3XfY7cV8GwGvHP3WvrSxPU6/7ocwVyiU77U/Lxoa53AUSsOKl01V8ErZ8CkJSH41C3YgzwBaOETj0rC9uFBKg==",
+      "integrity": "sha512-ruYsh4TV1SUAljBW/Pd4itW2idKlo9xr/g2dKhBDdaafWNCVdpaK92cQ7EM53rg2KQHWJhqj1IThbv7cPV7ayA==",
       "dependencies": {
         "detect-browser": "^5.1.0",
         "prop-types": "^15.7.2",
@@ -44931,15 +44931,16 @@
       "integrity": "sha512-rDCIooe1WHipLejuGhx2Wv/88SB7bWrN3+XHCWxXyPKTmmSQsgxKZPPzbIVBQ0ESChQZqGSBBJyqErqwwW4eBw=="
     },
     "@oceanprotocol/lib": {
-      "version": "1.1.3",
+      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.1.5.tgz",
-      "integrity": "sha512-+lTu3RoveuVWAYHfg5r+t3RAD4cfA0hFIc52kvCHMtbOj6RlwV6We0uq2hyv9WKqonL4z3l42cAegaxeP+FJVg==",
+      "integrity": "sha512-quc2SGAr8G1v664ll3eOystA2v94OQleW6KGKhVWEPXDldnNAAhlG/QTi86XWRU9HmncGE7OghC5am+9DRGWcQ==",
       "requires": {
         "@oceanprotocol/contracts": "^1.0.0",
         "bignumber.js": "^9.0.2",
         "cross-fetch": "^3.1.5",
         "crypto-js": "^4.1.1",
         "decimal.js": "^10.3.1",
+        "web3": "^1.7.4",
         "web3-core": "^1.7.1",
         "web3-eth-contract": "^1.7.1"
       }
@@ -44991,6 +44992,7 @@
       "integrity": "sha512-rmVKYEsKzurfRU0xJz+iHelbi1LGlihIWZ7Qvmb/CBz1EkhL7nOkW4SVXmG2dA5Ce0si2gr88i6q4eBOMRNJ1w==",
       "dev": true,
       "requires": {
+        "@oclif/config": "^1.18.2",
         "@oclif/errors": "^1.3.5",
         "@oclif/help": "^1.0.1",
         "@oclif/parser": "^3.8.6",
@@ -73328,9 +73330,9 @@
       }
     },
     "web3modal": {
-      "version": "1.9.7",
+      "version": "1.9.8",
-      "resolved": "https://registry.npmjs.org/web3modal/-/web3modal-1.9.7.tgz",
+      "resolved": "https://registry.npmjs.org/web3modal/-/web3modal-1.9.8.tgz",
-      "integrity": "sha512-z3XfY7cV8GwGvHP3WvrSxPU6/7ocwVyiU77U/Lxoa53AUSsOKl01V8ErZ8CkJSH41C3YgzwBaOETj0rC9uFBKg==",
+      "integrity": "sha512-ruYsh4TV1SUAljBW/Pd4itW2idKlo9xr/g2dKhBDdaafWNCVdpaK92cQ7EM53rg2KQHWJhqj1IThbv7cPV7ayA==",
       "requires": {
         "detect-browser": "^5.1.0",
         "prop-types": "^15.7.2",

package.json

@@ -25,7 +25,7 @@
     "@coingecko/cryptoformat": "^0.5.4",
     "@loadable/component": "^5.15.2",
     "@oceanprotocol/art": "^3.2.0",
-    "@oceanprotocol/lib": "^1.1.3",
+    "@oceanprotocol/lib": "^1.1.5",
     "@oceanprotocol/typographies": "^0.1.0",
     "@tippyjs/react": "^4.2.6",
     "@urql/exchange-refocus": "^0.2.5",
@@ -67,8 +67,8 @@
     "swr": "^1.3.0",
     "urql": "^2.2.1",
     "use-dark-mode": "^2.3.1",
-    "web3": "^1.7.3",
+    "web3": "^1.7.4",
-    "web3modal": "^1.9.7",
+    "web3modal": "^1.9.8",
     "yup": "^0.32.11"
   },
   "devDependencies": {

src/components/@shared/atoms/Tabs/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode, useState } from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import { Tab, Tabs as ReactTabs, TabList, TabPanel } from 'react-tabs'
 import styles from './index.module.css'
 import InputRadio from '@shared/FormInput/InputRadio'

src/components/Asset/AssetActions/AssetStats/index.module.css

@@ -0,0 +1,26 @@
+.stats {
+  border-top: 1px solid var(--border-color);
+  margin: calc(var(--spacer) / 2) calc(var(--spacer) / -2)
+    calc(var(--spacer) / -5) calc(var(--spacer) / -2);
+  margin-top: calc(var(--spacer) / 2);
+  padding: calc(var(--spacer) / 3);
+  padding-bottom: 0;
+  font-size: var(--font-size-small);
+  color: var(--color-secondary);
+  text-align: center;
+}
+
+@media (min-width: 40rem) {
+  .stats {
+    margin-bottom: calc(var(--spacer) / -1.5);
+    margin-left: calc(var(--spacer) / -1);
+    margin-right: calc(var(--spacer) / -1);
+    padding-left: var(--spacer);
+    padding-right: var(--spacer);
+  }
+}
+
+.number {
+  font-weight: var(--font-weight-bold);
+  color: var(--font-color-heading);
+}

src/components/Asset/AssetActions/AssetStats/index.tsx

@@ -0,0 +1,20 @@
+import { useAsset } from '@context/Asset'
+import React from 'react'
+import styles from './index.module.css'
+
+export default function AssetStats() {
+  const { asset } = useAsset()
+
+  return (
+    <footer className={styles.stats}>
+      {asset.stats.orders === 0 ? (
+        'No sales yet'
+      ) : (
+        <>
+          <span className={styles.number}>{asset.stats.orders}</span> sale
+          {asset.stats.orders === 1 ? '' : 's'}
+        </>
+      )}
+    </footer>
+  )
+}

src/components/Asset/AssetActions/index.tsx

@@ -18,6 +18,7 @@ import { useFormikContext } from 'formik'
 import { FormPublishData } from 'src/components/Publish/_types'
 import { AssetExtended } from 'src/@types/AssetExtended'
 import PoolProvider from '@context/Pool'
+import AssetStats from './AssetStats'
 
 export default function AssetActions({
   asset
@@ -111,21 +112,26 @@ export default function AssetActions({
     }
   }, [balance, accountId, asset?.accessDetails, dtBalance])
 
-  const UseContent = isCompute ? (
+  const UseContent = (
-    <Compute
+    <>
-      asset={asset}
+      {isCompute ? (
-      dtBalance={dtBalance}
+        <Compute
-      file={fileMetadata}
+          asset={asset}
-      fileIsLoading={fileIsLoading}
+          dtBalance={dtBalance}
-    />
+          file={fileMetadata}
-  ) : (
+          fileIsLoading={fileIsLoading}
-    <Consume
+        />
-      asset={asset}
+      ) : (
-      dtBalance={dtBalance}
+        <Consume
-      isBalanceSufficient={isBalanceSufficient}
+          asset={asset}
-      file={fileMetadata}
+          dtBalance={dtBalance}
-      fileIsLoading={fileIsLoading}
+          isBalanceSufficient={isBalanceSufficient}
-    />
+          file={fileMetadata}
+          fileIsLoading={fileIsLoading}
+        />
+      )}
+      <AssetStats />
+    </>
   )
 
   const tabs: TabsItem[] = [{ title: 'Use', content: UseContent }]