Skip to content

Commit 6cbe519

Browse files
ihsrahamihsraham
committed
Tweaked SC example
1 parent 1e5a8c4 commit 6cbe519

2 files changed

Lines changed: 248 additions & 27 deletions

File tree

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

Lines changed: 108 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -345,10 +345,114 @@ const { signMessage } = useSignMessage();
345345

346346
## 7. Smart Accounts setup (optional)
347347

348-
Smart Accounts are now fully configurable via the Web3Auth Dashboard and optionally overridden
349-
through `accountAbstractionConfig` in the `Web3Auth` constructor options (for class-based SDK or if
350-
customizing for React provider) or within the `options` prop of the `Web3AuthProvider` (for React
351-
apps).
348+
Previously, configuring the adapter required installing the `@web3auth/account-abstraction-provider`
349+
package and using the `AccountAbstractionProvider` to set up the bundler, paymaster, and Smart
350+
Account Provider.
351+
352+
<Tabs>
353+
<TabItem value="v9" label="v9 (before)">
354+
355+
```ts
356+
import {
357+
AccountAbstractionProvider,
358+
SafeSmartAccount,
359+
} from "@web3auth/account-abstraction-provider";
360+
import { Web3Auth, WEB3AUTH_NETWORK } from "@web3auth/modal"; // Assuming privateKeyProvider is also imported or available
361+
362+
// Assume privateKeyProvider is initialized appropriately, e.g.:
363+
// import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
364+
// const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { /* ... */ } });
365+
366+
// Assume pimlicoAPIKey is defined
367+
// const pimlicoAPIKey = "YOUR_PIMLICO_API_KEY";
368+
369+
const chainConfig = {
370+
// Chain config (example placeholder, replace with actual v9 config)
371+
chainId: "0x1", // Example: Ethereum Mainnet
372+
rpcTarget: "https://rpc.ankr.com/eth",
373+
displayName: "Ethereum Mainnet",
374+
blockExplorerUrl: "https://etherscan.io/",
375+
ticker: "ETH",
376+
tickerName: "Ethereum",
377+
};
378+
379+
const accountAbstractionProvider = new AccountAbstractionProvider({
380+
config: {
381+
chainConfig,
382+
smartAccountInit: new SafeSmartAccount(),
383+
bundlerConfig: {
384+
// Get the pimlico API Key from dashboard.pimlico.io
385+
url: `https://api.pimlico.io/v2/11155111/rpc?apikey=${"YOUR_PIMLICO_API_KEY_VARIABLE"}`,
386+
},
387+
},
388+
});
389+
390+
const web3auth = new Web3Auth({
391+
clientId: "YOUR_WEB3AUTH_CLIENT_ID",
392+
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
393+
privateKeyProvider, // This should be an initialized PrivateKeyProvider
394+
accountAbstractionProvider,
395+
});
396+
```
397+
398+
</TabItem>
399+
<TabItem value="v10" label="v10 (after)">
400+
401+
In v10, the `@web3auth/account-abstraction-provider` has been deprecated. You can now enable Smart
402+
Accounts and configure the bundler and paymaster directly from the Web3Auth Dashboard. See
403+
[Smart Accounts dashboard configuration](https://web3auth.io/docs/product-infrastructure/account-abstraction/dashboard-setup)
404+
to learn more.
405+
406+
```
407+
// Add Dashboard image (Placeholder for visual guide)
408+
```
409+
410+
If you want to override the Smart Account provider, bundler, paymaster, or paymaster context, you
411+
can now pass the custom configuration directly to `Web3AuthOptions`.
412+
413+
```ts
414+
import { WEB3AUTH_NETWORK, Web3AuthOptions } from "@web3auth/modal";
415+
416+
const web3AuthOptions: Web3AuthOptions = {
417+
clientId: "YOUR_CLIENT_ID",
418+
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
419+
// highlight-start
420+
accountAbstractionConfig: {
421+
smartAccountType: "metamask",
422+
chains: [
423+
{
424+
chainId: "0x1",
425+
bundlerConfig: {
426+
url: "YOUR_BUNDLER_URL",
427+
// This is just an example of how you can configure the paymaster context.
428+
// Please refer to the documentation of the paymaster you are using
429+
// to understand the required parameters.
430+
paymasterContext: {
431+
token: "SUPPORTED_TOKEN_CONTRACT_ADDRESS",
432+
sponsorshipPolicyId: "sp_my_policy_id",
433+
},
434+
},
435+
paymasterConfig: {
436+
url: "YOUR_PAYMASTER_URL",
437+
},
438+
},
439+
],
440+
},
441+
// highlight-end
442+
};
443+
444+
// Initialize Web3Auth with these options
445+
// const web3auth = new Web3Auth(web3AuthOptions);
446+
// await web3auth.initModal();
447+
// await web3auth.connect();
448+
```
449+
450+
> ✅ **Simplified Setup:** Smart Account configuration is now primarily dashboard-driven, with
451+
> optional client-side overrides for advanced cases, deprecating the need for the separate
452+
> `@web3auth/account-abstraction-provider` package.
453+
454+
</TabItem>
455+
</Tabs>
352456

353457
---
354458

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

Lines changed: 140 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
22
title: Migrating to Web3Auth PnP No Modal SDK v10
33
description:
4-
"Learn how to upgrade your Web3Auth PnP No Modal SDK from v9 to v10 with minimal changes and
5-
cleaner architecture."
4+
Learn how to upgrade your Web3Auth PnP No Modal SDK from v9 to v10 with minimal changes and
5+
cleaner architecture.
66
sidebar_label: v9 to v10
77
---
88

@@ -387,48 +387,165 @@ from `web3auth.provider`.
387387

388388
## 6. Smart Accounts setup (optional)
389389

390-
Smart Accounts are now fully configurable via the Web3Auth Dashboard and optionally overridden
391-
through the `accountAbstraction` parameter in the SDK options.
390+
Previously, configuring the adapter required installing the `@web3auth/account-abstraction-provider`
391+
package and using the `AccountAbstractionProvider` to set up the bundler, paymaster, and Smart
392+
Account Provider.
392393

393394
<Tabs>
394395
<TabItem value="v9" label="v9 (before)">
395396

396397
```ts
397-
// Example: v9 might involve initializing AccountAbstractionProvider
398-
import { AccountAbstractionProvider } from "@web3auth/account-abstraction-provider";
398+
import {
399+
AccountAbstractionProvider,
400+
SafeSmartAccount,
401+
} from "@web3auth/account-abstraction-provider";
402+
import { Web3AuthNoModal, WEB3AUTH_NETWORK } from "@web3auth/no-modal"; // Assuming privateKeyProvider is also imported or available
399403

