1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00

refactor price component

This commit is contained in:
Matthias Kretschmann 2020-08-07 18:12:39 +02:00
parent a142509a6f
commit 76e14be730
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 48 additions and 75 deletions

View File

@ -2,6 +2,7 @@
font-weight: var(--font-weight-bold);
font-size: var(--font-size-large);
color: var(--brand-grey-dark);
line-height: 1;
}
.price span:first-child {

View File

@ -1,20 +1,35 @@
import React, { ReactElement } from 'react'
import React, { ReactElement, useState, useEffect } from 'react'
import classNames from 'classnames/bind'
import PriceConversion from './Conversion'
import styles from './index.module.css'
import { formatCurrency } from '@coingecko/cryptoformat'
import { useMetadata } from '@oceanprotocol/react'
import { DDO } from '@oceanprotocol/lib'
import Loader from '../Loader'
import Tooltip from '../Tooltip'
const cx = classNames.bind(styles)
export default function Price({
price,
ddo,
className,
small
}: {
price: string // expects price in OCEAN, not wei
ddo: DDO
className?: string
small?: boolean
}): ReactElement {
const { getBestPrice } = useMetadata(ddo.id)
const [price, setPrice] = useState<string>()
useEffect(() => {
async function init() {
const price = await getBestPrice(ddo.dataToken)
setPrice(price)
}
init()
}, [])
const styleClasses = cx({
price: true,
small: small,
@ -32,5 +47,14 @@ export default function Price({
</>
)
return <div className={styleClasses}>{displayPrice}</div>
return price ? (
<div className={styleClasses}>{displayPrice}</div>
) : price === '' ? (
<div>
No price found{' '}
<Tooltip content="We could not find a pool for this data set, which can have multiple reasons. Is your wallet connected to the correct network?" />
</div>
) : (
<Loader message="Retrieving price..." />
)
}

View File

@ -23,17 +23,6 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
const { description } = metadata.additionalInformation
const isCompute = Boolean(ddo.findServiceByType('compute'))
const { getBestPrice } = useMetadata(ddo.id)
const [price, setPrice] = useState<string>()
useEffect(() => {
async function init() {
const price = await getBestPrice(ddo.dataToken)
setPrice(price)
}
init()
}, [])
return (
<article className={styles.teaser}>
<Link to={`/asset/${ddo.id}`} className={styles.link}>
@ -47,13 +36,7 @@ const AssetTeaser: React.FC<AssetTeaserProps> = ({
</div>
<footer className={styles.foot}>
{price ? (
<Price price={price} small />
) : price === '' ? (
'No price found'
) : (
<Loader message="Retrieving price..." />
)}
<Price ddo={ddo} small />
</footer>
</Link>
</article>

View File

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

View File

@ -12,16 +12,18 @@
flex-shrink: 0;
}
.consume button {
margin-left: calc(var(--spacer) / 4);
.pricewrapper {
display: flex;
flex-wrap: wrap;
}
.consume button:first-of-type {
margin-left: 0;
.pricewrapper button {
margin-top: calc(var(--spacer) / 2);
align-self: flex-end;
}
.price {
margin-bottom: calc(var(--spacer) / 2);
.pricewrapper > div {
min-height: 30px;
}
.feedback {

View File

@ -1,7 +1,6 @@
import React, { ReactElement } from 'react'
import { toast } from 'react-toastify'
import { File as FileMetadata, DDO } from '@oceanprotocol/lib'
import compareAsBN, { Comparisson } from '../../../utils/compareAsBN'
import Button from '../../atoms/Button'
import File from '../../atoms/File'
import Price from '../../atoms/Price'
@ -12,20 +11,13 @@ 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 { ocean } = useOcean()
const { consumeStepText, consume, consumeError } = useConsume()
const isFree = price === '0'
// const isBalanceSufficient =
// isFree || compareAsBN(balanceInOcean, fromWei(cost), Comparisson.gte)
const isDisabled = !ocean
if (consumeError) {
@ -41,7 +33,7 @@ export default function Consume({
onClick={() => consume(ddo.id, ddo.dataToken, 'access')}
disabled={isDisabled}
>
{isFree ? 'Download' : 'Buy'}
Buy
</Button>
)
@ -52,13 +44,7 @@ export default function Consume({
<File file={file} />
</div>
<div className={styles.pricewrapper}>
{price ? (
<Price price={price} small />
) : price === '' ? (
'No price found'
) : (
<Loader message="Retrieving price..." />
)}
<Price ddo={ddo} />
<PurchaseButton />
</div>
</div>

View File

@ -1,11 +1,10 @@
import React, { ReactElement, useState, useEffect } from 'react'
import React, { ReactElement } 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,
@ -14,22 +13,12 @@ export default function AssetActions({
metadata: MetadataMarket
ddo: DDO
}): ReactElement {
const { getBestPrice } = useMetadata(ddo.id)
const [price, setPrice] = useState<string>()
useEffect(() => {
async function init() {
const price = await getBestPrice(ddo.dataToken)
setPrice(price)
}
init()
}, [])
const isCompute = Boolean(ddo.findServiceByType('compute'))
const UseContent = isCompute ? (
<Compute ddo={ddo} price={price} />
<Compute ddo={ddo} />
) : (
<Consume ddo={ddo} price={price} file={metadata.main.files[0]} />
<Consume ddo={ddo} file={metadata.main.files[0]} />
)
const tabs = [