diff --git a/docusaurus.config.js b/docusaurus.config.js index d49bfc2eb4e..9f786df226f 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -412,6 +412,12 @@ const config = { }, }, }, + announcementBar: { + id: 'support_us', + content: + 'NEW! Build embedded wallets with MetaMask using the Embedded Wallets SDK. Instantly onboard users with social logins, passkeys, and more.', + isCloseable: false, + }, }), } diff --git a/sdk/introduction/welcome.md b/sdk/introduction/welcome.md index 493462233ab..363ab43a141 100644 --- a/sdk/introduction/welcome.md +++ b/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: diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 9c5ce534c37..9d938a71f10 100644 --- a/src/pages/index.tsx +++ b/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', diff --git a/src/scss/custom.scss b/src/scss/custom.scss index 5002169ab5a..f7531a7d577 100644 --- a/src/scss/custom.scss +++ b/src/scss/custom.scss @@ -768,4 +768,37 @@ ol { .resources-dropdown-menu a { width: 100%; // Makes each box take full width of dropdown } -} \ No newline at end of file +} + +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); + } + } + } +}