Adding Metamask Snap Connector

This guide covers three integration scenarios for the Metamask snap connector:

Using starknet-react with the starknetkit modal
Using starknet-react with starknetkit's connectors
Using only starknetkit without starknet-react

Prerequisites

Update Starknetkit to version 2.6.1 or higher.

New Metamask InjectedConnector

In your starknet-providers.tsx file, add the new Metamask InjectedConnector:

const connectors = [
    new InjectedConnector({ options: { id: 'braavos', name: 'Braavos' } }),
    new InjectedConnector({ options: { id: 'argentX', name: 'Ready Wallet (formerly Argent)' } }),
    new InjectedConnector({ options: { id: 'metamask', name: 'MetaMask' } }),
];

Integration Methods

Using Starknetkit Modal

No additional configuration needed! 🎉

Using Starknet-react

Install the required package:

npm i @starknet-io/get-starknet-core

Import the getStarknet function in your ConnectWallet file:

import { getStarknet } from "@starknet-io/get-starknet-core"

Implement the wallet connector component:

'use client';
import { useAccount, useConnect, useDisconnect } from '@starknet-react/core';
import { useMemo } from 'react';
import { getStarknet } from '@starknet-io/get-starknet-core';
 
export function WalletConnector() {
  const { disconnect } = useDisconnect();
  const { connect, connectors } = useConnect();
 
  const availableConnectors = useMemo(
    () => connectors.filter((connector) => connector.available),
    [connectors]
  );
  
  getStarknet(); // Call this
 
  const { address } = useAccount();
  if (!address) {
    return (
      <div className="flex flex-col gap-2">
        {availableConnectors.map((connector) => (
          <button
            key={connector.id}
            onClick={() => connect({ connector })}
            className="text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors p-4"
          >
            Connect with {connector.name}
          </button>
        ))}
      </div>
    );
  }
  return (
    <div className="flex flex-col gap-2">
      <div className="p-2 bg-gray-100 rounded-lg ">
        Connected: {address?.slice(0, 6)}...{address?.slice(-4)}
      </div>
      <button
        onClick={() => disconnect()}
        className="px-4 py-2 text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors"
      >
        Disconnect
      </button>
    </div>
  );
}

Using Starknetkit Connect Function

Simply implement the connect handler:

const handleConnect = async () => {
    const { wallet, connectorData } = await connect({
      connectors: [
        new InjectedConnector({
          options: { id: 'metamask', name: 'MetaMask' },
        }),
      ],
    });
 
    if (wallet && connectorData) {
      setConnection(wallet);
      setAddress(connectorData.account || '');
    }
};

Ready Available Methods