chore: moving dependencies to peer and dev dependencies by georgewrmarshall · Pull Request #729 · MetaMask/metamask-design-system

georgewrmarshall · 2025-06-09T03:06:02Z

Description

This PR aligns dependency versions across the design system with MetaMask extension and mobile codebases to ensure compatibility

Key changes:

Downgraded bitcoin-address-validation from ^3.0.0 to >=2.0.0 to avoid ESM-only modules that break compatibility with browser extensions and React Native
Standardized dependency versions to use minimum major versions:
- @metamask/utils: ^11.4.0 → ^11.0.0
- @solana/addresses: ^2.1.0 → ^2.0.0
Added custom TypeScript declarations for bitcoin-address-validation v2.0.0 since it lacks built-in types
Reorganized dependencies by moving shared dependencies to devDependencies and peerDependencies where appropriate
Updated yarn constraints to allow flexible version ranges for bitcoin-address-validation across library vs application packages

The >=2.0.0 version range for bitcoin-address-validation allows v2.x.x, v3.x.x, and future versions while maintaining compatibility with CommonJS environments used by MetaMask extension and mobile.

Related issues

Fixes: #690

Manual testing steps

Run yarn constraints --fix - should pass without violations
Run yarn build - all packages should build successfully
Run yarn lint - should pass with only expected warnings
Verify TypeScript compilation works for bitcoin-address-validation imports
Test that Jazzicon and Maskicon components still function correctly with Bitcoin address validation

Text published preview packages in mobile PR

Run mobile locally
See Login page works as expected with all Avatars

Screenshots/Recordings

Before

After

Latest publish preview (8a24c64) working in mobile and extension

after.mov

after.extension.mov

Pre-merge author checklist

I've followed MetaMask Contributor Docs
I've completed the PR template to the best of my ability
I've included tests if applicable
I've documented my code using JSDoc format if applicable
I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

github-actions · 2025-06-09T03:07:36Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2025-06-09T03:07:59Z

    "autoprefixer": "^10.4.20",
    "axe-playwright": "^2.1.0",
+    "bitcoin-address-validation": "^3.0.0",
    "playwright": "^1.52.0",


These dependencies have been moved to peerDependencies in design-system-react, so they now need to be explicitly added as devDependencies in storybook-react

georgewrmarshall · 2025-06-09T03:11:14Z

-    "react-native-gesture-handler": "^1.10.3",
-    "react-native-jazzicon": "^0.1.2",
-    "react-native-reanimated": "3.3.0"
+    "react-native-jazzicon": "^0.1.2"


We are keeping react-native-jazzicon as a regular dependency because it should only be used internally by AccountAvatar within design-system-react-native, not directly by consuming applications.

georgewrmarshall · 2025-06-09T03:12:41Z

-    "@metamask/utils": "^11.4.0",
    "@radix-ui/react-slot": "^1.1.0",
-    "@solana/addresses": "^2.1.0",
-    "bitcoin-address-validation": "^3.0.0",


These dependencies have been moved to peerDependencies because they are used by the extension and portfolio outside of the design system’s UI components, so moving them to peerDependencies allows the consuming app to specify the version, reducing the overall bundle size and avoiding duplicate dependencies. We are keeping @metamask/jazzicon as a regular dependency because it should only be used internally by AccountAvatar within design-system-react, not directly by consuming applications.

georgewrmarshall · 2025-06-09T03:14:00Z

    "deepmerge": "^4.2.2",
    "jest": "^29.7.0",
    "metro-react-native-babel-preset": "^0.77.0",
+    "react": "^18.2.0",


Fixing build issue by moving react to devDependencies, not actually sure how it passed CI without it being here 🤔

georgewrmarshall · 2025-06-09T03:14:31Z

@metamaskbot publish-preview

github-actions · 2025-06-09T03:16:14Z

Preview builds have been published. See these instructions for more information about preview builds.

Expand for full list of packages and versions.

{
  "@metamask-previews/design-system-react": "0.0.0-preview.0a959b0",
  "@metamask-previews/design-system-react-native": "0.0.0-preview.0a959b0",
  "@metamask-previews/design-system-tailwind-preset": "0.4.0-preview.0a959b0",
  "@metamask-previews/design-system-twrnc-preset": "0.0.0-preview.0a959b0",
  "@metamask-previews/design-tokens": "7.1.0-preview.0a959b0"
}

github-actions · 2025-06-09T22:09:13Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2025-06-09T22:29:35Z

@metamaskbot publish-preview

github-actions · 2025-06-09T22:31:18Z

Preview builds have been published. See these instructions for more information about preview builds.

Expand for full list of packages and versions.

