docs: add Capsule to the list of signers (#57)

* add capsule signer docs

* Update site/smart-accounts/signers/capsule.md

Co-authored-by: Michael Moldoveanu <[email protected]>

* minor copy change to match capsule docs

---------

Co-authored-by: Michael Moldoveanu <[email protected]>

site/.vitepress/config.ts

@@ -47,6 +47,7 @@ export default defineConfig({
             base: "/smart-accounts/signers",
             link: "/overview",
             items: [
+              { text: "Capsule", link: "/capsule" },
               { text: "Magic.Link", link: "/magic-link" },
               { text: "Turnkey", link: "/turnkey" },
               { text: "Web3Auth", link: "/web3auth" },

site/smart-accounts/signers/capsule.md

@@ -0,0 +1,89 @@
+---
+outline: deep
+head:
+  - - meta
+    - property: og:title
+      content: Capsule
+  - - meta
+    - name: description
+      content: Guide to use Capsule as a signer
+  - - meta
+    - property: og:description
+      content: Guide to use Capsule as a signer
+---
+
+# Capsule
+
+[Capsule](https://usecapsule.com/) is a signing solution that you can use to create secure, embedded MPC wallets with just an email or a social login. Capsule wallets are portable across applications, recoverable, and programmable, so your users do not need to create different signers or contract accounts for every application they use.
+
+Combining Capsule with Account Kit allows you to get the best of both on and off-chain programmability. You can use Capsule to create a wallet that works across apps, and then connect it to Account Kit to create expressive Smart Contract Accounts for your users!
+
+## Integration
+
+Getting started with Capsule is easy-- simply get access to the SDK and an API key by filling out [this form](https://form.typeform.com/to/hLaJeYJW). From there, if you're adding additional permissions or automation and would like deeper support, please refer to our [full developer docs](https://docs.usecapsule.com) or get in touch via [email protected]
+
+### Install the SDK
+
+Web
+::: code-group
+
+```bash [npm]
+npm i -s @usecapsule/web-sdk
+```
+
+```bash [yarn]
+yarn add @usecapsule/web-sdk
+```
+
+:::
+
+React Native
+::: code-group
+
+```bash [npm]
+npm i -s @usecapsule/react-native-sdk
+```
+
+```bash [yarn]
+yarn add @usecapsule/react-native-sdk
+```
+
+:::
+
+### Create a SmartAccountSigner
+
+Next, setup the Capsule SDK and create a `SmartAccountSigner`
+
+<<< @/snippets/capsule.ts
+
+### Use it with LightAccount
+
+Let's see it in action with `aa-alchemy` and `LightSmartContractAccount` from `aa-accounts`:
+::: code-group
+
+```ts [example.ts]
+import { AlchemyProvider } from "@alchemy/aa-alchemy";
+import { LightSmartContractAccount } from "@alchemy/aa-accounts";
+import { sepolia } from "viem/chains";
+import { capsuleSigner } from "./capsule";
+
+const chain = sepolia;
+const provider = new AlchemyProvider({
+  apiKey: "ALCHEMY_API_KEY",
+  chain,
+  entryPointAddress: "0x...",
+}).connect(
+  (rpcClient) =>
+    new LightSmartContractAccount({
+      entryPointAddress: "0x...",
+      chain: rpcClient.chain,
+      owner: capsuleSigner,
+      factoryAddress: "0x...",
+      rpcClient,
+    })
+);
+```
+
+<<< @/snippets/capsule.ts
+
+:::

site/snippets/capsule.ts

@@ -0,0 +1,28 @@
+import { WalletClientSigner, type SmartAccountSigner } from "@alchemy/aa-core";
+import Capsule, { createCapsuleViemClient, Environment } from "@usecapsule/web-sdk";
+import { http } from "viem";
+import { sepolia } from "viem/chains";
+
+
+// get an API Key by filling out [this form](https://form.typeform.com/to/hLaJeYJW)
+const CAPSULE_API_KEY = null
+
+// Capsule's viem client supports custom chains and providers
+// Here we've included Alchemy's sepolia provider
+const CHAIN = sepolia
+const CHAIN_PROVIDER = "https://eth-sepolia.g.alchemy.com/v2/ALCHEMY_API_KEY"
+
+// Instantiate the Capsule SDK
+// Use the DEVELOPMENT environment for development and PRODUCTION for releases
+const capsule = new Capsule(Environment.DEVELOPMENT, CAPSULE_API_KEY);
+
+// returns a viem client that wraps capsule for key methods
+const capsuleClient = createCapsuleViemClient(capsule, {
+  chain: CHAIN,
+  transport: http(CHAIN_PROVIDER),
+});
+
+// a smart account signer you can use as an owner on ISmartContractAccount
+export const capsuleSigner: SmartAccountSigner = new WalletClientSigner(
+  capsuleClient
+);