Fixes

Author: yashovardhan

embedded-wallets/connect-blockchain/evm/README.mdx

@@ -22,6 +22,9 @@ With Embedded Wallets v11 onward, chains are already added to the dashboard. You
 
 ::::
 
-The Embedded Wallets Web SDK(`@web3auth/modal`) from v11 onward does not need any additional setup on the code side for blockchain connections. All of it is handled on the dashboard. We can use any chain from the extensive list of predefined chains and add more if we need.
+The Embedded Wallets Web SDK (`@web3auth/modal`) does not need any additional setup on the code side for standard EVM connections. Chains enabled in the dashboard are loaded automatically
+at runtime.
+
+You can still pass a `chains` array in `web3AuthOptions` when you need custom RPC endpoints, local testing overrides, or patterns shown in SDK demo apps. Prefer [dashboard chain configuration](/embedded-wallets/dashboard/chains-and-networks/) for production.
 
 ![Chains on Dashboard](https://i.ibb.co/4nCD2GTJ/chains.gif)

embedded-wallets/migration-guides/web.mdx

@@ -543,22 +543,25 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 )
 ```
 
-Optional React-only config (from the v11 quick-start example):
+Optional React-only config (from the [v11 React quick start](https://github.com/Web3Auth/web3auth-examples/tree/main/quick-starts/react-quick-start)):
 
 ```tsx title="web3authContext.tsx"