{
  "@metamask-previews/design-system-react": "0.0.0-preview.0317b81",
  "@metamask-previews/design-system-react-native": "0.0.0-preview.0317b81",
  "@metamask-previews/design-system-tailwind-preset": "0.4.0-preview.0317b81",
  "@metamask-previews/design-system-twrnc-preset": "0.0.0-preview.0317b81",
  "@metamask-previews/design-tokens": "7.1.0-preview.0317b81"
}

…pgrades

github-actions · 2025-06-09T22:59:09Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2025-06-09T23:10:55Z

+    "@metamask/design-tokens": "^7.0.0",
+    "@metamask/utils": "^11.0.0",
+    "@solana/addresses": "^2.0.0",
+    "bitcoin-address-validation": "2.0.0",


Previously tried 2|3 as the only update is to convert to esm modules but are restricted because of yarn constraints. We can just fast follow an upgrade when extension and mobile do https://github.com/ruigomeseu/bitcoin-address-validation/blob/master/CHANGELOG.md

github-actions · 2025-06-09T23:47:02Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2025-06-09T23:53:18Z

@metamaskbot publish-preview

georgewrmarshall · 2025-06-09T23:54:45Z

+    "@metamask/utils": "^11.0.0",
+    "@solana/addresses": "^2.0.0",
+    "bitcoin-address-validation": "2.0.0",


These dependencies have been moved to peerDependencies in design-system-react-native, so they now need to be explicitly added as dependencies in storybook-react-native

github-actions · 2025-06-09T23:55:04Z

Preview builds have been published. See these instructions for more information about preview builds.

Expand for full list of packages and versions.

{
  "@metamask-previews/design-system-react": "0.0.0-preview.ff8ed96",
  "@metamask-previews/design-system-react-native": "0.0.0-preview.ff8ed96",
  "@metamask-previews/design-system-tailwind-preset": "0.4.0-preview.ff8ed96",
  "@metamask-previews/design-system-twrnc-preset": "0.0.0-preview.ff8ed96",
  "@metamask-previews/design-tokens": "7.1.0-preview.ff8ed96"
}

georgewrmarshall · 2025-06-09T23:55:26Z

    "@metamask/eslint-config-nodejs": "^14.0.0",
    "@metamask/eslint-config-typescript": "^14.0.0",
-    "@metamask/utils": "^11.4.0",
+    "@metamask/utils": "^11.0.0",


yarn constraints update

georgewrmarshall · 2025-06-10T01:14:01Z

-    "bitcoin-address-validation": "^3.0.0",
-    "react-native-gesture-handler": "^1.10.3",
-    "react-native-jazzicon": "^0.1.2",
-    "react-native-reanimated": "3.3.0"


These dependencies have been moved to either peerDependencies or devDependencies based on their usage. Packages like testing-library are only needed for development and testing, so they are now devDependencies. The other packages are used by mobile outside of the design system’s UI components, so moving them to peerDependencies allows the consuming app to specify the version, reducing the overall bundle size and avoiding duplicate dependencies.

georgewrmarshall · 2025-06-10T01:15:08Z

    "@metamask/auto-changelog": "^5.0.2",
+    "@metamask/design-system-twrnc-preset": "workspace:^",
+    "@metamask/design-tokens": "workspace:^",
+    "@metamask/utils": "^11.0.0",


