feat(sdk): upgrade @metamask/providers to ^18.3.1 (#1199)

* feat: turborepo setup

* feat: new nextjs playground

* feat: cleanup

* feat: upgrade metamask/providers

Author: abretonc7s

packages/playground-next/src/app/page.tsx

@@ -2,54 +2,92 @@
 
 import { useSDK } from '@metamask/sdk-react';
 import styles from './page.module.css';
-import { useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 interface AccountInfo {
   account: string;
   balance: string;
 }
 
 export default function Home() {
-  const { sdk } = useSDK();
-  const [account, setAccount] = useState<AccountInfo | null>(null);
+  const { sdk, connected, connecting, provider, account } = useSDK();
+  const [accountInfo, setAccountInfo] = useState<AccountInfo | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const getBalance = useCallback(async (address: string): Promise<string> => {
+    const balance = await provider?.request({
+      method: 'eth_getBalance',
+      params: [address, 'latest']
+    });
+    return balance ? parseInt(balance as string, 16).toString() : '0';
+  }, [provider]);
 
   const connectWallet = async (): Promise<void> => {
     try {
-      const accounts = await sdk?.connect();
-
-      if (accounts?.[0]) {
-        const provider = sdk?.getProvider();
-        const balance = await provider?.request({
-          method: 'eth_getBalance',
-          params: [accounts[0], 'latest']
-        });
-
-        setAccount({
-          account: accounts[0],
-          balance: balance ? (parseInt(balance as string, 16)).toString() : '0'
-        });
-      }
+      setIsLoading(true);
+      await sdk?.connect();
     } catch (err) {
       console.error('Failed to connect wallet:', err);
+    } finally {
+      setIsLoading(false);
     }
   };
 
+  const terminateConnection = async (): Promise<void> => {
+    try {
+      setIsLoading(true);
+      await sdk?.terminate();
+      setAccountInfo(null);
+    } catch (err) {
+      console.error('Failed to terminate connection:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const updateAccountInfo = async () => {
+      if (connected && account) {
+        const balance = await getBalance(account);
+        setAccountInfo({
+          account,
+          balance
+        });
+      } else {
+        setAccountInfo(null);
+      }
+    };
+
+    updateAccountInfo();
+  }, [connected, account, provider, getBalance]);
+
   return (
     <div className={styles.container}>
       <h1>Simple Web3 Dapp</h1>
 
-      {!account ? (
-        <button className={styles.button} onClick={connectWallet}>
-          Connect MetaMask
+      {!connected ? (
+        <button
+          className={styles.button}
+          onClick={connectWallet}
+          disabled={isLoading || connecting}
+        >
+          {isLoading || connecting ? 'Connecting...' : 'Connect MetaMask'}
         </button>
       ) : (
         <>
           <div className={styles.address}>
-            Address: {account.account}
+            Address: {accountInfo?.account}
           </div>
           <div className={styles.address}>
-            Balance: {account.balance} Wei
+            Balance: {accountInfo?.balance} Wei
           </div>
+          <button
+            className={styles.button}
+            onClick={terminateConnection}
+            disabled={isLoading}
+          >
+            {isLoading ? 'Terminating...' : 'Terminate Connection'}
+          </button>
         </>
       )}
     </div>

packages/sdk/package.json

@@ -50,7 +50,7 @@
   "dependencies": {
     "@babel/runtime": "^7.26.0",
     "@metamask/onboarding": "^1.0.1",
-    "@metamask/providers": "16.1.0",
+    "@metamask/providers": "^18.3.1",
     "@metamask/sdk-communication-layer": "workspace:*",
     "@metamask/sdk-install-modal-web": "workspace:*",
     "@paulmillr/qr": "^0.2.1",

packages/sdk/rollup.config.js

@@ -23,6 +23,7 @@ const dependencies = Object.keys(packageJson.dependencies || {});
 // Dependencies that should be bundled
 const bundledDeps = [
   // '@metamask/sdk-communication-layer',
+  'readable-stream',
   // Add other dependencies that should be bundled
 ];
 
@@ -58,6 +59,7 @@ const baseExternalDeps = [
   ...sharedDeps, // Exclude shared deps from bundle
   '@react-native-async-storage/async-storage',
   'extension-port-stream',
+  '@metamask/providers',
 ];
 
 // Platform-specific externals

yarn.lock

@@ -10979,6 +10979,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:^7.0.0":
   version: 7.3.3
   resolution: "@metamask/json-rpc-engine@npm:7.3.3"
@@ -11024,6 +11035,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/network-controller@npm:^16.0.0":
   version: 16.0.0
   resolution: "@metamask/network-controller@npm:16.0.0"
@@ -11126,6 +11149,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.0.0, @metamask/rpc-errors@npm:^6.1.0":
   version: 6.1.0
   resolution: "@metamask/rpc-errors@npm:6.1.0"
@@ -11146,6 +11190,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:2.0.0, @metamask/safe-event-emitter@npm:^2.0.0":
   version: 2.0.0
   resolution: "@metamask/safe-event-emitter@npm:2.0.0"
@@ -11842,7 +11896,7 @@ __metadata:
     "@metamask/eslint-config-nodejs": ^6.0.0
     "@metamask/eslint-config-typescript": ^6.0.0
     "@metamask/onboarding": ^1.0.1
-    "@metamask/providers": 16.1.0
+    "@metamask/providers": ^18.3.1
     "@metamask/sdk-communication-layer": "workspace:*"
     "@metamask/sdk-install-modal-web": "workspace:*"
     "@paulmillr/qr": ^0.2.1
@@ -11911,13 +11965,37 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@metamask/superstruct@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "@metamask/superstruct@npm:3.1.0"
+  checksum: 00e4d0c0aae8b25ccc1885c1db0bb4ed1590010570140c255e4deee3bf8a10c859c8fce5e475b4ae09c8a56316207af87585b91f7f5a5c028d668ccd111f19e3
+  languageName: node
+  linkType: hard
+
 "@metamask/swappable-obj-proxy@npm:^2.1.0":
   version: 2.1.0
   resolution: "@metamask/swappable-obj-proxy@npm:2.1.0"
   checksum: b15cebee7fb189d1143d3a755a38a7d88f56f91e1277425a51f63c50c432dfb4e6e22650ef67474ae4ef2a97344231af00be6780f126c47d401a23c8a8fb3c9c
   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:^3.0.1":
   version: 3.6.0
   resolution: "@metamask/utils@npm:3.6.0"
@@ -31798,6 +31876,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
+
 "extract-zip@npm:2.0.1, extract-zip@npm:^2.0.1":
   version: 2.0.1
   resolution: "extract-zip@npm:2.0.1"