diff --git a/.cursor/rules/product-embedded-wallets.mdc b/.cursor/rules/product-embedded-wallets.mdc index de21012b048..3dafdc071f3 100644 --- a/.cursor/rules/product-embedded-wallets.mdc +++ b/.cursor/rules/product-embedded-wallets.mdc @@ -25,7 +25,6 @@ Embedded Wallets uses domain-oriented folders rather than strict Diataxis catego | Root (`README.mdx`) | Product overview and positioning | | `sdk/` | Per-platform integration docs (React, Vue, JS, Node, Android, iOS, React Native, Flutter, Unity, Unreal) | | `authentication/` | Auth methods by type (social, basic, custom) | -| `features/` | Product capabilities (MPC, smart accounts, funding, NFT minting, session management) | | `dashboard/` | Developer console and project configuration | | `connect-blockchain/`| Chain-specific connection guides (EVM, Solana, other) | | `infrastructure/` | Architecture and security (MPC, SSS, nodes) | diff --git a/embedded-wallets/README.mdx b/embedded-wallets/README.mdx index 7304ba0ee75..20dd7e3df8a 100644 --- a/embedded-wallets/README.mdx +++ b/embedded-wallets/README.mdx @@ -1,5 +1,5 @@ --- -title: What are Embedded Wallets? +title: MetaMask Embedded Wallets image: 'img/metamaskog.jpg' sidebar_label: About description: 'What are MetaMask Embedded Wallets? Pluggable wallet infrastructure for Web3. OAuth logins, multiple platforms, non-custodial wallets.' @@ -30,8 +30,8 @@ import Head from '@docusaurus/Head' MetaMask Embedded Wallets (formerly Web3Auth) provides a pluggable embedded wallet infrastructure to -simplify Web3 wallet integration and user onboarding. It supports OAuth-based logins and multiple -platforms, allowing your users to access Web3 applications through familiar authentication methods. +simplify web3 wallet integration and user onboarding. +It supports OAuth-based sign-ins and multiple platforms, allowing your users to access web3 applications through familiar authentication methods. MetaMask Embedded Wallets reduces traditional wallet management overhead by removing the need to manage private keys and seed phrases directly. @@ -59,30 +59,31 @@ Users get a smoother onboarding experience while retaining control of non-custod Help users get started quickly with sign-in methods they already use: -- Sign in with Google, Twitter, GitHub, and other popular social accounts. -- Sign in with email, SMS, and authenticator apps without passwords. -- Bring your own auth system while using MetaMask Embedded Wallets infrastructure. +- Sign in with [Google, X, GitHub, and other popular social accounts](./authentication/#oauth-and-social-login). +- Use [passwordless sign-in](./authentication/basic-logins/email-passwordless) with email or SMS one-time passcodes. +- [Bring your own authentication system](./authentication/#jwt-based-authentication) while using Embedded Wallets infrastructure. ### Security Enterprise-level protection for your users' digital assets: -- Users maintain 100% control of their non-custodial wallets. -- A distributed architecture prevents single points of failure. -- Multiple recovery options support account recovery flows. +- Users maintain full control of their non-custodial wallets. +- A [distributed key management infrastructure](./infrastructure/README.mdx) prevents single points of failure. +- Multiple [recovery options](./authentication/user-account-dashboard#recovery-and-mfa) support account recovery flows. ### Developer experience -Integrate MetaMask Embedded Wallets into your app with minimal setup: +Integrate MetaMask Embedded Wallets into your dapp with minimal setup: -- Use a drop-in solution that works with your existing auth system. +- Use a drop-in solution that works with your existing authentication system. - Avoid complex migrations or infrastructure changes. -- Customize the look and feel. -- Integrate on web, mobile, and gaming platforms. +- [Customize the look and feel](./dashboard/customization) from the dashboard. +- Integrate on [web, mobile, and gaming platforms](./get-started.mdx). +- Mint NFTs and run gasless airdrops with the built-in NFT minting API (contact [sales](https://calendly.com/elishamm/sales) for access). ### User experience -Provide a low-friction path to Web3: +Provide a low-friction path to web3: - Help users get started quickly. - Avoid requiring users to understand blockchain concepts up front. @@ -93,23 +94,26 @@ MetaMask Embedded Wallets provides wallet infrastructure for dapps and blockchai documentation explains how it works, including how it generates cryptographic key providers for each user and application. -## How do Embedded Wallets work? +## How does MetaMask Embedded Wallets work? -See **[Architecture](./architecture.mdx)** for the high-level system design, SDK and integration diagram, and wallet management infrastructure. +See [Architecture](./architecture.mdx) for the high-level system design, SDK and integration diagram, and wallet management infrastructure. ## Is MetaMask Embedded Wallets a wallet? -MetaMask Embedded Wallets is not a wallet, but rather a wallet infrastructure that can be integrated into any application. It provides customizable authentication flows for dapps and blockchain wallets, solving user onboarding and key management challenges. +MetaMask Embedded Wallets is not a wallet, but rather a wallet infrastructure that can be integrated into any application. +It provides customizable authentication flows for dapps and blockchain wallets, solving user onboarding and key management challenges. -Unlike traditional wallets that can limit user experience, MetaMask Embedded Wallets enables developers to create tailored flows without requiring users to understand complex blockchain concepts. It provides a cryptographic key provider that can be used to build custom wallets or integrate with existing ones through Web3Auth's external wallet adapters. +Unlike traditional wallets that can limit user experience, MetaMask Embedded Wallets enables developers to create tailored flows without requiring users to understand complex blockchain concepts. +It includes a cryptographic key provider that can be used to build custom wallets or integrate with existing ones through external wallet adapters. ## Is MetaMask Embedded Wallets scalable? -The MetaMask Embedded Wallets infrastructure is built to handle millions of users. Our architecture provides: +The MetaMask Embedded Wallets infrastructure is built to handle millions of users. +Its architecture provides: -- Global availability across multiple regions with consistent low-latency performance worldwide -- Automatic horizontal scaling that adjusts capacity based on demand, eliminating bottlenecks and ensuring uninterrupted service -- Enterprise-grade infrastructure running on Kubernetes orchestration for maximum reliability and performance +- Global availability across multiple regions with consistent low-latency performance worldwide. +- Automatic horizontal scaling that adjusts capacity based on demand, eliminating bottlenecks and ensuring uninterrupted service. +- Enterprise-grade infrastructure running on Kubernetes orchestration for maximum reliability and performance. :::tip[Start] diff --git a/embedded-wallets/authentication/basic-logins/external-wallets.mdx b/embedded-wallets/authentication/basic-logins/external-wallets.mdx index a48a9cfd38c..9b6390517d1 100644 --- a/embedded-wallets/authentication/basic-logins/external-wallets.mdx +++ b/embedded-wallets/authentication/basic-logins/external-wallets.mdx @@ -1,23 +1,51 @@ --- -title: External wallets login with Embedded Wallets +title: External wallets sign-in with Embedded Wallets sidebar_label: External wallets -description: 'External Wallets Login with Embedded Wallets | Embedded Wallets' +description: 'Sign users in to your dapp with external EVM and Solana wallets using the Embedded Wallets external wallet aggregator.' --- import ExternalWalletsToggle from '@site/static/img/embedded-wallets/w3a-dashboard/external-wallets-toggle.png' import ExternalWalletsSelectWallets from '@site/static/img/embedded-wallets/w3a-dashboard/external-wallets-select-wallets.png' -Web3Auth provides built-in support for email and SMS-based authentication, allowing users to log in seamlessly using a one-time passcode (OTP) sent to their email address or phone number. This form of passwordless authentication simplifies the onboarding process, removes friction for end users, and expands accessibility—especially in regions where social login options may be limited. +Embedded Wallets provides an external wallet aggregator that unifies wallet discovery, +connection, and session management for EVM and Solana wallets. +Use it to sign users in to your dapp with MetaMask or any other supported wallet through a single +integration. -## Enable external wallets - -:::success Enable on dashboard +:::info Demo -To enable this feature, developers must first activate **External Wallets** from the **Social Connections** section in the [dashboard](https://dashboard.web3auth.io). +Try the wallet aggregator in the [live demo](https://demo.web3auth.io). ::: -
+## Features + +The wallet aggregator has the following features: + +- **Cross-ecosystem support:** Discover and connect to EVM and Solana wallets from one flow. +- **Standards-native:** It detects EVM wallets through + [EIP-6963 (Multi Injected Provider Discovery)](https://eips.ethereum.org/EIPS/eip-6963) and Solana + wallets through the + [Solana Wallet Standard](https://github.com/wallet-standard/wallet-standard). +- **Library compatibility:** Use it with ethers.js, viem, Wagmi, and `@solana/web3.js`. +- **Framework hooks:** It supports React hooks and Vue composables to read connection state and trigger + flows. +- **Dashboard control:** Manage which wallets appear, alongside social sign-ins, from the + [Embedded Wallets dashboard](https://dashboard.web3auth.io). + +## Choose a sign-in flow + +You can offer external wallets on their own or alongside social sign-ins. Configure the flow that fits +your dapp from the [Embedded Wallets dashboard](https://dashboard.web3auth.io): + +- **Wallet aggregator only**, for users who already have a wallet. +- **External wallets with social logins**, presented side by side in one flow. + +## Enable external wallets + +Go to the **Social Connections** section in the [dashboard](https://dashboard.web3auth.io), and enable **External Wallets**: + +
External Wallets Toggle
-To choose which external wallets to enable, click the **Settings** icon next to the **External Wallets** toggle in the Social Connections section of the [dashboard](https://dashboard.web3auth.io). +Select the **Settings** icon next to the **External Wallets** toggle, and choose which external wallets to enable. +You can choose from wide range of wallets: -:::note - -MetamMask Wallet is enabled by default and cannot be disabled. - -::: - -A wide range of wallets are available to choose from. - -
+
External Wallets Select Wallets
+ +:::note + +MetaMask is enabled by default and cannot be disabled. + +::: diff --git a/embedded-wallets/authentication/id-token.mdx b/embedded-wallets/authentication/id-token.mdx index 4f0dcfbdeea..2b28398b23c 100644 --- a/embedded-wallets/authentication/id-token.mdx +++ b/embedded-wallets/authentication/id-token.mdx @@ -1,25 +1,42 @@ --- -title: Embedded Wallets identity token -sidebar_label: Web3Auth identity token +title: Identity token image: 'img/metamaskog.jpg' -description: 'Identity Token | Embedded Wallets' +description: 'Use the Embedded Wallets identity token (JWT) for server-side verification of user identity and wallet ownership.' --- import TabItem from '@theme/TabItem' import Tabs from '@theme/Tabs' -The **Identity Token** (ID Token) issued by Embedded Wallets is a JSON Web Token (JWT) that contains verified identity claims about the authenticated user. This token is signed using Embedded Wallets' private key and cannot be spoofed, allowing developers to trust the identity information presented by the client. +The identity token (ID token) issued by Embedded Wallets is a JSON Web Token (JWT) that contains verified identity claims about the authenticated user. +This token is signed using Embedded Wallets' private key and cannot be spoofed, allowing developers to trust the identity information presented by the client. Once a user successfully authenticates via Embedded Wallets, the platform issues an ID token which can then be used to authorize client-to-server requests or verify ownership of associated wallet addresses. -#### Purpose of the ID token +The ID token enables: -- **User identity verification**: Ensures that the client user is indeed who they claim to be. -- **Secure backend requests**: The token should be passed in API requests to validate sessions server-side. +- **User identity verification**: Ensures that the client user is who they claim to be. +- **Secure backend requests**: The token is passed in API requests to validate sessions server-side. - **Wallet ownership proof**: Includes public wallet keys to prove a user owns a particular wallet. When making a backend request from the frontend, the client must include this ID token to ensure the backend can verify the authenticated user. +## Server-side verification + +Server-side verification uses the ID token to authenticate users on your backend by validating the ownership of a wallet address. +The flow has three steps: + +1. **Retrieve the ID token on the client.** After the user authenticates with Embedded Wallets, the SDK issues a JWT signed with the `ES256` algorithm. + Send this token to your backend with each authenticated request. +2. **Verify the token on your backend.** Validate the JWT signature against the appropriate JWKS endpoint or your project's verification key, and check that the wallet claim matches the identity the client is asserting. +3. **Authenticate the user.** Once the token is verified, treat the wallet address (or public key) inside it as a trusted user identifier and continue with your application logic. + +The contents of the token differ based on how the user signed in: + +- **Social logins:** The token includes a `public_key` linked to the user's wallet. +- **External wallets:** The token includes the wallet `address` instead of the public key. + +The sections below describe the token format, how to retrieve it on the client, and how to verify it on your backend. + ## ID token format Embedded Wallets (previously Web3Auth) issues tokens as ES256-signed JWTs containing various identity claims about the user. diff --git a/embedded-wallets/authentication/user-account-dashboard.mdx b/embedded-wallets/authentication/user-account-dashboard.mdx new file mode 100644 index 00000000000..7126a8545c0 --- /dev/null +++ b/embedded-wallets/authentication/user-account-dashboard.mdx @@ -0,0 +1,83 @@ +--- +title: User account dashboard +description: 'Let your users manage recovery, multi-factor authentication, devices, and connected apps for their MetaMask Embedded Wallets account.' +--- + +The Embedded Wallets account dashboard gives your users one place to manage their account across every dapp that uses MetaMask Embedded Wallets. +Users can configure recovery and multi-factor authentication (MFA), review and revoke connected dapps, and manage trusted devices. + +:::info Try it + +Try the live [account dashboard](https://account.web3auth.io). + +::: + +![Unified recovery management screenshot](/img/embedded-wallets/account-dashboard/unified-recovery-management.jpg) + +## Recovery and MFA + +Users can: + +- Set up and manage recovery factors: password, social recovery, authenticator app, recovery phrase, and passkeys. +- Unhide and copy their backup phrase. +- Resend the recovery phrase to a registered email address. +- Add or remove MFA factors at any time. + +![Account dashboard overview screenshot](/img/embedded-wallets/account-dashboard/account-dashboard-overview.jpg) + +## Connected dapps and sessions + +Users can see which dapps are connected to their account and stay in control of access: + +- View all dapps authorized to use the account. +- Revoke a dapp's access instantly. +- Sign out of active sessions as needed. + +## Devices + +Users can view and manage every device connected to their account: + +- Add trusted devices. +- Remove unused or unauthorized devices. +- Set the current device as the default for added convenience. + +![Device overview screenshot](/img/embedded-wallets/account-dashboard/device-overview.jpg) + +## Security status + +A visual indicator shows the overall security status of the account, prompting users to set up additional recovery factors for stronger protection. + +![Security insights screenshot](/img/embedded-wallets/account-dashboard/security-insights.jpg) + +## Use the dashboard in your dapp + +Users access the dashboard after authenticating with any dapp that uses Embedded Wallets. + +:::tip + +For a smoother experience, add a **Manage account** or **Security** link to [account.web3auth.io](https://account.web3auth.io) in your dapp's settings or profile screen. + +::: + +Encourage your users to: + +1. Set up at least three recovery factors. +2. Regularly review connected dapps and sessions. +3. Periodically review devices and enable an authenticator app. + +## FAQ + +### Can users access the account dashboard without logging in? + +No. +Users must authenticate before they can access the dashboard. + +### What recovery factors are supported? + +The account dashboard supports the following recovery factors: + +- Social recovery +- Recovery phrase +- Password +- Authenticator app +- Passkeys diff --git a/embedded-wallets/authentication/wallet-pregeneration.mdx b/embedded-wallets/authentication/wallet-pregeneration.mdx new file mode 100644 index 00000000000..80c777de200 --- /dev/null +++ b/embedded-wallets/authentication/wallet-pregeneration.mdx @@ -0,0 +1,54 @@ +--- +title: Wallet pregeneration +description: 'Pregenerate Embedded Wallets and smart accounts for your users before they sign in, so wallets are ready on first login.' +--- + +import BrowserOnly from '@docusaurus/BrowserOnly' +import PregenerateWallet from '@site/src/components/PregenerateWallet' +import PregenrateSmartAccount from '@site/src/components/PregenrateSmartAccount' + +Wallet pregeneration creates an embedded wallet for a user before they sign in. +Call the API from your backend with a user identifier (such as an email), and Embedded Wallets returns the wallet address that the user receives on their first sign-in. + +Pregenerated wallets unlock several patterns: + +- **Onboarding without immediate sign-in.** Assign wallets during invitation or sign-up so users can engage with your dapp + before completing OAuth or other authentication flows. +- **Prefunded wallets.** Send tokens, NFTs, or rewards to a user's wallet address ahead of time so assets are waiting at first sign-in. + This pattern fits airdrops, welcome bonuses, and in-game items. +- **Deferred authentication.** Defer the full sign-in flow until the user is ready for their first onchain transaction. + +:::note Plan requirement + +Wallet pregeneration is a paid feature. +Use it for free on Sapphire Devnet; production use requires the [Scale Plan](https://web3auth.io/pricing.html). + +::: + +:::warning + +The pregeneration API returns Core Kit / SFA key wallet addresses. +To use these addresses with the Embedded Wallets SDKs, set the `useCoreKitKey` or `useSFAKey` flag. + +For more context, see how [keys can change between products](../troubleshooting/different-private-key.mdx#product). + +::: + +## Pregenerate an EOA wallet + +Use the pregeneration API to create an externally owned account (EOA) for a user. +Call it after the user verifies their email, or independently using any unique identifier. + +1. **Identify the user.** Determine the unique identifier (such as an email) you'll use as the `verifierId`. +2. **Call the API.** Submit the user's identifier along with the **Verifier Name**, **Web3Auth Network**, and **Client ID** from your project dashboard. +3. **Receive the wallet address.** Use the returned address. + The wallet is ready for the user on first sign-in. + +{() => } + +## Pregenerate a smart account + +The same API also pregenerates ERC-4337 smart accounts. +The flow is identical to EOA pregeneration; only the returned address differs. + +{() => } diff --git a/embedded-wallets/dashboard/customization.mdx b/embedded-wallets/dashboard/customization.mdx index 2e2041c78c8..507b584ab17 100644 --- a/embedded-wallets/dashboard/customization.mdx +++ b/embedded-wallets/dashboard/customization.mdx @@ -8,15 +8,34 @@ description: 'Customize branding and login flow in Web3Auth Dashboard | Embedded import CustomizationBranding from '@site/static/img/embedded-wallets/w3a-dashboard/customization-branding.png' import CustomizationLoginModal from '@site/static/img/embedded-wallets/w3a-dashboard/customization-login-modal.png' +Embedded Wallets includes a prebuilt UI for authentication and wallet management that you can tailor through the Embedded Wallets dashboard. +Theme the sign-in modal to your brand, localize text for your audience, and fine-tune the user journey. + +:::info Plan requirements + +Access to certain customization features is gated by your pricing plan: + +- Default sign-in UI: **Base Plan** +- Customization and whitelabeling of the sign-in UI: **Growth Plan** +- Embedded Wallet UI: **Scale Plan** + +All features are available for free on Sapphire Devnet for testing. + +::: + ## Branding -The branding page under the customization section of the Embedded Wallets dashboard allows developers to personalize the visual identity of their application across multiple user interfaces. This includes the login screens, Multi-Factor Authentication (MFA) screens, wallet UI, and login modals. +The **Branding** page under the **Customization** section of the Embedded Wallets dashboard allows you to personalize +the visual identity of your dapp across multiple user interfaces. +This includes the sign-in screens, multi-factor authentication (MFA) screens, wallet UI, and sign-in modals. -Effective branding ensures a seamless and recognizable user experience, helping users feel confident that they are interacting with your application—even when interacting with Web3Auth-hosted interfaces. +Effective branding ensures a seamless and recognizable user experience, helping users feel confident that they are interacting with your dapp, +even when interacting with Embedded Wallets hosted interfaces. :::note -All changes made within the branding page can be previewed in real-time. However, to reflect updates in production, developers must click the **Save & Publish** button after making changes. +All changes made within the branding page can be previewed in real time. +However, to reflect updates in production, you must select the **Save & Publish** button after making changes. ::: @@ -28,27 +47,33 @@ All changes made within the branding page can be previewed in real-time. However />
-### Branding options +You can customize the following: -#### Add brand logo +### Add brand logo -Upload a logo to personalize the user interface and email templates. For optimal performance and compatibility, it is recommended to use a .png file. The logo appears across login flows, wallet views, and email communications. +Upload a logo to personalize the user interface and email templates. +For optimal performance and compatibility, we recommend using a PNG file. +The logo appears across sign-in flows, wallet views, and email communications. -#### Use logo as loader +### Use logo as loader -Developers have the option to display the uploaded logo as the loading spinner across the Web3Auth login flow. This small detail enhances brand consistency and gives users a familiar visual cue during authentication. +Display the uploaded logo as the loading spinner across the Embedded Wallets sign-in flow. +This detail enhances brand consistency and gives users a familiar visual cue during authentication. -#### Custom terms and conditions/privacy policy +### Custom terms of service and privacy policy -Link to your application's terms of service and/or privacy policy. These links will be displayed during user onboarding and consent flows, ensuring legal compliance and improving transparency. +Link to your dapps's terms of service and privacy policy. +These links will be displayed during user onboarding and consent flows, ensuring legal compliance and improving transparency. -#### Application name +### Application name -The name defined here will be used across system-generated communication, including the subject lines of email templates. Ensure that the application name clearly represents your project or organization. +Define a name to be used across system-generated communication, including the subject lines of email templates. +Ensure that the application name clearly represents your project or organization. -#### Default language +### Default language -Select the default localization for all user-facing Web3Auth components. Supported languages include: +Select the default language for all user-facing Embedded Wallets components. +Supported languages include: - English - Japanese @@ -61,19 +86,28 @@ Select the default localization for all user-facing Web3Auth components. Support - Dutch - Turkish -This setting ensures that your application's authentication flow is accessible and intuitive for users across different regions. +This setting ensures that your dapp's authentication flow is accessible and intuitive for users across different regions. + +:::tip Contribute translations + +Locales are open source. +Contribute or extend translations in the Embedded Wallets [locales repository](https://github.com/Web3Auth/web3auth-locales) to include them in the next release. + +::: ### Theme and colors -The Theme and Colors section allows developers to synchronize the aesthetic of the Web3Auth interfaces with the branding and design system of their application. +The **Theme and Colors** section allows you to synchronize the aesthetic of the Embedded Wallets interfaces with the branding and design system of your dapp. #### Select mode -Choose between Light, Dark, or Auto mode. When Auto is selected, the interface adapts to the user's system theme preference automatically. This ensures a consistent and user-friendly visual experience, regardless of the device or OS settings. +Choose between **Light**, **Dark**, or **Auto** mode. +When **Auto** is selected, the interface adapts to the user's system theme preference automatically. +This ensures a consistent and user-friendly visual experience, regardless of the device or OS settings. #### Primary color -Defines the primary brand color used across interactive elements such as: +Define the primary brand color used across interactive elements such as: - Buttons - Hyperlinks @@ -84,16 +118,17 @@ Defines the primary brand color used across interactive elements such as: #### On primary color -Specifies the color applied to text and icons that appear on top of primary color backgrounds (such as button labels or iconography). This ensures sufficient contrast for readability and accessibility. +Specify the color applied to text and icons that appear on top of primary color backgrounds (such as button labels or iconography). +This ensures sufficient contrast for readability and accessibility. :::tip - Choose color combinations that meet accessibility guidelines (such as [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/)) to provide an inclusive experience for all users. ::: -## Login modal +## Sign-in modal -The login modal page within the customization section of the Embedded Wallets dashboard provides developers with granular control over the appearance and behavior of the Web3Auth login flow. +The **Login Modal** page under the **Customization** section of the dashboard provides you with granular control over +the appearance and behavior of the Embedded Wallets sign-in flow.
+You can customize the following: + ### Design -The design section offers layout and styling options to customize how the login modal is presented to users. +The **Design** section offers layout and styling options to customize how the sign-in modal is presented to users. -#### Login modal appearance +#### Sign-in modal appearance -Developers can choose between two display modes for the login interface: +Choose between two display modes for the sign-in interface: -- **Embedded widget**: The login UI is embedded directly within the application's layout. This option is ideal for single-page applications or flows that require a fully integrated experience. -- **Modal widget**: The login interface opens as a pop-up modal overlay. This provides a more traditional Web3 wallet experience, where authentication occurs in a floating layer over the existing content. +- **Embedded widget**: The sign-in UI is embedded directly within the dapp's layout. + This option is ideal for single-page dapps or flows that require a fully integrated experience. +- **Modal widget**: The sign-in interface opens as a pop-up modal overlay. + This provides a more traditional web3 wallet experience, where authentication occurs in a floating layer over the existing content. #### Logo alignment -Configure how the application logo is aligned within the login modal: +Configure how the dapp logo is aligned within the sign-in modal: - **Center-aligned**: Displays the logo at the top center, suitable for balanced layouts. -- **Left-aligned**: Positions the logo to the top-left, often preferred for enterprise or dashboard-style applications. +- **Left-aligned**: Positions the logo to the top-left, often preferred for enterprise or dashboard-style dapps. #### Border radius -Adjust the corner curvature of the modal interface: - -- Small, medium, or large radius options allow for stylistic variations that better match your app's design system. +Adjust the corner curvature of the modal interface. +Small, medium, or large radius options allow for stylistic variations that better match your dapp's design system. #### Border radius type @@ -135,35 +173,45 @@ Refine the shape of buttons and input fields within the modal by selecting: - **Rounded**: Gently curved corners for a subtle aesthetic. - **Square**: Sharp 90° corners for a more technical or minimalist look. -These design customizations allow developers to ensure the login experience feels native to the application, enhancing user trust and engagement. +These design customizations ensure the sign-in experience feels native to the dapp, enhancing user trust and engagement. ### Authentication reorder -The Authentication section provides flexibility in how login options are presented within the modal. +The **Authentication** section provides flexibility in how sign-in options are presented within the modal. -#### Arrange login order +#### Arrange sign-in order -When multiple login methods (such as, social, email/phone, external wallets) are available, developers can define the order in which these options appear: +When multiple sign-in methods (such as social, email/phone, external wallets) are available, define the order in which these options appear: -- Drag and drop the login methods to rearrange their position. -- Order determines the priority and placement of login options shown to users during authentication. +- Drag and drop the sign-in methods to rearrange their position. +- Order determines the priority and placement of sign-in options shown to users during authentication. :::note -This customization improves user experience by surfacing the most relevant login methods first—such as, placing a company-preferred SSO or social login provider at the top. +This customization improves user experience by surfacing the most relevant sign-in methods first. +For example, you can place a company-preferred SSO or social sign-in provider at the top. ::: ### External wallets -The external wallet settings let you configure how third-party wallets—such as MetaMask or any wallet connected through WalletConnect—are displayed in your application. +The **External Wallets** section let you configure how third-party wallets (like MetaMask or any wallet connected through WalletConnect) +are displayed in your dapp. #### Show installed external wallets -Enable this to automatically detect and display any compatible wallets already installed in the user's browser or device (such as MetaMask). This improves onboarding by surfacing options users are already familiar with. +Automatically detect and display any compatible wallets already installed in the user's browser or device (like MetaMask). +This improves onboarding by surfacing options users are already familiar with. #### Select number of external wallets -Choose how many external wallet options are displayed at once. Developers can limit or expand this list based on the target user base and the types of wallets they're likely to use. +Choose how many external wallet options are displayed at once. +Limit or expand this list based on the target user base and the types of wallets they're likely to use. These settings ensure wallet integrations are both comprehensive and context-aware, adapting to the environment and user preferences for seamless onboarding. + +## Headless mode + +Prefer to skip the prebuilt UI entirely? +Implement your own screens and flows while using the Embedded Wallets SDKs under the hood. +Headless mode gives you full control over the UX while retaining authentication, key management, and wallet functionality. diff --git a/embedded-wallets/features/external-wallets.mdx b/embedded-wallets/features/external-wallets.mdx deleted file mode 100644 index 670cdb104fa..00000000000 --- a/embedded-wallets/features/external-wallets.mdx +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: External wallet aggregator -image: 'img/metamaskog.jpg' -description: 'A complete, cross-ecosystem wallet aggregation experience built into the Embedded Wallets SDK.' ---- - -The MetaMask Embedded Wallets SDK provides one of the most complete wallet aggregators on the market. It unifies EVM and Solana wallet discovery, connection, and session management into a single, production‑ready layer you can drop into any app. - -:::info demo - -Looking for a quick preview? See the [Demo](https://demo.web3auth.io). - -::: - -## Highlights - -- **Cross‑ecosystem:** EVM and Solana in a single flow. -- **Standards‑native:** EIP‑6963 (EVM) and Solana Wallet Standard. -- **Works with your stack:** `ethers`, `viem`, `wagmi`, `@solana/web3.js`. -- **First‑class developer experience:** Hooks and composables for React/Vue. -- **Central control:** Manage everything in the [Embedded Wallets dashboard](https://dashboard.web3auth.io). - -![Wallet Discovery](/img/wallet-discovery.png) _A familiar, unified wallet selection experience for users._ - -## Customize flow within the dashboard - -- **Wallet aggregator only:** Drop‑in discovery, connection, and session state. -- **With social logins:** Offer socials and external wallets side‑by‑side in one flow. - -![Dashboard Wallet Toggle](/img/embedded-wallets/w3a-dashboard/external-wallets-toggle.png) _Toggle social logins and external wallets visibility._ - -![Dashboard Wallet Selector](/img/embedded-wallets/w3a-dashboard/external-wallets-select-wallets.png) _Toggle and manage supported wallets._ diff --git a/embedded-wallets/features/mpc.mdx b/embedded-wallets/features/mpc.mdx deleted file mode 100644 index 86836928db5..00000000000 --- a/embedded-wallets/features/mpc.mdx +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Multi-Party Computation -sidebar_label: Multi-party computation -description: 'Multi-Party Computation | MetaMask Embedded Wallets' ---- - -import KeyManagementDark from '@site/static/img/embedded-wallets/flow-diagrams/key-management-dark.png' -import KeyManagementLight from '@site/static/img/embedded-wallets/flow-diagrams/key-management-light.png' - -Multi-Party Computation (MPC) powers MetaMask Embedded Wallets' non-custodial key management, enabling secure access and signing without exposing a full private key. - -## Understanding MPC in MetaMask Embedded Wallets - -MetaMask Embedded Wallets utilizes threshold cryptography, a principle of MPC, to ensure that a user can access their private key or generate transaction signatures only if they meet a specified threshold - typically 2 out of n key shares. - -### Design goals - -- **Seamless user experience:** MetaMask Embedded Wallets aims to provide a frictionless non-custodial wallet experience. -- **Broad compatibility:** Ensures integration with existing authentication methods and blockchain ecosystems. -- **Global performance & scalability:** Designed to meet the expansive demands of the Web3 market efficiently. - -### 2-of-3 setup - -1. **Authentication share:** Derived from the user's chosen login method (for example, social login such as Google). -2. **Device share:** Stored on-device, protected by OS security/biometrics. -3. **Backup/2FA share:** User-controlled recovery using a high-entropy secret. - -### Implementation variants - -1. **Shamir Secret Sharing (SSS):** Reconstructs the key when the threshold is met. -2. **Threshold Signature Scheme (TSS):** Creates partial signatures; no key reconstruction. - - - - - This diagram describes the relationship between the Embedded Wallet SDK and integrating application - - -Both methods adhere to the core concept of threshold-based security but differ in their approach to wallet management and signature generation. - -## Wallet management infrastructure - -The wallet management infrastructure distributes key shares so the full private key is never stored or exposed. The authentication share is generated by the Embedded Wallets Network using a 5/9 consensus, keeping wallets non-custodial. - -## Next steps - -This section is an overview of MPC in MetaMask Embedded Wallets. For a more in-depth understanding, see: - -- [How Embedded Wallets Work](../README.mdx) -- [Wallet Management and Security of our Infrastructure](/embedded-wallets/infrastructure/) diff --git a/embedded-wallets/features/nft-minting.mdx b/embedded-wallets/features/nft-minting.mdx deleted file mode 100644 index ffbaa7f3008..00000000000 --- a/embedded-wallets/features/nft-minting.mdx +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: NFT Minting -image: 'img/metamaskog.jpg' -description: 'NFT Minting | Embedded Wallets' -sidebar_label: NFT minting ---- - -Embedded Wallets NFT Minting Service facilitates NFT airdrops and minting, giving you granular control over the process. The NFT Minting API is designed to facilitate the minting process for specified NFTs, supporting large-scale, gasless minting via our advanced batch minting infrastructure. This API is ideal for scenarios such as Airdrops, free mints, and situations where you prefer to manage fiat payments on your own. - -:::info - -Checkout our [Demo](https://demo.web3auth.io) to see it in action. - -::: - -## Key features - -- **Control over fiat payments:** Manage fiat payments independently to suit your project's needs. -- **Custom authorization requirements:** Implement additional security measures, such as allowlisting addresses that are authorized to mint NFTs. -- **Webhook notifications:** Register webhook endpoints to receive real-time updates on transaction status. -- **Gas fees covered:** Embedded Wallets can handle all gas fees associated with the minting process, ensuring a cost-effective solution. - -![NFT Minting](/img/nft-minting.svg) - -:::info - -The NFT Services support both Externally Owned Accounts (EOA) and Account Abstraction (AA) accounts powered by Embedded Wallets' native account abstraction. - -Additionally, it supports both EVM and Solana accounts, providing a versatile solution for various blockchain environments. - -::: - -## How it works - -To initiate the minting process, provide the API with the necessary contract details, token ID, and recipient wallet address. The Embedded Wallets infrastructure will take care of the rest, ensuring a seamless and efficient minting experience. Web3Auth supports ERC-721 and ERC-1155 smart contracts across all EVM-compatible networks. - -## Next steps - -- Contact our [Business Team](https://calendly.com/elishamm/sales) for more information on how to access this feature. diff --git a/embedded-wallets/features/server-side-verification.mdx b/embedded-wallets/features/server-side-verification.mdx deleted file mode 100644 index 16a4740d6ea..00000000000 --- a/embedded-wallets/features/server-side-verification.mdx +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Server-Side Verification -sidebar_label: Server-side verification -description: 'Server-Side Verification | Embedded Wallets' ---- - -import TabItem from '@theme/TabItem' -import Tabs from '@theme/Tabs' -import Tiles from '@theme/Tiles' - -Server-side verification enables developers to securely authenticate users on the backend by validating the ownership of a wallet address. This process involves the use of a `JSON Web Token (JWT)` issued upon user authentication, which contains claims about the end user, including proof of ownership over a wallet public address. - -Upon a user's successful connection of their wallet, Web3Auth generates a `JWT`, signed with a private key using the `ES256` algorithm, that is unique to your application. This token serves as a verifiable credential that you can use to authenticate the user on your backend. - -## Implementing server-side verification - -To implement server-side verification, follow these 3 steps: - -### Step 1. Retrieve the `JWT` (`idToken`) - -When a user logs in through Web3Auth, a `JWT` can be generated to prove that the user owns the wallet, and you can verify it on your backend server. - -**Different Flows for Different Wallets:** - -- **Social logins**: These tokens include a public key linked to the user's wallet. -- **External wallets**: These tokens include the wallet address instead of the public key. - -### Step 2. Verify the `JWT` - -Use the public key/address provided to verify the `JWT`'s authenticity. This step confirms that the token is valid and the information it contains about the user can be trusted. - -### Step 3. Authenticate the user - -Based on the verified claims within the `JWT`, including wallet address ownership, authenticate the user in your backend system. - -## Next steps - -See the [Identity Token](/embedded-wallets/authentication/id-token) documentation to learn more about the `JWT` and how to verify it. diff --git a/embedded-wallets/features/session-management.mdx b/embedded-wallets/features/session-management.mdx deleted file mode 100644 index 91d0ff81415..00000000000 --- a/embedded-wallets/features/session-management.mdx +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Session Management -sidebar_label: Session management -description: 'Session Management | Embedded Wallets' ---- - -SDKs provide session management to minimize repeated logins, enhancing user experience by maintaining login state for a specified duration. This seamless experience offers several advantages, including: - -- **User experience:** Reduces login frequency for a smoother experience. -- **Efficiency:** Session restoration is quick, occurring in milliseconds. -- **Integration:** Easy to implement with minimal impact on user flow. - -### Session key - -Upon login, a unique session key is generated. The user state is then encrypted with this session key and stored on the Web3Auth metadata server. - -### Secure storage - -Session keys are stored securely in the client's environment (for example, browser local storage, Android encrypted shared preferences, or iOS keychain services). - -### Restoration - -1. **Retrieve key:** SDK retrieves the session key from secure storage. -2. **Server communication:** SDK requests user state restoration from the metadata server. -3. **Decryption:** Encrypted user state is decrypted with the session key. -4. **Fallback:** If no active session, user proceeds with standard login. diff --git a/embedded-wallets/features/smart-accounts.mdx b/embedded-wallets/features/smart-accounts.mdx deleted file mode 100644 index 6661a05cb6b..00000000000 --- a/embedded-wallets/features/smart-accounts.mdx +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Native Smart Accounts -sidebar_label: Smart accounts -description: 'Smart Accounts | Embedded Wallets' ---- - -Create and manage smart accounts for your users with just a single toggle on the [Web3Auth Dashboard](https://dashboard.web3auth.io), using our native smart accounts. - -With smart accounts, you can offer enhanced control and programmability, such as: - -- **Gas sponsorship:** Cover transaction fees, or allow users to pay for their own transactions using ERC-20 tokens. - -- **Batch transactions:** Perform multiple transactions in a single call. - -- **Automated transactions:** Allow users to automate actions, like swapping ETH to USDT when ETH hits $4,000. - -- **Set spending limits:** Allow users to set tailored spending limits. - -- **Automatic paymaster and bundler generation:** No need to manage paymasters and bundlers manually. Powered by Infura & Pimlico, the URLs are automatically generated for you. - -## Getting started - -Our native smart accounts powered by [MetaMask Smart Accounts kit](/smart-accounts-kit) simplifies set up, enabling you to create and manage smart accounts effortlessly with popular libraries like Viem, Ethers, and Wagmi — no need for third-party packages to achieve ERC-4337 compatibility. - -We are working closely with different partners in the account abstraction ecosystem and will provide support for evolving standards like EIP-7702, ERC-7579 (Modular Accounts), and ERC-7555 (account discovery) as they reach finalization. - -:::note - -To [Get Started](/embedded-wallets/sdk/react/advanced/smart-accounts/), select your preferred smart account provider, configure your bundler client, and integrate your paymaster. - -::: - -## Next steps - -For a quick configuration tailored to your needs, explore our detailed guides: - -- [Guide to Sending Gasless Transactions](/tutorials/sending-gasless-transaction) -- [Guide to Sending Transactions with an ERC-20 Paymaster](/tutorials/erc20-paymaster) diff --git a/embedded-wallets/features/user-account-dashboard.mdx b/embedded-wallets/features/user-account-dashboard.mdx deleted file mode 100644 index 08b1397f605..00000000000 --- a/embedded-wallets/features/user-account-dashboard.mdx +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: User Account Dashboard -sidebar_label: User account dashboard -description: 'Manage recovery, devices, security, and connected apps for MetaMask Embedded Wallets' ---- - -The Embedded Wallets Account dashboard gives your users one place to manage their Embedded Wallet account across apps. They can configure recovery and Multi-Factor Authentication (MFA), review and revoke connected apps, and manage trusted devices. - -:::info Try now - -[https://account.web3auth.io](https://account.web3auth.io) - -::: - -![Unified Recovery Management Screenshot](/img/embedded-wallets/account-dashboard/unified-recovery-management.jpg) - -### Recovery and MFA - -Users can: - -- Set up and manage recovery factors: Password, Social Recovery, Authenticator app, Recovery phrase, Passkeys. -- Unhide and copy backup phrase. -- Resend the recovery phrase to a registered email address. -- Add or remove MFA factors at any time. - -![Account Dashboard Overview Screenshot](/img/embedded-wallets/account-dashboard/account-dashboard-overview.jpg) - -### Connected apps and sessions - -Users can see which apps are connected to their account and stay in control of access: - -- View all apps authorized to use the account. -- Revoke an app's access instantly. -- Sign out of active sessions as needed. - -### Device overview - -Users can view and manage all devices connected to their account, ensuring complete control over their sessions. They can: - -- Add trusted devices. -- Remove unused or unauthorized devices. -- Set current devices as default for enhanced convenience. - -![Device Overview Screenshot](/img/embedded-wallets/account-dashboard/device-overview.jpg) - -### Security status - -A visual indicator displays the overall security status of the account, encouraging users to set up additional recovery factors for better protection. - -![Security Insights Screenshot](/img/embedded-wallets/account-dashboard/security-insights.jpg) - -## Use in your app - -Users access the dashboard after authenticating with any app that uses MetaMask Embedded Wallets (Web3Auth). - -:::tip - -For a smoother experience, add a "Manage account" or "Security" link to [account.web3auth.io](https://account.web3auth.io) in your app's settings/profile. - -::: - -We recommend encouraging users to: - -1. Set up at least three recovery factors. -2. Regularly review connected apps and sessions. -3. Periodically review devices and enable an authenticator app. - -## FAQs - -### Can users access the account dashboard without logging in? - -No, the account dashboard is secured and can only be accessed after successful authentication. - -### What recovery factors are supported? - -The account dashboard supports the following recovery factors: - -- Social Recovery -- Recovery Phrase -- Password -- Authenticator App -- Passkeys diff --git a/embedded-wallets/features/wallet-pregeneration.mdx b/embedded-wallets/features/wallet-pregeneration.mdx deleted file mode 100644 index f157983322f..00000000000 --- a/embedded-wallets/features/wallet-pregeneration.mdx +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Wallet Pregeneration -sidebar_label: Wallet pregeneration -description: 'Wallet Pregeneration | Embedded Wallets' ---- - -import BrowserOnly from '@docusaurus/BrowserOnly' -import PregenerateWallet from '@site/src/components/PregenerateWallet' -import PregenrateSmartAccount from '@site/src/components/PregenrateSmartAccount' - -Pregenerated wallets simplify user onboarding by creating wallets for your users before they log in. This approach enables a smoother Web3 experience, giving developers flexibility in introducing wallet functionalities to users at the right time. - -## Why use pregenerated wallets? - -- **Seamless onboarding:** Create wallets or smart accounts as part of the invite or signup process, so users can jump into your app without additional steps. -- **Deferred wallet setup:** Delay login setups (such as OAuth) until users are ready for their first onchain transaction. -- **Prefunding capability:** Send tokens or rewards to wallets before users claim them, perfect for airdrops, welcome bonuses, or preloaded assets. - -## Use cases - -- **Early wallet creation:** Assign wallets to users during onboarding or invitations without requiring immediate login. -- **Preloaded incentives:** Reward users with tokens, NFTs, or other assets for offchain activities, redeemable when they access their wallets. -- **Enhanced gaming and app experiences:** Preload game items or promotional rewards to create a frictionless user journey. - -## Utilizing the pregenerated wallet API - -Embedded Wallets' straightforward API facilitates the creation of pregenerated Externally Owned Accounts (EOA) wallets. You can integrate this API into your user signup flow, either after a user verifies their email or independently by supplying their email or unique identifier to the API. - -:::note - -Access to wallet pregeneration is gated. You can use this feature in `sapphire_devnet` for free. The minimum [pricing plan](https://web3auth.io/pricing.html) to use this feature in a production environment is the **Scale Plan**. - -::: - -:::warning - -This API only returns the Core Kit/ SFA Key wallet addresses. To use the wallet addresses with the Embedded Wallet SDKs, you will need to either use the `useCoreKitKey` or `useSFAKey` flag. - -Learn more about how [keys can change within different products](/embedded-wallets/troubleshooting/different-private-key#product). - -::: - -### Implementation steps - -1. **Identify users:** Determine the unique identifier or email for the user within your system. This will be the `verifierId` used to create the wallet. -2. **API call:** Use the provided API to submit the user's identifier. You'll need to specify parameters from the dashboard, specifically the Verifier Name, Web3Auth Network, and Client Id. -3. **Receive wallet address:** The API response will include the new wallet address, ready for use by the user upon their first login. - -{() => } - -## Pregenerate smart accounts - -We provide a straightforward API to facilitate the creation of pregenerated Smart Accounts. You can integrate this API into your user signup flow, either after a user verifies their email or independently by supplying their email or unique identifier to the API. - -### Implementation steps - -1. **Identify users:** Determine the unique identifier or email for the user within your system. This will be the `verifierId` used to create the wallet. -2. **API call:** Use the provided API to submit the user's identifier. You'll need to specify parameters from the dashboard, specifically the Verifier Name, Web3Auth Network, and Client Id. -3. **Receive wallet address:** The API response will include the new wallet address, ready for use by the user upon their first login. - -{() => } diff --git a/embedded-wallets/features/whitelabel.mdx b/embedded-wallets/features/whitelabel.mdx deleted file mode 100644 index 01d8ec84179..00000000000 --- a/embedded-wallets/features/whitelabel.mdx +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Prebuilt Wallet UI -sidebar_label: Prebuilt wallet UI -description: 'Prebuilt, brandable auth and wallet UI | Embedded Wallets' -image: 'img/metamaskog.jpg' ---- - -MetaMask Embedded Wallets provide a prebuilt, customizable UI for authentication and wallet management that you can theme to your brand, localize, and fine‑tune for your user journey. If you prefer, you can also run fully headless with no UI shown as well. - -## Customizable UI - -The MetaMask Embedded Wallets experience includes configurable UI delivered via the Embedded Wallets dashboard. With the Embedded Wallet SDKs, you can: - -- **Customize the login modal:** Adapt the login modal to match your brand: colors, logos, fonts, and button styles. -- **Configure user flow and MFA screen transitions:** Choose the authentication flow and MFA screen transitions in the dashboard to fit your UX. - -- **Localize languages and text:** Switch between multiple languages to serve global audiences. - - **Multi‑language support:** English, Spanish, German, Mandarin, Korean, Japanese, French, Portuguese, Turkish, Dutch, and more. - - - Open‑source locales: contribute or extend translations. - - :::tip - - Contribute your translations to the [Web3Auth Locales](https://github.com/Web3Auth/web3auth-locales) repository for them to be included in the next release. - - ::: - -- Launch the Embedded Wallet UI for asset management (balances, tokens, NFTs), on‑ramps, transactions, and more. - -![Branding Dashboard](/img/embedded-wallets/whitelabel/modal/branding.gif) - -::::note - -Access to certain UI features is gated. Minimum plan requirements currently are: - -- Default login UI: **Base Plan** -- Customization/ Whitelabeling login UI: **Growth Plan** -- Embedded Wallet UI: **Scale Plan** - -All features are available for free on `sapphire_devnet` for testing purposes. - -:::: - -## Embedded Wallet UI - -A ready‑to‑use wallet interface inside the SDK, designed to accelerate go‑to‑market while giving users familiar wallet capabilities: - -- Fiat on‑ramps for buying crypto -- Assets display for balances, tokens, NFTs -- Transaction signing -- Send, receive, and swap - -::::info - -The Embedded Wallet UI supports both Externally Owned Accounts (EOA) and Account Abstraction (AA) accounts powered by Embedded Wallets' native account abstraction. - -Additionally, it supports both EVM and Solana accounts, providing a versatile solution for various blockchain environments. - -:::: - -![Wallet Services](/img/embedded-wallets/wallet-services/wallet-services.png) - -## Headless mode (no UI) - -Prefer to keep the MetaMask/Embedded Wallets UI invisible? You can implement your own screens and flows while using the same Embedded Wallets SDKs under the hood. This gives you full control over the UX while retaining authentication, key management, and wallet functionality. diff --git a/embedded-wallets/features/funding.mdx b/embedded-wallets/funding.mdx similarity index 82% rename from embedded-wallets/features/funding.mdx rename to embedded-wallets/funding.mdx index 067f1b69d1a..d9d05c571a0 100644 --- a/embedded-wallets/features/funding.mdx +++ b/embedded-wallets/funding.mdx @@ -1,35 +1,31 @@ --- title: Funding -sidebar_label: Funding -description: 'Funding | Embedded Wallets' +description: 'Let users fund their MetaMask Embedded Wallet via the built-in fiat on-ramp aggregator, transfers from external wallets, or external wallet deposits.' --- -MetaMask Embedded Wallets supports multiple ways for users to add funds to their wallets. Let users pick the method that suits them: +MetaMask Embedded Wallets gives your users multiple ways to add funds to their wallet: -- Buy crypto with card, bank transfer, or local payment methods (fiat on‑ramp aggregator). -- Transfer from an existing wallet or exchange. +- Buy crypto with card, bank transfer, or local payment methods through the fiat on-ramp aggregator. +- Transfer from an existing self-custodial wallet or exchange. - Connect an external wallet and deposit to the embedded wallet. -## Buy crypto with card or bank transfer (fiat on‑ramp aggregator) +## Fiat on-ramp aggregator -The fiat on‑ramp aggregator, a key component of the Embedded Wallets' services, streamlines the process of converting fiat to cryptocurrency. With integration requiring just a single line of code, it supports over 100 payment methods. +The fiat on-ramp aggregator converts fiat to cryptocurrency through a single integration that supports over 100 payment methods. :::note -The fiat on-ramp supports both Externally Owned Accounts (EOA) and Account Abstraction (AA) accounts powered by Embedded Wallets' native account abstraction. - -Additionally, it supports both EVM and Solana accounts, providing a versatile solution for various blockchain environments. +The fiat on-ramp supports both externally owned accounts (EOAs) and smart accounts powered by Embedded Wallets' native account abstraction. +It also supports both EVM and Solana accounts. ::: -### Using the Wallet Services UI - -When the user clicks **Add Funds** on the Wallet Services UI, they'll be presented with options to fund their wallet: +When users select **Add Funds** in the Wallet Services UI, they can choose how to fund their wallet:
Add Funds Options
-Users can choose to fund by card or QR code. - -#### Fund by card +### Fund by card -Users select the card option to purchase crypto using a credit or debit card. This takes them to the card payment interface: +Users select the card option to purchase crypto with a credit or debit card:
Fund by Card
-#### Fund by QR Code +### Fund by QR code Users select the QR code option to fund their wallet by scanning a QR code with another wallet:
Fund by QR Code
-## Overcome on-ramping challenges - -The fiat on‑ramp aggregator addresses your on-ramping challenges: - -- **Global reach:** Access users in over 50 countries with worldwide payment coverage. - -- **Lower fees:** Save up to 70% on transaction fees by leveraging lower cost local payment providers. - -- **Localized payment options:** Offer familiar and real-time payment methods to boost user engagement and monetization. - -- **Higher transaction success rates:** Address high failure rates (30-70%) of traditional methods like Visa/Mastercard in emerging markets by using reliable local payment options. - -- **Enhanced security:** Provide a secure and cost-effective solution for both users and merchants, as local payment methods often require 2-factor authentication (2FA) and eliminate chargeback costs. - :::info -Checkout our [Demo](https://demo.web3auth.io) to see it in action. +Try the [demo](https://demo.web3auth.io) to see the funding flow in action. ::: ## Transfer from another wallet -The UI lets users fund their embedded wallet by sending crypto from a self‑custodial wallet or an exchange: +Users can also fund their embedded wallet by sending crypto from a self-custodial wallet or an exchange: -1. Display the user's embedded wallet address (or QR code), or helps you directly connect to the user's wallet. -2. From an external wallet, send funds to that address on a supported network. -3. Confirm the deposit and update balances in your app. +1. Display the user's embedded wallet address (or QR code), or directly connect to the user's external wallet. +2. From the external wallet, send funds to that address on a supported network. +3. Confirm the deposit and update balances in your dapp. ## Fiat on-ramp coverage +The chain-agnostic fiat on-ramp aggregator supports a wide range of blockchain networks, currencies, and payment methods. + :::tip -See a complete list of [fiat, crypto and payment method coverage](https://docs.google.com/spreadsheets/d/1HwIDgFQ-J-ptImT9yp6MmLpZId3l1NGe9qWJJN88msY/edit#gid=0) +See the complete list of [fiat, crypto, and payment method coverage](https://docs.google.com/spreadsheets/d/1HwIDgFQ-J-ptImT9yp6MmLpZId3l1NGe9qWJJN88msY/edit#gid=0). ::: ### Network coverage -The chain-agnostic fiat on‑ramp aggregator supports a wide range of blockchain networks and tokens, including: - ![Coverage](/img/embedded-wallets/wallet-services/topup/topup-coverage.png) diff --git a/embedded-wallets/infrastructure/session-management.mdx b/embedded-wallets/infrastructure/session-management.mdx new file mode 100644 index 00000000000..b56854022c0 --- /dev/null +++ b/embedded-wallets/infrastructure/session-management.mdx @@ -0,0 +1,41 @@ +--- +title: Session management +description: 'How session management works in MetaMask Embedded Wallets, including session keys, secure storage, and the restoration flow.' +--- + +Embedded Wallets SDKs maintain user session state so users don't have to sign in every time they return to your dapp. +A session is created at sign-in, persisted securely on the user's device, and restored automatically on the next visit. + +Session management offers several benefits: + +- **User experience:** Users sign in once and skip repeated authentication for the duration of the session. +- **Performance:** Session restoration completes in milliseconds. +- **Simple integration:** Session handling is built in to the SDKs, with minimal impact on your sign-in flow. + +:::tip Configure session duration + +Session lifetime is configured per project in the [Session management](../dashboard/advanced/session-management.mdx) page of the Embedded Wallets dashboard. + +::: + +## Session key + +When a user signs in, the SDK generates a unique session key. +The user's session state is encrypted with this key and stored on the Embedded Wallets metadata server. + +## Secure storage + +The SDK stores the session key in the platform's secure local storage: + +- **Web:** browser local storage. +- **Android:** encrypted shared preferences. +- **iOS:** keychain services. + +## Restoration + +When the user returns to your dapp, the SDK automatically restores the session: + +1. **Retrieve the session key.** The SDK reads the session key from secure storage. +2. **Request the encrypted state.** The SDK fetches the encrypted user state from the Embedded Wallets metadata server. +3. **Decrypt the state.** The SDK decrypts the user state with the session key. +4. **Fall back to sign-in.** If no valid session exists, the user is prompted to authenticate again. diff --git a/embedded-wallets/sdk/_common/_aa-address.mdx b/embedded-wallets/sdk/_common/_aa-address.mdx index b7aba8dcdd7..45df6bcc41e 100644 --- a/embedded-wallets/sdk/_common/_aa-address.mdx +++ b/embedded-wallets/sdk/_common/_aa-address.mdx @@ -1,14 +1,14 @@ import TabItem from '@theme/TabItem' import Tabs from '@theme/Tabs' -Once the signers or Wagmi configuration is set up, it can be used to retrieve the user's Smart -Account address. +Once the signers or Wagmi configuration is set up, you can use it to retrieve the user's smart +account address. diff --git a/embedded-wallets/sdk/_common/_aa-send-transaction.mdx b/embedded-wallets/sdk/_common/_aa-send-transaction.mdx index 37da9773dc1..03b258ea72c 100644 --- a/embedded-wallets/sdk/_common/_aa-send-transaction.mdx +++ b/embedded-wallets/sdk/_common/_aa-send-transaction.mdx @@ -1,24 +1,23 @@ import TabItem from '@theme/TabItem' import Tabs from '@theme/Tabs' -Developers can use their preferred signer or Wagmi hooks to initiate onchain transactions, while -Web3Auth manages the creation and submission of the UserOperation. Only the `to`, `data`, and -`value` fields need to be provided. Any additional parameters will be ignored and automatically -overridden. - -To ensure reliable execution, the bundler client sets maxFeePerGas and maxPriorityFeePerGas values. -If custom values are required, developers can use the -[Viem's BundlerClient](https://viem.sh/account-abstraction/clients/bundler#bundler-client) to +You can use your preferred signer or Wagmi hooks to initiate onchain transactions, while +Embedded Wallets manages the creation and submission of the user operation. +You only need to provide the `to`, `data`, and `value` fields. +Any additional parameters will be ignored and automatically `overridden. + +To ensure reliable execution, the bundler client sets `maxFeePerGas` and `maxPriorityFeePerGas`. +If custom values are required, use Viem's [Bundler Client](https://viem.sh/account-abstraction/clients/bundler) to manually construct and send the user operation. -Since Smart Accounts are deployed smart contracts, the user's first transaction also triggers the +Since smart accounts are deployed smart contracts, the user's first transaction also triggers the onchain deployment of their wallet. diff --git a/embedded-wallets/sdk/_common/_configure-aa-signers.mdx b/embedded-wallets/sdk/_common/_configure-aa-signers.mdx index e029c8ce239..b16412e23b7 100644 --- a/embedded-wallets/sdk/_common/_configure-aa-signers.mdx +++ b/embedded-wallets/sdk/_common/_configure-aa-signers.mdx @@ -1,26 +1,24 @@ import TabItem from '@theme/TabItem' import Tabs from '@theme/Tabs' -The Web3Auth Smart Account feature is compatible with popular signer SDKs, including wagmi, ethers, -and viem. You can choose your preferred package to configure the signer. - -You can retreive the provider to configure the signer from Web3Auth instance. +Embedded Wallets smart accounts are compatible with popular signer SDKs, including Wagmi, ethers.js, +and viem. Choose your preferred package to configure the signer. +Retreive the provider to configure the signer from the `web3auth` instance. :::info Wagmi -Wagmi does not require any special configuration to use the signer with smart accounts. Once you -have set up your Web3Auth provider and connected your wallet, Wagmi's hooks (such as useSigner or -useAccount) will automatically use the smart account as the signer. You can interact with smart -accounts using Wagmi just like you would with a regular EOA (Externally Owned Account) signer—no -additional setup is needed. +Wagmi does not require any special configuration to use the signer with smart accounts. +Once you have set up your Embedded Wallets provider and connected your wallet, Wagmi's hooks (such as `useSigner` or +`useAccount`) will automatically use the smart account as the signer. +You can interact with smart accounts using Wagmi just like you would with an externally owned account (EOA) signer, with no additional setup. ::: diff --git a/embedded-wallets/sdk/_common/_growth_plan_note.mdx b/embedded-wallets/sdk/_common/_growth_plan_note.mdx index 283b6d96e85..40845f563ce 100644 --- a/embedded-wallets/sdk/_common/_growth_plan_note.mdx +++ b/embedded-wallets/sdk/_common/_growth_plan_note.mdx @@ -1,7 +1,6 @@ :::note This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this -SDK in a production environment is the **Growth Plan**. You can use this feature in Web3Auth -Sapphire Devnet network for free. +SDK in a production environment is the **Growth Plan**. You can use this feature on Sapphire Devnet for free. ::: diff --git a/embedded-wallets/sdk/_common/_scale_plan_note.mdx b/embedded-wallets/sdk/_common/_scale_plan_note.mdx index f532b6d3b00..68010103ae3 100644 --- a/embedded-wallets/sdk/_common/_scale_plan_note.mdx +++ b/embedded-wallets/sdk/_common/_scale_plan_note.mdx @@ -1,5 +1,5 @@ :::note -This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this SDK in a production environment is the **Scale Plan**. You can use this feature in Web3Auth Sapphire Devnet network for free. +This is a paid feature and the minimum [pricing plan](https://web3auth.io/pricing.html) to use this SDK in a production environment is the **Scale Plan**. You can use this feature on Sapphire Devnet for free. ::: diff --git a/embedded-wallets/sdk/js/advanced/smart-accounts.mdx b/embedded-wallets/sdk/js/advanced/smart-accounts.mdx index a5ced52233e..0f6f603824c 100644 --- a/embedded-wallets/sdk/js/advanced/smart-accounts.mdx +++ b/embedded-wallets/sdk/js/advanced/smart-accounts.mdx @@ -1,7 +1,6 @@ --- title: Smart accounts -sidebar_label: Smart accounts -description: '@web3auth/modal Native Account Abstraction | Embedded Wallets' +description: Configure and use MetaMask Smart Accounts with Embedded Wallets JavaScript SDK --- import Tabs from '@theme/Tabs' @@ -11,69 +10,68 @@ import ConfigureSigners from '../../_common/_configure-aa-signers.mdx' import SmartAccountAddress from '../../_common/_aa-address.mdx' import SmartAccountSendTransaction from '../../_common/_aa-send-transaction.mdx' -Effortlessly create and manage smart accounts for your users with just a few lines of code, using our Smart Account feature. Smart accounts offer enhanced control and programmability, enabling powerful features that traditional wallets can't provide. - -**Key features of smart accounts include:** +Create and manage smart accounts for your users with just a few lines of code, using Embedded Wallets smart accounts. +Smart accounts offer enhanced control and programmability, enabling powerful features that traditional wallets can't provide. +Key features include: - **Gas abstraction:** Cover transaction fees for users, or allow users to pay for their own transactions using ERC-20 tokens. - **Batch transactions:** Perform multiple transactions in a single call. - **Automated transactions:** Allow users to automate actions, like swapping ETH to USDT when ETH hits a specific price. - **Custom spending limits:** Allow users to set tailored spending limits. -:::tip +Embedded Wallets smart accounts are powered by the [MetaMask Smart Accounts kit](/smart-accounts-kit), so you can create and +manage [ERC-4337](https://eips.ethereum.org/EIPS/eip-4337) compatible smart accounts using your preferred libraries like viem, ethers.js, and Wagmi. + +:::info -For more about ERC-4337 and its components, [check out our detailed blog post](https://blog.web3auth.io/an-ultimate-guide-to-web3-wallets-externally-owned-account-and-smart-contract-wallet/#introduction-to-eip-4337). +For more about ERC-4337 and its components, read this blog post: +[An ultimate guide to Web3 Wallets](https://blog.web3auth.io/an-ultimate-guide-to-web3-wallets-externally-owned-account-and-smart-contract-wallet/). ::: -Our smart account integration streamlines your setup, allowing you to create and manage smart accounts using your favorite libraries like Viem, Ethers, and Wagmi. You don't need to rely on third-party packages to effortlessly create ERC-4337 compatible Smart Contract Wallets (SCWs), giving users the ability to perform batch transactions and efficiently manage gas sponsorship. - -## Enabling smart accounts - -:::info prerequisite - -To enable this feature, you need to configure smart accounts from your project in the [Embedded Wallets dashboard](https://dashboard.web3auth.io/). - -::: +## Configure smart accounts -### Dashboard configuration +### Configure in the dashboard -To enable smart accounts, navigate to the smart accounts section in the Web3Auth dashboard, and enable the "Set up Smart accounts" toggle. Web3Auth currently supports [MetaMask Smart Account](https://docs.gator.metamask.io/how-to/create-delegator-account#create-a-metamasksmartaccount) as a Smart Account provider. +Go to the **Smart Accounts** section in the [Embedded Wallets dashboard](https://dashboard.web3auth.io/), and **Set up Smart accounts**. +Embedded Wallets supports [MetaMask Smart Accounts](/smart-accounts-kit/guides/smart-accounts/create-smart-account/) as a smart account provider. ![Enable Smart accounts](/img/embedded-wallets/w3a-dashboard/smart-account/enable-smart-account.png) -#### Wallet configuration +#### Configure wallets -Once smart accounts are enabled, you can customize the wallet configurations: +Once smart accounts are enabled, you can configure the wallets: - **All supported wallets (default):** Allows users to create smart accounts using both embedded and external wallets. -- **Embedded wallets only:** Restricts Smart Account creation to only embedded wallets. +- **Embedded wallets only:** Restricts smart account creation to embedded wallets. #### Configure bundler and paymaster -A bundler aggregates UserOperations and submits them onchain via the global EntryPoint contract. To configure the bundler: +A bundler aggregates user operations and submits them onchain via the global entry point contract. +To configure the bundler: -![Configure bundler and paymaster](/img/embedded-wallets/w3a-dashboard/smart-account/configure-paymaster.png) +1. In the **Smart accounts** section, go to the **Bundler & Paymaster** tab. +2. Add the bundler URL for each supported chain. +3. Add the paymaster URL for each supported chain. -1. Navigate to the **Bundler & Paymaster** tab within the **Smart accounts** section -2. Add the bundler URL for each supported chain -3. Add the paymaster URL for each supported chain +![Configure bundler and paymaster](/img/embedded-wallets/w3a-dashboard/smart-account/configure-paymaster.png) :::info -Currently, the sponsored paymaster can only be configured via the dashboard. For ERC-20 paymaster, refer to the SDK Configuration section below. +You can only configure the sponsored paymaster in the dashboard. +For an ERC-20 paymaster, see the following section. ::: -### Optional: SDK configuration +### (Optional) Configure with the SDK -While the dashboard provides a convenient way to configure smart accounts, the SDK offers greater flexibility by allowing you to override these settings. +For more flexibility, configure smart accounts using the SDK. ### Basic configuration -To enable smart accounts in your application, add the `accountAbstractionConfig` to your Web3Auth options: +To enable smart accounts in your dapp, add the `accountAbstractionConfig` to your Web3Auth options: ```ts import { Web3Auth, WEB3AUTH_NETWORK } from '@web3auth/modal' @@ -102,7 +100,8 @@ await web3auth.init() ### Advanced configuration: override paymaster context -You can override the paymaster context defined in the dashboard for specific chains. This is particularly useful when your paymaster requires custom settings or parameters. +You can override the paymaster context defined in the dashboard for specific chains. +This is useful when your paymaster requires custom settings or parameters. ```ts import { Web3Auth, WEB3AUTH_NETWORK } from '@web3auth/modal' @@ -136,29 +135,30 @@ const web3auth = new Web3Auth({ await web3auth.init() ``` -:::info +:::note -The paymaster context must be manually configured for each chain that needs to be supported. +You must configure the paymaster context for each supported chain. ::: -## Using smart accounts +## Use smart accounts -### Configure signer +### Configure the signer -### Get Smart account address +### Get the smart account address -### Send transaction +### Send a transaction -### Sign transaction +### Sign a transaction -You can sign a transaction without immediately sending it. For the user's first transaction, the `UserOperation` calldata will automatically include the deployment data needed to create the Smart Account onchain. +You can sign a transaction without immediately sending it. +For the user's first transaction, the user operation calldata will automatically include the deployment data needed to create the smart account onchain. :::info @@ -169,8 +169,8 @@ Wagmi doesn't have hooks for signing transactions yet. @@ -206,15 +206,15 @@ const signature = await walletClient.signTransaction(request as any) -### Sign message +### Sign a message Smart accounts support message signing following the EIP-1271 standard for signature verification, using the `isValidSignature` method defined in the smart contract wallet instead of the `ecrecover` function used by EOAs. @@ -259,11 +259,12 @@ const signedMessage = await walletClient.signMessage({ -### Send batch transaction +### Send batch transactions -One of the key advantages of smart accounts is the ability to execute multiple operations in a single transaction. For example, instead of requiring separate transactions for token approval and then swapping, both operations can be combined into a single UserOperation. +One of the key advantages of smart accounts is the ability to execute multiple operations in a single transaction. +For example, instead of requiring separate transactions for token approval and then swapping, both operations can be combined into a single user operation. -To perform batch transactions, you must use the `BundlerClient` provided by Web3Auth: +To perform batch transactions, use the `BundlerClient` provided by the `web3auth` instance: ```ts // Use your Web3Auth instance @@ -301,13 +302,15 @@ const transactionHash = receipt.receipt.transactionHash :::info -When calling `sendUserOperation`, it returns a UserOperation hash, not the transaction hash. To get the final transaction details, use `waitForUserOperationReceipt`. +When calling `sendUserOperation`, it returns a user operation hash, not the transaction hash. +To get the final transaction details, use `waitForUserOperationReceipt`. ::: -### Send Transaction Using ERC-20 paymaster +### Send a transaction using ERC-20 paymaster -You can use ERC-20 tokens to pay for transaction fees instead of the native token (for example, ETH). This requires approving the token for use by the paymaster: +You can use ERC-20 tokens to pay for transaction fees instead of the native token (for example, ETH). +This requires approving the token for use by the paymaster: ```ts // Use your Web3Auth instance @@ -317,7 +320,7 @@ const accountAbstractionProvider = web3auth.accountAbstractionProvider const bundlerClient = accountAbstractionProvider.bundlerClient! const smartAccount = accountAbstractionProvider.smartAccount! -// Pimlico's ERC-20 Paymaster address +// Pimlico's ERC-20 paymaster address const pimlicoPaymasterAddress = '0x0000000000000039cd5e8aE05257CE51C473ddd1' // USDC address on Ethereum Sepolia @@ -359,3 +362,10 @@ const receipt = await bundlerClient.waitForUserOperationReceipt({ const transactionHash = receipt.receipt.transactionHash ``` + +## Next steps + +See the following end-to-end tutorials: + +- [Send your first gasless transaction](/tutorials/sending-gasless-transaction) +- [Send transactions with an ERC-20 paymaster](/tutorials/erc20-paymaster) diff --git a/embedded-wallets/sdk/js/usage/manage-mfa.mdx b/embedded-wallets/sdk/js/usage/manage-mfa.mdx index 5b10d6dade4..9dbfdbf9b6d 100644 --- a/embedded-wallets/sdk/js/usage/manage-mfa.mdx +++ b/embedded-wallets/sdk/js/usage/manage-mfa.mdx @@ -9,7 +9,7 @@ import Tabs from '@theme/Tabs' #### `manageMFA()` -You can redirect users to the Embedded Wallets account dashboard to manage their MFA settings by calling the `manageMFA()` function. This method ensures that identity details are injected into the dashboard internally for custom verifier-based dapps. In order to see what's present on the account dashboard, please refer to the [Account Dashboard](/embedded-wallets/features/user-account-dashboard). +You can redirect users to the Embedded Wallets account dashboard to manage their MFA settings by calling the `manageMFA()` function. This method ensures that identity details are injected into the dashboard internally for custom verifier-based dapps. In order to see what's present on the account dashboard, please refer to the [User account dashboard](/embedded-wallets/authentication/user-account-dashboard). :::info diff --git a/embedded-wallets/sdk/js/usage/show-checkout.mdx b/embedded-wallets/sdk/js/usage/show-checkout.mdx index 33d26d59644..89b0b4ee77e 100644 --- a/embedded-wallets/sdk/js/usage/show-checkout.mdx +++ b/embedded-wallets/sdk/js/usage/show-checkout.mdx @@ -28,13 +28,13 @@ await web3auth.showCheckout({ ### Parameters -| Name | Description | -| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `receiveWalletAddress?` | Specifies the recipient's address. By default, it is set to the currently connected address. | -| `tokenList?` | Specifies the tokens to display in the list. By default, all tokens are shown. Use the ticker name to specify which tokens to display, such as `[USDC, USDT, ETH]`. Please checkout the coverage details for [full list of supported networks and tokens](/embedded-wallets/features/funding#network-coverage). | -| `fiatList?` | Specifies the available fiat currencies enabled for purchase. Use the currency acronym to define which fiat currencies to display, such as `[USD, SGD, INR, JPY]`. Please checkout the coverage details for [full list of supported currencies](/embedded-wallets/features/funding#country-and-payment-method-coverage). | -| `show` | Determines whether the checkout UI is displayed. This can be used to programmatically control its visibility. | +| Name | Description | +| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `receiveWalletAddress?` | Specifies the recipient's address. By default, it is set to the currently connected address. | +| `tokenList?` | Specifies the tokens to display in the list. By default, all tokens are shown. Use the ticker name to specify which tokens to display, such as `[USDC, USDT, ETH]`. Please checkout the coverage details for [full list of supported networks and tokens](/embedded-wallets/funding#network-coverage). | +| `fiatList?` | Specifies the available fiat currencies enabled for purchase. Use the currency acronym to define which fiat currencies to display, such as `[USD, SGD, INR, JPY]`. Please checkout the coverage details for [full list of supported currencies](/embedded-wallets/funding#country-and-payment-method-coverage). | +| `show` | Determines whether the checkout UI is displayed. This can be used to programmatically control its visibility. | ### Supported cryptocurrencies -To checkout the supported cryptocurrencies and networks, [checkout the coverage documentation](/embedded-wallets/features/funding#fiat-on-ramp-coverage). +To checkout the supported cryptocurrencies and networks, [checkout the coverage documentation](/embedded-wallets/funding#fiat-on-ramp-coverage). diff --git a/embedded-wallets/sdk/react-native/_aa-provider-configuration.mdx b/embedded-wallets/sdk/react-native/_aa-provider-configuration.mdx index 94a0bcf2026..e0481e188b8 100644 --- a/embedded-wallets/sdk/react-native/_aa-provider-configuration.mdx +++ b/embedded-wallets/sdk/react-native/_aa-provider-configuration.mdx @@ -1,7 +1,6 @@ -When instantiating the Account Abstraction provider, you can pass configuration objects to the -constructor. These configuration options allow you to select the desired Account Abstraction (AA) -provider, as well as configure the bundler and paymaster, giving you flexibility and control over -the provider. +When instantiating the account abstraction provider, you can pass configuration objects to the +constructor. +Configure your preferred smart account provider, bundler, and paymaster. ```tsx // focus-start diff --git a/embedded-wallets/sdk/react-native/_aa-provider-installation.mdx b/embedded-wallets/sdk/react-native/_aa-provider-installation.mdx index 802d08292aa..101881350b3 100644 --- a/embedded-wallets/sdk/react-native/_aa-provider-installation.mdx +++ b/embedded-wallets/sdk/react-native/_aa-provider-installation.mdx @@ -1,8 +1,7 @@ -To use native account abstraction, you'll need to install the -[@web3auth/account-abstraction-provider](https://www.npmjs.com/package/@web3auth/account-abstraction-provider), -which allows you to create and interact with Smart Contract Wallets (SCWs). This provider simplifies -the entire process by managing the complex logic behind configuring the account abstraction -provider, bundler, and preparing user operations. +To use native account abstraction, install [`@web3auth/account-abstraction-provider`](https://www.npmjs.com/package/@web3auth/account-abstraction-provider), +which allows you to create and interact with smart accounts. +This package simplifies the process by managing the configuration of the account abstraction provider, the bundler, +and user operations. ```bash npm2yarn npm install --save @web3auth/account-abstraction-provider diff --git a/embedded-wallets/sdk/react-native/_bundler-configuration.mdx b/embedded-wallets/sdk/react-native/_bundler-configuration.mdx index e9bbd154539..d703f000c95 100644 --- a/embedded-wallets/sdk/react-native/_bundler-configuration.mdx +++ b/embedded-wallets/sdk/react-native/_bundler-configuration.mdx @@ -1,10 +1,8 @@ import TabItem from '@theme/TabItem' import Tabs from '@theme/Tabs' -Web3Auth enables you to configure your bundler and define the paymaster context. The bundler -aggregates the UserOperations and submits them onchain via a global entry point contract. - -Bundler support is not limited to the examples below—you can use any bundler of your choice. +The bundler aggregates user operations and submits them onchain via a global entry point contract. +Configure any bundler of your choice; the following examples use Pimlico and ZeroDev: -## Enabling smart accounts - -:::info prerequisite - -To enable this feature, you need to configure smart accounts from your project in the [Embedded Wallets dashboard](https://dashboard.web3auth.io/). - -::: +## Enable smart accounts -### Dashboard configuration - -To enable smart accounts, navigate to the smart accounts section in the Web3Auth dashboard, and enable the "Set up Smart accounts" toggle. Web3Auth currently supports [MetaMaskSmartAccount](https://docs.gator.metamask.io/how-to/create-delegator-account#create-a-metamasksmartaccount) as a Smart Account provider. +Go to the **Smart Accounts** section in the [Embedded Wallets dashboard](https://dashboard.web3auth.io/), and **Set up Smart accounts**. +Embedded Wallets supports [MetaMask Smart Accounts](/smart-accounts-kit/guides/smart-accounts/create-smart-account/) as a smart account provider. ![Enable Smart accounts](/img/embedded-wallets/w3a-dashboard/smart-account/enable-smart-account.png) -## Installation +## Install the account abstraction provider -## Configure +## Configure account abstraction -Please note this is the important step for setting the Web3Auth account abstraction provider. - -- [Configure Smart Account provider](#configure-smart-account-provider) -- [Configure Bundler](#configure-bundler) -- [Configure Sponsored Paymaster](#sponsored-paymaster) -- [Configure ERC-20 Paymaster](#erc-20-paymaster) - -## Configure smart account provider +### Configure the smart account provider -## Configure bundler +### Configure the bundler -## Configure paymaster +### Configure the paymaster -You can configure the paymaster of your choice to sponsor gas fees for your users, along with the paymaster context. The paymaster context lets you set additional parameters, such as choosing the token for ERC-20 paymasters, defining gas policies, and more. +You can configure the paymaster of your choice to sponsor gas fees for your users, along with the paymaster context. +The paymaster context lets you set additional parameters, like the token for ERC-20 paymasters or gas policies. ### Sponsored paymaster @@ -87,9 +75,11 @@ You can configure the paymaster of your choice to sponsor gas fees for your user -## Set up +## Set up Embedded Wallets -### Configure Web3Auth instance +### Configure Embedded Wallets + +Configure the Embedded Wallets `web3auth` instance: -### Configure signer +### Configure the signer -## Smart account address +## Get the smart account address -## Send transaction +## Send a transaction -## Advanced smart account operations +## Next steps + +For supported transaction methods and batch transactions, see the +[React SDK smart accounts page](/embedded-wallets/sdk/react/advanced/smart-accounts). + +See the following end-to-end tutorials: -To learn more about supported transaction methods, and how to perform batch transactions, [checkout our detailed documentation of AccountAbstractionProvider](/embedded-wallets/sdk/react). +- [Send your first gasless transaction](/tutorials/sending-gasless-transaction) +- [Send transactions with an ERC-20 paymaster](/tutorials/erc20-paymaster) diff --git a/embedded-wallets/sdk/react/advanced/smart-accounts.mdx b/embedded-wallets/sdk/react/advanced/smart-accounts.mdx index b7ba80bcb59..34e2f472d97 100644 --- a/embedded-wallets/sdk/react/advanced/smart-accounts.mdx +++ b/embedded-wallets/sdk/react/advanced/smart-accounts.mdx @@ -1,7 +1,6 @@ --- title: Smart accounts -sidebar_label: Smart accounts -description: '@web3auth/modal Native Account Abstraction | Embedded Wallets' +description: Configure and use MetaMask Smart Accounts with Embedded Wallets React SDK --- import Tabs from '@theme/Tabs' @@ -11,69 +10,68 @@ import ConfigureSigners from '../../_common/_configure-aa-signers.mdx' import SmartAccountAddress from '../../_common/_aa-address.mdx' import SmartAccountSendTransaction from '../../_common/_aa-send-transaction.mdx' -Effortlessly create and manage smart accounts for your users with just a few lines of code, using our Smart Account feature. Smart accounts offer enhanced control and programmability, enabling powerful features that traditional wallets can't provide. - -**Key features of smart accounts include:** +Create and manage smart accounts for your users with just a few lines of code, using Embedded Wallets smart accounts. +Smart accounts offer enhanced control and programmability, enabling powerful features that traditional wallets can't provide. +Key features include: - **Gas abstraction:** Cover transaction fees for users, or allow users to pay for their own transactions using ERC-20 tokens. - **Batch transactions:** Perform multiple transactions in a single call. - **Automated transactions:** Allow users to automate actions, like swapping ETH to USDT when ETH hits a specific price. - **Custom spending limits:** Allow users to set tailored spending limits. -:::tip +Embedded Wallets smart accounts are powered by the [MetaMask Smart Accounts kit](/smart-accounts-kit), so you can create and +manage [ERC-4337](https://eips.ethereum.org/EIPS/eip-4337) compatible smart accounts using your preferred libraries like viem, ethers.js, and Wagmi. + +:::info -For more about ERC-4337 and its components, [check out our detailed blog post](https://blog.web3auth.io/an-ultimate-guide-to-web3-wallets-externally-owned-account-and-smart-contract-wallet/#introduction-to-eip-4337). +For more about ERC-4337 and its components, read this blog post: +[An ultimate guide to Web3 Wallets](https://blog.web3auth.io/an-ultimate-guide-to-web3-wallets-externally-owned-account-and-smart-contract-wallet/). ::: -Our smart account integration streamlines your setup, allowing you to create and manage smart accounts using your favorite libraries like Viem, Ethers, and Wagmi. You don't need to rely on third-party packages to effortlessly create ERC-4337 compatible Smart Contract Wallets (SCWs), giving users the ability to perform batch transactions and efficiently manage gas sponsorship. - -## Enabling smart accounts - -:::info prerequisite - -To enable this feature, you need to configure smart accounts from your project in the [Embedded Wallets dashboard](https://dashboard.web3auth.io/). - -::: +## Configure smart accounts -### Dashboard configuration +### Configure in the dashboard -To enable smart accounts, navigate to the smart accounts section in the [Embedded Wallets dashboard](https://dashboard.web3auth.io/), and enable the **Set up Smart accounts** toggle. mbedded Wallets currently supports [MetaMaskSmartAccount](https://docs.gator.metamask.io/how-to/create-delegator-account#create-a-metamasksmartaccount) as a Smart Account provider. +Go to the **Smart Accounts** section in the [Embedded Wallets dashboard](https://dashboard.web3auth.io/), and **Set up Smart accounts**. +Embedded Wallets supports [MetaMask Smart Accounts](/smart-accounts-kit/guides/smart-accounts/create-smart-account/) as a smart account provider. ![Enable Smart accounts](/img/embedded-wallets/w3a-dashboard/smart-account/enable-smart-account.png) -#### Wallet configuration +#### Configure wallets -Once smart accounts are enabled, you can customize the wallet configurations: +Once smart accounts are enabled, you can configure the wallets: - **All supported wallets (default):** Allows users to create smart accounts using both embedded and external wallets. -- **Embedded wallets only:** Restricts Smart Account creation to embedded wallets. +- **Embedded wallets only:** Restricts smart account creation to embedded wallets. #### Configure bundler and paymaster -A bundler aggregates UserOperations and submits them onchain via the global EntryPoint contract. To configure the bundler: +A bundler aggregates user operations and submits them onchain via the global entry point contract. +To configure the bundler: -![Configure bundler and paymaster](/img/embedded-wallets/w3a-dashboard/smart-account/configure-paymaster.png) +1. In the **Smart accounts** section, go to the **Bundler & Paymaster** tab. +2. Add the bundler URL for each supported chain. +3. Add the paymaster URL for each supported chain. -1. Navigate to the **Bundler & Paymaster** tab within the **Smart accounts** section -2. Add the bundler URL for each supported chain -3. Add the paymaster URL for each supported chain +![Configure bundler and paymaster](/img/embedded-wallets/w3a-dashboard/smart-account/configure-paymaster.png) :::info -Currently, the sponsored paymaster can only be configured via the dashboard. For ERC-20 paymaster, refer to the SDK Configuration section below. +You can only configure the sponsored paymaster in the dashboard. +For an ERC-20 paymaster, see the following section. ::: -### Optional: SDK configuration +### (Optional) Configure with the SDK -While the dashboard provides a convenient way to configure smart accounts, the SDK offers greater flexibility by allowing you to override these settings. +For more flexibility, configure smart accounts using the SDK. ### Basic configuration -To enable smart accounts in your application, add the `accountAbstractionConfig` to your Web3Auth options: +To enable smart accounts in your dapp, add the `accountAbstractionConfig` to your Web3Auth options: ```ts import { WEB3AUTH_NETWORK, Web3AuthOptions } from '@web3auth/modal' @@ -99,7 +97,8 @@ const web3AuthOptions: Web3AuthOptions = { ### Advanced configuration: override paymaster context -You can override the paymaster context defined in the dashboard for specific chains. This is particularly useful when your paymaster requires custom settings or parameters. +You can override the paymaster context defined in the dashboard for specific chains. +This is useful when your paymaster requires custom settings or parameters. ```ts import { WEB3AUTH_NETWORK, Web3AuthOptions } from '@web3auth/modal' @@ -130,29 +129,30 @@ const web3AuthOptions: Web3AuthOptions = { } ``` -:::info +:::note -The paymaster context must be manually configured for each chain that needs to be supported. +You must configure the paymaster context for each supported chain. ::: -## Using smart accounts +## Use smart accounts -### Configure signer +### Configure the signer -### Get smart account address +### Get the smart account address -### Send transaction +### Send a transaction -### Sign transaction +### Sign a transaction -You can sign a transaction without immediately sending it. For the user's first transaction, the `UserOperation` calldata will automatically include the deployment data needed to create the Smart Account onchain. +You can sign a transaction without immediately sending it. +For the user's first transaction, the user operation calldata will automatically include the deployment data needed to create the smart account onchain. :::info @@ -163,8 +163,8 @@ Wagmi doesn't have hooks for signing transactions yet. @@ -200,15 +200,15 @@ const signature = await walletClient.signTransaction(request as any) -### Sign message +### Sign a message Smart accounts support message signing following the EIP-1271 standard for signature verification, using the `isValidSignature` method defined in the smart contract wallet instead of the `ecrecover` function used by EOAs. @@ -253,11 +253,12 @@ const signedMessage = await walletClient.signMessage({ -### Send batch transaction +### Send batch transactions -One of the key advantages of Smart accounts is the ability to execute multiple operations in a single transaction. For example, instead of requiring separate transactions for token approval and then swapping, both operations can be combined into a single UserOperation. +One of the key advantages of smart accounts is the ability to execute multiple operations in a single transaction. +For example, instead of requiring separate transactions for token approval and then swapping, both operations can be combined into a single user operation. -To perform batch transactions, you must use the `BundlerClient` provided by Web3Auth: +To perform batch transactions, use the `BundlerClient` provided by the `web3auth` instance: ```ts // Use your Web3Auth instance @@ -295,13 +296,15 @@ const transactionHash = receipt.receipt.transactionHash :::info -When calling `sendUserOperation`, it returns a UserOperation hash, not the transaction hash. To get the final transaction details, use `waitForUserOperationReceipt`. +When calling `sendUserOperation`, it returns a user operation hash, not the transaction hash. +To get the final transaction details, use `waitForUserOperationReceipt`. ::: -### Send transaction using ERC-20 paymaster +### Send a transaction using ERC-20 paymaster -You can use ERC-20 tokens to pay for transaction fees instead of the native token (for example, ETH). This requires approving the token for use by the paymaster: +You can use ERC-20 tokens to pay for transaction fees instead of the native token (for example, ETH). +This requires approving the token for use by the paymaster: ```ts // Use your Web3Auth instance @@ -353,3 +356,10 @@ const receipt = await bundlerClient.waitForUserOperationReceipt({ const transactionHash = receipt.receipt.transactionHash ``` + +## Next steps + +See the following end-to-end tutorials: + +- [Send your first gasless transaction](/tutorials/sending-gasless-transaction) +- [Send transactions with an ERC-20 paymaster](/tutorials/erc20-paymaster) diff --git a/embedded-wallets/sdk/vue/advanced/smart-accounts.mdx b/embedded-wallets/sdk/vue/advanced/smart-accounts.mdx index 71bf77d131f..8bdc1235624 100644 --- a/embedded-wallets/sdk/vue/advanced/smart-accounts.mdx +++ b/embedded-wallets/sdk/vue/advanced/smart-accounts.mdx @@ -1,7 +1,6 @@ --- title: Smart accounts -sidebar_label: Smart accounts -description: '@web3auth/modal Native Account Abstraction | Embedded Wallets' +description: Configure and use MetaMask Smart Accounts with Embedded Wallets Vue SDK --- import Tabs from '@theme/Tabs' @@ -11,71 +10,68 @@ import ConfigureSigners from '../../_common/_configure-aa-signers.mdx' import SmartAccountAddress from '../../_common/_aa-address.mdx' import SmartAccountSendTransaction from '../../_common/_aa-send-transaction.mdx' -# Smart accounts - -Effortlessly create and manage smart accounts for your users with just a few lines of code, using our Smart Account feature. Smart accounts offer enhanced control and programmability, enabling powerful features that traditional wallets can't provide. - -**Key features of smart accounts include:** +Create and manage smart accounts for your users with just a few lines of code, using Embedded Wallets smart accounts. +Smart accounts offer enhanced control and programmability, enabling powerful features that traditional wallets can't provide. +Key features include: - **Gas abstraction:** Cover transaction fees for users, or allow users to pay for their own transactions using ERC-20 tokens. - **Batch transactions:** Perform multiple transactions in a single call. - **Automated transactions:** Allow users to automate actions, like swapping ETH to USDT when ETH hits a specific price. - **Custom spending limits:** Allow users to set tailored spending limits. -:::tip +Embedded Wallets smart accounts are powered by the [MetaMask Smart Accounts kit](/smart-accounts-kit), so you can create and +manage [ERC-4337](https://eips.ethereum.org/EIPS/eip-4337) compatible smart accounts using your preferred libraries like viem, ethers.js, and Wagmi. -For more about ERC-4337 and its components, [check out our detailed blog post](https://blog.web3auth.io/an-ultimate-guide-to-web3-wallets-externally-owned-account-and-smart-contract-wallet/#introduction-to-eip-4337). +:::info -::: +For more about ERC-4337 and its components, read this blog post: +[An ultimate guide to Web3 Wallets](https://blog.web3auth.io/an-ultimate-guide-to-web3-wallets-externally-owned-account-and-smart-contract-wallet/). -Our smart account integration streamlines your setup, allowing you to create and manage smart accounts using your favorite libraries like Viem, Ethers, and Wagmi. You don't need to rely on third-party packages to effortlessly create ERC-4337 compatible Smart Contract Wallets (SCWs), giving users the ability to perform batch transactions and efficiently manage gas sponsorship. +::: -## Enabling smart accounts - -:::info prerequisite - -To enable this feature, you need to configure smart accounts from your project in the [Embedded Wallets dashboard](https://dashboard.web3auth.io/). - -::: +## Configure smart accounts -### Dashboard configuration +### Configure in the dashboard -To enable smart accounts, navigate to the smart accounts section in the Web3Auth dashboard, and enable the "Set up Smart accounts" toggle. Web3Auth currently supports [MetaMaskSmartAccount](https://docs.gator.metamask.io/how-to/create-delegator-account#create-a-metamasksmartaccount) as a Smart Account provider. +Go to the **Smart Accounts** section in the [Embedded Wallets dashboard](https://dashboard.web3auth.io/), and **Set up Smart accounts**. +Embedded Wallets supports [MetaMask Smart Accounts](/smart-accounts-kit/guides/smart-accounts/create-smart-account/) as a smart account provider. ![Enable Smart accounts](/img/embedded-wallets/w3a-dashboard/smart-account/enable-smart-account.png) -#### Wallet configuration +#### Configure wallets -Once smart accounts are enabled, you can customize the wallet configurations: +Once smart accounts are enabled, you can configure the wallets: - **All supported wallets (default):** Allows users to create smart accounts using both embedded and external wallets. -- **Embedded wallets only:** Restricts Smart Account creation to only embedded wallets. +- **Embedded wallets only:** Restricts smart account creation to embedded wallets. #### Configure bundler and paymaster -A bundler aggregates UserOperations and submits them onchain via the global EntryPoint contract. To configure the bundler: +A bundler aggregates user operations and submits them onchain via the global entry point contract. +To configure the bundler: -![Configure bundler and paymaster](/img/embedded-wallets/w3a-dashboard/smart-account/configure-paymaster.png) - -1. Navigate to the **Bundler & Paymaster** tab within the **Smart accounts** section. +1. In the **Smart accounts** section, go to the **Bundler & Paymaster** tab. 2. Add the bundler URL for each supported chain. 3. Add the paymaster URL for each supported chain. +![Configure bundler and paymaster](/img/embedded-wallets/w3a-dashboard/smart-account/configure-paymaster.png) + :::info -Currently, the sponsored paymaster can only be configured via the dashboard. For ERC-20 paymaster, refer to the SDK Configuration section below. +You can only configure the sponsored paymaster in the dashboard. +For an ERC-20 paymaster, see the following section. ::: -### Optional: SDK configuration +### (Optional) Configure with the SDK -While the dashboard provides a convenient way to configure smart accounts, the SDK offers greater flexibility by allowing you to override these settings. +For more flexibility, configure smart accounts using the SDK. ### Basic configuration -To enable smart accounts in your application, add the `accountAbstractionConfig` to your Web3Auth options: +To enable smart accounts in your dapp, add the `accountAbstractionConfig` to your Web3Auth options: ```ts import { WEB3AUTH_NETWORK, Web3AuthOptions } from '@web3auth/modal' @@ -108,7 +104,8 @@ export default web3AuthContextConfig ### Advanced configuration: override paymaster context -You can override the paymaster context defined in the dashboard for specific chains. This is particularly useful when your paymaster requires custom settings or parameters. +You can override the paymaster context defined in the dashboard for specific chains. +This is useful when your paymaster requires custom settings or parameters. ```ts import { WEB3AUTH_NETWORK, Web3AuthOptions } from '@web3auth/modal' @@ -146,29 +143,30 @@ const web3AuthContextConfig: Web3AuthContextConfig = { export default web3AuthContextConfig ``` -:::info +:::note -The paymaster context must be manually configured for each chain that needs to be supported. +You must configure the paymaster context for each supported chain. ::: -## Using smart accounts +## Use smart accounts -### Configure signer +### Configure the signer -### Get Smart account address +### Get the smart account address -### Send transaction +### Send a transaction -### Sign transaction +### Sign a transaction -You can sign a transaction without immediately sending it. For the user's first transaction, the `UserOperation` calldata will automatically include the deployment data needed to create the Smart Account onchain. +You can sign a transaction without immediately sending it. +For the user's first transaction, the user operation calldata will automatically include the deployment data needed to create the smart account onchain. :::info @@ -179,8 +177,8 @@ Wagmi doesn't have hooks for signing transactions yet. @@ -216,15 +214,15 @@ const signature = await walletClient.signTransaction(request as any) -### Sign message +### Sign a message Smart accounts support message signing following the EIP-1271 standard for signature verification, using the `isValidSignature` method defined in the smart contract wallet instead of the `ecrecover` function used by EOAs. @@ -256,7 +254,7 @@ Smart accounts support message signing following the EIP-1271 standard for signa 
{{ data }}
-
+

Error:

{{ error.message }}
@@ -291,11 +289,12 @@ const signedMessage = await walletClient.signMessage({ -### Send batch transaction +### Send batch transactions -One of the key advantages of smart accounts is the ability to execute multiple operations in a single transaction. For example, instead of requiring separate transactions for token approval and then swapping, both operations can be combined into a single UserOperation. +One of the key advantages of smart accounts is the ability to execute multiple operations in a single transaction. +For example, instead of requiring separate transactions for token approval and then swapping, both operations can be combined into a single user operation. -To perform batch transactions, you must use the `BundlerClient` provided by Web3Auth: +To perform batch transactions, use the `BundlerClient` provided by the `web3auth` instance: ```ts // Use your Web3Auth instance @@ -333,13 +332,15 @@ const transactionHash = receipt.receipt.transactionHash :::info -When calling `sendUserOperation`, it returns a UserOperation hash, not the transaction hash. To get the final transaction details, use `waitForUserOperationReceipt`. +When calling `sendUserOperation`, it returns a user operation hash, not the transaction hash. +To get the final transaction details, use `waitForUserOperationReceipt`. ::: -### Send Transaction Using ERC-20 paymaster +### Send a transaction using ERC-20 paymaster -You can use ERC-20 tokens to pay for transaction fees instead of the native token (for example, ETH). This requires approving the token for use by the paymaster: +You can use ERC-20 tokens to pay for transaction fees instead of the native token (for example, ETH). +This requires approving the token for use by the paymaster: ```ts // Use your Web3Auth instance @@ -349,7 +350,7 @@ const accountAbstractionProvider = web3auth.accountAbstractionProvider const bundlerClient = accountAbstractionProvider.bundlerClient! const smartAccount = accountAbstractionProvider.smartAccount! -// Pimlico's ERC-20 Paymaster address +// Pimlico's ERC-20 paymaster address const pimlicoPaymasterAddress = '0x0000000000000039cd5e8aE05257CE51C473ddd1' // USDC address on Ethereum Sepolia @@ -391,3 +392,10 @@ const receipt = await bundlerClient.waitForUserOperationReceipt({ const transactionHash = receipt.receipt.transactionHash ``` + +## Next steps + +See the following end-to-end tutorials: + +- [Send your first gasless transaction](/tutorials/sending-gasless-transaction) +- [Send transactions with an ERC-20 paymaster](/tutorials/erc20-paymaster) diff --git a/ew-sidebar.js b/ew-sidebar.js index 1db7b643574..2450a44aa6e 100644 --- a/ew-sidebar.js +++ b/ew-sidebar.js @@ -147,24 +147,7 @@ const sidebar = { { type: 'link', label: 'Unreal Engine', href: '/embedded-wallets/sdk/unreal' }, ], }, - { - type: 'category', - label: 'Features', - collapsible: true, - collapsed: false, - items: [ - 'features/external-wallets', - 'features/smart-accounts', - 'features/funding', - 'features/user-account-dashboard', - 'features/server-side-verification', - 'features/whitelabel', - 'features/wallet-pregeneration', - 'features/nft-minting', - 'features/session-management', - 'features/mpc', - ], - }, + 'funding', { type: 'category', label: 'Infrastructure', @@ -173,6 +156,7 @@ const sidebar = { 'infrastructure/mpc-architecture', 'infrastructure/sss-architecture', 'infrastructure/nodes-and-dkg', + 'infrastructure/session-management', 'infrastructure/glossary', { type: 'link', @@ -259,7 +243,9 @@ const sidebar = { ], }, 'authentication/group-connections', + 'authentication/user-account-dashboard', 'authentication/id-token', + 'authentication/wallet-pregeneration', ], other_blockchains: [ 'connect-blockchain/README', diff --git a/src/pages/tutorials/android-wallet.mdx b/src/pages/tutorials/android-wallet.mdx index ec6c44eb955..1eba5d8ae71 100644 --- a/src/pages/tutorials/android-wallet.mdx +++ b/src/pages/tutorials/android-wallet.mdx @@ -173,7 +173,7 @@ to `HomeScreen`. In case of no active session, we'll navigate to `LoginScreen` t ::: note -[Learn more about Web3Auth session management](/embedded-wallets/features/session-management). +[Learn more about Embedded Wallets session management](/embedded-wallets/infrastructure/session-management). ::: diff --git a/src/pages/tutorials/erc20-paymaster.mdx b/src/pages/tutorials/erc20-paymaster.mdx index d0f628368e8..8df340d77e7 100644 --- a/src/pages/tutorials/erc20-paymaster.mdx +++ b/src/pages/tutorials/erc20-paymaster.mdx @@ -258,15 +258,15 @@ Learn more about advance features of the account abstraction provider like: ]}> [React smart accounts: batch - transactions](/embedded-wallets/sdk/react/advanced/smart-accounts#send-batch-transaction) + transactions](/embedded-wallets/sdk/react/advanced/smart-accounts#send-batch-transactions) [JS smart accounts: batch - transactions](/embedded-wallets/sdk/js/advanced/smart-accounts#send-batch-transaction) + transactions](/embedded-wallets/sdk/js/advanced/smart-accounts#send-batch-transactions) [Vue smart accounts: batch - transactions](/embedded-wallets/sdk/vue/advanced/smart-accounts#send-batch-transaction) + transactions](/embedded-wallets/sdk/vue/advanced/smart-accounts#send-batch-transactions) diff --git a/src/pages/tutorials/flutter-wallet.mdx b/src/pages/tutorials/flutter-wallet.mdx index 2f2bebd394b..135b4e1f82a 100644 --- a/src/pages/tutorials/flutter-wallet.mdx +++ b/src/pages/tutorials/flutter-wallet.mdx @@ -120,7 +120,7 @@ To check whether the user is authenticated, you can use the `getPrivateKey` or ` :::tip -[Learn more about Web3Auth session management](/embedded-wallets/features/session-management). +[Learn more about Embedded Wallets session management](/embedded-wallets/infrastructure/session-management). ::: diff --git a/src/pages/tutorials/sending-gasless-transaction.mdx b/src/pages/tutorials/sending-gasless-transaction.mdx index 92a815cd6f1..a9b2394cdde 100644 --- a/src/pages/tutorials/sending-gasless-transaction.mdx +++ b/src/pages/tutorials/sending-gasless-transaction.mdx @@ -81,7 +81,7 @@ In this guide, we use `SafeSmartAccount`, but you choose your favorite smart acc :::note `SafeSmartAccount` is a Safe-based smart account implementation used to create and manage the user's contract wallet. -You can swap it for other supported [smart account](../../embedded-wallets/features/smart-accounts) types. +You can swap it for other supported [smart account](../../embedded-wallets/sdk/react/advanced/smart-accounts) types. ::: diff --git a/vercel.json b/vercel.json index c9fe75ffe82..62b1db0a66b 100644 --- a/vercel.json +++ b/vercel.json @@ -654,6 +654,46 @@ "source": "/embedded-wallets/dashboard/whitelist/", "destination": "/embedded-wallets/dashboard/allowlist/" }, + { + "source": "/embedded-wallets/features/external-wallets/", + "destination": "/embedded-wallets/authentication/basic-logins/external-wallets/" + }, + { + "source": "/embedded-wallets/features/smart-accounts/", + "destination": "/embedded-wallets/sdk/react/advanced/smart-accounts/" + }, + { + "source": "/embedded-wallets/features/server-side-verification/", + "destination": "/embedded-wallets/authentication/id-token/" + }, + { + "source": "/embedded-wallets/features/whitelabel/", + "destination": "/embedded-wallets/dashboard/customization/" + }, + { + "source": "/embedded-wallets/features/mpc/", + "destination": "/embedded-wallets/infrastructure/mpc-architecture/" + }, + { + "source": "/embedded-wallets/features/user-account-dashboard/", + "destination": "/embedded-wallets/authentication/user-account-dashboard/" + }, + { + "source": "/embedded-wallets/features/session-management/", + "destination": "/embedded-wallets/infrastructure/session-management/" + }, + { + "source": "/embedded-wallets/features/wallet-pregeneration/", + "destination": "/embedded-wallets/authentication/wallet-pregeneration/" + }, + { + "source": "/embedded-wallets/features/funding/", + "destination": "/embedded-wallets/funding/" + }, + { + "source": "/embedded-wallets/features/nft-minting/", + "destination": "/embedded-wallets/#developer-experience" + }, { "source": "/embedded-wallets/how-it-works/", "destination": "/embedded-wallets/"