Add link to Embedded wallets (#2069)

* Add embedded wallets.

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

* Stylesheet updates.

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

* Apply feedback.

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

---------

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

Author: bgravenorst

docusaurus.config.js

@@ -412,6 +412,12 @@ const config = {
           },
         },
       },
+      announcementBar: {
+        id: 'support_us',
+        content:
+          '<span style="font-weight: 600">NEW!</span> Build embedded wallets with MetaMask using the <a target="_blank" rel="noopener noreferrer" href="https://web3auth.io/docs">Embedded Wallets SDK</a>. Instantly onboard users with social logins, passkeys, and more.',
+        isCloseable: false,
+      },
     }),
 }
 

sdk/introduction/welcome.md

@@ -16,6 +16,11 @@ With the SDK, you can:
 
 [Get started with JavaScript and Wagmi.](quickstart/javascript-wagmi.md)
 
+:::tip Build embedded wallet experiences that work seamlessly with MetaMask
+Introducing our latest [Embedded Wallets SDK](https://web3auth.io/docs) (previously Web3Auth), you can now onboard users
+instantly and design seamless onchain experiences with social logins, passkeys and more.
+:::
+
 ## Why use the SDK?
 
 The benefits of using MetaMask SDK include the following:

src/pages/index.tsx

@@ -28,6 +28,13 @@ export default function Home(): JSX.Element {
               "Use the Wallet API to integrate your dapp with MetaMask. Connect to the MetaMask browser extension and interact with your users' accounts.",
             href: '/wallet',
             theme: '',
+          },
+                    {
+            title: 'Embedded Wallets',
+            description:
+              'Use the Embedded Wallets SDK (Web3Auth) to onboard power users and first-time users in seconds via social logins, passkeys, or by integrating your own authentication providers.',
+            href: 'https://web3auth.io/docs',
+            theme: '',
           },
           {
             title: 'Snaps',

src/scss/custom.scss

@@ -768,4 +768,37 @@ ol {
   .resources-dropdown-menu a {
     width: 100%; // Makes each box take full width of dropdown
   }
-}
+}
+
+div[class^='announcementBar_'] {
+  font-family: var(--font-mm-centra);
+  font-size: 1.4rem;
+  padding: 1rem 2rem;
+  text-align: center;
+  border-bottom: 1px solid var(--general-gray-light);
+  background-color: var(--developer-purple-light);
+  color: var(--color-text);
+
+  a {
+    color: var(--ifm-link-color);
+    text-decoration: underline;
+    font-weight: 500;
+
+    &:hover {
+      color: var(--ifm-link-hover-color);
+    }
+  }
+
+  [data-theme='dark'] & {
+    background-color: var(--developer-purple-light);
+    color: var(--general-black);
+
+    a {
+      color: var(--general-black);
+
+      &:hover {
+        color: var(--developer-purple);
+      }
+    }
+  }
+}