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;