chore: UI polyfills for build command (#165)

* chore: fix vite plugin for polyfills

* chore: add prod script command to run production version

* refactor: hash router to run on ipfs

ui/package.json

@@ -9,6 +9,7 @@
     "build": "yarn graphclient build && vite build",
     "postinstall": "graphclient build",
     "preview": "vite preview",
+    "prod": "yarn build && npx serve dist -s",
     "storybook": "export SET NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
@@ -40,8 +41,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
-    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
-    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@graphprotocol/client-cli": "^2.2.19",
     "@storybook/addon-actions": "^6.5.15",
     "@storybook/addon-essentials": "^6.5.15",
@@ -73,12 +72,12 @@
     "prettier": "^2.8.0",
     "process": "^0.11.10",
     "react-query": "^3.39.2",
-    "rollup-plugin-polyfill-node": "^0.12.0",
     "storybook-dark-mode": "^2.0.5",
     "tailwindcss": "^3.2.4",
     "ts-loader": "^9.4.1",
     "typescript": "^4.9.3",
     "vite": "^3.2.4",
+    "vite-plugin-node-polyfills": "^0.7.0",
     "vite-tsconfig-paths": "^3.6.0"
   }
 }

ui/src/app.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
+import { HashRouter, Route, Routes, Navigate } from 'react-router-dom';
 import { themeGlobals } from '@/theme/globals';
 import { ComponentsTest, Home, Mint } from './views';
 import { SVGTestScreen } from './views/svg-test'; // TODO: remove when done
@@ -14,7 +14,7 @@ export const App = () => {
         {/* TODO remove after adding NavBar */}
         <ConnectKitButton />
       </div>
-      <BrowserRouter>
+      <HashRouter>
         <Routes>
           <Route path="/home" element={<Home />} />
           <Route path="/mint" element={<Mint />} />
@@ -25,7 +25,7 @@ export const App = () => {
           <Route path="/mint-test" element={<MintTest />} />
           <Route path="*" element={<Navigate to="/home" />} />
         </Routes>
-      </BrowserRouter>
+      </HashRouter>
     </>
   );
 };

ui/vite.config.ts

@@ -1,38 +1,9 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import tsconfigPaths from 'vite-tsconfig-paths';
-import EslintGlobalsPolyfills from '@esbuild-plugins/node-globals-polyfill';
-import EslintModulePolyfills from '@esbuild-plugins/node-modules-polyfill';
-import rollupNodePolyfill from 'rollup-plugin-polyfill-node';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [tsconfigPaths(), react()],
-
-  optimizeDeps: {
-    esbuildOptions: {
-      // Node.js global to browser globalThis
-      define: {
-        global: 'globalThis',
-      },
-
-      // Enable esbuild polyfill plugins
-      plugins: [
-        EslintGlobalsPolyfills({
-          buffer: true,
-          process: true,
-        }),
-        EslintModulePolyfills(),
-      ],
-    },
-  },
-  build: {
-    rollupOptions: {
-      plugins: [
-        // Enable rollup polyfills plugin
-        // used during production bundling
-        rollupNodePolyfill(),
-      ],
-    },
-  },
+  plugins: [tsconfigPaths(), react(), nodePolyfills({ protocolImports: true })],
 });