nextjs 13.4 app, converting _app and _document to layout.

import "~/styles/globals.css";

import { ClerkProvider } from "@clerk/nextjs";
import CssBaseline from "@mui/material/CssBaseline";
import { CacheProvider, EmotionCache } from "@emotion/react";
import createEmotionCache from "../utils/createEmotionCache";

import { ThemeProvider } from "@mui/material/styles";
import { type AppProps, type AppType } from "next/app";
import * as React from "react";
import { api } from "~/utils/api";
import Script from "next/script";

import { DrawerProvider } from "~/context/drawerContext";

const clientSideEmotionCache = createEmotionCache();

interface MyAppProps extends AppProps {
  emotionCache?: EmotionCache;
}
import ThemeContext, {
  ThemeProvider as ThemeProviderInternal,
} from "~/context/themeContext";
import { themeLight, themeDark } from "~/utils/theme/index";

const Providers = (props: MyAppProps) => {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  return (
    <CacheProvider value={emotionCache}>
      <Script type="text/javascript" src="https://s3.tradingview.com/tv.js" />
      <ThemeProviderInternal>
        <ThemeContext.Consumer>
          {({ theme }) => (
            <>
              <ThemeProvider theme={theme == "light" ? themeLight : themeDark}>
                <CssBaseline />
                <DrawerProvider>
                  <ClerkProvider {...pageProps}>
                    <Component {...pageProps} />
                  </ClerkProvider>
                </DrawerProvider>
              </ThemeProvider>
            </>
          )}
        </ThemeContext.Consumer>
      </ThemeProviderInternal>
    </CacheProvider>
  );
};

export default api.withTRPC(Providers);

import "~/styles/globals.css";

import { ClerkProvider } from "@clerk/nextjs";
import CssBaseline from "@mui/material/CssBaseline";
import { CacheProvider, EmotionCache } from "@emotion/react";
import createEmotionCache from "../utils/createEmotionCache";

import { ThemeProvider } from "@mui/material/styles";
import { type AppProps, type AppType } from "next/app";
import * as React from "react";
import { api } from "~/utils/api";
import Script from "next/script";

import { DrawerProvider } from "~/context/drawerContext";

const clientSideEmotionCache = createEmotionCache();

interface MyAppProps extends AppProps {
  emotionCache?: EmotionCache;
}
import ThemeContext, {
  ThemeProvider as ThemeProviderInternal,
} from "~/context/themeContext";
import { themeLight, themeDark } from "~/utils/theme/index";

const Providers = (props: MyAppProps) => {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  return (
    <CacheProvider value={emotionCache}>
      <Script type="text/javascript" src="https://s3.tradingview.com/tv.js" />
      <ThemeProviderInternal>
        <ThemeContext.Consumer>
          {({ theme }) => (
            <>
              <ThemeProvider theme={theme == "light" ? themeLight : themeDark}>
                <CssBaseline />
                <DrawerProvider>
                  <ClerkProvider {...pageProps}>
                    <Component {...pageProps} />
                  </ClerkProvider>
                </DrawerProvider>
              </ThemeProvider>
            </>
          )}
        </ThemeContext.Consumer>
      </ThemeProviderInternal>
    </CacheProvider>
  );
};

export default api.withTRPC(Providers);