Add popup to show when desktop app is not running #72

naps62 · 2026-01-23T17:15:07Z

Add browser action popup with React and @ethui/ui components
Show connection status (connected/disconnected) in popup
Display badge indicator ("!") on extension icon when disconnected
Show browser notification on first connection failure
Add link to ethui.dev when desktop app is not running

- Add browser action popup with React and @ethui/ui components - Show connection status (connected/disconnected) in popup - Display badge indicator ("!") on extension icon when disconnected - Show browser notification on first connection failure - Add link to ethui.dev when desktop app is not running 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/background/connectionState.ts

Show address (truncated with copy button), network name, and balance when the ethui desktop app is connected. Uses dedicated WebSocket connection to make eth_accounts, eth_chainId, and eth_getBalance RPC calls. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Instead of showing "disconnected" when no tab has made a request yet, the popup now proactively checks the connection to the desktop app by attempting a WebSocket connection. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Add viem dependency for comprehensive chain definitions - Build chain name map from viem/chains instead of hardcoded list - Use black icon for notifications instead of purple 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Added onclose handler and deduplication flag to ensure the connection check always resolves, even when the WebSocket closes without firing the error event first. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Remove center alignment from all popup views - Make title smaller (text-sm) and black in all states - Remove unused cn import 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Poll for connection every 2 seconds when the popup shows disconnected state. Once the desktop app is detected, automatically switch to connected state and show wallet info. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Poll for connection changes in both connected and disconnected states, so the popup updates when the app is closed while viewing connected. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Use @ethui/ui Alert component with destructive variant to show the disconnected error message. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Split the monolithic App component into: - hooks/useConnectionState.ts - connection state management and polling - hooks/useWalletInfo.ts - wallet info fetching - components/Header.tsx - shared header with logo - components/ConnectedView.tsx - connected state UI - components/DisconnectedView.tsx - disconnected state UI - utils.ts - utility functions (truncateAddress, formatBalance, getChainName) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

The hook is only used in ConnectedView, so call it there directly instead of passing props from App. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Copilot

Pull request overview

This PR adds a browser action popup to the ethui extension that displays connection status and wallet information, providing users with visibility into whether the desktop app is running and accessible.

Changes:

Added popup UI with React components showing connection status (connected/disconnected/unknown)
Implemented connection state monitoring with badge indicators and browser notifications
Integrated @ethui/ui component library and Tailwind CSS v4 for styling
Added WebSocket-based connection checking and wallet info fetching

Reviewed changes

Copilot reviewed 14 out of 17 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
package.json, yarn.lock	Added dependencies: @ethui/ui, @tailwindcss/vite, tailwindcss, viem, @fontsource/source-code-pro
vite/base.ts	Added Tailwind CSS plugin and popup entry point to build configuration
manifest/base.json	Added popup HTML reference and notifications permission
src/background/index.ts	Integrated connection state tracking into WebSocket lifecycle events
src/background/connectionState.ts	New file implementing connection monitoring, badge updates, and wallet info fetching
src/popup/*	New popup UI with React components, hooks, and utilities for displaying connection/wallet state
.gitignore	Added .claude directory to ignore list

Comments suppressed due to low confidence (1)

vite/base.ts:50

The output configuration on lines 47-50 has a ternary condition that produces the same result for both branches: "[name]/index.js" in both cases. This makes the conditional check for chunk.name === "devtools" || chunk.name === "panel" redundant. Consider simplifying this to just return "[name]/index.js" directly, or if different behavior was intended for different chunks, correct the logic to implement the intended distinction.

        entryFileNames: (chunk) =>
          chunk.name === "devtools" || chunk.name === "panel"
            ? "[name]/index.js"
            : "[name]/index.js",

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/background/connectionState.ts

src/popup/hooks/useConnectionState.ts

Copilot · 2026-01-27T15:29:19Z

src/popup/utils.ts

+export function formatBalance(balanceHex: string): string {
+  try {
+    const wei = BigInt(balanceHex);
+    const eth = Number(wei) / 1e18;
+    if (eth === 0) return "0 ETH";
+    if (eth < 0.0001) return "<0.0001 ETH";
+    return `${eth.toFixed(4)} ETH`;
+  } catch {
+    return "0 ETH";
+  }


The formatBalance function on line 22 converts wei to a number by dividing Number(wei) / 1e18. This approach can lose precision for large balance values because JavaScript's Number type has limited precision (53 bits). For balances larger than about 9007 ETH, this will result in precision loss. Consider using string-based arithmetic or a library like viem (which is already a dependency) to handle wei-to-ETH conversion with full precision, or at minimum document that balances may be imprecise for very large values.

src/background/connectionState.ts

naps62 commented Jan 23, 2026

View reviewed changes

src/background/connectionState.ts Outdated Show resolved Hide resolved

naps62 and others added 11 commits January 23, 2026 17:28

wip

740b530

wip

35d98c7

Add error alert to disconnected state

af77525

Use @ethui/ui Alert component with destructive variant to show the disconnected error message. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

ZePedroResende approved these changes Jan 26, 2026

View reviewed changes

Move useWalletInfo into ConnectedView

b10e12d

The hook is only used in ConnectedView, so call it there directly instead of passing props from App. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

naps62 marked this pull request as ready for review January 27, 2026 15:21

Copilot AI review requested due to automatic review settings January 27, 2026 15:21

Copilot started reviewing on behalf of naps62 January 27, 2026 15:21 View session

wip

3ff92ff

Copilot AI reviewed Jan 27, 2026

View reviewed changes

naps62 added 3 commits January 27, 2026 15:36

wip

995f691

wip

67f7cc2

wip

e6ffc6d

naps62 added the A-feature label Jan 27, 2026

naps62 added 3 commits January 27, 2026 16:28

wip

db79fb9

wip

b9269cf

wip

fa192f8

naps62 merged commit 84d718b into main Jan 27, 2026
2 checks passed

naps62 deleted the feature/connection-popup branch January 27, 2026 16:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add popup to show when desktop app is not running #72

Add popup to show when desktop app is not running #72

Uh oh!

naps62 commented Jan 23, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jan 27, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Add popup to show when desktop app is not running #72

Add popup to show when desktop app is not running #72

Uh oh!

Conversation

naps62 commented Jan 23, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants