diff --git a/components/MangoProvider.tsx b/components/MangoProvider.tsx index a97aad0a..54e6f879 100644 --- a/components/MangoProvider.tsx +++ b/components/MangoProvider.tsx @@ -12,7 +12,7 @@ const actions = mangoStore.getState().actions const HydrateStore = () => { const router = useRouter() const { name: marketName } = router.query - const { mangoAccount } = useMangoAccount() + const { mangoAccountPk, mangoAccountAddress } = useMangoAccount() const connection = mangoStore((s) => s.connection) const fetchData = useCallback(async () => { @@ -33,7 +33,7 @@ const HydrateStore = () => { }, 15000) useInterval(() => { - if (mangoAccount) { + if (mangoAccountAddress) { actions.fetchOpenOrders() } }, 30000) @@ -54,10 +54,10 @@ const HydrateStore = () => { useEffect(() => { const client = mangoStore.getState().client - if (!mangoAccount) return + if (!mangoAccountPk) return const subscriptionId = connection.onAccountChange( - mangoAccount.publicKey, + mangoAccountPk, async (info, context) => { if (info?.lamports === 0) return @@ -98,7 +98,7 @@ const HydrateStore = () => { return () => { connection.removeAccountChangeListener(subscriptionId) } - }, [connection, mangoAccount]) + }, [connection, mangoAccountPk]) return null } diff --git a/components/account/AccountChart.tsx b/components/account/AccountChart.tsx index 58d66eb0..e41f3038 100644 --- a/components/account/AccountChart.tsx +++ b/components/account/AccountChart.tsx @@ -1,7 +1,4 @@ -import { - MangoAccount, - toUiDecimalsForQuote, -} from '@blockworks-foundation/mango-v4' +import { toUiDecimalsForQuote } from '@blockworks-foundation/mango-v4' import { useTranslation } from 'next-i18next' import { useMemo, useState } from 'react' import mangoStore from '@store/mangoStore' @@ -15,13 +12,11 @@ const AccountChart = ({ chartToShow, data, hideChart, - mangoAccount, yKey, }: { chartToShow: string data: Array hideChart: () => void - mangoAccount: MangoAccount yKey: string }) => { const { t } = useTranslation('common') @@ -30,24 +25,28 @@ const AccountChart = ({ const loading = mangoStore((s) => s.mangoAccount.stats.performance.loading) const handleDaysToShow = async (days: string) => { - await actions.fetchAccountPerformance( - mangoAccount.publicKey.toString(), - parseInt(days) - ) - setDaysToShow(days) + const mangoAccount = mangoStore.getState().mangoAccount.current + if (mangoAccount) { + await actions.fetchAccountPerformance( + mangoAccount.publicKey.toString(), + parseInt(days) + ) + setDaysToShow(days) + } } const currentValue = useMemo(() => { - if (chartToShow === 'account-value') { - const group = mangoStore.getState().group + const mangoAccount = mangoStore.getState().mangoAccount.current + const group = mangoStore.getState().group + if (group && mangoAccount && chartToShow === 'account-value') { const currentAccountValue = toUiDecimalsForQuote( - mangoAccount.getEquity(group!)!.toNumber() + mangoAccount.getEquity(group).toNumber() ) const time = Date.now() return [{ account_equity: currentAccountValue, time: time }] } return [] - }, [chartToShow, mangoAccount]) + }, [chartToShow]) return ( { const { t } = useTranslation('common') // const { connected } = useWallet() const group = mangoStore.getState().group - const { mangoAccount } = useMangoAccount() + const { mangoAccount, mangoAccountAddress } = useMangoAccount() const actions = mangoStore.getState().actions const loadPerformanceData = mangoStore( (s) => s.mangoAccount.stats.performance.loading @@ -85,12 +85,11 @@ const AccountPage = () => { ) useEffect(() => { - if (mangoAccount) { - const pubKey = mangoAccount.publicKey.toString() - actions.fetchAccountPerformance(pubKey, 1) - actions.fetchAccountInterestTotals(pubKey) + if (mangoAccountAddress) { + actions.fetchAccountPerformance(mangoAccountAddress, 1) + actions.fetchAccountInterestTotals(mangoAccountAddress) } - }, [actions, mangoAccount]) + }, [actions, mangoAccountAddress]) useEffect(() => { if (mangoAccount && performanceData.length && !chartToShow) { @@ -501,7 +500,6 @@ const AccountPage = () => { chartToShow="account-value" data={performanceData} hideChart={handleHideChart} - mangoAccount={mangoAccount!} yKey="account_equity" /> ) : chartToShow === 'pnl' ? ( @@ -509,7 +507,6 @@ const AccountPage = () => { chartToShow="pnl" data={performanceData} hideChart={handleHideChart} - mangoAccount={mangoAccount!} yKey="pnl" /> ) : ( @@ -522,7 +519,6 @@ const AccountPage = () => { time: d.time, }))} hideChart={handleHideChart} - mangoAccount={mangoAccount!} yKey="interest_value" /> )} diff --git a/components/account/ActivityFeed.tsx b/components/account/ActivityFeed.tsx index 24dbb8f4..8e5c8463 100644 --- a/components/account/ActivityFeed.tsx +++ b/components/account/ActivityFeed.tsx @@ -53,7 +53,7 @@ const DEFAULT_PARAMS = [ const ActivityFeed = () => { const activityFeed = mangoStore((s) => s.activityFeed.feed) const actions = mangoStore.getState().actions - const { mangoAccount } = useMangoAccount() + const { mangoAccountAddress } = useMangoAccount() const [showActivityDetail, setShowActivityDetail] = useState(null) const [advancedFilters, setAdvancedFilters] = useState( DEFAULT_ADVANCED_FILTERS @@ -61,11 +61,10 @@ const ActivityFeed = () => { const [params, setParams] = useState(DEFAULT_PARAMS) useEffect(() => { - if (mangoAccount) { - const pubKey = mangoAccount.publicKey.toString() - actions.fetchActivityFeed(pubKey) + if (mangoAccountAddress) { + actions.fetchActivityFeed(mangoAccountAddress) } - }, [actions, mangoAccount]) + }, [actions, mangoAccountAddress]) const handleShowActivityDetails = (activity: any) => { setShowActivityDetail(activity) @@ -128,12 +127,11 @@ const ActivityFilters = ({ const { t } = useTranslation(['common', 'activity']) const actions = mangoStore.getState().actions const loadActivityFeed = mangoStore((s) => s.activityFeed.loading) - const { mangoAccount } = useMangoAccount() + const { mangoAccountAddress } = useMangoAccount() const [showMobileFilters, setShowMobileFilters] = useState(false) const [hasFilters, setHasFilters] = useState(false) const handleUpdateResults = useCallback(() => { - const mangoAccount = mangoStore.getState().mangoAccount.current const set = mangoStore.getState().set if (params) { setHasFilters(true) @@ -144,32 +142,31 @@ const ActivityFilters = ({ s.activityFeed.feed = [] s.activityFeed.loading = true }) - if (mangoAccount) { - actions.fetchActivityFeed(mangoAccount.publicKey.toString(), 0, params) + if (mangoAccountAddress) { + actions.fetchActivityFeed(mangoAccountAddress, 0, params) } - }, [actions, params]) + }, [actions, params, mangoAccountAddress]) const handleResetFilters = useCallback(async () => { - const mangoAccount = mangoStore.getState().mangoAccount.current const set = mangoStore.getState().set setHasFilters(false) set((s) => { s.activityFeed.feed = [] s.activityFeed.loading = true }) - if (mangoAccount) { - await actions.fetchActivityFeed(mangoAccount.publicKey.toString()) + if (mangoAccountAddress) { + await actions.fetchActivityFeed(mangoAccountAddress) setAdvancedFilters(DEFAULT_ADVANCED_FILTERS) setFilters(DEFAULT_PARAMS) } - }, [actions]) + }, [actions, mangoAccountAddress]) const handleUpdateMobileResults = () => { handleUpdateResults() setShowMobileFilters(false) } - return mangoAccount ? ( + return mangoAccountAddress ? (
{hasFilters ? ( diff --git a/components/account/ActivityFeedTable.tsx b/components/account/ActivityFeedTable.tsx index 57d2a64f..084d7562 100644 --- a/components/account/ActivityFeedTable.tsx +++ b/components/account/ActivityFeedTable.tsx @@ -31,7 +31,7 @@ const ActivityFeedTable = ({ params: string }) => { const { t } = useTranslation(['common', 'activity']) - const { mangoAccount } = useMangoAccount() + const { mangoAccountAddress } = useMangoAccount() const actions = mangoStore.getState().actions const loadActivityFeed = mangoStore((s) => s.activityFeed.loading) const [offset, setOffset] = useState(0) @@ -43,19 +43,14 @@ const ActivityFeedTable = ({ const showTableView = width ? width > breakpoints.md : false const handleShowMore = useCallback(() => { - const mangoAccount = mangoStore.getState().mangoAccount.current const set = mangoStore.getState().set set((s) => { s.activityFeed.loading = true }) - if (!mangoAccount) return + if (!mangoAccountAddress) return setOffset(offset + 25) - actions.fetchActivityFeed( - mangoAccount.publicKey.toString(), - offset + 25, - params - ) - }, [actions, offset, params]) + actions.fetchActivityFeed(mangoAccountAddress, offset + 25, params) + }, [actions, offset, params, mangoAccountAddress]) const getCreditAndDebit = (activity: any) => { const { activity_type } = activity @@ -154,7 +149,7 @@ const ActivityFeedTable = ({ return value } - return mangoAccount && (activityFeed.length || loadActivityFeed) ? ( + return mangoAccountAddress && (activityFeed.length || loadActivityFeed) ? ( <> {showTableView ? ( diff --git a/components/swap/SwapHistoryTable.tsx b/components/swap/SwapHistoryTable.tsx index 689879f6..523e4ba1 100644 --- a/components/swap/SwapHistoryTable.tsx +++ b/components/swap/SwapHistoryTable.tsx @@ -36,7 +36,7 @@ const SwapHistoryTable = () => { const { mangoTokens } = useJupiterMints() const [showSwapDetails, setSwapDetails] = useState('') const actions = mangoStore.getState().actions - const { mangoAccount } = useMangoAccount() + const { mangoAccountAddress } = useMangoAccount() const { width } = useViewport() const showTableView = width ? width > breakpoints.md : false const [preferredExplorer] = useLocalStorageState( @@ -45,17 +45,17 @@ const SwapHistoryTable = () => { ) useEffect(() => { - if (mangoAccount) { - actions.fetchSwapHistory(mangoAccount.publicKey.toString()) + if (mangoAccountAddress) { + actions.fetchSwapHistory(mangoAccountAddress) } - }, [actions, mangoAccount]) + }, [actions, mangoAccountAddress]) const handleShowSwapDetails = (signature: string) => { showSwapDetails ? setSwapDetails('') : setSwapDetails(signature) } return initialLoad ? ( - mangoAccount && swapHistory.length ? ( + mangoAccountAddress && swapHistory.length ? ( showTableView ? (
diff --git a/components/trade/TradeHistory.tsx b/components/trade/TradeHistory.tsx index 5d614c90..2f9eee42 100644 --- a/components/trade/TradeHistory.tsx +++ b/components/trade/TradeHistory.tsx @@ -10,7 +10,6 @@ import { TrHead, } from '@components/shared/TableElements' import { NoSymbolIcon } from '@heroicons/react/20/solid' -import { PublicKey } from '@solana/web3.js' import mangoStore from '@store/mangoStore' import useMangoAccount from 'hooks/useMangoAccount' import useSelectedMarket from 'hooks/useSelectedMarket' @@ -29,8 +28,8 @@ const byTimestamp = (a: any, b: any) => { const reverseSide = (side: string) => (side === 'buy' ? 'sell' : 'buy') -const parsedPerpEvent = (mangoAccountPk: PublicKey, event: any) => { - const maker = event.maker.toString() === mangoAccountPk.toString() +const parsedPerpEvent = (mangoAccountAddress: string, event: any) => { + const maker = event.maker.toString() === mangoAccountAddress const orderId = maker ? event.makerOrderId : event.takerOrderId const value = event.quantity * event.price const feeRate = maker @@ -68,14 +67,17 @@ const parsedSerumEvent = (event: any) => { } } -const formatTradeHistory = (mangoAccountPk: PublicKey, tradeHistory: any[]) => { +const formatTradeHistory = ( + mangoAccountAddress: string, + tradeHistory: any[] +) => { return tradeHistory .flat() .map((event) => { if (event.eventFlags || event.nativeQuantityPaid) { return parsedSerumEvent(event) } else if (event.maker) { - return parsedPerpEvent(mangoAccountPk, event) + return parsedPerpEvent(mangoAccountAddress, event) } else { return event } @@ -85,7 +87,7 @@ const formatTradeHistory = (mangoAccountPk: PublicKey, tradeHistory: any[]) => { const TradeHistory = () => { const { selectedMarket } = useSelectedMarket() - const { mangoAccount } = useMangoAccount() + const { mangoAccount, mangoAccountAddress } = useMangoAccount() const fills = mangoStore((s) => s.selectedMarket.fills) const { width } = useViewport() const showTableView = width ? width > breakpoints.md : false @@ -105,7 +107,7 @@ const TradeHistory = () => { }, [mangoAccount, selectedMarket]) const tradeHistoryFromEventQueue = useMemo(() => { - if (!mangoAccount || !selectedMarket) return [] + if (!mangoAccountAddress || !selectedMarket) return [] const mangoAccountFills = fills .filter((fill: any) => { @@ -122,8 +124,8 @@ const TradeHistory = () => { }) .map((fill: any) => ({ ...fill, marketName: selectedMarket.name })) - return formatTradeHistory(mangoAccount.publicKey, mangoAccountFills) - }, [selectedMarket, mangoAccount, openOrderOwner]) + return formatTradeHistory(mangoAccountAddress, mangoAccountFills) + }, [selectedMarket, mangoAccountAddress, openOrderOwner, fills]) if (!selectedMarket) return null diff --git a/components/trade/UnsettledTrades.tsx b/components/trade/UnsettledTrades.tsx index 0022f430..b7c5dd6c 100644 --- a/components/trade/UnsettledTrades.tsx +++ b/components/trade/UnsettledTrades.tsx @@ -92,13 +92,6 @@ const UnsettledTrades = ({ ?.getEquityUi(group, market) || 0, })) .sort((a, b) => sign * (a.pnl - b.pnl)) - console.log( - 'pnl', - filteredAccounts.map((m) => [ - m.mangoAccount.publicKey.toString(), - m.pnl, - ]) - ) const profitableAccount = mangoAccountPnl >= 0 ? mangoAccount : filteredAccounts[0].mangoAccount diff --git a/hooks/useMangoAccount.ts b/hooks/useMangoAccount.ts index c1e0972f..8dda2e43 100644 --- a/hooks/useMangoAccount.ts +++ b/hooks/useMangoAccount.ts @@ -1,12 +1,24 @@ import { MangoAccount } from '@blockworks-foundation/mango-v4' +import { PublicKey } from '@solana/web3.js' import mangoStore from '@store/mangoStore' +import { useMemo } from 'react' export default function useMangoAccount(): { mangoAccount: MangoAccount | undefined initialLoad: boolean + mangoAccountPk: PublicKey | undefined + mangoAccountAddress: string } { const mangoAccount = mangoStore((s) => s.mangoAccount.current) const initialLoad = mangoStore((s) => s.mangoAccount.initialLoad) - return { mangoAccount, initialLoad } + const mangoAccountPk = useMemo(() => { + return mangoAccount?.publicKey + }, [mangoAccount?.publicKey]) + + const mangoAccountAddress = useMemo(() => { + return mangoAccountPk?.toString() || '' + }, [mangoAccountPk]) + + return { mangoAccount, initialLoad, mangoAccountAddress, mangoAccountPk } }