Skip to content

Commit c1733fc

Browse files
committed
Add docs to integrate WalletKit as an EOA signer
1 parent eed50ea commit c1733fc

3 files changed

Lines changed: 78 additions & 0 deletions

File tree

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
# Misc
1212
.DS_Store
13+
.idea/
1314
.env.local
1415
.env.development.local
1516
.env.test.local
Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
# WalletKit
6+
7+
<img alt="WalletKit" src="/img/walletkit_overview.png" />
8+
9+
[WalletKit](https://walletkit.com) is an all-in-one platform for adding smart, gasless wallets to your app. WalletKit also offers pre-built components for onboarding users with email and social logins, which can be integrated in under 15 minutes using their React SDK or the wagmi connector. Alternatively, build completely bespoke experiences for your users using their Wallets API.
10+
11+
This guide shows you how to use WalletKit's pre-built onboarding components to create a smart contract account powered by ZeroDev.
12+
13+
### Integration Guide
14+
15+
#### Install WalletKit and ZeroDev
16+
17+
```bash [npm]
18+
npm i @walletkit/react-connect walletkit-js @zerodev/sdk
19+
```
20+
21+
#### Setup WalletKit
22+
23+
Initialize `WalletKitConnect` with your Project ID and wrap your app with `WalletKitProvider`, adding it as close to the root as possible.
24+
25+
You can get your Project ID from the API Keys page in the [WalletKit Dashboard](https://app.walletkit.com).
26+
27+
```ts
28+
import {WalletKitConnect} from "@walletkit/react-connect"
29+
30+
const wkConnect = new WalletKitConnect({
31+
projectId: '<WalletKit-Project-ID>',
32+
33+
// WalletKit defaults to smart contract based wallets.
34+
// In this case, we want to create an EOA wallet.
35+
walletType: 'eoa',
36+
});
37+
38+
export function App() {
39+
return (
40+
<WalletKitProvider connect={wkConnect}>
41+
...
42+
</WalletKitProvider>
43+
)
44+
}
45+
```
46+
47+
:::tip
48+
49+
If you'd like to integrate WalletKit with wagmi, check out
50+
the [installation docs here](https://docs.walletkit.com/connect/installation).
51+
52+
:::
53+
54+
#### Configure ZeroDev's ECDSAProvider
55+
56+
```ts
57+
import {useWalletKit, type WalletKitConnect} from "@walletkit/react-connect"
58+
59+
const walletKit: WalletKitConnect = useWalletKit()
60+
61+
// Prompt the user to create an EOA wallet using their email or social login.
62+
await walletKit.connect()
63+
64+
// Set the EOA wallet, created by WalletKit, the owner for this smart contract
65+
// account
66+
const provider = await ECDSAProvider.init({
67+
projectId: '<Zero-Dev-Project-ID>',
68+
owner: walletKit.ethereumSigner,
69+
})
70+
71+
// Returns the smart contract account address
72+
await provider.getAddress()
73+
```
74+
75+
---
76+
77+
And that's it 🎉 You can now use the `provider` to [send transactions](/use-wallets/send-transactions) and [sponsor gas](/use-wallets/pay-gas-for-users).

static/img/walletkit_overview.png

655 KB
Loading

0 commit comments

Comments
 (0)