Skip to content

feat(kernel-ui): Use MetaMask extension's design system - #577

Merged
sirtimid merged 13 commits into
mainfrom
sirtimid/metamask-design-system
Aug 11, 2025
Merged

feat(kernel-ui): Use MetaMask extension's design system#577
sirtimid merged 13 commits into
mainfrom
sirtimid/metamask-design-system

Conversation

@sirtimid

@sirtimid sirtimid commented Jul 9, 2025

Copy link
Copy Markdown
Contributor

Closes #548

Use MetaMask extension's design system instead of custom components which also introduces the beloved tailwind :)
Additionally, the watch command of the extension package now watches for changes of kernel-ui package.

Screenshot 2025-07-24 at 22 21 36 Screenshot 2025-07-24 at 22 21 46 Screenshot 2025-07-24 at 22 22 09 Screenshot 2025-07-24 at 22 22 17 Screenshot 2025-07-24 at 22 22 29 Screenshot 2025-07-24 at 22 18 43 Screenshot 2025-07-24 at 22 18 49 Screenshot 2025-07-24 at 22 18 56

@socket-security

socket-security Bot commented Jul 9, 2025

Copy link
Copy Markdown

@socket-security

socket-security Bot commented Jul 9, 2025

Copy link
Copy Markdown

All alerts resolved. Learn more about Socket for GitHub.

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

Ignoring alerts on:

  • pify@2.3.0
  • commander@4.1.1
  • object-hash@3.0.0
  • detect-libc@1.0.3
  • @alloc/quick-lru@5.2.0
  • camelcase-css@2.0.1
  • cssesc@3.0.0
  • didyoumean@1.2.2
  • dlv@1.1.3
  • normalize-range@0.1.2
  • postcss-import@15.1.0
  • postcss-js@4.0.1
  • postcss-value-parser@4.2.0
  • read-cache@1.0.0
  • arg@5.0.2
  • ts-interface-checker@0.1.13
  • react@16.14.0
  • scheduler@0.19.1
  • react-dom@16.14.0
  • bech32@2.0.0
  • fastestsmallesttextencoderdecoder@1.0.22
  • fraction.js@4.3.7
  • color@0.11.4
  • color-string@0.3.0
  • mersenne-twister@1.1.0
  • @metamask/jazzicon@2.0.0
  • postcss-load-config@4.0.2
  • @types/trusted-types@2.0.7
  • sha256-uint8array@0.10.7
  • sucrase@3.35.0
  • node-addon-api@7.1.1
  • postcss-nested@6.2.0
  • postcss-selector-parser@6.1.2
  • tailwindcss@3.4.17
  • jiti@1.21.7
  • tailwind-merge@2.6.0
  • @parcel/watcher-linux-arm-musl@2.5.1
  • @parcel/watcher@2.5.1
  • @parcel/watcher-darwin-x64@2.5.1
  • @parcel/watcher-darwin-arm64@2.5.1
  • @parcel/watcher-win32-x64@2.5.1
  • @parcel/watcher-win32-arm64@2.5.1
  • @parcel/watcher-win32-ia32@2.5.1
  • @parcel/watcher-linux-x64-glibc@2.5.1
  • @parcel/watcher-linux-x64-musl@2.5.1
  • @parcel/watcher-linux-arm64-glibc@2.5.1
  • @parcel/watcher-linux-arm64-musl@2.5.1
  • @parcel/watcher-linux-arm-glibc@2.5.1
  • @parcel/watcher-android-arm64@2.5.1
  • @parcel/watcher-freebsd-x64@2.5.1
  • bitcoin-address-validation@3.0.0
  • autoprefixer@10.4.21
  • blo@2.0.0
  • @radix-ui/react-compose-refs@1.1.2
  • commander@14.0.0
  • dompurify@3.2.6
  • @radix-ui/react-slot@1.2.3
  • immutable@5.1.3
  • @metamask/design-system-tailwind-preset@0.5.0
  • @metamask/design-system-react@0.1.0
  • base58-js@3.0.3
  • @solana/codecs-numbers@2.3.0
  • @solana/codecs-core@2.3.0
  • @solana/errors@2.3.0
  • @solana/addresses@2.3.0
  • @solana/assertions@2.3.0
  • @solana/nominal-types@2.3.0
  • @solana/codecs-strings@2.3.0
  • picomatch@4.0.3
  • @metamask/design-tokens@8.1.1
  • chalk@5.5.0
  • sass@1.90.0
  • yaml@2.8.0
  • postcss@8.5.6
  • browserslist@4.25.1
  • caniuse-lite@1.0.30001727
  • electron-to-chromium@1.5.180

View full report

@sirtimid
sirtimid marked this pull request as ready for review July 23, 2025 13:28
@sirtimid
sirtimid requested a review from a team as a code owner July 23, 2025 13:28
@sirtimid

Copy link
Copy Markdown
Contributor Author

@SocketSecurity ignore-all

@sirtimid
sirtimid enabled auto-merge (squash) July 23, 2025 13:45
@sirtimid
sirtimid disabled auto-merge July 23, 2025 22:35
cursor[bot]

This comment was marked as outdated.

import * as React from "react";
import { composeRefs } from "@radix-ui/react-compose-refs";
-import { Fragment as Fragment2, jsx } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx } from "react/jsx-runtime.js";

@sirtimid sirtimid Jul 24, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is required because react 16 and 17 don't specify jsx-runtime in exports field react/react#20235 We could also patch reacts package.json but this seemed sufficient. It can be removed once we upgrade to react 18 and on.

@sirtimid
sirtimid enabled auto-merge (squash) July 25, 2025 14:43

@grypez grypez left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hooray!

  • extension auto-rebuild
  • kernel-ui tests now consistently locate components by test-id

Notes:

  • Some of the files grow unwieldy, especially with the styles written directly into them. I give some reuse suggestions that can easily fit in this PR, but none of them is necessary for approval.
  • I don't think we need the markdown file

Comment thread packages/extension/vite.config.ts
Comment thread packages/kernel-ui/src/components/SendMessageForm.tsx Outdated
Comment thread packages/kernel-ui/src/components/VatTable.tsx Outdated
Comment thread packages/kernel-ui/src/App.tsx Outdated
Comment thread packages/kernel-ui/src/components/ObjectRegistry.tsx Outdated
Comment thread packages/kernel-ui/src/components/ObjectRegistry.tsx Outdated
Comment thread packages/test-utils/src/env/mock-kernel.ts Outdated
Comment thread packages/kernel-ui/COMPONENT_EXAMPLES.md Outdated
@sirtimid
sirtimid disabled auto-merge August 11, 2025 19:50
@sirtimid
sirtimid requested a review from grypez August 11, 2025 19:51

@grypez grypez left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@sirtimid
sirtimid merged commit 1f587b3 into main Aug 11, 2025
23 checks passed
@sirtimid
sirtimid deleted the sirtimid/metamask-design-system branch August 11, 2025 20:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Use MetaMask extension's design system for Control Panel UI

2 participants