MetaMask · joaniefromtheblock · Oct 18, 2024 · Aug 28, 2024 · Aug 28, 2024 · Aug 31, 2024
@@ -226,15 +226,24 @@ After the user connects to Starknet, the dapp displays the user's connected wall
  <img src={require("../../../assets/starknet-dapp-connected.png").default} alt="Connected Starknet dapp" width="850" style={{border: "1px solid #DCDCDC"}} />
 </p>
 
+:::note
+
+An account can submit transactions only after it's deployed.
+It does not deploy immediately upon creation. 
+Deployment happens during the first [transaction](send-starknet-transactions.md).
+
+:::
+
 ## Connect using `wallet_invokeSnap`
 
 Alternatively, you can manage the Snap invocation manually.
 Use the [`wallet_invokeSnap`](/snaps/reference/wallet-api-for-snaps/#wallet_invokesnap) JSON-RPC
 method to directly interact with the Starknet Snap. 
 
-:::note
+:::warning Important
 
-We recommend using [EIP-6963](../../../concepts/wallet-interoperability.md) for detecting the MetaMask wallet when using the `wallet_invokeSnap` approach. This ensures better interoperability and improved wallet integration.
+We recommend using [EIP-6963](../../../concepts/wallet-interoperability.md) for detecting MetaMask when using the `wallet_invokeSnap` approach.
+This ensures you can connect to MetaMask and other installed wallets without conflict.
 
 :::
 
@@ -254,26 +263,28 @@ This file handles the interactions with the Starknet Snap:
 const snapId = "npm:starknet-snap";
 
 export async function connect() {
- await ethereum.request({
- method: "wallet_requestSnaps",
- params: {
- [snapId]: {},
- },
- });
+ await provider // Or window.ethereum if you don't support EIP-6963.
+ .request({
+ method: "wallet_requestSnaps",
+ params: {
+ [snapId]: {},
+ },
+ });
 }
 
 export async function callSnap(method, params) {
  try {
- const response = await ethereum.request({
- method: "wallet_invokeSnap",
- params: {
- snapId,
- request: {
- method,
- params,
+ const response = await provider // Or window.ethereum if you don't support EIP-6963.
+ .request({
+ method: "wallet_invokeSnap",
+ params: {
+ snapId,
+ request: {
+ method,
+ params,
+ },
  },
- },
- });
+ });
  console.log(`${method} response:`, response);
  return response;
  } catch (err) {
@@ -303,6 +314,14 @@ const chainId = "0x534e5f5345504f4c4941"; // Chain ID of the network to use.
 const accountInfo = await callSnap("starkNet_createAccount", { addressIndex, deploy, chainId });
 ```
 
+:::note
+
+An account can submit transactions only after it's deployed.
+It does not deploy immediately upon creation.
+Deployment happens during the first [transaction](send-starknet-transactions.md).
+
+:::
+
 ### Examples
 
 #### HTML and Vanilla JS
@@ -316,14 +335,6 @@ It displays a button that, when selected:
 - Creates a Starknet account.
 - Displays the account address.
 
-:::note
-
-An account can submit transactions only after it's deployed. 
-It does not deploy immediately upon creation. Deployment happens during the first [transaction](index.md#supported-functionalities).
-such as when calling `execute`(https://starknetjs.com/docs/API/classes/Account/#execute) through `get-starknet` or using [`starknet_executeTxn`](../../../reference/non-evm-apis/starknet-snap-api.md#starknet_executeTxn) from `wallet_invokeSnap`.
-
-:::
-
 ```html
 <html lang="en">
 <head>
@@ -336,24 +347,26 @@ such as when calling `execute`(https://starknetjs.com/docs/API/classes/Account/#
  <p id="accountInfo"></p>
  <script>
  async function connect(snapId) {
- await ethereum.request({
- method: "wallet_requestSnaps",
- params: {
- [snapId]: {},
- },
- });
+ await provider // Or window.ethereum if you don't support EIP-6963.
+ .request({
+ method: "wallet_requestSnaps",
+ params: {
+ [snapId]: {},
+ },
+ });
  }
  async function callSnap(snapId, method, params) {
  try {
- const response = await ethereum.request({
- method: "wallet_invokeSnap",
- params: {
- snapId,
- request: {
- method,
- params,
+ const response = await provider // Or window.ethereum if you don't support EIP-6963.
+ .request({
+ method: "wallet_invokeSnap",
+ params: {
+ snapId,
+ request: {
+ method,
+ params,
+ },
  },
- },
  });
  return response;
  } catch (err) {
@@ -391,29 +404,31 @@ const ConnectWallet = () => {
  const [accountInfo, setAccountInfo] = useState('');
  const connect = async (snapId) => {
  try {
- await provider.request({           // Or window.ethereum if you don't support EIP-6963.
- method: "wallet_requestSnaps",
- params: {
- [snapId]: {},
- },
- });
+ await provider // Or window.ethereum if you don't support EIP-6963.
+ .request({
+ method: "wallet_requestSnaps",
+ params: {
+ [snapId]: {},
+ },
+ });
  } catch (err) {
  console.error("Snap connection error:", err);
  alert(`Error connecting to Snap: ${err.message || err}`);
  }
  };
  const callSnap = async (snapId, method, params) => {
  try {
- const response = await provider.request({           // Or window.ethereum if you don't support EIP-6963.
- method: "wallet_invokeSnap",
- params: {
- snapId,
- request: {
- method,
- params,
+ const response = await provider // Or window.ethereum if you don't support EIP-6963.
+ .request({
+ method: "wallet_invokeSnap",
+ params: {
+ snapId,
+ request: {
+ method,
+ params,
+ },
  },
- },
- });
+ });
  return response;
  } catch (err) {
  console.error(`${method} problem happened:`, err);
@@ -422,7 +437,7 @@ const ConnectWallet = () => {
  };
  const handleConnectClick = async () => {
  try {
- const snapId = "npm:@consensys/starknet-snap"; // Snap ID
+ const snapId = "npm:@consensys/starknet-snap"; // Snap ID.
  await connect(snapId);
  const deploy = false; // Whether to deploy the actual account.
  const addressIndex = 0; // The address to derive.

@@ -8,14 +8,13 @@ sidebar_position: 1
 [Starknet](https://www.starknet.io/) is a non-EVM Layer 2 network.
 You can interact with users' Starknet accounts in MetaMask by connecting to the
 [Starknet Snap](https://snaps.metamask.io/snap/npm/consensys/starknet-snap/).
-
 You can use the [`get-starknet`](https://github.com/starknet-io/get-starknet) library or the
 [`wallet_invokeSnap`](/snaps/reference/wallet-api-for-snaps/#wallet_invokesnap) JSON-RPC method from
 your dapp to connect to the Starknet Snap.
 Both options support similar functionalities, but offer different ways of interacting with users'
 Starknet accounts.
-See [Connect to Starknet](connect-to-starknet.md) to get started.
 
+See [**Connect to Starknet**](connect-to-starknet.md) to get started.
 
 The following sections compare the two connection options.
 
@@ -164,13 +163,11 @@ The following section lists the core functionalities and API methods that each c
  </tbody>
 </table>
 
-## Next steps
-
-To get started, learn how to [connect your dapp to Starknet in MetaMask](connect-to-starknet.md).
-
 ## Resources
 
-The following resources provide additional information for learning about and interacting with Starknet:
+To get started, [connect your dapp to Starknet in MetaMask](connect-to-starknet.md).
+
+The following external resources provide additional information for learning about and interacting with Starknet:
 
 - [Official Starknet documentation](https://www.starknet.io/developers/)
 - [Starknet companion dapp](https://snaps.consensys.io/starknet)

@@ -36,7 +36,7 @@ The following example displays the account address:
  ```javascript
  const connectStarknetAccount = async () => {
  const starknet = await connect();
- await starknet.enable(); // Prompts the user to connect their Starknet account using MetaMask
+ await starknet.enable(); // Prompts the user to connect their Starknet account using MetaMask.
  return starknet;
  };
 
@@ -57,15 +57,16 @@ The following example displays the account address:
  if (typeof provider !== "undefined" && provider.isMetaMask) {
  try {
  // Invoke the Starknet Snap to get account information.
- const response = await provider.request({           // Or window.ethereum if you don't support EIP-6963.
- method: "wallet_invokeSnap",
- params: {
- snapId: "npm:@starknet-snap/snap", 
- request: {
- method: "starknet_recoverAccounts"
+ const response = await provider // Or window.ethereum if you don't support EIP-6963.
+ .request({
+ method: "wallet_invokeSnap",
+ params: {
+ snapId: "npm:@starknet-snap/snap", 
+ request: {
+ method: "starknet_recoverAccounts"
+ }
  }
- }
- });
+ });
 
  if (response && response.length > 0) {
  const account = response[0]; // Get the first account.
@@ -82,7 +83,7 @@ The following example displays the account address:
  }
  };
 
- // Call the function when needed
+ // Call the function when needed.
  showAccountInfo();
  ```
 
@@ -147,11 +148,12 @@ connect or disconnect the account.
  const connectToSnap = async () => {
  if (typeof provider !== "undefined" && provider.isMetaMask) {
  try {
- // Request permission to access the Snap
- await provider.request({           // Or window.ethereum if you don't support EIP-6963.
- method: "wallet_requestSnaps",
- params: { [STARKNET_SNAP_ID]: {} }
- });
+ // Request permission to access the Snap.
+ await provider // Or window.ethereum if you don't support EIP-6963.
+ .request({
+ method: "wallet_requestSnaps",
+ params: { [STARKNET_SNAP_ID]: {} }
+ });
  setIsConnected(true);
  fetchAccount();
  } catch (err) {
@@ -171,15 +173,16 @@ connect or disconnect the account.
  const fetchAccount = async () => {
  if (typeof provider !== "undefined" && provider.isMetaMask) {
  try {
- const response = await provider.request({           // Or window.ethereum if you don't support EIP-6963.
- method: "wallet_invokeSnap",
- params: {
- snapId: STARKNET_SNAP_ID,
- request: {
- method: "starknet_recoverAccounts"
+ const response = await provider // Or window.ethereum if you don't support EIP-6963.
+ .request({
+ method: "wallet_invokeSnap",
+ params: {
+ snapId: STARKNET_SNAP_ID,
+ request: {
+ method: "starknet_recoverAccounts"
+ }
  }
- }
- });
+ });
 
  if (response && response.length > 0) {
  setAccountAddress(response[0].address);
@@ -240,7 +243,7 @@ const invokeStarknetContract = async () => {
 
  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 calldata = [/* your function arguments */]; // Replace with calldata.
 
  const result = await starknet.account.execute({
  contractAddress: contractAddress,
@@ -272,24 +275,25 @@ const invokeStarknetContract = async () => {
  }
  ];
 
- const result = await provider.request({           // Or window.ethereum if you don't support EIP-6963.
- method: "wallet_invokeSnap",
- params: {
- snapId: "npm:@consensys/starknet-snap",
- request: {
- method: "starkNet_executeTxn",
- params: {
- address: "0xb60e8dd61c5d32be8058bb8eb970870f07233155", // The sender's address.
- calls: calls, // The array of calls with entrypoint and calldata.
- details: {
- nonce: 1, // Optional nonce.
- maxFee: "1000000000000000", // Maximum gas fee allowed.
- },
- chainId: "0x534e5f5345504f4c4941" // Starknet Sepolia testnet chain ID
+ const result = await provider // Or window.ethereum if you don't support EIP-6963.
+ .request({
+ method: "wallet_invokeSnap",
+ params: {
+ snapId: "npm:@consensys/starknet-snap",
+ request: {
+ method: "starkNet_executeTxn",
+ params: {
+ address: "0xb60e8dd61c5d32be8058bb8eb970870f07233155", // The sender's address.
+ calls: calls, // The array of calls with entrypoint and calldata.
+ details: {
+ nonce: 1, // Optional nonce.
+ maxFee: "1000000000000000", // Maximum gas fee allowed.
+ },
+ chainId: "0x534e5f5345504f4c4941" // Starknet Sepolia testnet chain ID.
+ }
  }
  }
- }
- });
+ });
 
  console.log("Transaction result: ", result);
  } catch (error) {
@@ -375,15 +379,16 @@ Use the following component at the top level of your dapp to handle account chan
  const fetchAccount = async () => {
  if (typeof provider !== "undefined" && provider.isMetaMask) {
  try {
- const response = await provider.request({           // Or window.ethereum if you don't support EIP-6963.
- method: "wallet_invokeSnap",
- params: {
- snapId: STARKNET_SNAP_ID,
- request: {
- method: "starknet_recoverAccounts"
+ const response = await provider // Or window.ethereum if you don't support EIP-6963.
+ .request({
+ method: "wallet_invokeSnap",
+ params: {
+ snapId: STARKNET_SNAP_ID,
+ request: {
+ method: "starknet_recoverAccounts"
+ }
  }
- }
- });
+ });
 
  if (response && response.length > 0) {
  setAccount(response[0].address);