-import { CONNECTOR_INITIAL_AUTHENTICATION_MODE, WEB3AUTH_NETWORK } from '@web3auth/modal'
+import { WEB3AUTH_NETWORK } from '@web3auth/modal'
 import { type Web3AuthContextConfig } from '@web3auth/modal/react'
 
 const web3AuthContextConfig: Web3AuthContextConfig = {
   web3AuthOptions: {
     clientId: import.meta.env.VITE_WEB3AUTH_CLIENT_ID,
     web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
-    initialAuthenticationMode: CONNECTOR_INITIAL_AUTHENTICATION_MODE.CONNECT_AND_SIGN,
     authBuildEnv: 'production',
   },
 }
 ```
 
+You can also set `initialAuthenticationMode` (import `CONNECTOR_INITIAL_AUTHENTICATION_MODE` from
+`@web3auth/modal`) when you need a specific connector auth flow; the official quick start does not
+require it.
+
 </TabItem>
 <TabItem value="vue" label="Vue">
 

embedded-wallets/sdk/_common/_web3auth-options.mdx

@@ -27,18 +27,18 @@ import Tabs from '@theme/Tabs'
 
 <TabItem value="advanced">
 
-| Parameter                   | Description                                                                                              |
-| --------------------------- | -------------------------------------------------------------------------------------------------------- |
-| `chains?`                   | (Fetched automatically from dashboard) Multiple chain configurations, only provided chains will be used. |
-| `uiConfig?`                 | (Fetched automatically from dashboard) Config for configuring UI display properties.                     |
-| `modalConfig?`              | Helps you customize the modal UI elements and authentication methods.                                    |
-| `accountAbstractionConfig?` | (Fetched automatically from Dashboard) Account abstraction config for your chain namespace.              |
-| `useAAWithExternalWallet?`  | (Fetched automatically from Dashboard) Whether to use AA with external wallet.                           |
-| `walletServicesConfig?`     | (Fetched automatically from Dashboard) Configure any parameter related to Wallet Services plugin         |
-| `ssr?`                      | Whether to enable SSR mode.                                                                              |
-| `mfaSettings?`              | MFA settings for the auth connector.                                                                     |
-| `mfaLevel?`                 | MFA level for the auth connector.                                                                        |
-| `privateKeyProvider?`       | Private key provider for your chain namespace.                                                           |
+| Parameter                   | Description                                                                                                                                                                                 |
+| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `chains?`                   | Optional in-code chain list. By default, chains are fetched from the [dashboard](/embedded-wallets/dashboard/chains-and-networks/). Pass `chains` only for custom RPC, demos, or overrides. |
+| `uiConfig?`                 | (Fetched automatically from dashboard) Config for configuring UI display properties.                                                                                                        |
+| `modalConfig?`              | Helps you customize the modal UI elements and authentication methods.                                                                                                                       |
+| `accountAbstractionConfig?` | (Fetched automatically from Dashboard) Account abstraction config for your chain namespace.                                                                                                 |
+| `useAAWithExternalWallet?`  | (Fetched automatically from Dashboard) Whether to use AA with external wallet.                                                                                                              |
+| `walletServicesConfig?`     | (Fetched automatically from Dashboard) Configure any parameter related to Wallet Services plugin                                                                                            |
+| `ssr?`                      | Whether to enable SSR mode.                                                                                                                                                                 |
+| `mfaSettings?`              | MFA settings for the auth connector.                                                                                                                                                        |
+| `mfaLevel?`                 | MFA level for the auth connector.                                                                                                                                                           |
+| `privateKeyProvider?`       | Private key provider for your chain namespace.                                                                                                                                              |
 
 </TabItem>
 

embedded-wallets/sdk/js/README.mdx

@@ -4,8 +4,6 @@ sidebar_label: Get started
 description: 'Embedded Wallets Web SDK (formerly Web3Auth Plug and Play)'
 ---
 
-import ExampleCards from '@theme/ExampleCards'
-import { webExamples, QUICK_START } from '@site/src/utils/example-maps'
 import TabItem from '@theme/TabItem'
 import Tabs from '@theme/Tabs'
 import SdkTroubleshootingIntro from '../_common/_sdk-troubleshooting-intro.mdx'

embedded-wallets/sdk/js/events.mdx

@@ -1,7 +1,7 @@
 ---
 title: Embedded Wallets events and status
 sidebar_label: SDK events
-description: '@web3auth/no-modal Native Account Abstraction | Embedded Wallets'
+description: '@web3auth/modal SDK events and connection lifecycle | Embedded Wallets'
 ---
 
 import Tabs from '@theme/Tabs'

embedded-wallets/sdk/react-native/README.mdx

@@ -4,8 +4,6 @@ sidebar_label: Get started
 description: 'MetaMask Embedded Wallets SDK for React Native | Web3Auth Plug and Play for React Native'
 ---
 
-import ExampleCards from '@theme/ExampleCards'
-import { webExamples, QUICK_START } from '@site/src/utils/example-maps'
 import TabItem from '@theme/TabItem'
 import Tabs from '@theme/Tabs'
 import SdkTroubleshootingIntro from '../_common/_sdk-troubleshooting-intro.mdx'

embedded-wallets/sdk/react/README.mdx

@@ -4,19 +4,24 @@ sidebar_label: Get started
 description: 'MetaMask Embedded Wallets SDK for React | Web3Auth Plug and Play for React'
 ---
 
-import ExampleCards from '@theme/ExampleCards'
-import { webExamples, QUICK_START } from '@site/src/utils/example-maps'
 import TabItem from '@theme/TabItem'
 import Tabs from '@theme/Tabs'
 import SdkTroubleshootingIntro from '../_common/_sdk-troubleshooting-intro.mdx'
 
 ## Overview
 
-MetaMask Embedded Wallets SDK (formerly Web3Auth Plug and Play) provides a seamless authentication experience for React applications with social logins, external wallets, and more. Our React Hooks simplifies how you connect users to their preferred wallets and manage authentication state.
+MetaMask Embedded Wallets SDK (formerly Web3Auth Plug and Play) provides a seamless authentication
+experience for React applications with social logins, external wallets, and more. React hooks
+simplify how you connect users to their preferred wallets and manage authentication state.
+
+For a complete working project, see the
+[React quick start example](https://github.com/Web3Auth/web3auth-examples/tree/main/quick-starts/react-quick-start)
+on GitHub.
 
 ## Requirements
 
 - This is a frontend SDK and must be used in a browser environment.
+- Node.js 20+ and npm (or yarn).
 - Basic knowledge of JavaScript and React.
 
 ## Prerequisites
@@ -31,55 +36,96 @@ See the [dashboard setup](../../dashboard/README.mdx) guide to learn more.
 
 ## Installation
 
-Install the Web3Auth Modal SDK using npm or yarn:
+Install the Web3Auth Modal SDK and Wagmi dependencies:
 
 ```bash npm2yarn
-npm install --save @web3auth/modal
+npm install --save @web3auth/modal wagmi@3 @tanstack/react-query
 ```
 
 ### 1. Configuration
 
-Create a configuration file for Web3Auth. This file will contain your Web3Auth Client ID and Network details from the [Embedded Wallets dashboard](https://developer.metamask.io/).
+Create a configuration file with your Client ID and Sapphire network from the
+[Embedded Wallets dashboard](https://developer.metamask.io/).
+
+Use **Sapphire Devnet** for local development (`http://localhost`). Sapphire Mainnet does not allow
+localhost origins.
 
 ```tsx title="web3authContext.tsx"
 import { type Web3AuthContextConfig } from '@web3auth/modal/react'
-import { WEB3AUTH_NETWORK, type Web3AuthOptions } from '@web3auth/modal'
+import { WEB3AUTH_NETWORK } from '@web3auth/modal'
 
-const web3AuthOptions: Web3AuthOptions = {
-  clientId: 'YOUR_WEB3AUTH_CLIENT_ID', // Pass your Web3Auth Client ID, ideally using an environment variable // Get your Client ID from MetaMask Developer Dashboard
-  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET
-}
+const clientId = import.meta.env.VITE_WEB3AUTH_CLIENT_ID // or your env prefix
 
 const web3AuthContextConfig: Web3AuthContextConfig = {
-  web3AuthOptions,
+  web3AuthOptions: {
+    clientId,
+    web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET, // use SAPPHIRE_MAINNET in production
+    authBuildEnv: 'production',
+  },
 }
 
 export default web3AuthContextConfig
 ```
 
