import '../styles/globals.scss' ; import '../styles/fonts.css' ; import type { AppProps } from 'next/app' ; import { useRef , useEffect , memo , ReactElement , ReactNode } from 'react' ; import { useRouter } from 'next/router' ; import NextNprogress from 'nextjs-progressbar' ; import Head from "next/head" ; import { Root } from '../containers/Root' ; import { NextPage } from 'next' ; const ROUTES_TO_RETAIN = [ '/explore' , '/marketplace' , '/marketplace/collections' ] ; type NextPageWithLayout = NextPage & { getLayout ? : ( page : ReactElement ) => ReactNode ; } ; type AppPropsWithLayout = AppProps & { Component : NextPageWithLayout ; } ; const App = ( { Component , pageProps } ) => { const router = useRouter ( ) ; const retainedComponents = useRef < any > ( { } ) ; const isRetainableRoute = ROUTES_TO_RETAIN . includes ( router . asPath ) ; if ( retainedComponents . current [ router . asPath ] ) { retainedComponents . current [ router . asPath ] . index = - 1 ; } useEffect ( ( ) => { for ( const key in retainedComponents . current ) { retainedComponents . current [ key ] . index ++ ; if ( retainedComponents . current [ key ] . index > 2 ) { delete retainedComponents . current [ key ] ; } } } , [ router . asPath ] ) ; if ( isRetainableRoute && ! retainedComponents . current [ router . asPath ] ) { const MemoComponent = memo ( Component ) ; retainedComponents . current [ router . asPath ] = { component : < MemoComponent { ... pageProps } / > , scrollPos : 0 , index : 0 } ; } const handleRouteChangeStart = ( url ) => { if ( isRetainableRoute ) { retainedComponents . current [ router . asPath ] . scrollPos = window . scrollY ; } } ; useEffect ( ( ) => { router . events . on ( 'routeChangeStart' , handleRouteChangeStart ) ; return ( ) => { router . events . off ( 'routeChangeStart' , handleRouteChangeStart ) ; } ; } , [ router . asPath ] ) ; useEffect ( ( ) => { if ( isRetainableRoute && retainedComponents . current [ router . asPath ] ) { window . scrollTo ( 0 , retainedComponents . current [ router . asPath ] . scrollPos ) ; } } , [ Component , pageProps ] ) ; const subLayout = Component . getLayout ?? ( ( page ) => page ) ; return ( < > < Head > < meta key = "og:title" property = "og:title" content = "fxhash — blockchain generative art" / > < meta key = "description" name = "description" content = "fxhash is a platform to mint Generative Tokens on the Tezos blockchain" / > < meta key = "og:description" property = "og:description" content = "fxhash is a platform to mint Generative Tokens on the Tezos blockchain" / > < meta key = "og:type" property = "og:type" content = "website" / > < meta key = "og:image" property = "og:image" content = "https://www.fxhash.xyz/images/og/og1.jpg" / > < link rel = "apple-touch-icon" sizes = "180x180" href = "/apple-touch-icon.png" / > < link rel = "icon" type = "image/png" sizes = "32x32" href = "/favicon-32x32.png" / > < link rel = "icon" type = "image/png" sizes = "16x16" href = "/favicon-16x16.png" / > < link rel = "manifest" href = "/site.webmanifest" / > < link rel = "mask-icon" href = "/safari-pinned-tab.svg" color = "#5bbad5" / > < meta name = "msapplication-TileColor" content = "#ffffff" / > < meta name = "theme-color" content = "#ffffff" > < /meta> < /Head> < NextNprogress color = "#7000FF" / > { process . env . NEXT_PUBLIC_MAINTENANCE_MODE === "1" ? ( < Component { ... pageProps } / > ) : ( < Root > < > < div style = { { display : isRetainableRoute ? 'block' : 'none' } } > { Object . entries ( retainedComponents . current ) . map ( ( [ path , c ] ) => ( < div key = { path } style = { { display : router . asPath === path ? 'block' : 'none' } } > { c . component } < /div>))} < /div> { ! isRetainableRoute && ( subLayout ( < Component { ... pageProps } / > ) ) } < /> < /Root>)} < />); } ; export default App ;