Skip to content

Commit fb9df1b

Browse files
bgravenorstbgravenorst
authored
Merge branch 'main' into celo-sepolia
2 parents 8e2546f + 3958571 commit fb9df1b

File tree

6 files changed

+275
-6
lines changed

6 files changed

+275
-6
lines changed

‎embedded-wallets/connect-blockchain/_general-connect-blockchain/_celo.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import TabItem from '@theme/TabItem'
55
defaultValue="mainnet"
66
values={[
77
{ label: "Mainnet", value: "mainnet" },
8-
{ label: "Alfajores Testnet", value: "alfajores" },
8+
{ label: "Sepolia Testnet", value: "sepolia" },
99
]}
1010
>
1111
<TabItem value="mainnet">
@@ -19,12 +19,12 @@ import TabItem from '@theme/TabItem'
1919

2020
</TabItem>
2121

22-
<TabItem value="alfajores">
22+
<TabItem value="sepolia">
2323

24-
- **Chain ID:** 0xaef3
25-
- **Public RPC URL:** https://alfajores-forno.celo-testnet.org
26-
- **Display Name:** Celo Alfajores Testnet
27-
- **Block Explorer Link:** https://alfajores-blockscout.celo-testnet.org
24+
- **Chain ID:** 0xaa044c
25+
- **Public RPC URL:** https://forno.celo-sepolia.celo-testnet.org
26+
- **Display Name:** Celo Sepolia Testnet
27+
- **Block Explorer Link:** https://celo-sepolia.blockscout.com/
2828
- **Ticker:** CELO
2929
- **Ticker Name:** Celo
3030

