WIP: Starknet Snap docs #1509

joaniefromtheblock · 2024-08-28T17:24:21Z

Description

Draft of Starknet Snap docs.

Issue(s) fixed

Fixes #1511
Fixes #1512
Fixes #1513
Fixes #1514
Fixes #1515
Fixes #1516
Fixes #1526

Preview

Preview: https://metamask-docs-git-wip-starknet-snap-metamask-web.vercel.app/wallet/how-to/use-non-evm-networks/starknet/sign-starknet-data/
(If out of date, see the Vercel link at the bottom of the PR activity for the latest preview.)

Checklist

Complete this checklist before merging your PR:

If this PR contains a major change to the documentation content, I have added an entry to the top of the "What's new?" page.
The proposed changes have been reviewed and approved by a member of the documentation team.

vercel · 2024-08-28T17:24:26Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
metamask-docs	✅ Ready (Inspect)	Visit Preview	💬 8 unresolved ✅ 2 resolved	Oct 2, 2024 1:06pm

wallet/how-to/use-non-evm-networks/starknet/index.md

Montoya · 2024-09-06T19:09:24Z

Some notes on connect vs install:

We are moving away from using the term "install" with Snaps. We prefer "add" such as "add to MetaMask."
For the dapp, the primary action to initiate interacting with Starknet accounts is to connect to the Snap, just like a dapp connects with MetaMask to interact with Ethereum accounts. Whether the user has the Starknet Snap installed already is not important. If the user needs to install the Snap, they will be prompted to do so.
- Despite this, we do need to explain that the user can reject the prompt to add the Snap to MetaMask and document what to expect (the response that the dapp will receive if the user rejects the request) and encourage the dapp to do something in that instance, like display a message to the user that they need to add the Snap to MetaMask in order to proceed.
- Also, in terms of working with Starknet specifically, we may need to explain that a user will need to take some steps to set up a Starknet account before they can actually use it with the dapp, so the dapp should thoughtfully design that onboarding flow. Whether the user needs to add the Snap (and thus they will be completely new to Starknet) or they already have it but their account is not funded or deployed, the dapp should handle those scenarios.

wallet/how-to/use-non-evm-networks/starknet/connect-to-starknet.md

wallet/how-to/use-non-evm-networks/starknet/manage-starknet-networks.md

wallet/how-to/use-non-evm-networks/starknet/send-starknet-transactions.md

khanti42

We still need some changes on api commented with "needs check" because the api changed. I will do a separate review for them.

wallet/reference/non-evm-apis/starknet-snap-api.md

khanti42 · 2024-09-16T13:36:50Z

wallet/reference/non-evm-apis/starknet-snap-api.md

+</TabItem>
+</Tabs>
+
+## `starkNet_estimateAccountDeployFee`


needs check

@khanti42 working on this time

khanti42 · 2024-09-16T13:37:00Z

wallet/reference/non-evm-apis/starknet-snap-api.md

+</TabItem>
+</Tabs>
+
+## `starkNet_estimateFee`


needs check

@khanti42 working on this time

wallet/reference/non-evm-apis/starknet-snap-api.md

khanti42 · 2024-09-16T13:52:04Z

wallet/reference/non-evm-apis/starknet-snap-api.md

+
+### Returns
+
+The list of the stored user accounts.


There are two new optional return parameters in the account: upgradeRequired and deployRequired.

User accounts type is as follow :

