55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import React, { ReactElement } from 'react'
|
|
import styles from './Coin.module.css'
|
|
import InputElement from '@shared/FormInput/InputElement'
|
|
import Logo from '@images/logo.svg'
|
|
import Conversion from '@shared/Price/Conversion'
|
|
import { DataTokenOptions } from '@utils/datatokens'
|
|
import { useField } from 'formik'
|
|
import Error from './Error'
|
|
|
|
export default function Coin({
|
|
datatokenOptions,
|
|
name,
|
|
weight,
|
|
readOnly
|
|
}: {
|
|
datatokenOptions: DataTokenOptions
|
|
name: string
|
|
weight: string
|
|
readOnly?: boolean
|
|
}): ReactElement {
|
|
const [field, meta] = useField(`pricing.${name}`)
|
|
|
|
return (
|
|
<div className={styles.coin}>
|
|
<figure className={styles.icon}>
|
|
<Logo />
|
|
</figure>
|
|
|
|
<h4 className={styles.tokenName}>
|
|
{datatokenOptions?.name || 'Data Token'}
|
|
</h4>
|
|
|
|
<div className={styles.weight}>
|
|
Weight <strong>{weight}</strong>
|
|
</div>
|
|
|
|
<div className={styles.data}>
|
|
<InputElement
|
|
type="number"
|
|
readOnly={readOnly}
|
|
prefix={datatokenOptions?.symbol || 'DT'}
|
|
min="1"
|
|
name={name}
|
|
value={field.value}
|
|
{...field}
|
|
/>
|
|
{datatokenOptions?.symbol === 'OCEAN' && (
|
|
<Conversion price={field.value} />
|
|
)}
|
|
<Error meta={meta} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|