diff --git a/packages/playground-next/src/app/page.tsx b/packages/playground-next/src/app/page.tsx index f2683b8fc..7e1b5d714 100644 --- a/packages/playground-next/src/app/page.tsx +++ b/packages/playground-next/src/app/page.tsx @@ -2,7 +2,7 @@ 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; @@ -10,46 +10,84 @@ interface AccountInfo { } export default function Home() { - const { sdk } = useSDK(); - const [account, setAccount] = useState(null); + const { sdk, connected, connecting, provider, account } = useSDK(); + const [accountInfo, setAccountInfo] = useState(null); + const [isLoading, setIsLoading] = useState(false); + + const getBalance = useCallback(async (address: string): Promise => { + 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 => { 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 => { + 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 (

Simple Web3 Dapp

- {!account ? ( - ) : ( <>
- Address: {account.account} + Address: {accountInfo?.account}
- Balance: {account.balance} Wei + Balance: {accountInfo?.balance} Wei
+ )}
diff --git a/packages/sdk/package.json b/packages/sdk/package.json index 54c355380..de97a3025 100644 --- a/packages/sdk/package.json +++ b/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", diff --git a/packages/sdk/rollup.config.js b/packages/sdk/rollup.config.js index 214fb2be1..d5938d728 100644 --- a/packages/sdk/rollup.config.js +++ b/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 diff --git a/yarn.lock b/yarn.lock index bfa304464..8dccf8055 100644 --- a/yarn.lock +++ b/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,6 +11965,13 @@ __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" @@ -11918,6 +11979,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:^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"