400-
// const web3auth = new Web3AuthNoModal({ /* ... */ });
401-
// await web3auth.init();
404+
// Assume privateKeyProvider is initialized appropriately, e.g.:
405+
// import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
406+
// const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { /* ... */ } });
407+
408+
// Assume pimlicoAPIKey is defined
409+
// const pimlicoAPIKey = "YOUR_PIMLICO_API_KEY";
410+
411+
// 1. Initialize Web3AuthNoModal first
412+
const web3auth = new Web3AuthNoModal({
413+
clientId: "YOUR_WEB3AUTH_CLIENT_ID",
414+
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
415+
privateKeyProvider, // This should be an initialized PrivateKeyProvider
416+
});
417+
await web3auth.init();
418+
// Example: Connect to a login provider
419+
// await web3auth.connectTo(WALLET_CONNECTORS.OPENLOGIN, { /* loginProvider specific details */ });
420+
421+
// 2. Then initialize AccountAbstractionProvider with the provider from Web3AuthNoModal
422+
const chainConfig = {
423+
// Chain config (example placeholder, replace with actual v9 config)
424+
chainId: "0x1", // Example: Ethereum Mainnet
425+
rpcTarget: "https://rpc.ankr.com/eth",
426+
displayName: "Ethereum Mainnet",
427+
blockExplorerUrl: "https://etherscan.io/",
428+
ticker: "ETH",
429+
tickerName: "Ethereum",
430+
};
402431

