boost jlp dropdown layout + add origination fee

This commit is contained in:
saml33 2024-03-04 12:54:02 +11:00
parent f56a8a7785
commit 37f3c19f87
1 changed files with 143 additions and 111 deletions

View File

@ -428,9 +428,14 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
</div>
</div>
</Disclosure.Button>
<Disclosure.Panel className="space-y-2 rounded-xl rounded-t-none border-2 border-t-0 border-th-bkg-3 px-4 pb-3">
<Disclosure.Panel className="rounded-xl rounded-t-none border-2 border-t-0 border-th-bkg-3 px-4 py-3">
<h4 className="mb-4 border-b border-th-bkg-3 pb-2 text-sm">
Position
</h4>
<div className="mb-6 space-y-2 md:px-3">
<div className="flex justify-between">
<p className="text-th-fgd-4">{`${stakeBank.name} Position`}</p>
<p className="text-th-fgd-4">Size</p>
<div className="flex flex-col items-end">
<span
className={`font-bold ${
amountToBorrow > 0.001
@ -446,9 +451,8 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
{' '}
{stakeBank.name}{' '}
</span>
<span className="font-body text-th-fgd-4">
{' '}
(
</span>
<p className="font-body text-xs font-normal text-th-fgd-4">
<FormatNumericValue
value={
leverage *
@ -457,9 +461,9 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
}
decimals={3}
/>{' '}
{borrowBank.name})
</span>
</span>
{borrowBank.name}
</p>
</div>
</div>
<div className="flex justify-between">
<p className="text-th-fgd-4">{`${borrowBank.name} Borrowed`}</p>
@ -474,15 +478,32 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
value={amountToBorrow}
decimals={3}
/>
<span className="font-body text-th-fgd-4">
{' '}
{borrowBank.name}
</span>
</span>
</div>
<div className="flex justify-between">
<p className="text-th-fgd-4">{`Est. Liquidation Price`}</p>
<span
className={`font-bold ${
amountToBorrow > 0.001
? 'text-th-fgd-1'
: 'text-th-bkg-4'
}`}
>
$
<FormatNumericValue
value={liquidationPrice}
decimals={3}
/>
</span>
</div>
</div>
<h4 className="mb-4 border-b border-th-bkg-3 pb-2 text-sm">
Rates and Fees
</h4>
<div className="space-y-2 md:px-3">
<div className="flex justify-between">
<p className="text-th-fgd-4">
{formatTokenSymbol(selectedToken)} Returns APY
{formatTokenSymbol(selectedToken)} Yield APY
</p>
<span className="font-bold text-th-success">
{financialMetrics.collectedReturnsAPY > 0.01
@ -497,7 +518,8 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
</div>
<div className="flex justify-between">
<p className="text-th-fgd-4">
{formatTokenSymbol(selectedToken)} Collateral Fee APY
{formatTokenSymbol(selectedToken)} Collateral Fee
APY
</p>
<span
className={`font-bold ${
@ -506,7 +528,9 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
: 'text-th-bkg-4'
}`}
>
{financialMetrics?.collateralFeeAPY > 0.01 ? '-' : ''}
{financialMetrics?.collateralFeeAPY > 0.01
? '-'
: ''}
<FormatNumericValue
value={financialMetrics?.collateralFeeAPY?.toString()}
decimals={2}
@ -534,26 +558,34 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
</span>
</div>
<div className="flex justify-between">
<p className="text-th-fgd-4">{`Est. Liquidation Price`}</p>
<span
className={`font-bold ${
amountToBorrow > 0.001
? 'text-th-fgd-1'
: 'text-th-bkg-4'
}`}
>
<p className="text-th-fgd-4">
Loan Origination Fee
</p>
<span>
{amountToBorrow ? (
<span className="font-bold text-th-fgd-1">
<FormatNumericValue
value={liquidationPrice}
decimals={3}
value={
borrowBank.loanOriginationFeeRate.toNumber() *
amountToBorrow
}
decimals={2}
/>
<span className="font-body text-th-fgd-4">
</span>
) : (
<span className="font-bold text-th-bkg-4">
0
</span>
)}
<span className="font-bold text-th-fgd-4">
{' '}
{stakeBank.name}/{borrowBank.name}
{borrowBank.name}{' '}
</span>
</span>
</div>
</>
) : null}
</div>
</Disclosure.Panel>
</>
)}