From a1fe114094a013390815042e2ab7f4c948011c9a Mon Sep 17 00:00:00 2001 From: Joan E <153745173+joaniefromtheblock@users.noreply.github.com> Date: Wed, 25 Sep 2024 23:11:41 +0000 Subject: [PATCH] update text for tutorial --- .../starknet/connect-to-starknet.md | 2 +- .../starknet/create-a-simple-starknet-dapp.md | 60 +++++++++++++++---- .../use-non-evm-networks/starknet/index.md | 34 +++++------ .../starknet/troubleshoot.md | 17 +++--- 4 files changed, 75 insertions(+), 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 index 769f61377eb..f5757f7b7d0 100644 --- 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): 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 index 3560ac281de..1729bf66da4 100644 --- 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) \ No newline at end of file diff --git a/wallet/how-to/use-non-evm-networks/starknet/index.md b/wallet/how-to/use-non-evm-networks/starknet/index.md index 485d13b7b7f..a919b29afff 100644 --- 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 index 05a8e0b5073..be08af06350 100644 --- 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 = ` -

MetaMask is required to use this application. Please install MetaMask to continue.

+

MetaMask is required to use this dapp. Please install MetaMask to continue.

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