text: import React, {useEffect } from 'react';
  import { useRouter } from 'next/router'
  import PropTypes from 'prop-types';
  import Head from 'next/head';
  import { ThemeProvider } from '@material-ui/core/styles';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import theme from '../public/theme';
  import { config } from "@fortawesome/fontawesome-svg-core"
  import "@fortawesome/fontawesome-svg-core/styles.css"
  config.autoAddCss = false
  
  import * as ga from '../lib/ga'
  
  export default function MyApp(props) {
    const { Component, pageProps } = props;
  
    const router = useRouter()
  
    useEffect(() => {
      const handleRouteChange = (url) => {
        ga.pageview(url)
      }
      //When the component is mounted, subscribe to router changes
      //and log those page views
      router.events.on('routeChangeComplete', handleRouteChange)
  
      // If the component is unmounted, unsubscribe
      // from the event with the `off` method
      return () => {
        router.events.off('routeChangeComplete', handleRouteChange)
      }
    }, [router.events])
  
    return (
      <React.Fragment>
        <Head>
          <title>Polkadot Staking Rewards Viewer</title>
          <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
          <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/2.14.1/react-datepicker.min.css" />
          <link rel="preconnect" href="https://fonts.gstatic.com" />
          <link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,700;0,900;1,200&display=swap" rel="stylesheet" />
          <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        </Head>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <Component {...pageProps} />
        </ThemeProvider>
      </React.Fragment>
    );
  }