Skip to content

Commit b8a963f

Browse files
ihsrahamihsraham
committed
removed chain config from v10 snippets
1 parent e61c24b commit b8a963f

1 file changed

Lines changed: 13 additions & 81 deletions

File tree

‎docs/migration-guides/modal-v9-to-v10.mdx‎

Lines changed: 13 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -340,22 +340,10 @@ Now (v10 unified `@web3auth/modal/react`):
340340

341341
```tsx title="v10 (Unified Modal SDK - React with Web3AuthProvider)"
342342
// src/Web3AuthProvider.tsx or your App's entry point
343-
import { Web3AuthProvider, WEB3AUTH_NETWORK, CHAIN_NAMESPACES } from "@web3auth/modal/react";
343+
import { Web3AuthProvider, WEB3AUTH_NETWORK } from "@web3auth/modal/react";
344344

345345
const clientId = "YOUR_CLIENT_ID";
346346

347-
// Define the chain configuration for the chain you want to connect to.
348-
// This is still needed for the Web3AuthProvider to establish initial context for a chain.
349-
const chainConfig = {
350-
chainNamespace: CHAIN_NAMESPACES.EVM, // Example for EVM
351-
chainId: "0xaa36a7", // Example: Sepolia Testnet
352-
rpcTarget: "https://rpc.ankr.com/eth_sepolia",
353-
displayName: "Sepolia Testnet",
354-
blockExplorerUrl: "https://sepolia.etherscan.io/",
355-
ticker: "ETH",
356-
tickerName: "Ethereum",
357-
};
358-
359347
function AppWithWeb3Auth() {
360348
return (
361349
<Web3AuthProvider
@@ -368,7 +356,6 @@ function AppWithWeb3Auth() {
368356
// mfaSettings: { /* ... */ } // Configure MFA factors here globally
369357
// accountAbstractionConfig: { /* ... */ } // If using Smart Accounts globally
370358
}}
371-
chainConfig={chainConfig} // Pass your primary chainConfig here
372359
>
373360
<YourAppComponent />
374361
</Web3AuthProvider>
@@ -382,7 +369,9 @@ Key changes for React:
382369
- The `Web3AuthProvider` handles SDK initialization automatically; you do not need to call `init()`
383370
or `initModal()`.
384371
- Pass `initParams` (with `clientId`, `web3AuthNetwork`, optional `modalConfig`, `mfaSettings`,
385-
`accountAbstractionConfig`, `useSFAKey`) and your primary `chainConfig` to `Web3AuthProvider`.
372+
`accountAbstractionConfig`, `useSFAKey`) to `Web3AuthProvider`.
373+
- The `chainConfig` prop is no longer passed to `Web3AuthProvider`; chain configurations are managed
374+
via the dashboard.
386375
- The `useCoreKitKey` parameter (boolean) in `initParams` is now `useSFAKey`.
387376
- Explicit `privateKeyProvider` is no longer passed for standard EVM chains.
388377

@@ -402,8 +391,7 @@ client-side code when initializing Web3Auth.
402391
2. **Remove `chainConfig` from Constructor/Options:** Delete `chainConfig` passed to the `Web3Auth`
403392
constructor or `Web3AuthProvider` options if it was for a standard chain now configurable on the
404393
dashboard.
405-
- _Exception for React_: You still pass a primary `chainConfig` to `Web3AuthProvider` to set the
406-
initial chain context for the hooks and provider instance it exposes.
394+
- All chain configurations are now managed via the Web3Auth Developer Dashboard.
407395
3. **Configure on Web3Auth Dashboard:**
408396
- Log in to the [Web3Auth Developer Dashboard](https://dashboard.web3auth.io/).
409397
- Navigate to your Project > "Chains".
@@ -449,7 +437,6 @@ const web3auth = new Web3Auth({
449437
// Client-side for React (Web3AuthProvider)
450438
<Web3AuthProvider
451439
initParams={{ clientId, web3AuthNetwork }}
452-
chainConfig={primaryChainConfig} // Sets initial context, but detailed configs are dashboard-driven
453440
>
454441
{/* ... */}
455442
</Web3AuthProvider>
@@ -965,10 +952,9 @@ React examples.**
965952
```
966953

