Skip to main content

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;