MetaMask Smart Accounts Kit

https://docs.metamask.io/smart-accounts-kit
Admin
The MetaMask Smart Accounts Kit provides contracts, libraries, and services for developers to embed...
Tokens:142,850
Snippets:915
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Run the Smart Accounts Kit CLI with npx

Source: https://docs.metamask.io/smart-accounts-kit/get-started/use-the-cli

Run this command to install the @metamask/create-gator-app package and start the interactive CLI. The CLI will prompt for project name, framework, template, and package manager.

```bash
npx @metamask/create-gator-app@latest

```

--------------------------------

### Install Smart Accounts Kit with Bun

Source: https://docs.metamask.io/smart-accounts-kit/get-started/smart-account-quickstart

Install the @metamask/smart-accounts-kit package using Bun.

```bash
bun add @metamask/smart-accounts-kit

```

--------------------------------

### sendTransactionWithDelegation example with client setup

Source: https://docs.metamask.io/smart-accounts-kit/reference/erc7710/wallet-client

Example of using sendTransactionWithDelegation. The first file (example.ts) imports walletClient and publicClient from client.ts, extracts permissionContext and delegationManager from a permission response, and calls sendTransactionWithDelegation. The second file (client.ts) creates a public client and a wallet client extended with erc7710WalletActions, using the same session account for requesting and redeeming.

```typescript
import { walletClient, publicClient } from './client.ts'

// These properties must be extracted from the permission response. See
// `grantPermissions` action to learn how to request permissions.
const permissionContext = permissionsResponse[0].context
const delegationManager = permissionsResponse[0].delegationManager

const hash = walletClient.sendTransactionWithDelegation({
  chain,
  to: '0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
  value: 1n,
  permissionContext,
  delegationManager,
})

```

```typescript
import { http, createPublicClient, createWalletClient } from 'viem'
import { generatePrivateKey, privateKeyToAccount } from 'viem/accounts'
import { sepolia as chain } from 'viem/chains'
import { erc7710WalletActions } from '@metamask/smart-accounts-kit/actions'

export const publicClient = createPublicClient({
  chain,
  transport: http(),
})

// Your session account for requesting and redeeming should be the same.
const privateKey = '0x...'
const account = privateKeyToAccount(privateKey)

const walletClient = createWalletClient({
  account,
  transport: http(),
  chain,
}).extend(erc7710WalletActions())

```

--------------------------------

### Config: wallet client setup with erc7715ProviderActions

Source: https://docs.metamask.io/smart-accounts-kit/guides/advanced-permissions/get-supported-permissions

Example configuration for creating a wallet client with the erc7715ProviderActions extension, required for the getSupportedExecutionPermissions action.

```typescript
import { createWalletClient, custom } from 'viem'
import { erc7715ProviderActions } from '@metamask/smart-accounts-kit/actions'

export const walletClient = createWalletClient({
  transport: custom(window.ethereum),
}).extend(erc7715ProviderActions())
```

--------------------------------

### Start the frontend

Source: https://docs.metamask.io/smart-accounts-kit/get-started/use-scaffold-eth/advanced-permissions

Run this command in the project's root directory to start the development server.

```bash
yarn start
```

--------------------------------

### Install dependencies with Bun

Source: https://docs.metamask.io/smart-accounts-kit/guides/smart-accounts/signers/eoa-wallets

Install the Smart Accounts Kit and other required packages using Bun.

```bash
bun add @metamask/smart-accounts-kit wagmi @metamask/connect-evm @tanstack/react-query viem

```

--------------------------------

### Install dependencies with npm

Source: https://docs.metamask.io/smart-accounts-kit/guides/x402/buyer/delegations

Install the required packages: @x402/core, @x402/fetch, and @metamask/x402.

```bash
npm install @x402/core @x402/fetch @metamask/x402

```

--------------------------------

### Install Smart Accounts Kit with npm

Source: https://docs.metamask.io/smart-accounts-kit/get-started/smart-account-quickstart

Install the @metamask/smart-accounts-kit package using npm.