-### 2. Setup Web3Auth provider
+### 2. Set up providers
 
-In your main entry file (generally `index.tsx` or `main.tsx`), import the `Web3AuthProvider` component and wrap your application with it:
+In your main entry file (`main.tsx` or `index.tsx`), wrap your app with `Web3AuthProvider`,
+`QueryClientProvider`, and the Embedded Wallets `WagmiProvider`:
 
 ```tsx title="main.tsx"
 import './index.css'
 
 import ReactDOM from 'react-dom/client'
-// focus-start
 import { Web3AuthProvider } from '@web3auth/modal/react'
+import { WagmiProvider } from '@web3auth/modal/react/wagmi'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import web3AuthContextConfig from './web3authContext'
-// focus-end
 import App from './App'
 
+const queryClient = new QueryClient()
+
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  // focus-start
   <Web3AuthProvider config={web3AuthContextConfig}>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <WagmiProvider>
+        <App />
+      </WagmiProvider>
+    </QueryClientProvider>
   </Web3AuthProvider>
-  // focus-end
 )
 ```
 
+### 3. Connect users
+
+Use [`useWeb3AuthConnect`](./hooks/useWeb3AuthConnect.mdx) to open the pre-built modal or connect to a
+specific login method:
+
+```tsx title="App.tsx"
+import { useWeb3AuthConnect, useWeb3AuthDisconnect } from '@web3auth/modal/react'
+import { useAccount } from 'wagmi'
+
+function App() {
+  const { connect, loading, isConnected, error } = useWeb3AuthConnect()
+  const { disconnect } = useWeb3AuthDisconnect()
+  const { address } = useAccount()
+
+  if (!isConnected) {
+    return (
+      <button onClick={() => connect()} disabled={loading}>
+        {loading ? 'Connecting...' : 'Login'}
+      </button>
+    )
+  }
+
+  return (
+    <div>
+      <p>{address}</p>
+      <button onClick={() => disconnect()}>Log out</button>
+    </div>
+  )
+}
+```
+
 ## Advanced configuration
 
 The Web3Auth Modal SDK offers a rich set of advanced configuration options:
@@ -108,15 +154,14 @@ See the [advanced configuration](./advanced/README.mdx) section to learn more ab
 
 ```ts
 import { type Web3AuthContextConfig } from '@web3auth/modal/react'
-import { WEB3AUTH_NETWORK, type Web3AuthOptions } from '@web3auth/modal'
-
-const web3AuthOptions: Web3AuthOptions = {
-  clientId: 'YOUR_WEB3AUTH_CLIENT_ID', // Pass your Web3Auth Client ID, ideally using an environment variable
-  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET
-}
+import { WEB3AUTH_NETWORK } from '@web3auth/modal'
 
 const web3AuthContextConfig: Web3AuthContextConfig = {
-  web3AuthOptions,
+  web3AuthOptions: {
+    clientId: import.meta.env.VITE_WEB3AUTH_CLIENT_ID,
+    web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
+    authBuildEnv: 'production',
+  },
 }
 ```
 
