combine market state keys

This commit is contained in:
Tyler Shipe 2021-04-29 10:38:28 -04:00
parent 64437f6a85
commit 3ff07f452e
8 changed files with 22 additions and 27 deletions

View File

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

View File

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

View File

@ -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
),
[]
)

View File

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

View File

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

View File

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

View File

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

View File

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