```bash
npm install @metamask/smart-accounts-kit

```

--------------------------------

### Install Smart Accounts Kit with Yarn

Source: https://docs.metamask.io/smart-accounts-kit/get-started/smart-account-quickstart

Install the @metamask/smart-accounts-kit package using Yarn.

```bash
yarn add @metamask/smart-accounts-kit

```

--------------------------------

### Install dependencies with Bun

Source: https://docs.metamask.io/smart-accounts-kit/guides/x402/buyer/delegations

Install the required packages using Bun.

```bash
bun add @x402/core @x402/fetch @metamask/x402

```

--------------------------------

### Install the extension with create-eth

Source: https://docs.metamask.io/smart-accounts-kit/get-started/use-scaffold-eth/advanced-permissions

Run this command to install the Smart Accounts Kit extension for Scaffold-ETH 2. Replace 'your-project-name' with your desired project name.

```bash
npx create-eth@latest -e metamask/erc-7715-extension your-project-name
```

--------------------------------

### Install @metamask/smart-accounts-kit

Source: https://docs.metamask.io/smart-accounts-kit/get-started/install

Install the Smart Accounts Kit package using your preferred package manager. Choose one of the four commands based on your environment.

```bash
npm install @metamask/smart-accounts-kit

```

```bash
yarn add @metamask/smart-accounts-kit

```

```bash
pnpm add @metamask/smart-accounts-kit

```

```bash
bun add @metamask/smart-accounts-kit

```

--------------------------------

### Install Smart Accounts Kit with pnpm

Source: https://docs.metamask.io/smart-accounts-kit/get-started/smart-account-quickstart

Install the @metamask/smart-accounts-kit package using pnpm.

```bash
pnpm add @metamask/smart-accounts-kit

```

--------------------------------

### Install dependencies with npm

Source: https://docs.metamask.io/smart-accounts-kit/guides/smart-accounts/signers/eoa-wallets

Install the Smart Accounts Kit and other required packages using npm.

```bash
npm install @metamask/smart-accounts-kit wagmi @metamask/connect-evm @tanstack/react-query viem

```

--------------------------------

### Install dependencies with pnpm

Source: https://docs.metamask.io/smart-accounts-kit/guides/smart-accounts/signers/eoa-wallets

Install the Smart Accounts Kit and other required packages using pnpm.

```bash
pnpm add @metamask/smart-accounts-kit wagmi @metamask/connect-evm @tanstack/react-query viem

```

--------------------------------

### Estimate fee per gas with Pimlico (example.ts)

Source: https://docs.metamask.io/smart-accounts-kit/guides/smart-accounts/send-user-operation

Shows how to modify the previous example to estimate gas fees using Pimlico's getUserOperationGasPrice. Requires installing the permissionless.js SDK and uses a Pimlico API key. The diff adds the createPimlicoClient import and client, fetches the fast fee, and spreads it into the sendUserOperation call.

```typescript
+ import { createPimlicoClient } from "permissionless/clients/pimlico";
import { parseEther } from "viem";
import { bundlerClient, smartAccount } from "./config.ts" // The config.ts is the same as in the previous example.

- const maxFeePerGas = 1n;
- const maxPriorityFeePerGas = 1n;

+ const pimlicoClient = createPimlicoClient({
+   transport: http("https://api.pimlico.io/v2/11155111/rpc?apikey=<YOUR-API-KEY>"), // You can get the API Key from the Pimlico dashboard.
+ });
+
+ const { fast: fee } = await pimlicoClient.getUserOperationGasPrice();

const userOperationHash = await bundlerClient.sendUserOperation({
  account: smartAccount,
  calls: [
    {
      to: "0x1234567890123456789012345678901234567890",
      value: parseEther("1")
    }
  ],
-  maxFeePerGas,
-  maxPriorityFeePerGas
+  ...fee
});

```

--------------------------------

### Install dependencies with Yarn

Source: https://docs.metamask.io/smart-accounts-kit/guides/smart-accounts/signers/eoa-wallets

