add size buttons to add stake form
This commit is contained in:
saml33
parent
2b8b095495
commit
e81a1defdb
|
|
@ -35,6 +35,8 @@ import { Disclosure } from '@headlessui/react'
|
|||
import SheenLoader from './shared/SheenLoader'
|
||||
import useLeverageMax from 'hooks/useLeverageMax'
|
||||
import { sleep } from 'utils'
|
||||
import ButtonGroup from './forms/ButtonGroup'
|
||||
import Decimal from 'decimal.js'
|
||||
|
||||
const set = mangoStore.getState().set
|
||||
|
||||
|
|
@ -82,6 +84,7 @@ export const walletBalanceForToken = (
|
|||
function StakeForm({ token: selectedToken }: StakeFormProps) {
|
||||
const { t } = useTranslation(['common', 'account'])
|
||||
const [inputAmount, setInputAmount] = useState('')
|
||||
const [sizePercentage, setSizePercentage] = useState('')
|
||||
const submitting = mangoStore((s) => s.submittingBoost)
|
||||
const [leverage, setLeverage] = useState(1)
|
||||
const [refreshingWalletTokens, setRefreshingWalletTokens] = useState(false)
|
||||
|
|
@ -93,7 +96,7 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
|
|||
borrowBankBorrowRate,
|
||||
leveragedAPY,
|
||||
estimatedNetAPY,
|
||||
collateralFeeAPY
|
||||
collateralFeeAPY,
|
||||
} = useBankRates(selectedToken, leverage)
|
||||
const leverageMax = useLeverageMax(selectedToken) * 0.9 // Multiplied by 0.975 becuase you cant actually get to the end of the inifinite geometric series?
|
||||
|
||||
|
|
@ -116,7 +119,6 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
|
|||
return price
|
||||
}, [stakeBank, borrowBank, leverage])
|
||||
|
||||
|
||||
const tokenPositionsFull = useMemo(() => {
|
||||
if (!stakeBank || !usedTokens.length || !totalTokens.length) return false
|
||||
const hasTokenPosition = usedTokens.find(
|
||||
|
|
@ -137,6 +139,19 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
|
|||
setInputAmount(max.toFixed())
|
||||
}, [tokenMax])
|
||||
|
||||
const handleSizePercentage = useCallback(
|
||||
(percentage: string) => {
|
||||
if (!stakeBank) return
|
||||
setSizePercentage(percentage)
|
||||
const amount = floorToDecimal(
|
||||
new Decimal(percentage).div(100).mul(tokenMax.maxAmount),
|
||||
stakeBank.mintDecimals,
|
||||
)
|
||||
setInputAmount(amount.toFixed())
|
||||
},
|
||||
[tokenMax, stakeBank],
|
||||
)
|
||||
|
||||
const amountToBorrow = useMemo(() => {
|
||||
const borrowPrice = borrowBank?.uiPrice
|
||||
const stakePrice = stakeBank?.uiPrice
|
||||
|
|
@ -146,7 +161,6 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
|
|||
return borrowAmount
|
||||
}, [leverage, borrowBank, stakeBank, inputAmount])
|
||||
|
||||
|
||||
const handleRefreshWalletBalances = useCallback(async () => {
|
||||
if (!publicKey) return
|
||||
const actions = mangoStore.getState().actions
|
||||
|
|
@ -159,7 +173,7 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
|
|||
const client = mangoStore.getState().client
|
||||
const group = mangoStore.getState().group
|
||||
const actions = mangoStore.getState().actions
|
||||
const mangoAccountsLength = (mangoStore.getState().mangoAccounts).length
|
||||
const mangoAccountsLength = mangoStore.getState().mangoAccounts.length
|
||||
const mangoAccount = mangoStore.getState().mangoAccount.current
|
||||
|
||||
if (!group || !stakeBank || !publicKey) return
|
||||
|
|
@ -290,6 +304,14 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-2 mt-2">
|
||||
<ButtonGroup
|
||||
activeValue={sizePercentage}
|
||||
onChange={(p) => handleSizePercentage(p)}
|
||||
values={['10', '25', '50', '75', '100']}
|
||||
unit="%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<div className="flex items-center justify-between">
|
||||
|
|
|
|||
|
|
@ -148,7 +148,8 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
|
|||
const actions = mangoStore.getState().actions
|
||||
let mangoAccount = mangoStore.getState().mangoAccount.current
|
||||
|
||||
if (!group || !stakeBank || !borrowBank || !publicKey || !mangoAccount) return
|
||||
if (!group || !stakeBank || !borrowBank || !publicKey || !mangoAccount)
|
||||
return
|
||||
|
||||
setSubmitting(true)
|
||||
try {
|
||||
|
|
@ -157,7 +158,10 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
|
|||
title: 'Sending transaction 1 of 2',
|
||||
type: 'info',
|
||||
})
|
||||
console.log('unstake and swap', mangoAccount.getTokenBalanceUi(borrowBank))
|
||||
console.log(
|
||||
'unstake and swap',
|
||||
mangoAccount.getTokenBalanceUi(borrowBank),
|
||||
)
|
||||
|
||||
const { signature: tx } = await unstakeAndSwap(
|
||||
client,
|
||||
|
|
@ -208,7 +212,7 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
|
|||
type: 'error',
|
||||
})
|
||||
}
|
||||
}, [stakeBank, publicKey, inputAmount])
|
||||
}, [borrowBank, stakeBank, publicKey, inputAmount])
|
||||
|
||||
const showInsufficientBalance =
|
||||
tokenMax.maxAmount < Number(inputAmount) ||
|
||||
|
|
@ -296,29 +300,32 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
|
|||
<Disclosure>
|
||||
{({ open }) => (
|
||||
<>
|
||||
{stakeBank.name == 'USDC'
|
||||
?
|
||||
{stakeBank.name == 'USDC' ? (
|
||||
<></>
|
||||
:
|
||||
<>
|
||||
<Disclosure.Button className={`w-full rounded-xl border-2 border-th-bkg-3 px-4 py-3 text-left focus:outline-none ${open ? 'rounded-b-none border-b-0' : '' }`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="font-medium">Staked Amount</p>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-lg font-bold text-th-fgd-1">
|
||||
<FormatNumericValue
|
||||
value={tokenMax.maxAmount}
|
||||
decimals={stakeBank.mintDecimals}
|
||||
/>
|
||||
</span>
|
||||
<ChevronDownIcon
|
||||
className={`${open ? 'rotate-180' : ''
|
||||
) : (
|
||||
<>
|
||||
<Disclosure.Button
|
||||
className={`w-full rounded-xl border-2 border-th-bkg-3 px-4 py-3 text-left focus:outline-none ${
|
||||
open ? 'rounded-b-none border-b-0' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="font-medium">Staked Amount</p>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-lg font-bold text-th-fgd-1">
|
||||
<FormatNumericValue
|
||||
value={tokenMax.maxAmount}
|
||||
decimals={stakeBank.mintDecimals}
|
||||
/>
|
||||
</span>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : ''
|
||||
} h-6 w-6 shrink-0 text-th-fgd-1`}
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
</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">Staked Amount</p>
|
||||
|
|
@ -333,10 +340,11 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
|
|||
<p className="text-th-fgd-4">USDC borrowed</p>
|
||||
{borrowBank ? (
|
||||
<span
|
||||
className={`font-bold ${borrowed > 0.001
|
||||
? 'text-th-fgd-1'
|
||||
: 'text-th-bkg-4'
|
||||
}`}
|
||||
className={`font-bold ${
|
||||
borrowed > 0.001
|
||||
? 'text-th-fgd-1'
|
||||
: 'text-th-bkg-4'
|
||||
}`}
|
||||
>
|
||||
<FormatNumericValue
|
||||
value={borrowed}
|
||||
|
|
@ -345,8 +353,9 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
|
|||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</Disclosure.Panel></>
|
||||
}
|
||||
</Disclosure.Panel>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
|
|
|
|||
Loading…
Reference in New Issue