No price found{' '}
diff --git a/src/components/atoms/Tabs.tsx b/src/components/atoms/Tabs.tsx
index 62abb6012..f41aeb2db 100644
--- a/src/components/atoms/Tabs.tsx
+++ b/src/components/atoms/Tabs.tsx
@@ -23,7 +23,7 @@ export default function Tabs({
handleTabChange(item.title)}
+ onClick={handleTabChange ? () => handleTabChange(item.title) : null}
>
{item.title}
diff --git a/src/components/atoms/Tooltip.module.css b/src/components/atoms/Tooltip.module.css
index 57732f1d8..f32e2eec3 100644
--- a/src/components/atoms/Tooltip.module.css
+++ b/src/components/atoms/Tooltip.module.css
@@ -11,8 +11,8 @@
}
.icon {
- width: 15px;
- height: 15px;
+ width: 1rem;
+ height: 1rem;
cursor: help;
display: inline-block;
margin-bottom: -0.1rem;
diff --git a/src/components/molecules/AssetTeaser.tsx b/src/components/molecules/AssetTeaser.tsx
index 4decaea5f..720200bb2 100644
--- a/src/components/molecules/AssetTeaser.tsx
+++ b/src/components/molecules/AssetTeaser.tsx
@@ -1,12 +1,10 @@
-import React, { useState, useEffect } from 'react'
+import React 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'
-import Loader from '../atoms/Loader'
declare type AssetTeaserProps = {
ddo: DDO
diff --git a/src/components/molecules/Wallet/Details.tsx b/src/components/molecules/Wallet/Details.tsx
index 9009345de..149fb214a 100644
--- a/src/components/molecules/Wallet/Details.tsx
+++ b/src/components/molecules/Wallet/Details.tsx
@@ -17,7 +17,7 @@ export default function Details(): ReactElement {
{Object.entries(balance).map(([key, value]) => (
{key.toUpperCase()}{' '}
- {formatCurrency(value, '', 'en', true, true)}
+ {formatCurrency(value, '', undefined, true, true)}
{key === 'ocean' && }
))}
diff --git a/src/components/organisms/AssetActions/Compute.tsx b/src/components/organisms/AssetActions/Compute.tsx
index 0d593c6e6..5792a12b7 100644
--- a/src/components/organisms/AssetActions/Compute.tsx
+++ b/src/components/organisms/AssetActions/Compute.tsx
@@ -17,12 +17,10 @@ import Alert from '../../atoms/Alert'
export default function Compute({
ddo,
- isBalanceSufficient,
- setPrice
+ isBalanceSufficient
}: {
ddo: DDO
isBalanceSufficient: boolean
- setPrice: (price: string) => void
}): ReactElement {
const { ocean } = useOcean()
const { compute, isLoading, computeStepText, computeError } = useCompute()
@@ -89,7 +87,7 @@ export default function Compute({
return (
-
+
diff --git a/src/components/organisms/AssetActions/Consume.tsx b/src/components/organisms/AssetActions/Consume.tsx
index 64018fe58..fb94fd154 100644
--- a/src/components/organisms/AssetActions/Consume.tsx
+++ b/src/components/organisms/AssetActions/Consume.tsx
@@ -12,13 +12,11 @@ import { useOcean, useConsume } from '@oceanprotocol/react'
export default function Consume({
ddo,
file,
- isBalanceSufficient,
- setPrice
+ isBalanceSufficient
}: {
ddo: DDO
file: FileMetadata
isBalanceSufficient: boolean
- setPrice: (price: string) => void
}): ReactElement {
const { ocean } = useOcean()
const { consumeStepText, consume, consumeError } = useConsume()
@@ -49,7 +47,7 @@ export default function Consume({
diff --git a/src/components/organisms/AssetActions/Pool/Actions.module.css b/src/components/organisms/AssetActions/Pool/Actions.module.css
new file mode 100644
index 000000000..225705529
--- /dev/null
+++ b/src/components/organisms/AssetActions/Pool/Actions.module.css
@@ -0,0 +1,17 @@
+.actions {
+ margin-left: -2rem;
+ margin-right: -2rem;
+ padding-left: var(--spacer);
+ padding-right: var(--spacer);
+ margin-top: calc(var(--spacer) / 2);
+ padding-top: calc(var(--spacer) / 1.5);
+ border-top: 1px solid var(--brand-grey-lighter);
+ text-align: center;
+ display: flex;
+ justify-content: center;
+}
+
+.actions button {
+ margin-left: calc(var(--spacer) / 4);
+ margin-right: calc(var(--spacer) / 4);
+}
diff --git a/src/components/organisms/AssetActions/Pool/Actions.tsx b/src/components/organisms/AssetActions/Pool/Actions.tsx
new file mode 100644
index 000000000..20a3ff32e
--- /dev/null
+++ b/src/components/organisms/AssetActions/Pool/Actions.tsx
@@ -0,0 +1,32 @@
+import React, { ReactElement } from 'react'
+import Loader from '../../../atoms/Loader'
+import Button from '../../../atoms/Button'
+import Alert from '../../../atoms/Alert'
+import styles from './Actions.module.css'
+
+export default function Actions({
+ isLoading,
+ loaderMessage,
+ txId,
+ actionName,
+ action
+}: {
+ isLoading: boolean
+ loaderMessage: string
+ txId: string
+ actionName: string
+ action: () => void
+}): ReactElement {
+ return (
+
+ {isLoading ? (
+
+ ) : (
+
+ )}
+ {txId &&
}
+
+ )
+}
diff --git a/src/components/organisms/AssetActions/Pool/Add.module.css b/src/components/organisms/AssetActions/Pool/Add.module.css
new file mode 100644
index 000000000..b3c39e4ce
--- /dev/null
+++ b/src/components/organisms/AssetActions/Pool/Add.module.css
@@ -0,0 +1,30 @@
+.add {
+}
+
+.addInput {
+ max-width: 12rem;
+ margin: 0 auto var(--spacer) auto;
+}
+
+.userBalance {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: var(--font-size-mini);
+ margin-bottom: calc(var(--spacer) / 4);
+ color: var(--color-secondary);
+}
+
+.userBalance span + div {
+ transform: scale(0.7);
+ transform-origin: right center;
+}
+
+.output {
+ text-align: center;
+}
+
+.output p {
+ font-weight: var(--font-weight-bold);
+ margin-bottom: calc(var(--spacer) / 4);
+}
diff --git a/src/components/organisms/AssetActions/Pool/Add.tsx b/src/components/organisms/AssetActions/Pool/Add.tsx
new file mode 100644
index 000000000..68e7ad0b2
--- /dev/null
+++ b/src/components/organisms/AssetActions/Pool/Add.tsx
@@ -0,0 +1,95 @@
+import React, { ReactElement, useState, ChangeEvent } from 'react'
+import styles from './Add.module.css'
+import { useOcean } from '@oceanprotocol/react'
+import Header from './Header'
+import { toast } from 'react-toastify'
+import InputElement from '../../../atoms/Input/InputElement'
+import Token from './Token'
+import { Balance } from './'
+import PriceUnit from '../../../atoms/Price/PriceUnit'
+import Actions from './Actions'
+
+// TODO: handle and display all fees somehow
+
+export default function Add({
+ setShowAdd,
+ poolAddress,
+ totalPoolTokens,
+ totalBalance
+}: {
+ setShowAdd: (show: boolean) => void
+ poolAddress: string
+ totalPoolTokens: string
+ totalBalance: Balance
+}): ReactElement {
+ const { ocean, accountId, balance } = useOcean()
+ const [amount, setAmount] = useState('')
+ const [txId, setTxId] = useState
('')
+ const [isLoading, setIsLoading] = useState()
+
+ const newPoolTokens =
+ totalBalance &&
+ ((Number(amount) / Number(totalBalance.ocean)) * 100).toFixed(2)
+
+ const newPoolShare =
+ totalBalance &&
+ ((Number(newPoolTokens) / Number(totalPoolTokens)) * 100).toFixed(2)
+
+ async function handleAddLiquidity() {
+ setIsLoading(true)
+
+ try {
+ const result = await ocean.pool.addOceanLiquidity(
+ accountId,
+ poolAddress,
+ amount
+ )
+ setTxId(result.transactionHash)
+ } catch (error) {
+ console.error(error.message)
+ toast.error(error.message)
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ function handleAmountChange(e: ChangeEvent) {
+ setAmount(e.target.value)
+ }
+
+ return (
+
+
setShowAdd(false)} />
+
+
+
+
+
+
+
+
={' '}
+
+
+
+
+
+ Pool
+
+
+ Data Token
+
+
+
+
+
+ Your Liquidity
+
+
+
+
+
+
+
+
+
+
Pool Statistics
+
+
+
+
+
+
+
+ {hasAddedLiquidity && (
+
+ )}
+
+
+ )}
+
+ )
+}
diff --git a/src/components/organisms/AssetActions/index.tsx b/src/components/organisms/AssetActions/index.tsx
index 0c19746ca..5929af9c5 100644
--- a/src/components/organisms/AssetActions/index.tsx
+++ b/src/components/organisms/AssetActions/index.tsx
@@ -2,24 +2,20 @@ 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 { useOcean } from '@oceanprotocol/react'
+import { useOcean, useMetadata } from '@oceanprotocol/react'
import compareAsBN from '../../../utils/compareAsBN'
+import Pool from './Pool'
-export default function AssetActions({
- metadata,
- ddo
-}: {
- metadata: MetadataMarket
- ddo: DDO
-}): ReactElement {
+export default function AssetActions({ ddo }: { ddo: DDO }): ReactElement {
const { balance } = useOcean()
- const [price, setPrice] = useState()
+ const { price } = useMetadata(ddo)
const [isBalanceSufficient, setIsBalanceSufficient] = useState()
const isCompute = Boolean(ddo.findServiceByType('compute'))
+ const { attributes } = ddo.findServiceByType('metadata')
+ const { priceType } = attributes.additionalInformation
// Check user balance against price
useEffect(() => {
@@ -34,17 +30,12 @@ export default function AssetActions({
}, [balance, price])
const UseContent = isCompute ? (
-
+
) : (
)
@@ -53,9 +44,9 @@ export default function AssetActions({
title: 'Use',
content: UseContent
},
- {
- title: 'Trade',
- content: 'Trade Me'
+ (!priceType || priceType === 'advanced') && {
+ title: 'Pool',
+ content:
}
]
diff --git a/src/components/organisms/AssetContent/MetaFull.module.css b/src/components/organisms/AssetContent/MetaFull.module.css
index 031bdc90e..0f91d82dc 100644
--- a/src/components/organisms/AssetContent/MetaFull.module.css
+++ b/src/components/organisms/AssetContent/MetaFull.module.css
@@ -14,10 +14,3 @@
word-break: break-all;
padding: 0;
}
-
-.metaFull svg {
- width: var(--font-size-mini);
- height: var(--font-size-mini);
- display: inline-block;
- fill: currentColor;
-}
diff --git a/src/components/organisms/AssetContent/MetaFull.tsx b/src/components/organisms/AssetContent/MetaFull.tsx
index bedc80ea4..68d37e99a 100644
--- a/src/components/organisms/AssetContent/MetaFull.tsx
+++ b/src/components/organisms/AssetContent/MetaFull.tsx
@@ -4,7 +4,7 @@ import MetaItem from './MetaItem'
import styles from './MetaFull.module.css'
import { MetadataMarket } from '../../../@types/Metadata'
import { DDO } from '@oceanprotocol/lib'
-import { ReactComponent as External } from '../../../images/external.svg'
+import EtherscanLink from '../../atoms/EtherscanLink'
export default function MetaFull({
ddo,
@@ -32,18 +32,11 @@ export default function MetaFull({
{id}} />
-
- {dataToken}
-
-
+
+ {dataToken}
+
}
/>
diff --git a/src/components/organisms/AssetContent/index.module.css b/src/components/organisms/AssetContent/index.module.css
index 53dc15e45..aed5069f6 100644
--- a/src/components/organisms/AssetContent/index.module.css
+++ b/src/components/organisms/AssetContent/index.module.css
@@ -1,6 +1,6 @@
.grid {
display: grid;
- gap: calc(var(--spacer) * 2);
+ gap: calc(var(--spacer) * 1.5);
position: relative;
margin-top: -1.5rem;
}
diff --git a/src/components/organisms/AssetContent/index.tsx b/src/components/organisms/AssetContent/index.tsx
index 46c197a9a..c649eeaca 100644
--- a/src/components/organisms/AssetContent/index.tsx
+++ b/src/components/organisms/AssetContent/index.tsx
@@ -58,7 +58,7 @@ export default function AssetContent({