|
| 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). |
0 commit comments