We are pinning @metamask/utils to major version ^11.0.0 to maintain compatibility with MetaMask Mobile, which uses ^11.2.0 (see metamask-mobile/package.json#L246). Any 11.x version will work across both projects.

georgewrmarshall · 2025-06-10T01:17:32Z

+    "@metamask/design-system-twrnc-preset": "workspace:^",
+    "@metamask/design-tokens": "workspace:^",
+    "@metamask/utils": "^11.0.0",
+    "@solana/addresses": "^2.0.0",


We are pinning @solana/addresses to major version ^2.0.0 to maintain compatibility with MetaMask Mobile, which uses 2.0.0 (see metamask-mobile/package.json#L280).

georgewrmarshall · 2025-06-10T01:23:29Z

    "@types/react": "^18.2.0",
    "@types/react-test-renderer": "^18",
    "babel-jest": "^29.7.0",
+    "bitcoin-address-validation": "2.0.0",


We are pinning bitcoin-address-validation to major version ^2.0.0 to maintain compatibility with MetaMask Mobile, which uses 2.0.0 (see metamask-mobile/package.json#L295).

github-actions · 2025-06-10T01:34:17Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2025-06-10T01:34:18Z

@metamaskbot publish-preview

georgewrmarshall · 2025-06-10T01:35:10Z

+    "@metamask/utils": "^11.0.0",
+    "@solana/addresses": "^2.0.0",
+    "bitcoin-address-validation": ">=2.0.0",


These dependencies have been moved to peerDependencies in design-system-react-native, so they now need to be explicitly added as devDependencies in storybook-react-native

github-actions · 2025-06-10T01:36:09Z

Preview builds have been published. See these instructions for more information about preview builds.

Expand for full list of packages and versions.

{
  "@metamask-previews/design-system-react": "0.0.0-preview.d4c6643",
  "@metamask-previews/design-system-react-native": "0.0.0-preview.d4c6643",
  "@metamask-previews/design-system-tailwind-preset": "0.4.0-preview.d4c6643",
  "@metamask-previews/design-system-twrnc-preset": "0.0.0-preview.d4c6643",
  "@metamask-previews/design-tokens": "7.1.0-preview.d4c6643"
}

georgewrmarshall · 2025-06-10T01:38:11Z

    "@types/react": "^18.2.0",
    "@types/react-test-renderer": "^18",
    "babel-jest": "^29.7.0",
+    "bitcoin-address-validation": ">=2.0.0",


We specify bitcoin-address-validation with the version constraint >=2.0.0 to ensure compatibility with MetaMask Mobile, which currently uses version 2.0.0 (reference). This range also permits upgrades to future major versions, including 3.x.x, since both v2 and v3 are compatible with design system libraries. Notably, v3.0.0 introduces ESM (ECMAScript Modules) support, which this project fully supports, as reflected in the CHANGELOG.

georgewrmarshall · 2025-06-10T01:38:59Z

    "metro-react-native-babel-preset": "^0.77.0",
    "react": "^18.2.0",
    "react-native": "^0.72.15",
+    "react-native-gesture-handler": "^1.10.3",


Aligns with mobile https://github.com/MetaMask/metamask-mobile/blob/main/package.json#L295

georgewrmarshall · 2025-06-10T01:43:56Z

    "expo-system-ui": "~2.4.0",
    "react-native-gesture-handler": "^1.10.3",
-    "react-native-reanimated": "3.3.0",
+    "react-native-reanimated": "^3.17.2",


Aligning react-native-reanimated version with mobile https://github.com/MetaMask/metamask-mobile/blob/main/package.json#L389

georgewrmarshall · 2025-06-10T01:44:27Z

    "react": "^18.2.0",
    "react-native": "^0.72.15",
+    "react-native-gesture-handler": "^1.10.3",
+    "react-native-reanimated": "^3.17.2",


Aligning react-native-reanimated with mobile https://github.com/MetaMask/metamask-mobile/blob/main/package.json#L389

socket-security · 2025-06-10T01:44:40Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	react-native-gesture-handler@1.10.3 ⏵ 2.12.1			⁺³
	react-native-gesture-handler@1.10.3 ⏵ 2.25.0			⁺⁶
	react-native-reanimated@3.18.0

View full report

github-actions · 2025-06-10T01:45:14Z

📖 Storybook Preview

View PR Storybook

georgewrmarshall · 2025-06-10T01:45:18Z

+   * @returns True if the address is valid, false otherwise
+   */
+  export function validate(address: string, network?: Network): boolean;
+}


Needed because we downgraded our version of bitcoin-address-validation to match mobile

georgewrmarshall · 2025-06-10T01:45:41Z

+   * @returns True if the address is valid, false otherwise
+   */
+  export function validate(address: string, network?: Network): boolean;
+}


Needed because we downgraded our version of bitcoin-address-validation to match extension can be removed when we upgrade to v3

georgewrmarshall · 2025-06-10T01:46:56Z

@metamaskbot publish-preview

github-actions · 2025-06-10T01:48:39Z

Preview builds have been published. See these instructions for more information about preview builds.

Expand for full list of packages and versions.

{
  "@metamask-previews/design-system-react": "0.0.0-preview.8a24c64",
  "@metamask-previews/design-system-react-native": "0.0.0-preview.8a24c64",
  "@metamask-previews/design-system-tailwind-preset": "0.4.0-preview.8a24c64",
  "@metamask-previews/design-system-twrnc-preset": "0.0.0-preview.8a24c64",
  "@metamask-previews/design-tokens": "7.1.0-preview.8a24c64"
}

github-actions · 2025-06-10T06:39:00Z

📖 Storybook Preview

View PR Storybook

cursor

✅ BugBot reviewed your changes and found no bugs!

Was this report helpful? Give feedback by reacting with 👍 or 👎

georgewrmarshall · 2025-06-10T06:57:18Z

+    "@metamask/design-system-twrnc-preset": "^0.0.0",
+    "@metamask/design-tokens": "^7.0.0",
+    "@metamask/utils": "^11.0.0",
+    "@solana/addresses": "^2.0.0",
+    "bitcoin-address-validation": ">=2.0.0",
    "react": ">=18.2.0",
-    "react-native": ">=0.72.0"
+    "react-native": ">=0.72.0",
+    "react-native-gesture-handler": ">=1.10.3",
+    "react-native-reanimated": ">=3.3.0"


Broadened peer dependency version ranges to support major upgrades for react-native, react-native-gesture-handler, and react-native-reanimated, enabling forward compatibility. Other key dependencies have been explicitly versioned to ensure stability and prevent breaking changes.

georgewrmarshall · 2025-06-10T06:57:47Z

@metamaskbot publish-preview

github-actions · 2025-06-10T06:59:37Z

Preview builds have been published. See these instructions for more information about preview builds.

Expand for full list of packages and versions.

{
  "@metamask-previews/design-system-react": "0.0.0-preview.5f5c97a",
  "@metamask-previews/design-system-react-native": "0.0.0-preview.5f5c97a",
  "@metamask-previews/design-system-tailwind-preset": "0.4.0-preview.5f5c97a",
  "@metamask-previews/design-system-twrnc-preset": "0.0.0-preview.5f5c97a",
  "@metamask-previews/design-tokens": "7.1.0-preview.5f5c97a"
}

georgewrmarshall commented Jun 9, 2025

View reviewed changes

georgewrmarshall force-pushed the fix/dependencies branch from 0a959b0 to 0317b81 Compare June 9, 2025 22:07

georgewrmarshall changed the title ~~chore: fixing dependencies~~ chore: moving dependencies to peer and dev dependencies Jun 9, 2025

georgewrmarshall added 3 commits June 10, 2025 08:27

chore: fixing dependencies

413f91e

chore: update

968c0d9

chore: aligning dependencies with extension and mobile and allowing u…

9f52125

…pgrades

georgewrmarshall force-pushed the fix/dependencies branch from 0317b81 to 9f52125 Compare June 9, 2025 22:57

chore: locking bitcoin address version to 2.0

cc258bd

georgewrmarshall commented Jun 9, 2025

View reviewed changes

georgewrmarshall added 2 commits June 10, 2025 09:04

chore: adding types file for bitcoin address validation downgrade

247d1c9

chore: linting fixes

ff8ed96

georgewrmarshall force-pushed the fix/dependencies branch from b762d7a to ff8ed96 Compare June 9, 2025 23:45

georgewrmarshall commented Jun 9, 2025

View reviewed changes

georgewrmarshall commented Jun 10, 2025

View reviewed changes

chore: allowing major version increases of bitcoin-address-validation

d4c6643

georgewrmarshall commented Jun 10, 2025

View reviewed changes

chore: aligining react reanimated

8a24c64

georgewrmarshall commented Jun 10, 2025

View reviewed changes

georgewrmarshall marked this pull request as ready for review June 10, 2025 03:18

georgewrmarshall requested a review from a team as a code owner June 10, 2025 03:18

This comment was marked as outdated.

Sign in to view

chore: fixing versions for storybook

5f5c97a

cursor Bot reviewed Jun 10, 2025

View reviewed changes

georgewrmarshall commented Jun 10, 2025

View reviewed changes

brianacnguyen approved these changes Jun 10, 2025

View reviewed changes

brianacnguyen merged commit 5971669 into main Jun 10, 2025
37 checks passed

brianacnguyen deleted the fix/dependencies branch June 10, 2025 16:22

georgewrmarshall mentioned this pull request Jun 11, 2025

Align react native, expo, metro versions with mobile #690

Closed

Uh oh!

Conversation

georgewrmarshall commented Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Jun 9, 2025

📖 Storybook Preview

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall commented Jun 9, 2025

Uh oh!

github-actions Bot commented Jun 9, 2025

Uh oh!

github-actions Bot commented Jun 9, 2025

📖 Storybook Preview

Uh oh!

georgewrmarshall commented Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 9, 2025

Uh oh!

github-actions Bot commented Jun 9, 2025

📖 Storybook Preview

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 9, 2025

📖 Storybook Preview

Uh oh!

georgewrmarshall commented Jun 9, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 9, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 10, 2025

📖 Storybook Preview

Uh oh!

georgewrmarshall commented Jun 10, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 10, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

georgewrmarshall commented Jun 9, 2025 •

edited

Loading

georgewrmarshall Jun 9, 2025 •

edited

Loading

georgewrmarshall commented Jun 9, 2025 •

edited

Loading

georgewrmarshall Jun 10, 2025 •

edited

Loading

georgewrmarshall Jun 10, 2025 •

edited

Loading

socket-security Bot commented Jun 10, 2025 •

edited

Loading