@@ -134,8 +179,9 @@ import {
 } from '@web3auth/modal'
 
 const web3AuthOptions: Web3AuthOptions = {
-  clientId: 'YOUR_WEB3AUTH_CLIENT_ID', // Pass your Web3Auth Client ID, ideally using an environment variable
+  clientId: import.meta.env.VITE_WEB3AUTH_CLIENT_ID,
   web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+  authBuildEnv: 'production',
   modalConfig: {
     connectors: {
       [WALLET_CONNECTORS.AUTH]: {
@@ -179,18 +225,23 @@ const web3AuthContextConfig: Web3AuthContextConfig = {
 
 ## Blockchain integration
 
-Web3Auth is blockchain agnostic, enabling integration with any blockchain network. Out of the box, Web3Auth offers robust support for both **Solana** and **Ethereum**, each with dedicated React hooks.
+Web3Auth is blockchain agnostic, enabling integration with any blockchain network. Out of the box,
+Web3Auth offers robust support for both **Solana** and **Ethereum**, each with dedicated React hooks.
 
 ### Solana integration
 
-Solana hooks are included natively within the `@web3auth/modal` package. No additional setup is required—simply use the provided hooks to interact with Solana networks.
+Solana hooks are included natively within the `@web3auth/modal` package. Install
+[`@solana/kit`](https://www.npmjs.com/package/@solana/kit) and use hooks from
+`@web3auth/modal/react/solana`.
 
 For detailed usage and examples, see the [**Solana hooks**](./solana-hooks/README.mdx) section.
 
 ### Ethereum integration
 
-Ethereum hooks are provided through the popular `wagmi` library, which works seamlessly with Web3Auth. This allows you to leverage a wide range of Ethereum hooks for account management, transactions, and more.
+Ethereum wallet operations use [Wagmi](https://wagmi.sh/) hooks after the provider setup above.
+Configure EVM chains in the [Embedded Wallets dashboard](../../dashboard/chains-and-networks/); no
+in-app chain list is required for standard integrations.
 
-For implementation details and examples, refer to the [**Ethereum Hooks**](./ethereum-hooks.mdx) section.
+For implementation details and examples, refer to the [**Ethereum hooks**](./ethereum-hooks.mdx) section.
 
 <SdkTroubleshootingIntro />

embedded-wallets/sdk/react/hooks/useWeb3Auth.mdx

@@ -18,37 +18,49 @@ import { useWeb3Auth } from '@web3auth/modal/react'
 import { useWeb3Auth } from '@web3auth/modal/react'
 
 function App() {
-  const { web3Auth, isConnected, isInitializing, provider, status, initError } = useWeb3Auth()
+  const { web3Auth, isConnected, isInitializing, connection, status, initError } = useWeb3Auth()
 
   if (isConnected) {
-    // User is connected
-    console.log('Connected with provider:', provider)
+    console.log('Connected via:', connection?.connectorName)
   }
   if (isInitializing) {
-    // Web3Auth is initializing
     console.log('Web3Auth is initializing')
   }
-  if (provider) {
-    // Web3Auth provider is connected
-    console.log('Web3Auth provider is connected')
+  if (connection?.ethereumProvider) {
+    // Use for JSON-RPC edge cases; prefer Wagmi hooks for standard EVM flows
+    console.log('Ethereum provider available')
   }
   if (status) {
-    // Web3Auth status
     console.log('Web3Auth status:', status)
   }
   if (initError) {
-    // Web3Auth initialization error
     console.log('Web3Auth initialization error:', initError)
   }
 }
 ```
 
+:::info
+
+For EVM wallet operations, use [Wagmi hooks](../ethereum-hooks.mdx) (`useAccount`, `useBalance`,
+`useSendTransaction`) after setting up `WagmiProvider`.
+Use `connection.ethereumProvider` only for JSON-RPC methods Wagmi does not cover.
+See the [Web SDK v11 migration guide](/embedded-wallets/migration-guides/web#provider-api-changes-all-frameworks).
+
+:::
+
 ### Return type
 
 ```tsx
 import { type IUseWeb3Auth } from '@web3auth/modal/react'
 ```
 
+#### `connection`
+
+`{ ethereumProvider, solanaWallet, connectorName } | null`
+
+Active wallet connection after sign-in. `ethereumProvider` is an EIP-1193 provider for EVM;
+`solanaWallet` exposes Solana wallet utilities.
+
 #### `initError`
 
 `Error | null`
@@ -73,19 +85,13 @@ Whether Web3Auth has completed initialization.
 
 Whether Web3Auth is currently initializing.
 
-#### `provider`
-
-`IProvider | null`
-
-Connected provider from Web3Auth.
-
 #### `status`
 
 `string`
 
 Current status of the Web3Auth connection.
 
-#### `web3auth`
+#### `web3Auth`
 
 `Web3Auth`
 

embedded-wallets/sdk/vue/README.mdx

@@ -4,8 +4,6 @@ sidebar_label: Get started
 description: 'Embedded Wallets Vue SDK (formerly Web3Auth Plug and Play)'
 ---
 
-import ExampleCards from '@theme/ExampleCards'
-import { webExamples, QUICK_START } from '@site/src/utils/example-maps'
 import TabItem from '@theme/TabItem'
 import Tabs from '@theme/Tabs'
 import SdkTroubleshootingIntro from '../_common/_sdk-troubleshooting-intro.mdx'