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 dynamic page title to trade

This commit is contained in:
saml33 2022-12-12 14:46:03 +11:00
parent 56dcf99769
commit b124dff2eb
1 changed files with 41 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
pages/_app.tsx
View File

@ -27,6 +27,12 @@ import MangoProvider from '@components/MangoProvider'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import EnhancedWalletProvider from '@components/wallet/EnhancedWalletProvider'
import { notify } from 'utils/notifications'
import { useRouter } from 'next/router'
import useSelectedMarket from 'hooks/useSelectedMarket'
import Head from 'next/head'
import useMangoGroup from 'hooks/useMangoGroup'
import { PerpMarket } from '@blockworks-foundation/mango-v4'
import { getDecimalCount } from 'utils/numbers'
// Do not add hooks to this component that will cause unnecessary rerenders
// Top level state hydrating/updating should go in MangoProvider
@ -65,6 +71,7 @@ function MyApp({ Component, pageProps }: AppProps) {
<EnhancedWalletProvider>
<ThemeProvider defaultTheme="Mango Classic">
<ViewportProvider>
<PageTitle />
<Layout>
<Component {...pageProps} />
</Layout>
@ -80,3 +87,37 @@ function MyApp({ Component, pageProps }: AppProps) {
}
export default appWithTranslation(MyApp)
const PageTitle = () => {
const router = useRouter()
const { selectedMarket } = useSelectedMarket()
const { group } = useMangoGroup()
const [market, price] = useMemo(() => {
if (!selectedMarket || !group) return []
if (selectedMarket instanceof PerpMarket) {
return [selectedMarket, selectedMarket.uiPrice]
} else {
const price = group.getFirstBankByTokenIndex(
selectedMarket.baseTokenIndex
).uiPrice
const market = group.getSerum3ExternalMarket(
selectedMarket.serumMarketExternal
)
return [market, price]
}
}, [selectedMarket, group])
const marketTitleString =
market && selectedMarket && router.pathname == '/trade'
? `${price?.toFixed(getDecimalCount(market.tickSize))} ${
selectedMarket.name
} - `
: ''
return (
<Head>
<title>{marketTitleString}Mango Markets</title>
</Head>
)
}