Edit SDK builder content (#2266)

* Edit SDK builder.

Signed-off-by: bgravenorst <[email protected]>

* Minor update to language.

Signed-off-by: bgravenorst <[email protected]>

* Apply suggestions from code review

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

* Address reviewer feedback.

Signed-off-by: bgravenorst <[email protected]>

---------

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

Author: bgravenorst

src/components/NavDropdown/Products.html

@@ -108,7 +108,7 @@ <h2>Extend and scale</h2>
             </svg>
           </span>
           <div>
-            <h2>Metamask SDK</h2>
+            <h2>MetaMask SDK</h2>
             <p>Seamlessly connect your dapp to MetaMask extension and mobile.</p>
           </div>
         </a>

src/pages/quickstart/builder/choices.ts

@@ -6,7 +6,7 @@ export const METAMASK_SDK = 'METAMASK_SDK'
 
 // Product choices
 export const PRODUCTS: DisplayChoice[] = [
-  { key: METAMASK_SDK, displayName: 'Metamask SDK' },
+  { key: METAMASK_SDK, displayName: 'MetaMask SDK' },
   { key: EMBEDDED_WALLETS, displayName: 'Embedded Wallets' },
 ]
 

src/pages/quickstart/builder/metamask-sdk/react/stepContent/connect.mdx

@@ -1,7 +1,9 @@
-### Connect and use provider
+### Connect and use the provider
 
 Connect to MetaMask and get the provider for RPC requests.
 
 `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`.
+Use `provider.request()` for arbitrary [JSON-RPC requests](/wallet/reference/json-rpc-methods) like
+`eth_chainId` or `eth_getBalance`, or for [batching requests](/sdk/guides/batch-requests) via
+`metamask_batch`.

src/pages/quickstart/builder/metamask-sdk/react/stepContent/initialization.mdx

@@ -1,6 +1,6 @@
-### Initialize the MetaMask SDK
+### Initialize MetaMask SDK
 
-The MetaMask SDK can be initialized with the following options:
+Initialize MetaMask SDK with these options:
 
-- `dappMetadata` - Ensures trust by showing your dapp's name, url, and iconUrl during connection.
-- `infuraAPIKey` - Enables read-only RPC and load‑balancing.
+- `dappMetadata` - Displays your dapp's name, URL, and icon URL during connection.
+- `infuraAPIKey` - Enables the read-only RPC and load‑balancing.

src/pages/quickstart/builder/metamask-sdk/react/stepContent/installation.mdx

@@ -1,9 +1,9 @@
-### Install the MetaMask SDK
+### Install MetaMask SDK
 
-Install the MetaMask SDK package in your React project.
+Install MetaMask SDK in your React project.
 
 ```bash npm2yarn
 npm install --save @metamask/sdk
 ```
 
-[![Npm package monthly downloads](https://badgen.net/npm/dm/@metamask/sdk)](https://www.npmjs.com/package/@metamask/sdk) [![](https://data.jsdelivr.com/v1/package/npm/@metamask/sdk/badge)](https://www.jsdelivr.com/package/npm/@metamask/sdk)
+[![npm package monthly downloads](https://badgen.net/npm/dm/@metamask/sdk)](https://www.npmjs.com/package/@metamask/sdk) [![](https://data.jsdelivr.com/v1/package/npm/@metamask/sdk/badge)](https://www.jsdelivr.com/package/npm/@metamask/sdk)

src/pages/quickstart/builder/metamask-sdk/react/stepContent/reactQuickStart.mdx

@@ -1,8 +1,9 @@
-### MetaMask SDK - React Quickstart
+### MetaMask SDK - React quickstart
 
-Seamlessly connect to MetaMask Wallet using the MetaMask SDK in your React application.
+This quickstart shows you how to connect a React application to the MetaMask wallet using
+MetaMask SDK.
 
-Start by cloning the React Quickstart application.
+Clone the React quickstart application.
 
 ```shell
 npx degit MetaMask/metamask-sdk-examples/quickstarts/react mm-react-quickstart

src/pages/quickstart/builder/metamask-sdk/react/stepContent/terminate.mdx

@@ -1,3 +1,3 @@
-### Disconnect from MetaMask Wallet
+### Disconnect from MetaMask
 
 Use the `MMSDK.terminate()` method to disconnect from MetaMask.

src/pages/quickstart/styles.module.css

@@ -1,3 +1,19 @@
+.stepBody a {
+  color: var(--ifm-link-color);
+  font-weight: 500;
+  text-decoration: underline;
+  text-decoration-color: var(--ifm-link-color);
+  text-decoration-thickness: .1rem;
+  text-underline-offset: .4rem;
+  transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+}
+.stepBody a:hover,
+.stepBody a:focus {
+  color: var(--ifm-link-hover-color);
+  text-decoration: underline;
+  text-decoration-color: var(--ifm-link-hover-color);
+}
+
 .container {
   width: 100%;
   height: 100%;