2647e proof for tutorial

src/pages/tutorials/integrate-solana-pay.mdx

@@ -14,12 +14,17 @@ toc_max_heading_level: 4
 import TabItem from '@theme/TabItem'
 import Tabs from '@theme/Tabs'
 
-This tutorial demonstrates how to integrate Solana Pay with [MetaMask Embedded Wallets](/embedded-wallets) to create a seamless payment experience for your users.
-By combining Embedded Wallets' familiar web2-like social logins with Solana Pay's QR code functionality, you can enable users to make payments directly from their social login wallet.
+MetaMask Embedded Wallets enable users to log in with familiar web2 socials by using [Shamir's
+Secret Sharing](../../embedded-wallets/infrastructure/sss-architecture/) Multi-Party Computation (MPC) to ensure the 
+wallet key is distributed and non-custodial.
 
-As an overview, this integration allows users to:
+This tutorial demonstrates how to integrate Solana Pay with [MetaMask Embedded Wallets](/embedded-wallets) to create a 
+seamless payment experience for your users. By combining Embedded Wallets' familiar web2 social logins with Solana Pay's 
+QR code functionality, you can enable users to make payments directly from their social login wallets.
 
-- Log in using familiar web2 social providers (Google, Apple, etc.).
+MetaMask Embedded Wallets social login allows users to:
+
+- Log in using familiar web2 social providers (such as Google and Apple).
 - Generate Solana Pay QR codes for transactions.
 - Make payments using their embedded wallet.
 
@@ -37,44 +42,52 @@ This tutorial follows the implementation demonstrated in the following live stre
 </p>
 
 :::info
