Merge branch 'main' into alpha
This commit is contained in:
commit
9f62761711
|
@ -200,76 +200,82 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
|
|||
valueKey="maxAmount"
|
||||
/>
|
||||
</EnterBottomExitBottom>
|
||||
<FadeInFadeOut
|
||||
className={`flex h-[${ACCOUNT_ACTION_MODAL_INNER_HEIGHT}] flex-col justify-between`}
|
||||
show={!showTokenList}
|
||||
>
|
||||
<div>
|
||||
{initHealth && initHealth <= 0 ? (
|
||||
<div className="mb-4">
|
||||
<InlineNotification
|
||||
type="error"
|
||||
desc="You have no available collateral to borrow against."
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="grid grid-cols-2">
|
||||
<div className="col-span-2 flex justify-between">
|
||||
<Label text={`${t('borrow')} ${t('token')}`} />
|
||||
<MaxAmountButton
|
||||
className="mb-2"
|
||||
label={t('max')}
|
||||
onClick={setMax}
|
||||
value={tokenMax.toFixed()}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
|
||||
<button
|
||||
onClick={() => setShowTokenList(true)}
|
||||
className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
|
||||
>
|
||||
<div className="mr-2.5 flex min-w-[24px] items-center">
|
||||
<Image
|
||||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
src={logoUri || `/icons/${selectedToken.toLowerCase()}.svg`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="text-xl font-bold">{selectedToken}</div>
|
||||
<ChevronDownIcon className="h-6 w-6" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<NumberFormat
|
||||
name="amountIn"
|
||||
id="amountIn"
|
||||
inputMode="decimal"
|
||||
thousandSeparator=","
|
||||
allowNegative={false}
|
||||
isNumericString={true}
|
||||
decimalScale={bank?.mintDecimals || 6}
|
||||
className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
|
||||
placeholder="0.00"
|
||||
value={inputAmount}
|
||||
onValueChange={(e: NumberFormatValues) =>
|
||||
setInputAmount(!Number.isNaN(Number(e.value)) ? e.value : '')
|
||||
}
|
||||
isAllowed={withValueLimit}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 mt-2">
|
||||
<ButtonGroup
|
||||
activeValue={sizePercentage}
|
||||
className="font-mono"
|
||||
onChange={(p) => handleSizePercentage(p)}
|
||||
values={['10', '25', '50', '75', '100']}
|
||||
unit="%"
|
||||
/>
|
||||
</div>
|
||||
{/* <div className="col-span-2 mt-4">
|
||||
<FadeInFadeOut show={!showTokenList}>
|
||||
<div
|
||||
className="flex flex-col justify-between"
|
||||
style={{ height: ACCOUNT_ACTION_MODAL_INNER_HEIGHT }}
|
||||
>
|
||||
<div>
|
||||
{initHealth <= 0 ? (
|
||||
<div className="mb-4">
|
||||
<InlineNotification
|
||||
type="error"
|
||||
desc="You have no available collateral to borrow against."
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
{bank ? <TokenVaultWarnings bank={bank} /> : null}
|
||||
<div className="grid grid-cols-2">
|
||||
<div className="col-span-2 flex justify-between">
|
||||
<Label text={`${t('borrow')} ${t('token')}`} />
|
||||
<MaxAmountButton
|
||||
className="mb-2"
|
||||
label={t('max')}
|
||||
onClick={setMax}
|
||||
value={tokenMax.toFixed()}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
|
||||
<button
|
||||
onClick={() => setShowTokenList(true)}
|
||||
className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
|
||||
>
|
||||
<div className="mr-2.5 flex min-w-[24px] items-center">
|
||||
<Image
|
||||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
src={
|
||||
logoUri || `/icons/${selectedToken.toLowerCase()}.svg`
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="text-xl font-bold">{selectedToken}</div>
|
||||
<ChevronDownIcon className="h-6 w-6" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<NumberFormat
|
||||
name="amountIn"
|
||||
id="amountIn"
|
||||
inputMode="decimal"
|
||||
thousandSeparator=","
|
||||
allowNegative={false}
|
||||
isNumericString={true}
|
||||
decimalScale={bank?.mintDecimals || 6}
|
||||
className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
|
||||
placeholder="0.00"
|
||||
value={inputAmount}
|
||||
onValueChange={(e: NumberFormatValues) =>
|
||||
setInputAmount(
|
||||
!Number.isNaN(Number(e.value)) ? e.value : ''
|
||||
)
|
||||
}
|
||||
isAllowed={withValueLimit}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 mt-2">
|
||||
<ButtonGroup
|
||||
activeValue={sizePercentage}
|
||||
className="font-mono"
|
||||
onChange={(p) => handleSizePercentage(p)}
|
||||
values={['10', '25', '50', '75', '100']}
|
||||
unit="%"
|
||||
/>
|
||||
</div>
|
||||
{/* <div className="col-span-2 mt-4">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<p className="text-th-fgd-3">{t('leverage')}</p>
|
||||
<p className="text-th-fgd-3">0.00x</p>
|
||||
|
@ -280,40 +286,39 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
|
|||
onChange={(x) => setInputAmount(x)}
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
{bank ? (
|
||||
<div className="my-6 space-y-2 border-y border-th-bkg-3 px-2 py-4">
|
||||
<HealthImpactTokenChange
|
||||
mintPk={bank.mint}
|
||||
uiAmount={Number(inputAmount)}
|
||||
/>
|
||||
<div className="flex justify-between">
|
||||
<p>{t('borrow-value')}</p>
|
||||
<p className="font-mono text-th-fgd-1">
|
||||
{formatFixedDecimals(
|
||||
bank.uiPrice * Number(inputAmount),
|
||||
true
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<Tooltip content={t('loan-origination-fee-tooltip')}>
|
||||
<p className="tooltip-underline">
|
||||
{t('loan-origination-fee')}
|
||||
</p>
|
||||
</Tooltip>
|
||||
<p className="font-mono text-th-fgd-1">
|
||||
{formatFixedDecimals(
|
||||
bank.loanOriginationFeeRate.toNumber() *
|
||||
Number(inputAmount),
|
||||
true
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
{bank ? (
|
||||
<div className="my-6 space-y-2 border-y border-th-bkg-3 px-2 py-4">
|
||||
<HealthImpactTokenChange
|
||||
mintPk={bank.mint}
|
||||
uiAmount={Number(inputAmount)}
|
||||
/>
|
||||
<div className="flex justify-between">
|
||||
<p>{t('borrow-value')}</p>
|
||||
<p className="font-mono text-th-fgd-1">
|
||||
{formatFixedDecimals(
|
||||
bank.uiPrice * Number(inputAmount),
|
||||
true
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<Tooltip content={t('loan-origination-fee-tooltip')}>
|
||||
<p className="tooltip-underline">
|
||||
{t('loan-origination-fee')}
|
||||
</p>
|
||||
</Tooltip>
|
||||
<p className="font-mono text-th-fgd-1">
|
||||
{formatFixedDecimals(
|
||||
bank.loanOriginationFeeRate.toNumber() *
|
||||
Number(inputAmount),
|
||||
true
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleWithdraw}
|
||||
className="flex w-full items-center justify-center"
|
||||
|
@ -340,11 +345,6 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
|
|||
)}
|
||||
</Button>
|
||||
</div>
|
||||
{bank ? (
|
||||
<div className="pt-4">
|
||||
<TokenVaultWarnings bank={bank} />
|
||||
</div>
|
||||
) : null}
|
||||
</FadeInFadeOut>
|
||||
</>
|
||||
)
|
||||
|
|
|
@ -230,99 +230,104 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
|
|||
valueKey="walletBalance"
|
||||
/>
|
||||
</EnterBottomExitBottom>
|
||||
<FadeInFadeOut
|
||||
className={`flex h-[${ACCOUNT_ACTION_MODAL_INNER_HEIGHT}] flex-col justify-between`}
|
||||
show={!showTokenList}
|
||||
>
|
||||
<div>
|
||||
<InlineNotification
|
||||
type="info"
|
||||
desc={`There is a $${ALPHA_DEPOSIT_LIMIT} account value limit during alpha
|
||||
<FadeInFadeOut show={!showTokenList}>
|
||||
<div
|
||||
className="flex flex-col justify-between"
|
||||
style={{ height: ACCOUNT_ACTION_MODAL_INNER_HEIGHT }}
|
||||
>
|
||||
<div>
|
||||
<InlineNotification
|
||||
type="info"
|
||||
desc={`There is a $${ALPHA_DEPOSIT_LIMIT} account value limit during alpha
|
||||
testing.`}
|
||||
/>
|
||||
<SolBalanceWarnings
|
||||
amount={inputAmount}
|
||||
setAmount={setInputAmount}
|
||||
selectedToken={selectedToken}
|
||||
/>
|
||||
<div className="mt-4 grid grid-cols-2">
|
||||
<div className="col-span-2 flex justify-between">
|
||||
<Label text={`${t('deposit')} ${t('token')}`} />
|
||||
<MaxAmountButton
|
||||
className="mb-2"
|
||||
label={t('wallet-balance')}
|
||||
onClick={setMax}
|
||||
value={floorToDecimal(
|
||||
tokenMax.maxAmount,
|
||||
tokenMax.maxDecimals
|
||||
).toFixed()}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
|
||||
<button
|
||||
onClick={() => setShowTokenList(true)}
|
||||
className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
|
||||
>
|
||||
<div className="mr-2.5 flex min-w-[24px] items-center">
|
||||
<Image
|
||||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
src={logoUri || `/icons/${selectedToken.toLowerCase()}.svg`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="text-xl font-bold">{selectedToken}</div>
|
||||
<ChevronDownIcon className="h-6 w-6" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<NumberFormat
|
||||
name="amountIn"
|
||||
id="amountIn"
|
||||
inputMode="decimal"
|
||||
thousandSeparator=","
|
||||
allowNegative={false}
|
||||
isNumericString={true}
|
||||
decimalScale={bank?.mintDecimals || 6}
|
||||
className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
|
||||
placeholder="0.00"
|
||||
value={inputAmount}
|
||||
onValueChange={(e: NumberFormatValues) => {
|
||||
setInputAmount(!Number.isNaN(Number(e.value)) ? e.value : '')
|
||||
}}
|
||||
isAllowed={withValueLimit}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 mt-2">
|
||||
<ButtonGroup
|
||||
activeValue={sizePercentage}
|
||||
className="font-mono"
|
||||
onChange={(p) => handleSizePercentage(p)}
|
||||
values={['10', '25', '50', '75', '100']}
|
||||
unit="%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-6 space-y-1.5 border-y border-th-bkg-3 px-2 py-4 text-sm ">
|
||||
<HealthImpactTokenChange
|
||||
mintPk={bank!.mint}
|
||||
uiAmount={Number(inputAmount)}
|
||||
isDeposit
|
||||
/>
|
||||
<div className="flex justify-between">
|
||||
<p>{t('deposit-value')}</p>
|
||||
<p className="font-mono">
|
||||
{bank?.uiPrice
|
||||
? formatFixedDecimals(
|
||||
bank.uiPrice * Number(inputAmount),
|
||||
true
|
||||
<SolBalanceWarnings
|
||||
amount={inputAmount}
|
||||
setAmount={setInputAmount}
|
||||
selectedToken={selectedToken}
|
||||
/>
|
||||
<div className="mt-4 grid grid-cols-2">
|
||||
<div className="col-span-2 flex justify-between">
|
||||
<Label text={`${t('deposit')} ${t('token')}`} />
|
||||
<MaxAmountButton
|
||||
className="mb-2"
|
||||
label={t('wallet-balance')}
|
||||
onClick={setMax}
|
||||
value={floorToDecimal(
|
||||
tokenMax.maxAmount,
|
||||
tokenMax.maxDecimals
|
||||
).toFixed()}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
|
||||
<button
|
||||
onClick={() => setShowTokenList(true)}
|
||||
className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
|
||||
>
|
||||
<div className="mr-2.5 flex min-w-[24px] items-center">
|
||||
<Image
|
||||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
src={
|
||||
logoUri || `/icons/${selectedToken.toLowerCase()}.svg`
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="text-xl font-bold">{selectedToken}</div>
|
||||
<ChevronDownIcon className="h-6 w-6" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<NumberFormat
|
||||
name="amountIn"
|
||||
id="amountIn"
|
||||
inputMode="decimal"
|
||||
thousandSeparator=","
|
||||
allowNegative={false}
|
||||
isNumericString={true}
|
||||
decimalScale={bank?.mintDecimals || 6}
|
||||
className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
|
||||
placeholder="0.00"
|
||||
value={inputAmount}
|
||||
onValueChange={(e: NumberFormatValues) => {
|
||||
setInputAmount(
|
||||
!Number.isNaN(Number(e.value)) ? e.value : ''
|
||||
)
|
||||
: '-'}
|
||||
</p>
|
||||
}}
|
||||
isAllowed={withValueLimit}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 mt-2">
|
||||
<ButtonGroup
|
||||
activeValue={sizePercentage}
|
||||
className="font-mono"
|
||||
onChange={(p) => handleSizePercentage(p)}
|
||||
values={['10', '25', '50', '75', '100']}
|
||||
unit="%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="flex justify-between">
|
||||
<div className="my-6 space-y-1.5 border-y border-th-bkg-3 px-2 py-4 text-sm ">
|
||||
<HealthImpactTokenChange
|
||||
mintPk={bank!.mint}
|
||||
uiAmount={Number(inputAmount)}
|
||||
isDeposit
|
||||
/>
|
||||
<div className="flex justify-between">
|
||||
<p>{t('deposit-value')}</p>
|
||||
<p className="font-mono">
|
||||
{bank?.uiPrice
|
||||
? formatFixedDecimals(
|
||||
bank.uiPrice * Number(inputAmount),
|
||||
true
|
||||
)
|
||||
: '-'}
|
||||
</p>
|
||||
</div>
|
||||
{/* <div className="flex justify-between">
|
||||
<div className="flex items-center">
|
||||
<Tooltip content={t('asset-weight-desc')}>
|
||||
<p className="tooltip-underline">{t('asset-weight')}</p>
|
||||
|
@ -330,18 +335,19 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
|
|||
</div>
|
||||
<p className="font-mono">{bank!.initAssetWeight.toFixed(2)}x</p>
|
||||
</div> */}
|
||||
<div className="flex justify-between">
|
||||
<Tooltip content={t('tooltip-collateral-value')}>
|
||||
<p className="tooltip-underline">{t('collateral-value')}</p>
|
||||
</Tooltip>
|
||||
<p className="font-mono">
|
||||
{formatFixedDecimals(
|
||||
bank!.uiPrice! *
|
||||
Number(inputAmount) *
|
||||
Number(bank!.initAssetWeight),
|
||||
true
|
||||
)}
|
||||
</p>
|
||||
<div className="flex justify-between">
|
||||
<Tooltip content={t('tooltip-collateral-value')}>
|
||||
<p className="tooltip-underline">{t('collateral-value')}</p>
|
||||
</Tooltip>
|
||||
<p className="font-mono">
|
||||
{formatFixedDecimals(
|
||||
bank!.uiPrice! *
|
||||
Number(inputAmount) *
|
||||
Number(bank!.initAssetWeight),
|
||||
true
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
|
|
|
@ -83,7 +83,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
|
|||
<SideNav collapsed={isCollapsed} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* note: overflow-x-hidden below prevents position sticky from working in activity feed */}
|
||||
<div
|
||||
className={`w-full overflow-x-hidden transition-all duration-${sideBarAnimationDuration} ease-in-out ${
|
||||
isCollapsed ? 'md:pl-[64px]' : 'md:pl-44 lg:pl-48 xl:pl-52'
|
||||
|
|
|
@ -202,132 +202,138 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
|
|||
valueKey="borrowAmount"
|
||||
/>
|
||||
</EnterBottomExitBottom>
|
||||
<FadeInFadeOut
|
||||
className={`flex h-[${ACCOUNT_ACTION_MODAL_INNER_HEIGHT}] flex-col justify-between`}
|
||||
show={!showTokenList}
|
||||
>
|
||||
<div>
|
||||
<div className="-mt-2 mb-2">
|
||||
<SolBalanceWarnings
|
||||
amount={inputAmount}
|
||||
setAmount={setInputAmount}
|
||||
selectedToken={selectedToken}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2">
|
||||
<div className="col-span-2 flex justify-between">
|
||||
<Label text={`${t('repay')} ${t('token')}`} />
|
||||
<MaxAmountButton
|
||||
className="mb-2"
|
||||
label={t('amount-owed')}
|
||||
onClick={setMax}
|
||||
value={floorToDecimal(
|
||||
borrowAmount,
|
||||
walletBalance.maxDecimals
|
||||
).toFixed()}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
|
||||
<button
|
||||
onClick={() => setShowTokenList(true)}
|
||||
className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
|
||||
>
|
||||
<div className="mr-2.5 flex min-w-[24px] items-center">
|
||||
{logoUri ? (
|
||||
<Image alt="" width="24" height="24" src={logoUri} />
|
||||
) : (
|
||||
<QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="text-xl font-bold">{selectedToken}</div>
|
||||
<ChevronDownIcon className="h-6 w-6" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<NumberFormat
|
||||
name="amountIn"
|
||||
id="amountIn"
|
||||
inputMode="decimal"
|
||||
thousandSeparator=","
|
||||
allowNegative={false}
|
||||
isNumericString={true}
|
||||
decimalScale={bank?.mintDecimals || 6}
|
||||
className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
|
||||
placeholder="0.00"
|
||||
value={inputAmount}
|
||||
onValueChange={(e: NumberFormatValues) => {
|
||||
setInputAmount(!Number.isNaN(Number(e.value)) ? e.value : '')
|
||||
}}
|
||||
isAllowed={withValueLimit}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 mt-2">
|
||||
<ButtonGroup
|
||||
activeValue={sizePercentage}
|
||||
className="font-mono"
|
||||
onChange={(p) => handleSizePercentage(p)}
|
||||
values={['10', '25', '50', '75', '100']}
|
||||
unit="%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-6 space-y-1.5 border-y border-th-bkg-3 px-2 py-4 text-sm ">
|
||||
{bank ? (
|
||||
<HealthImpactTokenChange
|
||||
mintPk={bank.mint}
|
||||
uiAmount={Number(inputAmount)}
|
||||
isDeposit
|
||||
/>
|
||||
) : null}
|
||||
<div className="flex justify-between">
|
||||
<p>{t('repayment-value')}</p>
|
||||
<p className="font-mono">
|
||||
{bank?.uiPrice
|
||||
? formatFixedDecimals(
|
||||
bank.uiPrice * Number(inputAmount),
|
||||
true
|
||||
)
|
||||
: '-'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex items-center">
|
||||
<p>{t('outstanding-balance')}</p>
|
||||
</div>
|
||||
<p className="font-mono">
|
||||
{floorToDecimal(
|
||||
borrowAmount - Number(inputAmount),
|
||||
walletBalance.maxDecimals
|
||||
).toNumber()}{' '}
|
||||
<span className="font-body text-th-fgd-4">{selectedToken}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => handleDeposit(inputAmount)}
|
||||
className="flex w-full items-center justify-center"
|
||||
disabled={!inputAmount || showInsufficientBalance}
|
||||
size="large"
|
||||
<FadeInFadeOut show={!showTokenList}>
|
||||
<div
|
||||
className="flex flex-col justify-between"
|
||||
style={{ height: ACCOUNT_ACTION_MODAL_INNER_HEIGHT }}
|
||||
>
|
||||
{submitting ? (
|
||||
<Loading className="mr-2 h-5 w-5" />
|
||||
) : showInsufficientBalance ? (
|
||||
<div className="flex items-center">
|
||||
<ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0" />
|
||||
{t('swap:insufficient-balance', {
|
||||
symbol: selectedToken,
|
||||
})}
|
||||
<div>
|
||||
<div className="-mt-2 mb-2">
|
||||
<SolBalanceWarnings
|
||||
amount={inputAmount}
|
||||
setAmount={setInputAmount}
|
||||
selectedToken={selectedToken}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center">
|
||||
<ArrowDownRightIcon className="mr-2 h-5 w-5" />
|
||||
{t('repay')}
|
||||
<div className="grid grid-cols-2">
|
||||
<div className="col-span-2 flex justify-between">
|
||||
<Label text={`${t('repay')} ${t('token')}`} />
|
||||
<MaxAmountButton
|
||||
className="mb-2"
|
||||
label={t('amount-owed')}
|
||||
onClick={setMax}
|
||||
value={floorToDecimal(
|
||||
borrowAmount,
|
||||
walletBalance.maxDecimals
|
||||
).toFixed()}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
|
||||
<button
|
||||
onClick={() => setShowTokenList(true)}
|
||||
className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
|
||||
>
|
||||
<div className="mr-2.5 flex min-w-[24px] items-center">
|
||||
{logoUri ? (
|
||||
<Image alt="" width="24" height="24" src={logoUri} />
|
||||
) : (
|
||||
<QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="text-xl font-bold">{selectedToken}</div>
|
||||
<ChevronDownIcon className="h-6 w-6" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<NumberFormat
|
||||
name="amountIn"
|
||||
id="amountIn"
|
||||
inputMode="decimal"
|
||||
thousandSeparator=","
|
||||
allowNegative={false}
|
||||
isNumericString={true}
|
||||
decimalScale={bank?.mintDecimals || 6}
|
||||
className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
|
||||
placeholder="0.00"
|
||||
value={inputAmount}
|
||||
onValueChange={(e: NumberFormatValues) => {
|
||||
setInputAmount(
|
||||
!Number.isNaN(Number(e.value)) ? e.value : ''
|
||||
)
|
||||
}}
|
||||
isAllowed={withValueLimit}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 mt-2">
|
||||
<ButtonGroup
|
||||
activeValue={sizePercentage}
|
||||
className="font-mono"
|
||||
onChange={(p) => handleSizePercentage(p)}
|
||||
values={['10', '25', '50', '75', '100']}
|
||||
unit="%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
<div className="my-6 space-y-1.5 border-y border-th-bkg-3 px-2 py-4 text-sm ">
|
||||
{bank ? (
|
||||
<HealthImpactTokenChange
|
||||
mintPk={bank.mint}
|
||||
uiAmount={Number(inputAmount)}
|
||||
isDeposit
|
||||
/>
|
||||
) : null}
|
||||
<div className="flex justify-between">
|
||||
<p>{t('repayment-value')}</p>
|
||||
<p className="font-mono">
|
||||
{bank?.uiPrice
|
||||
? formatFixedDecimals(
|
||||
bank.uiPrice * Number(inputAmount),
|
||||
true
|
||||
)
|
||||
: '-'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex items-center">
|
||||
<p>{t('outstanding-balance')}</p>
|
||||
</div>
|
||||
<p className="font-mono">
|
||||
{floorToDecimal(
|
||||
borrowAmount - Number(inputAmount),
|
||||
walletBalance.maxDecimals
|
||||
).toNumber()}{' '}
|
||||
<span className="font-body text-th-fgd-4">
|
||||
{selectedToken}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => handleDeposit(inputAmount)}
|
||||
className="flex w-full items-center justify-center"
|
||||
disabled={!inputAmount || showInsufficientBalance}
|
||||
size="large"
|
||||
>
|
||||
{submitting ? (
|
||||
<Loading className="mr-2 h-5 w-5" />
|
||||
) : showInsufficientBalance ? (
|
||||
<div className="flex items-center">
|
||||
<ExclamationCircleIcon className="mr-2 h-5 w-5 flex-shrink-0" />
|
||||
{t('swap:insufficient-balance', {
|
||||
symbol: selectedToken,
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center">
|
||||
<ArrowDownRightIcon className="mr-2 h-5 w-5" />
|
||||
{t('repay')}
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</FadeInFadeOut>
|
||||
</>
|
||||
) : !connected ? (
|
||||
|
|
|
@ -196,95 +196,100 @@ function WithdrawForm({ onSuccess, token }: WithdrawFormProps) {
|
|||
valueKey="accountBalance"
|
||||
/>
|
||||
</EnterBottomExitBottom>
|
||||
<FadeInFadeOut
|
||||
className={`flex h-[${ACCOUNT_ACTION_MODAL_INNER_HEIGHT}] flex-col justify-between`}
|
||||
show={!showTokenList}
|
||||
>
|
||||
<div>
|
||||
{initHealth <= 0 ? (
|
||||
<div className="mb-4">
|
||||
<InlineNotification
|
||||
type="error"
|
||||
desc="You have no available collateral to withdraw."
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="grid grid-cols-2">
|
||||
<div className="col-span-2 flex justify-between">
|
||||
<Label text={`${t('withdraw')} ${t('token')}`} />
|
||||
<MaxAmountButton
|
||||
className="mb-2"
|
||||
label={t('max')}
|
||||
onClick={() => handleSizePercentage('100')}
|
||||
value={tokenMax.toString()}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
|
||||
<button
|
||||
onClick={() => setShowTokenList(true)}
|
||||
className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
|
||||
>
|
||||
<div className="mr-2.5 flex min-w-[24px] items-center">
|
||||
<Image
|
||||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
src={logoUri || `/icons/${selectedToken.toLowerCase()}.svg`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="text-xl font-bold">{selectedToken}</div>
|
||||
<ChevronDownIcon className="h-6 w-6" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<NumberFormat
|
||||
name="amountIn"
|
||||
id="amountIn"
|
||||
inputMode="decimal"
|
||||
thousandSeparator=","
|
||||
allowNegative={false}
|
||||
isNumericString={true}
|
||||
decimalScale={bank?.mintDecimals || 6}
|
||||
className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
|
||||
placeholder="0.00"
|
||||
value={inputAmount}
|
||||
onValueChange={(e: NumberFormatValues) =>
|
||||
setInputAmount(!Number.isNaN(Number(e.value)) ? e.value : '')
|
||||
}
|
||||
isAllowed={withValueLimit}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 mt-2">
|
||||
<ButtonGroup
|
||||
activeValue={sizePercentage}
|
||||
className="font-mono"
|
||||
onChange={(p) => handleSizePercentage(p)}
|
||||
values={['10', '25', '50', '75', '100']}
|
||||
unit="%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-6 space-y-2 border-y border-th-bkg-3 px-2 py-4">
|
||||
<HealthImpactTokenChange
|
||||
mintPk={bank!.mint}
|
||||
uiAmount={Number(inputAmount)}
|
||||
/>
|
||||
<div className="flex justify-between">
|
||||
<p>{t('withdraw-value')}</p>
|
||||
<p className="font-mono text-th-fgd-1">
|
||||
{bank?.uiPrice
|
||||
? formatFixedDecimals(
|
||||
bank.uiPrice * Number(inputAmount),
|
||||
true
|
||||
<FadeInFadeOut show={!showTokenList}>
|
||||
<div
|
||||
className="flex flex-col justify-between"
|
||||
style={{ height: ACCOUNT_ACTION_MODAL_INNER_HEIGHT }}
|
||||
>
|
||||
<div>
|
||||
{initHealth <= 0 ? (
|
||||
<div className="mb-4">
|
||||
<InlineNotification
|
||||
type="error"
|
||||
desc="You have no available collateral to withdraw."
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
{bank ? <TokenVaultWarnings bank={bank} /> : null}
|
||||
<div className="grid grid-cols-2">
|
||||
<div className="col-span-2 flex justify-between">
|
||||
<Label text={`${t('withdraw')} ${t('token')}`} />
|
||||
<MaxAmountButton
|
||||
className="mb-2"
|
||||
label={t('max')}
|
||||
onClick={() => handleSizePercentage('100')}
|
||||
value={tokenMax.toString()}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-1 rounded-lg rounded-r-none border border-r-0 border-th-input-border bg-th-input-bkg">
|
||||
<button
|
||||
onClick={() => setShowTokenList(true)}
|
||||
className="default-transition flex h-full w-full items-center rounded-lg rounded-r-none py-2 px-3 text-th-fgd-2 hover:cursor-pointer hover:bg-th-bkg-2 hover:text-th-fgd-1"
|
||||
>
|
||||
<div className="mr-2.5 flex min-w-[24px] items-center">
|
||||
<Image
|
||||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
src={
|
||||
logoUri || `/icons/${selectedToken.toLowerCase()}.svg`
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="text-xl font-bold">{selectedToken}</div>
|
||||
<ChevronDownIcon className="h-6 w-6" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<NumberFormat
|
||||
name="amountIn"
|
||||
id="amountIn"
|
||||
inputMode="decimal"
|
||||
thousandSeparator=","
|
||||
allowNegative={false}
|
||||
isNumericString={true}
|
||||
decimalScale={bank?.mintDecimals || 6}
|
||||
className="w-full rounded-lg rounded-l-none border border-th-input-border bg-th-input-bkg p-3 text-right font-mono text-xl tracking-wider text-th-fgd-1 focus:border-th-input-border-hover focus:outline-none md:hover:border-th-input-border-hover"
|
||||
placeholder="0.00"
|
||||
value={inputAmount}
|
||||
onValueChange={(e: NumberFormatValues) =>
|
||||
setInputAmount(
|
||||
!Number.isNaN(Number(e.value)) ? e.value : ''
|
||||
)
|
||||
: '-'}
|
||||
</p>
|
||||
}
|
||||
isAllowed={withValueLimit}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 mt-2">
|
||||
<ButtonGroup
|
||||
activeValue={sizePercentage}
|
||||
className="font-mono"
|
||||
onChange={(p) => handleSizePercentage(p)}
|
||||
values={['10', '25', '50', '75', '100']}
|
||||
unit="%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-6 space-y-2 border-y border-th-bkg-3 px-2 py-4">
|
||||
<HealthImpactTokenChange
|
||||
mintPk={bank!.mint}
|
||||
uiAmount={Number(inputAmount)}
|
||||
/>
|
||||
<div className="flex justify-between">
|
||||
<p>{t('withdraw-value')}</p>
|
||||
<p className="font-mono text-th-fgd-1">
|
||||
{bank?.uiPrice
|
||||
? formatFixedDecimals(
|
||||
bank.uiPrice * Number(inputAmount),
|
||||
true
|
||||
)
|
||||
: '-'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<Button
|
||||
onClick={handleWithdraw}
|
||||
className="flex w-full items-center justify-center"
|
||||
|
|
|
@ -134,7 +134,7 @@ const ActivityFeedTable = ({
|
|||
if (activity_type === 'perp_trade') {
|
||||
const { maker_fee, price, quantity, taker_fee } =
|
||||
activity.activity_details
|
||||
value = (quantity * price + maker_fee + taker_fee) * -1
|
||||
value = quantity * price + maker_fee + taker_fee
|
||||
}
|
||||
return value
|
||||
}
|
||||
|
@ -144,8 +144,8 @@ const ActivityFeedTable = ({
|
|||
<>
|
||||
{showTableView ? (
|
||||
<Table className="min-w-full">
|
||||
<thead>
|
||||
<TrHead className="sticky top-0 z-10">
|
||||
<thead className="sticky top-0 z-10">
|
||||
<TrHead>
|
||||
<Th className="bg-th-bkg-1 text-left">{t('date')}</Th>
|
||||
<Th className="bg-th-bkg-1 text-right">
|
||||
{t('activity:activity')}
|
||||
|
@ -210,7 +210,7 @@ const ActivityFeedTable = ({
|
|||
</Td>
|
||||
<Td
|
||||
className={`text-right font-mono ${
|
||||
activityName === 'swap' || activityName === 'perp'
|
||||
activityName === 'swap' || activityName === 'perp_trade'
|
||||
? 'text-th-fgd-2'
|
||||
: value >= 0
|
||||
? 'text-th-up'
|
||||
|
@ -219,7 +219,7 @@ const ActivityFeedTable = ({
|
|||
>
|
||||
{value > 0 &&
|
||||
activityName !== 'swap' &&
|
||||
activityName !== 'perp'
|
||||
activityName !== 'perp_trade'
|
||||
? '+'
|
||||
: ''}
|
||||
{formatFixedDecimals(value, true)}
|
||||
|
@ -272,9 +272,9 @@ const ActivityFeedTable = ({
|
|||
</div>
|
||||
)}
|
||||
{loadActivityFeed ? (
|
||||
<div className="mt-2 space-y-0.5">
|
||||
<div className="mt-4 space-y-1.5">
|
||||
{[...Array(4)].map((x, i) => (
|
||||
<SheenLoader className="flex flex-1" key={i}>
|
||||
<SheenLoader className="mx-4 flex flex-1 md:mx-6" key={i}>
|
||||
<div className="h-16 w-full bg-th-bkg-2" />
|
||||
</SheenLoader>
|
||||
))}
|
||||
|
|
|
@ -23,7 +23,7 @@ const BorrowRepayModal = ({
|
|||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<div className={`h-[${ACCOUNT_ACTION_MODAL_HEIGHT}]`}>
|
||||
<div style={{ height: ACCOUNT_ACTION_MODAL_HEIGHT }}>
|
||||
<div className="pb-2">
|
||||
<TabUnderline
|
||||
activeValue={activeTab}
|
||||
|
|
|
@ -4,6 +4,7 @@ import { useState } from 'react'
|
|||
import TabUnderline from '@components/shared/TabUnderline'
|
||||
import DepositForm from '@components/DepositForm'
|
||||
import WithdrawForm from '@components/WithdrawForm'
|
||||
import { ACCOUNT_ACTION_MODAL_HEIGHT } from 'utils/constants'
|
||||
|
||||
interface DepositWithdrawModalProps {
|
||||
action: 'deposit' | 'withdraw'
|
||||
|
@ -22,7 +23,7 @@ const DepositWithdrawModal = ({
|
|||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<div className="h-[448px]">
|
||||
<div style={{ height: ACCOUNT_ACTION_MODAL_HEIGHT }}>
|
||||
<div className="pb-2">
|
||||
<TabUnderline
|
||||
activeValue={activeTab}
|
||||
|
|
|
@ -43,19 +43,21 @@ const TokenVaultWarnings = ({ bank }: { bank: Bank }) => {
|
|||
|
||||
return mangoAccount &&
|
||||
balance / bank.minVaultToDepositsRatio > vaultBalance ? (
|
||||
<InlineNotification
|
||||
type="warning"
|
||||
desc={
|
||||
<div>
|
||||
The Mango {bank.name} vault balance is low which is impacting the
|
||||
maximum amount you may borrow. View the{' '}
|
||||
<Link href="/stats" className="underline hover:no-underline">
|
||||
Stats page
|
||||
</Link>{' '}
|
||||
to see vault balances.
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<div className="mb-4">
|
||||
<InlineNotification
|
||||
type="warning"
|
||||
desc={
|
||||
<div>
|
||||
The available {bank.name} vault balance is low and impacting the
|
||||
maximum amount you can withdraw/borrow. View the{' '}
|
||||
<Link href="/stats" className="underline hover:no-underline">
|
||||
Stats page
|
||||
</Link>{' '}
|
||||
to see vault balances.
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
|
||||
|
|
|
@ -432,7 +432,7 @@ const SwapForm = () => {
|
|||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="mt-6 flex-grow">
|
||||
<div className="mt-6 mb-4 flex-grow">
|
||||
<div className="flex">
|
||||
<Button disabled className="flex-grow">
|
||||
<span>
|
||||
|
@ -444,12 +444,8 @@ const SwapForm = () => {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
{group && inputBank ? (
|
||||
<div className="mt-4">
|
||||
<TokenVaultWarnings bank={inputBank} />
|
||||
</div>
|
||||
) : null}
|
||||
<div className="mt-4 space-y-2">
|
||||
{group && inputBank ? <TokenVaultWarnings bank={inputBank} /> : null}
|
||||
<div className="space-y-2">
|
||||
<div id="swap-step-four">
|
||||
<HealthImpact maintProjectedHealth={maintProjectedHealth} />
|
||||
</div>
|
||||
|
@ -504,7 +500,7 @@ const SwapFormSubmitButton = ({
|
|||
return (
|
||||
<Button
|
||||
onClick={() => setShowConfirm(true)}
|
||||
className="mt-6 flex w-full items-center justify-center text-base"
|
||||
className="mt-6 mb-4 flex w-full items-center justify-center text-base"
|
||||
disabled={disabled}
|
||||
size="large"
|
||||
>
|
||||
|
|
|
@ -413,9 +413,9 @@ const SwapHistoryTable = ({
|
|||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="mt-2 space-y-0.5">
|
||||
<div className="mt-4 space-y-1.5">
|
||||
{[...Array(4)].map((x, i) => (
|
||||
<SheenLoader className="mx-4 mt-2 flex flex-1" key={i}>
|
||||
<SheenLoader className="mx-4 flex flex-1 md:mx-6" key={i}>
|
||||
<div className="h-16 w-full bg-th-bkg-2" />
|
||||
</SheenLoader>
|
||||
))}
|
||||
|
|
|
@ -24,7 +24,7 @@ export const getStaticPaths = async () => {
|
|||
const response = await fetch(url)
|
||||
const data = await response.json()
|
||||
const paths = data.map((t: any) => ({
|
||||
params: { token: t.symbol },
|
||||
params: { token: t.symbol.toUpperCase() },
|
||||
}))
|
||||
|
||||
return { paths, fallback: false }
|
||||
|
|
|
@ -57,6 +57,6 @@ export const DEFAULT_MARKET_NAME = 'SOL/USDC'
|
|||
|
||||
export const MIN_SOL_BALANCE = 0.04
|
||||
|
||||
export const ACCOUNT_ACTION_MODAL_HEIGHT = '448px'
|
||||
export const ACCOUNT_ACTION_MODAL_HEIGHT = '478px'
|
||||
|
||||
export const ACCOUNT_ACTION_MODAL_INNER_HEIGHT = '386px'
|
||||
export const ACCOUNT_ACTION_MODAL_INNER_HEIGHT = '416px'
|
||||
|
|
Loading…
Reference in New Issue