2020-07-07 23:00:16 +02:00
|
|
|
import React, { ReactElement } from 'react'
|
|
|
|
import classNames from 'classnames/bind'
|
2020-07-13 23:45:20 +02:00
|
|
|
import PriceConversion from './Conversion'
|
|
|
|
import styles from './index.module.css'
|
2020-05-07 08:03:30 +02:00
|
|
|
|
2020-07-07 23:00:16 +02:00
|
|
|
const cx = classNames.bind(styles)
|
|
|
|
|
2020-05-07 08:03:30 +02:00
|
|
|
export default function Price({
|
|
|
|
price,
|
2020-05-25 14:53:38 +02:00
|
|
|
className,
|
|
|
|
small
|
2020-05-07 08:03:30 +02:00
|
|
|
}: {
|
2020-08-05 13:11:39 +02:00
|
|
|
price: string // expects price in OCEAN, not wei
|
2020-05-07 08:03:30 +02:00
|
|
|
className?: string
|
2020-05-25 14:53:38 +02:00
|
|
|
small?: boolean
|
2020-07-07 23:00:16 +02:00
|
|
|
}): ReactElement {
|
|
|
|
const styleClasses = cx({
|
|
|
|
price: true,
|
|
|
|
small: small,
|
|
|
|
[className]: className
|
|
|
|
})
|
|
|
|
|
2020-05-07 08:03:30 +02:00
|
|
|
const isFree = price === '0'
|
2020-07-07 23:00:16 +02:00
|
|
|
|
2020-05-07 08:03:30 +02:00
|
|
|
const displayPrice = isFree ? (
|
|
|
|
'Free'
|
|
|
|
) : (
|
|
|
|
<>
|
2020-08-05 13:11:39 +02:00
|
|
|
<span>OCEAN</span> {price}
|
|
|
|
<PriceConversion price={price} />
|
2020-05-07 08:03:30 +02:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
|
2020-07-07 23:00:16 +02:00
|
|
|
return <div className={styleClasses}>{displayPrice}</div>
|
2020-05-07 08:03:30 +02:00
|
|
|
}
|