From 1048fcef98017be20d2404877260880d1b156b12 Mon Sep 17 00:00:00 2001 From: Alexandra Carrillo Date: Mon, 10 Nov 2025 14:12:57 -0800 Subject: [PATCH 1/5] Update MM Connect EVM JS code samples with potential new usage --- sdk/evm/connect/guides/connectkit.md | 2 +- sdk/evm/connect/guides/dynamic.md | 2 +- .../guides/javascript/batch-requests.md | 8 +- .../guides/javascript/display-tokens.md | 69 +++++++++-------- sdk/evm/connect/guides/javascript/index.md | 41 +++++----- .../javascript/interact-with-contracts.md | 13 +++- .../guides/javascript/manage-networks.md | 13 +++- .../guides/javascript/manage-user-accounts.md | 18 ++--- .../send-transactions/batch-transactions.md | 76 ++++++++++--------- .../javascript/send-transactions/index.md | 18 ++++- .../guides/javascript/sign-data/index.md | 73 ++++++++++-------- .../guides/javascript/sign-data/siwe.md | 14 ++-- sdk/evm/connect/guides/rainbowkit.md | 2 +- sdk/evm/connect/guides/react-native.md | 2 +- sdk/evm/connect/guides/wagmi/index.md | 4 +- .../connect/guides/wagmi/send-transactions.md | 5 ++ sdk/evm/connect/guides/web3auth.md | 2 +- .../json-rpc-api/eth_signTypedData_v4.mdx | 64 ++++++++-------- .../connect/reference/json-rpc-api/index.md | 16 +--- .../json-rpc-api/wallet_sendCalls.mdx | 48 ++++++------ sdk/evm/connect/reference/methods.md | 16 ++-- 21 files changed, 268 insertions(+), 238 deletions(-) diff --git a/sdk/evm/connect/guides/connectkit.md b/sdk/evm/connect/guides/connectkit.md index 3c25f2ab873..814056687ad 100644 --- a/sdk/evm/connect/guides/connectkit.md +++ b/sdk/evm/connect/guides/connectkit.md @@ -80,7 +80,7 @@ You can [download the quickstart template](#set-up-using-a-template) or [manuall ## Set up manually -### 1. Install the SDK +### 1. Install MM Connect Install MM Connect along with its peer dependencies to an existing React project: diff --git a/sdk/evm/connect/guides/dynamic.md b/sdk/evm/connect/guides/dynamic.md index 408719972bc..be6e8e49213 100644 --- a/sdk/evm/connect/guides/dynamic.md +++ b/sdk/evm/connect/guides/dynamic.md @@ -86,7 +86,7 @@ See how to [use the combined SDKs](#usage). ### 1. Install dependencies -Install the SDK and the required dependencies to an existing project: +Install MM Connect and the required dependencies to an existing project: ```bash npm2yarn npm install @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector wagmi viem @tanstack/react-query diff --git a/sdk/evm/connect/guides/javascript/batch-requests.md b/sdk/evm/connect/guides/javascript/batch-requests.md index f541c311c4a..0c5a387de1d 100644 --- a/sdk/evm/connect/guides/javascript/batch-requests.md +++ b/sdk/evm/connect/guides/javascript/batch-requests.md @@ -34,10 +34,10 @@ When using `metamask_batch`, keep in mind the following: The following is an example of batching JSON-RPC requests using `metamask_batch`: ```js -import { MetaMaskSDK } from "@metamask/sdk"; +import { createEVMClient } from "@metamask/connect/evm"; -const MMSDK = new MetaMaskSDK(); -const provider = MMSDK.getProvider(); +// Initialize SDK +const evmClient = createEVMClient(); async function handleBatchRequests() { // Example batch: one personal_sign call and one eth_sendTransaction call. @@ -56,7 +56,7 @@ async function handleBatchRequests() { ]; try { - const results = await provider.request({ + const results = await evmClient.request({ method: "metamask_batch", params: [requests], }); diff --git a/sdk/evm/connect/guides/javascript/display-tokens.md b/sdk/evm/connect/guides/javascript/display-tokens.md index 6a826b82280..29b27cf8761 100644 --- a/sdk/evm/connect/guides/javascript/display-tokens.md +++ b/sdk/evm/connect/guides/javascript/display-tokens.md @@ -38,6 +38,11 @@ extension (not on mobile). To prompt users to add an ERC-20 token, you can add something like the following to your project script: ```javascript +import { createEVMClient } from "@metamask/connect/evm"; + +// Initialize SDK +const evmClient = createEVMClient(); + const tokenAddress = "0xd00981105e61274c8a5cd5a88fe7e037d935b513" const tokenSymbol = "TUT" const tokenDecimals = 18 @@ -45,23 +50,22 @@ const tokenImage = "http://placekitten.com/200/300" try { // 'wasAdded' is a boolean. Like any RPC method, an error can be thrown. - const wasAdded = await provider // Or window.ethereum if you don't support EIP-6963. - .request({ - method: "wallet_watchAsset", - params: { - type: "ERC20", - options: { - // The address of the token. - address: tokenAddress, - // A ticker symbol or shorthand, up to 5 characters. - symbol: tokenSymbol, - // The number of decimals in the token. - decimals: tokenDecimals, - // A string URL of the token logo. - image: tokenImage, - }, + const wasAdded = await evmClient.request({ + method: "wallet_watchAsset", + params: { + type: "ERC20", + options: { + // The address of the token. + address: tokenAddress, + // A ticker symbol or shorthand, up to 5 characters. + symbol: tokenSymbol, + // The number of decimals in the token. + decimals: tokenDecimals, + // A string URL of the token logo. + image: tokenImage, }, - }) + }, + }) if (wasAdded) { console.log("Thanks for your interest!") @@ -110,21 +114,25 @@ To prompt users to add a single NFT, add something like the following to your pr `wallet_watchAsset` supports both ERC-721 and ERC-1155 NFT standards. ```javascript +import { createEVMClient } from "@metamask/connect/evm"; + +// Initialize SDK +const evmClient = createEVMClient(); + try { // wasAdded is a boolean. Like any RPC method, an error can be thrown. - const wasAdded = await provider // Or window.ethereum if you don't support EIP-6963. - .request({ - method: "wallet_watchAsset", - params: { - type: "ERC721", // Or "ERC1155". - options: { - // The address of the token. - address: "0x742d35Cc6634C0532925a3b844Bc454e4438f44e", - // ERC-721 or ERC-1155 token ID. - tokenId: "1", - }, + const wasAdded = await evmClient.request({ + method: "wallet_watchAsset", + params: { + type: "ERC721", // Or "ERC1155". + options: { + // The address of the token. + address: "0x742d35Cc6634C0532925a3b844Bc454e4438f44e", + // ERC-721 or ERC-1155 token ID. + tokenId: "1", }, - }) + }, + }) if (wasAdded) { console.log("User successfully added the token!") @@ -143,8 +151,7 @@ To prompt users to add multiple NFTs, use `sendAsync()` instead of For example: ```javascript -provider // Or window.ethereum if you don't support EIP-6963. - .sendAsync([{ +evmClient.sendAsync([{ // TO DO: Confirm if MM Connect supports sendAsync method: "wallet_watchAsset", params: { type: "ERC721", @@ -164,5 +171,5 @@ provider // Or window.ethereum if you don't support EIP-6963. }, }, ... - ]) +]) ``` diff --git a/sdk/evm/connect/guides/javascript/index.md b/sdk/evm/connect/guides/javascript/index.md index f6eb7026120..ed01cd6ed29 100644 --- a/sdk/evm/connect/guides/javascript/index.md +++ b/sdk/evm/connect/guides/javascript/index.md @@ -84,25 +84,25 @@ You've successfully set up MM Connect. ## Set up manually -### 1. Install the SDK +### 1. Install MM Connect -Install the SDK in an existing JavaScript project: +Install MM Connect in an existing JavaScript project: ```bash npm2yarn -npm install @metamask/sdk +npm install @metamask/connect/evm ``` -### 2. Initialize the SDK +### 2. Initialize MM Connect -The following are examples of using the SDK in various JavaScript environments: +The following are examples of using MM Connect in various JavaScript environments: ```javascript -import { MetaMaskSDK } from "@metamask/sdk" +import { createEVMClient } from "@metamask/connect/evm" -const MMSDK = new MetaMaskSDK({ +const evmClient = createEVMClient({ dappMetadata: { name: "Example JavaScript dapp", url: window.location.href, @@ -119,7 +119,7 @@ const MMSDK = new MetaMaskSDK({