Skip to content

Add link to Embedded wallets #2069

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bgravenorst merged 4 commits into from
Jun 2, 2025
Merged

Add link to Embedded wallets #2069

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8993af2
Add embedded wallets.
bgravenorst May 30, 2025
d0d6b0f
Stylesheet updates.
bgravenorst Jun 1, 2025
67ddccd
Merge branch 'main' into embedded-wallet
bgravenorst Jun 2, 2025
6070b9b
Apply feedback.
bgravenorst Jun 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
Copy link

Copilot AI Jun 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] Avoid inline styles in the announcementBar content string. Extract the bold styling into a CSS class in custom.scss to maintain separation of concerns.

Copilot uses AI. Check for mistakes.
isCloseable: false,
},
}),
}

Expand Down
5 changes: 5 additions & 0 deletions sdk/introduction/welcome.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
7 changes: 7 additions & 0 deletions src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
35 changes: 34 additions & 1 deletion src/scss/custom.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}
}
Loading