diff --git a/account-kit/react/src/hooks/useDropAndReplaceUserOperation.ts b/account-kit/react/src/hooks/useDropAndReplaceUserOperation.ts index ac536c394b..e77307496f 100644 --- a/account-kit/react/src/hooks/useDropAndReplaceUserOperation.ts +++ b/account-kit/react/src/hooks/useDropAndReplaceUserOperation.ts @@ -60,9 +60,8 @@ export type UseDropAndReplaceUserOperationResult< * } from "@account-kit/react"; * * export function ComponentWithDropAndReplaceUO() { - * const { client } = useSmartAccountClient({ - * type: "MultiOwnerModularAccount", - * }); + * const { client } = useSmartAccountClient({}); + * * const { sendUserOperationAsync, isSendingUserOperation } = * useSendUserOperation({ * client, diff --git a/account-kit/react/src/hooks/useSendUserOperation.ts b/account-kit/react/src/hooks/useSendUserOperation.ts index 29b4794093..ddb17d3bae 100644 --- a/account-kit/react/src/hooks/useSendUserOperation.ts +++ b/account-kit/react/src/hooks/useSendUserOperation.ts @@ -90,9 +90,8 @@ export type UseSendUserOperationResult< * } from "@account-kit/react"; * * function ComponentWithSendUserOperation() { - * const { client } = useSmartAccountClient({ - * type: "MultiOwnerModularAccount", - * }); + * const { client } = useSmartAccountClient({}); + * * const { sendUserOperation, isSendingUserOperation } = useSendUserOperation({ * client, * // optional parameter that will wait for the transaction to be mined before returning diff --git a/account-kit/react/src/hooks/useSignMessage.ts b/account-kit/react/src/hooks/useSignMessage.ts index 87a689eb69..4a19f0aeef 100644 --- a/account-kit/react/src/hooks/useSignMessage.ts +++ b/account-kit/react/src/hooks/useSignMessage.ts @@ -55,9 +55,9 @@ export type UseSignMessageResult = { * @example * ```ts twoslash * import { useSignMessage, useSmartAccountClient } from "@account-kit/react"; - * * const data = "messageToSign" - * const { client } = useSmartAccountClient({ type: "LightAccount" }); + * const { client } = useSmartAccountClient({}); + * * const { signMessage, signMessageAsync, signedMessage, isSigningMessage, error } = useSignMessage({ * client, * // these are optional diff --git a/account-kit/react/src/hooks/useSignTypedData.ts b/account-kit/react/src/hooks/useSignTypedData.ts index 0a1063209b..6a5a200266 100644 --- a/account-kit/react/src/hooks/useSignTypedData.ts +++ b/account-kit/react/src/hooks/useSignTypedData.ts @@ -49,7 +49,6 @@ export type UseSignTypedDataResult = { * @example * ```ts twoslash * import { useSignTypedData, useSmartAccountClient } from "@account-kit/react"; - * * const typedData = { * types: { * Message: [{ name: "content", type: "string" }], @@ -57,7 +56,7 @@ export type UseSignTypedDataResult = { * primaryType: "Message", * message: { content: "Hello" }, * } - * const { client } = useSmartAccountClient({ type: "LightAccount" }); + * const { client } = useSmartAccountClient({}); * const { signTypedData, signTypedDataAsync, signedTypedData, isSigningTypedData, error } = useSignTypedData({ * client, * // these are optional diff --git a/account-kit/react/src/hooks/useSmartAccountClient.ts b/account-kit/react/src/hooks/useSmartAccountClient.ts index 12607e64ac..f59bd1491e 100644 --- a/account-kit/react/src/hooks/useSmartAccountClient.ts +++ b/account-kit/react/src/hooks/useSmartAccountClient.ts @@ -59,15 +59,7 @@ export function useSmartAccountClient< * ```ts twoslash * import { useSmartAccountClient } from "@account-kit/react"; * - * const { client, address, isLoadingClient } = useSmartAccountClient({ - * type: "LightAccount", - * accountParams: { - * salt?: 1n, - * factoryAddress?: '0x0000000000000000000000000000', - * initCode?: "0x0", - * accountAddress?: '0x0000000000000000000000000000' - * } - * }); + * const { client, address, isLoadingClient } = useSmartAccountClient({}); * ``` */ export function useSmartAccountClient({ diff --git a/account-kit/react/src/hooks/useWaitForUserOperationTransaction.ts b/account-kit/react/src/hooks/useWaitForUserOperationTransaction.ts index 39f3b588b8..503e0db73e 100644 --- a/account-kit/react/src/hooks/useWaitForUserOperationTransaction.ts +++ b/account-kit/react/src/hooks/useWaitForUserOperationTransaction.ts @@ -38,7 +38,7 @@ export type UseWaitForUserOperationTransactionResult = { * ```ts twoslash * import { useWaitForUserOperationTransaction, useSmartAccountClient } from "@account-kit/react"; * - * const { client } = useSmartAccountClient({ type: "LightAccount" }); + * const { client } = useSmartAccountClient({}); * const { * waitForUserOperationTransaction, * waitForUserOperationTransactionResult, diff --git a/site/pages/concepts/intro-to-account-kit.mdx b/site/pages/concepts/intro-to-account-kit.mdx index 8d6e4a9e52..e70ff1d6b0 100644 --- a/site/pages/concepts/intro-to-account-kit.mdx +++ b/site/pages/concepts/intro-to-account-kit.mdx @@ -32,7 +32,7 @@ Unlike other embedded wallet providers that only solve sign-up and key managemen Unlike EOAs, SCAs are programmable and can include logic. When we refer to SCAs, or smart accounts, we are typically talking about [ERC-4337](https://www.alchemy.com/overviews/what-is-account-abstraction) smart accounts. -Account Kit comes with two enterprise-grade, audited smart account implementations, [Modular Account](/smart-contracts/modular-account) and [Light Account](/smart-contracts/light-account). You can [choose](/smart-contracts/choosing-a-smart-account) the smart account that best fits your needs or bring your own smart account. +Account Kit comes with enterprise-grade, audited smart account implementations. We recommend using [Modular Account v2](/smart-contracts/modular-account-v2/overview). Learn more and [choose](/smart-contracts/choosing-a-smart-account) the smart account that best fits your needs or bring your own smart account. #### Why smart accounts? diff --git a/site/pages/concepts/middleware.mdx b/site/pages/concepts/middleware.mdx index 33b71fc9c8..bc141b70a1 100644 --- a/site/pages/concepts/middleware.mdx +++ b/site/pages/concepts/middleware.mdx @@ -22,6 +22,6 @@ As mentioned abve, the client can be configured with a series of middleware that 1. `dummyPaymasterAndData` - Generates a dummy paymaster and data for gas estimation if using a paymaster (default: noop) 2. `feeEstimator` - Estimates the fees for a user operation. If you are using our RPCs, it's important to use the [`alchemyFeeEstimator`](/reference/account-kit/infra/functions/alchemyFeeEstimator) middleware. 3. `gasEstimator` - Estimates the gas limits for a user operation. The default middleware calls the underlying bundler RPC to `eth_estimateUserOperationGas`. -4. `customMiddleware` - Allows you define custom middleware to run before requesting sponsorhip if there are any additional steps you need to take before requesting sponsorship. (default: noop) +4. `customMiddleware` - Allows you define custom middleware to run before requesting sponsorship if there are any additional steps you need to take before requesting sponsorship. (default: noop) 5. `paymasterAndData` - Requests a gas sponsorship from a paymaster. (default: noop) 6. `userOperationSimulator` - Simulates a user operation to check if it will be successful. (default: noop) diff --git a/site/pages/react/how-to-set-up-smart-account-client.mdx b/site/pages/react/how-to-set-up-smart-account-client.mdx new file mode 100644 index 0000000000..6457b8153c --- /dev/null +++ b/site/pages/react/how-to-set-up-smart-account-client.mdx @@ -0,0 +1,69 @@ +--- +title: How to set up a smart account client +description: Learn how to set up your smart account client to enable transactions onchain +--- + +# How to set up a smart account client + +Once users are [authenticated](/react/getting-started), you can start landing transactions onchain using a Smart Account Client. Setting up a new account client is easy using the `useSmartAccountClient` hook! + +This extends `viem`'s [Client](https://viem.sh/docs/clients/custom#build-your-own-client), enabling account creation, sending transactions, signing messages, sponsoring gas, and more. It's also EIP-1193 compliant, so you can swap it in for other web3 providers like `window.ethereum`. + +## Usage + +The following sets up a Smart Account Client that will allow you to create a new smart account and send transactions signed by your **[Alchemy Signer](/react/getting-started)**. + +```tsx twoslash +import { useSmartAccountClient } from "@account-kit/react"; + +const { client, address, isLoadingClient } = useSmartAccountClient({}); +``` + +The default smart account type is Modular Account V2 — the most cost-effective and advanced smart account option. You can specify other [account types](#account-type) with additional configuration. + +Note: React hooks only support Alchemy Signer. If you want to use a 3rd party signer, see this [guide](/third-party/signers). + +## Configuration Options + +You can customize your client by specifying additional parameters to change account type, add gas sponsorship, etc. These parameters are optional. + +### Account Type + +We recommend using [ModularAccountV2](/smart-contracts/modular-account-v2/overview) as it is the cheapest and most advanced Smart Account, but you can specify other smart contract account types as needed. Learn more about the different smart accounts [here](/smart-contracts/choosing-a-smart-account). + +- **`type`** (string) - Defines the smart account type. Options: + - `"ModularAccountV2"` (recommended and default) + - `"LightAccount"` + - `"MultiOwnerLightAccount"` + - `"MultiOwnerModularAccount"` + +Looking for 7702 support? Learn how to use advanced `ModularAccountV2` functionality [here](#TODO/702-guide). + +:::tip +Note: Changing the account type will deploy a different account. If you've already deployed an account for a user and want to change the underlying account type, you'll need to upgrade it. Learn how to upgrade [here](/smart-contracts/other-accounts/modular-account/upgrading-to-modular-account). +::: + +### Gas Sponsorship + +To improve transaction UX, we recommend sponsoring gas for users. + +- **`policyId`** (string) - [Gas Manager Policy ID](https://dashboard.alchemy.com/gas-manager/policy/create/?a=ak-docs) that enables gas sponsorship within policy limits + +See the [full guide](/react/sponsor-gas) for gas sponsorship. + +### Advanced options + +:::details[Options] + +| Usage | Parameter | Type | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Smart contract account implementation | `type` | One of `"ModularAccountV2"`, `"LightAccount"`, `"MultiOwnerLightAccount"`, `"MultiOwnerModularAccount"` | +| Sponsor gas for users. Get your policy ID [here](https://dashboard.alchemy.com/gas-manager) | `policyId` | `string` | +| Simulate user operations before sending (i.e. use [`alchemyUserOperationSimulator`](/reference/account-kit/infra/functions/alchemyUserOperationSimulator)) | `useSimulation` | `boolean` | +| Custom middleware to run before requesting sponsorship | `customMiddleware` | `ClientMiddlewareFn` | +| Override fee estimation middleware (if you are using our RPCs, it's important to use the default [`alchemyFeeEstimator`](/reference/account-kit/infra/functions/alchemyFeeEstimator)) | `feeEstimator` | `ClientMiddlewareFn` | +| Override gas estimation middleware (the default middleware calls the underlying bundler RPC to `eth_estimateUserOperationGas`) | `gasEstimator` | `ClientMiddlewareFn` | +| Override middleware that signs user operation(s) | `signUserOperation` | `ClientMiddlewareFn` | +| Advanced account params | `accountParams` | `AccountConfig` with the following fields: | + +::: diff --git a/site/pages/react/send-user-operations.mdx b/site/pages/react/send-user-operations.mdx index 680b95ac53..fad398eeae 100644 --- a/site/pages/react/send-user-operations.mdx +++ b/site/pages/react/send-user-operations.mdx @@ -13,8 +13,7 @@ If you want to sponsor the gas for a user, see our [guide](/react/sponsor-gas). ## Single user operation :::tip -In the below example, we use `LightAccount` as the underlying Smart Contract type. You can also use `MultiOwnerModularAccount` if you want to provide your users with an ERC-6900 compliant modular account, -or you can use `MultiOwnerLightAccount` if you want to support an account with multiple owners. +In the below example, we use `ModularAccountV2` as the underlying Smart Contract type, which is our default and recommended account. To learn more about all the account options, check out our guide [on choosing a smart account](/smart-contracts/choosing-a-smart-account). ::: ```tsx twoslash @@ -26,7 +25,7 @@ import { } from "@account-kit/react"; export default function MyOpSenderComponent() { - const { client } = useSmartAccountClient({ type: "LightAccount" }); + const { client } = useSmartAccountClient({}); const { sendUserOperation, isSendingUserOperation } = useSendUserOperation({ client, @@ -74,7 +73,7 @@ import { } from "@account-kit/react"; export default function MyOpSenderComponent() { - const { client } = useSmartAccountClient({ type: "LightAccount" }); + const { client } = useSmartAccountClient({}); const { sendUserOperation, isSendingUserOperation } = useSendUserOperation({ client, diff --git a/site/pages/react/sponsor-gas.mdx b/site/pages/react/sponsor-gas.mdx index 10bd08aaf2..98acc1c907 100644 --- a/site/pages/react/sponsor-gas.mdx +++ b/site/pages/react/sponsor-gas.mdx @@ -56,7 +56,6 @@ import { export default function MyComponent() { const { client } = useSmartAccountClient({ - type: "LightAccount", policyId: "GAS_MANAGER_POLICY_ID", }); const { sendUserOperation } = useSendUserOperation({ client }); diff --git a/site/pages/react/using-7702.mdx b/site/pages/react/using-7702.mdx new file mode 100644 index 0000000000..3c929bcae3 --- /dev/null +++ b/site/pages/react/using-7702.mdx @@ -0,0 +1,72 @@ +--- +title: Using EIP-7702 +description: Learn how to use EIP-7702 to enable smart account features for EOAs +--- + +# Using EIP-7702 + +## What is EIP-7702? + +[EIP-7702](https://eips.ethereum.org/EIPS/eip-7702) is an upcoming upgrade set to launch as part of the Ethereum Pectra hardfork. Specifically, EIP-7702 enables Externally Owned Accounts (EOAs) to use smart contract account features. + +This upgrade marks a pivotal moment in Ethereum’s journey toward account abstraction, a breakthrough designed to make onchain experiences smoother, smarter, and more accessible. EIP-7702 doesn’t replace Ethereum’s existing AA standard, ERC-4337. EIP-7702 was designed to be complementary to ERC-4337 and make it easier for those account abstraction features to reach users. + +- EIP-7702 enables EOAs to delegate control to smart contract accounts that can execute code directly from their addresses +- It is compatible with the prevailing AA standard, ERC-4437, so existing EOAs can enable smart account features without creating a new address and transferring assets +- For users, it will enable web2-like features, including account recovery and passkey sign-in for easier authentication, and web3 benefits like gas-sponsored transaction fees and paying for gas in any token, not just ETH + +[Learn more about EIP-7702](https://www.alchemy.com/blog/eip-7702-ethereum-pectra-hardfork). + +## When to use EIP-7702? + +**For developers with existing users and embedded wallets** + +Upgrade your existing embedded EOA users to smart accounts to enable features like batching and gas sponsorship. Account Kit makes this upgrade easy with compatible smart accounts and infrastructure. Follow [this guide](/smart-contracts/modular-account-v2/using-7702). + +**For developers who have not deployed their app** + +While ERC-4337 and EIP-7702 both enable account abstraction, they serve different needs. You can either: + +- **(Recommended)** Use ERC-4337 smart accounts from the start to leverage the fullest of Ethereum AA features such as maximum account programability, extensive transaction customization, and established tooling: get started [here](/react/how-to-set-up-smart-account-client) +- Use EIP-7702 smart EOAs: keep reading this guide + +[Explore here](https://www.alchemy.com/blog/eip-7702-ethereum-pectra-hardfork#adoption-and-security-considerations-for-application-developers) to decide what's best for you. + +## How to ship smart EOAs + +In this example, we will upgrade a **new** embedded EOA to a smart contract account ([Modular Account v2](/smart-contracts/modular-account-v2/overview)) and send a gasless transaction from the account. + +:::tip +Note: Sepolia EIP-7702 support is not yet live. For early access to testnet support, please reach out to account-abstraction@alchemy.com +::: + +The following sets up a Smart Account Client using the EIP-7702 supported version of a Modular Account v2. Make sure to first go through the [authentication setup](/react/getting-started) to generate a signer. + +```tsx twoslash +import { useSmartAccountClient } from "@account-kit/react"; + +const { client, address, isLoadingClient } = useSmartAccountClient({ + type: "ModularAccountV2", + accountParams: { + mode: "7702", + }, +}); +``` + +### 2. Send a sponsored transaction + +Now that you have a smart account client with an EIP-7702 supported smart account, you can leverage all of the easy-to-use React hooks to take action on the account. Account Kit will handle all of the complexity of delegating your EOA to the smart account and handling the special signature types. + +Continue on to [sending user operations](/react/send-user-operations) (aka smart account transactions) and [sponsoring gas](/react/sponsor-gas). + +## When can I use it? + +EIP-7702 will be supported on Sepolia starting March 5, and mainnet is expected to follow shortly after. Account Kit will support EIP-7702 integration on Day 1 at both milestones. + +Check out the [UI Demo](https://demo.alchemy.com) to see a live preview of these features in action! + +Want to experiment on other testnets before March 5? Reach out to us at account-abstraction@alchemy.com for early access to experimental networks. + +## Upgrading an existing EOA + +Want to upgrade your EOA to have smart contract functionality? Learn how to [here](/smart-contracts/modular-account-v2/using-7702). diff --git a/site/pages/reference/account-kit/react/hooks/useAccount.mdx b/site/pages/reference/account-kit/react/hooks/useAccount.mdx index def00afa2a..64a316e9fb 100644 --- a/site/pages/reference/account-kit/react/hooks/useAccount.mdx +++ b/site/pages/reference/account-kit/react/hooks/useAccount.mdx @@ -22,7 +22,7 @@ import { useAccount } from "@account-kit/react"; ## Usage -```ts +```ts twoslash import { useAccount } from "@account-kit/react"; const { account, address, isLoadingAccount } = useAccount({ diff --git a/site/pages/reference/account-kit/react/hooks/useAddPasskey.mdx b/site/pages/reference/account-kit/react/hooks/useAddPasskey.mdx index 3407e7f20a..1b84e58ba4 100644 --- a/site/pages/reference/account-kit/react/hooks/useAddPasskey.mdx +++ b/site/pages/reference/account-kit/react/hooks/useAddPasskey.mdx @@ -17,7 +17,7 @@ import { useAddPasskey } from "@account-kit/react"; ## Usage -```ts +```ts twoslash import { useAddPasskey } from "@account-kit/react"; const { addPasskey, isAddingPasskey, error } = useAddPasskey({ diff --git a/site/pages/reference/account-kit/react/hooks/useAuthError.mdx b/site/pages/reference/account-kit/react/hooks/useAuthError.mdx index f3157bb9e5..3d27493cc0 100644 --- a/site/pages/reference/account-kit/react/hooks/useAuthError.mdx +++ b/site/pages/reference/account-kit/react/hooks/useAuthError.mdx @@ -17,7 +17,7 @@ import { useAuthError } from "@account-kit/react"; ## Usage -```tsx +```tsx twoslash import { useAuthError } from "@account-kit/react"; const error = useAuthError(); diff --git a/site/pages/reference/account-kit/react/hooks/useAuthModal.mdx b/site/pages/reference/account-kit/react/hooks/useAuthModal.mdx index f3227e5899..5e6ac4b3e7 100644 --- a/site/pages/reference/account-kit/react/hooks/useAuthModal.mdx +++ b/site/pages/reference/account-kit/react/hooks/useAuthModal.mdx @@ -18,7 +18,8 @@ import { useAuthModal } from "@account-kit/react"; ## Usage -```tsx +```tsx twoslash +import React from "react"; import { useAuthModal } from "@account-kit/react"; const ComponentWithAuthModal = () => { diff --git a/site/pages/reference/account-kit/react/hooks/useAuthenticate.mdx b/site/pages/reference/account-kit/react/hooks/useAuthenticate.mdx index 9536cadc96..0bd742975d 100644 --- a/site/pages/reference/account-kit/react/hooks/useAuthenticate.mdx +++ b/site/pages/reference/account-kit/react/hooks/useAuthenticate.mdx @@ -21,7 +21,7 @@ import { useAuthenticate } from "@account-kit/react"; ## Usage -```ts +```ts twoslash import { useAuthenticate } from "@account-kit/react"; const { authenticate, authenticateAsync, isPending, error } = useAuthenticate({ diff --git a/site/pages/reference/account-kit/react/hooks/useBundlerClient.mdx b/site/pages/reference/account-kit/react/hooks/useBundlerClient.mdx index 672c8ee785..8cf920d7a1 100644 --- a/site/pages/reference/account-kit/react/hooks/useBundlerClient.mdx +++ b/site/pages/reference/account-kit/react/hooks/useBundlerClient.mdx @@ -7,8 +7,8 @@ description: Overview of the useBundlerClient method # useBundlerClient Custom [hook](https://github.com/alchemyplatform/aa-sdk/blob/main/account-kit/react/src/hooks/useBundlerClient.ts) to get a bundler client using the Alchemy account context. -It uses `useSyncExternalStore` to watch for any changes in the bundler client configuration and provides the updated bundler client. React hooks don’t handle their own state management directly, so they rely on external stores, like `useSyncExternalStore`, to manage state.. useBundlerClient’s only job is to call the bundler JSON RPC methods directly; it does not do additional processing, unlike useSmartAccountClient. For example, if you call sendUserOperation, it expects a fully formed user operation. -It is an extension of [Viem’s Public Client](https://viem.sh/docs/clients/public) and provides access to public actions, talking to public RPC APIs like getBlock, eth_call, etc. It does not require an account as context. +It uses `useSyncExternalStore` to watch for any changes in the bundler client configuration and provides the updated bundler client. React hooks don’t handle their own state management directly, so they rely on external stores, like `useSyncExternalStore`, to manage state. `useBundlerClient`’s only job is to call the bundler JSON RPC methods directly; it does not do additional processing, unlike `useSmartAccountClient`. For example, if you call `sendUserOperation`, it expects a fully formed user operation. +It is an extension of [Viem’s Public Client](https://viem.sh/docs/clients/public) and provides access to public actions, talking to public RPC APIs like `getBlock`, `eth_call`, etc. It does not require an account as context. Use cases: connecting with a EOA or checking for gas eligibility. ## Import @@ -19,7 +19,7 @@ import { useBundlerClient } from "@account-kit/react"; ## Usage -```ts +```ts twoslash import { useBundlerClient } from "@account-kit/react"; const bundlerClient = useBundlerClient(); diff --git a/site/pages/reference/account-kit/react/hooks/useChain.mdx b/site/pages/reference/account-kit/react/hooks/useChain.mdx index 2193b0428f..ae348b1265 100644 --- a/site/pages/reference/account-kit/react/hooks/useChain.mdx +++ b/site/pages/reference/account-kit/react/hooks/useChain.mdx @@ -21,7 +21,8 @@ import { useChain } from "@account-kit/react"; ## Usage -```tsx +```tsx twoslash +import React from "react"; import { useChain } from "@account-kit/react"; // Assuming the chain sepolia is defined in your initial createConfig call import { sepolia } from "@account-kit/infra"; diff --git a/site/pages/reference/account-kit/react/hooks/useClientActions.mdx b/site/pages/reference/account-kit/react/hooks/useClientActions.mdx index 1eb893484a..5861ad7527 100644 --- a/site/pages/reference/account-kit/react/hooks/useClientActions.mdx +++ b/site/pages/reference/account-kit/react/hooks/useClientActions.mdx @@ -19,14 +19,19 @@ import { useClientActions } from "@account-kit/react"; ## Usage -```tsx +```tsx twoslash +import React from "react"; +import { useSmartAccountClient } from "@account-kit/react"; +import { sessionKeyPluginActions } from "@account-kit/smart-contracts"; +import { useClientActions } from "@account-kit/react"; + const Foo = () => { const { client } = useSmartAccountClient({ type: "MultiOwnerModularAccount", }); const { executeAction } = useClientActions({ - client, - pluginActions: sessionKeyPluginActions, + client: client, + actions: sessionKeyPluginActions, }); executeAction({ diff --git a/site/pages/reference/account-kit/react/hooks/useConnect.mdx b/site/pages/reference/account-kit/react/hooks/useConnect.mdx index 79407b7d31..dbb2b047ec 100644 --- a/site/pages/reference/account-kit/react/hooks/useConnect.mdx +++ b/site/pages/reference/account-kit/react/hooks/useConnect.mdx @@ -1,5 +1,6 @@ --- # This file is autogenerated + title: useConnect description: Overview of the useConnect method --- @@ -17,6 +18,20 @@ Useful if you wnat to connect to an EOA. import { useConnect } from "@account-kit/react"; ``` +## Usage + +```ts twoslash +import { useConnect } from "@account-kit/react"; + +const { connectors, connect } = useConnect({ + // these are optional + onSuccess: () => { + // do something on success + }, + onError: (error) => console.error(error), +}); +``` + ## Parameters ### params diff --git a/site/pages/reference/account-kit/react/hooks/useDropAndReplaceUserOperation.mdx b/site/pages/reference/account-kit/react/hooks/useDropAndReplaceUserOperation.mdx index 6ebe3b1573..88b4509190 100644 --- a/site/pages/reference/account-kit/react/hooks/useDropAndReplaceUserOperation.mdx +++ b/site/pages/reference/account-kit/react/hooks/useDropAndReplaceUserOperation.mdx @@ -17,7 +17,8 @@ import { useDropAndReplaceUserOperation } from "@account-kit/react"; ## Usage -```tsx +```tsx twoslash +import React from "react"; import { useDropAndReplaceUserOperation, useSendUserOperation, @@ -25,9 +26,8 @@ import { } from "@account-kit/react"; export function ComponentWithDropAndReplaceUO() { - const { client } = useSmartAccountClient({ - type: "MultiOwnerModularAccount", - }); + const { client } = useSmartAccountClient({}); + const { sendUserOperationAsync, isSendingUserOperation } = useSendUserOperation({ client, diff --git a/site/pages/reference/account-kit/react/hooks/useExportAccount.mdx b/site/pages/reference/account-kit/react/hooks/useExportAccount.mdx index 233f2bcf47..631f234c4e 100644 --- a/site/pages/reference/account-kit/react/hooks/useExportAccount.mdx +++ b/site/pages/reference/account-kit/react/hooks/useExportAccount.mdx @@ -18,7 +18,7 @@ import { useExportAccount } from "@account-kit/react"; ## Usage -```ts +```ts twoslash import { useExportAccount } from "@account-kit/react"; const { diff --git a/site/pages/reference/account-kit/react/hooks/useLogout.mdx b/site/pages/reference/account-kit/react/hooks/useLogout.mdx index ce9ffcef3c..f806d929d4 100644 --- a/site/pages/reference/account-kit/react/hooks/useLogout.mdx +++ b/site/pages/reference/account-kit/react/hooks/useLogout.mdx @@ -17,7 +17,7 @@ import { useLogout } from "@account-kit/react"; ## Usage -```ts +```ts twoslash import { useLogout } from "@account-kit/react"; const { logout, isLoggingOut, error } = useLogout({ diff --git a/site/pages/reference/account-kit/react/hooks/useSendUserOperation.mdx b/site/pages/reference/account-kit/react/hooks/useSendUserOperation.mdx index bf5f1538f6..eea7c69dc0 100644 --- a/site/pages/reference/account-kit/react/hooks/useSendUserOperation.mdx +++ b/site/pages/reference/account-kit/react/hooks/useSendUserOperation.mdx @@ -19,16 +19,16 @@ import { useSendUserOperation } from "@account-kit/react"; ## Usage -```tsx +```tsx twoslash +import React from "react"; import { useSendUserOperation, useSmartAccountClient, } from "@account-kit/react"; function ComponentWithSendUserOperation() { - const { client } = useSmartAccountClient({ - type: "MultiOwnerModularAccount", - }); + const { client } = useSmartAccountClient({}); + const { sendUserOperation, isSendingUserOperation } = useSendUserOperation({ client, // optional parameter that will wait for the transaction to be mined before returning diff --git a/site/pages/reference/account-kit/react/hooks/useSignMessage.mdx b/site/pages/reference/account-kit/react/hooks/useSignMessage.mdx index 4d5a725557..12c6c28c2a 100644 --- a/site/pages/reference/account-kit/react/hooks/useSignMessage.mdx +++ b/site/pages/reference/account-kit/react/hooks/useSignMessage.mdx @@ -24,10 +24,11 @@ import { useSignMessage } from "@account-kit/react"; ## Usage -```ts +```ts twoslash import { useSignMessage, useSmartAccountClient } from "@account-kit/react"; +const data = "messageToSign"; +const { client } = useSmartAccountClient({}); -const { client } = useSmartAccountClient({ type: "LightAccount" }); const { signMessage, signMessageAsync, @@ -42,6 +43,8 @@ const { }, onError: (error) => console.error(error), }); + +const result = await signMessage({ message: data }); ``` ## Parameters diff --git a/site/pages/reference/account-kit/react/hooks/useSignTypedData.mdx b/site/pages/reference/account-kit/react/hooks/useSignTypedData.mdx index 634d936a5e..a90fe5a5cb 100644 --- a/site/pages/reference/account-kit/react/hooks/useSignTypedData.mdx +++ b/site/pages/reference/account-kit/react/hooks/useSignTypedData.mdx @@ -19,10 +19,16 @@ import { useSignTypedData } from "@account-kit/react"; ## Usage -```ts +```ts twoslash import { useSignTypedData, useSmartAccountClient } from "@account-kit/react"; - -const { client } = useSmartAccountClient({ type: "LightAccount" }); +const typedData = { + types: { + Message: [{ name: "content", type: "string" }], + }, + primaryType: "Message", + message: { content: "Hello" }, +}; +const { client } = useSmartAccountClient({}); const { signTypedData, signTypedDataAsync, @@ -37,6 +43,8 @@ const { }, onError: (error) => console.error(error), }); + +const result = await signTypedData({ typedData }); ``` ## Parameters diff --git a/site/pages/reference/account-kit/react/hooks/useSigner.mdx b/site/pages/reference/account-kit/react/hooks/useSigner.mdx index eada614378..0e597d7e5b 100644 --- a/site/pages/reference/account-kit/react/hooks/useSigner.mdx +++ b/site/pages/reference/account-kit/react/hooks/useSigner.mdx @@ -17,10 +17,11 @@ import { useSigner } from "@account-kit/react"; ## Usage -```ts +```ts twoslash import { useSigner } from "@account-kit/react"; +import type { AlchemyWebSigner } from "@account-kit/signer"; -const signer = useSigner(); +const signer: AlchemyWebSigner | null = useSigner(); ``` ## Returns diff --git a/site/pages/reference/account-kit/react/hooks/useSignerStatus.mdx b/site/pages/reference/account-kit/react/hooks/useSignerStatus.mdx index d608d3dfc8..9efec63fa0 100644 --- a/site/pages/reference/account-kit/react/hooks/useSignerStatus.mdx +++ b/site/pages/reference/account-kit/react/hooks/useSignerStatus.mdx @@ -16,7 +16,7 @@ import { useSignerStatus } from "@account-kit/react"; ## Usage -```ts +```ts twoslash import { useSignerStatus } from "@account-kit/react"; const signerStatus = useSignerStatus(); diff --git a/site/pages/reference/account-kit/react/hooks/useSmartAccountClient.mdx b/site/pages/reference/account-kit/react/hooks/useSmartAccountClient.mdx index 04362419bf..c86e3a5baa 100644 --- a/site/pages/reference/account-kit/react/hooks/useSmartAccountClient.mdx +++ b/site/pages/reference/account-kit/react/hooks/useSmartAccountClient.mdx @@ -1,6 +1,5 @@ --- # This file is autogenerated - title: useSmartAccountClient description: Overview of the useSmartAccountClient method --- @@ -22,13 +21,10 @@ import { useSmartAccountClient } from "@account-kit/react"; ## Usage -```ts +```ts twoslash import { useSmartAccountClient } from "@account-kit/react"; -const { client, address, isLoadingClient } = useSmartAccountClient({ -type: "LightAccount", -accountParams: {...}, // optional [params](https://github.com/alchemyplatform/aa-sdk/blob/main/account-kit/core/src/actions/createAccount.ts#L23) to further configure the account -}); +const { client, address, isLoadingClient } = useSmartAccountClient({}); ``` ## Parameters @@ -36,7 +32,7 @@ accountParams: {...}, // optional [params](https://github.com/alchemyplatform/aa ### props `UseSmartAccountClientProps` -The properties required to use the smart account client, including account parameters, type, and additional client parameters. [ref](https://github.com/alchemyplatform/aa-sdk/blob/main/account-kit/react/src/hooks/useSmartAccountClient.ts#L19) +The properties required to use the smart account client, including optional [account parameters](https://github.com/alchemyplatform/aa-sdk/blob/main/account-kit/core/src/actions/createAccount.ts#L23), type, and additional client parameters. [ref](https://github.com/alchemyplatform/aa-sdk/blob/main/account-kit/react/src/hooks/useSmartAccountClient.ts#L19) ## Returns diff --git a/site/pages/reference/account-kit/react/hooks/useUiConfig.mdx b/site/pages/reference/account-kit/react/hooks/useUiConfig.mdx index 0c745d4f3f..b1360c2adb 100644 --- a/site/pages/reference/account-kit/react/hooks/useUiConfig.mdx +++ b/site/pages/reference/account-kit/react/hooks/useUiConfig.mdx @@ -17,7 +17,7 @@ import { useUiConfig } from "@account-kit/react"; ## Usage -```tsx +```tsx twoslash import { useUiConfig } from "@account-kit/react"; const { illustrationStyle, auth } = useUiConfig( diff --git a/site/pages/reference/account-kit/react/hooks/useUser.mdx b/site/pages/reference/account-kit/react/hooks/useUser.mdx index 59706d2cc7..57d39cc01d 100644 --- a/site/pages/reference/account-kit/react/hooks/useUser.mdx +++ b/site/pages/reference/account-kit/react/hooks/useUser.mdx @@ -19,8 +19,10 @@ import { useUser } from "@account-kit/react"; ## Usage -```ts +```ts twoslash import { useUser } from "@account-kit/react"; +import type { User } from "@account-kit/signer"; +type UseUserResult = (User & { type: "eoa" | "sca" }) | null; const user = useUser(); ``` diff --git a/site/pages/reference/account-kit/react/hooks/useWaitForUserOperationTransaction.mdx b/site/pages/reference/account-kit/react/hooks/useWaitForUserOperationTransaction.mdx index 5c854db0de..48b2dc8057 100644 --- a/site/pages/reference/account-kit/react/hooks/useWaitForUserOperationTransaction.mdx +++ b/site/pages/reference/account-kit/react/hooks/useWaitForUserOperationTransaction.mdx @@ -17,13 +17,13 @@ import { useWaitForUserOperationTransaction } from "@account-kit/react"; ## Usage -```ts +```ts twoslash import { useWaitForUserOperationTransaction, useSmartAccountClient, } from "@account-kit/react"; -const { client } = useSmartAccountClient({ type: "LightAccount" }); +const { client } = useSmartAccountClient({}); const { waitForUserOperationTransaction, waitForUserOperationTransactionResult, diff --git a/site/pages/resources/terms.mdx b/site/pages/resources/terms.mdx index ef79cc3ac5..83abaef49f 100644 --- a/site/pages/resources/terms.mdx +++ b/site/pages/resources/terms.mdx @@ -7,7 +7,7 @@ description: Glossary of terms related to Account Kit ## Account Kit -Account Kit is a framework designed to embed smart accounts in web3 applications. It includes a set of tools such as [Signer integrations](/concepts/smart-account-signer), [Gas Manager](https://docs.alchemy.com/docs/gas-manager-services) and [Bundler](https://docs.alchemy.com/docs/bundler-services) utilities that unlock features such as [gas sponsorship](#TODO/using-smart-accounts/sponsoring-gas/gas-manager), [batched transactions](#TODO/using-smart-accounts/batch-user-operations) and email/social login. With its user-friendly suite of SDKs, known as [aa-sdk](https://github.com/alchemyplatform/aa-sdk), Account Kit makes it easy to deploy smart accounts, manage `UserOperation`s, and handle gas sponsorship, streamlining the entire process with minimal coding effort. +Account Kit is a framework designed to embed smart accounts in web3 applications. It includes a set of tools such as [Signer integrations](/concepts/smart-account-signer), [Gas Manager](https://docs.alchemy.com/docs/gas-manager-services) and [Bundler](https://docs.alchemy.com/docs/bundler-services) utilities that unlock features such as [gas sponsorship](/react/sponsor-gas), [batched transactions](/react/send-user-operations#batch-user-operation) and email/social login. With its user-friendly suite of SDKs, known as [aa-sdk](https://github.com/alchemyplatform/aa-sdk), Account Kit makes it easy to deploy smart accounts, manage `UserOperation`s, and handle gas sponsorship, streamlining the entire process with minimal coding effort. ## Bundler @@ -39,7 +39,7 @@ A [standard for modular accounts](https://eips.ethereum.org/EIPS/eip-6900) autho ## Light Account -[Light Account](#TODO/smart-contracts/light-account/) is a collection of lightweight, production-ready [ERC-4337](https://eips.ethereum.org/EIPS/eip-4337) smart accounts developed by Alchemy. It builds on top of Ethereum Foundation's canonical [SimpleAccount](https://github.com/eth-infinitism/account-abstraction/blob/develop/contracts/samples/SimpleAccount.sol) to add key improvements such as ownership transfers, multiple owners, ERC-1271 signature support, and gas optimizations. It has been audited [multiple](https://github.com/alchemyplatform/light-account/blob/develop/audits/2024-01-09_quantstamp_aa8196b.pdf) [times](https://github.com/alchemyplatform/light-account/blob/develop/audits/2024-04-26_quantstamp_93f46a2.pdf) by Quantstamp. +[Light Account](/smart-contracts/other-accounts/light-account/) is a collection of lightweight, production-ready [ERC-4337](https://eips.ethereum.org/EIPS/eip-4337) smart accounts developed by Alchemy. It builds on top of Ethereum Foundation's canonical [SimpleAccount](https://github.com/eth-infinitism/account-abstraction/blob/develop/contracts/samples/SimpleAccount.sol) to add key improvements such as ownership transfers, multiple owners, ERC-1271 signature support, and gas optimizations. It has been audited [multiple](https://github.com/alchemyplatform/light-account/blob/develop/audits/2024-01-09_quantstamp_aa8196b.pdf) [times](https://github.com/alchemyplatform/light-account/blob/develop/audits/2024-04-26_quantstamp_93f46a2.pdf) by Quantstamp. ## Magic Link Authentication @@ -47,7 +47,7 @@ A magic link is a one-time use link sent to a user during the authentication pro ## Modular Account -A type of smart account enabled by the [ERC-6900](https://eips.ethereum.org/EIPS/eip-6900) standard and characterized by its [modular structure](#TODO/smart-contracts/modular-account/). This structure segments different functionalities of the account into distinct, independently upgradeable modules or plugins. Each plugin can have specific functions such as validation, execution, or hooks, enabling the smart account to extend its capabilities or modify its behavior without altering the core account logic. Modular Accounts enhance the flexibility, upgradeability, and interoperability of [ERC-4337](https://eips.ethereum.org/EIPS/eip-4337) smart accounts. Modular Account contracts have been audited by both [Spearbit](https://github.com/alchemyplatform/modular-account/blob/develop/audits/2024-01-31_spearbit_0e3fd1e.pdf) and [Quantstamp](https://github.com/alchemyplatform/modular-account/blob/develop/audits/2024-02-19_quantstamp_0e3fd1e.pdf). +A type of smart account enabled by the [ERC-6900](https://eips.ethereum.org/EIPS/eip-6900) standard and characterized by its [modular structure](/smart-contracts/modular-account-v2/overview). This structure segments different functionalities of the account into distinct, independently upgradeable modules or plugins. Each plugin can have specific functions such as validation, execution, or hooks, enabling the smart account to extend its capabilities or modify its behavior without altering the core account logic. Modular Accounts enhance the flexibility, upgradeability, and interoperability of [ERC-4337](https://eips.ethereum.org/EIPS/eip-4337) smart accounts. Modular Account contracts have been audited by both [Spearbit](https://github.com/alchemyplatform/modular-account/blob/develop/audits/2024-01-31_spearbit_0e3fd1e.pdf) and [Quantstamp](https://github.com/alchemyplatform/modular-account/blob/develop/audits/2024-02-19_quantstamp_0e3fd1e.pdf). import Bbp from "./bbp.mdx"; @@ -76,7 +76,7 @@ A service or application that manages the private key and signs either arbitrary ## Smart Contract Account -A [Smart Contract Account (SCA)](/concepts/smart-contract-account), or smart account in short, is an individual on-chain account located at a public address where an ERC-4337 compatible smart account [`contract`](https://ethereum.org/developers/docs/smart-contracts) is deployed to. This address is controlled by one or more owners of the smart contract account. The [aa-sdk](https://github.com/alchemyplatform/aa-sdk) supports different smart account implementations such as [Modular Account](#TODO/smart-contracts/modular-account/), [Light Account](#TODO/smart-contracts/light-account/), or [Simple Account](https://github.com/eth-infinitism/account-abstraction/blob/develop/contracts/samples/SimpleAccount.sol). You can also [add your own account implementation in aa-sdk](#TODO/smart-contracts/custom/contributing). +A [Smart Contract Account (SCA)](/concepts/smart-contract-account), or smart account in short, is an individual on-chain account located at a public address where an ERC-4337 compatible smart account [`contract`](https://ethereum.org/developers/docs/smart-contracts) is deployed to. This address is controlled by one or more owners of the smart contract account. The [aa-sdk](https://github.com/alchemyplatform/aa-sdk) supports different smart account implementations such as [Modular Account V2](/smart-contracts/modular-account-v2/overview), [Modular Account V1](/smart-contracts/other-accounts/modular-account/), [Light Account](/smart-contracts/other-accounts/light-account/), or [Simple Account](https://github.com/eth-infinitism/account-abstraction/blob/develop/contracts/samples/SimpleAccount.sol). You can also [add your own account implementation in aa-sdk](#TODO/smart-contracts/custom/contributing). ## Transaction diff --git a/site/pages/resources/types.mdx b/site/pages/resources/types.mdx index 7328730a5c..f497762ab2 100644 --- a/site/pages/resources/types.mdx +++ b/site/pages/resources/types.mdx @@ -7,7 +7,7 @@ description: Glossary of types in aa-sdk ## `BatchUserOperationCallData` -An array of `UserOperationCallData`, representing a sequence of `UserOperations` to be executed in batch by calling the `executeBatch` function on the `SmartContractAccount` contract. Check out our guide on [How to submit batch transactions](#TODO/using-smart-accounts/batch-user-operations) to learn more about batching multiple transactions into a single `UserOperation`. +An array of `UserOperationCallData`, representing a sequence of `UserOperations` to be executed in batch by calling the `executeBatch` function on the `SmartContractAccount` contract. Check out our guide on [How to submit batch transactions](/react/send-user-operations#batch-user-operation) to learn more about batching multiple transactions into a single `UserOperation`. :::details[BatchUserOperationCallData] diff --git a/site/pages/smart-contracts/choosing-a-smart-account.mdx b/site/pages/smart-contracts/choosing-a-smart-account.mdx index a701ffe161..ca292d6470 100644 --- a/site/pages/smart-contracts/choosing-a-smart-account.mdx +++ b/site/pages/smart-contracts/choosing-a-smart-account.mdx @@ -7,28 +7,64 @@ description: Learn about different smart account implementations to use with # Choosing a Smart Account -## What is a Smart Account? +## Why Smart Accounts? -A smart account is an [ERC-4337](https://eips.ethereum.org/EIPS/eip-4337) smart account. You can use it to manage assets, execute transactions (known as `UserOperation`s), and more. There are many different implementations of a smart account, including [Modular Account](/smart-contracts/modular-account/) and [Light Account](/smart-contracts/light-account/). +Smart accounts are the key to unlocking the best online user experience ever had-- enabling features that have never been possible with traditional EOAs (externally-owned-accounts) like session keys, granular permissions, different authentication methods like email and passkeys, and much more. -We provide some of the cheapest accounts on the market. You should also consider [account deployement gas costs](https://github.com/alchemyplatform/aa-benchmarks) when choosing an account. +Beyond that, alchemy's Account Kit offers a simple & clean SDK to provide your users with top-tier ERC-4337 smart account features. With Account Kit's most powerful, most natively-supported account being Modular Account V2. -## Modular Account +MAv2 is the most fully-featured and efficient smart account out there, allowing for limitless modular expansion. All the while the account is secured by extensive [audits](https://github.com/alchemyplatform/modular-account/tree/develop/audits) as well as a [bug bounty on Cantina.](https://cantina.xyz/bounties/246de4d3-e138-4340-bdfc-fc4c95951491) -[Modular Account](/smart-contracts/modular-account/) is an enterprise-grade smart contract account designed from the ground up for ERC-4337. It is highly secure, gas optimized, and endlessly customizable with ERC-6900 plugins. With our pre-built plugins, it supports multiple owners (1-of-n), multisig thresholds (m-of-n), and session keys with scoped permissions. +MAv2 also strives to be maximally gas-efficient, being the **only** account where runtime deployment breaks the **sub-100k gas barrier**, which is cheaper than _one Uniswap swap_. For more details around MAv2, and for more sweet benchmarks, check out the [MAv2 overview!](/smart-contracts/modular-account-v2/overview) -Modular Account is the first [ERC-6900](https://eips.ethereum.org/EIPS/eip-6900) account implementation, making it infinitely extensible with custom plugins. Plug and play from a selection of existing plugins, including session keys and multisig, or write your own to customize the account for your app. We have created three pre-built plugins available today: [`MultiOwnerPlugin`](#TODO/smart-contracts/using-smart-accounts/transfer-ownership/modular-account), [`SessionKeyPlugin`](#TODO/smart-contracts/using-smart-accounts/session-keys/), and [`MultisigPlugin`](/smart-contracts/modular-account/multisig-plugin/). We're actively building new plugins and look forward to what new plugins you create! +## Modular Account V2 -For most applications, we recommend using **Modular Account**. Suppose you have already deployed Light Account in the past. In that case, you can follow [Upgrading to a Modular Account](/smart-contracts/modular-account/upgrading-to-modular-account) guide to easily upgrade your account from Light Account to Modular Account using Account Kit and unlock an ecosystem of plugins for your smart account stack. +MAv2 is a zero-compromise smart account designed from the ground up for maximal security, modularity, and gas-efficiency. MAv2 abides by [ERC-6900](https://eips.ethereum.org/EIPS/eip-6900), meaning if you have a use case, there's probably a module for it-- and if there isn't, the simple, straightforward module interface ensures building new innovative features is a walk in the park. -Modular Account has been audited by both [Spearbit](https://github.com/alchemyplatform/modular-account/blob/develop/audits/2024-01-31_spearbit_0e3fd1e.pdf) and [Quantstamp](https://github.com/alchemyplatform/modular-account/blob/develop/audits/2024-02-19_quantstamp_0e3fd1e.pdf). It is fully [open source](https://github.com/alchemyplatform/modular-account) and supported by a [Bug Bounty](https://hackerone.com/alchemyplatform) program. It is [deployed](/smart-contracts/deployed-addresses) on multiple networks and their respective testnets. +By default, MAv2 includes a fallback validation. This allows a zero-customization setup where the account's owner (which, technically, could be another account!) has full control over the account. The fallback validation signer, or the account's owner, can be swapped or the entire validation can be disabled entirely in favor of one or more other validations. -## Light Account +Validations are themselves modules that define an authorization scheme with granularly managed control over the account. You could use a [WebAuthn validation](https://github.com/alchemyplatform/modular-account/blob/develop/src/modules/validation/WebAuthnValidationModule.sol) to support passkeys or biometrics for example. -[Light Account](/smart-contracts/light-account) is a collection of lightweight, production-ready [ERC-4337](https://eips.ethereum.org/EIPS/eip-4337) smart accounts. It builds on top of Ethereum Foundation's canonical [SimpleAccount](https://github.com/eth-infinitism/account-abstraction/blob/develop/contracts/samples/SimpleAccount.sol) to add key improvements such as ownership transfers, multiple owners, ERC-1271 signature support, and gas optimizations. +MAv2 also supports [EIP-7702](https://github.com/ethereum/EIPs/blob/master/EIPS/eip-7702.md) out of the box, allowing EOAs to seamlessly turn into maximally expandable smart accounts. -It is fully [open source](https://github.com/alchemyplatform/light-account) and has been audited [multiple](https://github.com/alchemyplatform/light-account/blob/develop/audits/2024-01-09_quantstamp_aa8196b.pdf) [times](https://github.com/alchemyplatform/light-account/blob/develop/audits/2024-04-26_quantstamp_93f46a2.pdf) by Quantstamp. It is [deployed](/smart-contracts/deployed-addresses) on multiple networks and their respective testnets. +## Other Smart Accounts -## Use your own Account +While **MAv2** is the recommended choice, Account Kit also supports other audited and gas-optimized ERC-4337 smart account implementations: -Account Kit also makes it easy to use your own smart account implementation. To learn how, see our guide on how to [use your own account](/third-party/smart-contracts). +### [Light Account](/smart-contracts/other-accounts/light-account) + +Light Account is a minimalist ERC-4337 smart account optimized for **low gas costs**. It is based on **Ethereum Foundation's SimpleAccount** but adds key improvements like: + +- Ownership transfers +- ERC-1271 signature validation + +While **Light Account is fully audited**, it does **not** support **advanced modular features like modules or session keys**. + +### [Multi-Owner Light Account](/smart-contracts/other-accounts/light-account) + +This account extends **Light Account** with support for **multiple owners**, allowing **shared control over an account** without needing a full modular setup. + +### [Modular Account V1](/smart-contracts/other-accounts/modular-account/) + +Predecessor to Modular Account V2, this advanced account offers: + +- ERC-6900 compatibility for custom extensibility +- Session keys +- Multisig plugin support +- Flexible ownership validation + +### Account features + +| Feature | LightAccount | MultiOwnerLightAccount | ModularAccountV1 | ModularAccountV2 | +| ----------------- | ------------ | ---------------------- | ---------------- | ---------------- | +| Multiple owners | ❌ | ✅ | ✅ | ✅ | +| Session keys | ❌ | ❌ | ✅ | ✅ | +| Multi-sig | ❌ | ❌ | ✅ | 🔜 | +| Ecosystem modules | ❌ | ❌ | ✅ | ✅ | +| EIP-7702 support | ❌ | ❌ | ❌ | ✅ | +| Gas optimized | ✅ | ✅ | ❌ | ✅ | + +## Bring Your Own Smart Account + +If you have your own **ERC-4337-compatible** smart account, you can integrate it with Account Kit. +See our guide on [using a custom smart account](/third-party/smart-contracts). diff --git a/site/pages/smart-contracts/gas-benchmarks.mdx b/site/pages/smart-contracts/gas-benchmarks.mdx new file mode 100644 index 0000000000..e442057676 --- /dev/null +++ b/site/pages/smart-contracts/gas-benchmarks.mdx @@ -0,0 +1,56 @@ +--- +title: Gas Benchmarks +description: See gas benchmarks for multiple popular accounts and how they stack up. +--- + +# UserOp Gas Benchmarks Table + +Below is a collection of gas benchmarks resulting from the open-source [aa-benchmarks repository.](https://github.com/alchemyplatform/aa-benchmarks/blob/master/README.md) Each of these tables presents the gas costs for specific operations done via userOps-- the key feature of ERC-4337 account abstraction. + +Note that these benchmarks are denominated in EVM gas units. For reference, a simple Uniswap swap without smart accounts typically costs in the ballpark of `150,000` gas. + +## Deployment + +| | Gas Cost | +| :------------------------- | --------: | +| Alchemy Modular Account v2 | `233,004` | +| Biconomy Nexus | `342,381` | +| ZeroDev Kernel v3.1 | `338,419` | +| Safe v1.4.1 | `435,486` | +| Coinbase Smart Wallet | `317,904` | +| Simple Account | `297,367` | + +## Native Transfer + +| | Gas Cost | +| :------------------------- | --------: | +| Alchemy Modular Account v2 | `158,725` | +| Biconomy Nexus | `164,351` | +| ZeroDev Kernel v3.1 | `190,912` | +| Safe v1.4.1 | `176,479` | +| Coinbase Smart Wallet | `156,812` | +| Simple Account | `151,045` | + +## ERC-20 Transfer + +| | Gas Cost | +| :------------------------- | --------: | +| Alchemy Modular Account v2 | `182,665` | +| Biconomy Nexus | `188,136` | +| ZeroDev Kernel v3.1 | `214,817` | +| Safe v1.4.1 | `200,732` | +| Coinbase Smart Wallet | `181,014` | +| Simple Account | `175,283` | + +## Uniswap V3 Swap + +| | Gas Cost | +| :------------------------- | --------: | +| Alchemy Modular Account v2 | `201,790` | +| Biconomy Nexus | `207,286` | +| ZeroDev Kernel v3.1 | `234,378` | +| Safe v1.4.1 | `220,464` | +| Coinbase Smart Wallet | `200,573` | +| Simple Account | `194,829` | + +Take a look at more detailed benchmarks as well as $USD-denominated examples [here!](https://github.com/alchemyplatform/aa-benchmarks/blob/master/README.md) diff --git a/site/pages/smart-contracts/modular-account-v2/getting-started.mdx b/site/pages/smart-contracts/modular-account-v2/getting-started.mdx new file mode 100644 index 0000000000..203f00c2b4 --- /dev/null +++ b/site/pages/smart-contracts/modular-account-v2/getting-started.mdx @@ -0,0 +1,102 @@ +--- +title: Modular Account V2 • Getting started +description: Getting started with Modular Account V2 in Account Kit +--- + +# Getting started with Modular Account V2 + +It is easy to get started with Modular Account v2! Below, you will create a new Modular Account v2 client that will be used to send user operations. Your MAv2 smart account will be deployed on-chain when you send the first User Operation from a unique signer. + +## Install packages + +**Prerequisites** + +- minimum Typescript version of 5 +- pin viem to 2.20.0 (`yarn add viem@2.20.0`) + +**Installation** + +First, install the `@account-kit/smart-contracts` package. + +:::code-group + +```bash [yarn] +yarn add @account-kit/smart-contracts +yarn add @account-kit/infra +``` + +```bash [npm] +npm install @account-kit/smart-contracts +npm install @account-kit/infra +``` + +::: + +:::tip[Address calculation] +For Modular Account V2, the address of the smart account will be calculated as a combination of [the owner and the salt](https://github.com/alchemyplatform/modular-account/blob/v2.0.x/src/factory/AccountFactory.sol#L98-L104). You will get the same smart account address each time you supply the same `owner`, the signer(s) used to create the account for the first time. You can also optionally supply `salt` if you want a different address for the same `owner` param (the default salt is `0n`). + +If you want to use a signer to connect to an account whose address does not map to the contract-generated address, you can supply the `accountAddress` to connect with the account of interest. In that case, the `signer` address is not used for address calculation, but only for signing the operation. +::: + +## Creating a Modular Account V2 client + +```ts twoslash [modular-account-v2.ts] +import { createModularAccountV2Client } from "@account-kit/smart-contracts"; +import { LocalAccountSigner } from "@aa-sdk/core"; +import { sepolia, alchemy } from "@account-kit/infra"; +import { generatePrivateKey } from "viem/accounts"; + +const accountClient = await createModularAccountV2Client({ + mode: "default", // optional param to specify the MAv2 variant (either "default" or "7702") + chain: sepolia, + transport: alchemy({ apiKey: "your-api-key" }), // Get your API key at https://dashboard.alchemy.com/apps or http("RPC_URL") for non-alchemy infra + signer: LocalAccountSigner.privateKeyToAccountSigner(generatePrivateKey()), +}); +``` + +:::tip[Choosing which mode to use] +We currently offer two variants of Modular Account v2: `default` and `7702`. + +- (Recommended) `default` provides you with the cheapest, most flexible and advanced Smart Account +- `7702` if you are looking for 7702 support, learn about how to set up and take adavantage of our EIP-7702 compliant account [here](/smart-contracts/modular-account-v2/using-7702) + ::: + +Want to enable social login methods? Set up your [Alchemy Signer](/signer/quickstart). + +Alternatively, you can [bring a 3rd party signer](/third-party/signers) as the owner of your new account. + +Not sure what signer to use? [Learn more](/signer/what-is-a-signer). + +## Sending a user operation + +Now that you have a client, you can send a User Operation. The first User Operation will also deploy the new Modular Account v2. + +```ts twoslash +import { createModularAccountV2Client } from "@account-kit/smart-contracts"; +import { LocalAccountSigner } from "@aa-sdk/core"; +import { sepolia, alchemy } from "@account-kit/infra"; +import { generatePrivateKey } from "viem/accounts"; +import { parseEther } from "viem"; + +const accountClient = await createModularAccountV2Client({ + chain: sepolia, + transport: alchemy({ apiKey: "your-api-key" }), + signer: LocalAccountSigner.privateKeyToAccountSigner(generatePrivateKey()), +}); + +const operation = await accountClient.sendUserOperation({ + // simple UO sending no data or value to vitalik's address + uo: { + target: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045", // The address to call in the UO + data: "0x", // The calldata to send in the UO + value: parseEther("0"), // The value to send in the UO + }, +}); + +console.log( + "User operation sent! \nUO hash: ", + operation.hash, + "\nModular Account v2 Address: ", + operation.request.sender +); +``` diff --git a/site/pages/smart-contracts/modular-account-v2/overview.mdx b/site/pages/smart-contracts/modular-account-v2/overview.mdx new file mode 100644 index 0000000000..ed03da41d0 --- /dev/null +++ b/site/pages/smart-contracts/modular-account-v2/overview.mdx @@ -0,0 +1,59 @@ +--- +title: Modular Account V2 +description: An overview of the Modular Account V2 smart account. +--- + +# Modular Account V2 Overview + +Alchemy's Modular Account V2 is the most robust and feature-rich smart account on the market with top-tier enterprise grade security. Being an ERC-6900 account, MAv2 can tap into a rich ecosystem of modules comprising different authentication methods like multisig or webauthn, as well as permissions and more! + +With multiple developer-years of work and two comprehensive audits from [ChainLight](https://github.com/alchemyplatform/modular-account/blob/develop/audits/2024-12-03_chainlight_14afcd8.pdf) and [Quantstamp](https://github.com/alchemyplatform/modular-account/blob/develop/audits/2024-12-11_quantstamp_14afcd8.pdf), MAv2 is the most advanced smart account available: + +- 40%+ reduced gas costs +- Rich ecosystem of modules from teams like Circle +- Super simple & clean developer experience + +## Cost + +Cost matters, so gas optimization was essential throughout the whole development process. As a result, MAv2 is one of the most optimized smart contracts ever written. + +As an example, see the gas comparison for deployment execution costs below: + +| | **Runtime gas for account creation** | **% More expensive than MAv2** | +| ------------------------------ | ------------------------------------ | ------------------------------ | +| **Alchemy Modular Account v2** | **97,764** | - | +| **ZeroDev Kernel v3** | 180,465 | 84.6% | +| **Safe (with 4337 module)** | 289,207 | 195.8% | + +We have a whole host of open-source benchmarks [here!](/smart-contracts/gas-benchmarks.mdx) + +At scale, these optimizations could save tens of thousands of dollars in gas fees if not more-- all without compromising on features or security. + +## Modularity + +Along with Circle, Trust Wallet, Quantstamp and the Ethereum Foundation, we've already developed multiple plug & play modules for use with ERC-6900 accounts like MAv2. Out of the box, on the validation side, MAv2 supports session keys, Webauthn validation (passkeys/biometrics). + +On the permissions front, MAv2 already has first-class support for the following: + +- Allowlists, ensuring a validation can only access what you want it to and nothing else. +- ERC-20 spend limits, think session keys with spend limits! +- Native spend limits, which take gas into account. +- Enforcing expiries, so your session keys can last as short or as long as you need them to. + +Note that these features are only possible thanks to the modular nature of ERC-6900, as they're all separate modules. This also means it's possible to combine any number of modules to perfectly fine-tune your permission set. + +Want a session key that's only valid for 24 hours, can only spend up to 0.001 ETH (incl. gas) and 100 USDC, all the while it's only able to authenticate calls to one specific address with one specific function? Go for it! + +## Simplicity + +Regardless of how feature-rich MAv2 is, it's all for nothing if it's not easy to use. The account standard MAv2 adheres to has over 5,000 words-- it's understandably intimidating. However, the depth of ERC-6900 allows each feature in MAv2 to be secure and ultimately extremely simple for you, the developer. + +Leveraging the standard's lack of ambiguity, aa-sdk can safely create high-level zero-cost abstractions, which translate down to RPC calls exactly how you expect them to. No more fighting with your tools. + +The SDK is designed from the ground up to get out of your way so you can focus on what matters-- building the best smart wallet experience for your app! + +## EIP-7702 support + +EIP-7702 is an upcoming Ethereum upgrade set to launch in the coming months as part of the Pectra hardfork. Specifically, EIP-7702 enables Externally Owned Accounts (EOAs) to use smart contract account features. + +You can create an EIP-7702 compliant version of an MAv2 account, learn how to [here](/smart-contracts/modular-account-v2/using-7702) diff --git a/site/pages/smart-contracts/modular-account-v2/using-7702.mdx b/site/pages/smart-contracts/modular-account-v2/using-7702.mdx new file mode 100644 index 0000000000..3569c38611 --- /dev/null +++ b/site/pages/smart-contracts/modular-account-v2/using-7702.mdx @@ -0,0 +1,124 @@ +--- +title: Upgrade Your EOA with EIP-7702 +description: Learn how to upgrade your existing EOA to a smart account using EIP-7702 with Account Kit. +--- + +# Upgrade Your Externally Owned Account (EOA) with EIP-7702 + +[EIP-7702](https://eips.ethereum.org/EIPS/eip-7702) introduces a straightforward way for Externally Owned Accounts (EOAs) to use smart contract account features. This is a major milestone in Ethereum’s account abstraction journey, enabling existing EOAs to benefit from functionality previously exclusive to smart accounts – such as batching actions, sponsoring transactions, and more. + +With Account Kit, you can support this upgrade path directly into your app or wallet. Users will seamlessly access advanced features like transaction batching, session keys, and gas sponsorship, while maintaining their existing EOA address and without having to migrate assets. + +Below we will guide you through **when to use EIP-7702** and how to leverage Account Kit to **upgrade your existing embedded EOAs to a smart contract account**, specifically to Modular Account v2. + +## When to Use EIP-7702? + +EIP-7702 is particularly useful in the following scenarios: + +1. You have an app using embedded wallets with EOAs +2. You have a wallet using EOAs + +You can upgrade your users' EOAs directly to a smart account at their current address. This means you don’t have to move assets. + +See our full recommendations [here](https://www.alchemy.com/blog/eip-7702-ethereum-pectra-hardfork#for-developers-that-havent-yet-deployed-their-application). + +#### Gain Smart Account Features + +By upgrading to a smart account, you immediately unlock features such as: + +- **Batching actions**: Execute multiple operations in a single transaction. +- **Gas sponsorship**: Let your users pay zero gas by using sponsored transactions, or use custom paymaster contracts that allow you to pay gas in other tokens. +- **Custom session keys**: Provide temporary keys to interact with your app without exposing your primary signer, allowing you to skip transaction confirmations. + +## EIP-7702 Compatible Accounts + +Account Kit provides an EIP-7702 compatible smart account, [Modular Account v2](#TODO/linktomav2), that you can upgrade existing EOAs to. This ERC-4337 compatible account is the most gas efficient on the market, fully audited, and supports ecosystem modules for advanced functionality. + +## Signer Requirements + +To use EIP-7702, you need a signer that can generate an authorization signature. Typically, this is implemented as a method called `signAuthorization`. Regardless of which signer you choose, you'll need to create an instance of a [`SmartAccountSigner`](/resources/types#smartaccountsigner) that you can pass to the client. + +### Out-of-the-Box Support in Account Kit + +**Alchemy Signer** + +Alchemy Signer supports signing EIP-7702 authorizations. This means you can create new embedded EOAs with social login that are upgradable to smart accounts seamlessly for your users. See [this guide](#TODO/using-7702-react-doc) for using simple React Hooks. + +If you are a developer without existing embedded wallet users, considering [using smart accounts](/react/quickstart) from the start without EIP-7702. [Decide](https://www.alchemy.com/blog/eip-7702-ethereum-pectra-hardfork#for-developers-that-havent-yet-deployed-their-application) what's best for you! + +**Local Signer** + +If you have locally managed private keys (e.g. you are a self-custodial wallet), you can use a local account signer to upgrade your EOAs to smart accounts. + +:::note +Note: viem requires that you generate a [Private Key account](https://viem.sh/docs/clients/wallet#local-accounts-private-key-mnemonic-etc) to use `signAuthorization`, meaning you cannot use Mnemonic accounts or Hierarchical Deterministic (HD) accounts yet. +::: + +```ts [types.ts] twoslash +import { LocalAccountSigner } from "@aa-sdk/core"; + +const privateKey = "0x..."; // Private key + +const signer = LocalAccountSigner.privateKeyToAccountSigner(privateKey); +``` + +### Bring a third party wallet or signer + +Account Kit provides support for you to bring your existing custom signer or another third-party embedded wallet provider! As long as your signer supports `signAuthorization` you can connect it to Account Kit and upgrade existing EOAs to smart accounts. + +Follow the guide here to understand how to implement the interface: [Third Party Signers](/third-party/signers#implementing-smartaccountauthenticator-or-smartaccountsigner). + +## Using EIP-7702 + +Once your signer is configured and you have a `SmartAccountSigner` instance, you're ready to use EIP-7702 and upgrade EOAs to smart accounts! Account Kit will handle all of the complexity of delegating your account to a smart account and signing transactions correctly. + +- The smart account client will automatically detect if your account is not yet delegated with 7702 when you send a user operation. + - If it is not yet delegated, it will request an authorization signature and include that in the submitted user operation. +- The Alchemy ERC-4337 bundler will automatically include the EIP-7702 authorization with the first user op that your account performs. + +:::code-group + +```ts [example.ts] twoslash +import { createModularAccountV2Client } from "@account-kit/smart-contracts"; +import { sepolia, alchemy } from "@account-kit/infra"; +import { signer } from "./signer.js"; + +// Constructing the smart account client +const smartAccountClient = await createModularAccountV2Client({ + mode: "7702", + transport: alchemy({ apiKey: "your-api-key" }), // Get your API key: https://dashboard.alchemy.com/apps + chain: sepolia, + signer, +}); + +// Sending a user operation +const uoHash = await smartAccountClient.sendUserOperation({ + uo: { + target: zeroAddress, + value: 0n, + data: "0x", + }, +}); + +const txnHash = await smartAccountClient.waitForUserOperationTransaction( + uoHash +); +``` + +```ts twoslash [signer.ts] filename="signer.ts" +import { LocalAccountSigner } from "@aa-sdk/core"; + +const privateKey = "0x..."; + +export const signer = LocalAccountSigner.privateKeyToAccountSigner(privateKey); +``` + +::: + +## When can I use it? + +EIP-7702 will be supported on Sepolia starting March 5. The Alchemy bundler and Account Kit will have day-one support. Mainnet support is expected to follow shortly after. + +Check out the [UI Demo](https://demo.alchemy.com) to see a live preview of these features in action! + +Want to experiment on other testnets before March 5? Reach out to us at account-abstraction@alchemy.com for early access to experimental networks. diff --git a/site/pages/smart-contracts/light-account/getting-started.mdx b/site/pages/smart-contracts/other-accounts/light-account/getting-started.mdx similarity index 100% rename from site/pages/smart-contracts/light-account/getting-started.mdx rename to site/pages/smart-contracts/other-accounts/light-account/getting-started.mdx diff --git a/site/pages/smart-contracts/light-account/index.mdx b/site/pages/smart-contracts/other-accounts/light-account/index.mdx similarity index 100% rename from site/pages/smart-contracts/light-account/index.mdx rename to site/pages/smart-contracts/other-accounts/light-account/index.mdx diff --git a/site/pages/smart-contracts/transfer-ownership/multi-owner-light-account.mdx b/site/pages/smart-contracts/other-accounts/light-account/multi-owner-light-account.mdx similarity index 100% rename from site/pages/smart-contracts/transfer-ownership/multi-owner-light-account.mdx rename to site/pages/smart-contracts/other-accounts/light-account/multi-owner-light-account.mdx diff --git a/site/pages/smart-contracts/transfer-ownership/light-account.mdx b/site/pages/smart-contracts/other-accounts/light-account/transfer-ownership-light-account.mdx similarity index 95% rename from site/pages/smart-contracts/transfer-ownership/light-account.mdx rename to site/pages/smart-contracts/other-accounts/light-account/transfer-ownership-light-account.mdx index b9e63306da..c1ccafbf25 100644 --- a/site/pages/smart-contracts/transfer-ownership/light-account.mdx +++ b/site/pages/smart-contracts/other-accounts/light-account/transfer-ownership-light-account.mdx @@ -83,4 +83,4 @@ await lightAccountClient.waitForUserOperationTransaction(result); ::: -See the [`LightAccount`](/smart-contracts/light-account/) docs for more details about our `LightAccount implementation. +See the [`LightAccount`](/smart-contracts/other-accounts/light-account/) docs for more details about our `LightAccount implementation. diff --git a/site/pages/smart-contracts/modular-account/getting-started.mdx b/site/pages/smart-contracts/other-accounts/modular-account/getting-started.mdx similarity index 96% rename from site/pages/smart-contracts/modular-account/getting-started.mdx rename to site/pages/smart-contracts/other-accounts/modular-account/getting-started.mdx index 646fd4bc6c..02179bd402 100644 --- a/site/pages/smart-contracts/modular-account/getting-started.mdx +++ b/site/pages/smart-contracts/other-accounts/modular-account/getting-started.mdx @@ -22,14 +22,12 @@ First, install the `@account-kit/smart-contracts` package. ```bash [yarn] yarn add @account-kit/smart-contracts -# if using alchemy infra yarn add @account-kit/infra ``` ```bash [npm] -yarn add @account-kit/smart-contracts -# if using alchemy infra -yarn add @account-kit/infra +npm install @account-kit/smart-contracts +npm install @account-kit/infra ``` ::: diff --git a/site/pages/smart-contracts/modular-account/index.mdx b/site/pages/smart-contracts/other-accounts/modular-account/index.mdx similarity index 92% rename from site/pages/smart-contracts/modular-account/index.mdx rename to site/pages/smart-contracts/other-accounts/modular-account/index.mdx index 708c799b8a..ebcd6b24ea 100644 --- a/site/pages/smart-contracts/modular-account/index.mdx +++ b/site/pages/smart-contracts/other-accounts/modular-account/index.mdx @@ -21,7 +21,7 @@ Smart accounts unlock lots of customizable ways to improve the wallet experience The Multi Owner plugin lets your smart accounts have one or more ECDSA or SCA owners. This allows your account to integrate with multiple signers simultaneously and supports recovering your account if one is lost. -Read more about Multi Owner Plugin and how to get started with Modular Account [here](#TODO/smart-contracts/using-smart-accounts/transfer-ownership/modular-account)! +Read more about Multi Owner Plugin and how to get started with Modular Account [here](/smart-contracts/other-accounts/modular-account/manage-ownership-mav1)! ### Session Key Plugin @@ -34,13 +34,13 @@ Session keys can be customized and configured to: Session keys let you streamline interactions by reducing confirmation steps or automating actions on behalf of the account. These features are kept secure through the permission system, which protects the account from malicious use of the session key. -Read more about installing and using the Session Key plugin [here](#TODO/smart-contracts/using-smart-accounts/session-keys/)! +Read more about installing and using the Session Key plugin [here](/smart-contracts/other-accounts/modular-account/session-keys)! ### Multisig Plugin The Multisig plugin allows your account to have multiple ECDSA or SCA signers and require multiple signatures to perform actions on the account. This is commonly referred to as a k-of-n signature scheme and would create Modular Accounts that are similar to [Gnosis Safe](https://safe.global/) accounts. This plugin is recommended for accounts that require maximum security. -Read more about Multisig Plugin [here](/smart-contracts/modular-account/multisig-plugin/)! +Read more about Multisig Plugin [here](/smart-contracts/other-accounts/modular-account/multisig-plugin/)! ### Full compatibility @@ -56,6 +56,6 @@ Check out the plugin development guide [here](https://www.notion.so/alchemotion/ Modular Account has been audited by Spearbit and Quanstamp. You can find the audit reports [here](https://github.com/alchemyplatform/modular-account/tree/develop/audits). Modular Account is fully open source, so you can validate the [source code](https://github.com/alchemyplatform/modular-account). -import Bbp from "../../resources/bbp.mdx"; +import Bbp from "../../../resources/bbp.mdx"; diff --git a/site/pages/smart-contracts/transfer-ownership/modular-account.mdx b/site/pages/smart-contracts/other-accounts/modular-account/manage-ownership-mav1.mdx similarity index 100% rename from site/pages/smart-contracts/transfer-ownership/modular-account.mdx rename to site/pages/smart-contracts/other-accounts/modular-account/manage-ownership-mav1.mdx diff --git a/site/pages/smart-contracts/get-installed-plugins.mdx b/site/pages/smart-contracts/other-accounts/modular-account/manage-plugins/get-installed-plugins.mdx similarity index 100% rename from site/pages/smart-contracts/get-installed-plugins.mdx rename to site/pages/smart-contracts/other-accounts/modular-account/manage-plugins/get-installed-plugins.mdx diff --git a/site/pages/smart-contracts/install-plugins.mdx b/site/pages/smart-contracts/other-accounts/modular-account/manage-plugins/install-plugins.mdx similarity index 97% rename from site/pages/smart-contracts/install-plugins.mdx rename to site/pages/smart-contracts/other-accounts/modular-account/manage-plugins/install-plugins.mdx index d3db57b339..032c59f629 100644 --- a/site/pages/smart-contracts/install-plugins.mdx +++ b/site/pages/smart-contracts/other-accounts/modular-account/manage-plugins/install-plugins.mdx @@ -64,7 +64,7 @@ await client.waitForUserOperationTransaction({ hash }); ::: -Refer to the [Session Key](/smart-contracts/session-keys/) section to learn more about using the `SessionKeyPlugin`. +Refer to the [Session Key](#TODO/smart-contracts/mav2-session) section to learn more about using the `SessionKeyPlugin`. ## 2. Uninstalling the Session Key Plugin @@ -112,4 +112,4 @@ As mentioned above, you should not uninstall the multiowner plugin from a Modula See a working example in this [discussion](https://github.com/alchemyplatform/aa-sdk/discussions/865#discussioncomment-10206160). -After uninstalling and installing successfully, you will then be able to use the Multisig Account Client to [sign and send UOs](/smart-contracts/modular-account/multisig-plugin/getting-started/). +After uninstalling and installing successfully, you will then be able to use the Multisig Account Client to [sign and send UOs](/smart-contracts/other-accounts/modular-account/multisig-plugin/getting-started/). diff --git a/site/pages/smart-contracts/modular-account/multisig-plugin/details.mdx b/site/pages/smart-contracts/other-accounts/modular-account/multisig-plugin/details.mdx similarity index 100% rename from site/pages/smart-contracts/modular-account/multisig-plugin/details.mdx rename to site/pages/smart-contracts/other-accounts/modular-account/multisig-plugin/details.mdx diff --git a/site/pages/smart-contracts/modular-account/multisig-plugin/getting-started.mdx b/site/pages/smart-contracts/other-accounts/modular-account/multisig-plugin/getting-started.mdx similarity index 98% rename from site/pages/smart-contracts/modular-account/multisig-plugin/getting-started.mdx rename to site/pages/smart-contracts/other-accounts/modular-account/multisig-plugin/getting-started.mdx index 49c97f8f5a..5f44e0d8a9 100644 --- a/site/pages/smart-contracts/modular-account/multisig-plugin/getting-started.mdx +++ b/site/pages/smart-contracts/other-accounts/modular-account/multisig-plugin/getting-started.mdx @@ -149,4 +149,4 @@ const result = await multisigAccountClient.sendUserOperation({ That's it! You've initialized a modular account with three multisig members, proposed a user operation, collected the necessary signatures, and sent the user operation to the bundler. -For more info, check out the [technical details](/smart-contracts/modular-account/multisig-plugin/details) of the multisig plugin. +For more info, check out the [technical details](/smart-contracts/other-accounts/modular-account/multisig-plugin/details) of the multisig plugin. diff --git a/site/pages/smart-contracts/modular-account/multisig-plugin/index.mdx b/site/pages/smart-contracts/other-accounts/modular-account/multisig-plugin/index.mdx similarity index 95% rename from site/pages/smart-contracts/modular-account/multisig-plugin/index.mdx rename to site/pages/smart-contracts/other-accounts/modular-account/multisig-plugin/index.mdx index b3bb7d761b..cf86ac86db 100644 --- a/site/pages/smart-contracts/modular-account/multisig-plugin/index.mdx +++ b/site/pages/smart-contracts/other-accounts/modular-account/multisig-plugin/index.mdx @@ -21,6 +21,6 @@ It is also fully open source so you can validate the [source code](https://githu Now, let's [get started](getting-started) with the multisig plugin! -import Bbp from "../../../resources/bbp.mdx"; +import Bbp from "../../../../resources/bbp.mdx"; diff --git a/site/pages/smart-contracts/session-keys/getting-started.mdx b/site/pages/smart-contracts/other-accounts/modular-account/session-keys/getting-started.mdx similarity index 97% rename from site/pages/smart-contracts/session-keys/getting-started.mdx rename to site/pages/smart-contracts/other-accounts/modular-account/session-keys/getting-started.mdx index d755e3a021..cc86517dde 100644 --- a/site/pages/smart-contracts/session-keys/getting-started.mdx +++ b/site/pages/smart-contracts/other-accounts/modular-account/session-keys/getting-started.mdx @@ -147,7 +147,7 @@ if (!isPluginInstalled) { Session keys are powerful because of permissions that limit what actions they can take. When you add a session key, you should also specify the initial permissions that apply over the key. -See the [Supported Permissions](/smart-contracts/session-keys/supported-permissions#using-the-permissionsbuilder) page for more information on how to used the permissions builder. +See the [Supported Permissions](/smart-contracts/other-accounts/modular-account/session-keys/supported-permissions#using-the-permissionsbuilder) page for more information on how to used the permissions builder. Let's use the permission builder to build a set of permissions that sets a spend limit: diff --git a/site/pages/smart-contracts/session-keys/index.mdx b/site/pages/smart-contracts/other-accounts/modular-account/session-keys/index.mdx similarity index 100% rename from site/pages/smart-contracts/session-keys/index.mdx rename to site/pages/smart-contracts/other-accounts/modular-account/session-keys/index.mdx diff --git a/site/pages/smart-contracts/session-keys/supported-permissions.mdx b/site/pages/smart-contracts/other-accounts/modular-account/session-keys/supported-permissions.mdx similarity index 100% rename from site/pages/smart-contracts/session-keys/supported-permissions.mdx rename to site/pages/smart-contracts/other-accounts/modular-account/session-keys/supported-permissions.mdx diff --git a/site/pages/smart-contracts/modular-account/upgrading-to-modular-account.mdx b/site/pages/smart-contracts/other-accounts/modular-account/upgrading-to-modular-account.mdx similarity index 100% rename from site/pages/smart-contracts/modular-account/upgrading-to-modular-account.mdx rename to site/pages/smart-contracts/other-accounts/modular-account/upgrading-to-modular-account.mdx diff --git a/site/pages/third-party/smart-contracts.mdx b/site/pages/third-party/smart-contracts.mdx index 3a19a5d2de..88d821b528 100644 --- a/site/pages/third-party/smart-contracts.mdx +++ b/site/pages/third-party/smart-contracts.mdx @@ -112,7 +112,7 @@ export const myAccount = await toSmartContractAccount({ ### `LightSmartContractAccount` as an Example -We have built an extension of the eth-infinitism `SimpleAccount` called [LightAccount.sol](https://github.com/alchemyplatform/light-account/blob/main/src/LightAccount.sol). You can learn more about Light Account in the [Light Account documentation](/smart-contracts/light-account/). +We have built an extension of the eth-infinitism `SimpleAccount` called [LightAccount.sol](https://github.com/alchemyplatform/light-account/blob/main/src/LightAccount.sol). You can learn more about Light Account in the [Light Account documentation](/smart-contracts/other-accounts/light-account/). We provide an implementation of `SmartContractAccount` that works with `LightAccount.sol`, which can be used as an example of how to implement your own Smart Contract Account: :::details[LightSmartContractAccount] diff --git a/site/sidebar/react.ts b/site/sidebar/react.ts index 4ba7b8965a..eddafe90a4 100644 --- a/site/sidebar/react.ts +++ b/site/sidebar/react.ts @@ -9,21 +9,21 @@ export const reactGuides: SidebarItem[] = [ text: "Quickstart", link: "/react/quickstart", }, - { - text: "Server side rendering", - link: "/react/ssr", - }, { text: "Authentication", items: [ - { text: "Getting Started", link: "/react/getting-started" }, - { text: "With UI Components", link: "/react/ui-components" }, - { text: "With React Hooks", link: "/react/react-hooks" }, + { text: "Set up", link: "/react/getting-started" }, + { text: "UI Components", link: "/react/ui-components" }, + { text: "Custom UI", link: "/react/react-hooks" }, ], }, { text: "Using smart accounts", items: [ + { + text: "Set up your client", + link: "/react/how-to-set-up-smart-account-client", + }, { text: "Send user operations", link: "/react/send-user-operations", @@ -33,9 +33,17 @@ export const reactGuides: SidebarItem[] = [ { text: "Multi-chain apps", link: "/react/multi-chain-apps" }, ], }, + { + text: "Using EIP-7702", + link: "/react/using-7702", + }, { text: "Customizing UI components", items: [{ text: "Theme", link: "/react/customization/theme" }], }, + { + text: "Server side rendering", + link: "/react/ssr", + }, { text: "SDK Reference", link: "/reference/account-kit/react" }, ]; diff --git a/site/sidebar/reference/account-kit/react.ts b/site/sidebar/reference/account-kit/react.ts index 852b8b5560..7d8d242485 100644 --- a/site/sidebar/reference/account-kit/react.ts +++ b/site/sidebar/reference/account-kit/react.ts @@ -29,67 +29,73 @@ export const accountKitReactReferenceSidebar: SidebarItem[] = [ ], }, { - text: "Hooks", + text: "Authentication", items: [ - { - text: "useAccount", - link: "/reference/account-kit/react/hooks/useAccount", - }, { text: "useAddPasskey", link: "/reference/account-kit/react/hooks/useAddPasskey", }, { - text: "useAlchemyAccountContext", - link: "/reference/account-kit/react/hooks/useAlchemyAccountContext", + text: "useAuthModal", + link: "/reference/account-kit/react/hooks/useAuthModal", }, { - text: "useAuthContext", - link: "/reference/account-kit/react/hooks/useAuthContext", + text: "useAuthenticate", + link: "/reference/account-kit/react/hooks/useAuthenticate", }, { - text: "useAuthError", - link: "/reference/account-kit/react/hooks/useAuthError", + text: "useConnect", + link: "/reference/account-kit/react/hooks/useConnect", }, { - text: "useAuthModal", - link: "/reference/account-kit/react/hooks/useAuthModal", + text: "useExportAccount", + link: "/reference/account-kit/react/hooks/useExportAccount", }, { - text: "useAuthenticate", - link: "/reference/account-kit/react/hooks/useAuthenticate", + text: "useLogout", + link: "/reference/account-kit/react/hooks/useLogout", }, { - text: "useBundlerClient", - link: "/reference/account-kit/react/hooks/useBundlerClient", + text: "useSigner", + link: "/reference/account-kit/react/hooks/useSigner", }, { - text: "useChain", - link: "/reference/account-kit/react/hooks/useChain", + text: "useSignerStatus", + link: "/reference/account-kit/react/hooks/useSignerStatus", }, { - text: "useClientActions", - link: "/reference/account-kit/react/hooks/useClientActions", + text: "useUser", + link: "/reference/account-kit/react/hooks/useUser", }, + ], + }, + { + text: "Account Client", + items: [ { - text: "useConnect", - link: "/reference/account-kit/react/hooks/useConnect", + text: "useAccount", + link: "/reference/account-kit/react/hooks/useAccount", }, { - text: "useConnection", - link: "/reference/account-kit/react/hooks/useConnection", + text: "useSmartAccountClient", + link: "/reference/account-kit/react/hooks/useSmartAccountClient", }, + ], + }, + { + text: "Smart Account Actions", + items: [ { - text: "useDropAndReplaceUserOperation", - link: "/reference/account-kit/react/hooks/useDropAndReplaceUserOperation", + text: "useChain", + link: "/reference/account-kit/react/hooks/useChain", }, { - text: "useExportAccount", - link: "/reference/account-kit/react/hooks/useExportAccount", + text: "useClientActions", + link: "/reference/account-kit/react/hooks/useClientActions", }, { - text: "useLogout", - link: "/reference/account-kit/react/hooks/useLogout", + text: "useDropAndReplaceUserOperation", + link: "/reference/account-kit/react/hooks/useDropAndReplaceUserOperation", }, { text: "useSendUserOperation", @@ -104,28 +110,38 @@ export const accountKitReactReferenceSidebar: SidebarItem[] = [ link: "/reference/account-kit/react/hooks/useSignTypedData", }, { - text: "useSigner", - link: "/reference/account-kit/react/hooks/useSigner", + text: "useWaitForUserOperationTransaction", + link: "/reference/account-kit/react/hooks/useWaitForUserOperationTransaction", }, + ], + }, + { + text: "Bundler/RPC Client", + items: [ { - text: "useSignerStatus", - link: "/reference/account-kit/react/hooks/useSignerStatus", + text: "useBundlerClient", + link: "/reference/account-kit/react/hooks/useBundlerClient", }, + ], + }, + { + text: "Utilities", + items: [ { - text: "useSmartAccountClient", - link: "/reference/account-kit/react/hooks/useSmartAccountClient", + text: "useAlchemyAccountContext", + link: "/reference/account-kit/react/hooks/useAlchemyAccountContext", }, { - text: "useUiConfig", - link: "/reference/account-kit/react/hooks/useUiConfig", + text: "useAuthError", + link: "/reference/account-kit/react/hooks/useAuthError", }, { - text: "useUser", - link: "/reference/account-kit/react/hooks/useUser", + text: "useConnection", + link: "/reference/account-kit/react/hooks/useConnection", }, { - text: "useWaitForUserOperationTransaction", - link: "/reference/account-kit/react/hooks/useWaitForUserOperationTransaction", + text: "useUiConfig", + link: "/reference/account-kit/react/hooks/useUiConfig", }, ], }, diff --git a/site/sidebar/smart-contracts.ts b/site/sidebar/smart-contracts.ts index c31363b646..093d034e60 100644 --- a/site/sidebar/smart-contracts.ts +++ b/site/sidebar/smart-contracts.ts @@ -4,37 +4,93 @@ export const smartContractsSidebar: SidebarItem[] = [ { text: "Overview", link: "/smart-contracts/overview" }, { text: "Choosing a smart account", + link: "/smart-contracts/choosing-a-smart-account", + }, + { + text: "(Best) Modular Account V2", items: [ { - text: "Introduction", - link: "/smart-contracts/choosing-a-smart-account", + text: "Overview", + link: "/smart-contracts/modular-account-v2/overview", }, { - text: "Modular Account", + text: "Getting started", + link: "/smart-contracts/modular-account-v2/getting-started", + }, + { + text: "Using 7702", + link: "/smart-contracts/modular-account-v2/using-7702", + }, + ], + }, + { + text: "Other Accounts", + items: [ + { + text: "Modular Account V1", items: [ - { text: "Overview", link: "/smart-contracts/modular-account" }, + { + text: "Overview", + link: "/smart-contracts/other-accounts/modular-account", + }, { text: "Getting started", - link: "/smart-contracts/modular-account/getting-started", + link: "/smart-contracts/other-accounts/modular-account/getting-started", + }, + { + text: "Manage multiple owners", + link: "/smart-contracts/other-accounts/modular-account/manage-ownership-mav1", }, { - text: "Upgrade", - link: "/smart-contracts/modular-account/upgrading-to-modular-account", + text: "Upgrade to MAv1", + link: "/smart-contracts/other-accounts/modular-account/upgrading-to-modular-account", }, { - text: "Multisig plugin", + text: "Multisig", items: [ { text: "Introduction", - link: "/smart-contracts/modular-account/multisig-plugin", + link: "/smart-contracts/other-accounts/modular-account/multisig-plugin", }, { text: "Getting started", - link: "/smart-contracts/modular-account/multisig-plugin/getting-started", + link: "/smart-contracts/other-accounts/modular-account/multisig-plugin/getting-started", }, { text: "Technical details", - link: "/smart-contracts/modular-account/multisig-plugin/details", + link: "/smart-contracts/other-accounts/modular-account/multisig-plugin/details", + }, + ], + collapsed: true, + }, + { + text: "Session keys", + items: [ + { + text: "Overview", + link: "/smart-contracts/other-accounts/modular-account/session-keys", + }, + { + text: "Getting started", + link: "/smart-contracts/other-accounts/modular-account/session-keys/getting-started", + }, + { + text: "Supported permissions", + link: "/smart-contracts/other-accounts/modular-account/session-keys/supported-permissions", + }, + ], + collapsed: true, + }, + { + text: "Manage plugins", + items: [ + { + text: "Install plugins", + link: "/smart-contracts/other-accounts/modular-account/manage-plugins/install-plugins", + }, + { + text: "Get installed plugins", + link: "/smart-contracts/other-accounts/modular-account/manage-plugins/get-installed-plugins", }, ], collapsed: true, @@ -44,72 +100,38 @@ export const smartContractsSidebar: SidebarItem[] = [ { text: "Light Account", items: [ - { text: "Overview", link: "/smart-contracts/light-account" }, { - text: "Getting started", - link: "/smart-contracts/light-account/getting-started", + text: "Overview", + link: "/smart-contracts/other-accounts/light-account", }, - ], - }, - { - text: "Custom accounts", - link: "../third-party/smart-contracts", - }, - { - text: "Gas benchmarks", - link: "https://github.com/alchemyplatform/aa-benchmarks", - }, - { - text: "Smart Contract Account Deployments", - link: "/smart-contracts/deployed-addresses", - }, - ], - }, - { - text: "Using smart accounts", - items: [ - { - text: "Transfer ownership", - items: [ { - text: "Modular Account", - link: "/smart-contracts/transfer-ownership/modular-account", + text: "Getting started", + link: "/smart-contracts/other-accounts/light-account/getting-started", }, { - text: "Light Account", - link: "/smart-contracts/transfer-ownership/light-account", + text: "Transfer ownership", + link: "/smart-contracts/other-accounts/light-account/transfer-ownership-light-account", }, { - text: "Multi-Owner LightAccount", - link: "/smart-contracts/transfer-ownership/multi-owner-light-account", + text: "Manage multiple owners", + link: "/smart-contracts/other-accounts/light-account/multi-owner-light-account", }, ], }, { - text: "Session keys", - items: [ - { text: "Overview", link: "/smart-contracts/session-keys" }, - { - text: "Getting started", - link: "/smart-contracts/session-keys/getting-started", - }, - { - text: "Supported permissions", - link: "/smart-contracts/session-keys/supported-permissions", - }, - ], + text: "Custom accounts", + link: "../third-party/smart-contracts", }, ], + collapsed: true, }, { - text: "Extending smart accounts", - items: [ - { text: "Install plugins", link: "/smart-contracts/install-plugins" }, - { - text: "Get installed plugins", - link: "/smart-contracts/get-installed-plugins", - }, - ], + text: "Gas benchmarks", + link: "https://github.com/alchemyplatform/aa-benchmarks", + }, + { + text: "Deployment Addresses", + link: "/smart-contracts/deployed-addresses", }, { text: "SDK Reference", link: "/reference/account-kit/smart-contracts" }, ]; diff --git a/site/vercel.json b/site/vercel.json index ef99b51198..b3b831f7de 100644 --- a/site/vercel.json +++ b/site/vercel.json @@ -29,7 +29,7 @@ }, { "source": "/smart-accounts/accounts/guides/light-account", - "destination": "/smart-contracts/light-account", + "destination": "/smart-contracts/other-accounts/light-account", "statusCode": 301 }, {