import { useEffect } from 'react'
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import Head from 'next/head'
import { SessionProvider } from 'next-auth/react'
import { ThemeProvider } from 'next-themes'
import { Toaster } from 'react-hot-toast'
import { useRouter } from 'next/router'
import { IdProvider } from '@radix-ui/react-id'
import PlausibleProvider from 'next-plausible'
import { darkTheme, css } from '../stitches.config'
import Navigation from '../components/Navigation'
import { fetchFiles } from '../state/actions'
import state from '../state'
import TimeAgo from 'javascript-time-ago'
import en from 'javascript-time-ago/locale/en.json'
import { useSnapshot } from 'valtio'
import Alert from '../components/AlertDialog'
import { Button, Flex } from '../components'
import { ChatCircleText } from 'phosphor-react'
TimeAgo.setDefaultLocale(en.locale)
TimeAgo.addLocale(en)
function MyApp({ Component, pageProps: { session, ...pageProps } }: AppProps) {
const router = useRouter()
const slug = router.query?.slug
const gistId = (Array.isArray(slug) && slug[0]) ?? null
const origin = 'https://xrpl-hooks-ide.vercel.app' // TODO: Change when site is deployed
const shareImg = '/share-image.png'
const snap = useSnapshot(state)
useEffect(() => {
if (gistId && router.isReady) {
fetchFiles(gistId)
} else {
if (
!gistId &&
router.isReady &&
router.pathname.includes('/develop') &&
!snap.files.length &&
!snap.mainModalShowed
) {
state.mainModalOpen = true
state.mainModalShowed = true
}
}
}, [gistId, router.isReady, router.pathname, snap.files, snap.mainModalShowed])
return (
<>
XRPL Hooks Builder
)
}
export default MyApp