export type AccContract = { addressSalt: string; publicKey: string; // in hex address: string; // in hex addressIndex: number; derivationPath: string; deployTxnHash: string; // in hex chainId: string; // in hex upgradeRequired?: boolean; // whether the account requires an upgrade to Cairo 1 deployRequired?: boolean; // whether the account requires to be deployed };

@khanti42 I have questions about this one (raised in chat)

@khanti42 i think we dont need to mention this method, as it is a method to return the deployed + stored accounts for a single network, consider some edge case for Cairo Contract, it is better not have any starkNet_getStoredXXXX method mentioned in the page

cc @joaniefromtheblock

khanti42 · 2024-09-16T13:53:26Z

wallet/reference/non-evm-apis/starknet-snap-api.md

+</TabItem>
+</Tabs>
+
+## `starkNet_signMessage`


needs check

@khanti42 working on this time

khanti42 · 2024-09-16T13:53:46Z

wallet/reference/non-evm-apis/starknet-snap-api.md

+</TabItem>
+</Tabs>
+
+## `starkNet_verifyMessage`


needs check

@khanti42 working on this time

alexandratran

Some suggestions on the intro pages.

wallet/how-to/use-non-evm-networks/index.md

wallet/how-to/use-non-evm-networks/starknet/_category_.json

wallet/how-to/use-non-evm-networks/starknet/index.md

wallet/how-to/use-non-evm-networks/starknet/sign-starknet-data.md

wallet/how-to/use-non-evm-networks/starknet/troubleshoot.md

wallet/how-to/use-non-evm-networks/starknet/send-starknet-transactions.md

wallet/how-to/use-non-evm-networks/starknet/sign-starknet-data.md

…mask-docs into wip-starknet-snap # Conflicts: # wallet/how-to/use-non-evm-networks/starknet/create-a-simple-starknet-dapp.md

alexandratran · 2024-09-26T17:58:58Z

wallet/how-to/use-non-evm-networks/starknet/create-a-simple-starknet-dapp.md

@@ -17,8 +17,41 @@ You'll also display the balance of an ERC-20 token and perform a token transfer.

 ## 1. Set up the project


If we are to repeat the same steps from the Connect to Starknet guide here (which I'm fine with), can we use the same / similar wording throughout the steps for consistency?

alexandratran · 2024-09-26T17:59:48Z

wallet/how-to/use-non-evm-networks/starknet/create-a-simple-starknet-dapp.md

+Alternatively, you can review [Connect to Starknet](connect-to-starknet.md#1-set-up-the-project) to set up
+your React TypeScript project and install the `get-starknet` library.


These steps instruct you to do exactly the same thing as in the Connect to Starknet guide, so I'm not sure this link would be helpful for someone running into errors.

joaniefromtheblock · 2024-09-30T10:45:23Z

khanti42 · 2024-09-18T10:15:57Z

wallet/reference/non-evm-apis/starknet-snap-api.md

+  "unit": "wei",
+  "includeDeploy": true


Suggested change

"unit": "wei",

"includeDeploy": true

"unit": "wei"

khanti42 · 2024-09-18T10:19:59Z

wallet/reference/non-evm-apis/starknet-snap-api.md

+### Returns
+
+The response from Starknet's `feeder_gateway/estimate_fee` API endpoint.


Suggested change

### Returns

The response from Starknet's `feeder_gateway/estimate_fee` API endpoint.

### Returns

An object with the following properties (where values are originally `bigint` but converted to base-10 `string` format using `.toString(10)`):

- **`suggestedMaxFee`**: `string` - The maximum suggested fee for deploying the contract in wei. This value is originally a `bigint` and is converted to a base-10 `string` using `.toString(10)`, which ensures the number is expressed in decimal format.

- **`overallFee`**: `string` - The overall fee for the deployment transaction in wei. This value is originally a `bigint` and is converted to a base-10 `string` using `.toString(10)`, ensuring it is in decimal format.

- **`gasConsumed`**: `string` - The amount of gas consumed during the transaction. If not available, the default value is `'0'`. This value is originally a `bigint` and is converted to a base-10 `string` using `.toString(10)`.

- **`gasPrice`**: `string` - The gas price used for the transaction in wei. If not available, the default value is `'0'`. This value is originally a `bigint` and is converted to a base-10 `string` using `.toString(10)`.

- **`unit`**: `string` - The unit of the fees and gas values, which is `'wei'`.

khanti42 · 2024-09-18T10:29:04Z

wallet/reference/non-evm-apis/starknet-snap-api.md

+### Parameters
+
+- `contractAddress`: `string` - Address of the target contract.
+- `contractFuncName`: `string` - Target function name of the contract.
+- `contractCallData`: `string` - (Optional) Call data for the target function with `,` as a separator.
+- `senderAddress`: `string` - Address of the sender.
+- `chainId`: `string` - (Optional) ID of the target Starknet network.
+  The default is the Starknet Goerli testnet.
+
+### Returns
+
+The response from Starknet's `feeder_gateway/estimate_fee` API endpoint.


Suggested change

### Parameters

- `contractAddress`: `string` - Address of the target contract.

- `contractFuncName`: `string` - Target function name of the contract.

- `contractCallData`: `string` - (Optional) Call data for the target function with `,` as a separator.

- `senderAddress`: `string` - Address of the sender.

- `chainId`: `string` - (Optional) ID of the target Starknet network.

The default is the Starknet Goerli testnet.

### Returns

The response from Starknet's `feeder_gateway/estimate_fee` API endpoint.

### Parameters

- `address`: `string` - The account address from which the transaction is being made.

- `invocations`: `array` - The invocations to estimate the fee for. Each invocation represents a contract call. Reference: [Invocations](https://starknetjs.com/docs/API/namespaces/types#invocations).

- `chainId`: `string` - The chain ID of the target Starknet network. If not provided, the default is the Starknet Goerli testnet.

- `details`: `object` - optional - The universal details associated with the invocations, such as nonce and version. Reference: [EstimateFeeDetails](https://starknetjs.com/docs/API/interfaces/types.EstimateFeeDetails).

### Returns

A promise that resolves to an `EstimateFeeResponse` object, which contains the following properties:

- `suggestedMaxFee`: `string` - The maximum suggested fee for the transaction in wei. This value is originally a `bigint` and is converted to a base-10 `string`.

- `overallFee`: `string` - The overall fee for the transaction in wei. This value is originally a `bigint` and is converted to a base-10 `string`.

- `unit`: `string` - The unit of the fees, typically `'wei'`.

- `includeDeploy`: `boolean` - Whether the transaction includes an account deployment step.

khanti42 · 2024-09-18T10:31:22Z

wallet/reference/non-evm-apis/starknet-snap-api.md

+await window.ethereum.request({
+  method: "wallet_invokeSnap",
+  params: {
+    snapId: "npm:@consensys/starknet-snap",
+    request: {
+      method: "starkNet_estimateFee",
+      params: {
+        contractAddress: "0x5B38Da6a701c568545dCfcB03FcB875f56beddC4",
+        contractFuncName: "transfer",
+        contractCallData: "0x456...,0x789...,100",
+        senderAddress: "0xb60e8dd61c5d32be8058bb8eb970870f07233155",
+        chainId: "0x1"
+      },
+    },
+  },
+})


Suggested change

await window.ethereum.request({

method: "wallet_invokeSnap",

params: {

snapId: "npm:@consensys/starknet-snap",

request: {

method: "starkNet_estimateFee",

params: {

contractAddress: "0x5B38Da6a701c568545dCfcB03FcB875f56beddC4",

contractFuncName: "transfer",

contractCallData: "0x456...,0x789...,100",

senderAddress: "0xb60e8dd61c5d32be8058bb8eb970870f07233155",

chainId: "0x1"

},

},

},

})

const invocations: [

{

type: TransactionType.INVOKE,

payload: {

contractAddress:

'0x00b28a089e7fb83debee4607b6334d687918644796b47d9e9e38ea8213833137',

entrypoint: 'functionName',

calldata: ['1', '1'],

},

},

];

await window.ethereum.request({

method: "wallet_invokeSnap",

params: {

snapId: "npm:@consensys/starknet-snap",

request: {

method: "starkNet_estimateFee",

params: {

invocations,

address: "0xb60e8dd61c5d32be8058bb8eb970870f07233155",

chainId: "0x1",

},

},

},

})

khanti42 · 2024-09-18T10:35:20Z

wallet/reference/non-evm-apis/starknet-snap-api.md

+<TabItem value="Request">
+
+```js
+await window.ethereum.request({


Suggested change

await window.ethereum.request({

const typedDataMessage = {

"types": {

"StarkNetDomain": [

{ "name": "name", "type": "felt" },

{ "name": "version", "type": "felt" },

{ "name": "chainId", "type": "felt" }

],

"Person": [

{ "name": "name", "type": "felt" },

{ "name": "wallet", "type": "felt" }

],

"Mail": [

{ "name": "from", "type": "Person" },

{ "name": "to", "type": "Person" },

{ "name": "contents", "type": "felt" }

]

},

"primaryType": "Mail",

"domain": {

"name": "Starknet Mail",

"version": "1",

"chainId": 1

},

"message": {

"from": {

"name": "Cow",

"wallet": "0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826"

},

"to": {

"name": "Bob",

"wallet": "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB"

},

"contents": "Hello, Bob!"

}

}

await window.ethereum.request({

khanti42 · 2024-09-30T12:28:38Z

wallet/reference/non-evm-apis/starknet-snap-api.md

+await window.ethereum.request({
+  method: "wallet_invokeSnap",
+  params: {
+    snapId: "npm:@consensys/starknet-snap",
+    request: {
+      method: "starkNet_sendTransaction",
+      params: {
+        contractAddress: "0x5B38Da6a701c568545dCfcB03FcB875f56beddC4",
+        contractFuncName: "transfer",
+        contractCallData: "0x456...,0x789...,100",
+        senderAddress: "0xb60e8dd61c5d32be8058bb8eb970870f07233155",
+        maxFee: "1000000000000000",
+        "chainId": "0x534e5f5345504f4c4941"
+      },
+    },
+  },
+})


Suggested change

await window.ethereum.request({

method: "wallet_invokeSnap",

params: {

snapId: "npm:@consensys/starknet-snap",

request: {

method: "starkNet_sendTransaction",

params: {

contractAddress: "0x5B38Da6a701c568545dCfcB03FcB875f56beddC4",

contractFuncName: "transfer",

contractCallData: "0x456...,0x789...,100",

senderAddress: "0xb60e8dd61c5d32be8058bb8eb970870f07233155",

maxFee: "1000000000000000",

"chainId": "0x534e5f5345504f4c4941"

},

},

},

})

await window.ethereum.request({

method: "wallet_invokeSnap",

params: {

snapId: "npm:@consensys/starknet-snap",

request: {

method: "starkNet_executeTxn",

params: {

address: "0xb60e8dd61c5d32be8058bb8eb970870f07233155", // Sender's address

calls: [

{

contractAddress: "0x5B38Da6a701c568545dCfcB03FcB875f56beddC4", // Contract address

entrypoint: "transfer", // Function name

calldata: ["0x456...", "0x789...", "100"], // Function call data

}

],

details: {

maxFee: "1000000000000000", // Optional maximum fee

},

chainId: "0x534e5f5345504f4c4941", // Starknet Sepolia testnet (chain ID)

},

},

},

});

khanti42 · 2024-09-30T12:30:38Z

wallet/how-to/use-non-evm-networks/starknet/index.md

+- Manages wallet connections and Starknet interactions.
+- Provides results in more readable code.
+
+The [`wallet_invokeSnap`](/snaps/reference/wallet-api-for-snaps/#wallet_invokesnap) method:


We can add a bullet point here that the wallet detection following the eip6963 standard needs to be implemented manually using for example this link : https://metamask.io/news/developers/how-to-implement-eip-6963-support-in-your-web-3-dapp/

Then in all the examples below we assume there is a provider object available which corresponds to the metamask object.

khanti42 · 2024-09-30T12:30:53Z

wallet/how-to/use-non-evm-networks/starknet/index.md

+
+## Connection options
+
+The [`get-starknet`](about-get-starknet) library:


We add a bullet point that eip6963 is handled automatically which is not the case when using invoke_snap directly.

khanti42 · 2024-09-30T12:32:30Z

wallet/how-to/use-non-evm-networks/starknet/troubleshoot.md

+
+### Detect MetaMask
+
+When using `wallet_invokeSnap`, use the following function to detect if MetaMask is installed:


Here we should not describe how to handle eip6963 but instead tell the user that if they have connection issue with multiple wallet, this is most likely because they don't use eip6963 to handle the metamask detection. In that case they should refer to :
https://metamask.io/news/developers/how-to-implement-eip-6963-support-in-your-web-3-dapp/

This means we remove the helper function section.

khanti42 · 2024-09-30T12:34:41Z

wallet/how-to/use-non-evm-networks/starknet/troubleshoot.md

+
+### Verify Snap support
+
+After detecting MetaMask, verify if it supports Snaps:


Here we could specify in which circumstances there could be an issue. E.g. here its if the end users is trying to use the dApp with an old version of metamask that potentially does not support snaps. This is a way to test snap support in that case and prompt user to upgrade metamask.

stanleyyconsensys

1st batch of the comment

stanleyyconsensys · 2024-09-30T12:50:14Z

wallet/how-to/use-non-evm-networks/starknet/about-get-starknet.md

+When you integrate `get-starknet` into your dapp, it creates a `WalletAccount` object, which acts as
+the connection between the dapp and MetaMask, and manages Starknet interactions.
+This allows users to send Starknet transactions, sign Starknet messages, and manage Starknet
+accounts within MetaMask, and this functionality can be extended to multiple wallets in the Starknet
+ecosystem.


Suggested change

When you integrate `get-starknet` into your dapp, it creates a `WalletAccount` object, which acts as

the connection between the dapp and MetaMask, and manages Starknet interactions.

This allows users to send Starknet transactions, sign Starknet messages, and manage Starknet

accounts within MetaMask, and this functionality can be extended to multiple wallets in the Starknet

ecosystem.

When you integrate `get-starknet` into your dapp, it creates a [Starknet

Windows Object (SWO)](https://github.com/starknet-io/get-starknet/blob/get-starknet-core%403.3.0/packages/core/src/StarknetWindowObject.ts), which acts as

the connection between the dapp and MetaMask, and manages Starknet interactions.

This allows users to send Starknet transactions, sign Starknet messages, and manage Starknet

accounts within MetaMask, and this functionality can be extended to multiple wallets in the Starknet

ecosystem.

WalletAccount is design for get-starknet v4, which we have not integrated yet

@khanti42 so I should remove all instances and mentions of WalletAccount?

yea, the fact is,
in get-starknet 3.3.0, user will communicate with network via SWO.account
in get-starknet 4.x user can communicate with network via SWO.account or make their own implementation with WalletAccount object

and we will try to do the advice comment on all WalletAccount related comment , including the description , and you can help us to revised to better wording later, wdyt?

stanleyyconsensys · 2024-09-30T12:53:51Z

wallet/how-to/use-non-evm-networks/starknet/about-get-starknet.md

+1. The dapp uses `get-starknet` to request the user connect to MetaMask.
+   MetaMask automatically requests the user to add the Starknet Snap, if it's not already present.
+
+1. After the dapp is connected to MetaMask and the Starknet Snap, `get-starknet` receives a Starknet


Suggested change

1. After the dapp is connected to MetaMask and the Starknet Snap, `get-starknet` receives a Starknet

2. After the dapp is connected to MetaMask and the Starknet Snap, `get-starknet` receives a Starknet

@stanleyyconsensys Sorry that's not a typo. The markdown will increment. If you check the Vercel build it will show sequential numbering. I just chose to do it like that in case we add or remove another step - that way we will not have to renumber everything ;)

stanleyyconsensys · 2024-09-30T12:58:31Z

wallet/how-to/use-non-evm-networks/starknet/about-get-starknet.md

+1. After the dapp is connected to MetaMask and the Starknet Snap, `get-starknet` receives a Starknet
+   Windows Object (SWO), which represents the MetaMask wallet with Starknet functionality.
+
+1. `get-starknet` creates a [`WalletAccount`](http://starknetjs.com/docs/guides/walletAccount/) instance.


Suggested change

1. `get-starknet` creates a [`WalletAccount`](http://starknetjs.com/docs/guides/walletAccount/) instance.

3. With the Starknet Windows Object (SWO), an [Account Object] (https://starknetjs.com/docs/API/#account) can be retrieved - e.g `swo.account` and provide the functionality to manage Starknet interactions

WalletAccount is design for get-starknet v4, which we have not integrated yet
for current implementation, it works as above way

stanleyyconsensys · 2024-09-30T13:24:44Z

wallet/how-to/use-non-evm-networks/starknet/about-get-starknet.md

+sequenceDiagram
+    participant dapp as Dapp
+    participant get as get-starknet
+    participant mm as MetaMask
+    participant Snap as Starknet Snap
+    participant network as Starknet network
+
+    dapp->>get: Initialize connection
+    get->>mm: Request connection
+    mm->>Snap: Activate
+    Snap-->>mm: Activated
+    mm-->>get: Return SWO
+    get->>network: Create WalletAccount


Suggested change

sequenceDiagram

participant dapp as Dapp

participant get as get-starknet

participant mm as MetaMask

participant Snap as Starknet Snap

participant network as Starknet network

dapp->>get: Initialize connection

get->>mm: Request connection

mm->>Snap: Activate

Snap-->>mm: Activated

mm-->>get: Return SWO

get->>network: Create WalletAccount

sequenceDiagram

participant user as End User

participant dapp as Dapp

participant get as get-starknet

participant mm as MetaMask

participant Snap as Starknet Snap

participant network as Starknet network

dapp->>get: Initialize connection

get->>mm: Request connection

mm->>Snap: Activate

Snap-->>mm: Activated

get->>Snap: Request Starknet account address

Snap-->>mm: Recover account and return Starknet account address

mm-->>get: Return Starknet account address

get-->>dapp: Connection established with SWO return

dapp->>get: Read blockchain data

get->>network: Query data

network-->>get: Return data

get-->>dapp: Processed data

dapp->>get: Write transaction

get->>mm: Request write transaction

mm->>Snap: write transaction

Snap-->>mm: Request confirmation to write transaction

mm-->>user: Request confirmation

user-->>mm: Confirm transaction

mm-->>Snap: Confirm transaction

alt If the Account has deployed

Snap-->>network: deploying account transaction

end

Snap-->>network: Submit transaction

network-->>Snap: Transaction result

Snap-->>mm: Return Transaction result

mm-->>get: Return Transaction result

get-->>dapp: Return Transaction result

combine with @khanti42 comments, i have make a advice change above

Thank you for updating and providing more guidance on this

wallet/how-to/use-non-evm-networks/starknet/sign-starknet-data.md

wallet/how-to/use-non-evm-networks/starknet/send-starknet-transactions.md

Co-authored-by: khanti42 <florin.dzeladini@consensys.net> Co-authored-by: Stanley Yuen <102275989+stanleyyconsensys@users.noreply.github.com>

stanleyyconsensys

review comment batch 2

stanleyyconsensys · 2024-10-01T07:05:06Z

wallet/how-to/use-non-evm-networks/starknet/manage-starknet-networks.md

+  const checkCurrentNetwork = () => {
+    const starknet = getStarknet();
+    const currentNetwork = starknet.provider.rpcUrl;
+    console.log("Currently connected to:", currentNetwork);
+    return currentNetwork;
+  };


Suggested change

const checkCurrentNetwork = () => {

const starknet = getStarknet();

const currentNetwork = starknet.provider.rpcUrl;

console.log("Currently connected to:", currentNetwork);

return currentNetwork;

};

const checkCurrentNetwork = (wallet) => {

try {

if(wallet?.isConnected !== true){

throw("Wallet not connected");

}

const currentNetwork = wallet?.chchainId

console.log("Currently connected to:", currentNetwork);

return currentNetwork;

} catch (error) {

console.error("Error of detect current connected network:", error);

}

};

we should return the chainId , rather than rpcUrl, and standardized the example method as other

stanleyyconsensys · 2024-10-01T07:10:37Z

wallet/how-to/use-non-evm-networks/starknet/manage-starknet-networks.md

+  const checkCurrentNetwork = async () => {
+    if (typeof window.ethereum !== "undefined" && window.ethereum.isMetaMask) {
+      try {
+        const response = await window.ethereum.request({
+          method: "wallet_invokeSnap",
+          params: {
+            snapId: "npm:@consensys/starknet-snap",
+            request: {
+              method: "starknet_getChainId"
+            }
+          }
+        });
+
+        let networkName;
+        switch (response) {
+          case "0x534e5f4d41494e":
+            networkName = "Mainnet";
+            break;
+          case "0x534e5f5345504f4c4941":
+            networkName = "Sepolia Testnet";
+            break;
+          default:
+            networkName = "Unknown Network";
+        }
+
+        console.log("Currently connected to:", networkName);
+        return response;  // Returns the chain ID.
+      } catch (error) {
+        console.error("Error getting current Starknet network:", error);
+        throw error;


Suggested change

const checkCurrentNetwork = async () => {

if (typeof window.ethereum !== "undefined" && window.ethereum.isMetaMask) {

try {

const response = await window.ethereum.request({

method: "wallet_invokeSnap",

params: {

snapId: "npm:@consensys/starknet-snap",

request: {

method: "starknet_getChainId"

}

}

});

let networkName;

switch (response) {

case "0x534e5f4d41494e":

networkName = "Mainnet";

break;

case "0x534e5f5345504f4c4941":

networkName = "Sepolia Testnet";

break;

default:

networkName = "Unknown Network";

}

console.log("Currently connected to:", networkName);

return response; // Returns the chain ID.

} catch (error) {

console.error("Error getting current Starknet network:", error);

throw error;

const checkCurrentNetwork = async () => {

const provider = await getEip6963Provider()

if (provider) {

try {

const response = await provider.request({

method: "wallet_invokeSnap",

params: {

snapId: "npm:@consensys/starknet-snap",

request: {

method: "starkNet_getCurrentNetwork"

}

}

});

console.log("Currently connected to:", response.name);

return response.chainId; // Returns the chain ID.

} catch (error) {

console.error("Error getting current Starknet network:", error);

throw error;

we should always guide user to use eip6963 to get the provider, instead of using window.ethereum
hence i create a mock implementation const provider = await getEip6963Provider()

stanleyyconsensys · 2024-10-01T07:13:59Z

wallet/how-to/use-non-evm-networks/starknet/manage-starknet-networks.md

+  const switchChain = async (chainId: string) => {
+    try {
+      await wallet?.request({
+        type: "wallet_switchStarknetChain",
+        params: { chainId: chainId },
+      });
+        console.log(`Switched to chainId: ${chainId}`);
+    } catch (e) {
+      console.error("Failed to switch chain:", e);
+    }
+  };


Suggested change

const switchChain = async (chainId: string) => {

try {

await wallet?.request({

type: "wallet_switchStarknetChain",

params: { chainId: chainId },

});

console.log(`Switched to chainId: ${chainId}`);

} catch (e) {

console.error("Failed to switch chain:", e);

}

};

const switchChain = async (wallet, chainId) => {

try {

if(wallet?.isConnected !== true){

throw("Wallet not connected");

}

await wallet?.request({

type: "wallet_switchStarknetChain",

params: { chainId: chainId },

});

console.log(`Switched to chainId: ${chainId}`);

} catch (e) {

console.error("Failed to switch chain:", e);

}

};

standardised with other example with an wallet object and check if it has connected before execute (yes, switch network require connected as well)

stanleyyconsensys · 2024-10-01T07:15:49Z

wallet/how-to/use-non-evm-networks/starknet/manage-starknet-networks.md

+  const switchStarknetNetwork = async (chainId) => {
+    if (typeof window.ethereum !== "undefined" && window.ethereum.isMetaMask) {
+      try {
+        await window.ethereum.request({
+          method: "wallet_invokeSnap",
+          params: {
+            snapId: "npm:@consensys/starknet-snap",
+            request: {
+              method: "wallet_switchStarknetChain",
+              params: { chainId: chainId }
+            }
+          }
+        });
+        console.log(`Switched to Starknet network with chainId: ${chainId}`);
+      } catch (error) {
+        console.error("Error switching Starknet network:", error);
+        throw error;
+      }
+    } else {
+      console.error("MetaMask not detected or Snaps not supported");
+      throw new Error("MetaMask not detected or Snaps not supported");
+    }
+  };


Suggested change

const switchStarknetNetwork = async (chainId) => {

if (typeof window.ethereum !== "undefined" && window.ethereum.isMetaMask) {

try {

await window.ethereum.request({

method: "wallet_invokeSnap",

params: {

snapId: "npm:@consensys/starknet-snap",

request: {

method: "wallet_switchStarknetChain",

params: { chainId: chainId }

}

}

});

console.log(`Switched to Starknet network with chainId: ${chainId}`);

} catch (error) {

console.error("Error switching Starknet network:", error);

throw error;

}

} else {

console.error("MetaMask not detected or Snaps not supported");

throw new Error("MetaMask not detected or Snaps not supported");

}

};

const switchStarknetNetwork = async (chainId) => {

const provider = await getEip6963Provider()

if (provider) {

try {

await provider.request({

method: "wallet_invokeSnap",

params: {

snapId: "npm:@consensys/starknet-snap",

request: {

method: "starkNet_switchNetwork",

params: { chainId: chainId }

}

}

});

console.log(`Switched to Starknet network with chainId: ${chainId}`);

} catch (error) {

console.error("Error switching Starknet network:", error);

throw error;

}

} else {

console.error("MetaMask not detected or Snaps not supported");

throw new Error("MetaMask not detected or Snaps not supported");

}

};

stanleyyconsensys · 2024-10-01T07:16:39Z

wallet/how-to/use-non-evm-networks/starknet/send-starknet-transactions.md

+    if (typeof window.ethereum === "undefined" || !window.ethereum.isMetaMask) {
+      throw new Error("MetaMask not detected or Snaps not supported");
+    }
+
+    try {
+      const response = await window.ethereum.request({


Suggested change

if (typeof window.ethereum === "undefined" || !window.ethereum.isMetaMask) {

throw new Error("MetaMask not detected or Snaps not supported");

}

try {

const response = await window.ethereum.request({

const provider = await getEip6963Provider();

if (!provider) {

throw new Error("MetaMask not detected or Snaps not supported");

}

try {

const response = await provider.request({

add eip6963 handle

stanleyyconsensys · 2024-10-01T07:19:44Z

wallet/how-to/use-non-evm-networks/starknet/send-starknet-transactions.md

+  <TabItem value="wallet_invokeSnap">
+
+  ```javascript
+  const connectStarknetAccount = async () => {


Suggested change

const connectStarknetAccount = async () => {

const connectStarknetAccount = async (provider) => {

stanleyyconsensys · 2024-10-01T07:21:43Z

wallet/how-to/use-non-evm-networks/starknet/sign-starknet-data.md

+      if (typeof window.ethereum === "undefined" || !window.ethereum.isMetaMask) {
+        throw new Error("MetaMask not detected or Snaps not supported");
+      }
+
+      // Connect to the Starknet Snap if it's not already connected.
+      await window.ethereum.request({


Suggested change

if (typeof window.ethereum === "undefined" || !window.ethereum.isMetaMask) {

throw new Error("MetaMask not detected or Snaps not supported");

}

// Connect to the Starknet Snap if it's not already connected.

await window.ethereum.request({

const provider = await getEip6963Provider();

if (!provider) {

throw new Error("MetaMask not detected or Snaps not supported");

}

// Connect to the Starknet Snap if it's not already connected.

await provider.request({

stanleyyconsensys · 2024-10-01T07:21:50Z

wallet/how-to/use-non-evm-networks/starknet/sign-starknet-data.md

+      console.log("Starknet Snap connected");
+
+      // Use the wallet_invokeSnap method to sign the transaction.
+      const response = await window.ethereum.request({


Suggested change

const response = await window.ethereum.request({

const response = await provider.request({

stanleyyconsensys · 2024-10-01T07:33:24Z

wallet/how-to/use-non-evm-networks/starknet/about-get-starknet.md

+The `get-starknet` library offers several features that improve how dapps interact with the Starknet
+network through MetaMask:
+
+- The `WalletAccount` uses a specified provider to access data from the Starknet network.
+- For transactions, `get-starknet` prepares the data and sends it to MetaMask for signing through
+  the Starknet Snap.
+- `get-starknet` enables the dapp to create contract instances connected to the `WalletAccount`,
+  allowing smart contract functions to be invoked, with MetaMask handling the signatures.
+- `get-starknet` sets up listeners for account and network changes in MetaMask, so the dapp can
+  subscribe and update its state accordingly.
+- `get-starknet` can request network changes through MetaMask, allowing users to switch between
+  Starknet networks, such as Mainnet and Sepolia testnet.
+- `get-starknet` can also request MetaMask to display specific tokens, improving the user experience.


Suggested change

The `get-starknet` library offers several features that improve how dapps interact with the Starknet

network through MetaMask:

- The `WalletAccount` uses a specified provider to access data from the Starknet network.

- For transactions, `get-starknet` prepares the data and sends it to MetaMask for signing through

the Starknet Snap.

- `get-starknet` enables the dapp to create contract instances connected to the `WalletAccount`,

allowing smart contract functions to be invoked, with MetaMask handling the signatures.

- `get-starknet` sets up listeners for account and network changes in MetaMask, so the dapp can

subscribe and update its state accordingly.

- `get-starknet` can request network changes through MetaMask, allowing users to switch between

Starknet networks, such as Mainnet and Sepolia testnet.

- `get-starknet` can also request MetaMask to display specific tokens, improving the user experience.

The `get-starknet` library offers several features that improve how dapps interact with the Starknet

network through MetaMask:

- `get-starknet` enable [EIP-6963](https://metamask.io/news/developers/how-to-implement-eip-6963-support-in-your-web-3-dapp/) by default, hence to support multi-wallet discovery in the dapp.

- The `Account Object` in `Starknet Window Object (SWO))` provide the functionality as [Starknet.js Account Object](https://starknetjs.com/docs/API/#account) to manage Starknet interactions, it bridges the request from the dapp to MetaMask and the Starknet Snap automately.

- `get-starknet` can request network changes through MetaMask, allowing users to switch between

Starknet networks, such as Mainnet and Sepolia testnet.

- `get-starknet` can also request MetaMask to display specific tokens, improving the user experience.

not sure if the last open point is valid or not (get-starknet can also request MetaMask to display specific tokens...),
if it means fetch token balance , then it is ,
if it means display token in MM wallet, then it is not

stanleyyconsensys · 2024-10-01T07:43:47Z

wallet/reference/non-evm-apis/starknet-snap-api.md

+When connected to the [Starknet Snap](../../how-to/use-non-evm-networks/starknet/index.md), dapps
+can use the Starknet Snap API to interact with users' Starknet accounts (for example, to send transactions).
+
+Currently, the [`get-starknet`](https://github.com/starknet-io/get-starknet) library only supports the


do we really need to specific what SNAP api does get-starknet implemented

as the starknet community (builders) usually following the general standard on client side , which is get-starknet / starknet.js, they have no idea what Starknet Snap API is

i think we can change the angle, instead of telling ppl what SNAP API that we supported in get-starknet, we can tell ppl MetaMask Starknet Snap is almost fully support the functionality of get-starknet v3.3.0 (except on/off event listener)

cc @khanti42

We want to be transparent about the two options that are available to dapp developers. So while we should recommend using get-starknet / starknet.js, we should still explain the alternative (wallet_invokeSnap & related methods).

@Montoya what i try to metion is using an API to represent a starknet network operation/function seem not that related

e.g get-starknet does not integrate starkNet_estimateFee, but it doesnt mean it cant do it, it is still possible to estimate the fee

so me and @khanti42 come up a conclusion that we use operation/method as the angle/entry, and each entity (get-starknet, snap), we attach the way to how to perform such action

Ah great, that makes sense

stanleyyconsensys

Add a new diagram to describe the architecture between Snap, Network, and get-starknet

stanleyyconsensys · 2024-10-01T08:35:57Z

wallet/how-to/use-non-evm-networks/starknet/manage-starknet-accounts.md

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


Suggested change

const showAccountInfo = async () => {

const account = await connectStarknetAccount();

if (account) {

document.getElementById("accountAddress").innerText = `Account Address: ${account}`;

}

};

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}`;

}

};

stanleyyconsensys · 2024-10-02T13:57:59Z

wallet/how-to/use-non-evm-networks/starknet/about-get-starknet.md

+network interactions.
+It works with the [Starknet Snap](https://snaps.metamask.io/snap/npm/consensys/starknet-snap/) to
+enable dapps to interact with users' Starknet accounts in MetaMask.
+


@joaniefromtheblock
attached the diagram for the Architecture
feel free to move it to anywhere you prefer or even change the content

Suggested change

```mermaid

graph

dapp[Dapp] -- wallet_invokeSnapp --> snap[Starknet Snap]

dapp[Dapp] -- get-starknet --> swo[Starknet Window Object]

swo -- wallet_invokeSnap --> snap

swo --> acc[Account Object]

acc --> signer[Signer Object] -- wallet_invokeSnap --> snap

acc -- wallet_invokeSnap --> snap

acc --> sp[Starknet Network]

snap --> sp

rough skeleton

e6bd15c

joaniefromtheblock requested review from a team as code owners August 28, 2024 17:24

alexandratran marked this pull request as draft August 28, 2024 19:42

update menu sidebar

f8c3685

vercel bot had a problem deploying to Preview August 28, 2024 20:15 Failure

joaniefromtheblock mentioned this pull request Aug 30, 2024

Starknet Snaps Doc Addition #1511

Open

5 tasks

Add Starknet Snap API reference docs

1130adf

vercel bot deployed to Preview August 31, 2024 05:51 View deployment

joaniefromtheblock mentioned this pull request Sep 5, 2024

Develop outline for MVP docs addition #1512

Closed

Merge branch 'main' into wip-starknet-snap

9401571

alexandratran changed the title ~~WIP: Starknet Snap Rough Skeleton~~ WIP: Starknet Snap docs Sep 5, 2024

Clean up files and placeholders

a43f196

vercel bot deployed to Preview September 5, 2024 20:00 View deployment

Montoya reviewed Sep 6, 2024

View reviewed changes

wallet/how-to/use-non-evm-networks/starknet/index.md Outdated Show resolved Hide resolved

joaniefromtheblock added 3 commits September 12, 2024 18:16

add changes for connect

c27a96d

update branch

6bac10a

examples added

473a71d

vercel bot deployed to Preview September 12, 2024 20:51 View deployment

joaniefromtheblock added 2 commits September 14, 2024 00:05

rewrite of connect section

25821bb

rough additions of troubleshoot section

0251bcc

vercel bot deployed to Preview September 14, 2024 00:22 View deployment

khanti42 suggested changes Sep 16, 2024

View reviewed changes

khanti42 mentioned this pull request Sep 16, 2024

Add Starknet API docs #1516

Open

alexandratran reviewed Sep 16, 2024

View reviewed changes

joaniefromtheblock commented Sep 17, 2024

View reviewed changes

wallet/how-to/use-non-evm-networks/starknet/sign-starknet-data.md Outdated Show resolved Hide resolved

khanti42 suggested changes Sep 18, 2024

View reviewed changes

update troubleshoot sections

151e759

vercel bot deployed to Preview September 25, 2024 22:09 View deployment

update text for tutorial

a1fe114

vercel bot deployed to Preview September 25, 2024 23:14 View deployment

add dual examples

ff7df58

vercel bot deployed to Preview September 26, 2024 04:11 View deployment

copy edits

faba7f4

vercel bot deployed to Preview September 26, 2024 04:21 View deployment

copy edits

1617eab

vercel bot deployed to Preview September 26, 2024 04:52 View deployment

copy edits

4a64f9b

vercel bot deployed to Preview September 26, 2024 05:47 View deployment

alexandratran added 2 commits September 25, 2024 23:19

Edit content for style and formatting

07ad89e

Merge and edit branch 'wip-starknet-snap' of github.com:MetaMask/meta…

0cadd60

…mask-docs into wip-starknet-snap # Conflicts: # wallet/how-to/use-non-evm-networks/starknet/create-a-simple-starknet-dapp.md

vercel bot deployed to Preview September 26, 2024 06:26 View deployment

add template text

d432e98

vercel bot deployed to Preview September 26, 2024 17:50 View deployment

alexandratran reviewed Sep 26, 2024

View reviewed changes

add note

99839e7

vercel bot deployed to Preview September 26, 2024 18:03 View deployment

Merge branch 'main' into wip-starknet-snap

f92fdc3

vercel bot deployed to Preview September 30, 2024 10:41 View deployment

khanti42 reviewed Sep 30, 2024

View reviewed changes

stanleyyconsensys suggested changes Sep 30, 2024

View reviewed changes

Apply suggestions from code review

cc4cb52

Co-authored-by: khanti42 <florin.dzeladini@consensys.net> Co-authored-by: Stanley Yuen <102275989+stanleyyconsensys@users.noreply.github.com>

vercel bot deployed to Preview September 30, 2024 17:29 View deployment

stanleyyconsensys suggested changes Oct 1, 2024

View reviewed changes

stanleyyconsensys suggested changes Oct 2, 2024

View reviewed changes

		@@ -17,8 +17,41 @@ You'll also display the balance of an ERC-20 token and perform a token transfer.

		## 1. Set up the project

		Alternatively, you can review [Connect to Starknet](connect-to-starknet.md#1-set-up-the-project) to set up
		your React TypeScript project and install the `get-starknet` library.

		### Returns

		The response from Starknet's `feeder_gateway/estimate_fee` API endpoint.

-### Returns
-The response from Starknet's `feeder_gateway/estimate_fee` API endpoint.
+### Returns
+An object with the following properties (where values are originally `bigint` but converted to base-10 `string` format using `.toString(10)`):
+- **`suggestedMaxFee`**: `string` - The maximum suggested fee for deploying the contract in wei. This value is originally a `bigint` and is converted to a base-10 `string` using `.toString(10)`, which ensures the number is expressed in decimal format.
+- **`overallFee`**: `string` - The overall fee for the deployment transaction in wei. This value is originally a `bigint` and is converted to a base-10 `string` using `.toString(10)`, ensuring it is in decimal format.
+- **`gasConsumed`**: `string` - The amount of gas consumed during the transaction. If not available, the default value is `'0'`. This value is originally a `bigint` and is converted to a base-10 `string` using `.toString(10)`.
+- **`gasPrice`**: `string` - The gas price used for the transaction in wei. If not available, the default value is `'0'`. This value is originally a `bigint` and is converted to a base-10 `string` using `.toString(10)`.
+- **`unit`**: `string` - The unit of the fees and gas values, which is `'wei'`.

-await window.ethereum.request({
+const typedDataMessage = {
+  "types": {
+    "StarkNetDomain": [
+      { "name": "name", "type": "felt" },
+      { "name": "version", "type": "felt" },
+      { "name": "chainId", "type": "felt" }
+    ],
+    "Person": [
+      { "name": "name", "type": "felt" },
+      { "name": "wallet", "type": "felt" }
+    ],
+    "Mail": [
+      { "name": "from", "type": "Person" },
+      { "name": "to", "type": "Person" },
+      { "name": "contents", "type": "felt" }
+    ]
+  },
+  "primaryType": "Mail",
+  "domain": {
+    "name": "Starknet Mail",
+    "version": "1",
+    "chainId": 1
+  },
+  "message": {
+    "from": {
+      "name": "Cow",
+      "wallet": "0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826"
+    },
+    "to": {
+      "name": "Bob",
+      "wallet": "0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB"
+    },
+    "contents": "Hello, Bob!"
+  }
+}
+await window.ethereum.request({


		## Connection options

		The [`get-starknet`](about-get-starknet) library:


		### Detect MetaMask

		When using `wallet_invokeSnap`, use the following function to detect if MetaMask is installed:


		### Verify Snap support

		After detecting MetaMask, verify if it supports Snaps:

	1. After the dapp is connected to MetaMask and the Starknet Snap, `get-starknet` receives a Starknet
	2. After the dapp is connected to MetaMask and the Starknet Snap, `get-starknet` receives a Starknet

	1. `get-starknet` creates a [`WalletAccount`](http://starknetjs.com/docs/guides/walletAccount/) instance.
	3. With the Starknet Windows Object (SWO), an [Account Object] (https://starknetjs.com/docs/API/#account) can be retrieved - e.g `swo.account` and provide the functionality to manage Starknet interactions

	const connectStarknetAccount = async () => {
	const connectStarknetAccount = async (provider) => {

	const response = await window.ethereum.request({
	const response = await provider.request({

+```mermaid
+graph
+    dapp[Dapp] -- wallet_invokeSnapp --> snap[Starknet Snap]
+    dapp[Dapp] -- get-starknet --> swo[Starknet Window Object]
+    swo -- wallet_invokeSnap --> snap
+    swo --> acc[Account Object]
+    acc --> signer[Signer Object] -- wallet_invokeSnap --> snap
+    acc -- wallet_invokeSnap --> snap
+    acc --> sp[Starknet Network]
+    snap --> sp

WIP: Starknet Snap docs #1509

Are you sure you want to change the base?

WIP: Starknet Snap docs #1509

Conversation

joaniefromtheblock commented Aug 28, 2024 • edited Loading

Description

Issue(s) fixed

Preview

Checklist

vercel bot commented Aug 28, 2024 • edited Loading

Montoya commented Sep 6, 2024

khanti42 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joaniefromtheblock Sep 17, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexandratran left a comment

Choose a reason for hiding this comment

alexandratran Sep 26, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joaniefromtheblock commented Sep 30, 2024 • edited Loading

Still to do

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stanleyyconsensys left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joaniefromtheblock Sep 30, 2024 • edited Loading

Choose a reason for hiding this comment

stanleyyconsensys Oct 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joaniefromtheblock Sep 30, 2024 • edited Loading

Choose a reason for hiding this comment

stanleyyconsensys left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stanleyyconsensys Oct 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stanleyyconsensys Oct 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stanleyyconsensys left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stanleyyconsensys Oct 2, 2024 • edited Loading

Choose a reason for hiding this comment

joaniefromtheblock commented Aug 28, 2024 •

edited

Loading

vercel bot commented Aug 28, 2024 •

edited

Loading

joaniefromtheblock Sep 17, 2024 •

edited

Loading

alexandratran Sep 26, 2024 •

edited

Loading

joaniefromtheblock commented Sep 30, 2024 •

edited

Loading

joaniefromtheblock Sep 30, 2024 •

edited

Loading

stanleyyconsensys Oct 1, 2024 •

edited

Loading

joaniefromtheblock Sep 30, 2024 •

edited

Loading

stanleyyconsensys Oct 1, 2024 •

edited

Loading

stanleyyconsensys Oct 2, 2024 •

edited

Loading

stanleyyconsensys Oct 2, 2024 •

edited

Loading