Moved UIProvider to the layout

components/core/Layout/Layout.tsx

@@ -1,17 +1,17 @@
 import cn from 'classnames'
-import React, { FunctionComponent } from 'react'
+import { FunctionComponent } from 'react'
 import s from './Layout.module.css'
 import { Navbar, Featurebar } from '@components/core'
 import { Container, Sidebar } from '@components/ui'
 import { CartSidebarView } from '@components/cart'
-import { useUI } from '@components/ui/context'
+import { UIProvider, useUI } from '@components/ui/context'
 
 interface Props {
   className?: string
   children?: any
 }
 
-const Layout: FunctionComponent<Props> = ({ className, children }) => {
+const CoreLayout: FunctionComponent<Props> = ({ className, children }) => {
   const rootClassName = cn(s.root, className)
   const { displaySidebar } = useUI()
   return (
@@ -33,4 +33,10 @@ const Layout: FunctionComponent<Props> = ({ className, children }) => {
   )
 }
 
+const Layout: FunctionComponent<Props> = (props) => (
+  <UIProvider>
+    <CoreLayout {...props} />
+  </UIProvider>
+)
+
 export default Layout

pages/_app.tsx

@@ -1,13 +1,6 @@
+import type { AppProps } from 'next/app'
 import '@assets/global.css'
-import React from 'react'
-import { UIProvider } from '@components/ui/context'
 
-export default function MyApp({ Component, pageProps }) {
+export default function MyApp({ Component, pageProps }: AppProps) {
-  return (
+  return <Component {...pageProps} />
-    <>
-      <UIProvider>
-        <Component {...pageProps} />
-      </UIProvider>
-    </>
-  )
 }