import * as amplitude from "@amplitude/analytics-browser"; import type { AppProps } from "next/app"; import Head from "next/head"; import { useRouter } from "next/router"; import React, { useEffect, useMemo } from "react"; import { DefaultTheme, ThemeProvider } from "styled-components"; import ErrorBoundary from "../components/error-boundary"; import { GlobalStyle } from "../styles/global"; const homePageTheme: DefaultTheme = { bgColor: "rgba(18, 18, 18, 1)", bgGridColor: "rgba(51, 51, 51, 1)", }; const defaultPageTheme: DefaultTheme = { bgColor: "rgba(18, 18, 18, 0.8)", bgGridColor: "rgba(51, 51, 51, 0.3)", }; if (process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY !== undefined) { amplitude.init(process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY); } export default function App({ Component, pageProps }: AppProps) { const router = useRouter(); const pageTheme = useMemo(() => { return router.pathname === "/" ? homePageTheme : defaultPageTheme; }, [router.pathname]); const origin = typeof window !== "undefined" ? window.location.origin : ""; useEffect(() => { const handleRouteChangeComplete = (url: string) => { const pathname = url.split("?")[0]; amplitude.track("View page", { pathname, }); }; handleRouteChangeComplete(router.pathname); router.events.on("routeChangeStart", handleRouteChangeComplete); // If the component is unmounted, unsubscribe // from the event with the `off` method: return () => { router.events.off("routeChangeComplete", handleRouteChangeComplete); }; }, []); return ( Interchain Name Service {/* generated favicons */} ); }