wip

packages/deve2e/package.json

@@ -25,7 +25,6 @@
     "watch": "yarn start --watch"
   },
   "dependencies": {
-    "@metamask/providers": "16.1.0",
     "@metamask/sdk": "workspace:^",
     "@metamask/sdk-communication-layer": "workspace:^",
     "bowser": "^2.11.0",

packages/devnext/package.json

@@ -20,7 +20,6 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@metamask/design-tokens": "^1.12.0",
-    "@metamask/providers": "16.1.0",
     "@metamask/sdk": "workspace:^",
     "@metamask/sdk-communication-layer": "workspace:^",
     "@metamask/sdk-lab": "workspace:^",
@@ -96,6 +95,9 @@
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "tailwindcss": "^3.3.5",
-    "url": "^0.11.4"
+    "url": "^0.11.4",
+    "@babel/plugin-proposal-json-modules": "^7.22.5",
+    "@babel/plugin-syntax-import-attributes": "^7.22.5",
+    "to-fast-properties": "^4.0.0"
   }
 }

packages/examples/react-demo/package.json

@@ -12,8 +12,10 @@
   },
   "dependencies": {
     "@metamask/sdk-react": "0.30.0",
+    "buffer": "^6.0.3",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "stream-browserify": "^3.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

packages/examples/react-demo/sdk-copy.sh

@@ -15,28 +15,68 @@ echo "SDK_DIR: $SDK_DIR"
 echo "COMM_LAYER_DIR: $COMM_LAYER_DIR"
 echo "DAPP_DIR: $DAPP_DIR"
 echo "SDK_REACT_DIR: $SDK_REACT_DIR"
-echo "SDK_REACT_UI_DIR: $SDK_REACT_UI_DIR"
 echo "SDK_INSTALL_MODAL_WEB_DIR: $SDK_INSTALL_MODAL_WEB_DIR"
 
+# Ask user if they want to rebuild
+read -p "Do you want to rebuild the packages first? (y/N) " -n 1 -r
+echo
+if [[ $REPLY =~ ^[Yy]$ ]]
+then
+    echo "########### START BUILDING SDK PACKAGES #########"
+    # Build SDK Communication Layer
+    cd $COMM_LAYER_DIR
+    yarn build
+
+    # Build SDK
+    cd $SDK_DIR
+    yarn build
+
+    # Build SDK React
+    cd $SDK_REACT_DIR
+    yarn build
+
+    # Build SDK Install Modal Web
+    cd $SDK_INSTALL_MODAL_WEB_DIR
+    yarn build
+fi
+
 echo "########### START REPLACING SDK_COMMUNICATION_LAYER #########"
 
 cd $DAPP_DIR
 echo "Hack Metamask sdk && sdk-communication-layer packages..."
-## hack to debug to latest unpublished version of the sdk
-rm -rf node_modules/@metamask/sdk-communication-layer/dist node_modules/@metamask/sdk/dist node_modules/@metamask/sdk-react/dist node_modules/@metamask/sdk-install-modal-web/dist
-cp -rf $COMM_LAYER_DIR/dist node_modules/@metamask/sdk-communication-layer/dist
-cp -rf $COMM_LAYER_DIR/package.json node_modules/@metamask/sdk-communication-layer/package.json
 
-cp -rf $SDK_DIR/dist node_modules/@metamask/sdk/dist
-cp -rf $SDK_DIR/package.json node_modules/@metamask/sdk/package.json
+# Clean up old directories first
+rm -rf node_modules/@metamask/sdk-communication-layer/dist
+rm -rf node_modules/@metamask/sdk/dist
+rm -rf node_modules/@metamask/sdk-react/dist
+rm -rf node_modules/@metamask/sdk-install-modal-web/dist
+
+# Ensure directories exist
+mkdir -p node_modules/@metamask/sdk-communication-layer/dist
+mkdir -p node_modules/@metamask/sdk/dist
+mkdir -p node_modules/@metamask/sdk-react/dist
+mkdir -p node_modules/@metamask/sdk-install-modal-web/dist
+
+# Copy files
+cp -rf $COMM_LAYER_DIR/dist/* node_modules/@metamask/sdk-communication-layer/dist/
+cp -rf $SDK_DIR/dist/* node_modules/@metamask/sdk/dist/
+cp -rf $SDK_DIR/package.json node_modules/@metamask/sdk/
+# Fix the workspace reference in package.json (syntax varies by OS)
+if [[ "$OSTYPE" == "darwin"* ]]; then
+    # macOS
+    sed -i '' 's/"workspace:\*"/"*"/g' node_modules/@metamask/sdk/package.json
+else
+    # Linux
+    sed -i 's/"workspace:\*"/"*"/g' node_modules/@metamask/sdk/package.json
+fi
 
-cp -rf $SDK_REACT_DIR/dist node_modules/@metamask/sdk-react/dist
-cp -rf $SDK_REACT_DIR/package.json node_modules/@metamask/sdk-react/package.json
+# # Install dependencies after fixing workspace references
+# cd node_modules/@metamask/sdk && yarn install && cd ../../..
 
-cp -rf $SDK_INSTALL_MODAL_WEB_DIR/dist node_modules/@metamask/sdk-install-modal-web
-cp -rf $SDK_INSTALL_MODAL_WEB_DIR/package.json node_modules/@metamask/sdk-install-modal-web/package.json
+cp -rf $SDK_REACT_DIR/dist/* node_modules/@metamask/sdk-react/dist/
+cp -rf $SDK_INSTALL_MODAL_WEB_DIR/dist/* node_modules/@metamask/sdk-install-modal-web/dist/
 
 # Remove vite cache
 rm -rf node_modules/.vite
 
-echo "All done."
+echo "All done. You can now run yarn dev"

packages/examples/react-demo/vite.config.ts

@@ -8,5 +8,15 @@ export default defineConfig({
   build: {
     outDir: './build',
     emptyOutDir: true, // also necessary
+  },
+  resolve: {
+    alias: {
+      // Polyfill Node.js stream modules
+      stream: 'stream-browserify',
+      buffer: 'buffer',
+    }
+  },
+  optimizeDeps: {
+    include: ['buffer', 'stream-browserify']
   }
 })

packages/examples/react-demo/yarn.lock

@@ -617,6 +617,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@metamask/json-rpc-engine@npm:^10.0.2":
+  version: 10.0.2
+  resolution: "@metamask/json-rpc-engine@npm:10.0.2"
+  dependencies:
+    "@metamask/rpc-errors": ^7.0.2
+    "@metamask/safe-event-emitter": ^3.0.0
+    "@metamask/utils": ^11.0.1
+  checksum: db561d6ffe4de041dc2fe79c6d1eb098bd9eb444864568c4781f3227e6c7e33563ac2858caadb14f6b58facbf189fe0f50725adbc29f3b2641b787e550e548e6
+  languageName: node
+  linkType: hard
+
 "@metamask/json-rpc-engine@npm:^8.0.1, @metamask/json-rpc-engine@npm:^8.0.2":
   version: 8.0.2
   resolution: "@metamask/json-rpc-engine@npm:8.0.2"
@@ -640,6 +651,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@metamask/json-rpc-middleware-stream@npm:^8.0.6":
+  version: 8.0.6
+  resolution: "@metamask/json-rpc-middleware-stream@npm:8.0.6"
+  dependencies:
+    "@metamask/json-rpc-engine": ^10.0.2
+    "@metamask/safe-event-emitter": ^3.0.0
+    "@metamask/utils": ^11.0.1
+    readable-stream: ^3.6.2
+  checksum: e004de7a8090afc0441b9bf661106ac07a550862f6e824bfebcb14b46eea7551beeaeab4c39ac810beee0f53ad1032344a99eef1c0f5f118fe8d388e7e0c5014
+  languageName: node
+  linkType: hard
+
 "@metamask/object-multiplex@npm:^2.0.0":
   version: 2.1.0
   resolution: "@metamask/object-multiplex@npm:2.1.0"
@@ -679,6 +702,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@metamask/providers@npm:^18.3.1":
+  version: 18.3.1
+  resolution: "@metamask/providers@npm:18.3.1"
+  dependencies:
+    "@metamask/json-rpc-engine": ^10.0.2
+    "@metamask/json-rpc-middleware-stream": ^8.0.6
+    "@metamask/object-multiplex": ^2.0.0
+    "@metamask/rpc-errors": ^7.0.2
+    "@metamask/safe-event-emitter": ^3.1.1
+    "@metamask/utils": ^11.0.1
+    detect-browser: ^5.2.0
+    extension-port-stream: ^4.1.0
+    fast-deep-equal: ^3.1.3
+    is-stream: ^2.0.0
+    readable-stream: ^3.6.2
+  peerDependencies:
+    webextension-polyfill: ^0.10.0 || ^0.11.0 || ^0.12.0
+  checksum: 626112e3bdaa3b63c041ac0d280777419109a1ed2a6cdd50c1b3c7700c53d2e342f93748244a58a74d2e94357fe9eed1137317acff4df9ee0586798e02cfe00d
+  languageName: node
+  linkType: hard
+
 "@metamask/rpc-errors@npm:^6.2.1":
   version: 6.4.0
   resolution: "@metamask/rpc-errors@npm:6.4.0"
@@ -689,6 +733,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@metamask/rpc-errors@npm:^7.0.2":
+  version: 7.0.2
+  resolution: "@metamask/rpc-errors@npm:7.0.2"
+  dependencies:
+    "@metamask/utils": ^11.0.1
+    fast-safe-stringify: ^2.0.6
+  checksum: 262a1ab57121e277eb979325d8e4335b9f4194c5acd0138ee0032db35b4e20ea0423badb5dad4bdf6abb85d22b476377f17911a54f82b3b1a2bdffc36654d028
+  languageName: node
+  linkType: hard
+
 "@metamask/safe-event-emitter@npm:^3.0.0, @metamask/safe-event-emitter@npm:^3.1.1":
   version: 3.1.2
   resolution: "@metamask/safe-event-emitter@npm:3.1.2"
@@ -806,6 +860,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@metamask/utils@npm:^11.0.1":
+  version: 11.0.1
+  resolution: "@metamask/utils@npm:11.0.1"
+  dependencies:
+    "@ethereumjs/tx": ^4.2.0
+    "@metamask/superstruct": ^3.1.0
+    "@noble/hashes": ^1.3.1
+    "@scure/base": ^1.1.3
+    "@types/debug": ^4.1.7
+    debug: ^4.3.4
+    pony-cause: ^2.1.10
+    semver: ^7.5.4
+    uuid: ^9.0.1
+  checksum: a5072f87157f6763328767bf1ddc01deb94e13f32af58d0993e0450e7e211fb29882280a1013cbdc7752b152a662be3d9beef8129a9097dba7d465389c398b3c
+  languageName: node
+  linkType: hard
+
 "@metamask/utils@npm:^8.3.0":
   version: 8.5.0
   resolution: "@metamask/utils@npm:8.5.0"
@@ -2464,6 +2535,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"extension-port-stream@npm:^4.1.0":
+  version: 4.2.0
+  resolution: "extension-port-stream@npm:4.2.0"
+  dependencies:
+    readable-stream: ^3.6.2 || ^4.4.2
+  peerDependencies:
+    webextension-polyfill: ^0.10.0 || ^0.11.0 || ^0.12.0
+  checksum: 85559c82e3f3aa21462e234b30b7d53872708893664cd03f2f848af556cf0730cf2243b089efc9d40bbe9a4f73bd8fd19684db5a985329b0c4402b4f2fe26358
+  languageName: node
+  linkType: hard
+
 "fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3":
   version: 3.1.3
   resolution: "fast-deep-equal@npm:3.1.3"
@@ -2939,7 +3021,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inherits@npm:^2.0.1, inherits@npm:^2.0.3, inherits@npm:^2.0.4, inherits@npm:~2.0.1, inherits@npm:~2.0.3":
+"inherits@npm:^2.0.1, inherits@npm:^2.0.3, inherits@npm:^2.0.4, inherits@npm:~2.0.1, inherits@npm:~2.0.3, inherits@npm:~2.0.4":
   version: 2.0.4
   resolution: "inherits@npm:2.0.4"
   checksum: 4a48a733847879d6cf6691860a6b1e3f0f4754176e4d71494c41f3475553768b10f84b5ce1d40fbd0e34e6bfbb864ee35858ad4dd2cf31e02fc4a154b724d7f1
@@ -4006,16 +4088,19 @@ __metadata:
   resolution: "react-vite@workspace:."
   dependencies:
     "@eslint/js": ^9.13.0
+    "@metamask/providers": ^18.3.1
     "@metamask/sdk-react": 0.30.0
     "@types/react": ^18.3.11
     "@types/react-dom": ^18.3.1
     "@vitejs/plugin-react": ^4.3.3
+    buffer: ^6.0.3
     eslint: ^9.13.0
     eslint-plugin-react-hooks: ^5.0.0
     eslint-plugin-react-refresh: ^0.4.13
     globals: ^15.11.0
     react: ^18.3.1
     react-dom: ^18.3.1
+    stream-browserify: ^3.0.0
     typescript: ~5.6.2
     typescript-eslint: ^8.10.0
     vite: ^5.4.9
@@ -4058,7 +4143,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readable-stream@npm:^3.6.0, readable-stream@npm:^3.6.2":
+"readable-stream@npm:^3.5.0, readable-stream@npm:^3.6.0, readable-stream@npm:^3.6.2":
   version: 3.6.2
   resolution: "readable-stream@npm:3.6.2"
   dependencies:
@@ -4418,6 +4503,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stream-browserify@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "stream-browserify@npm:3.0.0"
+  dependencies:
+    inherits: ~2.0.4
+    readable-stream: ^3.5.0
+  checksum: 4c47ef64d6f03815a9ca3874e2319805e8e8a85f3550776c47ce523b6f4c6cd57f40e46ec6a9ab8ad260fde61863c2718f250d3bedb3fe9052444eb9abfd9921
+  languageName: node
+  linkType: hard
+
 "string-range@npm:~1.2, string-range@npm:~1.2.1":
   version: 1.2.2
   resolution: "string-range@npm:1.2.2"

packages/sdk-install-modal-web/src/components/mm-install-modal/mm-install-modal.tsx

@@ -96,11 +96,11 @@ export class InstallModal {
 
     return (
       <WidgetWrapper className="install-model">
-        <div class='backdrop' onClick={this.onClose}></div>
+        <div class='backdrop' onClick={() => this.onClose()}></div>
         <div class='modal'>
           <div class='closeButtonContainer'>
             <div class='right'>
-              <span class='closeButton' onClick={this.onClose}>
+              <span class='closeButton' onClick={() => this.onClose()}>
                 <CloseButton />
               </span>
             </div>
@@ -170,7 +170,7 @@ export class InstallModal {
 
               <button
                 class='button'
-                onClick={this.onStartDesktopOnboardingHandler}
+                onClick={() => this.onStartDesktopOnboardingHandler()}
               >
                 <InstallIcon />
                 <span class='installExtensionText'>

packages/sdk-install-modal-web/src/components/mm-select-modal/mm-select-modal.tsx

@@ -157,7 +157,7 @@ export class SelectModal {
                 {t('SELECT_MODAL.CRYPTO_TAKE_CONTROL_TEXT')}
               </div>
 
-              <button class='button' onClick={this.connectWithExtensionHandler}>
+              <button class='button' onClick={() => this.connectWithExtensionHandler()}>
                 <ConnectIcon />
                 <span class='installExtensionText'>
                   {t('CONNECT_WITH_EXTENSION')}

packages/sdk/BUNDLE.md

@@ -0,0 +1,45 @@
+# Bundle Configuration for @metamask/providers
+
+The @metamask/providers package relies on Node.js-specific modules, particularly:
+- `readable-stream`
+- `extension-port-stream`
+- `@metamask/json-rpc-middleware-stream`
+
+These Node.js stream implementations don't work directly in browsers and require proper polyfills/transformations.
+
+## Two Possible Approaches
+
+### 1. Bundle the Dependencies (Current Approach)
+
+#### Pros:
+- Works out of the box for developers
+- No need for complex polyfill setup in consuming apps
+- Guaranteed compatibility
+
+#### Cons:
+- Larger bundle size
+- Same code might be included multiple times if other dependencies use streams
+
+### 2. Keep as External Dependencies
+
+```js
+const baseExternalDeps = [
+  // ... other deps ...
+  '@metamask/providers',
+];
+```
+
+#### Pros:
+- Smaller bundle size
+- Better deduplication of common dependencies
+- More control for developers
+
+#### Cons:
+- Requires proper setup in consuming applications:
+  - Stream polyfills
+  - Buffer polyfills
+  - Proper bundler configuration
+
+###  Current Decision
+
+We chose to bundle the dependencies to prioritize developer experience over bundle size, making it easier for developers to integrate the SDK without dealing with complex polyfill setups.