2023-09-15 11:53:40 -07:00
|
|
|
import useStakeRates from 'hooks/useStakeRates'
|
2023-09-14 21:24:29 -07:00
|
|
|
import { formatTokenSymbol } from 'utils/tokens'
|
2023-09-15 11:53:40 -07:00
|
|
|
import SheenLoader from './shared/SheenLoader'
|
|
|
|
import { useMemo } from 'react'
|
|
|
|
import Decimal from 'decimal.js'
|
|
|
|
import useMangoGroup from 'hooks/useMangoGroup'
|
|
|
|
import FormatNumericValue from './shared/FormatNumericValue'
|
2023-09-14 21:24:29 -07:00
|
|
|
|
2023-09-12 17:37:41 -07:00
|
|
|
const AccountStats = ({ token }: { token: string }) => {
|
2023-09-15 11:53:40 -07:00
|
|
|
const { data: stakeRates, isLoading: loadingRates } = useStakeRates()
|
|
|
|
const { group } = useMangoGroup()
|
|
|
|
|
|
|
|
const solBank = useMemo(() => {
|
|
|
|
return group?.banksMapByName.get('SOL')?.[0]
|
|
|
|
}, [group, token])
|
|
|
|
|
|
|
|
const tokenBank = useMemo(() => {
|
|
|
|
return group?.banksMapByName.get(token)?.[0]
|
|
|
|
}, [group, token])
|
|
|
|
|
|
|
|
const solDeposits = useMemo(() => {
|
|
|
|
if (!solBank) return null
|
|
|
|
return solBank.uiDeposits()
|
|
|
|
}, [solBank])
|
|
|
|
|
|
|
|
const tokenDeposits = useMemo(() => {
|
|
|
|
if (!tokenBank) return null
|
|
|
|
return tokenBank.uiDeposits()
|
|
|
|
}, [tokenBank])
|
|
|
|
|
|
|
|
const solAvailable = useMemo(() => {
|
|
|
|
if (!solBank || !solDeposits) return 0
|
|
|
|
const availableVaultBalance = group
|
|
|
|
? group.getTokenVaultBalanceByMintUi(solBank.mint) -
|
|
|
|
solDeposits * solBank.minVaultToDepositsRatio
|
|
|
|
: 0
|
|
|
|
return Decimal.max(0, availableVaultBalance.toFixed(solBank.mintDecimals))
|
|
|
|
}, [solBank, solDeposits, group])
|
|
|
|
|
2023-09-12 17:37:41 -07:00
|
|
|
return (
|
2023-09-14 06:18:39 -07:00
|
|
|
<>
|
2023-09-14 21:24:29 -07:00
|
|
|
<h2 className="mb-4 text-2xl">{`Boosted ${formatTokenSymbol(token)}`}</h2>
|
2023-09-14 22:57:39 -07:00
|
|
|
<div className="grid grid-cols-2 gap-6 md:grid-cols-1">
|
2023-09-12 17:37:41 -07:00
|
|
|
<div>
|
2023-09-15 11:53:40 -07:00
|
|
|
<p className="mb-1">Max Est. APY</p>
|
|
|
|
<span className="text-2xl font-bold">
|
|
|
|
{loadingRates ? (
|
|
|
|
<SheenLoader className="mt-0.5">
|
|
|
|
<div className="h-5 w-10 bg-th-bkg-3" />
|
|
|
|
</SheenLoader>
|
|
|
|
) : stakeRates?.[token.toLowerCase()] ? (
|
|
|
|
`${(stakeRates?.[token.toLowerCase()] * 100).toFixed(2)}%`
|
|
|
|
) : null}
|
|
|
|
% SOL
|
|
|
|
</span>
|
2023-09-12 17:37:41 -07:00
|
|
|
</div>
|
|
|
|
<div>
|
2023-09-14 06:18:39 -07:00
|
|
|
<p className="mb-1">Max Leverage</p>
|
|
|
|
<span className="text-2xl font-bold">3x</span>
|
2023-09-12 17:37:41 -07:00
|
|
|
</div>
|
|
|
|
<div>
|
2023-09-14 06:18:39 -07:00
|
|
|
<p className="mb-1">Capacity Remaining</p>
|
2023-09-15 11:53:40 -07:00
|
|
|
<span className="text-2xl font-bold">
|
|
|
|
<FormatNumericValue value={solAvailable} decimals={0} /> SOL
|
|
|
|
</span>
|
2023-09-12 17:37:41 -07:00
|
|
|
</div>
|
|
|
|
<div>
|
2023-09-14 06:18:39 -07:00
|
|
|
<p className="mb-1">Total Staked</p>
|
2023-09-15 11:53:40 -07:00
|
|
|
<span className="text-2xl font-bold">
|
|
|
|
<FormatNumericValue value={tokenDeposits || 0} decimals={1} />{' '}
|
|
|
|
{token}
|
|
|
|
</span>
|
2023-09-14 06:18:39 -07:00
|
|
|
</div>
|
2023-09-12 17:37:41 -07:00
|
|
|
</div>
|
2023-09-14 06:18:39 -07:00
|
|
|
</>
|
2023-09-12 17:37:41 -07:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default AccountStats
|