diff --git a/components/AccountStats.tsx b/components/AccountStats.tsx index 8797b3f..2bb783d 100644 --- a/components/AccountStats.tsx +++ b/components/AccountStats.tsx @@ -11,7 +11,7 @@ const AccountStats = ({ token }: { token: string }) => { const solBank = useMemo(() => { return group?.banksMapByName.get('SOL')?.[0] - }, [group, token]) + }, [group]) const tokenBank = useMemo(() => { return group?.banksMapByName.get(token)?.[0] diff --git a/components/Positions.tsx b/components/Positions.tsx index b378736..9733795 100644 --- a/components/Positions.tsx +++ b/components/Positions.tsx @@ -7,36 +7,23 @@ import { formatTokenSymbol } from 'utils/tokens' import mangoStore from '@store/mangoStore' import Switch from './forms/Switch' import useLocalStorageState from 'hooks/useLocalStorageState' -import useStakeRates from 'hooks/useStakeRates' -import SheenLoader from './shared/SheenLoader' import useStakeAccounts from 'hooks/useStakeAccounts' import FormatNumericValue from './shared/FormatNumericValue' import { Bank, - Group, MangoAccount, toUiDecimalsForQuote, } from '@blockworks-foundation/mango-v4' +import useBankRates from 'hooks/useBankRates' const set = mangoStore.getState().set - const BORROW_TOKEN = 'SOL' -const getLeverage = (group: Group, mangoAccount: MangoAccount): number => { - if (!group || !mangoAccount) return 0 - const accountValue = toUiDecimalsForQuote( - mangoAccount.getEquity(group).toNumber(), - ) - - const assetsValue = toUiDecimalsForQuote( - mangoAccount.getAssetsValue(group).toNumber(), - ) - - if (isNaN(assetsValue / accountValue)) { - return 0 - } else { - return Math.abs(1 - assetsValue / accountValue) + 1 - } +type Position = { + borrowBalance: number + stakeBalance: number + bank: Bank + acct: MangoAccount | undefined } const getLiquidationRatio = ( @@ -57,7 +44,6 @@ const Positions = ({ setActiveTab: (tab: string) => void }) => { const { group } = useMangoGroup() - const { data: stakeRates, isLoading: loadingRates } = useStakeRates() const [showInactivePositions, setShowInactivePositions] = useLocalStorageState(SHOW_INACTIVE_POSITIONS_KEY, true) const { stakeAccounts } = useStakeAccounts() @@ -100,13 +86,6 @@ const Positions = ({ return positions.filter((pos) => pos.stakeBalance > 0).length }, [positions]) - const handleAddOrManagePosition = (token: string) => { - setActiveTab('Stake') - set((state) => { - state.selectedToken = token - }) - } - return ( <>
@@ -122,92 +101,14 @@ const Positions = ({
{positions.length ? ( - positions.map((position, i) => { - const { stakeBalance, borrowBalance, bank, acct } = position - return bank ? ( -
-
-
-
- -
-
-

{formatTokenSymbol(bank.name)}

- - {stakeBalance ? 'Opened 2 weeks ago' : 'No Position'} - -
-
- -
-
-
-

Position Size

- - {' '} - {formatTokenSymbol(bank.name)} - -
-
-

Est. APY

- - {loadingRates ? ( - -
- - ) : stakeRates?.[bank.name.toLowerCase()] ? ( - `${( - stakeRates?.[bank.name.toLowerCase()] * 100 - ).toFixed(1)}%` - ) : null} - -
-
-

Leverage

- - {group && acct - ? getLeverage(group, acct).toFixed(2) - : 0.0} - x - -
- {/*
-

Earned

- - {stakeBalance - ? `X.XX ${formatTokenSymbol(bank.name)}` - : `0 ${formatTokenSymbol(bank.name)}`} - -
*/} -
-

Est. Liquidation Ratio

- - {borrowBalance && borrowBank - ? getLiquidationRatio( - borrowBalance, - stakeBalance, - bank, - borrowBank, - ) - : '0.00'}{' '} - {`${formatTokenSymbol(bank.name)}/${BORROW_TOKEN}`} - -
-
-
+ positions.map((position) => { + return position.bank ? ( + ) : null }) ) : ( @@ -220,4 +121,113 @@ const Positions = ({ ) } +const PositionItem = ({ + position, + setActiveTab, + borrowBank, +}: { + position: Position + setActiveTab: (v: string) => void + borrowBank: Bank | undefined +}) => { + const { group } = useMangoGroup() + const { stakeBalance, borrowBalance, bank, acct } = position + + const handleAddOrManagePosition = (token: string) => { + setActiveTab('Stake') + set((state) => { + state.selectedToken = token + }) + } + + const leverage = useMemo(() => { + if (!group || !acct) return 0 + const accountValue = toUiDecimalsForQuote(acct.getEquity(group).toNumber()) + + const assetsValue = toUiDecimalsForQuote( + acct.getAssetsValue(group).toNumber(), + ) + + if (isNaN(assetsValue / accountValue)) { + return 0 + } else { + return Math.abs(1 - assetsValue / accountValue) + 1 + } + }, [group, acct]) + + const { estimatedNetAPY } = useBankRates(bank.name, leverage) + + return ( +
+
+
+
+ +
+
+

{formatTokenSymbol(bank.name)}

+ + {stakeBalance ? 'Opened 2 weeks ago' : 'No Position'} + +
+
+ +
+
+
+

Position Size

+ + {' '} + {formatTokenSymbol(bank.name)} + +
+
+

Est. APY

+ + % + +
+
+

Leverage

+ + {leverage ? leverage.toFixed(2) : 0.0}x + +
+ {/*
+

Earned

+ + {stakeBalance + ? `X.XX ${formatTokenSymbol(bank.name)}` + : `0 ${formatTokenSymbol(bank.name)}`} + +
*/} +
+

Est. Liquidation Ratio

+ + {borrowBalance && borrowBank + ? getLiquidationRatio( + borrowBalance, + stakeBalance, + bank, + borrowBank, + ) + : '0.00'}{' '} + {`${formatTokenSymbol(bank.name)}/${BORROW_TOKEN}`} + +
+
+
+ ) +} + export default Positions diff --git a/components/TokenButton.tsx b/components/TokenButton.tsx index c3c03cc..b2d0fd6 100644 --- a/components/TokenButton.tsx +++ b/components/TokenButton.tsx @@ -13,7 +13,7 @@ const TokenButton = ({ handleTokenSelect: (v: string) => void }) => { const leverage = useLeverageMax(tokenName) - const { estimatedNetAPY } = useBankRates(tokenName, leverage) + const { estimatedMaxAPY } = useBankRates(tokenName, leverage) return (
diff --git a/hooks/useBankRates.ts b/hooks/useBankRates.ts index 064a1c7..04eb807 100644 --- a/hooks/useBankRates.ts +++ b/hooks/useBankRates.ts @@ -1,14 +1,16 @@ -import { useEffect, useMemo } from 'react' +import { useMemo } from 'react' import useStakeRates from './useStakeRates' import useMangoGroup from './useMangoGroup' -import mangoStore from '@store/mangoStore' +// import mangoStore from '@store/mangoStore' +import useLeverageMax from './useLeverageMax' -const set = mangoStore.getState().set +// const set = mangoStore.getState().set export default function useBankRates(selectedToken: string, leverage: number) { const { data: stakeRates } = useStakeRates() const { group } = useMangoGroup() - const estimatedMaxAPY = mangoStore((s) => s.estimatedMaxAPY.current) + // const estimatedMaxAPY = mangoStore((s) => s.estimatedMaxAPY.current) + const leverageMax = useLeverageMax(selectedToken) const stakeBank = useMemo(() => { return group?.banksMapByName.get(selectedToken)?.[0] @@ -40,12 +42,20 @@ export default function useBankRates(selectedToken: string, leverage: number) { ) }, [borrowBankStakeRate, leverage, borrowBankBorrowRate]) - useEffect(() => { - set((s) => { - s.estimatedMaxAPY.current = - borrowBankStakeRate * 3 - borrowBankBorrowRate * 2 - }) - }, [borrowBankStakeRate, borrowBankBorrowRate]) + // useEffect(() => { + // set((s) => { + // s.estimatedMaxAPY.current = + // borrowBankStakeRate * leverageMax - + // borrowBankBorrowRate * (leverageMax - 1) + // }) + // }, [borrowBankStakeRate, borrowBankBorrowRate, leverageMax]) + + const estimatedMaxAPY = useMemo(() => { + return ( + borrowBankStakeRate * leverageMax - + borrowBankBorrowRate * (leverageMax - 1) + ) + }, [borrowBankStakeRate, borrowBankBorrowRate, leverageMax]) return { stakeBankDepositRate,