Use Externally Owned Account (EOA) with MetaMask Smart Accounts

Externally Owned Accounts (EOAs) are accounts controlled by a user’s private key (paired with a public address) and are typically accessed through wallet apps like MetaMask. MetaMask Smart Accounts is signer-agnostic, so you can use an EOA as the signer.

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 the user onboarding journey easier.
• See how to send a user operation.
• To sponsor gas for end users, see how to send a gasless transaction.