967954
_Note: The `web3AuthContextConfig` in the example above refers to the configuration object you
968-
would define for `Web3AuthProvider`, typically containing `initParams` and `chainConfig` as
969-
shown in "Step 1. Update SDK Initialization" for React. If you pass `initParams` and
970-
`chainConfig` directly to `Web3AuthProvider` rather than through a separate config object,
971-
adjust accordingly._
955+
would define for `Web3AuthProvider`, typically containing `initParams` as shown in "Step 1.
956+
Update SDK Initialization" for React. If you pass `initParams` directly to `Web3AuthProvider`
957+
rather than through a separate config object, adjust accordingly._
972958

973959
**Usage Examples with Wagmi Hooks:**
974960

@@ -1039,62 +1025,8 @@ Ensure you are no longer using these APIs from v9:
10391025
This table summarizes the key changes when migrating from either v9 Modal or v9 No-Modal to the
10401026
unified v10 Modal SDK.
10411027

1042-
| Feature | v9 (`@web3auth/modal`) | v9 (`@web3auth/no-modal`) | v10 (Unified `@web3auth/modal`) |
1043-
| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
1044-
| **Primary SDK Package** | `@web3auth/modal` | `@web3auth/no-modal` | `@web3auth/modal` (handles both modal and direct/modal-less flows) |
1045-
| Installation | `npm i @web3auth/modal` | `npm i @web3auth/no-modal` | `npm i @web3auth/modal` |
1046-
| Deprecated Packages | `@web3auth/base`, `@web3auth/auth-adapter` (if used customly), `@web3auth/account-abstraction-provider`, `@web3auth/modal-react-hooks` | `@web3auth/base`, `@web3auth/auth-adapter`, `@web3auth/ethereum-provider`, `@web3auth/account-abstraction-provider`, `@web3auth/no-modal-react-hooks` | Remove all listed v9 packages, including `@web3auth/no-modal`, `@web3auth/modal-react-hooks`, and `@web3auth/no-modal-react-hooks`. |
1047-
| Initialization (non-React) | `new Web3Auth()`, `initModal()` | `new Web3AuthNoModal()`, `init()` | `new Web3Auth()`, `init()`. `modalConfig` in constructor. |
1048-
| Initialization (React) | `Web3AuthProvider` from `@web3auth/modal-react-hooks` with `config` prop (incl. `web3AuthOptions`, `adapters`). Some might have used class-based init in Context. | `Web3AuthProvider` from `@web3auth/no-modal-react-hooks` with `config` prop (incl. `web3AuthOptions`, `adapters`). | `Web3AuthProvider` from `@web3auth/modal/react`. Pass `initParams` (with `clientId`, `web3AuthNetwork`, etc.) and primary `chainConfig`. |
1049-
| Modal Display | `web3auth.connect()` | N/A (No Modal UI) | `connect()` (hook from `useWeb3AuthConnect`) triggers modal. Modal UI configured via `modalConfig` / Dashboard. For class-based: `web3auth.connect()`. |
1050-
| Direct Connection (No UI) | Possible with specific adapter configs (complex) | `web3auth.connectTo(connector, params)` | `web3auth.connectTo(connector, params)` (class) or `connectTo(connector, params)` (hook from `useWeb3AuthConnect`). Simplified params. |
1051-
| Chain Config (Client) | Optional for standard, required for custom in `chainConfig` | Required `chainConfig` & `privateKeyProvider` in constructor | ⛔️ Removed for standard chains (dashboard-driven). Primary `chainConfig` for React Provider context. Custom chains on dashboard. |
1052-
| Private Key Provider (Client) | Not typically passed directly for modal UI | Explicit `privateKeyProvider` in constructor | ⛔️ Not needed in constructor for standard chains. |
1053-
| Adapters (Client) | `OpenLoginAdapter` in `modalConfig`, or `configureAdapter` | `configureAdapter(new AuthAdapter(...))` | ⛔️ Removed. Logins configured on Dashboard. `authConnectionId` used in `connect`/`connectTo`. |
1054-
| Verifiers (Client) | `verifier`, `verifierSubIdentifier` in adapter/login configs | `verifier`, `verifierSubIdentifier` in adapter/login configs | ⛔️ Removed. Use `authConnectionId` (Auth Connection ID from Dashboard) and `groupedAuthConnectionId` in `connect`/`connect` params. |
1055-
| React Usage | Class-based or older hooks | Class-based or older hooks | ✅ Hooks only (`useWeb3AuthConnect`, etc.) from `@web3auth/modal/react`. |
1056-
| MFA Configuration | Via `AuthAdapter` settings | Via `AuthAdapter` settings | ✅ Global `mfaSettings` in SDK init (constructor/Provider options) OR per-connection `mfaLevel` in `connect`/`connectTo` params. |
1057-
| Smart Accounts | Separate `@web3auth/account-abstraction-provider` | Separate `@web3auth/account-abstraction-provider` | ✅ Dashboard-driven, optional `accountAbstractionConfig` in SDK init. Deprecated provider package. |
1058-
| SFA Key Retrieval | `useCoreKitKey: true` in constructor options | `useCoreKitKey: true` in constructor options | `useSFAKey: true` in constructor options (non-React) or `initParams` (React). (Breaking change from `useCoreKitKey`) |
1059-
1060-
---
1061-
1062-
## Verifying Your v10 Integration
1063-
1064-
After completing all the migration steps, it's crucial to thoroughly test your application to ensure
1065-
everything functions as expected. Here's a checklist:
1066-
1067-
- **Modal Display & UI (if using modal):** Ensure the Web3Auth Modal displays correctly with your
1068-
configured login methods.
1069-
- **Direct Connection Flows (if using `connectTo` for custom UI):** Verify that direct connections
1070-
to social providers or custom JWT authentications work as expected.
1071-
- **Login Methods:** Test every social login, email passwordless (if configured via OpenLogin on
1072-
dashboard), and custom JWT connection method you have configured on the Web3Auth Dashboard.
1073-
- **Account Consistency:** If you use features like `groupedAuthConnectionId` for account linking,
1074-
verify that logging in with different methods linked to the same identifier correctly resolves to
1075-
the same user account and private key.
1076-
- **Blockchain Provider:** Ensure `web3auth.provider` (for class-based usage) or the provider from
1077-
React hooks (`useWeb3AuthConnect` or `useWeb3Auth`) is available and correctly initialized for
1078-
your target chain(s).
1079-
- **Core Blockchain Operations:**
1080-
- Fetch user account address.
1081-
- Fetch account balance.
1082-
- Sign a message.
1083-
- Send a simple transaction.
1084-
- **MFA Functionality:** Test your configured MFA flows (`mfaLevel` and/or `mfaSettings`).
1085-
- **Smart Accounts (if applicable):**
1086-
- Verify that the Smart Account is deployed and functions as expected based on your dashboard and
1087-
client configurations.
1088-
- **Logout Functionality:** Ensure logout clears the session and provider correctly.
1089-
- **Session Management:** Test session persistence and restoration.
1090-
- **Error Handling:** Test common error scenarios.
1091-
1092-
---
1093-
1094-
## Further Reading
1095-
1096-
- [Web3Auth Documentation - PnP Modal SDK v10](https://web3auth.io/docs/sdk/pnp/web/modal) (Link to
1097-
be updated to final v10 docs page)
1098-
- [Web3Auth v10 Examples on GitHub](https://github.com/Web3Auth/web3auth-pnp-examples) (Ensure
1099-
examples are updated for v10)
1100-
- [Join the Community](https://web3auth.io/community)
1028+
| Feature | v9 (`@web3auth/modal`) | v9 (`@web3auth/no-modal`) | v10 (Unified `@web3auth/modal`) |
1029+
| ----------------------- | ----------------------- | -------------------------- | ------------------------------------------------------------------ |
1030+
| **Primary SDK Package** | `@web3auth/modal` | `@web3auth/no-modal` | `@web3auth/modal` (handles both modal and direct/modal-less flows) |
1031+
| Installation | `npm i @web3auth/modal` | `npm i @web3auth/no-modal` | `npm i @web3auth/modal` |
1032+
| Deprecated Packages | ` |

0 commit comments

Comments
 (0)