Feat/building electron with todesktop

.github/workflows/build-test-desktop-app.yaml

@@ -0,0 +1,55 @@
+name: CI for the desktop app
+on:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  build-desktop-app:
+    runs-on: ubuntu-latest
+    environment: test
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.11.1
+      - name: Build electron app
+        run: |
+          npm ci
+          cat <<EOF > apps/web/.env
+          INTERNAL_INTEGRATION_API_URL=${INTERNAL_INTEGRATION_API_URL}
+          NEXT_PUBLIC_SVM_METRICS="https://fr64dzklc3.execute-api.us-west-2.amazonaws.com/prod"
+          NEXT_PUBLIC_ADOBE_EMBED_API_KEY="a165f09589fc4cd29a574b37d1212a96"
+          NEXT_PUBLIC_TARGET='electron'
+          EOF
+          npx turbo run build --filter web
+          npx turbo run prepare-electron --filter web
+          cd apps/desktop
+          npm install -g @todesktop/cli@1.9.1
+          todesktop build
+        env:
+          TODESKTOP_ACCESS_TOKEN: ${{ secrets.TODESKTOP_ACCESS_TOKEN }}
+          TODESKTOP_EMAIL: ${{ secrets.TODESKTOP_EMAIL }}
+          INTERNAL_INTEGRATION_API_URL: ${{ secrets.INTERNAL_INTEGRATION_API_URL }}
+          NEXT_PUBLIC_SVM_METRICS: "https://fr64dzklc3.execute-api.us-west-2.amazonaws.com/prod"
+          NEXT_PUBLIC_ADOBE_EMBED_API_KEY: "a165f09589fc4cd29a574b37d1212a96"
+          NEXT_PUBLIC_TARGET: "electron"
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+
+  test-desktop-app:
+    needs: build-desktop-app
+    runs-on: ubuntu-latest
+    timeout-minutes: 45
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.11.1
+      - name: Smoke test electron app
+        run: |
+          npm install -g @todesktop/cli@1.9.1
+          cd apps/desktop
+          todesktop smoke-test
+        env:
+          TODESKTOP_ACCESS_TOKEN: ${{ secrets.TODESKTOP_ACCESS_TOKEN }}
+          TODESKTOP_EMAIL: ${{ secrets.TODESKTOP_EMAIL }}

.github/workflows/prettier-check.yaml

@@ -1,6 +1,7 @@
 name: Prettier Check
 on:
   pull_request:
+  workflow_dispatch:
 
 jobs:
   check-formatting:

.github/workflows/release-desktop-app.yaml

@@ -0,0 +1,71 @@
+name: Build and Release Desktop App
+on:
+  workflow_dispatch:
+
+jobs:
+  build-desktop-app:
+    runs-on: ubuntu-latest
+    environment: production
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.11.1
+      - name: Build electron app
+        run: |
+          npm ci
+          cat <<EOF > apps/web/.env
+          INTERNAL_INTEGRATION_API_URL=${INTERNAL_INTEGRATION_API_URL}
+          NEXT_PUBLIC_SVM_METRICS="https://fr64dzklc3.execute-api.us-west-2.amazonaws.com/prod"
+          NEXT_PUBLIC_ADOBE_EMBED_API_KEY="a165f09589fc4cd29a574b37d1212a96"
+          NEXT_PUBLIC_TARGET='electron'
+          EOF
+          npx turbo run build --filter web
+          npx turbo run prepare-electron --filter web
+          cd apps/desktop
+          npm install -g @todesktop/cli@1.9.1
+          todesktop build
+        env:
+          TODESKTOP_ACCESS_TOKEN: ${{ secrets.TODESKTOP_ACCESS_TOKEN }}
+          TODESKTOP_EMAIL: ${{ secrets.TODESKTOP_EMAIL }}
+          INTERNAL_INTEGRATION_API_URL: ${{ secrets.INTERNAL_INTEGRATION_API_URL }}
+          NEXT_PUBLIC_SVM_METRICS: "https://fr64dzklc3.execute-api.us-west-2.amazonaws.com/prod"
+          NEXT_PUBLIC_ADOBE_EMBED_API_KEY: "a165f09589fc4cd29a574b37d1212a96"
+          NEXT_PUBLIC_TARGET: "electron"
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+
+  test-desktop-app:
+    runs-on: ubuntu-latest
+    needs: build-desktop-app
+    timeout-minutes: 45
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.11.1
+      - name: Smoke test electron app
+        run: |
+          npm install -g @todesktop/cli@1.9.1
+          cd apps/desktop
+          todesktop smoke-test
+        env:
+          TODESKTOP_ACCESS_TOKEN: ${{ secrets.TODESKTOP_ACCESS_TOKEN }}
+          TODESKTOP_EMAIL: ${{ secrets.TODESKTOP_EMAIL }}
+
+  release-desktop-app:
+    needs: test-desktop-app
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.11.1
+      - name: Smoke test electron app
+        run: |
+          npm install -g @todesktop/cli@1.9.1
+          cd apps/desktop
+          todesktop release --latest
+        env:
+          TODESKTOP_ACCESS_TOKEN: ${{ secrets.TODESKTOP_ACCESS_TOKEN }}
+          TODESKTOP_EMAIL: ${{ secrets.TODESKTOP_EMAIL }}

