mars-v2-frontend/src/components/Modals/HLS/Deposit/SubTitles.tsx
Bob van der Helm ab0e184a39
refactor components folder (#734)
* refactor components folder

* create leverage slider variants
2024-01-16 15:35:18 +01:00

124 lines
3.2 KiB
TypeScript

import classNames from 'classnames'
import React from 'react'
import DisplayCurrency from 'components/common/DisplayCurrency'
import { ExclamationMarkTriangle } from 'components/common/Icons'
import Text from 'components/common/Text'
import WarningMessages from 'components/common/WarningMessages'
import useAllAssets from 'hooks/assets/useAllAssets'
import { BNCoin } from 'types/classes/BNCoin'
import { formatAmountWithSymbol, formatLeverage } from 'utils/formatters'
interface SubTitleProps {
text: string
color?: string
}
export function SubTitle(props: SubTitleProps) {
return (
<Text
className={classNames(props.color ? props.color : 'text-white/60', 'mt-1')}
size='xs'
tag='span'
>
{props.text}
</Text>
)
}
interface CollateralSubTitleProps {
amount: BigNumber
denom: string
isOpen: boolean
warningMessages: string[]
}
export function CollateralSubTitle(props: CollateralSubTitleProps) {
const assets = useAllAssets()
if (props.isOpen) return null
if (!props.isOpen && props.amount.isZero()) {
return (
<div className='flex gap-2'>
<ExclamationMarkTriangle width={24} className='text-warning' />
<Text className='text-warning mt-1' size='xs' tag='span'>
You have not provided any collateral.
</Text>
</div>
)
}
return (
<div className='flex items-center gap-1'>
<WarningMessages messages={props.warningMessages} />
<SubTitle
text={formatAmountWithSymbol(
{
denom: props.denom,
amount: props.amount.toString(),
},
assets,
)}
color={props.warningMessages.length > 0 ? 'text-warning' : ''}
/>
</div>
)
}
interface LeveragedSubTitleProps {
isOpen: boolean
leverage: number
positionValue: BigNumber
warningMessages: string[]
}
export function LeverageSubTitle(props: LeveragedSubTitleProps) {
if (props.isOpen || props.leverage <= 1) return null
return (
<div className='flex items-center gap-1'>
<WarningMessages messages={props.warningMessages} />
<SubTitle
text={`${formatLeverage(props.leverage)} • Total Position Value `}
color={props.warningMessages.length > 0 ? 'text-warning' : ''}
/>
<DisplayCurrency
coin={BNCoin.fromDenomAndBigNumber('usd', props.positionValue)}
className={classNames(
'text-xs inline mt-1',
props.warningMessages.length ? 'text-warning' : 'text-white/60',
)}
/>
</div>
)
}
interface SelectAccountSubTitleProps {
isOpen: boolean
isSummaryOpen: boolean
selectedAccountId?: string
type: 'create' | 'select'
}
export function SelectAccountSubTitle(props: SelectAccountSubTitleProps) {
if (!props.isOpen && props.selectedAccountId) {
return (
<Text className='mt-1 text-white/60' size='xs' tag='span'>
Account {props.selectedAccountId}
</Text>
)
}
if (!props.selectedAccountId && props.isSummaryOpen) {
return (
<div className='flex gap-2'>
<ExclamationMarkTriangle width={24} className='text-warning' />
<Text className='text-warning mt-1' size='xs' tag='span'>
You need to {props.type} an account
</Text>
</div>
)
}
return ''
}