403-
// const aaProvider = new AccountAbstractionProvider(web3auth.provider, { /* config */ });
404-
// await aaProvider.init();
405-
// const smartAccountProvider = aaProvider.provider;
432+
if (web3auth.provider) {
433+
const accountAbstractionProvider = new AccountAbstractionProvider({
434+
config: {
435+
chainConfig,
436+
smartAccountInit: new SafeSmartAccount(),
437+
bundlerConfig: {
438+
// Get the pimlico API Key from dashboard.pimlico.io
439+
url: `https://api.pimlico.io/v2/11155111/rpc?apikey=${"YOUR_PIMLICO_API_KEY_VARIABLE"}`,
440+
},
441+
},
442+
});
443+
await accountAbstractionProvider.init(web3auth.provider);
444+
// const smartAccountProvider = accountAbstractionProvider.provider;
445+
} else {
446+
console.error("Web3Auth provider not available to initialize Smart Account provider.");
447+
}
406448
```
407449

408450
</TabItem>
409451
<TabItem value="v10" label="v10 (after)">
410452

453+
In v10, the `@web3auth/account-abstraction-provider` has been deprecated. You can now enable Smart
454+
Accounts and configure the bundler and paymaster directly from the Web3Auth Dashboard. See
455+
[Smart Accounts dashboard configuration](https://web3auth.io/docs/product-infrastructure/account-abstraction/dashboard-setup)
456+
to learn more.
457+
458+
```
459+
// Add Dashboard image (Placeholder for visual guide)
460+
```
461+
462+
If you want to override the Smart Account provider, bundler, paymaster, or paymaster context, you
463+
can now pass the custom configuration directly to `Web3AuthNoModalOptions` (for non-React) or
464+
`Web3AuthProvider` options (for React).
465+
466+
**For non-React apps (e.g., VanillaJS, Angular):**
467+
411468
```ts
412-
// For non-React apps (e.g., VanillaJS, Angular):
413-
const web3auth = new Web3AuthNoModal({
469+
import { WEB3AUTH_NETWORK, Web3AuthNoModalOptions, Web3AuthNoModal } from "@web3auth/no-modal";
470+
471+
const web3AuthNoModalOptions: Web3AuthNoModalOptions = {
414472
clientId: "YOUR_CLIENT_ID",
415-
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
416-
accountAbstraction: {
417-
/* Optional: override dashboard settings */
473+
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
474+
// highlight-start
475+
accountAbstractionConfig: {
476+
smartAccountType: "metamask",
477+
chains: [
478+
{
479+
chainId: "0x1",
480+
bundlerConfig: {
481+
url: "YOUR_BUNDLER_URL",
482+
// This is just an example of how you can configure the paymaster context.
483+
// Please refer to the documentation of the paymaster you are using
484+
// to understand the required parameters.
485+
paymasterContext: {
486+
token: "SUPPORTED_TOKEN_CONTRACT_ADDRESS",
487+
sponsorshipPolicyId: "sp_my_policy_id",
488+
},
489+
},
490+
paymasterConfig: {
491+
url: "YOUR_PAYMASTER_URL",
492+
},
493+
},
494+
],
418495
},
419-
});
496+
// highlight-end
497+
};
420498

421-
// For React apps, pass it to the Web3AuthProvider options:
422-
const web3AuthOptions = {
499+
// Initialize Web3AuthNoModal with these options
500+
// const web3auth = new Web3AuthNoModal(web3AuthNoModalOptions);
501+
// await web3auth.init();
502+
// await web3auth.connectTo(...);
503+
```
504+
505+
**For React apps:**
506+
507+
```tsx
508+
import { Web3AuthProvider, WEB3AUTH_NETWORK } from "@web3auth/no-modal/react";
509+
// Define Web3AuthProviderOptions if not already defined/imported
510+
import type { Web3AuthProviderOptions } from "@web3auth/no-modal/react";
511+
512+
const web3AuthProviderOptions: Web3AuthProviderOptions = {
423513
clientId: "YOUR_CLIENT_ID",
424-
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
425-
accountAbstraction: {
426-
/* Optional: override dashboard settings */
514+
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
515+
// highlight-start
516+
accountAbstractionConfig: {
517+
smartAccountType: "metamask",
518+
chains: [
519+
{
520+
chainId: "0x1",
521+
bundlerConfig: {
522+
url: "YOUR_BUNDLER_URL",
523+
// This is just an example of how you can configure the paymaster context.
524+
// Please refer to the documentation of the paymaster you are using
525+
// to understand the required parameters.
526+
paymasterContext: {
527+
token: "SUPPORTED_TOKEN_CONTRACT_ADDRESS",
528+
sponsorshipPolicyId: "sp_my_policy_id",
529+
},
530+
},
531+
paymasterConfig: {
532+
url: "YOUR_PAYMASTER_URL",
533+
},
534+
},
535+
],
427536
},
537+
// highlight-end
428538
};
539+
540+
// In your App or context provider:
541+
// <Web3AuthProvider options={web3AuthProviderOptions}>
542+
// <YourApp />
543+
// </Web3AuthProvider>
429544
```
430545

431-
> ✅ The `@web3auth/account-abstraction-provider` package is deprecated.
546+
> ✅ **Simplified Setup:** Smart Account configuration is now primarily dashboard-driven, with
547+
> optional client-side overrides for advanced cases, deprecating the need for the separate
548+
> `@web3auth/account-abstraction-provider` package.
432549
433550
</TabItem>
434551
</Tabs>

0 commit comments

Comments
 (0)