Skip to content

Commit 455aaec

Browse files
joaniekubejoaniekube
committed
updates
1 parent f2074ef commit 455aaec

File tree

8 files changed

+126
-92
lines changed

8 files changed

+126
-92
lines changed

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

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
description: How does `get-starknet` interact with MetaMask.
3+
sidebar_position: 2
4+
---
5+
6+
# About `get-starknet`
7+
8+
`get-starknet` is a library that simplifies Starknet network interactions.
9+
It works with the Starknet Snap to extend the functionality of MetaMask and enable dapps to interact with users' Starknet accounts in MetaMask.
10+
11+
When you integrate `get-starknet` into your dapp, it creates a `WalletAccount` object. `WalletAccount` acts as a connection between dapps and MetaMask and provides a way to manage Starknet interactions.
12+
13+
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.
14+
15+
## How `get-starknet` and MetaMask interact
16+
17+
A dapp with `get-starknet` installed interacts with MetaMask as follows:
18+
19+
1. The dapp uses `get-starknet` to request the user connect to MetaMask. If the user doesn't have the Starknet Snap installed, MetaMask automatically prompts the user to connect and approve the addition.
20+
21+
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.
22+
23+
1. `get-starknet` creates a [`WalletAccount`](http://starknetjs.com/docs/guides/walletAccount/) instance. This instance manages the Starknet account within MetaMask.
24+
25+
```mermaid
26+
sequenceDiagram
27+
participant dapp as dapp
28+
participant get as get-starknet
29+
participant mm as MetaMask
30+
participant Snap as Starknet Snap
31+
participant network as Starknet network
32+
33+
dapp->>get: Initialize connection
34+
get->>mm: Request connection
35+
mm->>Snap: Activate
36+
Snap-->>mm: Activated
37+
mm-->>get: Return SWO
38+
get->>get: Create WalletAccount
39+
get-->>dapp: Connection established
40+
41+
dapp->>get: Read blockchain data
42+
get->>network: Query data
43+
network-->>get: Return data
44+
get-->>dapp: Processed data
45+
46+
dapp->>get: Write transaction
47+
get->>mm: Request signature
48+
mm->>Snap: Sign transaction
49+
Snap-->>mm: Signed transaction
50+
mm-->>get: Return signature
51+
get->>network: Submit transaction
52+
network-->>get: Transaction result
53+
get-->>dapp: Transaction confirmation
54+
55+
mm->>get: Account/Network changed
56+
get->>dapp: Notify change
57+
```
58+
59+
The `get-starknet` library offers several key features that improve how dapps interact with the Starknet network through MetaMask:
60+
61+
- The `WalletAccount` uses a specified provider to access data from the Starknet network.
62+
- For transactions, `get-starknet` prepares the data and sends it to MetaMask for signing through the Starknet Snap.
63+
- `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.
64+
- `get-starknet` sets up listeners for account and network changes in MetaMask, so the dapp can subscribe and update its state accordingly.
65+
- `get-starknet` can request network changes through MetaMask, allowing users to switch between Starknet networks, such as Mainnet or Sepolia testnet.
66+
- `get-starknet` can also request MetaMask to display specific tokens, improving the user experience.

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

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import TabItem from "@theme/TabItem";
88

99
# Connect your Starknet account to MetaMask
1010

11-
To connect your dapp to the Starknet network in MetaMask, you can use the `get-starknet` library.
11+
To connect your dapp to the Starknet network in MetaMask, you can use the [`get-starknet`](https://github.com/starknet-io/get-starknet) library.
1212
This library simplifies the process of connecting to the Starknet Snap, allowing you to interact with users' Starknet accounts in MetaMask.
1313
`get-starknet` also enables dapps to interact with other wallets in the Starknet ecosystem.
1414

@@ -53,6 +53,7 @@ Add the [`get-starknet`](https://github.com/starknet-io/get-starknet) `version 3
5353
### 2. Connect to the Snap
5454

5555
Create a `src/components` directory, and add a new file named `WalletConnectButton.js` to the directory. Add the following code to the file:
56+
5657
```javascript title="WalletConnectButton.js"
5758
import React, { useState } from "react";
5859
import { connect, disconnect } from "get-starknet";
@@ -77,7 +78,7 @@ function WalletConnectButton() {
7778
setWalletName(getWallet?.name || "")
7879
}
7980
catch(e){
80-
// handle user rejection to install metamask / snaps here.
81+
// Handle user rejection to install MetaMask / Snaps.
8182
console.log(e)
8283
}
8384
};
@@ -143,7 +144,7 @@ Alternatively, you can manage the Snap invocation manually. Use the `wallet_invo
143144
144145
:::note
145146
146-
To connect to Starknet, the dapp user must ensure the [Starknet Snap](https://snaps.metamask.io/snap/npm/consensys/starknet-snap/) is added to MetaMask.
147+
To connect to Starknet, the dapp user must ensure the [Starknet Snap](https://snaps.metamask.io/snap/npm/consensys/starknet-snap/) is added to MetaMask.
147148
148149
:::
149150
@@ -190,11 +191,11 @@ Use the `callSnap` function to call a specific Snap method.
190191
The following example calls `starkNet_createAccount`:
191192
192193
```javascript
193-
const deploy = false; // Set to true to deploy the actual account
194-
const addressIndex = 0; // Specify which address to derive
195-
const chainId = "0x534e5f5345504f4c4941"; // Specify which chain to use (in this instance the Sepolia testnet)
194+
const deploy = false; // Set to true to deploy the actual account.
195+
const addressIndex = 0; // Specify which address to derive.
196+
const chainId = "0x534e5f5345504f4c4941"; // Chain ID of the network to use.
196197

197-
const accountInfo = await callSnap('starkNet_createAccount', { addressIndex, deploy, chainId });
198+
const accountInfo = await callSnap("starkNet_createAccount", { addressIndex, deploy, chainId });
198199
```
199200
200201
#### Example in HTML and Vanilla JS
@@ -214,7 +215,7 @@ The following is a full example of a dapp with a button that, when clicked, conn
214215
<script>
215216
async function connect(snapId) {
216217
await ethereum.request({
217-
method: 'wallet_requestSnaps',
218+
method: "wallet_requestSnaps",
218219
params: {
219220
[snapId]: {},
220221
},
@@ -223,7 +224,7 @@ The following is a full example of a dapp with a button that, when clicked, conn
223224
async function callSnap(snapId, method, params) {
224225
try {
225226
const response = await ethereum.request({
226-
method: 'wallet_invokeSnap',
227+
method: "wallet_invokeSnap",
227228
params: {
228229
snapId,
229230
request: {
@@ -238,18 +239,18 @@ The following is a full example of a dapp with a button that, when clicked, conn
238239
alert(`${method} problem happened: ${err.message || err}`);
239240
}
240241
}
241-
document.getElementById('connectButton').addEventListener('click', async () => {
242+
document.getElementById("connectButton").addEventListener("click", async () => {
242243
try {
243-
const snapId = 'npm:@consensys/starknet-snap'; // Snap ID
244+
const snapId = "npm:@consensys/starknet-snap"; // Snap ID
244245
await connect(snapId);
245246
const deploy = false; // Whether to deploy the actual account.
246247
const addressIndex = 0; // The address to derive.
247248
const chainId = "0x534e5f5345504f4c4941"; // Chain ID of the network to use.
248-
const account = await callSnap(snapId, 'starkNet_createAccount', { addressIndex, deploy, chainId });
249+
const account = await callSnap(snapId, "starkNet_createAccount", { addressIndex, deploy, chainId });
249250
console.log(account)
250-
document.getElementById('accountInfo').innerText = `Connected Starknet Account: ${account.address}`;
251+
document.getElementById("accountInfo").innerText = `Connected Starknet Account: ${account.address}`;
251252
} catch (error) {
252-
console.error('Error connecting to Starknet Snap:', error);
253+
console.error("Error connecting to Starknet Snap:", error);
253254
}
254255
});
255256
</script>

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

Lines changed: 27 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -7,91 +7,49 @@ sidebar_position: 1
77

88
Starknet is a non-EVM Layer 2 network. To interact with Starknet accounts in MetaMask, you need to use the Starknet Snap.
99

10-
You can use the `get-starknet` library or the `wallet_invokeSnap` JSON-RPC method to connect to the Starknet Snap.
10+
You can use the [`get-starknet`](https://github.com/starknet-io/get-starknet) library or the `wallet_invokeSnap` JSON-RPC method to connect to the Starknet Snap.
1111

12-
13-
`get-starknet`:
12+
[`get-starknet`](architecture):
1413
- Provides a high-level API that abstracts complex operations.
1514
- Offers standardized error handling.
1615
- Supports multiple wallets, not limited to MetaMask.
1716
- Manages wallet connections and Starknet interactions.
1817
- Results are in more readable code.
1918

20-
`wallet_invokeSnap`:
19+
[`wallet_invokeSnap`](../../../../snaps/reference/wallet-api-for-snaps/#wallet_invokesnap):
2120
- Requires precise method names and parameter structures.
2221
- Handles both MetaMask-specific and Starknet-specific errors.
2322
- Is designed for operating within the MetaMask framework.
2423
- Manages lower-level Starknet interactions directly.
2524
- Provides results in more detailed, lower-level code.
2625

27-
2826
:::note
2927

30-
We recommend using the `get-starknet` library for most use cases.
31-
32-
:::
33-
34-
The choice between the two connection methods depends on the specific needs of the project, the desired level of control, and familiarity with Starknet and Snaps.
35-
36-
37-
## About `get-starknet`
38-
39-
`get-starknet` is a library that simplifies Starknet network interactions.
40-
It works with the Starknet Snap to extend the functionality of MetaMask and enable dapps to interact with users' Starknet accounts in MetaMask.
28+
We recommend using the `get-starknet` library for most use cases due to its ease of configuration.
4129

42-
When you integrate `get-starknet` into your dapp, it creates a `WalletAccount` object. `WalletAccount` acts as a connection between dapps and MetaMask and provides a way to manage Starknet interactions.
30+
There are [limitations](#limitations) on the methods that are avilabile when using `get-starknet`. For more information on the methods you can use when interacting with users' Starknet accounts, see the [Starknet Snap API documentation](../../../reference/non-evm-apis/starknet-snap-api.md).
4331

44-
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.
45-
46-
### How `get-starknet` and MetaMask interact
47-
48-
A dapp with `get-starknet` installed interacts with MetaMask as follows:
49-
50-
1. The dapp uses `get-starknet` to request the user connect to MetaMask. If the user doesn't have the Starknet Snap installed, MetaMask automatically prompts the user to connect and approve the addition.
51-
52-
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.
53-
54-
1. `get-starknet` creates a [`WalletAccount`](http://starknetjs.com/docs/guides/walletAccount/) instance. This instance manages the Starknet account within MetaMask.
55-
56-
```mermaid
57-
sequenceDiagram
58-
participant dapp as dapp
59-
participant get as get-starknet
60-
participant mm as MetaMask
61-
participant Snap as Starknet Snap
62-
participant network as Starknet network
63-
64-
dapp->>get: Initialize connection
65-
get->>mm: Request connection
66-
mm->>Snap: Activate
67-
Snap-->>mm: Activated
68-
mm-->>get: Return SWO
69-
get->>get: Create WalletAccount
70-
get-->>dapp: Connection established
71-
72-
dapp->>get: Read blockchain data
73-
get->>network: Query data
74-
network-->>get: Return data
75-
get-->>dapp: Processed data
76-
77-
dapp->>get: Write transaction
78-
get->>mm: Request signature
79-
mm->>Snap: Sign transaction
80-
Snap-->>mm: Signed transaction
81-
mm-->>get: Return signature
82-
get->>network: Submit transaction
83-
network-->>get: Transaction result
84-
get-->>dapp: Transaction confirmation
85-
86-
mm->>get: Account/Network changed
87-
get->>dapp: Notify change
88-
```
32+
:::
8933

90-
The `get-starknet` library offers several key features that improve how dapps interact with the Starknet network through MetaMask:
9134

92-
- The `WalletAccount` uses a specified provider to access data from the Starknet network.
93-
- For transactions, `get-starknet` prepares the data and sends it to MetaMask for signing through the Starknet Snap.
94-
- `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.
95-
- `get-starknet` sets up listeners for account and network changes in MetaMask, so the dapp can subscribe and update its state accordingly.
96-
- `get-starknet` can request network changes through MetaMask, allowing users to switch between Starknet networks, such as Mainnet or Sepolia testnet.
97-
- `get-starknet` can also request MetaMask to display specific tokens, improving the user experience.
35+
## Limitations
36+
37+
Not all methods are supported by both `get-starknet` and `wallet_invokeSnap`. The following table lists which methods are availabile for the two implemnatations.
38+
39+
| Method | `wallet_invokeSnap` | `get-starknet` |
40+
|--------|:---:|:---:|
41+
| [`starkNet_createAccount`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_createAccount) | ✓ | |
42+
| [`starkNet_displayPrivateKey`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_displayPrivateKey) | ✓ | |
43+
| [`starkNet_estimateAccountDeployFee`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_estimateAccountDeployFee) | ✓ | |
44+
| [`starkNet_estimateFee`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_estimateFee) | ✓ | |
45+
| [`starkNet_extractPublicKey`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_extractPublicKey) | ✓ | ✓ |
46+
| [`starkNet_getErc20TokenBalance`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_getErc20TokenBalance) | ✓ | |
47+
| [`starkNet_getStoredUserAccounts`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_getStoredUserAccounts) | ✓ | |
48+
| [`starkNet_getTransactions`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_getTransactions) | ✓ | |
49+
| [`starkNet_getTransactionStatus`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_getTransactionStatus) | ✓ | |
50+
| [`starkNet_getValue`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_getValue) | ✓ | |
51+
| [`starkNet_recoverAccounts`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_recoverAccounts) | ✓ | |
52+
| [`starkNet_sendTransaction`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_sendTransaction) | ✓ | |
53+
| [`starkNet_signMessage`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_signMessage) | ✓ | ✓ |
54+
| [`starkNet_upgradeAccContract`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_upgradeAccContract) | ✓ | ✓ |
55+
| [`starkNet_verifyMessage`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_verifyMessage) | ✓ | ✓ |

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ This component displays the connected account address if available, and provides
6161
6262
## Account creation
6363
64-
Account creation in Starknet is handled by the wallet provider. As a dapp developer, you do not create accounts directly. Instead, you guide users to create an account with their preferred wallet provider.
64+
Account creation in Starknet is handled by the wallet provider. As a dapp developer, you do not create accounts directly. Instead, you guide users to [create an account](../connect-to-starknet) with their preferred wallet provider.
6565
6666
:::note
6767

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const checkCurrentNetwork = () => {
2626
Starknet currently operates two public networks. Each network is identified by a unique chain ID. Use these chain IDs when configuring your dapp or interacting with the Starknet networks.
2727

2828
You can allow users to switch between different Starknet networks by setting the appropriate chain ID.
29+
2930
Starknet has two official networks:
3031

3132
| Network | Chain ID (Hexadecimal) |

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ sidebar_position: 5
55

66
# Sign Starknet transactions
77

8-
After the account is connected, you can sign a transaction using the `wallet.account.signer.signTransaction` function:
8+
After an account is connected, you can sign a transaction using the `wallet.account.signer.signTransaction` function:
9+
910
```typescript
1011
const signStarknetTransaction = async (wallet, contractAddress, entrypoint, calldata) => {
1112
try {

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
2-
description: Starknet integration tutorial
2+
description: Create a basic dapp using `get-starknet` and React TypeScript
33
sidebar_position: 6
44
---
55

6-
# Create a basic dapp with `get-starknet` and React TypeScript
6+
# Create a basic dapp with `get-starknet`
77

8-
In this tutorial, you'll learn how to set up a basic dapp that uses get-starknet to connect to MetaMask and display the user's wallet address.
8+
In this tutorial, you'll learn how to set up a basic dapp that uses `get-starknet` to connect to MetaMask and display the user's wallet address.
99

1010
## 1. Project Setup
1111

@@ -203,7 +203,7 @@ Now that you have set up the basics, let's go a step further and show how to dis
203203

204204
### 3.1. Setting Up the Contract
205205

206-
To interact with an ERC-20 contract, you'll need to create a Contract instance from starknet.js using the WalletAccount instance. Assuming the ABI is loaded from a JSON file, here's how you would do it:
206+
To interact with an ERC-20 contract, you'll need to create a contract instance from `starknet.js` using the `WalletAccount` instance. Assuming the ABI is loaded from a JSON file, here's how you would do it:
207207

208208
```typescript
209209
import { Contract } from "starknet";

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,20 @@ Starknet currently operates two public networks. Each network is identified by a
2424
| Network | Chain ID (Hexadecimal) |
2525
|---------|------------------------|
2626
| Mainnet | `0x534e5f4d41494e` |
27-
| Sepolia testnet | `0x534e5f5345504f4c4941` |
27+
| Testnet (Sepolia) | `0x534e5f5345504f4c4941` |
2828

29-
Use these constants when specifying the network in your Starknet transactions or when configuring your development environment.
29+
Use these IDs when specifying the network in your Starknet transactions or when configuring your development environment.
30+
31+
Ensure you're using the correct chain ID for your intended network to avoid unintended transactions on the wrong network.
3032

3133
:::note
3234

33-
Always verify you're using the correct chain ID for your intended network to avoid unintended transactions on the wrong network.
35+
Currently, `get-starknet` only works with the following methods:
36+
37+
- [`starkNet_extractPublicKey`](#starknet_extractpublickey)
38+
- [`starkNet_signMessage`](#starknet_signmessage)
39+
- [`starkNet_upgradeAccContract`](#starknet_upgradeacccontract)
40+
- [`starkNet_verifyMessage`](#starknet_verifymessage)
3441

3542
:::
3643

0 commit comments

Comments
 (0)