🚧 Setting up for electron

.gitignore

@@ -34,4 +34,5 @@ yarn-error.log*
 
 # package builds
 dist/
-cache/
+cache/
+standalone/

apps/web/.env.desktop

@@ -0,0 +1,9 @@
+METRICS_API_URL="https://vdaxrv9g11.execute-api.us-west-2.amazonaws.com/prod"
+NAMESPACE_ENDPOINT="https://a1evbjtjuf.execute-api.us-west-2.amazonaws.com/prod"
+ALT_BASE_URL="https://09mz6csef3.execute-api.us-west-2.amazonaws.com/prod"
+INTERNAL_INTEGRATION_API_URL="https://jt83aq18hi.execute-api.us-west-2.amazonaws.com/prod/v1/internal"
+NEXT_PUBLIC_SVM_METRICS="https://fr64dzklc3.execute-api.us-west-2.amazonaws.com/prod"
+SVM_DEVNET_RPC_ALTERNATIVE="https://ixpivxl1k3.execute-api.us-west-2.amazonaws.com/prod"
+CELESTIA_MAINNET_BACKUP_NODE="http://54.213.197.147:26657"
+NEXT_PUBLIC_ADOBE_EMBED_API_KEY="a165f09589fc4cd29a574b37d1212a96"
+TARGET='electron'

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 {

apps/web/app/(register)/register/send-email.action.tsx

@@ -1,6 +1,6 @@
 "use server";
 
-import { env } from "~/env.mjs";
+import { env } from "~/env.js";
 import type { RegisterFormValues } from "./register-schema";
 import { Resend } from "resend";
 

apps/web/app/api/revalidate-tag/route.ts

@@ -1,7 +1,7 @@
 import { revalidateTag } from "next/cache";
 import { NextResponse } from "next/server";
 import { z } from "zod";
-import { env } from "~/env.mjs";
+import { env } from "~/env.js";
 
 const revalidateRequestSchema = z.object({
   tags: z.array(z.string().min(1)),

apps/web/app/api/save-dymension-ibc-events/route.ts

@@ -1,7 +1,7 @@
 import { registerResolvers, resolve } from "@modularcloud/headless";
 import { sql } from "@vercel/postgres";
 import { NextRequest, NextResponse } from "next/server";
-import { env } from "~/env.mjs";
+import { env } from "~/env.js";
 import {
   DYMENSION_ROLLAPP_IBC_RESOLVER_ID,
   DYMENSION_ROLLAPP_IBC_RESOLVER_INPUT,

apps/web/app/layout.tsx

@@ -6,7 +6,7 @@ import { GlobalHotkeyProvider } from "~/ui/global-hotkey-provider";
 import { SkipToMainContent } from "~/ui/skip-to-main-content";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import { ClientProviders } from "~/ui/client-providers";
-import { env } from "~/env.mjs";
+import { env } from "~/env.js";
 import localFont from "next/font/local";
 import { getGroupedNetworkChains } from "~/lib/grouped-network-chains";
 
@@ -69,6 +69,8 @@ export default async function RootLayout({
         className={`${interDisplay.variable} font-sans text-foreground`}
         suppressHydrationWarning
       >
+        {/* Draggable area on desktop */}
+        <div className="hidden todesktop:block bg-transparent h-[35px] [-webkit-app-region:drag] fixed top-0 left-0 right-0 z-[9999]" />
         <SkipToMainContent />
         <ClientProviders searchOptions={searchOptionGroups}>
           <GlobalHotkeyProvider optionGroups={searchOptionGroups}>

apps/web/electron/index.js

@@ -0,0 +1,32 @@
+const { app, BrowserWindow } = require("electron");
+const todesktop = require("@todesktop/runtime");
+require("./standalone/apps/web/server.js");
+
+todesktop.init();
+
+function createWindow() {
+  // Create the browser window.
+  const mainWindow = new BrowserWindow({
+    width: 1200,
+    height: 900,
+    titleBarStyle: "hidden",
+    titleBarOverlay: {
+      height: 35,
+    },
+    webPreferences: {
+      nodeIntegration: true,
+      devTools: !app.isPackaged,
+    },
+  });
+
+  // and load the index.html of the app.
+  mainWindow.loadURL(`http://localhost:3000`);
+  mainWindow.on("closed", () => {
+    app.quit();
+  });
+}
+
+app.whenReady().then(createWindow);
+app.on("window-all-closed", () => {
+  app.quit();
+});

apps/web/env.mjs → apps/web/env.js

@@ -1,12 +1,12 @@
 // @ts-check
-import { createEnv } from "@t3-oss/env-nextjs";
-import { preprocess, z } from "zod";
+const { preprocess, z } = require("zod");
+const { createEnv } = require("@t3-oss/env-nextjs");
 
-export const env = createEnv({
+const env = createEnv({
   server: {
     TARGET: z.enum(["web", "electron"]).default("web"),
     NAMESPACE_ENDPOINT: z.string().url().optional(),
-    BLOB_READ_WRITE_TOKEN: z.string(),
+    BLOB_READ_WRITE_TOKEN: z.string().optional(),
     ALT_BASE_URL: z.string().url().optional(),
     INTERNAL_INTEGRATION_API_URL: z.string().url(),
     REVALIDATE_TOKEN: z.string().min(32).optional(),
@@ -70,3 +70,7 @@ export const env = createEnv({
     TARGET: process.env.TARGET,
   },
 });
+
+module.exports = {
+  env,
+};

apps/web/lib/dymension-utils.ts

@@ -1,5 +1,5 @@
 import { sql } from "@vercel/postgres";
-import { env } from "~/env.mjs";
+import { env } from "~/env.js";
 import { jsonFetch } from "./shared-utils";
 
 export async function getDymensionIBCTransfertEvents(): Promise<

apps/web/lib/headless-utils.ts

@@ -14,7 +14,7 @@ import { nextCache } from "./server-utils";
 import { CACHE_KEYS } from "./cache-keys";
 import { z } from "zod";
 import { ALWAYS_ONLINE_NETWORKS } from "./constants";
-import { env } from "~/env.mjs";
+import { env } from "~/env.js";
 
 /**
  * This is reused on the `api/load-page/route.ts` file

apps/web/lib/network.ts

@@ -1,6 +1,6 @@
 import "server-only";
 import { z } from "zod";
-import { env } from "~/env.mjs";
+import { env } from "~/env.js";
 import { CACHE_KEYS } from "./cache-keys";
 import { cache } from "react";
 import { integrations, integrationList } from "~/lib/cache";

apps/web/next.config.mjs → apps/web/next.config.js

@@ -1,5 +1,5 @@
 // @ts-check
-import "./env.mjs";
+require("./env.js");
 
 /** @type {import('next').NextConfig} */
 const config = {
@@ -55,4 +55,4 @@ const config = {
   },
 };
 
-export default config;
+module.exports = config;

apps/web/package.json

@@ -19,9 +19,11 @@
     "gen:icons": "npx @svgr/cli --typescript --out-dir ui/icons -- ui/icon-svgs",
     "prefetch:networks": "set -a; . ./.env.local; set +a && tsx --tsconfig ./tsconfig.script.json ./this-is-ridiculous.ts",
     "prefetch:networks-prod": "tsx --tsconfig ./tsconfig.script.json ./this-is-ridiculous.ts",
-    "electron": "electron ./electron/index.js"
+    "electron": "electron ./electron/index.js",
+    "build:prepare-electron": "next build && rsync -a .next/static/ .next/standalone/apps/web/.next/static && rsync -a public/ .next/standalone/apps/web/public && cp .env.desktop .next/standalone/apps/web/.env.local && rsync -a .next/standalone/ electron/standalone && sed -i .bak 's/process.chdir(__dirname)//g' electron/standalone/apps/web/server.js",
+    "build:electron": "npm run build:prepare-electron && todesktop build"
   },
-  "type": "module",
+  "main": "electron/index.js",
   "dependencies": {
     "@headlessui/react": "^1.7.18",
     "@modularcloud/headless": "*",
@@ -42,6 +44,7 @@
     "@t3-oss/env-nextjs": "^0.6.1",
     "@tanstack/react-query": "^5.0.0",
     "@tanstack/react-query-devtools": "^5.0.5",
+    "@todesktop/runtime": "^1.6.1",
     "@uploadcare/upload-client": "^6.6.1",
     "@vercel/analytics": "^0.1.11",
     "@vercel/blob": "^0.14.1",
@@ -74,6 +77,7 @@
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@svgr/cli": "^8.1.0",
+    "@todesktop/tailwind-variants": "^1.0.1",
     "@types/node": "^17.0.12",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",

apps/web/tailwind.config.cjs

@@ -122,6 +122,7 @@ module.exports = {
     },
   },
   plugins: [
+    require("@todesktop/tailwind-variants"),
     require("tailwindcss-animate"),
     require("tailwind-scrollbar")({ nocompatible: true }),
   ],

apps/web/this-is-ridiculous.ts

@@ -7,7 +7,7 @@ import fs from "node:fs/promises";
 import { FileSystemCacheDEV } from "~/lib/fs-cache-dev";
 import { preprocess, z } from "zod";
 import { capitalize } from "./lib/shared-utils";
-import { env } from "~/env.mjs";
+import { env } from "~/env.js";
 
 export const singleNetworkSchema = z.object({
   config: z.object({

apps/web/todesktop.json

@@ -0,0 +1,6 @@
+{
+    "id": "240314gel7u7qi9",
+    "icon": "./public/images/mc-logo.svg",
+    "appPath": "./electron",
+    "schemaVersion": 1
+}

apps/web/ui/entity/overview/blob.tsx

@@ -7,7 +7,7 @@ import Script from "next/script";
 import { ButtonBody } from "./button-body";
 import Link from "next/link";
 
-import { env } from "~/env.mjs";
+import { env } from "~/env.js";
 import { CACHE_KEYS } from "~/lib/cache-keys";
 
 export function Blob({ url, mimeType }: { url: string; mimeType: string }) {

apps/web/ui/network-widgets/layouts/svm/get-metrics.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { env } from "~/env.mjs";
+import { env } from "~/env.js";
 import { DEFAULT_WIDGET_REVALIDATE_TIME_IN_SECONDS } from "~/lib/constants";
 
 export const svmMetricsDataSchema = z.object({