combine market state keys
This commit is contained in:
parent
64437f6a85
commit
3ff07f452e
|
@ -7,7 +7,7 @@ import { ArrowUpIcon, ArrowDownIcon } from '@heroicons/react/solid'
|
|||
import UiLock from './UiLock'
|
||||
|
||||
const MarketHeader = () => {
|
||||
const selectedMarket = useMangoStore((s) => s.selectedMarket)
|
||||
const selectedMarketName = useMangoStore((s) => s.selectedMarket.name)
|
||||
const markPrice = useMarkPrice()
|
||||
|
||||
return (
|
||||
|
@ -17,14 +17,12 @@ const MarketHeader = () => {
|
|||
alt=""
|
||||
width="32"
|
||||
height="32"
|
||||
src={`/assets/icons/${selectedMarket.name
|
||||
src={`/assets/icons/${selectedMarketName
|
||||
.split('/')[0]
|
||||
.toLowerCase()}.svg`}
|
||||
className={`mr-3`}
|
||||
/>
|
||||
<div className={`font-semibold text-lg pr-4`}>
|
||||
{selectedMarket.name}
|
||||
</div>
|
||||
<div className={`font-semibold text-lg pr-4`}>{selectedMarketName}</div>
|
||||
<div className={`text-lg pr-4`}>{markPrice}</div>
|
||||
<ChangePercentage change={markPrice} />
|
||||
</div>
|
||||
|
|
|
@ -3,12 +3,13 @@ import useMangoStore from '../stores/useMangoStore'
|
|||
|
||||
const MarketSelect = () => {
|
||||
const { spotMarkets } = useMarketList()
|
||||
const selectedMarket = useMangoStore((s) => s.selectedMarket)
|
||||
const selectedMarketName = useMangoStore((s) => s.selectedMarket.name)
|
||||
const setMangoStore = useMangoStore((s) => s.set)
|
||||
|
||||
const handleChange = (mktName) => {
|
||||
setMangoStore((state) => {
|
||||
state.selectedMarket = { name: mktName, address: spotMarkets[mktName] }
|
||||
state.selectedMarket.name = mktName
|
||||
state.selectedMarket.address = spotMarkets[mktName]
|
||||
})
|
||||
}
|
||||
|
||||
|
@ -21,7 +22,7 @@ const MarketSelect = () => {
|
|||
<div
|
||||
className={`flex px-2 py-1 mr-2 rounded-md cursor-pointer default-transition bg-th-bkg-2
|
||||
${
|
||||
selectedMarket.name === name
|
||||
selectedMarketName === name
|
||||
? `text-th-primary`
|
||||
: `text-th-fgd-1 opacity-50 hover:opacity-100`
|
||||
}
|
||||
|
|
|
@ -34,13 +34,13 @@ export default function TradeForm() {
|
|||
const [ioc, setIoc] = useState(false)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
|
||||
const orderBookRef = useRef(useMangoStore.getState().market.orderBook)
|
||||
const orderBookRef = useRef(useMangoStore.getState().selectedMarket.orderBook)
|
||||
const orderbook = orderBookRef.current[0]
|
||||
useEffect(
|
||||
() =>
|
||||
useMangoStore.subscribe(
|
||||
(orderBook) => (orderBookRef.current = orderBook as any[]),
|
||||
(state) => state.market.orderBook
|
||||
(state) => state.selectedMarket.orderBook
|
||||
),
|
||||
[]
|
||||
)
|
||||
|
@ -70,13 +70,13 @@ export default function TradeForm() {
|
|||
s.tradeForm.tradeType = type
|
||||
})
|
||||
|
||||
const markPriceRef = useRef(useMangoStore.getState().market.markPrice)
|
||||
const markPriceRef = useRef(useMangoStore.getState().selectedMarket.markPrice)
|
||||
const markPrice = markPriceRef.current
|
||||
useEffect(
|
||||
() =>
|
||||
useMangoStore.subscribe(
|
||||
(markPrice) => (markPriceRef.current = markPrice as number),
|
||||
(state) => state.market.markPrice
|
||||
(state) => state.selectedMarket.markPrice
|
||||
),
|
||||
[]
|
||||
)
|
||||
|
|
|
@ -48,7 +48,7 @@ const useHydrateStore = () => {
|
|||
const askAccount = market['_decoded'].asks
|
||||
const askInfo = await websocketConnection.getAccountInfo(askAccount)
|
||||
setMangoStore((state) => {
|
||||
state.market.current = market
|
||||
state.selectedMarket.current = market
|
||||
state.accountInfos[askAccount.toString()] = askInfo
|
||||
state.accountInfos[bidAccount.toString()] = bidInfo
|
||||
})
|
||||
|
@ -145,7 +145,7 @@ const useHydrateStore = () => {
|
|||
// fetch filled trades for selected market
|
||||
useInterval(() => {
|
||||
async function fetchFills() {
|
||||
const market = useMangoStore.getState().market.current
|
||||
const market = useMangoStore.getState().selectedMarket.current
|
||||
if (!market || !connection) {
|
||||
return null
|
||||
}
|
||||
|
|
|
@ -19,7 +19,7 @@ export function useTrades() {
|
|||
|
||||
export default function useMarkPrice() {
|
||||
const setMangoStore = useMangoStore((s) => s.set)
|
||||
const markPrice = useMangoStore((s) => s.market.markPrice)
|
||||
const markPrice = useMangoStore((s) => s.selectedMarket.markPrice)
|
||||
|
||||
const [orderbook] = useOrderbook()
|
||||
const trades = useTrades()
|
||||
|
@ -37,7 +37,7 @@ export default function useMarkPrice() {
|
|||
: null
|
||||
if (newMarkPrice !== markPrice) {
|
||||
setMangoStore((state) => {
|
||||
state.market.markPrice = newMarkPrice
|
||||
state.selectedMarket.markPrice = newMarkPrice
|
||||
})
|
||||
}
|
||||
}, [orderbook, trades])
|
||||
|
|
|
@ -14,8 +14,8 @@ const formatTokenMints = (symbols: { [name: string]: string }) => {
|
|||
}
|
||||
|
||||
const useMarket = () => {
|
||||
const market = useMangoStore((state) => state.market.current)
|
||||
const selectedMarket = useMangoStore((state) => state.selectedMarket)
|
||||
const market = useMangoStore((state) => state.selectedMarket.current)
|
||||
const selectedMarketName = useMangoStore((state) => state.selectedMarket.name)
|
||||
const { cluster, programId } = useConnection()
|
||||
|
||||
const marketAddress = useMemo(
|
||||
|
@ -51,7 +51,7 @@ const useMarket = () => {
|
|||
market,
|
||||
marketAddress,
|
||||
programId,
|
||||
marketName: selectedMarket.name,
|
||||
marketName: selectedMarketName,
|
||||
baseCurrency,
|
||||
quoteCurrency,
|
||||
}
|
||||
|
|
|
@ -45,7 +45,7 @@ export default function useOrderbook(
|
|||
|
||||
useEffect(() => {
|
||||
setMangoStore((state) => {
|
||||
state.market.orderBook = [{ bids, asks }, !!bids || !!asks]
|
||||
state.selectedMarket.orderBook = [{ bids, asks }, !!bids || !!asks]
|
||||
})
|
||||
}, [bids, asks])
|
||||
|
||||
|
|
|
@ -72,16 +72,14 @@ interface MangoStore extends State {
|
|||
endpoint: string
|
||||
srmMint: string
|
||||
}
|
||||
market: {
|
||||
selectedMarket: {
|
||||
name: string
|
||||
address: string
|
||||
current: Market | null
|
||||
mangoProgramId: number | null
|
||||
markPrice: number
|
||||
orderBook: any[]
|
||||
}
|
||||
selectedMarket: {
|
||||
name: string
|
||||
address: string
|
||||
}
|
||||
mangoClient: MangoClient
|
||||
mangoGroups: Array<MangoGroup>
|
||||
selectedMangoGroup: {
|
||||
|
@ -146,8 +144,6 @@ const useMangoStore = create<MangoStore>((set, get) => ({
|
|||
address: Object.entries(
|
||||
IDS[CLUSTER].mango_groups[DEFAULT_MANGO_GROUP_NAME].spot_market_symbols
|
||||
)[0][1],
|
||||
},
|
||||
market: {
|
||||
current: null,
|
||||
mangoProgramId: null,
|
||||
markPrice: 0,
|
||||
|
|
Loading…
Reference in New Issue