boost jlp dropdown layout + add origination fee
This commit is contained in:
saml33
parent
f56a8a7785
commit
37f3c19f87
|
|
@ -428,113 +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">
|
||||
<div className="flex justify-between">
|
||||
<p className="text-th-fgd-4">{`${stakeBank.name} Position`}</p>
|
||||
<span
|
||||
className={`font-bold ${
|
||||
amountToBorrow > 0.001
|
||||
? 'text-th-fgd-1'
|
||||
: 'text-th-bkg-4'
|
||||
}`}
|
||||
>
|
||||
<FormatNumericValue
|
||||
value={leverage * Number(inputAmount)}
|
||||
decimals={3}
|
||||
/>
|
||||
<span className="font-body text-th-fgd-4">
|
||||
{' '}
|
||||
{stakeBank.name}{' '}
|
||||
</span>
|
||||
<span className="font-body text-th-fgd-4">
|
||||
{' '}
|
||||
(
|
||||
<FormatNumericValue
|
||||
value={
|
||||
leverage *
|
||||
Number(inputAmount) *
|
||||
stakeBank?.uiPrice
|
||||
}
|
||||
decimals={3}
|
||||
/>{' '}
|
||||
{borrowBank.name})
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p className="text-th-fgd-4">{`${borrowBank.name} Borrowed`}</p>
|
||||
<span
|
||||
className={`font-bold ${
|
||||
amountToBorrow > 0.001
|
||||
? 'text-th-fgd-1'
|
||||
: 'text-th-bkg-4'
|
||||
}`}
|
||||
>
|
||||
<FormatNumericValue
|
||||
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">
|
||||
{formatTokenSymbol(selectedToken)} Returns APY
|
||||
</p>
|
||||
<span className="font-bold text-th-success">
|
||||
{financialMetrics.collectedReturnsAPY > 0.01
|
||||
? '+'
|
||||
: ''}
|
||||
<FormatNumericValue
|
||||
value={financialMetrics.collectedReturnsAPY}
|
||||
decimals={2}
|
||||
/>
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p className="text-th-fgd-4">
|
||||
{formatTokenSymbol(selectedToken)} Collateral Fee APY
|
||||
</p>
|
||||
<span
|
||||
className={`font-bold ${
|
||||
financialMetrics?.collateralFeeAPY > 0.01
|
||||
? 'text-th-error'
|
||||
: 'text-th-bkg-4'
|
||||
}`}
|
||||
>
|
||||
{financialMetrics?.collateralFeeAPY > 0.01 ? '-' : ''}
|
||||
<FormatNumericValue
|
||||
value={financialMetrics?.collateralFeeAPY?.toString()}
|
||||
decimals={2}
|
||||
/>
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
{borrowBank ? (
|
||||
<>
|
||||
<div className="flex justify-between">
|
||||
<p className="text-th-fgd-4">{`${borrowBank?.name} Borrow APY`}</p>
|
||||
<span
|
||||
className={`font-bold ${
|
||||
borrowBankBorrowRate > 0.01
|
||||
? 'text-th-error'
|
||||
: 'text-th-bkg-4'
|
||||
}`}
|
||||
>
|
||||
-
|
||||
<FormatNumericValue
|
||||
value={financialMetrics.borrowsAPY}
|
||||
decimals={2}
|
||||
/>
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p className="text-th-fgd-4">{`Est. Liquidation Price`}</p>
|
||||
<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">Size</p>
|
||||
<div className="flex flex-col items-end">
|
||||
<span
|
||||
className={`font-bold ${
|
||||
amountToBorrow > 0.001
|
||||
|
|
@ -543,17 +444,148 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
|
|||
}`}
|
||||
>
|
||||
<FormatNumericValue
|
||||
value={liquidationPrice}
|
||||
value={leverage * Number(inputAmount)}
|
||||
decimals={3}
|
||||
/>
|
||||
<span className="font-body text-th-fgd-4">
|
||||
{' '}
|
||||
{stakeBank.name}/{borrowBank.name}
|
||||
{stakeBank.name}{' '}
|
||||
</span>
|
||||
</span>
|
||||
<p className="font-body text-xs font-normal text-th-fgd-4">
|
||||
<FormatNumericValue
|
||||
value={
|
||||
leverage *
|
||||
Number(inputAmount) *
|
||||
stakeBank?.uiPrice
|
||||
}
|
||||
decimals={3}
|
||||
/>{' '}
|
||||
{borrowBank.name}
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p className="text-th-fgd-4">{`${borrowBank.name} Borrowed`}</p>
|
||||
<span
|
||||
className={`font-bold ${
|
||||
amountToBorrow > 0.001
|
||||
? 'text-th-fgd-1'
|
||||
: 'text-th-bkg-4'
|
||||
}`}
|
||||
>
|
||||
<FormatNumericValue
|
||||
value={amountToBorrow}
|
||||
decimals={3}
|
||||
/>
|
||||
</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)} Yield APY
|
||||
</p>
|
||||
<span className="font-bold text-th-success">
|
||||
{financialMetrics.collectedReturnsAPY > 0.01
|
||||
? '+'
|
||||
: ''}
|
||||
<FormatNumericValue
|
||||
value={financialMetrics.collectedReturnsAPY}
|
||||
decimals={2}
|
||||
/>
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p className="text-th-fgd-4">
|
||||
{formatTokenSymbol(selectedToken)} Collateral Fee
|
||||
APY
|
||||
</p>
|
||||
<span
|
||||
className={`font-bold ${
|
||||
financialMetrics?.collateralFeeAPY > 0.01
|
||||
? 'text-th-error'
|
||||
: 'text-th-bkg-4'
|
||||
}`}
|
||||
>
|
||||
{financialMetrics?.collateralFeeAPY > 0.01
|
||||
? '-'
|
||||
: ''}
|
||||
<FormatNumericValue
|
||||
value={financialMetrics?.collateralFeeAPY?.toString()}
|
||||
decimals={2}
|
||||
/>
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
{borrowBank ? (
|
||||
<>
|
||||
<div className="flex justify-between">
|
||||
<p className="text-th-fgd-4">{`${borrowBank?.name} Borrow APY`}</p>
|
||||
<span
|
||||
className={`font-bold ${
|
||||
borrowBankBorrowRate > 0.01
|
||||
? 'text-th-error'
|
||||
: 'text-th-bkg-4'
|
||||
}`}
|
||||
>
|
||||
-
|
||||
<FormatNumericValue
|
||||
value={financialMetrics.borrowsAPY}
|
||||
decimals={2}
|
||||
/>
|
||||
%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<p className="text-th-fgd-4">
|
||||
Loan Origination Fee
|
||||
</p>
|
||||
<span>
|
||||
{amountToBorrow ? (
|
||||
<span className="font-bold text-th-fgd-1">
|
||||
<FormatNumericValue
|
||||
value={
|
||||
borrowBank.loanOriginationFeeRate.toNumber() *
|
||||
amountToBorrow
|
||||
}
|
||||
decimals={2}
|
||||
/>
|
||||
</span>
|
||||
) : (
|
||||
<span className="font-bold text-th-bkg-4">
|
||||
0
|
||||
</span>
|
||||
)}
|
||||
<span className="font-bold text-th-fgd-4">
|
||||
{' '}
|
||||
{borrowBank.name}{' '}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue