Update JS QuickStart (#2207)

* Update JS QuickStart

* Apply suggestion from @alexandratran

Co-authored-by: Alexandra Carrillo <[email protected]>

* Apply suggestion from @alexandratran

Co-authored-by: Alexandra Carrillo <[email protected]>

* Apply suggestion from @alexandratran

Co-authored-by: Alexandra Carrillo <[email protected]>

* Apply suggestion from @alexandratran

Co-authored-by: Alexandra Carrillo <[email protected]>

* Apply suggestion from @alexandratran

Co-authored-by: Alexandra Carrillo <[email protected]>

* Apply suggestion from @alexandratran

Co-authored-by: Alexandra Carrillo <[email protected]>

* Apply suggestion from @alexandratran

Co-authored-by: Alexandra Carrillo <[email protected]>

* Apply suggestion from @alexandratran

Co-authored-by: Alexandra Carrillo <[email protected]>

* Apply suggestion from @alexandratran

Co-authored-by: Alexandra Carrillo <[email protected]>

* Apply suggestion from @alexandratran

Co-authored-by: Alexandra Carrillo <[email protected]>

* fix as per comment

* Add text for pnpm and bun

* Update sdk/connect/javascript.md

Co-authored-by: Alexandra Carrillo <[email protected]>

* Fix as per comment

#2207 (comment)

---------

Co-authored-by: Alexandra Carrillo <[email protected]>

Author: shahbaz17

sdk/connect/javascript.md

@@ -11,23 +11,24 @@ import TabItem from "@theme/TabItem";
 
 Get started with MetaMask SDK in your JavaScript dapp.
 
+## Prerequisites
+
+- [Node.js](https://nodejs.org/) version 19 or later installed.
+- A package manager installed, such as [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/installation), or [bun](https://bun.sh/).
+- [MetaMask](https://metamask.io/) installed in your browser or on mobile.
+
+
 ## Steps
 
 ### 1. Install the SDK
 
-Install the SDK in an existing JavaScript project using npm or Yarn:
+Install the SDK in an existing JavaScript project:
 
-```bash
+```bash npm2yarn
 npm install @metamask/sdk
 ```
 
-or
-
-```
-yarn add @metamask/sdk
-```
-
-### 2.  Use the SDK
+### 2. Initialize the SDK
 
 The following are examples of using the SDK in various JavaScript environments:
 
@@ -39,22 +40,12 @@ import { MetaMaskSDK } from "@metamask/sdk"
 
 const MMSDK = new MetaMaskSDK({
   dappMetadata: {
-    name: "Example JavaScript Dapp",
+    name: "Example JavaScript dapp",
     url: window.location.href,
+    // iconUrl: "https://mydapp.com/icon.png" // Optional
   },
   infuraAPIKey: process.env.INFURA_API_KEY,
 })
-
-const ethereum = MMSDK.getProvider()
-
-// Connect to MetaMask
-const accounts = await MMSDK.connect()
-
-// Make requests
-const result = await ethereum.request({ 
-  method: "eth_accounts", 
-  params: [] 
-})
 ```
 
 </TabItem>
@@ -66,63 +57,77 @@ const result = await ethereum.request({
   <script>
     const MMSDK = new MetaMaskSDK.MetaMaskSDK({
       dappMetadata: {
-        name: "Example Pure JS Dapp",
+        name: "Example JavaScript dapp",
+        url: window.location.href,
+        // iconUrl: "https://mydapp.com/icon.png" // Optional
       },
       infuraAPIKey: process.env.INFURA_API_KEY,
-    });
-    
-    MMSDK.connect()
+    })
   </script>
 </head>
 ```
 
 </TabItem>
 </Tabs>
 
-### 3. Configure the SDK
+These examples configure the SDK with the following options:
 
-The SDK accepts several [configuration options](../reference/sdk-options.md) when initializing.
-For example:
+- [`dappMetadata`](../reference/sdk-options.md#dappmetadata) - Ensures trust by showing your dapp's `name`, `url`, and `iconUrl` during connection.
+
+- [`infuraAPIKey`](../reference/sdk-options.md#infuraapikey) - Enables read-only RPC and load‑balancing.
+
+### 3. Connect and use provider
+
+Connect to MetaMask and get the provider for RPC requests:
 
 ```javascript
-const MMSDK = new MetaMaskSDK({
-  // Required - Your dapp's info
-  dappMetadata: {
-    name: "Your Dapp Name",
-    url: window.location.href,
-  },
-  
-  // Optional - Infura API key for read-only RPC calls
-  infuraAPIKey: process.env.INFURA_API_KEY,
-  
-  // Optional - Customize modal display
-  headless: false,
+const provider = MMSDK.getProvider()
+
+const accounts = await MMSDK.connect()
+console.log("Connected account:", accounts[0])
+
+const result = await provider.request({
+  method: "eth_accounts",
+  params: [],
 })
+console.log("eth_accounts result:", result)
 ```
 
-### 4. Call common methods
+`MMSDK.connect()` handles cross-platform connection (desktop and mobile), including deeplinking.
+
+Use `provider.request()` for arbitrary [JSON-RPC requests](/wallet/reference/json-rpc-methods) like `eth_chainId` or `eth_getBalance`, or for [batching requests](../guides/batch-requests.md) via `metamask_batch`.
+
+## Common SDK methods at a glance
+
+| Method                                 | Description                                  |
+| -------------------------------------- | -------------------------------------------- |
+| [`connect()`](../reference/sdk-methods.md#connect)                            | Triggers wallet connection flow              |
+| [`connectAndSign({ msg: '...' })`](../reference/sdk-methods.md#connectandsign)       | Connects and prompts user to sign a message  |
+| [`getProvider()`](../reference/sdk-methods.md#getprovider)                        | Returns the provider object for RPC requests |
+| [`provider.request({ method, params })`](/wallet/reference/provider-api/#request) | Calls any Ethereum JSON‑RPC method                   |
+| [Batched RPC](../guides/batch-requests.md)                            | Use `metamask_batch` to group multiple JSON-RPC requests |
 
-The following are common methods you can call with the SDK:
+## Usage example
 
 ```javascript
-// Connect and get accounts
+// 1. Connect and get accounts
 const accounts = await MMSDK.connect()
 
-// Get provider for RPC requests
+// 2. Connect and sign in one step
+const signResult = await MMSDK.connectAndSign({
+  msg: "Sign in to Dapp",
+})
+
+// 3. Get provider for RPC requests
 const provider = MMSDK.getProvider()
 
-// Make an RPC request
-const result = await provider.request({ 
+// 4. Make an RPC request
+const result = await provider.request({
   method: "eth_accounts",
-  params: [] 
-})
-
-// Connect and sign in one step
-const signResult = await MMSDK.connectAndSign({ 
-  msg: "Sign in to Dapp" 
+  params: [],
 })
 
-// Batch multiple RPC requests
+// 5. Batch multiple RPC requests
 const batchResults = await provider.request({
   method: "metamask_batch",
   params: [