Install the Smart Accounts Kit and other required packages using Yarn.

```bash
yarn add @metamask/smart-accounts-kit wagmi @metamask/connect-evm @tanstack/react-query viem

```

--------------------------------

### Install dependencies with npm, Yarn, pnpm, or Bun

Source: https://docs.metamask.io/smart-accounts-kit/guides/smart-accounts/signers/passkey

Install the Smart Accounts Kit and the ox library using your preferred package manager. Requires Node.js v20 or later.

```bash
npm install @metamask/smart-accounts-kit ox

```

```bash
yarn add @metamask/smart-accounts-kit ox

```

```bash
pnpm add @metamask/smart-accounts-kit ox

```

```bash
bun add @metamask/smart-accounts-kit ox

```

--------------------------------

### Install the Smart Accounts Kit extension

Source: https://docs.metamask.io/smart-accounts-kit/get-started/use-scaffold-eth/smart-accounts

Run this command to install the MetaMask Smart Accounts extension for Scaffold-ETH 2. Replace 'your-project-name' with your desired project name.

```bash
npx create-eth@latest -e metamask/gator-extension your-project-name

```

--------------------------------

### Create delegation with ERC-20 periodic scope

Source: https://docs.metamask.io/smart-accounts-kit/reference/delegation/delegation-scopes

Creates a delegation with an ERC-20 periodic scope that resets the allowance at the start of each period. The example sets a 10-token limit per 86400-second period, starting from the current timestamp. Requires the token address, period amount, period duration, and start date.

```typescript
import { createDelegation, getSmartAccountsEnvironment, ScopeType } from "@metamask/smart-accounts-kit";
import { sepolia } from "viem/chains";
import { parseUnits } from "viem";

// Since current time is in seconds, convert milliseconds to seconds.
const startDate = Math.floor(Date.now() / 1000);

const delegation = createDelegation({
  scope: {
    type: ScopeType.Erc20PeriodTransfer,
    tokenAddress: "0xb4aE654Aca577781Ca1c5DE8FbE60c2F423f37da",
    // 10 ERC-20 token with 6 decimals
    periodAmount: parseUnits("10", 6),
    periodDuration: 86400,
    startDate,
  },
  // Address that is granting the delegation
  from: "0x7E48cA6b7fe6F3d57fdd0448B03b839958416fC1",
  // Address to which the delegation is being granted
  to: "0x2B2dBd1D5fbeB77C4613B66e9F35dBfE12cB0488",
  // Alternatively you can use environment property of MetaMask smart account.
  environment: getSmartAccountsEnvironment(sepolia.id);
});
```

--------------------------------

### Set up a Wallet Client with erc7715ProviderActions

Source: https://docs.metamask.io/smart-accounts-kit/guides/advanced-permissions/execute-on-metamask-users-behalf

Creates a Viem Wallet Client using window.ethereum and extends it with erc7715ProviderActions from @metamask/smart-accounts-kit/actions to enable requesting Advanced Permissions.

```typescript
import { createWalletClient, custom } from 'viem'
import { erc7715ProviderActions } from '@metamask/smart-accounts-kit/actions'

const walletClient = createWalletClient({
  transport: custom(window.ethereum),
}).extend(erc7715ProviderActions())

```

--------------------------------

### Set up a Wallet Client with createWalletClient

Source: https://docs.metamask.io/smart-accounts-kit/get-started/smart-account-quickstart/eip7702

Set up a Wallet Client using Viem's createWalletClient function. This lets you sign and submit EIP-7702 authorizations.

```typescript
import { createWalletClient, http } from 'viem'
import { sepolia as chain } from 'viem/chains'
import { privateKeyToAccount } from 'viem/accounts'

export const account = privateKeyToAccount('0x...')

export const walletClient = createWalletClient({
  account,
  chain,
  transport: http(),
})

```

--------------------------------

### NativeTokenPeriodTransfer caveat example

Source: https://docs.metamask.io/smart-accounts-kit/reference/delegation/caveats

