From b22b545a7d412d486c09e7540b868bd94482af51 Mon Sep 17 00:00:00 2001 From: Joan E <153745173+joaniefromtheblock@users.noreply.github.com> Date: Thu, 3 Oct 2024 20:47:55 +0000 Subject: [PATCH] updates --- .../starknet/about-get-starknet.md | 36 ++++++++---- .../starknet/connect-to-starknet.md | 10 ++-- .../starknet/create-a-simple-starknet-dapp.md | 10 +--- .../use-non-evm-networks/starknet/index.md | 57 ++++++++++--------- 4 files changed, 63 insertions(+), 50 deletions(-) diff --git a/wallet/how-to/use-non-evm-networks/starknet/about-get-starknet.md b/wallet/how-to/use-non-evm-networks/starknet/about-get-starknet.md index f4fa7c8f501..884a09e91b1 100644 --- a/wallet/how-to/use-non-evm-networks/starknet/about-get-starknet.md +++ b/wallet/how-to/use-non-evm-networks/starknet/about-get-starknet.md @@ -10,7 +10,8 @@ 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. -When you integrate `get-starknet` into your dapp, it creates a `WalletAccount` object, which acts as +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 @@ -26,11 +27,13 @@ A dapp with `get-starknet` installed interacts with MetaMask as follows: 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. +1. You can retrieve an [Account Object](https://starknetjs.com/docs/API/#account) from the Starknet Windows Object (SWO) when you access `swo.account`. + This Account Object enables you to manage Starknet interactions. This instance manages the Starknet account within MetaMask. ```mermaid sequenceDiagram + participant user as End User participant dapp as Dapp participant get as get-starknet participant mm as MetaMask @@ -41,9 +44,10 @@ sequenceDiagram get->>mm: Request connection mm->>Snap: Activate Snap-->>mm: Activated - mm-->>get: Return SWO - get->>network: Create WalletAccount - get-->>dapp: Connection established + 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 @@ -51,13 +55,21 @@ sequenceDiagram get-->>dapp: Processed data dapp->>get: Write transaction - get->>mm: Request signature - mm->>Snap: Sign transaction - Snap-->>mm: Signed transaction - mm-->>get: Return signature - get->>network: Submit transaction - network-->>get: Transaction result - get-->>dapp: Transaction confirmation + 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 ``` The `get-starknet` library offers several features that improve how dapps interact with the Starknet 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 c8569974eb1..cac33a6818a 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 @@ -37,8 +37,10 @@ If you're new to Starknet, you can also follow the ### 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/): +If you don't have an existing React project set up, you can create a new +[React project](https://create-react-app.dev/) project with TypeScript and set up the necessary dependencies for working with Starknet. + +Create a new directory called `get-starknet-dapp` with a basic React app using TypeScript: @@ -57,13 +59,13 @@ npm create react-app get-starknet-dapp -Navigate into the project: +Change into the project directory: ```bash cd get-starknet-dapp ``` -### 2. Install `get-starknet` +### 2. Add `get-starknet` and `starknet.js` Add [`get-starknet`](https://github.com/starknet-io/get-starknet) version `3.3.0` and `starknet.js` version `6.11.0` to your project's dependencies: 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 e4330b9062e..bb416538b6a 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 @@ -19,8 +19,6 @@ You'll also display the balance of an ERC-20 token and perform a token transfer. Create a new React project with TypeScript and set up the necessary dependencies for working with Starknet. -### 1.1 Create a new React project with TypeScript - Create a new directory called `get-starknet-tutorial` with a basic React app using TypeScript: ```bash @@ -33,9 +31,10 @@ Change into the project directory: cd get-starknet-tutorial ``` -### 1.2 Add `get-starknet` and `starknet.js` +## 2. Add `get-starknet` and `starknet.js` -Add the required libraries for interacting with Starknet: +Add [`get-starknet`](https://github.com/starknet-io/get-starknet) version `3.3.0` and `starknet.js` +version `6.11.0` to your project's dependencies: ```bash yarn add get-starknet@3.3.0 starknet@6.11.0 @@ -47,9 +46,6 @@ yarn add get-starknet@3.3.0 starknet@6.11.0 See how to [troubleshoot](troubleshoot.md) connection issues when configuring your dapp. -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. - 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 4364100ac60..547ad39ca4b 100644 --- a/wallet/how-to/use-non-evm-networks/starknet/index.md +++ b/wallet/how-to/use-non-evm-networks/starknet/index.md @@ -42,30 +42,33 @@ Learn more [about how `get-starknet` interacts with MetaMask](about-get-starknet ::: -## Supported methods - -Once connected to the Starknet Snap, your dapp can call -[Starknet Snap API](../../../reference/non-evm-apis/starknet-snap-api.md) methods to interact with -users' Starknet accounts. -Not all methods are supported by both `get-starknet` and `wallet_invokeSnap`. -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) | ✓ | ✓ | +## Interaction with Starknet Snap + +After it is connected to the Starknet Snap, your dapp can interact with the Starknet network through two main integration options: `get-starknet` and `wallet_invokeSnap`. +Both options provide access to similar functionalities, but offer different ways of interacting with users' Starknet accounts. + +- `wallet_invokeSnap: Manages direct interactions between the dApp and the Starknet Snap. It facilitates network communication for account creation, transaction signing, fee estimation, and other Starknet-related actions. + +- `get-starknet`: Provides the same functionalities as `wallet_invokeSnap` and integrates a Starknet Window Object (SWO). +The SWO simplifies account management and signing, and enhances the experience of handling account states and transactions. +You interact with the [Account object](https://starknetjs.com/docs/API/classes/Account) in the SWO for operations. + +The following table lists the core functionalities that each integration option supports: + +| Functionality | `get-starknet` | `wallet_invokeSnap` | +|---------------|----------------|---------------------| +| Create an account | | [`starkNet_createAccount`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_createAccount) | +| Estimate a fee | [`estimateFeeBulk`](https://starknetjs.com/docs/API/classes/Account/#estimatefeebulk) | [`starkNet_estimateFee`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_estimateFee) | +| Estimate the account deploy fee | [`estimateAccountDeployFee`](https://starknetjs.com/docs/API/classes/Account/#estimateaccountdeployfee) | [`starkNet_estimateAccountDeployFee`](../../../reference/non-evm-apis/starknet-snap-api.md#starknet_estimateaccountdeployfee) | +| Extract the public key | [`getPublicKey`](https://starknetjs.com/docs/api/classes/Signer/#getpubkey) | [`starkNet_extractPublicKey`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_extractPublicKey) | +| Get an ERC20 token balance | [`callContract`](http://starknetjs.com/docs/API/classes/Provider/#callcontract) | [`starkNet_getErc20TokenBalance`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_getErc20TokenBalance) | +| Recover an account address | [`getAddress`](https://github.com/starknet-io/get-starknet/blob/ff37390b25b8368ebeb5f2323e2d8826964b41ae/packages/core/src/StarknetWindowObject.ts#L95) | [`starkNet_recoverAccounts`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_recoverAccounts) | +| Get transaction status | [`getTransactionStatus`](https://starknetjs.com/docs/API/classes/Account/#gettransactionstatus) | [`starkNet_getTransactionStatus`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_getTransactionStatus) | +| Sign a message | [`signMessage`](https://starknetjs.com/docs/API/classes/Signer#signmessage) | [`starkNet_signMessage`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_signMessage) | +| Sign a transaction | [`signTransaction`](https://starknetjs.com/docs/API/classes/Signer#signtransaction) | [`starkNet_signTransaction`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_signTransaction) | +| Sign eclare Transaction | [`signDeclareTransaction`](https://starknetjs.com/docs/API/classes/Signer#signdeclaretransaction) | [`starkNet_signDeclareTransaction`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_signDeclareTransaction) | +| Execute a transaction | [`execute`](https://starknetjs.com/docs/API/classes/Account/#execute) | [`starkNet_executeTxn`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_executeTxn) | +| Add an ERC20 token | [`watchAsset`](https://github.com/starknet-io/get-starknet/blob/ff37390b25b8368ebeb5f2323e2d8826964b41ae/packages/core/src/StarknetWindowObject.ts#L58) | [`starkNet_addErc20Token`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_addErc20Token) | +| Switch networks | [`switchNetwork`](https://github.com/starknet-io/get-starknet/blob/ff37390b25b8368ebeb5f2323e2d8826964b41ae/packages/core/src/StarknetWindowObject.ts#L58) | [`starkNet_switchNetwork`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_switchNetwork) | +| Get the current network | [`getChainId`](https://starknetjs.com/docs/API/classes/Provider#getchainid) | [`starkNet_getCurrentNetwork`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_getCurrentNetwork) | +| Declare a contract | [`declareContract`](https://starknetjs.com/docs/API/classes/Account/#declarecontract) | [`starkNet_declareContract`](../../../reference/non-evm-apis/starknet-snap-api.md#starkNet_declareContract) | \ No newline at end of file