Use Externally Owned Account (EOA) with MetaMask Smart Accounts

Externally Owned Accounts (EOAs) are one of the most widely used wallet (such as MetaMask, Phantom, and more). They consist of a public and private keypair where the private key is only known to the user. MetaMask Smart Accounts is a signer agnostic implementation that allows you to use an EOA as a signer for MetaMask Smart Accounts.

info

This guide supports React and React-based frameworks. For Vue, see Wagmi docs.

Prerequisites

• Install Node.js v18 or later
• Install Yarn, npm, or another package manager

Steps

1. Install dependencies

Install the Smart Accounts Kit and other dependencies in your project:

• npm
• Yarn
• pnpm
• Bun

npm install @metamask/smart-accounts-kit wagmi @tanstack/react-query viem

yarn add @metamask/smart-accounts-kit wagmi @tanstack/react-query viem

pnpm add @metamask/smart-accounts-kit wagmi @tanstack/react-query viem

bun add @metamask/smart-accounts-kit wagmi @tanstack/react-query viem

2. Create the App provider

Once you've created the AppProvider, wrap it at the root of your application so that the rest of your application has access to the Wagmi's and TanStack's context. This will allow every component inside the provider to use the Wagmi hooks.

For the advance configuration, see Wagmi's createConfig API reference.

• provider.ts
• config.ts

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactNode } from "react";
import { WagmiProvider } from 'wagmi'
import { config } from "./config.ts";

const queryClient = new QueryClient();

export function AppProvider({ children }: { children: ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </WagmiProvider>
  );
}

import { createConfig, http } from "wagmi";
import { sepolia } from "viem/chains";

export const config = createConfig({
  chains: [sepolia],
  transports: {
    [sepolia.id]: http(),
  },
});

3. Create a smart account

Once the user has connected their wallet, use the Wallet Client from Wagmi as the signer to create a MetaMask smart account.

import { Implementation, toMetaMaskSmartAccount } from "@metamask/smart-accounts-kit";
import { useAccount, usePublicClient, useWalletClient } from "wagmi";

const { address } = useAccount();
const publicClient = usePublicClient();
const { data: walletClient } = useWalletClient();

// Additional check to make sure the EOA wallet is connected
// and values are available.
if (!address || !walletClient || !publicClient ) {
  // Handle the error case
 }

const smartAccount = await toMetaMaskSmartAccount({
  client: publicClient,
  implementation: Implementation.Hybrid,
  deployParams: [address, [], [], []],
  deploySalt: "0x",
  signer: { walletClient },
});

Next steps

• See how to use MetaMask Embedded Wallets as a signer to make user onboarding journey easier.
• See how to send a user operations.
• To sponsor gas for end users, see how to send a gasless transaction.