Creates a caveat that limits native token transfers within a specified time window. At the start of each new period, the allowed transfer amount resets; unused allowance from the previous period is forfeited. `periodAmount` is the maximum per period, `periodDuration` is the period length in seconds, and `startDate` is the first period's start timestamp in seconds.

```javascript
import { CaveatType } from '@metamask/smart-accounts-kit'

// Current time as start date.
// Since startDate is in seconds, we need to convert milliseconds to seconds.
const startDate = Math.floor(Date.now() / 1000)

const caveats = [
  {
    type: CaveatType.NativeTokenPeriodTransfer,
    // 1 ETH in wei.
    periodAmount: 1000000000000000000n,
    // 1 day in seconds.
    periodDuration: 86400,
    startDate,
  },
]

```

--------------------------------

### Configuration for Multisig Example

Source: https://docs.metamask.io/smart-accounts-kit/guides/smart-accounts/generate-multisig-signature

This configuration file (config.ts) sets up the environment: it creates a public client, generates private keys for Alice and Bob, exports their accounts and smart accounts, and creates a bundler client for the Sepolia chain.

```typescript

export const aliceSmartAccount = await toMetaMaskSmartAccount({
  client: publicClient,
  implementation: Implementation.MultiSig,
  deployParams: [signers, threshold],
  deploySalt: '0x',
  signer: [{ account: aliceAccount }],
})

export const bobSmartAccount = await toMetaMaskSmartAccount({
  client: publicClient,
  implementation: Implementation.MultiSig,
  deployParams: [signers, threshold],
  deploySalt: '0x',
  signer: [{ account: bobAccount }],
})

export const bundlerClient = createBundlerClient({
  client: publicClient,
  transport: http('https://public.pimlico.io/v2/rpc'),
})

```

--------------------------------

### Create NativeTokenStreaming delegation with createDelegation

Source: https://docs.metamask.io/smart-accounts-kit/reference/delegation/delegation-scopes

Creates a delegation with a NativeTokenStreaming scope, specifying the streaming rate, initial and maximum amounts, and the start time. The example uses the Sepolia chain environment and includes placeholder addresses for the delegator and delegatee.

```typescript
import { createDelegation, getSmartAccountsEnvironment, ScopeType } from "@metamask/smart-accounts-kit";
import { sepolia } from "viem/chains";
import { parseEther } from "viem";

// Since current time is in seconds, convert milliseconds to seconds.
const startTime = Math.floor(Date.now() / 1000);

const delegation = createDelegation({
  scope: {
    type: ScopeType.NativeTokenStreaming,
    amountPerSecond: parseEther("0.0001"),
    initialAmount: parseEther("0.01"),
    maxAmount: parseEther("0.1"),
    startTime,
  },
  // Address that is granting the delegation.
  from: "0x7E48cA6b7fe6F3d57fdd0448B03b839958416fC1",
  // Address to which the delegation is being granted.
  to: "0x2B2dBd1D5fbeB77C4613B66e9F35dBfE12cB0488",
  // Alternatively you can use environment property of MetaMask smart account.
  environment: getSmartAccountsEnvironment(sepolia.id);
});
```

--------------------------------

### Create delegation with NativeTokenPeriodTransfer scope

Source: https://docs.metamask.io/smart-accounts-kit/reference/delegation/delegation-scopes

Creates a delegation with a NativeTokenPeriodTransfer scope, allowing periodic transfers of a fixed amount of native tokens. The scope uses a start date, period amount, and period duration. The example uses the sepolia chain and the getSmartAccountsEnvironment helper.

```typescript
import { createDelegation, getSmartAccountsEnvironment, ScopeType } from "@metamask/smart-accounts-kit";
import { sepolia } from "viem/chains";
import { parseEther } from "viem";

// Since current time is in seconds, convert milliseconds to seconds.
const startDate = Math.floor(Date.now() / 1000);

const delegation = createDelegation({
  scope: {
    type: ScopeType.NativeTokenPeriodTransfer,
    periodAmount: parseEther("0.01"),
    periodDuration: 86400,
    startDate,
  },
  // Address that is granting the delegation.
  from: "0x7E48cA6b7fe6F3d57fdd0448B03b839958416fC1",
  // Address to which the delegation is being granted.
  to: "0x2B2dBd1D5fbeB77C4613B66e9F35dBfE12cB0488",
  // Alternatively you can use environment property of MetaMask smart account.
  environment: getSmartAccountsEnvironment(sepolia.id);
});
```

