148 lines
4.6 KiB
TypeScript
148 lines
4.6 KiB
TypeScript
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 { 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";
|
|
TimeAgo.addDefaultLocale(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("/sign-in") &&
|
|
!snap.files.length &&
|
|
!snap.mainModalShowed
|
|
) {
|
|
state.mainModalOpen = true;
|
|
state.mainModalShowed = true;
|
|
}
|
|
}
|
|
}, [
|
|
gistId,
|
|
router.isReady,
|
|
router.pathname,
|
|
snap.files,
|
|
snap.mainModalShowed,
|
|
]);
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<meta charSet="utf-8" />
|
|
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
|
<meta name="format-detection" content="telephone=no" />
|
|
<meta property="og:url" content={`${origin}${router.asPath}`} />
|
|
|
|
<title>XRPL Hooks Editor</title>
|
|
<meta property="og:title" content="XRPL Hooks Editor" />
|
|
<meta name="twitter:title" content="XRPL Hooks Editor" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:site" content="@xrpllabs" />
|
|
<meta
|
|
name="description"
|
|
content="Playground for buildings Hooks, that add smart contract functionality to the XRP Ledger."
|
|
/>
|
|
<meta
|
|
property="og:description"
|
|
content="Playground for buildings Hooks, that add smart contract functionality to the XRP Ledger."
|
|
/>
|
|
<meta
|
|
name="twitter:description"
|
|
content="Playground for buildings Hooks, that add smart contract functionality to the XRP Ledger.."
|
|
/>
|
|
<meta property="og:image" content={`${origin}${shareImg}`} />
|
|
<meta property="og:image:width" content="1200" />
|
|
<meta property="og:image:height" content="630" />
|
|
<meta name="twitter:image" content={`${origin}${shareImg}`} />
|
|
<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="#161618" />
|
|
<meta name="application-name" content="XRPL Hooks Editor" />
|
|
<meta name="msapplication-TileColor" content="#c10ad0" />
|
|
<meta
|
|
name="theme-color"
|
|
content="#161618"
|
|
media="(prefers-color-scheme: dark)"
|
|
/>
|
|
<meta
|
|
name="theme-color"
|
|
content="#FDFCFD"
|
|
media="(prefers-color-scheme: light)"
|
|
/>
|
|
</Head>
|
|
<IdProvider>
|
|
<SessionProvider session={session}>
|
|
<ThemeProvider
|
|
attribute="class"
|
|
defaultTheme="dark"
|
|
enableSystem={false}
|
|
value={{
|
|
light: "light",
|
|
dark: darkTheme.className,
|
|
}}
|
|
>
|
|
<Navigation />
|
|
<Component {...pageProps} />
|
|
<Toaster
|
|
toastOptions={{
|
|
className: css({
|
|
backgroundColor: "$mauve1",
|
|
color: "$mauve10",
|
|
fontSize: "$sm",
|
|
zIndex: 9999,
|
|
".dark &": {
|
|
backgroundColor: "$mauve4",
|
|
color: "$mauve12",
|
|
},
|
|
})(),
|
|
}}
|
|
/>
|
|
</ThemeProvider>
|
|
</SessionProvider>
|
|
</IdProvider>
|
|
</>
|
|
);
|
|
}
|
|
export default MyApp;
|