2022-12-17 13:40:07 +00:00
|
|
|
import * as amplitude from "@amplitude/analytics-browser";
|
2022-11-30 10:36:59 +00:00
|
|
|
import type { AppProps } from "next/app";
|
2022-12-17 09:37:14 +00:00
|
|
|
import Head from "next/head";
|
2022-12-16 09:14:47 +00:00
|
|
|
import { useRouter } from "next/router";
|
2022-12-17 13:40:07 +00:00
|
|
|
import React, { useEffect, useMemo } from "react";
|
2022-12-16 09:14:47 +00:00
|
|
|
import { DefaultTheme, ThemeProvider } from "styled-components";
|
2022-12-14 15:39:51 +00:00
|
|
|
import ErrorBoundary from "../components/error-boundary";
|
2022-12-18 12:58:39 +00:00
|
|
|
import color from "../styles/color";
|
2022-12-05 08:57:06 +00:00
|
|
|
|
|
|
|
|
import { GlobalStyle } from "../styles/global";
|
2022-12-16 09:14:47 +00:00
|
|
|
|
2022-12-20 05:44:04 +00:00
|
|
|
// Tooltip default style.
|
|
|
|
|
import "react-tooltip/dist/react-tooltip.css";
|
|
|
|
|
|
2022-12-16 09:14:47 +00:00
|
|
|
const homePageTheme: DefaultTheme = {
|
2022-12-18 12:58:39 +00:00
|
|
|
bgColor: color.black,
|
|
|
|
|
bgGridColor: color.grey["600"],
|
2022-12-16 09:14:47 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const defaultPageTheme: DefaultTheme = {
|
2022-12-18 12:58:39 +00:00
|
|
|
bgColor: "#0B0B0B",
|
|
|
|
|
bgGridColor: color.grey["900"],
|
2022-12-16 09:14:47 +00:00
|
|
|
};
|
2022-11-30 08:11:45 +00:00
|
|
|
|
2022-12-17 13:40:07 +00:00
|
|
|
if (process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY !== undefined) {
|
|
|
|
|
amplitude.init(process.env.NEXT_PUBLIC_AMPLITUDE_API_KEY);
|
|
|
|
|
}
|
|
|
|
|
|
2022-11-30 08:11:45 +00:00
|
|
|
export default function App({ Component, pageProps }: AppProps) {
|
2022-12-16 09:14:47 +00:00
|
|
|
const router = useRouter();
|
|
|
|
|
|
|
|
|
|
const pageTheme = useMemo(() => {
|
|
|
|
|
return router.pathname === "/" ? homePageTheme : defaultPageTheme;
|
|
|
|
|
}, [router.pathname]);
|
|
|
|
|
|
2022-12-17 09:37:14 +00:00
|
|
|
const origin = typeof window !== "undefined" ? window.location.origin : "";
|
|
|
|
|
|
2022-12-17 13:40:07 +00:00
|
|
|
useEffect(() => {
|
|
|
|
|
const handleRouteChangeComplete = (url: string) => {
|
|
|
|
|
const pathname = url.split("?")[0];
|
|
|
|
|
|
2022-12-17 14:45:50 +00:00
|
|
|
amplitude.track("view page", {
|
2022-12-17 13:40:07 +00:00
|
|
|
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);
|
|
|
|
|
};
|
|
|
|
|
}, []);
|
|
|
|
|
|
2022-12-05 08:57:06 +00:00
|
|
|
return (
|
2022-12-16 09:14:47 +00:00
|
|
|
<ThemeProvider theme={pageTheme}>
|
2022-12-17 09:37:14 +00:00
|
|
|
<Head>
|
|
|
|
|
<title>Interchain Name Service</title>
|
|
|
|
|
</Head>
|
2022-12-16 08:32:08 +00:00
|
|
|
<React.Fragment>
|
|
|
|
|
<GlobalStyle />
|
|
|
|
|
<ErrorBoundary>
|
2022-12-16 09:21:35 +00:00
|
|
|
<Component {...pageProps} />
|
2022-12-16 08:32:08 +00:00
|
|
|
</ErrorBoundary>
|
|
|
|
|
</React.Fragment>
|
|
|
|
|
</ThemeProvider>
|
2022-12-05 08:57:06 +00:00
|
|
|
);
|
2022-11-30 08:11:45 +00:00
|
|
|
}
|
