diff --git a/package-lock.json b/package-lock.json
index 908aeb3ae..cd7f10c42 100644
--- a/package-lock.json
+++ b/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",
- "web3modal": "^1.9.7",
+ "web3": "^1.7.4",
+ "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",
- "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.1.3.tgz",
- "integrity": "sha512-+lTu3RoveuVWAYHfg5r+t3RAD4cfA0hFIc52kvCHMtbOj6RlwV6We0uq2hyv9WKqonL4z3l42cAegaxeP+FJVg==",
+ "version": "1.1.5",
+ "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.1.5.tgz",
+ "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",
- "resolved": "https://registry.npmjs.org/web3modal/-/web3modal-1.9.7.tgz",
- "integrity": "sha512-z3XfY7cV8GwGvHP3WvrSxPU6/7ocwVyiU77U/Lxoa53AUSsOKl01V8ErZ8CkJSH41C3YgzwBaOETj0rC9uFBKg==",
+ "version": "1.9.8",
+ "resolved": "https://registry.npmjs.org/web3modal/-/web3modal-1.9.8.tgz",
+ "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",
- "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.1.3.tgz",
- "integrity": "sha512-+lTu3RoveuVWAYHfg5r+t3RAD4cfA0hFIc52kvCHMtbOj6RlwV6We0uq2hyv9WKqonL4z3l42cAegaxeP+FJVg==",
+ "version": "1.1.5",
+ "resolved": "https://registry.npmjs.org/@oceanprotocol/lib/-/lib-1.1.5.tgz",
+ "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",
- "resolved": "https://registry.npmjs.org/web3modal/-/web3modal-1.9.7.tgz",
- "integrity": "sha512-z3XfY7cV8GwGvHP3WvrSxPU6/7ocwVyiU77U/Lxoa53AUSsOKl01V8ErZ8CkJSH41C3YgzwBaOETj0rC9uFBKg==",
+ "version": "1.9.8",
+ "resolved": "https://registry.npmjs.org/web3modal/-/web3modal-1.9.8.tgz",
+ "integrity": "sha512-ruYsh4TV1SUAljBW/Pd4itW2idKlo9xr/g2dKhBDdaafWNCVdpaK92cQ7EM53rg2KQHWJhqj1IThbv7cPV7ayA==",
"requires": {
"detect-browser": "^5.1.0",
"prop-types": "^15.7.2",
diff --git a/package.json b/package.json
index 49a0606a0..b9b9f4808 100644
--- a/package.json
+++ b/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",
- "web3modal": "^1.9.7",
+ "web3": "^1.7.4",
+ "web3modal": "^1.9.8",
"yup": "^0.32.11"
},
"devDependencies": {
diff --git a/src/components/@shared/atoms/Tabs/index.tsx b/src/components/@shared/atoms/Tabs/index.tsx
index 058bc5f0a..d75f94802 100644
--- a/src/components/@shared/atoms/Tabs/index.tsx
+++ b/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'
diff --git a/src/components/Asset/AssetActions/AssetStats/index.module.css b/src/components/Asset/AssetActions/AssetStats/index.module.css
new file mode 100644
index 000000000..0519db863
--- /dev/null
+++ b/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);
+}
diff --git a/src/components/Asset/AssetActions/AssetStats/index.tsx b/src/components/Asset/AssetActions/AssetStats/index.tsx
new file mode 100644
index 000000000..8a8ed8579
--- /dev/null
+++ b/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 (
+
+ )
+}
diff --git a/src/components/Asset/AssetActions/index.tsx b/src/components/Asset/AssetActions/index.tsx
index a062d4762..053680f13 100644
--- a/src/components/Asset/AssetActions/index.tsx
+++ b/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 = (
+ <>
+ {isCompute ? (
+
+ ) : (
+
+ )}
+
+
)
const tabs: TabsItem[] = [{ title: 'Use', content: UseContent }]