‎gator-sidebar.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,15 @@ const sidebar = {
5858
'guides/smart-accounts/send-user-operation',
5959
'guides/smart-accounts/send-gasless-transaction',
6060
'guides/smart-accounts/generate-multisig-signature',
61+
{
62+
type: 'category',
63+
label: 'Configure signers',
64+
collapsed: true,
65+
items: [
66+
'guides/smart-accounts/signers/dynamic',
67+
'guides/smart-accounts/signers/embedded-wallets',
68+
],
69+
},
6170
],
6271
},
6372
{

‎gator_versioned_docs/version-0.2.0/guides/advanced-permissions/execute-on-metamask-users-behalf.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ In this guide, you'll request an ERC-20 periodic transfer permission from a Meta
2121
- [Install and set up the Smart Accounts Kit](../../get-started/install.md)
2222
- [Install MetaMask Flask 13.5.0 or later](/snaps/get-started/install-flask)
2323

24+
## Steps
25+
2426
### 1. Set up a Wallet Client
2527

2628
Set up a [Viem Wallet Client](https://viem.sh/docs/clients/wallet) using Viem's `createWalletClient` function. This client will

‎smart-accounts-kit/guides/advanced-permissions/execute-on-metamask-users-behalf.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ In this guide, you'll request an ERC-20 periodic transfer permission from a Meta
2121
- [Install and set up the Smart Accounts Kit](../../get-started/install.md)
2222
- [Install MetaMask Flask 13.5.0 or later](/snaps/get-started/install-flask)
2323

24+
## Steps
25+
2426
### 1. Set up a Wallet Client
2527

2628
Set up a [Viem Wallet Client](https://viem.sh/docs/clients/wallet) using Viem's `createWalletClient` function. This client will

‎smart-accounts-kit/guides/smart-accounts/signers/dynamic.md‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
---
2+
description: Learn how to use Dynamic signer with MetaMask Smart Accounts.
3+
sidebar_label: Dynamic
4+
keywords: [dynamic, smart account, signer, metamask smart account]
5+
---
6+
7+
# Use Dynamic with MetaMask Smart Accounts
8+
9+
[Dynamic](https://www.dynamic.xyz/) is an embedded wallet solution that enables seamless social login and passkey based
10+
wallets, making user onboarding easier. MetaMask Smart Accounts is a signer agnostic implementation
11+
that allows you to use Dynamic's EOA wallet as a signer for MetaMask Smart Accounts.
12+
13+
View the complete code for this guide at [gator-examples repository](https://github.com/MetaMask/gator-examples/tree/main/examples/smart-accounts/signers/dynamic).
14+
15+
:::info
16+
This guide is targeted towards React and React-based frameworks.
17+
:::
18+
19+
## Prerequisites
20+
21+
- Install [Node.js](https://nodejs.org/en/blog/release/v18.18.0) v18 or later.
22+
- Install [Yarn](https://yarnpkg.com/),
23+
[npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), or another package manager
24+
- A [Dynamic Environment ID](https://www.dynamic.xyz/docs/developer-dashboard/tokens-api-keys#environment-id)
25+
26+
## Steps
27+
28+
### 1. Install dependencies
29+
30+
Install the following dependencies:
31+
32+
```bash npm2yarn
33+
npm install @dynamic-labs/ethereum @dynamic-labs/sdk-react-core @dynamic-labs/wagmi-connector @metamask/smart-accounts-kit @tanstack/react-query wagmi viem
34+
```
35+
36+
### 2. Create the Dynamic provider
37+
38+
In this step, you'll configure the [`DynamicContextProvider`](https://www.dynamic.xyz/docs/react-sdk/providers/providers-introduction#dynamic-context-provider) component to provide the Dynamic context
39+
to your application. You'll also use the [`DynamicWagmiConnector`](https://www.dynamic.xyz/docs/react-sdk/providers/providers-introduction#dynamic-wagmi-connector) to integrate Dynamic with Wagmi. This
40+
connector enables you to use Wagmi hooks with Dynamic.
41+
42+
Once you have created the `DynamicProvider`, you must wrap it at the root of your application so
43+
that the rest of your application has access to the Dynamic context.
44+
45+
For the advance configuration, see how to [configure Dynamic & Wagmi](https://www.dynamic.xyz/docs/react-sdk/using-wagmi).
46+
47+
<Tabs>
48+
<TabItem value = "provider.ts">
49+
50+
```ts
51+
import { QueryClientProvider } from "@tanstack/react-query";
52+
import { WagmiProvider } from "wagmi";
53+
import { ReactNode } from "react";
54+
import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
55+
import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";
56+
import { DynamicWagmiConnector } from "@dynamic-labs/wagmi-connector";
57+
import { wagmiConfig, queryClient } from "./config.ts"
58+
59+
export function DynamicProvider({ children }: { children: ReactNode }) {
60+
return (
61+
<DynamicContextProvider
62+
settings={{
63+
// Get your environment id at https://app.dynamic.xyz/dashboard/developer
64+
environmentId: "<YOUR_DYNAMIC_ENVIRONMENT_ID>",
65+
walletConnectors: [EthereumWalletConnectors],
66+
}}
67+
>
68+
<QueryClientProvider client={queryClient}>
69+
<WagmiProvider config={wagmiConfig}>
70+
<DynamicWagmiConnector>
71+
{children}
72+
</DynamicWagmiConnector>
73+
</WagmiProvider>
74+
</QueryClientProvider>
75+
</DynamicContextProvider >
76+
);
77+
}
78+
```
79+
80+
</TabItem>
81+
82+
<TabItem value = "config.ts">
83+
84+
```ts
85+
import { QueryClient } from "@tanstack/react-query";
86+
import { createConfig, http } from "wagmi";
87+
import { sepolia } from "viem/chains";
88+
89+
export const queryClient = new QueryClient();
90+
91+
export const wagmiConfig = createConfig({
92+
chains: [sepolia],
93+
ssr: true,
94+
transports: {
95+
[sepolia.id]: http(),
96+
},
97+
});
98+
```
99+
100+
</TabItem>
101+
</Tabs>
102+
103+
### 3. Create a smart account
104+
105+
Once the user has connected their wallet, use the [Wallet Client](https://viem.sh/docs/clients/wallet) from Wagmi as the signer to create a
106+
MetaMask smart account.
107+
108+
```ts
109+
import { Implementation, toMetaMaskSmartAccount } from "@metamask/smart-accounts-kit";
110+
import { useAccount, usePublicClient, useWalletClient } from "wagmi";
111+
112+
const { address } = useAccount();
113+
const publicClient = usePublicClient();
114+
const { data: walletClient } = useWalletClient();
115+
116+
// Additional check to make sure the Dyanmic wallet is connected
117+
// and values are available.
118+
if (!address || !walletClient || !publicClient ) {
119+
// Handle the error case
120+
}
121+
122+
const smartAccount = await toMetaMaskSmartAccount({
123+
client: publicClient,
124+
implementation: Implementation.Hybrid,
125+
deployParams: [address, [], [], []],
126+
deploySalt: "0x",
127+
signer: { walletClient },
128+
});
129+
```
130+
131+
## Next steps
132+
133+
- See how to [send a user operation](../send-user-operation.md).
134+
- To sponsor gas for end users, see how to [send a gasless transaction](../send-gasless-transaction.md).

‎smart-accounts-kit/guides/smart-accounts/signers/embedded-wallets.md‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
---
2+
description: Learn how to use MetaMask Embedded Wallets (Web3Auth) with MetaMask Smart Accounts.
3+
sidebar_label: MetaMask Embedded Wallets
4+
keywords: [web3auth, smart account, signer, metamask smart account]
5+
---
6+
7+
# Use MetaMask Embedded Wallets (Web3Auth) with MetaMask Smart Accounts
8+
9+
[MetaMask Embedded Wallets (Web3Auth)](/embedded-wallets/) provides a pluggable embedded wallet
10+
infrastructure to simplify Web3 wallet integration and user onboarding. It supports social logins allowing
11+
users to access Web3 applications through familiar authentication methods in under a minute.
12+
13+
MetaMask Smart Accounts is a signer agnostic implementation that allows you to use Embedded Wallets as a signer for MetaMask Smart Accounts.
14+
15+
:::info
16+
This guide is targeted towards React and React-based frameworks.
17+
:::
18+
19+
## Prerequisites
20+
21+
- Install [Node.js](https://nodejs.org/en/blog/release/v18.18.0) v18 or later
22+
- Install [Yarn](https://yarnpkg.com/),
23+
[npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), or another package manager
24+
- A [Embedded Wallets (Web3Auth) Client ID](/embedded-wallets/dashboard)
25+
26+
## Steps
27+
28+
### 1. Install dependencies
29+
30+
Install the [Smart Accounts Kit](https://www.npmjs.com/package/@metamask/smart-accounts-kit) and other dependencies in your project:
31+
32+
```bash npm2yarn
33+
npm install @metamask/smart-accounts-kit @web3auth/modal wagmi @tanstack/react-query viem
34+
```
35+
36+
### 2. Create the Web3Auth provider
37+
38+
Configure the `Web3AuthProvider` component to provide the Embedded Wallets context to your application.
39+
You'll also use the `WagmiProvider` to integrate Embedded Wallets with Wagmi.
40+
This connector enables you to use Wagmi hooks with Embedded Wallets.
41+
42+
Once you've created the `Web3AuthAppProvider`, wrap it at the root of your application so
43+
that the rest of your application has access to the Embedded Wallets context.
44+
45+
For the advance configuration, see [Embedded Wallets guide](https://docs.metamask.io/embedded-wallets/sdk/react/advanced/).
46+
47+
<Tabs>
48+
<TabItem value = "provider.ts">
49+
50+
```ts
51+
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
52+
import { ReactNode } from "react";
53+
import { Web3AuthProvider } from "@web3auth/modal/react";
54+
import { WagmiProvider } from "@web3auth/modal/react/wagmi";
55+
import { web3authConfig } from "./config.ts";
56+
57+
const queryClient = new QueryClient();
58+
59+
export function Web3AuthAppProvider({ children }: { children: ReactNode }) {
60+
return (
61+
<Web3AuthProvider config={web3authConfig}>
62+
<QueryClientProvider client={queryClient}>
63+
<WagmiProvider>{children}</WagmiProvider>
64+
</QueryClientProvider>
65+
</Web3AuthProvider>
66+
);
67+
}
68+
```
69+
70+
</TabItem>
71+
72+
<TabItem value = "config.ts">
73+
74+
```ts
75+
import { WEB3AUTH_NETWORK_TYPE, Web3AuthOptions } from "@web3auth/modal";
76+
77+
const web3AuthOptions: Web3AuthOptions = {
78+
clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string,
79+
web3AuthNetwork: process.env
80+
.NEXT_PUBLIC_WEB3AUTH_NETWORK as WEB3AUTH_NETWORK_TYPE,
81+
};
82+
83+
export const web3authConfig = {
84+
web3AuthOptions,
85+
};
86+
```
87+
88+
</TabItem>
89+
</Tabs>
90+
91+
### 3. Create a smart account
92+
93+
Once the user has connected their wallet, use the [Wallet Client](https://viem.sh/docs/clients/wallet) from Wagmi as the signer to create a
94+
MetaMask smart account.
95+
96+
```ts
97+
import { Implementation, toMetaMaskSmartAccount } from "@metamask/smart-accounts-kit";
98+
import { useAccount, usePublicClient, useWalletClient } from "wagmi";
99+
100+
const { address } = useAccount();
101+
const publicClient = usePublicClient();
102+
const { data: walletClient } = useWalletClient();
103+
104+
// Additional check to make sure the Dyanmic wallet is connected
105+
// and values are available.
106+
if (!address || !walletClient || !publicClient ) {
107+
// Handle the error case
108+
}
109+
110+
const smartAccount = await toMetaMaskSmartAccount({
111+
client: publicClient,
112+
implementation: Implementation.Hybrid,
113+
deployParams: [address, [], [], []],
114+
deploySalt: "0x",
115+
signer: { walletClient },
116+
});
117+
```
118+
119+
## Next steps
120+
121+
- See how to [send a user operations](../send-user-operation.md).
122+
- To sponsor gas for end users, see how to [send a gasless transaction](../send-gasless-transaction.md).

0 commit comments

Comments
 (0)