diff --git a/docs/for-devs/third-party-docs/MetaMask/metamask.mdx b/docs/for-devs/third-party-docs/MetaMask/metamask.mdx index 72e549a60e..78a0c4ceb5 100644 --- a/docs/for-devs/third-party-docs/MetaMask/metamask.mdx +++ b/docs/for-devs/third-party-docs/MetaMask/metamask.mdx @@ -5,23 +5,163 @@ sidebar_label: 'MetaMask' third_party_content_owner: 'alexandratran' --- -The [MetaMask Delegation Toolkit](https://docs.metamask.io/delegation-toolkit/) is a collection of tools for embedding -MetaMask Smart Accounts into apps. -These [smart accounts](https://docs.metamask.io/delegation-toolkit/concepts/smart-accounts/) support programmable -account behavior and advanced features like delegated permissions, multi-signature approvals, and gas abstraction. - -[Delegations](https://docs.metamask.io/delegation-toolkit/concepts/delegation/) are a core feature of MetaMask Smart -Accounts, enabling secure, rule-based permission sharing. -These delegations are powered by the toolkit's Delegation Framework, which defines how permissions are created, shared, -and enforced. - -## Using MetaMask Smart Accounts with Arbitrum - -The latest version of the MetaMask Delegation Toolkit -[supports multiple networks](https://docs.metamask.io/delegation-toolkit/get-started/supported-networks/), including -Arbitrum and Arbitrum Sepolia. - -You can follow the -[MetaMask Smart Accounts quickstart](https://docs.metamask.io/delegation-toolkit/development/get-started/quickstart/) to -set up the toolkit, create a smart account, and send a user operation. -Make sure you import `arbitrum` or `arbitrumSepolia` from `viem/chains` when setting up the Public Client. +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +The [MetaMask Smart Accounts Kit](https://docs.metamask.io/smart-accounts-kit/) enables embedding MetaMask Smart Accounts into dapps. +Smart accounts support programmable account behavior and advanced features like delegated permissions, multi-signature approvals, and gas abstraction. +Delegation is a core feature of smart accounts, enabling secure, rule-based permission sharing. + +## Use MetaMask smart accounts with Arbitrum + +The MetaMask Smart Accounts Kit +[supports multiple networks](https://docs.metamask.io/smart-accounts-kit/get-started/supported-networks/), including +Arbitrum One, Arbitrum Nova, and Arbitrum Sepolia. + +Follow these steps to create your first smart account and send a user operation. + +:::note Prerequisites +Before starting, ensure you have the following installed: + +- [Node.js](https://nodejs.org/en/download) v18 or later. +- [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), [Yarn](https://yarnpkg.com/), or another package manager. + ::: + +### 1. Install the Smart Accounts Kit + +Install the [Smart Accounts Kit](https://www.npmjs.com/package/@metamask/smart-accounts-kit) in your project: + + + + +```bash +npm install @metamask/smart-accounts-kit +``` + + + + +```bash +yarn add @metamask/smart-accounts-kit +``` + + + + +### 2. Set up a public client + +Set up a [Viem Public Client](https://viem.sh/docs/clients/public) using Viem's `createPublicClient` function. +This client will let the smart account query the signer's account state and interact with the blockchain network. +Make sure to import your desired Arbitrum network from `viem/chains`. + + + + +```typescript +import { createPublicClient, http } from 'viem'; +import { arbitrum as chain } from 'viem/chains'; + +const publicClient = createPublicClient({ + chain, + transport: http(), +}); +``` + + + + +```typescript +import { createPublicClient, http } from 'viem'; +import { arbitrumNova as chain } from 'viem/chains'; + +const publicClient = createPublicClient({ + chain, + transport: http(), +}); +``` + + + + +```typescript +import { createPublicClient, http } from 'viem'; +import { arbitrumSepolia as chain } from 'viem/chains'; + +const publicClient = createPublicClient({ + chain, + transport: http(), +}); +``` + + + + +### 3. Set up a bundler client + +Set up a [Viem Bundler Client](https://viem.sh/account-abstraction/clients/bundler) using Viem's `createBundlerClient` function. +This lets you use the bundler service to estimate gas for user operations and submit transactions to the network. + +```typescript +import { createBundlerClient } from 'viem/account-abstraction'; + +const bundlerClient = createBundlerClient({ + client: publicClient, + transport: http('https://your-bundler-rpc.com'), +}); +``` + +### 4. Create a MetaMask smart account + +Create a MetaMask smart account to send the first user operation. +This example configures a Hybrid smart account, +which is a flexible smart account implementation that supports both an externally owned account (EOA) owner and any number of passkey (WebAuthn) signers: + +```typescript +import { Implementation, toMetaMaskSmartAccount } from '@metamask/smart-accounts-kit'; +import { privateKeyToAccount } from 'viem/accounts'; + +const account = privateKeyToAccount('0x...'); + +const smartAccount = await toMetaMaskSmartAccount({ + client: publicClient, + implementation: Implementation.Hybrid, + deployParams: [account.address, [], [], []], + deploySalt: '0x', + signer: { account }, +}); +``` + +Learn more about [creating MetaMask Smart Accounts](https://docs.metamask.io/smart-accounts-kit/guides/smart-accounts/create-smart-account/). + +### 5. Send a user operation + +Send a user operation using Viem's [`sendUserOperation`](https://viem.sh/account-abstraction/actions/bundler/sendUserOperation) method. +The smart account will remain counterfactual until the first user operation. +If the smart account is not deployed, it will be automatically deployed upon the sending first user operation. + +```ts +import { parseEther } from 'viem'; + +// Appropriate fee per gas must be determined for the specific bundler being used. +const maxFeePerGas = 1n; +const maxPriorityFeePerGas = 1n; + +const userOperationHash = await bundlerClient.sendUserOperation({ + account: smartAccount, + calls: [ + { + to: '0x1234567890123456789012345678901234567890', + value: parseEther('1'), + }, + ], + maxFeePerGas, + maxPriorityFeePerGas, +}); +``` + +Learn more about [sending user operations](https://docs.metamask.io/smart-accounts-kit/guides/smart-accounts/send-user-operation/). + +### Next steps + +Now that you have created and deployed a MetaMask smart account on Arbitrum, you can grant specific permissions to other accounts from your smart account. +See MetaMask's documentation on how to [create a delegation](https://docs.metamask.io/smart-accounts-kit/guides/delegation/execute-on-smart-accounts-behalf/).