--------------------------------

### getErc20StreamingEnforcerAvailableAmount example with delegation config

Source: https://docs.metamask.io/smart-accounts-kit/reference/delegation/caveat-enforcer-client

The example.ts file calls getErc20StreamingEnforcerAvailableAmount with a delegation object imported from config.ts. The config.ts file creates that delegation using createDelegation with an Erc20Streaming scope, requiring a token address, amount per second, initial and max amounts, and a start time in seconds.

```typescript
import { delegation } './config.ts'

// Returns the available amount
const { availableAmount } = await caveatEnforcerClient.getErc20StreamingEnforcerAvailableAmount({
  delegation,
})

```

```typescript
import { createDelegation, ScopeType } from '@metamask/smart-accounts-kit'
import { sepolia as chain } from 'viem/chains'
import { getSmartAccountsEnvironment } from '@metamask/smart-accounts-kit'
import { parseUnits } from 'viem'

const environment = getSmartAccountsEnvironment(chain.id)

// Since current time is in seconds, we need to convert milliseconds to seconds.
const startTime = Math.floor(Date.now() / 1000)

export const delegation = createDelegation({
  scope: {
    type: ScopeType.Erc20Streaming,
    tokenAddress: '0xc11F3a8E5C7D16b75c9E2F60d26f5321C6Af5E92',
    amountPerSecond: parseUnits('0.1', 6),
    initialAmount: parseUnits('1', 6),
    maxAmount: parseUnits('10', 6),
    startTime,
  },
  to: 'DELEGATE_ADDRESS',
  from: 'DELEGATOR_ADDRESS',
  environment,
})

```

--------------------------------

### Native token periodic permission

Source: https://docs.metamask.io/smart-accounts-kit/reference/advanced-permissions/permissions

Creates a native token periodic permission that enforces a per-period transfer limit, resetting at the start of each period. periodAmount and periodDuration are required; startTime defaults to the current time and justification is optional. The example sets a daily limit of 0.001 ETH with a 86400-second period.

```javascript
import { parseEther } from 'viem'

const currentTime = Math.floor(Date.now() / 1000)
const expiry = currentTime + 604800

const permission = {
  type: 'native-token-periodic',
  data: {
    periodAmount: parseEther('0.001'),
    periodDuration: 86400,
    startTime: currentTime,
    justification: 'Permission to use 0.001 ETH every day',
  },
  isAdjustmentAllowed: true,
}

```

--------------------------------

### ERC-20 allowance permission example

Source: https://docs.metamask.io/smart-accounts-kit/reference/advanced-permissions/permissions

Creates an ERC-20 allowance permission that allows transfers up to a fixed total amount. The permission object uses the 'erc20-token-allowance' type and includes a token address, allowance amount (50 USDC with 6 decimals), start time, and justification. The isAdjustmentAllowed flag is set to true.

```javascript
import { parseUnits } from 'viem'

const currentTime = Math.floor(Date.now() / 1000)
const expiry = currentTime + 604800

const permission = {
  type: 'erc20-token-allowance',
  data: {
    tokenAddress: '0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238',
    allowanceAmount: parseUnits('50', 6),
    startTime: currentTime,
    justification: 'Permission to transfer up to 50 USDC in total',
  },
  isAdjustmentAllowed: true,
}

```

--------------------------------

### Get ERC-20 period transfer enforcer available amount with delegation config

Source: https://docs.metamask.io/smart-accounts-kit/reference/delegation/caveat-enforcer-client

