From 0808c900bc78931055e49b6c4775eda57c14d519 Mon Sep 17 00:00:00 2001 From: tjs Date: Mon, 21 Nov 2022 22:56:56 -0500 Subject: [PATCH] enable linking to market pages --- components/MangoProvider.tsx | 19 ++++-- components/trade/AdvancedMarketHeader.tsx | 83 +++++++++++------------ pages/trade.tsx | 26 +++++++ store/mangoStore.ts | 15 ++-- 4 files changed, 89 insertions(+), 54 deletions(-) diff --git a/components/MangoProvider.tsx b/components/MangoProvider.tsx index 69d25134..034be5c1 100644 --- a/components/MangoProvider.tsx +++ b/components/MangoProvider.tsx @@ -1,4 +1,4 @@ -import { useEffect } from 'react' +import { useCallback, useEffect } from 'react' import mangoStore from '@store/mangoStore' import { PublicKey } from '@solana/web3.js' import { useRouter } from 'next/router' @@ -6,15 +6,24 @@ import { MangoAccount } from '@blockworks-foundation/mango-v4' import useMangoAccount from 'hooks/useMangoAccount' const HydrateStore = () => { - const actions = mangoStore((s) => s.actions) + const router = useRouter() + const { name: marketName } = router.query const { mangoAccount } = useMangoAccount() + const fetchData = useCallback(async () => { + const actions = mangoStore.getState().actions + await actions.fetchGroup() + }, []) + useEffect(() => { - const fetchData = async () => { - await actions.fetchGroup() + const set = mangoStore.getState().set + if (marketName && typeof marketName === 'string') { + set((s) => { + s.selectedMarket.name = marketName + }) } fetchData() - }, [actions]) + }, [marketName]) // watch selected Mango Account for changes useEffect(() => { diff --git a/components/trade/AdvancedMarketHeader.tsx b/components/trade/AdvancedMarketHeader.tsx index 54b4f5be..7e77ac01 100644 --- a/components/trade/AdvancedMarketHeader.tsx +++ b/components/trade/AdvancedMarketHeader.tsx @@ -1,4 +1,3 @@ -import { Serum3Market, PerpMarket } from '@blockworks-foundation/mango-v4' import Change from '@components/shared/Change' import TabUnderline from '@components/shared/TabUnderline' import { Popover } from '@headlessui/react' @@ -8,7 +7,8 @@ import { useCoingecko } from 'hooks/useCoingecko' import useOraclePrice from 'hooks/useOraclePrice' import useSelectedMarket from 'hooks/useSelectedMarket' import { useTranslation } from 'next-i18next' -import { useCallback, useMemo, useState } from 'react' +import Link from 'next/link' +import { useMemo, useState } from 'react' import { DEFAULT_MARKET_NAME } from 'utils/constants' import { formatFixedDecimals } from 'utils/numbers' import MarketLogos from './MarketLogos' @@ -17,22 +17,11 @@ const MarketSelectDropdown = () => { const { selectedMarket } = useSelectedMarket() const serumMarkets = mangoStore((s) => s.serumMarkets) const perpMarkets = mangoStore((s) => s.perpMarkets) - const set = mangoStore((s) => s.set) const [activeTab, setActiveTab] = useState('perp') - const handleSelectMarket = useCallback( - (market: Serum3Market | PerpMarket, close: any) => { - set((s) => { - s.selectedMarket.current = market - }) - close() - }, - [set] - ) - return ( - {({ close, open }) => ( + {({ open }) => (
{ ? serumMarkets?.length ? serumMarkets.map((m) => { return ( -
handleSelectMarket(m, close)} + shallow={true} > - - - {m.name} - -
+
+ + + {m.name} + +
+ ) }) : null @@ -85,22 +79,27 @@ const MarketSelectDropdown = () => { ? perpMarkets?.length ? perpMarkets.map((m) => { return ( -
handleSelectMarket(m, close)} + shallow={true} > - - - {m.name} - -
+
+ + + {m.name} + +
+ ) }) : null diff --git a/pages/trade.tsx b/pages/trade.tsx index 28122c77..c0c92cb6 100644 --- a/pages/trade.tsx +++ b/pages/trade.tsx @@ -1,6 +1,10 @@ import TradeAdvancedPage from '@components/trade/TradeAdvancedPage' +import mangoStore from '@store/mangoStore' +// import mangoStore from '@store/mangoStore' import type { NextPage } from 'next' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' +import { useRouter } from 'next/router' +import { useEffect } from 'react' export async function getStaticProps({ locale }: { locale: string }) { return { @@ -17,6 +21,28 @@ export async function getStaticProps({ locale }: { locale: string }) { } const Trade: NextPage = () => { + const router = useRouter() + const { name: marketName } = router.query + + useEffect(() => { + const set = mangoStore.getState().set + const group = mangoStore.getState().group + const serumMarkets = mangoStore.getState().serumMarkets + const perpMarkets = mangoStore.getState().perpMarkets + + if (group && marketName && typeof marketName === 'string') { + const mkt = + serumMarkets.find((m) => m.name === marketName) || + perpMarkets.find((m) => m.name === marketName) + if (mkt) { + set((s) => { + s.selectedMarket.name = marketName + s.selectedMarket.current = mkt + }) + } + } + }, [marketName]) + return (
diff --git a/store/mangoStore.ts b/store/mangoStore.ts index 3b9b75f9..e15a1351 100644 --- a/store/mangoStore.ts +++ b/store/mangoStore.ts @@ -292,7 +292,7 @@ const mangoStore = create()( details: { profile_name: '', trader_category: '', wallet_pk: '' }, }, selectedMarket: { - name: 'ETH/USDC', + name: DEFAULT_MARKET_NAME, current: undefined, fills: [], orderbook: { @@ -471,6 +471,7 @@ const mangoStore = create()( const set = get().set const client = get().client const group = await client.getGroup(GROUP) + const selectedMarketName = get().selectedMarket.name const inputBank = group?.banksMapByName.get(INPUT_TOKEN_DEFAULT)?.[0] @@ -481,14 +482,18 @@ const mangoStore = create()( ) const perpMarkets = Array.from(group.perpMarketsMapByName.values()) + const defaultMarket = + serumMarkets.find((m) => m.name === selectedMarketName) || + perpMarkets.find((m) => m.name === selectedMarketName) + serumMarkets[0] + set((state) => { state.group = group state.groupLoaded = true state.serumMarkets = serumMarkets state.perpMarkets = perpMarkets state.selectedMarket.current = - state.selectedMarket.current || - getDefaultSelectedMarket(serumMarkets) + state.selectedMarket.current || defaultMarket if (!state.swap.inputBank && !state.swap.outputBank) { state.swap.inputBank = inputBank state.swap.outputBank = outputBank @@ -858,8 +863,4 @@ mangoStore.subscribe( perpPositionsUpdater ) -const getDefaultSelectedMarket = (markets: Serum3Market[]): Serum3Market => { - return markets.find((m) => m.name === DEFAULT_MARKET_NAME) || markets[0] -} - export default mangoStore