add size buttons to add stake form
This commit is contained in:
parent
2b8b095495
commit
e81a1defdb
|
@ -35,6 +35,8 @@ import { Disclosure } from '@headlessui/react'
|
||||||
import SheenLoader from './shared/SheenLoader'
|
import SheenLoader from './shared/SheenLoader'
|
||||||
import useLeverageMax from 'hooks/useLeverageMax'
|
import useLeverageMax from 'hooks/useLeverageMax'
|
||||||
import { sleep } from 'utils'
|
import { sleep } from 'utils'
|
||||||
|
import ButtonGroup from './forms/ButtonGroup'
|
||||||
|
import Decimal from 'decimal.js'
|
||||||
|
|
||||||
const set = mangoStore.getState().set
|
const set = mangoStore.getState().set
|
||||||
|
|
||||||
|
@ -82,6 +84,7 @@ export const walletBalanceForToken = (
|
||||||
function StakeForm({ token: selectedToken }: StakeFormProps) {
|
function StakeForm({ token: selectedToken }: StakeFormProps) {
|
||||||
const { t } = useTranslation(['common', 'account'])
|
const { t } = useTranslation(['common', 'account'])
|
||||||
const [inputAmount, setInputAmount] = useState('')
|
const [inputAmount, setInputAmount] = useState('')
|
||||||
|
const [sizePercentage, setSizePercentage] = useState('')
|
||||||
const submitting = mangoStore((s) => s.submittingBoost)
|
const submitting = mangoStore((s) => s.submittingBoost)
|
||||||
const [leverage, setLeverage] = useState(1)
|
const [leverage, setLeverage] = useState(1)
|
||||||
const [refreshingWalletTokens, setRefreshingWalletTokens] = useState(false)
|
const [refreshingWalletTokens, setRefreshingWalletTokens] = useState(false)
|
||||||
|
@ -93,7 +96,7 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
|
||||||
borrowBankBorrowRate,
|
borrowBankBorrowRate,
|
||||||
leveragedAPY,
|
leveragedAPY,
|
||||||
estimatedNetAPY,
|
estimatedNetAPY,
|
||||||
collateralFeeAPY
|
collateralFeeAPY,
|
||||||
} = useBankRates(selectedToken, leverage)
|
} = 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?
|
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
|
return price
|
||||||
}, [stakeBank, borrowBank, leverage])
|
}, [stakeBank, borrowBank, leverage])
|
||||||
|
|
||||||
|
|
||||||
const tokenPositionsFull = useMemo(() => {
|
const tokenPositionsFull = useMemo(() => {
|
||||||
if (!stakeBank || !usedTokens.length || !totalTokens.length) return false
|
if (!stakeBank || !usedTokens.length || !totalTokens.length) return false
|
||||||
const hasTokenPosition = usedTokens.find(
|
const hasTokenPosition = usedTokens.find(
|
||||||
|
@ -137,6 +139,19 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
|
||||||
setInputAmount(max.toFixed())
|
setInputAmount(max.toFixed())
|
||||||
}, [tokenMax])
|
}, [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 amountToBorrow = useMemo(() => {
|
||||||
const borrowPrice = borrowBank?.uiPrice
|
const borrowPrice = borrowBank?.uiPrice
|
||||||
const stakePrice = stakeBank?.uiPrice
|
const stakePrice = stakeBank?.uiPrice
|
||||||
|
@ -146,7 +161,6 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
|
||||||
return borrowAmount
|
return borrowAmount
|
||||||
}, [leverage, borrowBank, stakeBank, inputAmount])
|
}, [leverage, borrowBank, stakeBank, inputAmount])
|
||||||
|
|
||||||
|
|
||||||
const handleRefreshWalletBalances = useCallback(async () => {
|
const handleRefreshWalletBalances = useCallback(async () => {
|
||||||
if (!publicKey) return
|
if (!publicKey) return
|
||||||
const actions = mangoStore.getState().actions
|
const actions = mangoStore.getState().actions
|
||||||
|
@ -159,7 +173,7 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
|
||||||
const client = mangoStore.getState().client
|
const client = mangoStore.getState().client
|
||||||
const group = mangoStore.getState().group
|
const group = mangoStore.getState().group
|
||||||
const actions = mangoStore.getState().actions
|
const actions = mangoStore.getState().actions
|
||||||
const mangoAccountsLength = (mangoStore.getState().mangoAccounts).length
|
const mangoAccountsLength = mangoStore.getState().mangoAccounts.length
|
||||||
const mangoAccount = mangoStore.getState().mangoAccount.current
|
const mangoAccount = mangoStore.getState().mangoAccount.current
|
||||||
|
|
||||||
if (!group || !stakeBank || !publicKey) return
|
if (!group || !stakeBank || !publicKey) return
|
||||||
|
@ -290,6 +304,14 @@ function StakeForm({ token: selectedToken }: StakeFormProps) {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
<div className="mt-4">
|
<div className="mt-4">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
|
|
|
@ -148,7 +148,8 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
|
||||||
const actions = mangoStore.getState().actions
|
const actions = mangoStore.getState().actions
|
||||||
let mangoAccount = mangoStore.getState().mangoAccount.current
|
let mangoAccount = mangoStore.getState().mangoAccount.current
|
||||||
|
|
||||||
if (!group || !stakeBank || !borrowBank || !publicKey || !mangoAccount) return
|
if (!group || !stakeBank || !borrowBank || !publicKey || !mangoAccount)
|
||||||
|
return
|
||||||
|
|
||||||
setSubmitting(true)
|
setSubmitting(true)
|
||||||
try {
|
try {
|
||||||
|
@ -157,7 +158,10 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
|
||||||
title: 'Sending transaction 1 of 2',
|
title: 'Sending transaction 1 of 2',
|
||||||
type: 'info',
|
type: 'info',
|
||||||
})
|
})
|
||||||
console.log('unstake and swap', mangoAccount.getTokenBalanceUi(borrowBank))
|
console.log(
|
||||||
|
'unstake and swap',
|
||||||
|
mangoAccount.getTokenBalanceUi(borrowBank),
|
||||||
|
)
|
||||||
|
|
||||||
const { signature: tx } = await unstakeAndSwap(
|
const { signature: tx } = await unstakeAndSwap(
|
||||||
client,
|
client,
|
||||||
|
@ -208,7 +212,7 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
|
||||||
type: 'error',
|
type: 'error',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}, [stakeBank, publicKey, inputAmount])
|
}, [borrowBank, stakeBank, publicKey, inputAmount])
|
||||||
|
|
||||||
const showInsufficientBalance =
|
const showInsufficientBalance =
|
||||||
tokenMax.maxAmount < Number(inputAmount) ||
|
tokenMax.maxAmount < Number(inputAmount) ||
|
||||||
|
@ -296,12 +300,14 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
|
||||||
<Disclosure>
|
<Disclosure>
|
||||||
{({ open }) => (
|
{({ 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' : '' }`}
|
<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">
|
<div className="flex items-center justify-between">
|
||||||
<p className="font-medium">Staked Amount</p>
|
<p className="font-medium">Staked Amount</p>
|
||||||
|
@ -313,7 +319,8 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
<ChevronDownIcon
|
<ChevronDownIcon
|
||||||
className={`${open ? 'rotate-180' : ''
|
className={`${
|
||||||
|
open ? 'rotate-180' : ''
|
||||||
} h-6 w-6 shrink-0 text-th-fgd-1`}
|
} h-6 w-6 shrink-0 text-th-fgd-1`}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -333,7 +340,8 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
|
||||||
<p className="text-th-fgd-4">USDC borrowed</p>
|
<p className="text-th-fgd-4">USDC borrowed</p>
|
||||||
{borrowBank ? (
|
{borrowBank ? (
|
||||||
<span
|
<span
|
||||||
className={`font-bold ${borrowed > 0.001
|
className={`font-bold ${
|
||||||
|
borrowed > 0.001
|
||||||
? 'text-th-fgd-1'
|
? 'text-th-fgd-1'
|
||||||
: 'text-th-bkg-4'
|
: 'text-th-bkg-4'
|
||||||
}`}
|
}`}
|
||||||
|
@ -345,8 +353,9 @@ function UnstakeForm({ token: selectedToken }: UnstakeFormProps) {
|
||||||
</span>
|
</span>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
</Disclosure.Panel></>
|
</Disclosure.Panel>
|
||||||
}
|
</>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Disclosure>
|
</Disclosure>
|
||||||
|
|
Loading…
Reference in New Issue