use event queue for recent trades until api is ready
This commit is contained in:
tjs
parent
dbcaeee439
commit
777d44860a
|
|
@ -1,7 +1,7 @@
|
|||
import useInterval from '@components/shared/useInterval'
|
||||
import mangoStore, { CLUSTER } from '@store/mangoStore'
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import isEqual from 'lodash/isEqual'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import { useMemo } from 'react'
|
||||
// import isEqual from 'lodash/isEqual'
|
||||
import { floorToDecimal, getDecimalCount } from 'utils/numbers'
|
||||
import Decimal from 'decimal.js'
|
||||
import { ChartTradeType } from 'types'
|
||||
|
|
@ -11,7 +11,10 @@ import useSelectedMarket from 'hooks/useSelectedMarket'
|
|||
|
||||
const RecentTrades = () => {
|
||||
const { t } = useTranslation(['common', 'trade'])
|
||||
const [trades, setTrades] = useState<any[]>([])
|
||||
// const [trades, setTrades] = useState<any[]>([])
|
||||
const fills = mangoStore((s) => s.selectedMarket.fills)
|
||||
console.log('fills', fills)
|
||||
|
||||
const { selectedMarket } = useSelectedMarket()
|
||||
|
||||
const market = useMemo(() => {
|
||||
|
|
@ -33,38 +36,41 @@ const RecentTrades = () => {
|
|||
return selectedMarket?.name.split('/')[1]
|
||||
}, [selectedMarket])
|
||||
|
||||
const fetchTradesForChart = useCallback(async () => {
|
||||
if (!market) return
|
||||
// const fetchRecentTrades = useCallback(async () => {
|
||||
// if (!market) return
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`https://event-history-api-candles.herokuapp.com/trades/address/${market.publicKey}`
|
||||
)
|
||||
const parsedResp = await response.json()
|
||||
const newTrades = parsedResp.data
|
||||
if (!newTrades) return null
|
||||
// try {
|
||||
// const response = await fetch(
|
||||
// `https://event-history-api-candles.herokuapp.com/trades/address/${market.publicKey}`
|
||||
// )
|
||||
// const parsedResp = await response.json()
|
||||
// const newTrades = parsedResp.data
|
||||
// if (!newTrades) return null
|
||||
|
||||
if (newTrades.length && trades.length === 0) {
|
||||
setTrades(newTrades)
|
||||
} else if (newTrades?.length && !isEqual(newTrades[0], trades[0])) {
|
||||
setTrades(newTrades)
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Unable to fetch recent trades', e)
|
||||
}
|
||||
}, [market, trades])
|
||||
// if (newTrades.length && trades.length === 0) {
|
||||
// setTrades(newTrades)
|
||||
// } else if (newTrades?.length && !isEqual(newTrades[0], trades[0])) {
|
||||
// setTrades(newTrades)
|
||||
// }
|
||||
// } catch (e) {
|
||||
// console.error('Unable to fetch recent trades', e)
|
||||
// }
|
||||
// }, [market, trades])
|
||||
|
||||
useEffect(() => {
|
||||
if (CLUSTER === 'mainnet-beta') {
|
||||
fetchTradesForChart()
|
||||
}
|
||||
}, [fetchTradesForChart])
|
||||
// useEffect(() => {
|
||||
// if (CLUSTER === 'mainnet-beta') {
|
||||
// fetchRecentTrades()
|
||||
// }
|
||||
// }, [fetchRecentTrades])
|
||||
|
||||
useInterval(async () => {
|
||||
if (CLUSTER === 'mainnet-beta') {
|
||||
fetchTradesForChart()
|
||||
}
|
||||
}, 50000)
|
||||
// if (CLUSTER === 'mainnet-beta') {
|
||||
// fetchRecentTrades()
|
||||
// }
|
||||
const actions = mangoStore.getState().actions
|
||||
actions.loadMarketFills()
|
||||
}, 5000)
|
||||
|
||||
return (
|
||||
<div className="thin-scroll h-full overflow-y-scroll px-2">
|
||||
<table className="min-w-full">
|
||||
|
|
@ -76,12 +82,12 @@ const RecentTrades = () => {
|
|||
<th className="py-2 font-normal">
|
||||
{t('trade:size')} ({baseSymbol})
|
||||
</th>
|
||||
<th className="py-2 font-normal">{t('time')}</th>
|
||||
{/* <th className="py-2 font-normal">{t('time')}</th> */}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{!!trades.length &&
|
||||
trades.map((trade: ChartTradeType, i: number) => {
|
||||
{!!fills.length &&
|
||||
fills.map((trade: ChartTradeType, i: number) => {
|
||||
const formattedPrice = market?.tickSize
|
||||
? floorToDecimal(trade.price, getDecimalCount(market.tickSize))
|
||||
: new Decimal(trade?.price || 0)
|
||||
|
|
@ -104,9 +110,9 @@ const RecentTrades = () => {
|
|||
<td className="pb-1.5 text-right">
|
||||
{formattedSize.toFixed()}
|
||||
</td>
|
||||
<td className="pb-1.5 text-right text-th-fgd-4">
|
||||
{/* <td className="pb-1.5 text-right text-th-fgd-4">
|
||||
{trade.time && new Date(trade.time).toLocaleTimeString()}
|
||||
</td>
|
||||
</td> */}
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -20,5 +20,10 @@ export default function useSelectedMarket() {
|
|||
} else return 0
|
||||
}, [selectedMarket, group])
|
||||
|
||||
return { selectedMarket, price }
|
||||
const serumOrPerpMarket =
|
||||
selectedMarket instanceof Serum3Market
|
||||
? group?.getSerum3ExternalMarket(selectedMarket.serumMarketExternal)
|
||||
: selectedMarket
|
||||
|
||||
return { selectedMarket, price, serumOrPerpMarket }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -193,6 +193,7 @@ export type MangoStore = {
|
|||
selectedMarket: {
|
||||
name: string
|
||||
current: Serum3Market | PerpMarket | undefined
|
||||
fills: any
|
||||
orderbook: Orderbook
|
||||
}
|
||||
serumMarkets: Serum3Market[]
|
||||
|
|
@ -249,6 +250,7 @@ export type MangoStore = {
|
|||
fetchWalletTokens: (wallet: Wallet) => Promise<void>
|
||||
connectMangoClientWithWallet: (wallet: WalletAdapter) => Promise<void>
|
||||
reloadGroup: () => Promise<void>
|
||||
loadMarketFills: () => Promise<void>
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -291,6 +293,7 @@ const mangoStore = create<MangoStore>()(
|
|||
selectedMarket: {
|
||||
name: 'ETH/USDC',
|
||||
current: undefined,
|
||||
fills: [],
|
||||
orderbook: {
|
||||
bids: [],
|
||||
asks: [],
|
||||
|
|
@ -809,6 +812,39 @@ const mangoStore = create<MangoStore>()(
|
|||
})
|
||||
}
|
||||
},
|
||||
async loadMarketFills() {
|
||||
const set = get().set
|
||||
const selectedMarket = get().selectedMarket.current
|
||||
const group = get().group
|
||||
const client = get().client
|
||||
const connection = get().connection
|
||||
try {
|
||||
let serumMarket
|
||||
let perpMarket
|
||||
if (!group || !selectedMarket) return
|
||||
|
||||
if (selectedMarket instanceof Serum3Market) {
|
||||
serumMarket = group.getSerum3ExternalMarket(
|
||||
selectedMarket.serumMarketExternal
|
||||
)
|
||||
} else {
|
||||
perpMarket = selectedMarket
|
||||
}
|
||||
|
||||
let loadedFills: any[] = []
|
||||
if (serumMarket) {
|
||||
loadedFills = await serumMarket.loadFills(connection, 10000)
|
||||
loadedFills = loadedFills.filter((f) => !f?.eventFlags?.maker)
|
||||
} else if (perpMarket) {
|
||||
loadedFills = await perpMarket.loadFills(client)
|
||||
}
|
||||
set((state) => {
|
||||
state.selectedMarket.fills = loadedFills
|
||||
})
|
||||
} catch (err) {
|
||||
console.log('Error fetching fills:', err)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
|
||||
"@blockworks-foundation/mango-v4@https://tylersssss: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@github.com/blockworks-foundation/mango-v4.git#main":
|
||||
version "0.0.1-beta.6"
|
||||
resolved "https://tylersssss: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@github.com/blockworks-foundation/mango-v4.git#57b05259f99d750d3a75f9033080800d5dc450b1"
|
||||
resolved "https://tylersssss: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@github.com/blockworks-foundation/mango-v4.git#80809c640406ea79ebd286b284b89f63803b16bf"
|
||||
dependencies:
|
||||
"@project-serum/anchor" "^0.25.0"
|
||||
"@project-serum/serum" "^0.13.65"
|
||||
|
|
|
|||
Loading…
Reference in New Issue