The example.ts file calls getErc20PeriodTransferEnforcerAvailableAmount with a delegation object imported from config.ts. The config.ts file creates that delegation using createDelegation with an Erc20PeriodTransfer scope, requiring a token address, period amount, period duration, and start date in seconds.

```typescript
import { delegation } './config.ts'

// Returns the available amount for current period.
const { availableAmount } = await caveatEnforcerClient.getErc20PeriodTransferEnforcerAvailableAmount({
  delegation,
})

```

```typescript
import { createDelegation, ScopeType } from '@metamask/smart-accounts-kit'
import { sepolia as chain } from 'viem/chains'
import { getSmartAccountsEnvironment } from '@metamask/smart-accounts-kit'

const environment = getSmartAccountsEnvironment(chain.id)

// Since current time is in seconds, we need to convert milliseconds to seconds.
const startDate = Math.floor(Date.now() / 1000)

export const delegation = createDelegation({
  scope: {
    type: ScopeType.Erc20PeriodTransfer,
    tokenAddress: '0xb4aE654Aca577781Ca1c5DE8FbE60c2F423f37da',
    periodAmount: parseUnits('10', 6),
    periodDuration: 86400,
    startDate,
  },
  to: 'DELEGATE_ADDRESS',
  from: 'DELEGATOR_ADDRESS',
  environment,
})

```

--------------------------------

### Native token stream permission

Source: https://docs.metamask.io/smart-accounts-kit/reference/advanced-permissions/permissions

Creates a native token stream permission that releases an initial amount at start time and then accrues tokens linearly at a per-second rate up to a maximum. amountPerSecond is required; initialAmount defaults to 0 and maxAmount defaults to no limit. The example streams 0.0001 ETH per second with an initial 0.1 ETH and a 1 ETH cap.

```javascript
import { parseEther } from 'viem'

const currentTime = Math.floor(Date.now() / 1000)
const expiry = currentTime + 604800

const permission = {
  type: 'native-token-stream',
  data: {
    amountPerSecond: parseEther('0.0001'),
    initialAmount: parseEther('0.1'),
    maxAmount: parseEther('1'),
    startTime: currentTime,
    justification: 'Permission to use 0.0001 ETH per second',
  },
  isAdjustmentAllowed: true,
}

```

--------------------------------

### Set up environment variables

Source: https://docs.metamask.io/smart-accounts-kit/get-started/use-scaffold-eth/advanced-permissions

Navigate into the project's nextjs package and create a .env.local file from the example. Update the NEXT_PUBLIC_PIMLICO_API_KEY variable with your Pimlico API key.

```bash
cd your-project-name/packages/nextjs
cp .env.example .env.local
```

--------------------------------

### Install dependencies with pnpm

Source: https://docs.metamask.io/smart-accounts-kit/guides/x402/buyer/delegations

Install the required packages using pnpm.

```bash
pnpm add @x402/core @x402/fetch @metamask/x402

```

--------------------------------

### Deploy smart accounts environment with example.ts and config.ts

Source: https://docs.metamask.io/smart-accounts-kit/guides/configure-toolkit

Deploys the Delegation Framework contracts using deploySmartAccountsEnvironment. Requires a Viem wallet client, public client, and chain, and the wallet must have sufficient native token balance. The example.ts imports from config.ts, which sets up the clients with a private key.

```typescript
import { walletClient, publicClient } from './config.ts'
import { sepolia as chain } from 'viem/chains'
import { deploySmartAccountsEnvironment } from '@metamask/smart-accounts-kit/utils'

const environment = await deploySmartAccountsEnvironment(walletClient, publicClient, chain)

```

```typescript
import { privateKeyToAccount } from 'viem/accounts'
import { sepolia as chain } from 'viem/chains'
import { http, createWalletClient, createPublicClient } from 'viem'

// Your deployer wallet private key.
const privateKey = '0x123..'
const account = privateKeyToAccount(privateKey)

export const walletClient = createWalletClient({
  account,
  chain,
  transport: http(),
})

export const publicClient = createPublicClient({
  transport: http(),
  chain,
})

```
Tokens:
Raw