Set up protodash for Harmony use [C-3843] (#7614)

Co-authored-by: Nikki Kang <[email protected]>
AudiusProject · Feb 16, 2024 · 336bab2 · 336bab2
1 parent 4e707b0
commit 336bab2
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 78 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/protocol-dashboard/package.json b/protocol-dashboard/package.json
@@ -8,6 +8,7 @@
     "@apollo/client": "3.3.7",
     "@audius/common": "*",
     "@audius/sdk": "*",
+    "@audius/harmony": "*",
     "@audius/stems": "0.3.10",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
@@ -115,7 +116,7 @@
     "@types/react-virtualized": "9.21.10",
     "@types/semver": "6.2.1",
     "@types/url-join": "4.0.0",
-    "@vitejs/plugin-react-swc": "3.4.0",
+    "@vitejs/plugin-react": "4.1.0",
     "armada-cli": "0.4.0",
     "assert": "2.0.0",
     "browserify-zlib": "0.2.0",

diff --git a/protocol-dashboard/src/App.tsx b/protocol-dashboard/src/App.tsx
@@ -4,6 +4,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { useEffect, useState } from 'react'
 import { Provider, useSelector } from 'react-redux'
 import { Routes, Route, HashRouter } from 'react-router-dom'
+import { ThemeProvider as HarmonyThemeProvider } from '@audius/harmony'
 
 import Header from 'components/Header'
 import Home from 'containers/Home'
@@ -57,65 +58,73 @@ const App = () => {
   }, [didClientError])
   return (
     <ApolloProvider client={apolloClient}>
-      <HashRouter>
-        <RouteHistoryProvider>
-          <div className={styles.appContainer}>
-            <Header />
-            <div className={styles.appContent}>
-              <Routes>
-                <Route path={routes.HOME} element={<Home />} />
-                <Route path={routes.SERVICES} element={<Services />} />
-                <Route
-                  path={routes.SERVICES_UNREGISTERED_DISCOVERY_NODE}
-                  element={<UnregisteredNode />}
-                />
-                <Route
-                  path={routes.SERVICES_DISCOVERY_PROVIDER}
-                  element={<DiscoveryProviders />}
-                />
-                <Route
-                  path={routes.SERVICES_DISCOVERY_PROVIDER_NODE}
-                  element={<Node />}
-                />
-                <Route
-                  path={routes.SERVICES_UNREGISTERED_CONTENT_NODE}
-                  element={<UnregisteredNode />}
-                />
-                <Route
-                  path={routes.SERVICES_CONTENT}
-                  element={<ContentNodes />}
-                />
-                <Route path={routes.SERVICES_CONTENT_NODE} element={<Node />} />
-                <Route
-                  path={routes.SERVICES_SERVICE_PROVIDERS}
-                  element={<ServiceOperators />}
-                />
-                <Route
-                  path={routes.SERVICES_USERS}
-                  element={<ServiceUsers />}
-                />
-                <Route path={routes.SERVICES_ACCOUNT_USER} element={<User />} />
-                <Route
-                  path={routes.SERVICES_ACCOUNT_OPERATOR}
-                  element={<User />}
-                />
-                <Route path={routes.GOVERNANCE} element={<Governance />} />
-                <Route
-                  path={routes.GOVERNANCE_PROPOSAL}
-                  element={<Proposal />}
-                />
-                <Route path={routes.ANALYTICS} element={<Analytics />} />
-                <Route path={routes.API} element={<API />} />
-                <Route
-                  path={routes.API_LEADERBOARD}
-                  element={<APILeaderboard />}
-                />
-                <Route path="*" element={<NotFound />} />
-              </Routes>
+      <HarmonyThemeProvider theme="dark">
+        <HashRouter>
+          <RouteHistoryProvider>
+            <div className={styles.appContainer}>
+              <Header />
+              <div className={styles.appContent}>
+                <Routes>
+                  <Route path={routes.HOME} element={<Home />} />
+                  <Route path={routes.SERVICES} element={<Services />} />
+                  <Route
+                    path={routes.SERVICES_UNREGISTERED_DISCOVERY_NODE}
+                    element={<UnregisteredNode />}
+                  />
+                  <Route
+                    path={routes.SERVICES_DISCOVERY_PROVIDER}
+                    element={<DiscoveryProviders />}
+                  />
+                  <Route
+                    path={routes.SERVICES_DISCOVERY_PROVIDER_NODE}
+                    element={<Node />}
+                  />
+                  <Route
+                    path={routes.SERVICES_UNREGISTERED_CONTENT_NODE}
+                    element={<UnregisteredNode />}
+                  />
+                  <Route
+                    path={routes.SERVICES_CONTENT}
+                    element={<ContentNodes />}
+                  />
+                  <Route
+                    path={routes.SERVICES_CONTENT_NODE}
+                    element={<Node />}
+                  />
+                  <Route
+                    path={routes.SERVICES_SERVICE_PROVIDERS}
+                    element={<ServiceOperators />}
+                  />
+                  <Route
+                    path={routes.SERVICES_USERS}
+                    element={<ServiceUsers />}
+                  />
+                  <Route
+                    path={routes.SERVICES_ACCOUNT_USER}
+                    element={<User />}
+                  />
+                  <Route
+                    path={routes.SERVICES_ACCOUNT_OPERATOR}
+                    element={<User />}
+                  />
+                  <Route path={routes.GOVERNANCE} element={<Governance />} />
+                  <Route
+                    path={routes.GOVERNANCE_PROPOSAL}
+                    element={<Proposal />}
+                  />
+                  <Route path={routes.ANALYTICS} element={<Analytics />} />
+                  <Route path={routes.API} element={<API />} />
+                  <Route
+                    path={routes.API_LEADERBOARD}
+                    element={<APILeaderboard />}
+                  />
+                  <Route path="*" element={<NotFound />} />
+                </Routes>
+              </div>
             </div>
-          </div>
-        </RouteHistoryProvider>
-      </HashRouter>
+          </RouteHistoryProvider>
+        </HashRouter>
+      </HarmonyThemeProvider>
     </ApolloProvider>
   )
 }

diff --git a/protocol-dashboard/tsconfig.json b/protocol-dashboard/tsconfig.json
@@ -13,6 +13,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react",
 
     /* Linting */
     "strict": false,
@@ -36,9 +37,6 @@
     }
   },
   "include": ["src"],
-  "exclude": [
-    "node_modules",
-    "typings"
-  ],
+  "exclude": ["node_modules", "typings"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/protocol-dashboard/types/emotion/emotion.d.ts b/protocol-dashboard/types/emotion/emotion.d.ts
@@ -0,0 +1,6 @@
+import '@emotion/react'
+import type { HarmonyTheme } from '@audius/harmony'
+
+declare module '@emotion/react' {
+  export interface Theme extends HarmonyTheme {}
+}
diff --git a/protocol-dashboard/vite.config.ts b/protocol-dashboard/vite.config.ts
@@ -1,13 +1,18 @@
 import { defineConfig } from 'vite'
 import path from 'path'
-import react from '@vitejs/plugin-react-swc'
+import react from '@vitejs/plugin-react'
 import svgr from 'vite-plugin-svgr'
 import { nodePolyfills } from 'vite-plugin-node-polyfills'
 import wasm from 'vite-plugin-wasm'
 
 export default defineConfig({
   plugins: [
-    react(),
+    react({
+      jsxImportSource: '@emotion/react',
+      babel: {
+        plugins: ['@emotion/babel-plugin']
+      }
+    }),
     wasm(),
     svgr(),