blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add mango account pk and address to hook

This commit is contained in:
tjs 2023-01-05 23:01:03 -05:00
parent e8cd0b4a7b
commit 9865e85116
9 changed files with 70 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/MangoProvider.tsx
View File

@ -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
}

29
components/account/AccountChart.tsx
View File

@ -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<any>
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 (
<DetailedAreaChart

14
components/account/AccountPage.tsx
View File

@ -56,7 +56,7 @@ const AccountPage = () => {
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"
/>
)}

27
components/account/ActivityFeed.tsx
View File

@ -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<AdvancedFilters>(
DEFAULT_ADVANCED_FILTERS
@ -61,11 +61,10 @@ const ActivityFeed = () => {
const [params, setParams] = useState<string[]>(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 ? (
<Disclosure>
<div className="relative">
{hasFilters ? (

15
components/account/ActivityFeedTable.tsx
View File

@ -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 ? (
<Table className="min-w-full">

10
components/swap/SwapHistoryTable.tsx
View File

@ -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 ? (
<Table>
<thead>

20
components/trade/TradeHistory.tsx
View File

@ -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

7
components/trade/UnsettledTrades.tsx
View File

@ -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

14
hooks/useMangoAccount.ts
View File

@ -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 }
}