-A [complete implementation example](https://github.com/Web3Auth/web3auth-examples/tree/main/other/solana-pay-example) is available on GitHub.
-:::
 
-## Steps
+A [complete implementation example](https://github.com/Web3Auth/web3auth-examples/tree/main/other/solana-pay-example) is 
+available on GitHub.
+
+:::
 
-### 1. Set up the dashboard
+## Step 1: Set up the dashboard
 
-MetaMask Embedded Wallets enable users to log in with familiar web2 socials by using Shamir
-Secret Sharing (MPC) to ensure the wallet key is distributed and non-custodial.
 Follow these steps to set up and configure your Embedded Wallets (Web3Auth) dashboard:
 
 1. Sign up for a free account on the [Embedded Wallets dashboard](https://dashboard.web3auth.io/login).
 2. Create a new project.
 3. Copy your Client ID from the dashboard.
    This ID is crucial for initializing the SDK.
 4. Navigate to **Chains & Networks** and enable Solana, Solana Devnet, and Solana Testnet.
-   Ensure all the RPC URLs are configured.
+   Ensure all the [RPC URLs are configured](../../embedded-wallets/dashboard/chains-and-networks).
+
+:::tip
 
-See the [Embedded Wallets dashboard documentation](/embedded-wallets/dashboard) for more information.
+See the [Embedded Wallets dashboard documentation](../../embedded-wallets/dashboard) for more information.
 You can explore other dashboard features, including custom verifiers, whitelabeling, and analytics.
 
-### 2. Install dependencies
+:::
+
+## Step 2: Install dependencies
 
 Install the following dependencies in your project:
 
 ```bash npm2yarn
 npm install @solana/pay bignumber.js @solana/web3.js
 ```
 
-- `@solana/pay` is the core Solana Pay protocol library.
-- `bignumber.js` enables accurate handling of large numbers, especially when dealing with token amounts.
-- `@solana/web3.js` enables interacting with the Solana blockchain, such as fetching balances or constructing transactions.
+:::note
+
+- `@solana/pay`: The core Solana Pay protocol library.
+- `bignumber.js`: Enables accurate handling of large numbers, especially when dealing with token amounts.
+- `@solana/web3.js`: Enables interacting with the Solana blockchain, such as fetching balances or constructing 
+transactions.
+
+:::
 
-### 3. Integrate MetaMask Embedded Wallets in React
+## Step 3: Integrate MetaMask Embedded Wallets in React
 
 Use the `@web3auth/modal` SDK to integrate and manage Embedded Wallets in your React application.
 
-#### 3.1. Initialize the provider
+### 3.1. Initialize the provider
 
 Wrap your application components with a `Web3AuthProvider` to configure the SDK with your Client ID:
 
@@ -118,7 +131,7 @@ const web3AuthContextConfig: Web3AuthContextConfig = {
 export default web3AuthContextConfig
 ```
 
-#### 3.2. Access wallet information and fetch user balance
+### 3.2. Access wallet information and fetch user balance
 
 Access wallet information and user details using the [Solana hooks](/embedded-wallets/sdk/react/solana-hooks):
 
@@ -176,12 +189,12 @@ export function Balance() {
 }
 ```
 
-### 4. Integrate Solana Pay
+## Step 4: Integrate Solana Pay
 
 Solana Pay enables the generation of transaction requests, typically as QR codes, for direct payments from Solana wallets.
 Follow these steps to create and display Solana Pay QR codes for payments.
 
-#### 4.1. Import components
+### 4.1. Import components
 
 Import the necessary components from the installed libraries:
 
@@ -194,16 +207,16 @@ import { useSolanaWallet } from '@web3auth/modal/react/solana'
 // focus-end
 ```
 
-#### 4.2. Generate QR codes
+### 4.2. Generate QR codes
 
 The core of the Solana Pay integration involves creating a payment request URL and then rendering it as a QR code.
 First, define the following:
 
-- **Recipient and amount** - Define the `recipient` (a `PublicKey` of the merchant/receiver) and the
+- **Recipient and amount:** Define the `recipient` (a `PublicKey` of the merchant/receiver) and the
   `amount` (a `BigNumber` representing the payment value, for example, 0.001 SOL).
-- **Reference** - Generate a unique `reference` for the payment.
+- **Reference:** Generate a unique `reference` for the payment.
   This acts as a unique identifier for the transaction.
-- **Optional fields** - Include `label`, `message`, and `memo` for enhanced user experience.
+- **Optional fields:** Include `label`, `message`, and `memo` for enhanced user experience.
 
 The following is an example implementation of a Solana Pay QR code generator:
 
@@ -318,31 +331,28 @@ export function SolanaPay() {
 
 ### Development environment
 
-- **Devnet for testing** - Always develop and test on devnet or testnet.
+- **Devnet for testing:** Always develop and test on devnet or testnet.
   You can use the [Solana Faucet](https://faucet.solana.com/) to get test SOL for your new account.
-- **Environment variables** - Store your Client ID and other sensitive configuration in environment variables.
+- **Environment variables:** Store your Client ID and other sensitive configuration in environment variables.
 
 ### User experience
 
-- **User interface** - For better user experience, display the QR code within a modal or a dedicated
+- **User interface:** For better user experience, display the QR code within a modal or a dedicated
   confirmation page, providing clear messages to the user.
-- **Loading states** - Implement proper loading states while generating QR codes and processing transactions.
-- **Error handling** - Provide clear error messages when transactions fail or when the user's wallet doesn't have sufficient balance.
+- **Loading states:** Implement proper loading states while generating QR codes and processing transactions.
+- **Error handling:** Provide clear error messages when transactions fail or when the user's wallet doesn't have sufficient 
+balance.
 
 ### Production readiness
 
-- **Tracking payments** - Implement a server-side solution to track the unique payment `reference` and poll for transaction confirmation using websockets.
+- **Tracking payments:** Implement a server-side solution to track the unique payment `reference` and poll for transaction 
+confirmation using websockets.
   This allows you to update your application's state and perform reconciliation in your database.
-- **Production RPCs** - For scalable production usage, use dedicated Solana RPC services from providers like [MetaMask](/services/reference/solana), as public RPCs may have rate limits.
-- **Security** - Validate all payment parameters server-side before processing transactions.
-
-## Conclusion
-
-This tutorial demonstrates how to integrate MetaMask Embedded Wallets with Solana Pay to create a seamless payment experience.
-By combining Embedded Wallets' familiar web2 social logins with Solana Pay's QR code functionality, you can enable users to make payments directly from their social login wallets.
+- **Production RPCs:** For scalable production usage, use dedicated Solana RPC services from providers like 
+[MetaMask](/services/reference/solana), as public RPCs may have rate limits.
+- **Security:** Validate all payment parameters server-side before processing transactions.
 
-The integration provides a smooth, familiar experience for your users while leveraging the power of
-the Solana blockchain for fast and low-cost transactions.
+## Next steps
 
-To learn more about Embedded Wallets, see the [Web SDK documentation](/embedded-wallets/sdk/react) and the
+- To learn more about Embedded Wallets, see the [Web SDK documentation](/embedded-wallets/sdk/react) and the
 [Solana Pay integration example](https://github.com/Web3Auth/web3auth-examples/blob/main/other/solana-pay-example).