Add popup to show when desktop app is not running

manifest/base.json

@@ -28,19 +28,21 @@
       "48": "icons/ethui-black-48.png",
       "96": "icons/ethui-black-96.png",
       "128": "icons/ethui-black-128.png"
-    }
+    },
+    "default_popup": "popup/index.html"
   },
   "web_accessible_resources": [
     {
       "matches": ["<all_urls>"],
       "resources": [
         "/inpage/inpage.js",
         "devtools/index.html",
-        "panel/index.html"
+        "panel/index.html",
+        "popup/index.html"
       ]
     }
   ],
-  "permissions": ["storage"],
+  "permissions": ["storage", "notifications"],
   "icons": {
     "16": "icons/ethui-black-16.png",
     "48": "icons/ethui-black-48.png",

package.json

@@ -21,6 +21,8 @@
   "dependencies": {
     "@devtools-ds/object-inspector": "^1.2.1",
     "@devtools-ds/table": "^1.2.1",
+    "@ethui/ui": "^0.0.141",
+    "@fontsource/source-code-pro": "^5.2.5",
     "@lukeed/uuid": "^2.0.1",
     "@metamask/eth-json-rpc-middleware": "^22.0.0",
     "@metamask/json-rpc-engine": "^10.2.0",
@@ -35,12 +37,14 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "stream": "^0.0.3",
+    "tailwindcss": "^4.1.5",
     "webextension-polyfill": "^0.12.0",
     "websocket-ts": "^2.2.1",
     "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.1",
+    "@tailwindcss/vite": "^4.1.5",
     "@types/chrome": "^0.1.0",
     "@types/json-merge-patch": "^1.0.0",
     "@types/node": "^22.14.0",

src/background/connectionState.ts

@@ -0,0 +1,91 @@
+/// <reference types="chrome" />
+import { action, runtime } from "webextension-polyfill";
+
+export type ConnectionState = "connected" | "disconnected" | "unknown";
+
+let globalConnectionState: ConnectionState = "unknown";
+let hasShownNotification = false;
+
+const NOTIFICATION_ID = "ethui-connection-status";
+
+export function getConnectionState(): ConnectionState {
+  return globalConnectionState;
+}
+
+export function setConnectionState(state: ConnectionState) {
+  const previousState = globalConnectionState;
+  globalConnectionState = state;
+
+  // Broadcast state change to any open popups
+  runtime
+    .sendMessage({
+      type: "connection-state",
+      state: globalConnectionState,
+    })
+    .catch(() => {
+      // Popup may not be open, ignore error
+    });
+
+  updateBadge();
+
+  // Show notification on first disconnection
+  if (
+    state === "disconnected" &&
+    previousState !== "disconnected" &&
+    !hasShownNotification
+  ) {
+    showDisconnectedNotification();
+    hasShownNotification = true;
+  }
+
+  // Reset notification flag when connected
+  if (state === "connected") {
+    hasShownNotification = false;
+  }
+}
+
+function updateBadge() {
+  if (globalConnectionState === "disconnected") {
+    action.setBadgeText({ text: "!" });
+    action.setBadgeBackgroundColor({ color: "#ef4444" });
+  } else if (globalConnectionState === "connected") {
+    action.setBadgeText({ text: "" });
+  }
+}
+
+function showDisconnectedNotification() {
+  if (!chrome.notifications?.create) {
+    return;
+  }
+
+  chrome.notifications.create(NOTIFICATION_ID, {
+    type: "basic",
+    iconUrl: chrome.runtime.getURL("icons/ethui-purple-128.png"),
+    title: "ethui Desktop Not Running",
+    message:
+      "The ethui desktop app doesn't appear to be running. Click the extension icon for more info.",
+  });
+}
+
+export function setupConnectionStateListener() {
+  runtime.onMessage.addListener((message: unknown) => {
+    if (
+      typeof message === "object" &&
+      message !== null &&
+      "type" in message &&
+      (message as { type: string }).type === "get-connection-state"
+    ) {
+      return Promise.resolve({
+        type: "connection-state",
+        state: globalConnectionState,
+      });
+    }
+  });
+
+  // Handle notification click - open ethui.dev
+  chrome.notifications.onClicked.addListener((notificationId) => {
+    if (notificationId === NOTIFICATION_ID) {
+      chrome.tabs.create({ url: "https://ethui.dev" });
+    }
+  });
+}

src/background/index.ts

@@ -1,8 +1,9 @@
 import log from "loglevel";
-import { action, type Runtime, runtime } from "webextension-polyfill";
+import { type Runtime, runtime } from "webextension-polyfill";
 import { ArrayQueue, ConstantBackoff, WebsocketBuilder } from "websocket-ts";
 
 import { defaultSettings, loadSettings, type Settings } from "#/settings";
+import { setConnectionState, setupConnectionStateListener } from "./connectionState";
 import { startHeartbeat } from "./heartbeat";
 
 // init on load
@@ -18,6 +19,8 @@ async function init() {
   settings = await loadSettings();
   log.setLevel(settings.logLevel);
 
+  setupConnectionStateListener();
+
   // handle each incoming content script connection
   runtime.onConnect.addListener((port: Runtime.Port) => {
     if (!port.sender) {
@@ -30,10 +33,6 @@ async function init() {
 
     setupProviderConnection(port);
   });
-
-  action.onClicked.addListener(() => {
-    console.log("icon clicked");
-  });
 }
 
 /**
@@ -97,6 +96,7 @@ function setupProviderConnection(port: Runtime.Port) {
       .onOpen(() => {
         log.debug(`WS connection opened (${url})`);
         isConnecting = false;
+        setConnectionState("connected");
 
         // flush queue
         while (queue.length > 0) {
@@ -108,13 +108,16 @@ function setupProviderConnection(port: Runtime.Port) {
         log.debug(`WS connection closed (${url})`);
         ws = undefined;
         isConnecting = false;
+        setConnectionState("disconnected");
       })
       .onReconnect(() => {
         log.debug("WS connection reconnected");
+        setConnectionState("connected");
       })
       .onError((e) => {
         log.error("[WS] error:", e);
         isConnecting = false;
+        setConnectionState("disconnected");
       })
       .withBuffer(new ArrayQueue())
       .withBackoff(new ConstantBackoff(1000))

src/popup/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+  <head>
+    <title>ethui</title>
+    <style>
+      body {
+        margin: 0;
+        width: 300px;
+        min-height: 150px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

src/popup/index.tsx

@@ -0,0 +1,82 @@
+import { Button } from "@ethui/ui/components/shadcn/button";
+import { cn } from "@ethui/ui/lib/utils";
+import React, { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { runtime } from "webextension-polyfill";
+
+import "./styles.css";
+
+type ConnectionState = "connected" | "disconnected" | "unknown";
+
+interface ConnectionMessage {
+  type: "connection-state";
+  state: ConnectionState;
+}
+
+function App() {
+  const [connectionState, setConnectionState] =
+    useState<ConnectionState>("unknown");
+
+  useEffect(() => {
+    runtime
+      .sendMessage({ type: "get-connection-state" })
+      .then((response: unknown) => {
+        const msg = response as ConnectionMessage;
+        if (msg?.state) {
+          setConnectionState(msg.state);
+        }
+      })
+      .catch(() => {
+        setConnectionState("unknown");
+      });
+
+    const listener = (message: unknown) => {
+      const msg = message as ConnectionMessage;
+      if (msg?.type === "connection-state" && msg?.state) {
+        setConnectionState(msg.state);
+      }
+    };
+    runtime.onMessage.addListener(listener);
+    return () => runtime.onMessage.removeListener(listener);
+  }, []);
+
+  if (connectionState === "connected") {
+    return (
+      <div className="p-5 text-center">
+        <div className="mb-2 font-bold text-green-500 text-lg">Connected</div>
+        <p className="text-muted-foreground text-sm">
+          ethui desktop app is running
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-5 text-center">
+      <div
+        className={cn(
+          "mb-2 font-bold text-lg",
+          connectionState === "disconnected"
+            ? "text-destructive"
+            : "text-muted-foreground",
+        )}
+      >
+        {connectionState === "disconnected" ? "Not Connected" : "Loading..."}
+      </div>
+      <p className="mb-4 text-muted-foreground text-sm">
+        The ethui desktop app doesn't appear to be running.
+      </p>
+      <Button asChild>
+        <a href="https://ethui.dev" target="_blank" rel="noopener noreferrer">
+          Get ethui Desktop
+        </a>
+      </Button>
+    </div>
+  );
+}
+
+createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

src/popup/styles.css

@@ -0,0 +1,3 @@
+@import "@ethui/ui/tailwind.css";
+
+@source "../../node_modules/@ethui/ui";

vite/base.ts

@@ -1,4 +1,6 @@
 import path from "node:path";
+// @ts-ignore - module resolution issue with .mts types
+import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import tsconfigPaths from "vite-tsconfig-paths";
@@ -25,6 +27,7 @@ export default defineConfig({
       exclude: ["fs"],
     }),
     tsconfigPaths({ parseNative: true }),
+    tailwindcss(),
   ],
   build: {
     minify: false,
@@ -38,6 +41,7 @@ export default defineConfig({
         devtools: new URL("../src/devtools/index.html", import.meta.url)
           .pathname,
         panel: new URL("../src/panel/index.html", import.meta.url).pathname,
+        popup: new URL("../src/popup/index.html", import.meta.url).pathname,
       },
       output: {
         entryFileNames: (chunk) =>