fix: headless build, use nextjs14 and detect electron-env

ArweaveTeam · Nov 29, 2023 · 2d6484d · 2d6484d
1 parent d27f414
commit 2d6484d
Show file tree

Hide file tree

Showing 7 changed files with 284 additions and 339 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "electron-serve": "^1.2.0",
     "electron-store": "^8.1.0",
     "filesize": "^10.1.0",
+    "is-electron": "^2.2.2",
     "next-redux-wrapper": "^8.1.0",
     "parse-prometheus-text-format": "^1.1.1",
     "ramda": "^0.29.1",
@@ -50,21 +51,21 @@
   },
   "devDependencies": {
     "@types/ramda": "^0.29.9",
-    "@types/react": "^18.2.38",
-    "@types/react-dom": "^18.2.16",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
     "@types/uuid": "^9.0.7",
-    "@typescript-eslint/eslint-plugin": "^6.12.0",
-    "@typescript-eslint/parser": "^6.12.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
     "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
-    "electron": "^27.1.0",
-    "electron-builder": "^24.6.4",
+    "electron": "^27.1.2",
+    "electron-builder": "^24.9.1",
     "eslint": "^8.54.0",
     "eslint-plugin-react": "^7.33.2",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "lint-staged": "^15.1.0",
-    "next": "^12.3.4",
+    "next": "^14.0.3",
     "nextron": "^8.12.0",
     "postcss": "^8.4.31",
     "prettier": "^3.1.0",

diff --git a/renderer/components/Navbar.tsx b/renderer/components/Navbar.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import isElectron from "is-electron";
 import { useAppDispatch } from "../store";
 import { AddMiner } from "./add-miner/add-miner";
 import { SelectMinerDropdown } from "./select-miner/select-miner-dropdown";
@@ -54,20 +55,21 @@ export default function Navbar() {
 
   const NavLink = ({ href, label, target }: NavLink) => {
     return (
-      <Link href={href} passHref>
-        <a
-          onClick={(event) => {
-            if (window.ipc && target) {
-              event.preventDefault();
-              window.ipc.send("open-url", target);
-            }
-          }}
-          className={`block px-5 py-2 rounded hover:bg-gray-200 ${
-            router.pathname == href ? "font-medium bg-gray-200" : "font-light"
-          }`}
-        >
-          {label}
-        </a>
+      <Link
+        href={href}
+        onClick={(event) => {
+          if (isElectron() && target) {
+            event.preventDefault();
+            window.ipc.send("open-url", target);
+          } else if (target) {
+            window.history.pushState({}, "", target);
+          }
+        }}
+        className={`block px-5 py-2 rounded hover:bg-gray-200 ${
+          router.pathname == href ? "font-medium bg-gray-200" : "font-light"
+        }`}
+      >
+        {label}
       </Link>
     );
   };
@@ -76,10 +78,8 @@ export default function Navbar() {
     <header className="w-full">
       <nav className="fixed w-full z-20 top-0 left-0 border-b border-gray-300 bg-[#F1F1F1]">
         <div className="flex whitespace-nowrap items-center justify-between p-4 px-10">
-          <Link href="/home" passHref>
-            <a className="flex items-center">
-              <img src={ASSET.ArweaveLogo} alt="arweave-logo" className="w-8 h-8 mr-2" />
-            </a>
+          <Link href="/home" className="flex items-center">
+            <img src={ASSET.ArweaveLogo} alt="arweave-logo" className="w-8 h-8 mr-2" />
           </Link>
 
           <div className="flex md:order-2 gap-2">

diff --git a/renderer/next.config.js b/renderer/next.config.js
@@ -3,7 +3,7 @@
 const isHeadless = process.env.AR_MINER_UI_HEADLESS === "true";
 const maybeHeadlessConfig = isHeadless
   ? {
-      output: "standalone",
+      output: "export",
       distDir: "dist-headless",
     }
   : {};

diff --git a/renderer/pages/dashboard.tsx b/renderer/pages/dashboard.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import ScrollSpy from "react-ui-scrollspy";
+import isElectron from "is-electron";
 import { MainLayout } from "../layouts/MainLayout";
 import { useEarnings, useHashRate } from "../store/metricsSlice/metricsSliceHooks";
 import { setMetricsState } from "../store/metricsSlice/metricsSlice";
@@ -81,10 +82,12 @@ export default function DashboardPage() {
   );
 
   useEffect(() => {
-    window.ipc.metricsSub(handler);
-    return () => {
-      window.ipc.metricsUnsub(handler);
-    };
+    if (isElectron()) {
+      window.ipc.metricsSub(handler);
+      return () => {
+        window.ipc.metricsUnsub(handler);
+      };
+    }
   }, [handler]);
 
   return (

diff --git a/renderer/store/configSlice/configSlice.ts b/renderer/store/configSlice/configSlice.ts
@@ -1,3 +1,4 @@
+import isElectron from "is-electron";
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import type { PayloadAction } from "@reduxjs/toolkit";
 import {
@@ -19,29 +20,37 @@ export const configSlice = createSlice({
   reducers: {
     selectNode(state, action: PayloadAction<string>) {
       state.selectedNode = action.payload;
-      window.ipc.setSelectedNodeById(action.payload);
+      if (isElectron()) {
+        window.ipc.setSelectedNodeById(action.payload);
+      }
     },
     setNodes(state, action: PayloadAction<ArweaveNodeConfig[]>) {
       state.nodes = action.payload;
       if (state.selectedNode === undefined && action.payload.length > 0) {
         state.selectedNode = action.payload[0].id;
-        window.ipc.setSelectedNodeById(state.selectedNode);
+        if (isElectron()) {
+          window.ipc.setSelectedNodeById(state.selectedNode);
+        }
       }
     },
     appendNode(state, action: PayloadAction<NewArweaveNodeConfig>) {
       const newNode = window.ipc.configAppendNode(action.payload);
       state.nodes.push(newNode);
       if (state.selectedNode === undefined) {
         state.selectedNode = newNode.id;
-        window.ipc.setSelectedNodeById(newNode.id);
+        if (isElectron()) {
+          window.ipc.setSelectedNodeById(newNode.id);
+        }
       }
     },
   },
 });
 
 export const getNodes = createAsyncThunk("config/getNodes", async (_, { dispatch }) => {
-  const answer = window.ipc.configGetNodes();
-  dispatch(configSlice.actions.setNodes(answer));
+  if (isElectron()) {
+    const answer = window.ipc.configGetNodes();
+    dispatch(configSlice.actions.setNodes(answer));
+  }
 });
 
 export const { appendNode, selectNode } = configSlice.actions;

diff --git a/renderer/tsconfig.json b/renderer/tsconfig.json
@@ -1,15 +1,8 @@
 {
   "extends": "../tsconfig.json",
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "../types"
-  ],
-  "exclude": [
-    "node_modules"
-  ],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "../types"],
+  "exclude": ["node_modules"],
   "compilerOptions": {
-    "module": "esnext"
+    "module": "NodeNext"
   }
 }