2020-09-02 11:43:15 +02:00
|
|
|
import React, { ReactElement } from 'react'
|
2020-07-13 23:45:20 +02:00
|
|
|
import styles from './index.module.css'
|
2020-10-19 10:32:41 +02:00
|
|
|
import { useMetadata } from '@oceanprotocol/react'
|
2020-08-07 18:12:39 +02:00
|
|
|
import { DDO } from '@oceanprotocol/lib'
|
|
|
|
import Loader from '../Loader'
|
|
|
|
import Tooltip from '../Tooltip'
|
2020-08-18 19:11:52 +02:00
|
|
|
import PriceUnit from './PriceUnit'
|
2020-09-11 17:29:40 +02:00
|
|
|
import Badge from '../Badge'
|
2020-07-07 23:00:16 +02:00
|
|
|
|
2020-05-07 08:03:30 +02:00
|
|
|
export default function Price({
|
2020-08-07 18:12:39 +02:00
|
|
|
ddo,
|
2020-05-25 14:53:38 +02:00
|
|
|
className,
|
2020-08-11 07:34:32 +02:00
|
|
|
small,
|
2020-08-20 14:22:32 +02:00
|
|
|
conversion
|
2020-05-07 08:03:30 +02:00
|
|
|
}: {
|
2020-08-07 18:12:39 +02:00
|
|
|
ddo: DDO
|
2020-05-07 08:03:30 +02:00
|
|
|
className?: string
|
2020-05-25 14:53:38 +02:00
|
|
|
small?: boolean
|
2020-08-18 19:11:52 +02:00
|
|
|
conversion?: boolean
|
2020-07-07 23:00:16 +02:00
|
|
|
}): ReactElement {
|
2020-08-20 16:59:17 +02:00
|
|
|
const { price } = useMetadata(ddo)
|
2020-08-07 18:12:39 +02:00
|
|
|
|
2020-10-08 14:32:59 +02:00
|
|
|
return price?.value ? (
|
2020-09-11 17:29:40 +02:00
|
|
|
<>
|
|
|
|
<PriceUnit
|
2020-10-08 14:32:59 +02:00
|
|
|
price={`${price.value}`}
|
2020-09-11 17:29:40 +02:00
|
|
|
className={className}
|
|
|
|
small={small}
|
|
|
|
conversion={conversion}
|
|
|
|
/>
|
|
|
|
{price?.type === 'pool' && (
|
|
|
|
<Badge label="pool" className={styles.badge} />
|
|
|
|
)}
|
|
|
|
</>
|
2020-10-08 14:32:59 +02:00
|
|
|
) : !price || price?.value === 0 ? (
|
2020-08-07 18:20:08 +02:00
|
|
|
<div className={styles.empty}>
|
2020-08-07 18:12:39 +02:00
|
|
|
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..." />
|
|
|
|
)
|
2020-05-07 08:03:30 +02:00
|
|
|
}
|