Update SDK guides (#2117)

Author: alexandratran

sdk/connect/javascript-dynamic.md

@@ -8,26 +8,17 @@ keywords: [connect, MetaMask, Dynamic, SDK, dapp]
 # Connect to MetaMask using Dynamic SDK
 
 Get started with MetaMask SDK and [Dynamic SDK](https://docs.dynamic.xyz/introduction/welcome).
-You can set up the SDKs in the following ways:
+You can use MetaMask SDK features directly within Dynamic SDK.
+Set up the SDKs in one of the following ways:
 
-- [SDK CLI](#set-up-using-the-cli) - Use the CLI to scaffold a Next.js and Wagmi dapp with both SDKs.
-- [Quickstart template](#set-up-using-a-template) - Clone the template to set up a Next.js and Wagmi dapp with both SDKs.
-- [Manual setup](#set-up-manually) - Set up both SDKs in an existing dapp.
+- [SDK CLI](#set-up-using-the-cli) - Use the CLI to scaffold a Next.js and Dynamic dapp.
+- [Quickstart template](#set-up-using-a-template) - Clone the template to set up a Next.js and Dynamic dapp.
+- [Manual setup](#set-up-manually) - Set up Dynamic SDK in an existing dapp.
 
-<p align="center">
-  <img src={require("../_assets/quickstart-dynamic.png").default} alt="Dynamic SDK Quickstart" width="450px" />
-</p>
-
-Features include:
-
-- **MetaMask SDK built into Dynamic** - Use MetaMask SDK features directly within Dynamic SDK.
-- **Wallet connection** - Connect to MetaMask wallet with enhanced features.
-- **Mobile experience** - Optimized for both desktop and mobile users.
-- **TypeScript support** - Full type safety and modern development experience.
-- **Next.js integration** - Built with Next.js 14 and App Router.
-
-:::note Project structure
-The project you will set up has the following structure:
+<details>
+<summary>Project structure</summary>
+<div>
+The project you set up using the CLI or template has the following structure:
 
 ```text
 ├── app/
@@ -40,7 +31,12 @@ The project you will set up has the following structure:
 ├── next.config.ts    # Next.js configuration
 └── package.json      # Project dependencies
 ```
-:::
+</div>
+</details>
+
+<p align="center">
+  <img src={require("../_assets/quickstart-dynamic.png").default} alt="Dynamic SDK Quickstart" width="600px" />
+</p>
 
 ## Prerequisites
 

sdk/connect/javascript-wagmi.md

@@ -14,21 +14,10 @@ You can set up the SDK in the following ways:
 - [Quickstart template](#set-up-using-a-template) - Clone the template to set up a Next.js and Wagmi dapp.
 - [Manual setup](#set-up-manually) - Set up the SDK in an existing dapp.
 
-<p align="center">
-  <a href="https://metamask-sdk-examples.vercel.app/" target="_blank">
-    <img src={require("../_assets/quickstart.jpg").default} alt="Quickstart" width="450px" />
-  </a>
-</p>
-
-Features include:
-
-- **Wallet connection** - Connect to the MetaMask wallet seamlessly.
-- **Network switching** - Switch between Ethereum networks like Linea Sepolia, Linea, and Mainnet.
-- **Interactive UI** - Responsive design with interactive cards guiding users.
-- **Modular components** - Easy-to-understand and customizable components.
-
-:::note Project structure
-The project you will set up has the following structure:
+<details>
+<summary>Project structure</summary>
+<div>
+The project you set up using the CLI or template has the following structure:
 
 ```text
 ├── app/
@@ -41,7 +30,15 @@ The project you will set up has the following structure:
 ├── next.config.ts    # Next.js configuration
 └── package.json      # Project dependencies
 ```
-:::
+</div>
+</details>
+
+<p align="center">
+  <a href="https://metamask-sdk-examples.vercel.app/" target="_blank">
+    <img src={require("../_assets/quickstart.jpg").default} alt="Quickstart" width="600px" />
+  </a>
+</p>
+
 
 ## Prerequisites
 

sdk/connect/javascript-web3auth.md

@@ -7,25 +7,19 @@ keywords: [connect, MetaMask, Web3Auth, SDK, dapp]
 
 # Connect to MetaMask using Web3Auth SDK
 
-Get started with MetaMask SDK and [Web3Auth SDK](https://web3auth.io/docs/).
-You can set up the SDKs in the following ways:
+Get started with MetaMask SDK and [Web3Auth SDK](https://web3auth.io/docs/),
+enabling users to sign in with an email or social media account.
+You can use MetaMask SDK features directly within Web3Auth SDK.
+Set up the SDKs in one of the following ways:
 
-- [Quickstart template](#set-up-using-a-template) - Clone the template to set up a Next.js and Web3Auth dapp that uses MetaMask SDK.
+- [SDK CLI](#set-up-using-the-cli) - Use the CLI to scaffold a Next.js and Web3Auth dapp.
+- [Quickstart template](#set-up-using-a-template) - Clone the template to set up a Next.js and Web3Auth dapp.
 - [Manual setup](#set-up-manually) - Set up Web3Auth SDK in an existing dapp.
 
 <p align="center">
-  <img src={require("../_assets/quickstart-web3auth.png").default} alt="Web3Auth SDK Quickstart" width="450px" />
+  <img src={require("../_assets/quickstart-web3auth.png").default} alt="Web3Auth SDK Quickstart" width="600px" />
 </p>
 
-Features include:
-
-- **MetaMask SDK built into Web3Auth** - Use MetaMask SDK features directly within Web3Auth SDK.
-- **Web3Auth social login** - Enable users to sign in with an email or social media account.
-- **Wallet connection** - Connect to MetaMask wallet with enhanced features.
-- **Mobile experience** - Optimized for both desktop and mobile users.
-- **TypeScript support** - Full type safety and modern development experience.
-- **Next.js integration** - Built with Next.js 15 and App Router.
-
 ## Prerequisites
 
 - [Node.js](https://nodejs.org/) version 19 or later installed.

sdk/guides/authenticate-users.md

@@ -85,7 +85,9 @@ function WatchAccount() {
 
 ## Use Vanilla JavaScript
 
-You can implement user authentication directly in Vanilla JavaScript.
+You can implement user authentication directly in Vanilla JavaScript, using the
+[`eth_requestAccounts`](/wallet/reference/json-rpc-methods/eth_requestaccounts) RPC method
+and [`accountsChanged`](/wallet/reference/provider-api/#accountschanged) provider event.
 For example:
 
 ```javascript
@@ -149,10 +151,6 @@ Display connect and disconnect buttons in HTML:
 </div>
 ```
 
-:::info
-See the [Provider API](/wallet/reference/provider-api) reference for more information.
-:::
-
 ## Best practices
 
 Follow these best practices when authenticating users.

sdk/guides/handle-transactions.md

@@ -111,6 +111,11 @@ The following are examples of sending a [basic transaction](#basic-transaction-1
 
 ### Basic transaction
 
+The basic transaction uses the [`eth_requestAccounts`](/wallet/reference/json-rpc-methods/eth_requestaccounts),
+[`eth_sendTransaction`](/wallet/reference/json-rpc-methods/eth_sendtransaction), and
+[`eth_getTransactionReceipt`](/wallet/reference/json-rpc-methods/eth_gettransactionreceipt)
+RPC methods.
+
 ```javascript
 async function sendTransaction(recipientAddress, amount) {
   try {
@@ -209,6 +214,9 @@ async function handleSend() {
 
 ### Advanced transaction with gas estimation
 
+To add gas estimation, use the [`eth_estimateGas`](/wallet/reference/json-rpc-methods/eth_estimategas)
+RPC method.
+
 ```javascript
 async function estimateGas(transaction) {
   try {
@@ -226,10 +234,6 @@ async function estimateGas(transaction) {
 }
 ```
 
-:::info
-See the [Provider API](/wallet/reference/provider-api) reference and [JSON-RPC API](/wallet/reference/json-rpc-methods) reference for more information.
-:::
-
 ## Best practices
 
 Follow these best practices when handling transactions.

sdk/guides/interact-with-contracts.md

@@ -116,7 +116,7 @@ function MintNFT() {
 
 You can implement smart contract interactions directly in Vanilla JavaScript.
 
-For example, read contract data:
+The following example reads contract data using the [`eth_call`](/wallet/reference/json-rpc-methods/eth_call) RPC method:
 
 ```javascript
 async function getBalance(contractAddress, userAddress) {
@@ -156,7 +156,10 @@ async function displayBalance() {
 }
 ```
 
-Write to contracts:
+The following example writes to contracts using the [`eth_requestAccounts`](/wallet/reference/json-rpc-methods/eth_requestaccounts),
+[`eth_sendTransaction`](/wallet/reference/json-rpc-methods/eth_sendtransaction), and
+[`eth_getTransactionReceipt`](/wallet/reference/json-rpc-methods/eth_gettransactionreceipt)
+RPC methods:
 
 ```javascript
 async function mintNFT(contractAddress, tokenId) {
@@ -246,10 +249,6 @@ async function handleMint() {
 </script>
 ```
 
-:::info
-See the [Provider API](/wallet/reference/provider-api) reference and [JSON-RPC API](/wallet/reference/json-rpc-methods) reference for more information.
-:::
-
 ## Best practices
 
 Follow these best practices when interacting with smart contracts.

sdk/guides/manage-networks.md

@@ -93,7 +93,9 @@ function NetworkWatcher() {
 
 You can implement network management directly in Vanilla JavaScript.
 
-For example, detect the current network:
+The following example detects the current network using the
+[`eth_chainId`](/wallet/reference/json-rpc-methods/eth_chainid) RPC method and
+[`chainChanged`](/wallet/reference/provider-api/#chainchanged) provider event:
 
 ```javascript
 // Get current chain ID
@@ -117,7 +119,10 @@ ethereum.on("chainChanged", (chainId) => {
 });
 ```
 
-Switch networks:
+The following example switches networks using the
+[`wallet_switchEthereumChain`](/wallet/reference/json-rpc-methods/wallet_switchethereumchain)
+and [`wallet_addEthereumChain`](/wallet/reference/json-rpc-methods/wallet_addethereumchain)
+RPC methods:
 
 ```javascript
 // Network configurations
@@ -182,10 +187,6 @@ Display the current network and a switch network button in HTML:
 </div>
 ```
 
-:::info
-See the [Provider API](/wallet/reference/provider-api) reference and [JSON-RPC API](/wallet/reference/json-rpc-methods) reference for more information.
-:::
-
 ## Best practices
 
 Follow these best practices when managing networks.