mango-v4-ui/pages/_app.tsx

79 lines
2.2 KiB
TypeScript

import type { AppProps } from 'next/app'
import { useEffect, useMemo } from 'react'
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'
import { ConnectionProvider } from '@solana/wallet-adapter-react'
import {
GlowWalletAdapter,
PhantomWalletAdapter,
SolflareWalletAdapter,
} from '@solana/wallet-adapter-wallets'
import { clusterApiUrl } from '@solana/web3.js'
import '../styles/globals.css'
import mangoStore from '@store/mangoStore'
import useInterval from '../components/shared/useInterval'
import Notifications from '../components/shared/Notification'
import { ThemeProvider } from 'next-themes'
import { appWithTranslation } from 'next-i18next'
import Layout from '../components/Layout'
import { ViewportProvider } from '../hooks/useViewport'
import { WalletProvider } from '../components/wallet/WalletProvider'
const rehydrateStore = async () => {
const actions = mangoStore.getState().actions
actions.fetchGroup()
const mangoAccount = mangoStore.getState().mangoAccount.current
if (mangoAccount) {
// actions.reloadMangoAccount()
}
}
const HydrateStore = () => {
useInterval(() => {
rehydrateStore()
}, 5000)
useEffect(() => {
const actions = mangoStore.getState().actions
actions.fetchGroup().then(() => {
actions.fetchJupiterTokens()
})
actions.fetchCoingeckoPrices()
}, [])
return null
}
function MyApp({ Component, pageProps }: AppProps) {
const network = WalletAdapterNetwork.Devnet
const endpoint = useMemo(() => clusterApiUrl(network), [network])
const wallets = useMemo(
() => [
new PhantomWalletAdapter(),
new GlowWalletAdapter(),
new SolflareWalletAdapter({ network }),
],
[network]
)
return (
<>
<HydrateStore />
<ConnectionProvider endpoint={endpoint}>
<WalletProvider wallets={wallets}>
<ThemeProvider defaultTheme="Dark">
<ViewportProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</ViewportProvider>
<Notifications />
</ThemeProvider>
</WalletProvider>
</ConnectionProvider>
</>
)
}
export default appWithTranslation(MyApp)