chore(deps): Update MetaMask design system and React to v18

package.json

@@ -125,7 +125,7 @@
     }
   },
   "resolutions": {
-    "@radix-ui/react-slot@npm:^1.1.0": "patch:@radix-ui/react-slot@npm%3A1.2.3#~/.yarn/patches/@radix-ui-react-slot-npm-1.2.3-6e45e6d89b.patch",
+    "@radix-ui/react-slot@npm:^1.1.0": "1.2.4",
     "cookie": "^0.7.0",
     "@chainsafe/libp2p-noise": "16.1.5",
     "@libp2p/interface": "2.11.0",

packages/extension/package.json

@@ -51,8 +51,8 @@
     "@metamask/ocap-kernel": "workspace:^",
     "@metamask/streams": "workspace:^",
     "@metamask/utils": "^11.9.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "ses": "^1.14.0"
   },
   "devDependencies": {
@@ -67,8 +67,8 @@
     "@playwright/test": "^1.54.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@types/chrome": "^0.0.313",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@typescript-eslint/eslint-plugin": "^8.29.0",
     "@typescript-eslint/parser": "^8.29.0",
     "@typescript-eslint/utils": "^8.29.0",

packages/extension/src/popup.test.tsx

@@ -1,9 +1,13 @@
 import { App } from '@metamask/kernel-ui';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
-vi.mock('react-dom', () => ({
-  render: vi.fn(),
+const mockRender = vi.fn();
+
+vi.mock('react-dom/client', () => ({
+  createRoot: vi.fn(() => ({
+    render: mockRender,
+  })),
 }));
 
 vi.mock('@metamask/kernel-ui', () => ({
@@ -13,15 +17,17 @@ vi.mock('@metamask/kernel-ui', () => ({
 describe('popup', () => {
   beforeEach(() => {
     document.body.innerHTML = '';
+    vi.clearAllMocks();
   });
 
-  it('should create root element and mount App', async () => {
+  it('creates root element and mounts App', async () => {
     const root = document.createElement('div');
     root.id = 'root';
     document.body.appendChild(root);
     await import('./popup.tsx');
-    expect(render).toHaveBeenCalledWith(expect.any(Object), root);
-    const renderArgs = vi.mocked(render).mock.calls[0];
+    expect(createRoot).toHaveBeenCalledWith(root);
+    expect(mockRender).toHaveBeenCalledWith(expect.any(Object));
+    const renderArgs = mockRender.mock.calls[0];
     expect(renderArgs).toBeDefined();
     expect(renderArgs?.[0]).toBeDefined();
     expect((renderArgs?.[0] as unknown as React.ReactElement)?.type).toBe(App);

packages/extension/src/popup.tsx

@@ -1,6 +1,8 @@
 import '@metamask/kernel-ui/styles.css';
 import { App } from '@metamask/kernel-ui';
 import { createElement } from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
-render(createElement(App), document.getElementById('root'));
+createRoot(document.getElementById('root') as HTMLElement).render(
+  createElement(App),
+);

packages/kernel-ui/package.json

@@ -59,9 +59,9 @@
     "test:watch": "vitest --config vitest.config.ts"
   },
   "dependencies": {
-    "@metamask/design-system-react": "^0.1.0",
-    "@metamask/design-system-tailwind-preset": "^0.5.0",
-    "@metamask/design-tokens": "^8.0.0",
+    "@metamask/design-system-react": "^0.6.0",
+    "@metamask/design-system-tailwind-preset": "^0.6.1",
+    "@metamask/design-tokens": "^8.1.1",
     "@metamask/kernel-browser-runtime": "workspace:^",
     "@metamask/kernel-rpc-methods": "workspace:^",
     "@metamask/kernel-utils": "workspace:^",
@@ -71,8 +71,8 @@
     "tailwindcss": "^3.0.0"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.17.4",
@@ -81,24 +81,21 @@
     "@metamask/eslint-config-nodejs": "^15.0.0",
     "@metamask/eslint-config-typescript": "^15.0.0",
     "@ocap/repo-tools": "workspace:^",
-    "@solana/addresses": "^2.0.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@ts-bridge/cli": "^0.6.3",
     "@ts-bridge/shims": "^0.1.1",
     "@types/chrome": "^0.0.313",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@typescript-eslint/eslint-plugin": "^8.29.0",
     "@typescript-eslint/parser": "^8.29.0",
     "@typescript-eslint/utils": "^8.29.0",
     "@vitejs/plugin-react": "^5.1.2",
     "@vitest/eslint-plugin": "^1.6.5",
     "autoprefixer": "^10.4.21",
-    "bitcoin-address-validation": ">=2.0.0",
     "depcheck": "^1.4.7",
     "eslint": "^9.23.0",
     "eslint-config-prettier": "^10.1.1",

packages/kernel-ui/src/components/table/TableHeader.tsx

@@ -4,11 +4,14 @@ import {
   TextColor,
   FontWeight,
 } from '@metamask/design-system-react';
+import type { PropsWithChildren } from 'react';
 
-export const TableHeader: React.FC<{
-  first?: boolean;
-  variant?: TextVariant;
-}> = ({ first, variant = TextVariant.BodyXs, children }) => {
+export const TableHeader: React.FC<
+  PropsWithChildren<{
+    first?: boolean;
+    variant?: TextVariant;
+  }>
+> = ({ first, variant = TextVariant.BodyXs, children }) => {
   return (
     <th
       className={`text-left py-2 px-3 ${first ? 'border-r border-muted' : ''}`}

packages/kernel-ui/src/context/PanelContext.test.tsx

@@ -1,5 +1,4 @@
-import { waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { describe, it, expect, vi } from 'vitest';
 
 vi.mock('@metamask/kernel-utils', () => ({
@@ -259,11 +258,10 @@ describe('PanelContext', () => {
   });
 
   describe('usePanelContext', () => {
-    it('should throw error when used outside of PanelProvider', async () => {
+    it('throws error when used outside of PanelProvider', async () => {
       const { usePanelContext } = await import('./PanelContext.tsx');
-      const { result } = renderHook(() => usePanelContext());
-      expect(result.error).toStrictEqual(
-        new Error('usePanelContext must be used within a PanelProvider'),
+      expect(() => renderHook(() => usePanelContext())).toThrow(
+        'usePanelContext must be used within a PanelProvider',
       );
     });
   });

packages/kernel-ui/src/hooks/useDarkMode.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 
 import { useDarkMode } from './useDarkMode.ts';

packages/kernel-ui/src/hooks/useDatabase.test.ts

@@ -1,5 +1,4 @@
-import { waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 import { useDatabase } from './useDatabase.ts';

packages/kernel-ui/src/hooks/useKernelActions.test.ts

@@ -1,6 +1,5 @@
 import clusterConfig from '@metamask/kernel-browser-runtime/default-cluster' assert { type: 'json' };
-import { waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 vi.mock('../context/PanelContext.tsx', () => ({

packages/kernel-ui/src/hooks/useRegistry.test.ts

@@ -1,5 +1,4 @@
-import { waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 import { useRegistry } from './useRegistry.ts';

packages/kernel-ui/src/hooks/useStatusPolling.test.ts

@@ -1,6 +1,5 @@
 import clusterConfig from '@metamask/kernel-browser-runtime/default-cluster' assert { type: 'json' };
-import { waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 
 vi.mock('../services/logger.ts', () => ({

packages/kernel-ui/src/hooks/useStream.test.ts

@@ -1,5 +1,4 @@
-import { waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 import { useStream } from './useStream.ts';

packages/kernel-ui/src/hooks/useVats.test.ts

@@ -1,7 +1,6 @@
 import type { VatConfig } from '@metamask/ocap-kernel';
 import { setupOcapKernelMock } from '@ocap/repo-tools/test-utils';
-import { waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { waitFor, renderHook } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 import type { PanelContextType } from '../context/PanelContext.tsx';

packages/kernel-ui/vite.config.ts

@@ -39,12 +39,11 @@ export default defineConfig(({ mode }) => {
         },
       },
       rollupOptions: {
-        external: [
-          'react',
-          'react-dom',
-          'react/jsx-runtime',
-          'react/jsx-dev-runtime',
-        ],
+        external: (id) =>
+          id === 'react' ||
+          id === 'react-dom' ||
+          id.startsWith('react/') ||
+          id.startsWith('react-dom/'),
         output: {
           globals: {
             react: 'React',

packages/kernel-ui/vitest.config.ts

@@ -11,11 +11,28 @@ export default defineConfig((args) => {
     args,
     defaultConfig,
     defineProject({
+      resolve: {
+        alias: {
+          // Handle packages that import react/jsx-runtime.js with .js extension
+          'react/jsx-runtime.js': 'react/jsx-runtime',
+          'react/jsx-dev-runtime.js': 'react/jsx-dev-runtime',
+        },
+      },
       test: {
         name: 'kernel-ui',
         environment: 'jsdom',
         setupFiles: path.resolve(import.meta.dirname, './test/setup.ts'),
         testTimeout: 3000,
+        deps: {
+          optimizer: {
+            web: {
+              include: [
+                '@radix-ui/react-slot',
+                '@metamask/design-system-react',
+              ],
+            },
+          },
+        },
       },
     }),
   );

packages/omnium-gatherum/package.json

@@ -52,8 +52,8 @@
     "@metamask/ocap-kernel": "workspace:^",
     "@metamask/streams": "workspace:^",
     "@metamask/utils": "^11.9.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "ses": "^1.14.0"
   },
   "devDependencies": {
@@ -65,11 +65,12 @@
     "@ocap/cli": "workspace:^",
     "@ocap/repo-tools": "workspace:^",
     "@playwright/test": "^1.54.2",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^16.3.0",
     "@types/chrome": "^0.0.313",
-    "@types/react": "^17.0.11",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@types/webextension-polyfill": "^0",
     "@typescript-eslint/eslint-plugin": "^8.29.0",
     "@typescript-eslint/parser": "^8.29.0",

packages/omnium-gatherum/src/devtools/kernel-panel.tsx

@@ -1,6 +1,8 @@
 import '@metamask/kernel-ui/styles.css';
 import { App } from '@metamask/kernel-ui';
 import { createElement } from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
-render(createElement(App), document.getElementById('root'));
+createRoot(document.getElementById('root') as HTMLElement).render(
+  createElement(App),
+);

packages/omnium-gatherum/src/popup.test.tsx

@@ -1,10 +1,14 @@
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 import { App } from './ui/App.tsx';
 
-vi.mock('react-dom', () => ({
-  render: vi.fn(),
+const mockRender = vi.fn();
+
+vi.mock('react-dom/client', () => ({
+  createRoot: vi.fn(() => ({
+    render: mockRender,
+  })),
 }));
 
 vi.mock('./ui/App.tsx', () => ({
@@ -14,15 +18,17 @@ vi.mock('./ui/App.tsx', () => ({
 describe('popup', () => {
   beforeEach(() => {
     document.body.innerHTML = '';
+    vi.clearAllMocks();
   });
 
-  it('should create root element and mount App', async () => {
+  it('creates root element and mounts App', async () => {
     const root = document.createElement('div');
     root.id = 'root';
     document.body.appendChild(root);
     await import('./popup.tsx');
-    expect(render).toHaveBeenCalledWith(expect.any(Object), root);
-    const renderArgs = vi.mocked(render).mock.calls[0];
+    expect(createRoot).toHaveBeenCalledWith(root);
+    expect(mockRender).toHaveBeenCalledWith(expect.any(Object));
+    const renderArgs = mockRender.mock.calls[0];
     expect(renderArgs).toBeDefined();
     expect(renderArgs?.[0]).toBeDefined();
     expect((renderArgs?.[0] as unknown as React.ReactElement)?.type).toBe(App);

packages/omnium-gatherum/src/popup.tsx

@@ -1,7 +1,9 @@
 import '@metamask/kernel-ui/styles.css';
 import { createElement } from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { App } from './ui/App.tsx';
 
-render(createElement(App), document.getElementById('root'));
+createRoot(document.getElementById('root') as HTMLElement).render(
+  createElement(App),
+);

vitest.config.ts

@@ -81,10 +81,10 @@ export default defineConfig({
           lines: 1.44,
         },
         'packages/kernel-agents/**': {
-          statements: 92.34,
-          functions: 90.84,
-          branches: 85.08,
-          lines: 92.48,
+          statements: 88.16,
+          functions: 80,
+          branches: 75.38,
+          lines: 88.13,
         },
         'packages/kernel-browser-runtime/**': {
           statements: 85.88,