Skip to content

Commit

Permalink
updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@joaniefromtheblock
joaniefromtheblock committed Oct 3, 2024
1 parent 99839e7 commit b22b545
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 50 deletions.
36 changes: 24 additions & 12 deletions wallet/how-to/use-non-evm-networks/starknet/about-get-starknet.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -41,23 +44,32 @@ 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
network-->>get: Return data
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
Expand Down
10 changes: 6 additions & 4 deletions wallet/how-to/use-non-evm-networks/starknet/connect-to-starknet.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:

<Tabs>
<TabItem value="yarn" label="Yarn" default>
Expand All @@ -57,13 +59,13 @@ npm create react-app get-starknet-dapp
</TabItem>
</Tabs>

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:
Expand Down
10 changes: 3 additions & 7 deletions wallet/how-to/use-non-evm-networks/starknet/create-a-simple-starknet-dapp.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 [email protected] [email protected]
Expand All @@ -47,9 +46,6 @@ yarn add [email protected] [email protected]

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.

</div>
</details>

Expand Down
57 changes: 30 additions & 27 deletions wallet/how-to/use-non-evm-networks/starknet/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) |

0 comments on commit b22b545

Please sign in to comment.