Update MM Connect EVM JS code samples with potential new usage (#2454)

* Update MM Connect EVM JS code samples with potential new usage

* remove initialize sdk comment

* add provider to code snippets

* fix cursor bugs

* remove /evm from wagmi install

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:
 

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

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();
+const evmClient = createEVMClient();
+const provider = evmClient.getProvider();
 
 async function handleBatchRequests() {
   // Example batch: one personal_sign call and one eth_sendTransaction call.

sdk/evm/connect/guides/javascript/display-tokens.md

@@ -38,30 +38,34 @@ 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";
+
+const evmClient = createEVMClient();
+const provider = evmClient.getProvider();
+
 const tokenAddress = "0xd00981105e61274c8a5cd5a88fe7e037d935b513"
 const tokenSymbol = "TUT"
 const tokenDecimals = 18
 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 provider.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";
+
+const evmClient = createEVMClient();
+const provider = evmClient.getProvider();
+
 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 provider.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([{
+provider.sendAsync([{
     method: "wallet_watchAsset",
     params: {
       type: "ERC721",
@@ -164,5 +171,5 @@ provider // Or window.ethereum if you don't support EIP-6963.
     },
   },
   ...
-  ])
+])
 ```

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:
 
 <Tabs>
 <TabItem value="Web dapps">
 
 ```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({
 <head>
   <script src="https://c0f4f41c-2f55-4863-921b-sdk-docs.github.io/cdn/metamask-sdk.js"></script>
   <script>
-    const MMSDK = new MetaMaskSDK.MetaMaskSDK({
+    const evmClient = createEVMClient({
       dappMetadata: {
         name: "Example JavaScript dapp",
         url: window.location.href,
@@ -145,9 +145,9 @@ These examples configure the SDK with the following options:
 Connect to MetaMask and get the provider for RPC requests:
 
 ```javascript
-const provider = MMSDK.getProvider()
+const provider = evmClient.getProvider()
 
-const accounts = await MMSDK.connect()
+const accounts = await evmClient.connect()
 console.log("Connected account:", accounts[0])
 
 const result = await provider.request({
@@ -157,7 +157,7 @@ const result = await provider.request({
 console.log("eth_accounts result:", result)
 ```
 
-`MMSDK.connect()` handles cross-platform connection (desktop and mobile), including deeplinking.
+`evmClient.connect()` handles cross-platform connection (desktop and mobile), including deeplinking.
 
 Use `provider.request()` for arbitrary [JSON-RPC requests](../../reference/json-rpc-api/index.md) like `eth_chainId` or `eth_getBalance`, or for [batching requests](batch-requests.md) via `metamask_batch`.
 
@@ -175,15 +175,15 @@ Use `provider.request()` for arbitrary [JSON-RPC requests](../../reference/json-
 
 ```javascript
 // 1. Connect and get accounts
-const accounts = await MMSDK.connect()
+const accounts = await evmClient.connect()
 
 // 2. Connect and sign in one step
-const signResult = await MMSDK.connectAndSign({
+const signResult = await evmClient.connectAndSign({
   msg: "Sign in to the dapp",
 })
 
 // 3. Get provider for RPC requests
-const provider = MMSDK.getProvider()
+const provider = evmClient.getProvider()
 
 // 4. Make an RPC request
 const result = await provider.request({

sdk/evm/connect/guides/javascript/interact-with-contracts.md

@@ -23,14 +23,19 @@ You can implement smart contract interactions directly in JavaScript.
 The following example reads contract data using the [`eth_call`](../../reference/json-rpc-api/index.md) RPC method:
 
 ```javascript
+import { createEVMClient } from "@metamask/connect/evm";
+
+const evmClient = createEVMClient();
+const provider = evmClient.getProvider();
+
 async function getBalance(contractAddress, userAddress) {
   try {
     // Create function signature for balanceOf(address)
     const functionSignature = "0x70a08231";
     // Pad address to 32 bytes
     const encodedAddress = userAddress.slice(2).padStart(64, "0");
 
-    const result = await ethereum.request({
+    const result = await provider.request({
       method: "eth_call",
       params: [{
         to: contractAddress,
@@ -69,7 +74,7 @@ RPC methods:
 async function mintNFT(contractAddress, tokenId) {
   try {
     // Get user's account
-    const accounts = await ethereum.request({ 
+    const accounts = await provider.request({ 
       method: "eth_requestAccounts" 
     });
 
@@ -79,7 +84,7 @@ async function mintNFT(contractAddress, tokenId) {
     const encodedTokenId = tokenId.toString(16).padStart(64, "0");
 
     // Send transaction
-    const txHash = await ethereum.request({
+    const txHash = await provider.request({
       method: "eth_sendTransaction",
       params: [{
         from: accounts[0],
@@ -102,7 +107,7 @@ async function watchTransaction(txHash) {
   return new Promise((resolve, reject) => {
     const checkTransaction = async () => {
       try {
-        const tx = await ethereum.request({
+        const tx = await provider.request({
           method: "eth_getTransactionReceipt",
           params: [txHash],
         });

sdk/evm/connect/guides/javascript/manage-networks.md

@@ -29,10 +29,15 @@ The following example detects the current network using the
 [`chainChanged`](../../reference/provider-api.md#chainchanged) provider event:
 
 ```javascript
+import { createEVMClient } from "@metamask/connect/evm";
+
+const evmClient = createEVMClient();
+const provider = evmClient.getProvider();
+
 // Get current chain ID
 async function getCurrentChain() {
   try {
-    const chainId = await ethereum.request({ 
+    const chainId = await provider.request({ 
       method: "eth_chainId" 
     });
     console.log("Current chain ID:", chainId);
@@ -43,7 +48,7 @@ async function getCurrentChain() {
 }
 
 // Listen for network changes
-ethereum.on("chainChanged", (chainId) => {
+provider.on("chainChanged", (chainId) => {
   console.log("Network changed to:", chainId);
   // We recommend reloading the page
   window.location.reload();
@@ -80,15 +85,15 @@ async function switchNetwork(networkKey) {
 
   try {
     // Try to switch to the network
-    await ethereum.request({
+    await provider.request({
       method: "wallet_switchEthereumChain",
       params: [{ chainId: network.chainId }]
     });
   } catch (err) {
     // If the error code is 4902, the network needs to be added
     if (err.code === 4902) {
       try {
-        await ethereum.request({
+        await provider.request({
           method: "wallet_addEthereumChain",
           params: [{
             chainId: network.chainId,

sdk/evm/connect/guides/javascript/manage-user-accounts.md

@@ -31,11 +31,10 @@ and [`accountsChanged`](../../reference/provider-api.md#accountschanged) provide
 For example:
 
 ```javascript
-import { MetaMaskSDK } from "@metamask/sdk";
+import { createEVMClient } from "@metamask/connect/evm";
 
-// Initialize SDK
-const MMSDK = new MetaMaskSDK();
-const provider = MMSDK.getProvider();
+const evmClient = createEVMClient();
+const provider = evmClient.getProvider();
 
 // Connect wallet
 async function connectWallet() {
@@ -68,7 +67,7 @@ async function connectWallet() {
 // Disconnect wallet
 async function disconnectWallet() {
   try {
-    await MMSDK.terminate()
+    await evmClient.terminate()
   } catch (err) {
     console.error("Error with disconnecting:", err)
   }
@@ -106,14 +105,13 @@ You can use MM Connect's [`connectAndSign`](../../reference/methods.md#connectan
 For example:
 
 ```js
-import { MetaMaskSDK } from "@metamask/sdk"
+import { createEVMClient } from "@metamask/connect/evm";
 
-const MMSDK = new MetaMaskSDK()
-const provider = MMSDK.getProvider()
+const evmClient = createEVMClient();
 
 async function handleConnectAndSign() {
   try {
-    const signature = await MMSDK.connectAndSign({ msg: "Hello in one go!" })
+    const signature = await evmClient.connectAndSign({ msg: "Hello in one go!" })
     console.log("Signature:", signature)
   } catch (err) {
     console.error("Error with connectAndSign:", err)