import '@celo/react-celo/lib/styles.css';
import '../styles/global.css';

import { Alfajores, CeloProvider } from '@celo/react-celo';
import { AppProps } from 'next/app';
import { Toaster } from 'react-hot-toast';

function MyApp({ Component, pageProps, router }: AppProps): React.ReactElement {
  if (router.route !== '/') {
    return (
      <div className="max-w-screen-sm mx-auto py-10 md:py-20 px-4">
        <Component {...pageProps} />
      </div>
    );
  }

  return (
    <CeloProvider
      dapp={{
        name: 'react-celo demo',
        description: 'A demo DApp to showcase functionality',
        url: 'https://react-celo.vercel.app',
        icon: 'https://react-celo.vercel.app/favicon.ico',
      }}
      network={Alfajores}
      connectModal={{
        providersOptions: { searchable: true },
      }}
    >
      <Toaster
        position="top-right"
        toastOptions={{
          className: 'w-72 md:w-96',
          style: {
            padding: '0px',
          },
        }}
      />
      <div className="max-w-screen-sm mx-auto py-10 md:py-20 px-4">
        <Component {...pageProps} />
      </div>
    </CeloProvider>
  );
}

export default MyApp;