update text for tutorial

MetaMask · Sep 25, 2024 · a1fe114 · a1fe114
1 parent 151e759
commit a1fe114
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 38 deletions.
diff --git a/wallet/how-to/use-non-evm-networks/starknet/connect-to-starknet.md b/wallet/how-to/use-non-evm-networks/starknet/connect-to-starknet.md
@@ -33,7 +33,7 @@ See [a comparison of the connection options](index.md#connection-options).
 ### 1. Set up the project
 
 If you don't have an existing React project set up, you can create a new one using
-[Create React App](https://create-react-app.dev/):
+[Create React App](https://create-react-app.dev/) or follow the [Create a simple Starknet dapp tutorial](tutorial):
 
 <Tabs>
 <TabItem value="yarn" label="Yarn" default>

diff --git a/wallet/how-to/use-non-evm-networks/starknet/create-a-simple-starknet-dapp.md b/wallet/how-to/use-non-evm-networks/starknet/create-a-simple-starknet-dapp.md
@@ -7,9 +7,16 @@ sidebar_position: 6
 
 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.
 
+## Prerequisites
+
+- [MetaMask installed](https://metamask.io/download/)
+- A text editor (for example, [VS Code](https://code.visualstudio.com/))
+- [Node](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) version 20.11 or later
+- [Yarn](https://yarnpkg.com/)
+
 ## 1. Project Setup
 
-Create a new React project with TypeScript and add the necessary dependencies
+Create a new React project with TypeScript and add the necessary dependencies:
 
 ```bash
 # Create a new React project with TypeScript
@@ -18,18 +25,40 @@ yarn create react-app get-starknet-tutorial --template typescript
 # Change into the project directory
 cd get-starknet-tutorial
 
-# Add get-starknet and the latest starknet.js version
-yarn add get-starknet starknet@next
+# Add get-starknet and starknet.js
+yarn add get-starknet@3.3.0 starknet@6.11.0
 ```
 
-## 2. 
+Your file structure should look similar to the following:
 
-### 2.1. Connecting to a wallet
+```bash
+get-starknet-tutorial/
+│
+├── public/
+│   └── index.html
+│
+├── src/
+│   ├── components/
+│   │   ├── WalletConnect.tsx
+│   │   └── TokenInteractions.tsx
+│   │
+│   ├── App.tsx
+│   ├── index.tsx
+│   └── App.css
+│
+├── package.json
+└── tsconfig.json
+```
 
-The `connect` function from `get-starknet` is the primary way to connect your dapp to a user's wallet. When called, it opens a connection to the MetaMask wallet and returns an object containing important details about the wallet, such as following:
+## 2.Confingure wallet connection
+
+### 2.1. Connect to the MetaMask wallet
+
+The `connect` function from `get-starknet` is the primary way to connect your dapp to a user's wallet. 
+It opens a connection to the MetaMask wallet and returns an object containing important details about the wallet, such as the following:
 
 - `name`: The name of the wallet.
-- `icon`: The wallet's icon, which can be used to display the wallet's logo.
+- `icon`: The wallet's icon, which displays the wallet's logo.
 - `account`: The account object from `starknet.js`, which contains the wallet's address and provides access to account-specific operations.
 
 To import the necessary functions and connect to a wallet, add the following code:
@@ -46,10 +75,16 @@ async function handleConnect(options?: ConnectOptions) {
 
 ### 2.2. Configure connection options
 
-`connect` accepts an optional `ConnectOptions` object. This object can control how the connection process behaves, including:
+`connect` accepts an optional `ConnectOptions` object. 
+This object can control the connection process, including:
+
+- `modalMode`: Determines how the connection modal behaves. The options include:
+  - `"alwaysAsk"`: Prompts the user every time a connection is initiated.
+  - `"neverAsk"`: Attempts to connect without showing the modal.
 
-- `modalMode`: Determines how the connection modal behaves. The options include "always ask" or "never ask".
-- `modalTheme`: Allows setting the theme of the connection modal. The options includes dark or light theme.
+- `modalTheme`: Sets the visual theme of the connection modal. The options are:
+  - `"dark"`: Uses a dark color scheme.
+  - `"light"`: Uses a light color scheme.
 
 The following code is an example of how to set these options:
 
@@ -59,7 +94,8 @@ handleConnect({ modalMode: "alwaysAsk", modalTheme: "dark" });
 
 ### 2.3. Create a `WalletAccount`
 
-After it is connected, you can create a new `WalletAccount` instance using the `starknet.js` library. This allows interaction with the Starknet network using the connected wallet.
+After it is connected, you can create a new `WalletAccount` instance using the `starknet.js` library.
+ This allows interaction with the Starknet network using the connected wallet.
 
 ```typescript
 import { WalletAccount } from 'starknet'; 
@@ -316,6 +352,6 @@ In this section, we've shown how to extend your dapp by displaying the balance o
 
 ## Additional resources
 
-- [Use get-starknet to connect to a wallet and create an account instance](https://starknetjs.com/docs/guides/walletAccount)
+- [Use `get-starknet` to connect to a wallet and create an account instance](https://starknetjs.com/docs/guides/walletAccount)
 - [Use account instance to show ERC20 balance and transfer](https://starknetjs.com/docs/guides/use_ERC20)
 - [get-starknet official GitHub](https://github.com/starknet-io/get-starknet)
diff --git a/wallet/how-to/use-non-evm-networks/starknet/index.md b/wallet/how-to/use-non-evm-networks/starknet/index.md
@@ -52,20 +52,20 @@ The following table lists the supported methods for each connection option:
 
 Here's the fixed table with proper formatting:
 
-| Method | `get-starknet` | `wallet_invokeSnap` |
-|--------|:--------------:|:-------------------:|
-| [`starkNet_createAccount`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_createAccount) | | ✓ |
-| [`starkNet_displayPrivateKey`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_displayPrivateKey) | | ✓ |
-| [`starkNet_estimateAccountDeployFee`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_estimateAccountDeployFee) | | ✓ |
-| [`starkNet_estimateFee`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_estimateFee) | | ✓ |
-| [`starkNet_extractPublicKey`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_extractPublicKey) | ✓ | ✓ |
-| [`starkNet_getErc20TokenBalance`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_getErc20TokenBalance) | | ✓ |
-| [`starkNet_getStoredUserAccounts`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_getStoredUserAccounts) | | ✓ |
-| [`starkNet_getTransactions`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_getTransactions) | | ✓ |
-| [`starkNet_getTransactionStatus`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_getTransactionStatus) | | ✓ |
-| [`starkNet_getValue`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_getValue) | | ✓ |
-| [`starkNet_recoverAccounts`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_recoverAccounts) | | ✓ |
-| [`starkNet_sendTransaction`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_sendTransaction) | | ✓ |
-| [`starkNet_signMessage`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_signMessage) | ✓ | ✓ |
-| [`starkNet_upgradeAccContract`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_upgradeAccContract) | ✓ | ✓ |
-| [`starkNet_verifyMessage`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_verifyMessage) | ✓ | ✓ |
+| Method                                                                                                                        | `get-starknet` | `wallet_invokeSnap` |
+|:-----------------------------------------------------------------------------------------------------------------------------:|:--------------:|:-------------------:|
+| [`starkNet_createAccount`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_createAccount)                       | ❌             | ✅                  |
+| [`starkNet_displayPrivateKey`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_displayPrivateKey)               | ❌             | ✅                  |
+| [`starkNet_estimateAccountDeployFee`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_estimateAccountDeployFee) | ❌             | ✅                  |
+| [`starkNet_estimateFee`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_estimateFee)                           | ❌             | ✅                  |
+| [`starkNet_extractPublicKey`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_extractPublicKey)                 | ✅             | ✅                  |
+| [`starkNet_getErc20TokenBalance`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_getErc20TokenBalance)         | ❌             | ✅                  |
+| [`starkNet_getStoredUserAccounts`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_getStoredUserAccounts)       | ❌             | ✅                  |
+| [`starkNet_getTransactions`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_getTransactions)                   | ❌             | ✅                  |
+| [`starkNet_getTransactionStatus`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_getTransactionStatus)         | ❌             | ✅                  |
+| [`starkNet_getValue`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_getValue)                                 | ❌             | ✅                  |
+| [`starkNet_recoverAccounts`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_recoverAccounts)                   | ❌             | ✅                  |
+| [`starkNet_sendTransaction`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_sendTransaction)                   | ❌             | ✅                  |
+| [`starkNet_signMessage`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_signMessage)                           | ✅             | ✅                  |
+| [`starkNet_upgradeAccContract`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_upgradeAccContract)             | ✅             | ✅                  |
+| [`starkNet_verifyMessage`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_verifyMessage)                       | ✅             | ✅                  |
diff --git a/wallet/how-to/use-non-evm-networks/starknet/troubleshoot.md b/wallet/how-to/use-non-evm-networks/starknet/troubleshoot.md
@@ -1,6 +1,7 @@
 ---
 description: Troubleshoot common Starknet issues.
 sidebar_position: 7
+toc_max_heading_level: 4
 ---
 
 # Troubleshoot
@@ -9,7 +10,7 @@ This guide addresses issues that might occur when configuring the MetaMask conne
 
 ## Connection issues
 
-When using `get-starknet`, the library automatically handles MetaMask detection, connection, and Starknet Snap installation. 
+When using `get-starknet`, the library automatically handles MetaMask detection, connection, and the Starknet Snap addition. 
 If you're using `wallet_invokeSnaps` directly, you might need to manage these processes manually.
 
 ### Detect MetaMask
@@ -25,7 +26,7 @@ async function detectMetamaskSupport(windowObject: Window & typeof globalThis):
 
 This function uses the `waitForMetaMaskProvider` helper function, which attempts to detect the MetaMask provider three times.
 
-In the event MetaMask is not installed, for example `isMetaMaskInstallRequired=true`, you can prompt the user to install MetaMask. 
+In the event MetaMask is not installed, for example `isMetaMaskInstallRequired=true`, you can prompt the user to install MetaMask: 
 
 ```typescript
 function checkAndPromptForMetaMask() {
@@ -38,7 +39,7 @@ function checkAndPromptForMetaMask() {
         const messageElement = document.getElementById('metamask-message') || document.createElement('div');
         messageElement.id = 'metamask-message';
         messageElement.innerHTML = `
-            <p>MetaMask is required to use this application. Please install MetaMask to continue.</p>
+            <p>MetaMask is required to use this dapp. Please install MetaMask to continue.</p>
             <button id="install-metamask">Install MetaMask</button>
         `;
         document.body.appendChild(messageElement);
@@ -48,11 +49,11 @@ function checkAndPromptForMetaMask() {
             window.open('https://metamask.io/download.html', '_blank');
         });
     } else {
-        console.log("MetaMask is installed. Proceeding with application.");
+        console.log("MetaMask is installed. Proceeding with this dapp.");
     }
 }
 
-// Call this function when your application initializes.
+// Call this function when your dapp initializes.
 checkAndPromptForMetaMask();
 ```
 
@@ -135,7 +136,7 @@ function isMetaMaskProvider(obj: unknown): obj is MetaMaskProvider {
 }
 ```
 
-### `detectMetaMaskProvider`
+#### `detectMetaMaskProvider`
 
 The following function detects a MetaMask provider by listening for the `eip6963:announceProvider` event:
 
@@ -147,9 +148,9 @@ function detectMetaMaskProvider(
 }
 ```
 
-### `waitForMetaMaskProvider`
+#### `waitForMetaMaskProvider`
 
-The following function waits for a MetaMask provider to be detected and retrys the operation if needed:
+The following function waits for a MetaMask provider to be detected and retries the operation if needed:
 
 ```typescript
 async function waitForMetaMaskProvider(