W3a docs (#2255)

* wip

* update examples

* Add embedded wallets intro page

* Fix issues

* Add sub nav bar

* Update sidebarsectiondropdown styling

* restructure ew docs

* Fix troubleshooting sidebar

* Update links in guides

* Fix CI build error.

Signed-off-by: bgravenorst <[email protected]>

* restructure dashboard section

* fix linting issues

* Update naming conventions

* Update features section

* Fix build issues

* updates

* fixes

* migration guides restructure

* update flutter documentation

* Structure update for unreal, unity & ios

* Updated Connect Blockchain section

* Removed unused files

* edited troubleshooting docs

* Web3Auth references to EW in authentication

Updated documentation to replace 'Web3Auth' with 'Embedded Wallets' throughout authentication and troubleshooting guides. Adjusted dashboard references, titles, descriptions, and internal links to reflect the new branding and clarify SDK naming conventions.

* react native structure update

* Update content for SDKs

* Update react native content

---------

Signed-off-by: bgravenorst <[email protected]>
Co-authored-by: Yashovardhan Agrawal <[email protected]>
Co-authored-by: bgravenorst <[email protected]>
Co-authored-by: Maharshi Mishra <[email protected]>

Author: 3 people

docusaurus.config.js

@@ -16,7 +16,12 @@ const productsDropdown = fs.readFileSync('./src/components/NavDropdown/Products.
 const baseUrl = process.env.DEST || '/'
 const siteUrl = 'https://docs.metamask.io'
 
-const npm2yarnPlugin = [require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }]
+const remarkPlugins = [
+  require('remark-math'),
+  [require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }]
+]
+
+const rehypePlugins = [[require('rehype-katex'), { strict: false }]]
 /** @type {import('@docusaurus/types').Config} */
 const fullUrl = new URL(baseUrl, siteUrl).toString()
 const config = {
@@ -136,7 +141,8 @@ const config = {
           editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
           sidebarPath: false,
           breadcrumbs: false,
-          remarkPlugins: [npm2yarnPlugin],
+          remarkPlugins,
+          rehypePlugins,
         },
         pages: {
           path: 'src/pages',
@@ -149,7 +155,8 @@ const config = {
             '**/__tests__/**',
           ],
           mdxPageComponent: '@theme/MDXPage',
-          remarkPlugins: [npm2yarnPlugin],
+          remarkPlugins,
+          rehypePlugins,
         },
         theme: {
           customCss: require.resolve('./src/scss/custom.scss'),
@@ -171,7 +178,8 @@ const config = {
         editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
         sidebarPath: require.resolve('./snaps-sidebar.js'),
         breadcrumbs: false,
-        remarkPlugins: [npm2yarnPlugin],
+        remarkPlugins,
+        rehypePlugins,
         admonitions: {
           keywords: [
             'info',
@@ -197,7 +205,8 @@ const config = {
         editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
         sidebarPath: require.resolve('./gator-sidebar.js'),
         breadcrumbs: false,
-        remarkPlugins: [npm2yarnPlugin],
+        remarkPlugins,
+        rehypePlugins,
         sidebarCollapsed: false,
         includeCurrentVersion: true,
         // Set to the latest release.
@@ -225,7 +234,8 @@ const config = {
         editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
         sidebarPath: require.resolve('./services-sidebar.js'),
         breadcrumbs: false,
-        remarkPlugins: [npm2yarnPlugin],
+        remarkPlugins,
+        rehypePlugins,
       },
     ],
     [
@@ -237,7 +247,8 @@ const config = {
         editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
         sidebarPath: require.resolve('./dashboard-sidebar.js'),
         breadcrumbs: false,
-        remarkPlugins: [npm2yarnPlugin],
+        remarkPlugins,
+        rehypePlugins,
       },
     ],
     [
@@ -249,7 +260,8 @@ const config = {
         editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
         sidebarPath: require.resolve('./wallet-sidebar.js'),
         breadcrumbs: false,
-        remarkPlugins: [npm2yarnPlugin],
+        remarkPlugins,
+        rehypePlugins,
         sidebarItemsGenerator: async function ({ defaultSidebarItemsGenerator, ...args }) {
           const sidebarItems = await defaultSidebarItemsGenerator(args)
           const dynamicItems = await fetchAndGenerateDynamicSidebarItems(
@@ -273,7 +285,22 @@ const config = {
         editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
         sidebarPath: require.resolve('./sdk-sidebar.js'),
         breadcrumbs: false,
-        remarkPlugins: [npm2yarnPlugin],
+        remarkPlugins,
+        rehypePlugins,
+      },
+    ],
+
+    [
+      '@docusaurus/plugin-content-docs',
+      {
+        id: 'embedded-wallets',
+        path: 'embedded-wallets',
+        routeBasePath: 'embedded-wallets',
+        editUrl: 'https://github.com/MetaMask/metamask-docs/edit/main/',
+        sidebarPath: require.resolve('./ew-sidebar.js'),
+        breadcrumbs: false,
+        remarkPlugins,
+        rehypePlugins,
       },
     ],
     './src/plugins/plugin-json-rpc.ts',
@@ -426,6 +453,10 @@ const config = {
                 label: 'Delegation Toolkit',
                 to: '/delegation-toolkit',
               },
+              {
+                label: 'Embedded Wallets',
+                to: '/embedded-wallets',
+              },
               {
                 label: 'Snaps',
                 to: '/snaps',
@@ -527,7 +558,7 @@ const config = {
       },
       prism: {
         theme: codeTheme,
-        additionalLanguages: ['csharp', 'gradle', 'bash', 'json'],
+        additionalLanguages: ['csharp', 'gradle', 'bash', 'json', 'java', 'kotlin', 'swift', 'groovy', 'dart'],
         magicComments: [
           {
             className: 'theme-code-block-highlighted-line',

embedded-wallets/README.mdx

@@ -0,0 +1,131 @@
+---
+title: What are Embedded Wallets?
+image: 'img/docs-meta-cards/documentation-card.png'
+sidebar_label: What are Embedded Wallets?
+description: 'What are MetaMask Embedded Wallets? | Documentation - MetaMask Embedded Wallets'
+---
+
+import BrowserOnly from '@docusaurus/BrowserOnly'
+
+import Tiles from '@theme/Tiles'
+
+export const GetStarted = [
+  {
+    name: '',
+    description: '',
+    tiles: [
+      {
+        key: 'react',
+        title: 'React',
+        icon: 'logo-react.png',
+        path: '/embedded-wallets/sdk/react',
+      },
+      {
+        key: 'vue',
+        title: 'Vue',
+        icon: 'logo-vue.png',
+        path: '/embedded-wallets/sdk/vue',
+      },
+      {
+        key: 'js',
+        title: 'JavaScript',
+        icon: 'logo-js.png',
+        path: '/embedded-wallets/sdk/js',
+      },
+      {
+        key: 'android',
+        title: 'Android',
+        icon: 'logo-android.png',
+        path: '/embedded-wallets/sdk/android',
+      },
+      {
+        key: 'ios',
+        title: 'iOS',
+        icon: 'logo-apple.png',
+        path: '/embedded-wallets/sdk/ios',
+      },
+      {
+        key: 'react-native',
+        title: 'React Native',
+        icon: 'logo-react.png',
+        path: '/embedded-wallets/sdk/react-native',
+      },
+      {
+        key: 'flutter',
+        title: 'Flutter',
+        icon: 'logo-flutter.png',
+        path: '/embedded-wallets/sdk/flutter',
+      },
+      {
+        key: 'unity',
+        title: 'Unity',
+        icon: 'logo-unity.png',
+        path: '/embedded-wallets/sdk/unity',
+      },
+      {
+        key: 'unreal',
+        title: 'Unreal Engine',
+        icon: 'logo-unreal.png',
+        path: '/embedded-wallets/sdk/unreal',
+      },
+    ],
+
+}, ]
+
+MetaMask Embedded Wallets (formerly Web3Auth) is a pluggable embedded wallet infrastructure that simplifies Web3 wallet integration and user onboarding. It supports OAuth-based logins and multiple platforms, allowing users to access Web3 applications through familiar authentication methods in under a minute.
+
+Users enjoy seamless onboarding while maintaining full control of their non-custodial wallets, ensuring both convenience and security.
+
+:::note
+
+The SDKs are now branded as MetaMask Embedded Wallet SDKs (formerly Web3Auth Plug and Play SDKs). Package names and APIs remain Web3Auth (for example, Web3Auth React SDK), and code snippets may reference `web3auth` identifiers.
+
+:::
+
+## Get Started
+
+<Tiles tileGroups={GetStarted} />
+
+## Key Features
+
+<BrowserOnly>
+  {() => {
+    const ModalAnim = require('@site/src/components/ModalAnim').default
+    return <ModalAnim />
+  }}
+</BrowserOnly>
+
+### 🔐 Authentication Made Simple
+
+Get your users started in seconds with familiar login methods they already use:
+
+- Sign in with Google, Twitter, GitHub and other popular social accounts
+- Passwordless login via email, SMS, authenticator apps or passkeys
+- Bring your own auth system while leveraging our secure wallet infrastructure
+
+### 🛡️ Bank-Grade Security
+
+Enterprise-level protection for your users' digital assets:
+
+- Advanced MPC technology splits keys across multiple parties
+- Users maintain 100% control of their non-custodial wallets
+- Distributed architecture prevents single points of failure
+- Multiple backup options for worry-free recovery
+
+### 💻 Built for Developers
+
+Integrate MetaMask Embedded Wallets into your app with minimal effort:
+
+- Drop-in solution works with your existing auth system
+- No complex migrations or infrastructure changes needed
+- Full control to customize the look and feel
+- Support for web, mobile, and gaming platforms
+
+### 👥 Designed for Users
+
+The smoothest path to Web3 for your users:
+
+- Get started in under 60 seconds
+- No crypto knowledge needed
+- Users own and control their wallets
+- Simple, reliable account recovery