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'
|
2021-10-18 20:44:33 +02:00
|
|
|
import Loader from '../atoms/Loader'
|
|
|
|
import Tooltip from '../atoms/Tooltip'
|
2020-08-18 19:11:52 +02:00
|
|
|
import PriceUnit from './PriceUnit'
|
2022-02-14 17:27:36 +01:00
|
|
|
import { AccessDetails, OrderPriceAndFees } from 'src/@types/Price'
|
2020-07-07 23:00:16 +02:00
|
|
|
|
2020-05-07 08:03:30 +02:00
|
|
|
export default function Price({
|
2022-02-03 12:29:39 +01:00
|
|
|
accessDetails,
|
2022-02-14 17:27:36 +01:00
|
|
|
orderPriceAndFees,
|
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
|
|
|
}: {
|
2022-02-03 12:29:39 +01:00
|
|
|
accessDetails: AccessDetails
|
2022-02-14 17:27:36 +01:00
|
|
|
orderPriceAndFees?: OrderPriceAndFees
|
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 {
|
2022-02-03 12:29:39 +01:00
|
|
|
return accessDetails?.price || accessDetails?.type === 'free' ? (
|
2020-10-30 14:10:21 +01:00
|
|
|
<PriceUnit
|
2022-02-14 17:27:36 +01:00
|
|
|
price={`${orderPriceAndFees?.price || accessDetails?.price}`}
|
2022-02-03 12:29:39 +01:00
|
|
|
symbol={accessDetails.baseToken?.symbol}
|
2020-10-30 14:10:21 +01:00
|
|
|
className={className}
|
|
|
|
small={small}
|
|
|
|
conversion={conversion}
|
2022-02-03 12:29:39 +01:00
|
|
|
type={accessDetails.type}
|
2020-10-30 14:10:21 +01:00
|
|
|
/>
|
2022-02-03 12:29:39 +01:00
|
|
|
) : !accessDetails || accessDetails?.type === '' ? (
|
2020-08-07 18:20:08 +02:00
|
|
|
<div className={styles.empty}>
|
2021-03-01 16:08:50 +01:00
|
|
|
No price set{' '}
|
2021-03-01 16:24:55 +01:00
|
|
|
<Tooltip content="No pricing mechanism has been set on this asset yet." />
|
2020-08-07 18:12:39 +02:00
|
|
|
</div>
|
|
|
|
) : (
|
2021-04-15 13:47:32 +02:00
|
|
|
// TODO: Hacky hack, put back some check for low liquidity
|
|
|
|
// ) : price.isConsumable !== 'true' ? (
|
|
|
|
// <div className={styles.empty}>
|
|
|
|
// Low liquidity{' '}
|
|
|
|
// <Tooltip content="This pool does not have enough liquidity for using this data set." />
|
|
|
|
// </div>
|
2020-08-07 18:12:39 +02:00
|
|
|
<Loader message="Retrieving price..." />
|
|
|
|
)
|
2020-05-07 08:03:30 +02:00
|
|
|
}
|