fix(wallet): complete React 19 move and use the browser global (wxt 0.20 / TS6)

wallet/entrypoints/background.ts

@@ -850,7 +850,7 @@ function startApprovalWindow(): void {
   approvalOpening = browser.windows
     .create({ url: browser.runtime.getURL("/popup.html#/approve"), type: "popup", width: 380, height: 600 })
     .then((w) => {
-      approvalWindowId = w.id ?? null;
+      approvalWindowId = w?.id ?? null;
       // Survive a service-worker restart: a stale approval window left behind
       // after the SW died is swept on the next boot (see sweepOrphanWindows).
       void browser.storage.session.set({ "approval-window": approvalWindowId });

wallet/entrypoints/popup/home.tsx

@@ -44,11 +44,11 @@ export function WalletHome({ state, onChange }: { state: WalletState; onChange:
   const [hideZero, setHideZero] = useState(false);
   const [showSpam, setShowSpam] = useState(false);
   useEffect(() => {
-    void chrome.storage.local.get("ui-hide-zero").then((r) => setHideZero(Boolean(r["ui-hide-zero"])));
+    void browser.storage.local.get("ui-hide-zero").then((r) => setHideZero(Boolean(r["ui-hide-zero"])));
   }, []);
   const toggleHideZero = () => {
     setHideZero((v) => {
-      void chrome.storage.local.set({ "ui-hide-zero": !v });
+      void browser.storage.local.set({ "ui-hide-zero": !v });
       return !v;
     });
   };
@@ -104,8 +104,8 @@ export function WalletHome({ state, onChange }: { state: WalletState; onChange:
     const listener = (changes: Record<string, unknown>, area: string) => {
       if (area === "local" && "selected-chain" in changes) onChange();
     };
-    chrome.storage.onChanged.addListener(listener);
-    return () => chrome.storage.onChanged.removeListener(listener);
+    browser.storage.onChanged.addListener(listener);
+    return () => browser.storage.onChanged.removeListener(listener);
   }, [onChange]);
   // The user should never have to reopen the popup to see a received payment.
   // refreshTick also re-fires the DAO/Worker cards (their balances move too).
@@ -490,7 +490,7 @@ function NetworkSwitcher({ chainId, onSwitch }: { chainId: number; onSwitch: (id
   const [open, setOpen] = useState(false);
   const [hideTestnets, setHideTestnets] = useState(false);
   useEffect(() => {
-    if (open) void chrome.storage.local.get("ui-hide-testnets").then((r) => setHideTestnets(Boolean(r["ui-hide-testnets"])));
+    if (open) void browser.storage.local.get("ui-hide-testnets").then((r) => setHideTestnets(Boolean(r["ui-hide-testnets"])));
   }, [open]);
   const visibleChains = CHAIN_LIST.filter((c) => !hideTestnets || !c.testnet || c.id === chainId);
   return (

wallet/entrypoints/popup/shared.tsx

@@ -36,7 +36,7 @@ export const fmtBal = (s: string): string => {
 };
 export const isApproveWindow = () => window.location.hash.includes("approve");
 export const isExpanded = () => window.location.hash.includes("expanded");
-export const openFullTab = () => void chrome.tabs.create({ url: chrome.runtime.getURL("popup.html#/expanded") });
+export const openFullTab = () => void browser.tabs.create({ url: browser.runtime.getURL("/popup.html#/expanded") });
 
 export function avatarGradient(addr: string): string {
   let h = 0;

wallet/entrypoints/popup/sheets-chat.tsx

@@ -21,7 +21,7 @@ const PHASE_LABEL: Record<Exclude<Phase, null>, string> = {
 };
 
 export function ChatSheet({ from, onClose }: { from: string; onClose: () => void }) {
-  const portRef = useRef<chrome.runtime.Port | null>(null);
+  const portRef = useRef<ReturnType<typeof browser.runtime.connect> | null>(null);
   const [models, setModels] = useState<ChatModel[] | null | undefined>(undefined);
   const [model, setModel] = useState<ChatModel | null>(null);
   const [consented, setConsented] = useState(false);
@@ -35,7 +35,7 @@ export function ChatSheet({ from, onClose }: { from: string; onClose: () => void
   const endRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    const port = chrome.runtime.connect({ name: "lc-chat" });
+    const port = browser.runtime.connect({ name: "lc-chat" });
     portRef.current = port;
     port.onMessage.addListener((m: { type: string; models?: ChatModel[]; phase?: Phase; text?: string; feeLcai?: number; message?: string }) => {
       if (m.type === "models") {

wallet/entrypoints/popup/sheets-settings.tsx

@@ -61,7 +61,7 @@ export function SettingsSheet({ state, onClose, onRemoved, onChanged }: { state:
   const [removeArmed, setRemoveArmed] = useState(false);
   useEffect(() => {
     wallet<string[]>({ type: "getOrigins" }).then(setOrigins).catch(() => setOrigins([]));
-    void chrome.storage.local.get("ui-hide-testnets").then((r) => setHideTestnets(Boolean(r["ui-hide-testnets"])));
+    void browser.storage.local.get("ui-hide-testnets").then((r) => setHideTestnets(Boolean(r["ui-hide-testnets"])));
   }, []);
   const [revokeErr, setRevokeErr] = useState<string | null>(null);
   const revoke = (origin: string) => {
@@ -73,15 +73,15 @@ export function SettingsSheet({ state, onClose, onRemoved, onChanged }: { state:
   const setAutoLock = (minutes: number) => void wallet({ type: "setAutoLock", minutes }).then(onChanged).catch(() => {});
   const toggleTestnets = () => {
     setHideTestnets((v) => {
-      void chrome.storage.local.set({ "ui-hide-testnets": !v });
+      void browser.storage.local.set({ "ui-hide-testnets": !v });
       return !v;
     });
   };
   const remove = async () => {
     await wallet({ type: "removeWallet" });
     onRemoved();
   };
-  const version = chrome.runtime.getManifest().version;
+  const version = browser.runtime.getManifest().version;
   return (
     <Sheet title="Settings" onClose={onClose}>
       <div className="card">

wallet/entrypoints/popup/wallet-api.ts

@@ -2,7 +2,7 @@ import type { WalletOp } from "../../src/provider/protocol";
 
 /** Round-trip a wallet op to the background service worker, surfacing its error. */
 export async function wallet<T>(op: WalletOp): Promise<T> {
-  const res = (await chrome.runtime.sendMessage({ kind: "wallet", op })) as { result?: T; error?: { message: string } };
+  const res = (await browser.runtime.sendMessage({ kind: "wallet", op })) as { result?: T; error?: { message: string } };
   if (res?.error) throw new Error(res.error.message);
   return res.result as T;
 }

wallet/package.json

@@ -19,13 +19,13 @@
     "@scure/bip32": "^1.6.2",
     "@scure/bip39": "^1.5.4",
     "qr": "^0.6.0",
-    "react": "^18.3.1",
+    "react": "^19.2.0",
     "react-dom": "^19.2.7",
     "viem": "^2.21.0"
   },
   "devDependencies": {
     "@types/chrome": "^0.0.287",
-    "@types/react": "^18.3.12",
+    "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.3",
     "@wxt-dev/module-react": "^1.1.3",
     "typescript": "^6.0.3",