Skip to main content

Wallet API documentation

Directly integrate your dapp with the MetaMask extension using the Wallet API.

Manage Starknet accounts

You can manage Starknet accounts in MetaMask using the get-starknet library or the wallet_invokeSnap JSON-RPC method.

Notes
  • Account creation in Starknet is handled by the wallet provider. As a dapp developer, you do not create accounts directly. Instead, you can guide users to create an account with MetaMask.
  • Currently, the Starknet Snap doesn't support multiple Starknet accounts.

Prerequisites​

Connect to Starknet from your dapp.

Display account information​

After a user connects to their Starknet account in MetaMask, you can display the account details. The following example displays the account address:

const connectStarknetAccount = async () => {
  const starknet = await connect();
  await starknet.enable();  // Prompts the user to connect their Starknet account using MetaMask.
  return starknet;
};

const showAccountInfo = async () => {
  const starknet = await connectStarknetAccount();
  
  if (account) {
    document.getElementById("accountAddress").innerText = `Account Address: ${starknet.selectedAddress}`;
  }
};

Retrieve the connected account​

You can retrieve and display a user's connected Starknet account. The following example displays the connected account address if available, and displays buttons to connect or disconnect the account.

import { useStarknet, useConnectors } from "@starknet-react/core";
import { useState, useEffect } from "react";

function AccountDisplay() {
  const { account } = useStarknet();
  const { available, connect, disconnect } = useConnectors();
  const [accountAddress, setAccountAddress] = useState<string | undefined>();

  useEffect(() => {
    setAccountAddress(account?.address);
  }, [account]);

  return (
    <div>
      {accountAddress ? (
        <p>Connected Account: {accountAddress}</p>
      ) : (
        <p>No account connected</p>
      )}
      {available.map((connector) => (
        <button key={connector.id()} onClick={() => connect(connector)}>
          Connect {connector.name()}
        </button>
      ))}
      {account && (
        <button onClick={() => disconnect()}>Disconnect</button>
      )}
    </div>
  );
}

Manage account transactions​

You can manage a user's Starknet account transactions. The following example invokes a specific function on a Starknet smart contract, handles wallet connection and transaction submission, and logs the result or any errors:

const invokeStarknetContract = async () => {
  try {
    const starknet = getStarknet();
    await starknet.enable();  // Make sure the wallet is enabled.

    const contractAddress = "0xYourContractAddress";  // Replace with your contract address.
    const entrypoint = "function_name";  // The function you want to call.
    const calldata = [/* your function arguments */];  // Replace with calldata.

    const result = await starknet.account.execute({
      contractAddress: contractAddress,
      entrypoint: entrypoint,
      calldata: calldata
    });

    console.log("Transaction result: ", result);
  } catch (error) {
    console.error("Error invoking contract:", error);
  }
};

Handle account changes and disconnections​

You can handle account changes and disconnections. Use the following component at the top level of your dapp to handle account changes globally:

import { getStarknet } from "get-starknet";
import { useEffect, useState } from "react";

function AccountChangeHandler() {
  const [account, setAccount] = useState<string | null>(null);

  useEffect(() => {
    const starknet = getStarknet();

    const handleAccountsChanged = (accounts: string[]) => {
      console.log("Accounts changed:", accounts);
      setAccount(accounts[0] || null);
    };

    const handleDisconnect = () => {
      console.log("Disconnected from wallet");
      setAccount(null);
    };

    if (starknet) {
      starknet.on("accountsChanged", handleAccountsChanged);
      starknet.on("networkChanged", handleDisconnect);

      // Initial account setup.
      starknet.enable().then((accounts: string[]) => {
        setAccount(accounts[0] || null);
      });

      return () => {
        starknet.off("accountsChanged", handleAccountsChanged);
        starknet.off("networkChanged", handleDisconnect);
      };
    }
  }, []);

  return (
    <div>
      {account ? (
        <p>Connected Account: {account}</p>
      ) : (
        <p>No account connected</p>
      )}
    </div>
  );
}

export default AccountChangeHandler;
On this page