.gitignore

@@ -28,10 +28,11 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
-
+.env.desktop
 # turbo
 .turbo
 
 # package builds
 dist/
-cache/
+cache/
+standalone/

.vscode/settings.json

@@ -9,5 +9,9 @@
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "typescript.preferences.importModuleSpecifier": "non-relative"
 }

README.md

@@ -5,6 +5,7 @@
 This is a monorepo built with [Turborepo](https://turbo.build/repo). These are the workspaces inside:
 
 - `apps/web`: the main app built with [Next.js](https://nextjs.org/)
+- `apps/desktop`: the desktop app built with electron, this is just a wrapper around the web app
 - `packages/@modularcloud/headless`: headless utils used to fetch data from the different chains
 - `packages/tsconfig`: `tsconfig.json`s used throughout the monorepo
 - `packages/eslint-config-custom`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)

apps/desktop/.gitignore

@@ -0,0 +1,5 @@
+apps/
+packages/
+resolver/
+package.json
+package-lock.json

apps/desktop/README.md

@@ -0,0 +1,50 @@
+# Modular Cloud desktop app
+
+## How to run the project
+
+1. Setup the environment variables needed to build the project with electron by modifying `app/web/.env` :
+
+   ```shell
+   INTERNAL_INTEGRATION_API_URL=<private-api-for-getting-network-chains>
+   NEXT_PUBLIC_SVM_METRICS="https://fr64dzklc3.execute-api.us-west-2.amazonaws.com/prod"
+   NEXT_PUBLIC_ADOBE_EMBED_API_KEY="a165f09589fc4cd29a574b37d1212a96"
+   NEXT_PUBLIC_TARGET='electron'
+   ```
+
+2. Build the nextjs app :
+
+   ```shell
+   # go to the root
+   cd ../..
+
+   # build the nextjs app
+   npx turbo run build --filter web
+   ```
+
+   You may get an error when building the app,
+   for that you can go to the web folder and build it manuaally :
+
+   ```shell
+   cd apps/web
+   npm run prefetch:networks
+   npm run build
+   ```
+
+3. Export the built files from the next app :
+
+   ```shell
+   cd apps/web
+   npm run prepare-electron
+   ```
+
+4. Run the desktop project :
+
+   ```shell
+   npx electron index.js
+   ```
+
+5. (Optional) Build and release the project :
+
+   ```shell
+   TODESKTOP_ACCESS_TOKEN=<token> TODESKTOP_EMAIL=<email>  todesktop build
+   ```

apps/desktop/index.js

@@ -0,0 +1,83 @@
+/* eslint-disable turbo/no-undeclared-env-vars */
+// @ts-check
+const { app, BrowserWindow, dialog } = require("electron");
+const todesktop = require("@todesktop/runtime");
+const log = require("electron-log/main");
+
+log.initialize();
+log.transports.ipc.level = "verbose";
+Object.assign(console, log.functions);
+
+log.errorHandler.startCatching({
+  showDialog: true,
+  onError({ error, processType }) {
+    if (processType === "renderer") {
+      return;
+    }
+
+    dialog
+      .showMessageBox({
+        title: "An error occurred",
+        message: error.message,
+        detail: error.stack,
+        type: "error",
+        buttons: ["Ignore", "Exit"],
+      })
+      .then((result) => {
+        if (result.response === 1) {
+          app.quit();
+        }
+      });
+  },
+});
+
+function getRandomPort() {
+  return Math.floor(Math.random() * (65535 - 49152 + 1)) + 49152;
+}
+
+let hasServerStarted = false;
+let totalAttempsLeft = 10;
+while (!hasServerStarted && totalAttempsLeft > 0) {
+  try {
+    process.env.PORT = getRandomPort().toString();
+    require("./apps/web/server.js");
+    hasServerStarted = true;
+  } catch (error) {
+    totalAttempsLeft--;
+  }
+}
+
+todesktop.init();
+
+function createWindow() {
+  // Create the browser window.
+  const mainWindow = new BrowserWindow({
+    width: 1200,
+    height: 900,
+    title: "Explorer",
+    titleBarStyle: "hidden",
+    trafficLightPosition: {
+      x: 16,
+      y: 16,
+    },
+    webPreferences: {
+      nodeIntegration: true,
+      devTools: true,
+    },
+  });
+
+  // this is to override the title set by `./apps/web/server.js`
+  // so that the window will show `Explorer` instead of `next-server`
+  process.title = mainWindow.title;
+
+  // and load the index.html of the app.
+  mainWindow.loadURL(`http://localhost:${process.env.PORT}`);
+  mainWindow.on("closed", () => {
+    app.quit();
+  });
+}
+
+app.whenReady().then(createWindow);
+app.on("window-all-closed", () => {
+  app.quit();
+});

apps/desktop/todesktop.json

@@ -0,0 +1,28 @@
+{
+  "id": "240314gel7u7qi9",
+  "icon": "./assets/mc-app-icon.png",
+  "appPath": "./",
+  "schemaVersion": 1,
+  "npmVersion": "10.2.4",
+  "nodeVersion": "20.11.1",
+  "includeSubNodeModules": true,
+  "asar": false,
+  "packageJson": {
+    "extends": "package.json",
+    "main": "index.js",
+    "productName": "Modular Cloud Explorer",
+    "homepage": "https://explorer.modular.cloud",
+    "description": "A block exporer for modular blockchains.",
+    "author": {
+      "name": "Liam Cardenas",
+      "email": "lzrs@modular.cloud"
+    },
+    "scripts": {
+      "prepare": null
+    },
+    "dependencies": {
+      "@todesktop/runtime": "^1.6.1"
+    }
+  },
+  "uploadSizeLimit": 400
+}

apps/web/.env

@@ -0,0 +1,4 @@
+# INTERNAL_INTEGRATION_API_URL="***"
+NEXT_PUBLIC_SVM_METRICS="https://fr64dzklc3.execute-api.us-west-2.amazonaws.com/prod"
+NEXT_PUBLIC_ADOBE_EMBED_API_KEY="a165f09589fc4cd29a574b37d1212a96"
+NEXT_PUBLIC_TARGET='electron'

apps/web/app/(entity)/[network]/[...path]/layout.tsx

@@ -31,7 +31,7 @@ export default function EntityLayout({ children, params }: Props) {
         className={cn(
           "overflow-x-clip fixed left-0 bottom-0 lg:max-w-[calc(100%_-_27rem)] w-full",
           // this is default position when there is a 404 error
-          "top-[calc(theme('spacing.header')_-_10px)]",
+          "top-[calc(var(--header-size)+var(--header-tabs-size)_-_10px))]",
         )}
       >
         {children}

apps/web/app/(entity)/[network]/layout.tsx

@@ -1,13 +1,9 @@
-// components
 import { Header } from "~/ui/header";
 import { HideBodyOverflow } from "~/ui/hide-body-overflow";
-
-// utils
 import { getSingleNetwork } from "~/lib/network";
 import { cn } from "~/ui/shadcn/utils";
-
-// types
-import { HeadlessRoute } from "~/lib/headless-utils";
+import { DEFAULT_BRAND_COLOR } from "~/lib/constants";
+import type { HeadlessRoute } from "~/lib/headless-utils";
 
 export default async function BlockLayout({
   children,
@@ -24,7 +20,7 @@ export default async function BlockLayout({
     <main
       className="min-h-screen flex flex-col h-full"
       style={{
-        "--color-primary": network?.config.primaryColor,
+        "--color-primary": network?.config.primaryColor ?? DEFAULT_BRAND_COLOR,
         "--gradient-primary": network?.config.cssGradient,
       }}
     >
@@ -37,7 +33,7 @@ export default async function BlockLayout({
           id="main-content"
           tabIndex={0}
           className={cn(
-            "mt-[65px] bg-white min-h-screen",
+            "mt-header bg-white min-h-screen",
             // style children but not the header nav
             "[&>*:not(nav)]:bg-white col-span-6",
           )}

apps/web/app/(home)/[network]/page.tsx

@@ -10,7 +10,7 @@ import type { HeadlessRoute } from "~/lib/headless-utils";
 import { SVMWidgetLayout } from "~/ui/network-widgets/layouts/svm";
 import { CelestiaWidgetLayout } from "~/ui/network-widgets/layouts/celestia";
 import { DymensionWidgetLayout } from "~/ui/network-widgets/layouts/dymension";
-import { env } from "~/env.mjs";
+import { env } from "~/env.js";
 import { OG_SIZE } from "~/lib/constants";
 
 interface Props {