697e83b7cb
* added correct resolving of account positions * solve rendering bug for lp amount * bugfix: add slippage to minlpamount * fix DisplayCurrency to accept only BNCoin * bugfix: remove prices from store * add basic depostied vaults table * Farm: Added deposited table * finish deposited table, remove featured vaults:
110 lines
3.2 KiB
TypeScript
110 lines
3.2 KiB
TypeScript
import classNames from 'classnames'
|
|
|
|
import DisplayCurrency from 'components/DisplayCurrency'
|
|
import { ChevronDown } from 'components/Icons'
|
|
import Text from 'components/Text'
|
|
import { ASSETS } from 'constants/assets'
|
|
import { formatValue } from 'utils/formatters'
|
|
import AssetImage from 'components/AssetImage'
|
|
import { BNCoin } from 'types/classes/BNCoin'
|
|
|
|
interface Props extends Option {
|
|
isSelected?: boolean
|
|
isDisplay?: boolean
|
|
isClicked?: boolean
|
|
onClick?: (value: string) => void
|
|
}
|
|
|
|
export default function Option(props: Props) {
|
|
const isCoin = !!props.denom
|
|
|
|
if (isCoin) {
|
|
const asset = ASSETS.find((asset) => asset.denom === props.denom) || ASSETS[0]
|
|
const balance = props.amount ?? '0'
|
|
|
|
if (props.isDisplay) {
|
|
return (
|
|
<div
|
|
className={classNames('flex items-center gap-2 bg-white/10 p-3', 'hover:cursor-pointer')}
|
|
>
|
|
<AssetImage asset={asset} size={20} />
|
|
<span>{asset.symbol}</span>
|
|
<span
|
|
className={classNames(
|
|
'inline-block w-2.5 transition-transform',
|
|
props.isClicked ? 'rotate-0' : '-rotate-90',
|
|
)}
|
|
>
|
|
<ChevronDown />
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
data-testid='option-component'
|
|
className={classNames(
|
|
'grid grid-flow-row grid-cols-5 grid-rows-2 py-3.5 pr-4',
|
|
'border-b border-b-white/20 last:border-none',
|
|
'hover:cursor-pointer hover:bg-white/20',
|
|
!props.isSelected ? 'bg-white/10' : 'pointer-events-none',
|
|
)}
|
|
onClick={() => props?.onClick && props.onClick(asset.denom)}
|
|
>
|
|
<div className='row-span-2 flex h-full items-center justify-center'>
|
|
<AssetImage asset={asset} size={32} />
|
|
</div>
|
|
<Text className='col-span-2 pb-1'>{asset.symbol}</Text>
|
|
<Text size='sm' className='col-span-2 pb-1 text-right font-bold'>
|
|
{formatValue(balance, {
|
|
decimals: asset.decimals,
|
|
maxDecimals: 4,
|
|
minDecimals: 0,
|
|
rounded: true,
|
|
})}
|
|
</Text>
|
|
<Text size='sm' className='col-span-2 text-white/50'>
|
|
{formatValue(5, { maxDecimals: 2, minDecimals: 0, prefix: 'APY ', suffix: '%' })}
|
|
</Text>
|
|
<Text size='sm' className='col-span-2 text-right text-white/50'>
|
|
<DisplayCurrency coin={new BNCoin({ denom: asset.denom, amount: balance })} />
|
|
</Text>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const label = props.label
|
|
if (props.isDisplay) {
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
'flex w-full items-center justify-between bg-white/10 p-3 hover:cursor-pointer',
|
|
)}
|
|
>
|
|
<span>{label}</span>
|
|
<span
|
|
className={classNames(
|
|
'inline-block w-2.5 transition-transform',
|
|
props.isClicked ? 'rotate-0' : '-rotate-90',
|
|
)}
|
|
>
|
|
<ChevronDown />
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
'block p-3 hover:cursor-pointer hover:bg-white/20',
|
|
props.isSelected && 'bg-white/10',
|
|
)}
|
|
onClick={() => props?.onClick && props.onClick(props.value)}
|
|
>
|
|
{label}
|
|
</div>
|
|
)
|
|
}
|