AudiusProject · dylanjeffers · Nov 16, 2023 · Nov 16, 2023 · Nov 16, 2023 · Nov 16, 2023
diff --git a/packages/web/index.html b/packages/web/index.html
@@ -191,7 +191,7 @@
   <body>
     <noscript> You need to enable JavaScript to run this app. </noscript>
     <div id="root"></div>
-    <script type="module" src="/src/index.jsx"></script>
+    <script type="module" src="/src/index.tsx"></script>
     <div id="recaptcha-hidden" style="display: none"></div>
 
     <!-- start Meta Pixel -->

diff --git a/packages/web/src/root.tsx → packages/web/src/Root.tsx b/packages/web/src/root.tsx → packages/web/src/Root.tsx
@@ -9,9 +9,8 @@ import { localStorage } from 'services/local-storage'
 import { useIsMobile, isElectron } from 'utils/clientUtil'
 import { getPathname, HOME_PAGE, publicSiteRoutes } from 'utils/route'
 
-const Dapp = lazy(() => import('./app'))
-
-const PublicSite = lazy(() => import('./pages/PublicSite'))
+const App = lazy(() => import('./app'))
+const PublicSite = lazy(() => import('./public-site'))
 
 const isPublicSiteRoute = (location = window.location) => {
   const pathname = getPathname(location).toLowerCase()
@@ -25,7 +24,7 @@ const isPublicSiteSubRoute = (location = window.location) => {
 
 const clientIsElectron = isElectron()
 
-const Root = () => {
+export const Root = () => {
   const [renderPublicSite, setRenderPublicSite] = useState(isPublicSiteRoute())
   const isMobileClient = useIsMobile()
 
@@ -54,9 +53,7 @@ const Root = () => {
 
   return (
     <Suspense fallback={<div style={{ width: '100vw', height: '100vh' }} />}>
-      <Dapp />
+      <App />
     </Suspense>
   )
 }
-
-export default Root
diff --git a/packages/web/src/app.tsx b/packages/web/src/app.tsx
diff --git a/packages/web/src/app/App.tsx b/packages/web/src/app/App.tsx
@@ -0,0 +1,37 @@
+// @refresh reset
+
+import { Route, Switch } from 'react-router-dom'
+
+import { CoinbasePayButtonProvider } from 'components/coinbase-pay-button'
+import DemoTrpcPage from 'pages/demo-trpc/DemoTrpcPage'
+import { OAuthLoginPage } from 'pages/oauth-login-page/OAuthLoginPage'
+import { SomethingWrong } from 'pages/something-wrong/SomethingWrong'
+
+import '../services/webVitals'
+
+import { AppErrorBoundary } from './AppErrorBoundary'
+import { AppProviders } from './AppProviders'
+import WebPlayer from './web-player/WebPlayer'
+
+export const App = () => {
+  return (
+    <AppProviders>
+      <SomethingWrong />
+      <Switch>
+        <Route exact path='/oauth/auth'>
+          <OAuthLoginPage />
+        </Route>
+        <Route path='/demo/trpc'>
+          <DemoTrpcPage />
+        </Route>
+        <Route path='/'>
+          <AppErrorBoundary>
+            <CoinbasePayButtonProvider>
+              <WebPlayer />
+            </CoinbasePayButtonProvider>
+          </AppErrorBoundary>
+        </Route>
+      </Switch>
+    </AppProviders>
+  )
+}
diff --git a/...ages/web/src/pages/AppContextProvider.tsx → packages/web/src/app/AppContextProvider.tsx b/...ages/web/src/pages/AppContextProvider.tsx → packages/web/src/app/AppContextProvider.tsx
diff --git a/packages/web/src/pages/AppErrorBoundary.tsx → packages/web/src/app/AppErrorBoundary.tsx b/packages/web/src/pages/AppErrorBoundary.tsx → packages/web/src/app/AppErrorBoundary.tsx
diff --git a/packages/web/src/app/AppProviders.tsx b/packages/web/src/app/AppProviders.tsx
@@ -0,0 +1,59 @@
+import { ReactNode } from 'react'
+
+import { ConnectedRouter } from 'connected-react-router'
+import { Provider } from 'react-redux'
+import { LastLocationProvider } from 'react-router-last-location'
+import { PersistGate } from 'redux-persist/integration/react'
+
+import { RouterContextProvider } from 'components/animated-switch/RouterContextProvider'
+import { HeaderContextProvider } from 'components/header/mobile/HeaderContextProvider'
+import { NavProvider } from 'components/nav/store/context'
+import { ScrollProvider } from 'components/scroll-provider/ScrollProvider'
+import { ToastContextProvider } from 'components/toast/ToastContext'
+import { persistor, store } from 'store/configureStore'
+import history from 'utils/history'
+
+import { MainContentContextProvider } from '../pages/MainContentContext'
+
+import { AppContextProvider } from './AppContextProvider'
+import { AudiusQueryProvider } from './AudiusQueryProvider'
+import { ThemeProvider } from './ThemeProvider'
+import { TrpcProvider } from './TrpcProvider'
+
+type AppContextProps = {
+  children: ReactNode
+}
+
+export const AppProviders = ({ children }: AppContextProps) => {
+  return (
+    <Provider store={store}>
+      <PersistGate loading={null} persistor={persistor}>
+        <ConnectedRouter history={history}>
+          <LastLocationProvider>
+            <TrpcProvider>
+              <AudiusQueryProvider>
+                <AppContextProvider>
+                  <ThemeProvider>
+                    <NavProvider>
+                      <ScrollProvider>
+                        <RouterContextProvider>
+                          <MainContentContextProvider>
+                            <HeaderContextProvider>
+                              <ToastContextProvider>
+                                {children}
+                              </ToastContextProvider>
+                            </HeaderContextProvider>
+                          </MainContentContextProvider>
+                        </RouterContextProvider>
+                      </ScrollProvider>
+                    </NavProvider>
+                  </ThemeProvider>
+                </AppContextProvider>
+              </AudiusQueryProvider>
+            </TrpcProvider>
+          </LastLocationProvider>
+        </ConnectedRouter>
+      </PersistGate>
+    </Provider>
+  )
+}
diff --git a/packages/web/src/app/AudiusQueryProvider.tsx b/packages/web/src/app/AudiusQueryProvider.tsx
@@ -0,0 +1,35 @@
+import { ReactNode } from 'react'
+
+import { AudiusQueryContext } from '@audius/common'
+
+import { apiClient } from 'services/audius-api-client'
+import { audiusBackendInstance } from 'services/audius-backend/audius-backend-instance'
+import { audiusSdk } from 'services/audius-sdk'
+import { env } from 'services/env'
+import { remoteConfigInstance } from 'services/remote-config/remote-config-instance'
+import { store } from 'store/configureStore'
+import { reportToSentry } from 'store/errors/reportToSentry'
+
+type AudiusQueryProviderProps = {
+  children: ReactNode
+}
+
+const audiusQueryContext = {
+  apiClient,
+  audiusBackend: audiusBackendInstance,
+  audiusSdk,
+  dispatch: store.dispatch,
+  reportToSentry,
+  env,
+  fetch,
+  remoteConfigInstance
+}
+
+export const AudiusQueryProvider = (props: AudiusQueryProviderProps) => {
+  const { children } = props
+  return (
+    <AudiusQueryContext.Provider value={audiusQueryContext}>
+      {children}
+    </AudiusQueryContext.Provider>
+  )
+}
diff --git a/packages/web/src/pages/ThemeProvider.tsx → packages/web/src/app/ThemeProvider.tsx b/packages/web/src/pages/ThemeProvider.tsx → packages/web/src/app/ThemeProvider.tsx
diff --git a/packages/web/src/app/TrpcProvider.tsx b/packages/web/src/app/TrpcProvider.tsx
@@ -0,0 +1,24 @@
+import { ReactNode, useMemo, useState } from 'react'
+
+import { accountSelectors, createAudiusTrpcClient, trpc } from '@audius/common'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { useSelector } from 'react-redux'
+
+type TrpcProviderProps = {
+  children: ReactNode
+}
+
+export const TrpcProvider = (props: TrpcProviderProps) => {
+  const { children } = props
+  const currentUserId = useSelector(accountSelectors.getUserId)
+  const [queryClient] = useState(() => new QueryClient())
+  const trpcClient = useMemo(
+    () => createAudiusTrpcClient(currentUserId),
+    [currentUserId]
+  )
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </trpc.Provider>
+  )
+}
diff --git a/packages/web/src/app/index.ts b/packages/web/src/app/index.ts
@@ -0,0 +1 @@
+export { App as default } from './App'
diff --git a/packages/web/src/pages/App.module.css → ...ges/web/src/app/web-player/App.module.css b/packages/web/src/pages/App.module.css → ...ges/web/src/app/web-player/App.module.css
diff --git a/packages/web/src/app/web-player/WebPlayer.d.ts b/packages/web/src/app/web-player/WebPlayer.d.ts
@@ -0,0 +1,9 @@
+import { MutableRefObject } from 'react'
+
+type WebPlayerProps = {
+  mainContentRef: MutableRefObject<HTMLDivElement | undefined>
+}
+
+const WebPlayer: () => JSX.Element
+
+export default WebPlayer