move state out of parent components that were causing additional renders
This commit is contained in:
Tyler Shipe
parent
03c9710103
commit
f0edd15fef
|
|
@ -3,12 +3,7 @@ import { RadioGroup } from '@headlessui/react'
|
|||
import { CheckCircleIcon } from '@heroicons/react/solid'
|
||||
import { PlusCircleIcon } from '@heroicons/react/outline'
|
||||
import useMangoStore from '../stores/useMangoStore'
|
||||
import {
|
||||
MangoAccount,
|
||||
MangoCache,
|
||||
MangoGroup,
|
||||
// ZERO_I80F48,
|
||||
} from '@blockworks-foundation/mango-client'
|
||||
import { MangoAccount, MangoGroup } from '@blockworks-foundation/mango-client'
|
||||
import { abbreviateAddress, formatUsdValue } from '../utils'
|
||||
import useLocalStorageState from '../hooks/useLocalStorageState'
|
||||
import Modal from './Modal'
|
||||
|
|
@ -36,7 +31,6 @@ const AccountsModal: FunctionComponent<AccountsModalProps> = ({
|
|||
(s) => s.selectedMangoAccount.current
|
||||
)
|
||||
const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
|
||||
const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
|
||||
const setMangoStore = useMangoStore((s) => s.set)
|
||||
const actions = useMangoStore((s) => s.actions)
|
||||
const [, setLastAccountViewed] = useLocalStorageState(LAST_ACCOUNT_KEY)
|
||||
|
|
@ -134,7 +128,6 @@ const AccountsModal: FunctionComponent<AccountsModalProps> = ({
|
|||
<AccountInfo
|
||||
mangoGroup={mangoGroup}
|
||||
mangoAccount={account}
|
||||
mangoCache={mangoCache}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
|
|
@ -176,14 +169,12 @@ const AccountsModal: FunctionComponent<AccountsModalProps> = ({
|
|||
const AccountInfo = ({
|
||||
mangoGroup,
|
||||
mangoAccount,
|
||||
mangoCache,
|
||||
}: {
|
||||
mangoGroup: MangoGroup
|
||||
mangoAccount: MangoAccount
|
||||
mangoCache: MangoCache
|
||||
}) => {
|
||||
const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
|
||||
const accountEquity = mangoAccount.computeValue(mangoGroup, mangoCache)
|
||||
|
||||
const leverage = mangoAccount.getLeverage(mangoGroup, mangoCache).toFixed(2)
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ const useHydrateStore = () => {
|
|||
|
||||
useInterval(() => {
|
||||
actions.fetchMangoGroupCache()
|
||||
}, 30 * SECONDS)
|
||||
}, 12 * SECONDS)
|
||||
|
||||
useEffect(() => {
|
||||
const market = markets[marketConfig.publicKey.toString()]
|
||||
|
|
|
|||
|
|
@ -22,13 +22,14 @@ const MangoStoreUpdater = () => {
|
|||
return null
|
||||
}
|
||||
|
||||
const PageTitle = ({ pathname }) => {
|
||||
const PageTitle = () => {
|
||||
const router = useRouter()
|
||||
const marketConfig = useMangoStore((s) => s.selectedMarket.config)
|
||||
const market = useMangoStore((s) => s.selectedMarket.current)
|
||||
const oraclePrice = useOraclePrice()
|
||||
const selectedMarketName = marketConfig.name
|
||||
const marketTitleString =
|
||||
marketConfig && pathname.includes('[market]')
|
||||
marketConfig && router.pathname.includes('market')
|
||||
? `${
|
||||
oraclePrice
|
||||
? oraclePrice.toFixed(getDecimalCount(market?.tickSize)) + ' | '
|
||||
|
|
@ -36,16 +37,18 @@ const PageTitle = ({ pathname }) => {
|
|||
}${selectedMarketName} - `
|
||||
: ''
|
||||
|
||||
return <title>{marketTitleString}Mango Markets</title>
|
||||
return (
|
||||
<Head>
|
||||
<title>{marketTitleString}Mango Markets</title>
|
||||
</Head>
|
||||
)
|
||||
}
|
||||
|
||||
function App({ Component, pageProps }) {
|
||||
const router = useRouter()
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<PageTitle pathname={router.pathname} />
|
||||
<title>Mango Markets</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap"
|
||||
|
|
@ -82,6 +85,7 @@ function App({ Component, pageProps }) {
|
|||
|
||||
<link rel="manifest" href="/manifest.json"></link>
|
||||
</Head>
|
||||
<PageTitle />
|
||||
<MangoStoreUpdater />
|
||||
<ThemeProvider defaultTheme="Mango">
|
||||
<ViewportProvider>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|||
import IntroTips, { SHOW_TOUR_KEY } from '../components/IntroTips'
|
||||
import { useViewport } from '../hooks/useViewport'
|
||||
import { breakpoints } from '../components/TradePageGrid'
|
||||
import {
|
||||
marketConfigSelector,
|
||||
walletConnectedSelector,
|
||||
} from '../stores/selectors'
|
||||
|
||||
export async function getStaticProps({ locale }) {
|
||||
return {
|
||||
|
|
@ -31,10 +35,8 @@ const PerpMarket = () => {
|
|||
const [showTour] = useLocalStorageState(SHOW_TOUR_KEY, false)
|
||||
const groupConfig = useMangoGroupConfig()
|
||||
const setMangoStore = useMangoStore((s) => s.set)
|
||||
const connected = useMangoStore((s) => s.wallet.connected)
|
||||
const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
|
||||
const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache)
|
||||
const marketConfig = useMangoStore((s) => s.selectedMarket.config)
|
||||
const connected = useMangoStore(walletConnectedSelector)
|
||||
const marketConfig = useMangoStore(marketConfigSelector)
|
||||
const router = useRouter()
|
||||
const { width } = useViewport()
|
||||
const hideTips = width ? width < breakpoints.md : false
|
||||
|
|
@ -49,6 +51,7 @@ const PerpMarket = () => {
|
|||
|
||||
useEffect(() => {
|
||||
const name = decodeURIComponent(router.asPath).split('name=')[1]
|
||||
const mangoGroup = useMangoStore.getState().selectedMangoGroup.current
|
||||
|
||||
if (name && mangoGroup) {
|
||||
const marketQueryParam = name.toString().split(/-|\//)
|
||||
|
|
@ -65,7 +68,7 @@ const PerpMarket = () => {
|
|||
groupConfig,
|
||||
marketBaseSymbol.toUpperCase()
|
||||
)
|
||||
|
||||
const mangoCache = useMangoStore.getState().selectedMangoGroup.cache
|
||||
setMangoStore((state) => {
|
||||
state.selectedMarket.kind = marketType
|
||||
if (newMarket.name !== marketConfig.name) {
|
||||
|
|
@ -78,7 +81,7 @@ const PerpMarket = () => {
|
|||
}
|
||||
})
|
||||
}
|
||||
}, [router, mangoGroup])
|
||||
}, [router, marketConfig])
|
||||
|
||||
return (
|
||||
<div className={`bg-th-bkg-1 text-th-fgd-1 transition-all `}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue