mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-17 09:53:26 +02:00
52 lines
973 B
TypeScript
52 lines
973 B
TypeScript
|
import React, { ReactElement } from 'react'
|
||
|
import PriceUnit from './Price/PriceUnit'
|
||
|
import styles from './UserLiquidity.module.css'
|
||
|
|
||
|
function UserLiquidityLine({
|
||
|
title,
|
||
|
amount,
|
||
|
symbol
|
||
|
}: {
|
||
|
title: string
|
||
|
amount: string
|
||
|
symbol: string
|
||
|
}) {
|
||
|
return (
|
||
|
<div>
|
||
|
<span>{title}</span>
|
||
|
<PriceUnit price={amount} symbol={symbol} small />
|
||
|
</div>
|
||
|
)
|
||
|
}
|
||
|
|
||
|
export default function UserLiquidity({
|
||
|
amount,
|
||
|
symbol,
|
||
|
amountMax,
|
||
|
titleAvailable = 'Balance',
|
||
|
titleMaximum = 'Maximum'
|
||
|
}: {
|
||
|
amount: string
|
||
|
symbol: string
|
||
|
titleAvailable?: string
|
||
|
titleMaximum?: string
|
||
|
amountMax?: string
|
||
|
}): ReactElement {
|
||
|
return (
|
||
|
<div className={styles.userLiquidity}>
|
||
|
<UserLiquidityLine
|
||
|
title={titleAvailable}
|
||
|
amount={amount}
|
||
|
symbol={symbol}
|
||
|
/>
|
||
|
{amountMax && (
|
||
|
<UserLiquidityLine
|
||
|
title={titleMaximum}
|
||
|
amount={amountMax}
|
||
|
symbol={symbol}
|
||
|
/>
|
||
|
)}
|
||
|
</div>
|
||
|
)
|
||
|
}
|