From e6bd15c7bc74c9dd46e6a296b1f69989831a6bcd Mon Sep 17 00:00:00 2001 From: Joan E <153745173+joaniefromtheblock@users.noreply.github.com> Date: Wed, 28 Aug 2024 17:12:20 +0000 Subject: [PATCH 01/35] rough skeleton --- wallet/how-to/connect/access-accounts.md | 6 ++ wallet/how-to/manage-networks/add-network.md | 6 ++ wallet/how-to/run-devnet.md | 2 +- .../use-non-evm-networks/_category_.json | 9 +++ .../starknet-snap/connect-to-starknet.md | 4 ++ .../starknet-snap/manage-starknet-account.md | 4 ++ .../starknet-snap/manage-starknet-networks.md | 4 ++ .../starknet-snap/send-transactions.md | 4 ++ .../starknet-snap/troubleshoot.md | 4 ++ wallet/reference/non-evm-provider/index.md | 9 +++ .../non-evm-provider/starknet-snap.md | 65 +++++++++++++++++++ 11 files changed, 116 insertions(+), 1 deletion(-) create mode 100644 wallet/how-to/use-non-evm-networks/_category_.json create mode 100644 wallet/how-to/use-non-evm-networks/starknet-snap/connect-to-starknet.md create mode 100644 wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-account.md create mode 100644 wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-networks.md create mode 100644 wallet/how-to/use-non-evm-networks/starknet-snap/send-transactions.md create mode 100644 wallet/how-to/use-non-evm-networks/starknet-snap/troubleshoot.md create mode 100644 wallet/reference/non-evm-provider/index.md create mode 100644 wallet/reference/non-evm-provider/starknet-snap.md diff --git a/wallet/how-to/connect/access-accounts.md b/wallet/how-to/connect/access-accounts.md index e071a9ed51..47966f176e 100644 --- a/wallet/how-to/connect/access-accounts.md +++ b/wallet/how-to/connect/access-accounts.md @@ -5,6 +5,12 @@ sidebar_position: 3 # Access a user's accounts +:::note + +You can access a non-EVM network ... (point to docs section) + +::: + User accounts are used in a variety of contexts in Ethereum, including as identifiers and for [signing transactions](../sign-data/index.md). To request a signature from a user or have a user approve a transaction, your dapp can diff --git a/wallet/how-to/manage-networks/add-network.md b/wallet/how-to/manage-networks/add-network.md index 06daa7b734..d20d8e1775 100644 --- a/wallet/how-to/manage-networks/add-network.md +++ b/wallet/how-to/manage-networks/add-network.md @@ -5,6 +5,12 @@ sidebar_position: 2 # Add a network +:::note + +You can add a non-EVM network ... (point to docs section) + +::: + In some cases, such as when [interacting with smart contracts](../../concepts/smart-contracts.md), your dapp must connect a user to a new network in MetaMask. Instead of the user [adding a new network manually](https://support.metamask.io/hc/en-us/articles/360043227612-How-to-add-a-custom-network-RPC#h_01G63GGJ83DGDRCS2ZWXM37CV5), diff --git a/wallet/how-to/run-devnet.md b/wallet/how-to/run-devnet.md index 23ff930166..436a8c5026 100644 --- a/wallet/how-to/run-devnet.md +++ b/wallet/how-to/run-devnet.md @@ -1,6 +1,6 @@ --- description: Configure and connect to a Ganache development network. -sidebar_position: 9 +sidebar_position: 10 --- # Run a development network diff --git a/wallet/how-to/use-non-evm-networks/_category_.json b/wallet/how-to/use-non-evm-networks/_category_.json new file mode 100644 index 0000000000..597b1dbfd5 --- /dev/null +++ b/wallet/how-to/use-non-evm-networks/_category_.json @@ -0,0 +1,9 @@ +{ + "label": "Use non-EVM networks", + "position": 9, + "link": { + "type": "generated-index", + "slug": "how-to/use-non-evm-networks", + "description": "You can add non-EVM networks in MetaMask." + } +} diff --git a/wallet/how-to/use-non-evm-networks/starknet-snap/connect-to-starknet.md b/wallet/how-to/use-non-evm-networks/starknet-snap/connect-to-starknet.md new file mode 100644 index 0000000000..637c711da1 --- /dev/null +++ b/wallet/how-to/use-non-evm-networks/starknet-snap/connect-to-starknet.md @@ -0,0 +1,4 @@ +--- +description: Connect +sidebar_position: 1 +--- \ No newline at end of file diff --git a/wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-account.md b/wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-account.md new file mode 100644 index 0000000000..d0667736bb --- /dev/null +++ b/wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-account.md @@ -0,0 +1,4 @@ +--- +description: Manage +sidebar_position: 2 +--- \ No newline at end of file diff --git a/wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-networks.md b/wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-networks.md new file mode 100644 index 0000000000..3369e6ed38 --- /dev/null +++ b/wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-networks.md @@ -0,0 +1,4 @@ +--- +description: Manage +sidebar_position: 3 +--- \ No newline at end of file diff --git a/wallet/how-to/use-non-evm-networks/starknet-snap/send-transactions.md b/wallet/how-to/use-non-evm-networks/starknet-snap/send-transactions.md new file mode 100644 index 0000000000..660ebd37c9 --- /dev/null +++ b/wallet/how-to/use-non-evm-networks/starknet-snap/send-transactions.md @@ -0,0 +1,4 @@ +--- +description: Send +sidebar_position: 4 +--- \ No newline at end of file diff --git a/wallet/how-to/use-non-evm-networks/starknet-snap/troubleshoot.md b/wallet/how-to/use-non-evm-networks/starknet-snap/troubleshoot.md new file mode 100644 index 0000000000..0f52b39af3 --- /dev/null +++ b/wallet/how-to/use-non-evm-networks/starknet-snap/troubleshoot.md @@ -0,0 +1,4 @@ +--- +description: Troubleshoot +sidebar_position: 5 +--- \ No newline at end of file diff --git a/wallet/reference/non-evm-provider/index.md b/wallet/reference/non-evm-provider/index.md new file mode 100644 index 0000000000..251602314d --- /dev/null +++ b/wallet/reference/non-evm-provider/index.md @@ -0,0 +1,9 @@ +--- +title: Non-EVM provider APIs +--- + +import CardList from "@site/src/components/CardList" + +# Non-EVM provider APIs + +Non-EVM Provider APIs are interfaces that allow developers to interact with blockchain networks that don't use the Ethereum Virtual Machine (EVM). diff --git a/wallet/reference/non-evm-provider/starknet-snap.md b/wallet/reference/non-evm-provider/starknet-snap.md new file mode 100644 index 0000000000..fe90a03ca5 --- /dev/null +++ b/wallet/reference/non-evm-provider/starknet-snap.md @@ -0,0 +1,65 @@ +--- +title: Starknet Snap API +--- + +# Starknet API Methods + +## `starkNet_createAccount` +Deploy a account contract into starknet by using the seed phrase of MetaMask based on BIP-44 + +## `starkNet_getStoredUserAccounts` +Gets a list of stored user accounts that are either initialized or initializing + +## `starkNet_extractPrivateKey` +Display private key from deployed StarkNet account and display in MetaMask + +## `starkNet_extractPublicKey` +Extract public key from an StarkNet account address + +## `starkNet_signMessage` +Signs a typed data message + +## `starkNet_verifySignedMessage` +Verify signed message + +## `starkNet_getErc20TokenBalance` +Gets the user's current balance of an ERC-20 Token + +## `starkNet_getTransactionStatus` +Gets the status of a transaction + +## `starkNet_sendTransaction` +Sign and send a transaction + +## `starkNet_getValue` +Calls a VIEW method on any Contract + +## `starkNet_estimateFee` +Gets the estimated gas fee for calling a method on any contract + +## `starkNet_estimateAccountDeployFee` +Gets the estimated gas fee for deploying an account contract + +## `starkNet_addErc20Token` +Adds an ERC-20 Token to the token list in snap's state + +## `starkNet_getStoredErc20Tokens` +Gets a list of stored Erc20 Tokens + +## `starkNet_addNetwork` +Adds a StarkNet network to the network list in snap's state + +## `starkNet_getStoredNetworks` +Gets a list of stored StarkNet networks + +## `starkNet_getStoredTransactions` +Gets the transaction records from the snap's state + +## `starkNet_getTransactions` +Gets the transaction records from a sender address + +## `starkNet_recoverAccounts` +Recovers deployed user accounts from the seed phrase of MetaMask based on BIP-44 +Last edited just now + + From f8c368565b9858cb37f52f35464d17c6696342ea Mon Sep 17 00:00:00 2001 From: Joan E <153745173+joaniefromtheblock@users.noreply.github.com> Date: Wed, 28 Aug 2024 20:14:03 +0000 Subject: [PATCH 02/35] update menu sidebar --- .../starknet-snap/connect-to-starknet.md | 4 +++- .../starknet-snap/manage-starknet-account.md | 4 +++- .../starknet-snap/manage-starknet-networks.md | 5 ++++- .../starknet-snap/send-transactions.md | 4 +++- .../use-non-evm-networks/starknet-snap/troubleshoot.md | 3 ++- wallet/reference/non-evm-providers/_category_.json | 9 +++++++++ .../{non-evm-provider => non-evm-providers}/index.md | 0 .../starknet-snap.md | 0 wallet/reference/provider-api.md | 2 +- 9 files changed, 25 insertions(+), 6 deletions(-) create mode 100644 wallet/reference/non-evm-providers/_category_.json rename wallet/reference/{non-evm-provider => non-evm-providers}/index.md (100%) rename wallet/reference/{non-evm-provider => non-evm-providers}/starknet-snap.md (100%) diff --git a/wallet/how-to/use-non-evm-networks/starknet-snap/connect-to-starknet.md b/wallet/how-to/use-non-evm-networks/starknet-snap/connect-to-starknet.md index 637c711da1..07e5f8bf9b 100644 --- a/wallet/how-to/use-non-evm-networks/starknet-snap/connect-to-starknet.md +++ b/wallet/how-to/use-non-evm-networks/starknet-snap/connect-to-starknet.md @@ -1,4 +1,6 @@ --- description: Connect sidebar_position: 1 ---- \ No newline at end of file +--- + +# Connect \ No newline at end of file diff --git a/wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-account.md b/wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-account.md index d0667736bb..d21fc517a4 100644 --- a/wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-account.md +++ b/wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-account.md @@ -1,4 +1,6 @@ --- description: Manage sidebar_position: 2 ---- \ No newline at end of file +--- + +# Manage \ No newline at end of file diff --git a/wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-networks.md b/wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-networks.md index 3369e6ed38..f7f51069ec 100644 --- a/wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-networks.md +++ b/wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-networks.md @@ -1,4 +1,7 @@ --- description: Manage sidebar_position: 3 ---- \ No newline at end of file +--- + +# Manage Starknet networks + \ No newline at end of file diff --git a/wallet/how-to/use-non-evm-networks/starknet-snap/send-transactions.md b/wallet/how-to/use-non-evm-networks/starknet-snap/send-transactions.md index 660ebd37c9..82f7813644 100644 --- a/wallet/how-to/use-non-evm-networks/starknet-snap/send-transactions.md +++ b/wallet/how-to/use-non-evm-networks/starknet-snap/send-transactions.md @@ -1,4 +1,6 @@ --- description: Send sidebar_position: 4 ---- \ No newline at end of file +--- + +# Send transactions diff --git a/wallet/how-to/use-non-evm-networks/starknet-snap/troubleshoot.md b/wallet/how-to/use-non-evm-networks/starknet-snap/troubleshoot.md index 0f52b39af3..0c8c0be5f2 100644 --- a/wallet/how-to/use-non-evm-networks/starknet-snap/troubleshoot.md +++ b/wallet/how-to/use-non-evm-networks/starknet-snap/troubleshoot.md @@ -1,4 +1,5 @@ --- description: Troubleshoot sidebar_position: 5 ---- \ No newline at end of file +--- + diff --git a/wallet/reference/non-evm-providers/_category_.json b/wallet/reference/non-evm-providers/_category_.json new file mode 100644 index 0000000000..f4777cccbe --- /dev/null +++ b/wallet/reference/non-evm-providers/_category_.json @@ -0,0 +1,9 @@ +{ + "label": "Non-EVM provider API", + "position": 4, + "link": { + "type": "generated-index", + "slug": "reference"/non-evm-providers", + "description": "You can add non-EVM networks in MetaMask." + } +} diff --git a/wallet/reference/non-evm-provider/index.md b/wallet/reference/non-evm-providers/index.md similarity index 100% rename from wallet/reference/non-evm-provider/index.md rename to wallet/reference/non-evm-providers/index.md diff --git a/wallet/reference/non-evm-provider/starknet-snap.md b/wallet/reference/non-evm-providers/starknet-snap.md similarity index 100% rename from wallet/reference/non-evm-provider/starknet-snap.md rename to wallet/reference/non-evm-providers/starknet-snap.md diff --git a/wallet/reference/provider-api.md b/wallet/reference/provider-api.md index aa6b7220c1..5bb9026b6a 100644 --- a/wallet/reference/provider-api.md +++ b/wallet/reference/provider-api.md @@ -1,6 +1,6 @@ --- description: See the MetaMask Ethereum provider API reference. -sidebar_position: 3 +sidebar_position: 4 --- # Ethereum provider API From 1130adf7208b596f50e4f8d7a00509a7ec94a07e Mon Sep 17 00:00:00 2001 From: Alexandra Tran Date: Fri, 30 Aug 2024 22:48:40 -0700 Subject: [PATCH 03/35] Add Starknet Snap API reference docs --- wallet-sidebar.js | 6 + .../non-evm-apis/starknet-snap-api.md | 830 ++++++++++++++++++ .../non-evm-providers/_category_.json | 9 - wallet/reference/non-evm-providers/index.md | 9 - .../non-evm-providers/starknet-snap.md | 65 -- 5 files changed, 836 insertions(+), 83 deletions(-) create mode 100644 wallet/reference/non-evm-apis/starknet-snap-api.md delete mode 100644 wallet/reference/non-evm-providers/_category_.json delete mode 100644 wallet/reference/non-evm-providers/index.md delete mode 100644 wallet/reference/non-evm-providers/starknet-snap.md diff --git a/wallet-sidebar.js b/wallet-sidebar.js index d4cf51e5fb..4aea5da931 100644 --- a/wallet-sidebar.js +++ b/wallet-sidebar.js @@ -36,6 +36,12 @@ const sidebar = { type: "doc", id: "reference/sdk-unity-api", }, + { + type: "category", + label: "Non-EVM APIs", + link: { type: "generated-index", slug: "/reference/non-evm-apis" }, + items: [{ type: "autogenerated", dirName: "reference/non-evm-apis" }], + }, { type: "doc", id: "reference/provider-api", diff --git a/wallet/reference/non-evm-apis/starknet-snap-api.md b/wallet/reference/non-evm-apis/starknet-snap-api.md new file mode 100644 index 0000000000..d640efac09 --- /dev/null +++ b/wallet/reference/non-evm-apis/starknet-snap-api.md @@ -0,0 +1,830 @@ +--- +description: See the Starknet Snap API reference. +sidebar_position: 1 +toc_max_heading_level: 2 +--- + +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; + +# Starknet Snap API + +With the [Starknet Snap] installed, dapps can use the Starknet Snap API to interact with users' +Starknet accounts. + +:::note +You can also communicate with the Starknet network using the +[Starknet API](/services/reference/starknet). +::: + +## `starkNet_createAccount` + +Deploys an account contract. + +### Parameters + +- `addressIndex`: `integer` - (Optional) Specific address index of the derived key in + [BIP-44](https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki). +- `deploy`: `boolean` - (Optional) Indicate whether to include send the deploy transaction for the + account contract. + The default is `false`. +- `chainId`: `string` - (Optional) ID of the target Starknet network. + The default is the Starknet Goerli testnet. + +### Returns + +The response from Starknet's `gateway/add_transaction` API endpoint. + +### Example + + + + +```js +await window.ethereum.request({ + method: "wallet_invokeSnap", + params: { + snapId: "npm:@consensys/starknet-snap", + request: { + method: "starkNet_createAccount", + "params": { + "addressIndex": 1, + "deploy": true, + "chainId": "0x1" + }, + }, + }, +}) +``` + + + + +```json +{ + "transaction_hash": "0x05a56e2d52c817161883f50c441c3228cfe54d9f84b5b5b8b1c8b8e0e6f7e6d8", + "address": "0xb60e8dd61c5d32be8058bb8eb970870f07233155" +} +``` + + + + +## `starkNet_displayPrivateKey` + +Extracts the private key from the deployed Starknet account and displays it in MetaMask. + +### Parameters + +- `userAddress`: `string` - Address of the account contract. +- `chainId`: `string` - (Optional) ID of the target Starknet network. + The default is the Starknet Goerli testnet. + +### Returns + +Always returns `null` for security reasons. +The private key is only shown in the MetaMask pop-up window. + +### Example + + + + +```js +await window.ethereum.request({ + method: "wallet_invokeSnap", + params: { + snapId: "npm:@consensys/starknet-snap", + request: { + method: "starkNet_displayPrivateKey", + params: { + userAddress: "0xb60e8dd61c5d32be8058bb8eb970870f07233155", + chainId: "0x1" + }, + }, + }, +}) +``` + + + + +```json +null +``` + + + + +## `starkNet_estimateAccountDeployFee` + +Gets the estimated gas fee for deploying an account contract. + +### Parameters + +- `addressIndex`: `integer` - (Optional) Specific address index of the derived key in + [BIP-44](https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki). +- `chainId`: `string` - (Optional) ID of the target Starknet network. + The default is the Starknet Goerli testnet. + +### Returns + +The response from Starknet's `feeder_gateway/estimate_fee` API endpoint. + +### Example + + + + +```js +await window.ethereum.request({ + method: "wallet_invokeSnap", + params: { + snapId: "npm:@consensys/starknet-snap", + request: { + method: "starkNet_estimateAccountDeployFee", + params: { + addressIndex: 0, + chainId: "0x1" + }, + }, + }, +}) +``` + + + + +```json +{ + "suggestedMaxFee": "1000000000000000", + "overallFee": "900000000000000", + "gasConsumed": "1000000", + "gasPrice": "1000000000", + "unit": "wei", + "includeDeploy": true +} +``` + + + + +## `starkNet_estimateFee` + +Gets the estimated gas fee for calling a method on any contract. + +### Parameters + +- `contractAddress`: `string` - Address of the target contract. +- `contractFuncName`: `string` - Target function name of the contract. +- `contractCallData`: `string` - (Optional) Call data for the target function with `,` as a separator. +- `senderAddress`: `string` - Address of the sender. +- `chainId`: `string` - (Optional) ID of the target Starknet network. + The default is the Starknet Goerli testnet. + +### Returns + +The response from Starknet's `feeder_gateway/estimate_fee` API endpoint. + +### Example + + + + +```js +await window.ethereum.request({ + method: "wallet_invokeSnap", + params: { + snapId: "npm:@consensys/starknet-snap", + request: { + method: "starkNet_estimateFee", + params: { + contractAddress: "0x5B38Da6a701c568545dCfcB03FcB875f56beddC4", + contractFuncName: "transfer", + contractCallData: "0x456...,0x789...,100", + senderAddress: "0xb60e8dd61c5d32be8058bb8eb970870f07233155", + chainId: "0x1" + }, + }, + }, +}) +``` + + + + +```json +{ + "suggestedMaxFee": "1000000000000000", + "overallFee": "900000000000000", + "gasConsumed": "1000000", + "gasPrice": "1000000000", + "unit": "wei", + "includeDeploy": false +} +``` + + + + +## `starkNet_extractPublicKey` + +:::note +This method is integrated into `get-starknet`. +::: + +Extracts the public key from a Starknet account address. + +### Parameters + +- `userAddress`: `string` - Address of the account contract. +- `chainId`: `string` - (Optional) ID of the target Starknet network. + The default is the Starknet Goerli testnet. + +### Returns + +The public key of the given account address (can be different from the actual signer). + +### Example + + + + +```js +await window.ethereum.request({ + method: "wallet_invokeSnap", + params: { + snapId: "npm:@consensys/starknet-snap", + request: { + method: "starkNet_extractPublicKey", + params: { + userAddress: "0xb60e8dd61c5d32be8058bb8eb970870f07233155", + chainId: "0x1" + }, + }, + }, +}) +``` + + + + +```json +"0x04bfcab3b7ca7e8b3f3b62b2f7f77e9e4b68080bbf8f0f4a1c8f890864d2c7c1d3c45d8b2e3f5f1c27dfeea4c2f5733e90bfc7484e2a690aa9b8ac4559d2e6a8d7" +``` + + + + +## `starkNet_getErc20TokenBalance` + +Gets the user's current balance of an ERC-20 token. + +### Parameters + +- `tokenAddress`: `string` - Address of the ERC-20 token contract. +- `userAddress`: `string` - Address of the user account. +- `chainId`: `string` - (Optional) ID of the target Starknet network. + The default is the Starknet Goerli testnet. + +### Returns + +The token balance in hexadecimal. + +### Example + + + + +```js +await window.ethereum.request({ + method: "wallet_invokeSnap", + params: { + snapId: "npm:@consensys/starknet-snap", + request: { + method: "starkNet_getErc20TokenBalance", + params: { + tokenAddress: "0x5B38Da6a701c568545dCfcB03FcB875f56beddC4", + userAddress: "0xb60e8dd61c5d32be8058bb8eb970870f07233155", + chainId: "0x1" + }, + }, + }, +}) +``` + + + + +```json +"0x3e8" +``` + + + + +## `starkNet_getStoredUserAccounts` + +Gets a list of stored user accounts that are either initialized or initializing. + +### Parameters + +`chainId`: `string` - (Optional) ID of the target Starknet network. +The default is the Starknet Goerli testnet. + +### Returns + +The list of the stored user accounts. + +### Example + + + + +```js +await window.ethereum.request({ + method: "wallet_invokeSnap", + params: { + snapId: "npm:@consensys/starknet-snap", + request: { + method: "starkNet_getStoredUserAccounts", + params: { + chainId: "0x1" + }, + }, + }, +}) +``` + + + + +```json +[ + { + "address": "0xb60e8dd61c5d32be8058bb8eb970870f07233155", + "addressIndex": 0, + "publicKey": "0x04bfcab3b7ca7e8b3f3b62b2f7f77e9e4b68080bbf8f0f4a1c8f890864d2c7c1d3c45d8b2e3f5f1c27dfeea4c2f5733e90bfc7484e2a690aa9b8ac4559d2e6a8d7", + "addressSalt": "0x789...", + "deployTxnHash": "0x05a56e2d52c817161883f50c441c3228cfe54d9f84b5b5b8b1c8b8e0e6f7e6d8", + "derivationPath": "m/44'/9004'/0'/0/0", + "chainId": "0x1" + }, + // ... more accounts +] +``` + + + + +## `starkNet_getTransactions` + +Gets the transaction records from a sender address. + +### Parameters + +- `senderAddress`: `string` - Address of the sender. +- `contractAddress`: `string` - (Optional) Address of the called contract. +- `pageSize`: `integer` - (Optional) Page size when calling the Voyager get "api/txns" endpoint. + Options are `10`, `25`, and `50`. + The default is `10`. +- `txnsInLastNumOfDays`: `integer` - (Optional) Number of past days of transaction records to be + fetched from Voyager. + The default is `5`. +- `withDeployTxn`: `boolean` - (Optional) Indicates whether to include the deploy transaction of the + sender's account contract. + The default is `false`. +- `onlyFromState`: `boolean` - (Optional) Indicates whether to only retrieve transaction records + that are stored in Snap state, that is, those in `RECEIVED`, `PENDING`, `ACCEPTED_ON_L2`, or + `REJECTED` state. + The default is `false`. +- `chainId`: `string` - (Optional) ID of the target Starknet network. + The default is the Starknet Goerli testnet. + +### Returns + +The list of the transaction records. + +### Example + + + + +```js +await window.ethereum.request({ + method: "wallet_invokeSnap", + params: { + snapId: "npm:@consensys/starknet-snap", + request: { + method: "starkNet_getTransactions", + params: { + senderAddress: "0xb60e8dd61c5d32be8058bb8eb970870f07233155", + contractAddress: "0x5B38Da6a701c568545dCfcB03FcB875f56beddC4", + pageSize: 25, + txnsInLastNumOfDays: 7, + withDeployTxn: true, + onlyFromState: false, + chainId: "0x1" + }, + }, + }, +}) +``` + + + + +```json +[ + { + "txnHash": "0x05a56e2d52c817161883f50c441c3228cfe54d9f84b5b5b8b1c8b8e0e6f7e6d8", + "txnType": "invoke", + "senderAddress": "0xb60e8dd61c5d32be8058bb8eb970870f07233155", + "contractAddress": "0x5B38Da6a701c568545dCfcB03FcB875f56beddC4", + "contractFuncName": "transfer", + "contractCallData": ["0x789...", "100"], + "status": "ACCEPTED_ON_L2", + "failureReason": null, + "eventIds": ["0xdef..."], + "timestamp": 1234567890, + "chainId": "0x1" + }, + // ... more transactions +] +``` + + + + +## `starkNet_getTransactionStatus` + +Gets the status of a transaction. + +### Parameters + +- `transactionHash`: `string` - Hash of the target transaction. +- `chainId`: `string` - (Optional) ID of the target Starknet network. + The default is the Starknet Goerli testnet. + +### Returns + +The [status](https://docs.starknet.io/architecture-and-concepts/network-architecture/transaction-life-cycle/) +of the transaction. + +### Example + + + + +```js +await window.ethereum.request({ + method: "wallet_invokeSnap", + params: { + snapId: "npm:@consensys/starknet-snap", + request: { + method: "starkNet_getTransactionStatus", + params: { + transactionHash: "0x05a56e2d52c817161883f50c441c3228cfe54d9f84b5b5b8b1c8b8e0e6f7e6d8", + chainId: "0x1" + }, + }, + }, +}) +``` + + + + +```json +"ACCEPTED_ON_L2" +``` + + + + +## `starkNet_getValue` + +Calls a `VIEW` method on any contract. + +### Parameters + +- `contractAddress`: `string` - Address of the target contract. +- `contractFuncName`: `string` - Target function name of the contract. +- `contractCallData`: `string` - (Optional) Call data for the target function with `,` as a separator. +- `chainId`: `string` - (Optional) ID of the target Starknet network. + The default is the Starknet Goerli testnet. + +### Returns + +The response from Starknet's `feeder_gateway/call_contract` API endpoint. + +### Example + + + + +```js +await window.ethereum.request({ + method: "wallet_invokeSnap", + params: { + snapId: "npm:@consensys/starknet-snap", + request: { + method: "starkNet_getValue", + params: { + contractAddress: "0x5B38Da6a701c568545dCfcB03FcB875f56beddC4", + contractFuncName: "balanceOf", + contractCallData: "0x456...", + chainId: "0x1" + }, + }, + }, +}) +``` + + + + +```json +{ + "result": ["1000"] +} +``` + + + + +## `starkNet_recoverAccounts` + +:::note +This method is integrated into `get-starknet`. +::: + +Recovers deployed user accounts from the seed phrase of MetaMask based on +[BIP-44](https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki). + +### Parameters + +- `startScanIndex`: `integer` - (Optional) Starting address index of the derived key in + [BIP-44](https://github.com/bitcoin/bips/blob/master/bip-0044.mediawiki). + The default is `0`. +- `maxScanned`: `integer` - (Optional) Maximum number of addresses to scan during the recovery process. + The default is `1`. +- `maxMissed`: `integer` - (Optional) Maximum number of uninitialized addresses hit during the + recovery process. + The default is `1`. +- `chainId`: `string` - (Optional) ID of the target Starknet network. + The default is the Starknet Goerli testnet. + +### Returns + +The list of the scanned user accounts during the recovery process. + +### Example + + + + +```js +await window.ethereum.request({ + method: "wallet_invokeSnap", + params: { + snapId: "npm:@consensys/starknet-snap", + request: { + method: "starkNet_recoverAccounts", + params: { + startScanIndex: 0, + maxScanned: 5, + maxMissed: 2, + chainId: "0x1" + }, + }, + }, +}) +``` + + + + +```json +[ + { + "address": "0xb60e8dd61c5d32be8058bb8eb970870f07233155", + "addressIndex": 0, + "publicKey": "0x04bfcab3b7ca7e8b3f3b62b2f7f77e9e4b68080bbf8f0f4a1c8f890864d2c7c1d3c45d8b2e3f5f1c27dfeea4c2f5733e90bfc7484e2a690aa9b8ac4559d2e6a8d7", + "addressSalt": "0x789...", + "deployTxnHash": "0x05a56e2d52c817161883f50c441c3228cfe54d9f84b5b5b8b1c8b8e0e6f7e6d8", + "derivationPath": "m/44'/9004'/0'/0/0", + "chainId": "0x1" + }, + // ... more accounts +] +``` + + + + +## `starkNet_sendTransaction` + +Signs and sends a transaction. + +### Parameters + +- `contractAddress`: `string` - Address of the target contract. +- `contractFuncName`: `string` - Target function name of the contract. +- `contractCallData`: `string` - (Optional) Call data for the target function with `,` as a separator. +- `senderAddress`: `string` - Address of the sender. +- `maxFee`: `string` - (Optional) Maximum gas fee allowed from the sender. + If not specified, the maximum fee is automatically calculated. +- `chainId`: `string` - (Optional) ID of the target Starknet network. + The default is the Starknet Goerli testnet. + +### Returns + +The response from Starknet's `gateway/add_transaction` API endpoint. + +### Example + + + + +```js +await window.ethereum.request({ + method: "wallet_invokeSnap", + params: { + snapId: "npm:@consensys/starknet-snap", + request: { + method: "starkNet_sendTransaction", + params: { + contractAddress: "0x5B38Da6a701c568545dCfcB03FcB875f56beddC4", + contractFuncName: "transfer", + contractCallData: "0x456...,0x789...,100", + senderAddress: "0xb60e8dd61c5d32be8058bb8eb970870f07233155", + maxFee: "1000000000000000", + chainId: "0x1" + }, + }, + }, +}) +``` + + + + +```json +{ + "transaction_hash": "0x05a56e2d52c817161883f50c441c3228cfe54d9f84b5b5b8b1c8b8e0e6f7e6d8" +} +``` + + + + +## `starkNet_signMessage` + +:::note +This method is integrated into `get-starknet`. +::: + +Signs a typed data message. + +### Parameters + +- `typedDataMessage`: `string` - JSON representation of the typed data to be signed. +- `signerAddress`: `string` - Address of the signer. +- `chainId`: `string` - (Optional) ID of the target Starknet network. + The default is the Starknet Goerli testnet. + +### Returns + +The signed hash of typed data. + +### Example + + + + +```js +await window.ethereum.request({ + method: "wallet_invokeSnap", + params: { + snapId: "npm:@consensys/starknet-snap", + request: { + method: "starkNet_signMessage", + params: { + typedDataMessage: "{ ... }", + signerAddress: "0xb60e8dd61c5d32be8058bb8eb970870f07233155", + chainId: "0x1" + }, + }, + }, +}) +``` + + + + +```json +"1234567890,9876543210" +``` + + + + +## `starkNet_upgradeAccContract` + +Upgrades an account contract. + +### Parameters + +- `contractAddress`: `string` - Address of the target contract. +- `maxFee`: `string` - (Optional) Maximum gas fee allowed from the sender. + If not specified, the maximum fee is automatically calculated. +- `chainId`: `string` - (Optional) ID of the target Starknet network. + The default is the Starknet Goerli testnet. + +### Returns + +The response from Starknet's `gateway/call_contract` API endpoint. + +### Example + + + + +```js +await window.ethereum.request({ + method: "wallet_invokeSnap", + params: { + snapId: "npm:@consensys/starknet-snap", + request: { + method: "starkNet_upgradeAccContract", + params: { + contractAddress: "0x5B38Da6a701c568545dCfcB03FcB875f56beddC4", + maxFee: "1000000000000000", + chainId: "0x1" + }, + }, + }, +}) +``` + + + + +```json +{ + "transaction_hash": "0xdef..." +} +``` + + + + +## `starkNet_verifyMessage` + +Verifies a signed typed data message. + +### Parameters + +- `typedDataMessage`: `string` - JSON representation of the original typed data message to be verified. +- `signerAddress`: `string` - Address of the signer. +- `signature`: `string` - Signature of the typed data message. +- `chainId`: `string` - (Optional) ID of the target Starknet network. + The default is the Starknet Goerli testnet. + +### Returns + +`true` if the signature is verified, `false` otherwise. + +### Example + + + + +```js +await window.ethereum.request({ + method: "wallet_invokeSnap", + params: { + snapId: "npm:@consensys/starknet-snap", + request: { + method: "starkNet_verifyMessage", + params: { + typedDataMessage: "{ ... }", + signerAddress: "0xb60e8dd61c5d32be8058bb8eb970870f07233155", + signature: "1234567890,9876543210", + chainId: "0x1" + }, + }, + }, +}) +``` + + + + +```json +true +``` + + + diff --git a/wallet/reference/non-evm-providers/_category_.json b/wallet/reference/non-evm-providers/_category_.json deleted file mode 100644 index f4777cccbe..0000000000 --- a/wallet/reference/non-evm-providers/_category_.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "label": "Non-EVM provider API", - "position": 4, - "link": { - "type": "generated-index", - "slug": "reference"/non-evm-providers", - "description": "You can add non-EVM networks in MetaMask." - } -} diff --git a/wallet/reference/non-evm-providers/index.md b/wallet/reference/non-evm-providers/index.md deleted file mode 100644 index 251602314d..0000000000 --- a/wallet/reference/non-evm-providers/index.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Non-EVM provider APIs ---- - -import CardList from "@site/src/components/CardList" - -# Non-EVM provider APIs - -Non-EVM Provider APIs are interfaces that allow developers to interact with blockchain networks that don't use the Ethereum Virtual Machine (EVM). diff --git a/wallet/reference/non-evm-providers/starknet-snap.md b/wallet/reference/non-evm-providers/starknet-snap.md deleted file mode 100644 index fe90a03ca5..0000000000 --- a/wallet/reference/non-evm-providers/starknet-snap.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Starknet Snap API ---- - -# Starknet API Methods - -## `starkNet_createAccount` -Deploy a account contract into starknet by using the seed phrase of MetaMask based on BIP-44 - -## `starkNet_getStoredUserAccounts` -Gets a list of stored user accounts that are either initialized or initializing - -## `starkNet_extractPrivateKey` -Display private key from deployed StarkNet account and display in MetaMask - -## `starkNet_extractPublicKey` -Extract public key from an StarkNet account address - -## `starkNet_signMessage` -Signs a typed data message - -## `starkNet_verifySignedMessage` -Verify signed message - -## `starkNet_getErc20TokenBalance` -Gets the user's current balance of an ERC-20 Token - -## `starkNet_getTransactionStatus` -Gets the status of a transaction - -## `starkNet_sendTransaction` -Sign and send a transaction - -## `starkNet_getValue` -Calls a VIEW method on any Contract - -## `starkNet_estimateFee` -Gets the estimated gas fee for calling a method on any contract - -## `starkNet_estimateAccountDeployFee` -Gets the estimated gas fee for deploying an account contract - -## `starkNet_addErc20Token` -Adds an ERC-20 Token to the token list in snap's state - -## `starkNet_getStoredErc20Tokens` -Gets a list of stored Erc20 Tokens - -## `starkNet_addNetwork` -Adds a StarkNet network to the network list in snap's state - -## `starkNet_getStoredNetworks` -Gets a list of stored StarkNet networks - -## `starkNet_getStoredTransactions` -Gets the transaction records from the snap's state - -## `starkNet_getTransactions` -Gets the transaction records from a sender address - -## `starkNet_recoverAccounts` -Recovers deployed user accounts from the seed phrase of MetaMask based on BIP-44 -Last edited just now - - From a43f196ee6e634f45c74755af730401bdb9a3ef3 Mon Sep 17 00:00:00 2001 From: Alexandra Tran Date: Thu, 5 Sep 2024 12:57:27 -0700 Subject: [PATCH 04/35] Clean up files and placeholders --- wallet/how-to/connect/access-accounts.md | 10 ++++------ wallet/how-to/manage-networks/add-network.md | 14 ++++---------- wallet/how-to/use-non-evm-networks/_category_.json | 2 +- .../starknet-snap/connect-to-starknet.md | 6 ------ .../starknet-snap/manage-starknet-account.md | 6 ------ .../starknet-snap/send-transactions.md | 6 ------ .../starknet-snap/troubleshoot.md | 5 ----- .../starknet/connect-to-starknet.md | 6 ++++++ .../how-to/use-non-evm-networks/starknet/index.md | 8 ++++++++ .../starknet/manage-starknet-accounts.md | 6 ++++++ .../manage-starknet-networks.md | 2 +- .../starknet/send-starknet-transactions.md | 6 ++++++ .../starknet/sign-starknet-data.md | 6 ++++++ .../use-non-evm-networks/starknet/troubleshoot.md | 6 ++++++ wallet/reference/non-evm-apis/starknet-snap-api.md | 4 ++-- 15 files changed, 50 insertions(+), 43 deletions(-) delete mode 100644 wallet/how-to/use-non-evm-networks/starknet-snap/connect-to-starknet.md delete mode 100644 wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-account.md delete mode 100644 wallet/how-to/use-non-evm-networks/starknet-snap/send-transactions.md delete mode 100644 wallet/how-to/use-non-evm-networks/starknet-snap/troubleshoot.md create mode 100644 wallet/how-to/use-non-evm-networks/starknet/connect-to-starknet.md create mode 100644 wallet/how-to/use-non-evm-networks/starknet/index.md create mode 100644 wallet/how-to/use-non-evm-networks/starknet/manage-starknet-accounts.md rename wallet/how-to/use-non-evm-networks/{starknet-snap => starknet}/manage-starknet-networks.md (52%) create mode 100644 wallet/how-to/use-non-evm-networks/starknet/send-starknet-transactions.md create mode 100644 wallet/how-to/use-non-evm-networks/starknet/sign-starknet-data.md create mode 100644 wallet/how-to/use-non-evm-networks/starknet/troubleshoot.md diff --git a/wallet/how-to/connect/access-accounts.md b/wallet/how-to/connect/access-accounts.md index 47966f176e..f527c79e3f 100644 --- a/wallet/how-to/connect/access-accounts.md +++ b/wallet/how-to/connect/access-accounts.md @@ -5,12 +5,6 @@ sidebar_position: 3 # Access a user's accounts -:::note - -You can access a non-EVM network ... (point to docs section) - -::: - User accounts are used in a variety of contexts in Ethereum, including as identifiers and for [signing transactions](../sign-data/index.md). To request a signature from a user or have a user approve a transaction, your dapp can @@ -30,6 +24,10 @@ When accessing a user's accounts: - **Always** disable the connect button while the connection request is pending. - **Never** initiate a connection request on page load. +:::note +You can also access users' accounts on some [non-EVM networks](/wallet/how-to/use-non-evm-networks). +::: + ## Create a connect button :::caution Important diff --git a/wallet/how-to/manage-networks/add-network.md b/wallet/how-to/manage-networks/add-network.md index d20d8e1775..88521ba4ec 100644 --- a/wallet/how-to/manage-networks/add-network.md +++ b/wallet/how-to/manage-networks/add-network.md @@ -5,12 +5,6 @@ sidebar_position: 2 # Add a network -:::note - -You can add a non-EVM network ... (point to docs section) - -::: - In some cases, such as when [interacting with smart contracts](../../concepts/smart-contracts.md), your dapp must connect a user to a new network in MetaMask. Instead of the user [adding a new network manually](https://support.metamask.io/hc/en-us/articles/360043227612-How-to-add-a-custom-network-RPC#h_01G63GGJ83DGDRCS2ZWXM37CV5), @@ -36,10 +30,10 @@ The confirmations look like the following: -:::note - -To add a local development network such as [Hardhat](https://hardhat.org) to MetaMask, see [Run a development network](../run-devnet.md). - +:::info Development and non-EVM networks +- To add a local development network such as [Hardhat](https://hardhat.org) to MetaMask, see [Run a development network](../run-devnet.md). +- To add a non-EVM network such as [Starknet](../use-non-evm-networks/starknet/index.md) to MetaMask, + see [Use non-EVM networks](/wallet/how-to/use-non-evm-networks). ::: ## Example diff --git a/wallet/how-to/use-non-evm-networks/_category_.json b/wallet/how-to/use-non-evm-networks/_category_.json index 597b1dbfd5..acf2bb0e42 100644 --- a/wallet/how-to/use-non-evm-networks/_category_.json +++ b/wallet/how-to/use-non-evm-networks/_category_.json @@ -4,6 +4,6 @@ "link": { "type": "generated-index", "slug": "how-to/use-non-evm-networks", - "description": "You can add non-EVM networks in MetaMask." + "description": "You can interact with users' accounts on non-EVM networks in MetaMask." } } diff --git a/wallet/how-to/use-non-evm-networks/starknet-snap/connect-to-starknet.md b/wallet/how-to/use-non-evm-networks/starknet-snap/connect-to-starknet.md deleted file mode 100644 index 07e5f8bf9b..0000000000 --- a/wallet/how-to/use-non-evm-networks/starknet-snap/connect-to-starknet.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -description: Connect -sidebar_position: 1 ---- - -# Connect \ No newline at end of file diff --git a/wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-account.md b/wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-account.md deleted file mode 100644 index d21fc517a4..0000000000 --- a/wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-account.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -description: Manage -sidebar_position: 2 ---- - -# Manage \ No newline at end of file diff --git a/wallet/how-to/use-non-evm-networks/starknet-snap/send-transactions.md b/wallet/how-to/use-non-evm-networks/starknet-snap/send-transactions.md deleted file mode 100644 index 82f7813644..0000000000 --- a/wallet/how-to/use-non-evm-networks/starknet-snap/send-transactions.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -description: Send -sidebar_position: 4 ---- - -# Send transactions diff --git a/wallet/how-to/use-non-evm-networks/starknet-snap/troubleshoot.md b/wallet/how-to/use-non-evm-networks/starknet-snap/troubleshoot.md deleted file mode 100644 index 0c8c0be5f2..0000000000 --- a/wallet/how-to/use-non-evm-networks/starknet-snap/troubleshoot.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -description: Troubleshoot -sidebar_position: 5 ---- - 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 new file mode 100644 index 0000000000..1de0cf4572 --- /dev/null +++ b/wallet/how-to/use-non-evm-networks/starknet/connect-to-starknet.md @@ -0,0 +1,6 @@ +--- +description: Connect to the Starknet network in MetaMask. +sidebar_position: 1 +--- + +# Connect to 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 new file mode 100644 index 0000000000..9cde5313ec --- /dev/null +++ b/wallet/how-to/use-non-evm-networks/starknet/index.md @@ -0,0 +1,8 @@ +--- +description: Interact with users' Starknet accounts in MetaMask. +sidebar_position: 1 +--- + +# Starknet + +You can interact with users' Starknet accounts in MetaMask by installing the Starknet Snap. \ No newline at end of file diff --git a/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-accounts.md b/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-accounts.md new file mode 100644 index 0000000000..aef0fdad63 --- /dev/null +++ b/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-accounts.md @@ -0,0 +1,6 @@ +--- +description: Manage Starknet accounts in MetaMask. +sidebar_position: 2 +--- + +# Manage Starknet accounts \ No newline at end of file diff --git a/wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-networks.md b/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-networks.md similarity index 52% rename from wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-networks.md rename to wallet/how-to/use-non-evm-networks/starknet/manage-starknet-networks.md index f7f51069ec..16988c3bb9 100644 --- a/wallet/how-to/use-non-evm-networks/starknet-snap/manage-starknet-networks.md +++ b/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-networks.md @@ -1,5 +1,5 @@ --- -description: Manage +description: Manage Starknet networks in MetaMask. sidebar_position: 3 --- diff --git a/wallet/how-to/use-non-evm-networks/starknet/send-starknet-transactions.md b/wallet/how-to/use-non-evm-networks/starknet/send-starknet-transactions.md new file mode 100644 index 0000000000..9159a38563 --- /dev/null +++ b/wallet/how-to/use-non-evm-networks/starknet/send-starknet-transactions.md @@ -0,0 +1,6 @@ +--- +description: Send Starknet transactions in MetaMask. +sidebar_position: 4 +--- + +# Send Starknet transactions diff --git a/wallet/how-to/use-non-evm-networks/starknet/sign-starknet-data.md b/wallet/how-to/use-non-evm-networks/starknet/sign-starknet-data.md new file mode 100644 index 0000000000..2515fc0d56 --- /dev/null +++ b/wallet/how-to/use-non-evm-networks/starknet/sign-starknet-data.md @@ -0,0 +1,6 @@ +--- +description: Sign Starknet data in MetaMask. +sidebar_position: 5 +--- + +# Sign Starknet data \ No newline at end of file diff --git a/wallet/how-to/use-non-evm-networks/starknet/troubleshoot.md b/wallet/how-to/use-non-evm-networks/starknet/troubleshoot.md new file mode 100644 index 0000000000..e7318bf4ae --- /dev/null +++ b/wallet/how-to/use-non-evm-networks/starknet/troubleshoot.md @@ -0,0 +1,6 @@ +--- +description: Troubleshoot common Starknet issues. +sidebar_position: 6 +--- + +# Troubleshoot diff --git a/wallet/reference/non-evm-apis/starknet-snap-api.md b/wallet/reference/non-evm-apis/starknet-snap-api.md index d640efac09..65478369dc 100644 --- a/wallet/reference/non-evm-apis/starknet-snap-api.md +++ b/wallet/reference/non-evm-apis/starknet-snap-api.md @@ -9,8 +9,8 @@ import TabItem from "@theme/TabItem"; # Starknet Snap API -With the [Starknet Snap] installed, dapps can use the Starknet Snap API to interact with users' -Starknet accounts. +With the [Starknet Snap](../../how-to/use-non-evm-networks/starknet/index.md) installed, dapps can +use the Starknet Snap API to interact with users' Starknet accounts (for example, to send transactions). :::note You can also communicate with the Starknet network using the From c27a96d364cd9eebee5c1823d94c9b957991345d Mon Sep 17 00:00:00 2001 From: Joan E <153745173+joaniefromtheblock@users.noreply.github.com> Date: Thu, 12 Sep 2024 18:16:39 +0000 Subject: [PATCH 05/35] add changes for connect --- wallet/how-to/use-non-evm-networks/index.md | 13 +++ .../starknet-snap/connect-to-starknet.md | 85 ++++++++++++++++++- .../starknet-snap/index.md | 9 ++ 3 files changed, 105 insertions(+), 2 deletions(-) create mode 100644 wallet/how-to/use-non-evm-networks/index.md create mode 100644 wallet/how-to/use-non-evm-networks/starknet-snap/index.md diff --git a/wallet/how-to/use-non-evm-networks/index.md b/wallet/how-to/use-non-evm-networks/index.md new file mode 100644 index 0000000000..df07143805 --- /dev/null +++ b/wallet/how-to/use-non-evm-networks/index.md @@ -0,0 +1,13 @@ +--- +description: Interact with users' accounts on non-EVM networks +--- + +# Use non-EVM networks +You can connect to non-EVM networks and interact with users' accounts on these networks using MetaMask Snaps. + +## Non-EVM networks + +Non-EVM networks are blockchain networks that are not compatible with the Ethereum Virtual Machine (EVM). + +Non-EVM dapps and MetaMask can't directly interact with each other. +By connecting to dedicated non-EVM Snaps, you can extend the functionality of MetaMask and integrate non-EVM networks into your existing MetaMask workflow. diff --git a/wallet/how-to/use-non-evm-networks/starknet-snap/connect-to-starknet.md b/wallet/how-to/use-non-evm-networks/starknet-snap/connect-to-starknet.md index 07e5f8bf9b..b7257176e3 100644 --- a/wallet/how-to/use-non-evm-networks/starknet-snap/connect-to-starknet.md +++ b/wallet/how-to/use-non-evm-networks/starknet-snap/connect-to-starknet.md @@ -1,6 +1,87 @@ --- -description: Connect +description: Connect your Starknet account to MetaMask sidebar_position: 1 --- -# Connect \ No newline at end of file +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; + +# Connect your Starknet account to MetaMask + +To connect your dapp to the Starknet network in MetaMask, you can use the `get-starknet` library. +This library simplifies the process of connecting to the Starknet Snap, allowing you to interact with users' Starknet accounts in MetaMask. +`get-starknet` also enables dapps to interact with other wallets in the Starknet ecosystem. + +## 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/) + - A JavaScript or TypeScript project set up + + ## Add `get-starknet` to your project + + Add both the [`get-starknet`](https://github.com/MetaMask/snaps/tree/main/packages/create-snap) library and the latest version of the `starknet.js` library to your project's dependencies: + + - [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/) + - A JavaScript or TypeScript project set up + + +## Connect using `get-starknet` + +### 1. Add `get-starknet` to your project + +Add the [`get-starknet`](https://github.com/MetaMask/snaps/tree/main/packages/create-snap) library and the latest version of the `starknet.js` library to your project's dependencies: + + + + + ```bash + yarn add get-starknet starknet@next + ``` + + + + + + ```bash + npm install get-starknet starknet@next + ``` + + + + + +### 2. Start the Snap + +From the root of the created project, install the project dependencies: + + + + + ```bash + yarn start + ``` + + + + + + ```bash + npm start + ``` + + + + + + ### 3. Connect to the Snap + +On the dapp, select **Connect**. The MetaMask extension displays and prompts you to approve the Snap's permissions. + +After it is connected, select **Send message** to display a custom message within a confirmation +dialog in MetaMask. \ No newline at end of file diff --git a/wallet/how-to/use-non-evm-networks/starknet-snap/index.md b/wallet/how-to/use-non-evm-networks/starknet-snap/index.md new file mode 100644 index 0000000000..e7137bcd66 --- /dev/null +++ b/wallet/how-to/use-non-evm-networks/starknet-snap/index.md @@ -0,0 +1,9 @@ +--- + sidebar_position: 1 + sidebar_label: Starknet + description: Learn about how Starknet Snap connects to MetaMask using `get-starknet`. + tags: + - Snaps + - non-EVM +--- + From 473a71d83ff0d3dcf0b331e29ced5290d3c15f69 Mon Sep 17 00:00:00 2001 From: Joan E <153745173+joaniefromtheblock@users.noreply.github.com> Date: Thu, 12 Sep 2024 20:48:46 +0000 Subject: [PATCH 06/35] examples added --- wallet/how-to/use-non-evm-networks/index.md | 14 ++ .../starknet-snap/connect-to-starknet.md | 87 ------- .../starknet/connect-to-starknet.md | 220 +++++++++++++++++- .../use-non-evm-networks/starknet/index.md | 82 ++++++- .../starknet/manage-starknet-accounts.md | 63 ++++- .../starknet/manage-starknet-networks.md | 39 +++- .../starknet/send-starknet-transactions.md | 60 +++++ 7 files changed, 472 insertions(+), 93 deletions(-) delete mode 100644 wallet/how-to/use-non-evm-networks/starknet-snap/connect-to-starknet.md diff --git a/wallet/how-to/use-non-evm-networks/index.md b/wallet/how-to/use-non-evm-networks/index.md index df07143805..5e38b28df6 100644 --- a/wallet/how-to/use-non-evm-networks/index.md +++ b/wallet/how-to/use-non-evm-networks/index.md @@ -11,3 +11,17 @@ Non-EVM networks are blockchain networks that are not compatible with the Ethere Non-EVM dapps and MetaMask can't directly interact with each other. By connecting to dedicated non-EVM Snaps, you can extend the functionality of MetaMask and integrate non-EVM networks into your existing MetaMask workflow. + +
+
+
+

πŸ’» Starknet

+
+
+ +
+
+
diff --git a/wallet/how-to/use-non-evm-networks/starknet-snap/connect-to-starknet.md b/wallet/how-to/use-non-evm-networks/starknet-snap/connect-to-starknet.md deleted file mode 100644 index b7257176e3..0000000000 --- a/wallet/how-to/use-non-evm-networks/starknet-snap/connect-to-starknet.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -description: Connect your Starknet account to MetaMask -sidebar_position: 1 ---- - -import Tabs from "@theme/Tabs"; -import TabItem from "@theme/TabItem"; - -# Connect your Starknet account to MetaMask - -To connect your dapp to the Starknet network in MetaMask, you can use the `get-starknet` library. -This library simplifies the process of connecting to the Starknet Snap, allowing you to interact with users' Starknet accounts in MetaMask. -`get-starknet` also enables dapps to interact with other wallets in the Starknet ecosystem. - -## 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/) - - A JavaScript or TypeScript project set up - - ## Add `get-starknet` to your project - - Add both the [`get-starknet`](https://github.com/MetaMask/snaps/tree/main/packages/create-snap) library and the latest version of the `starknet.js` library to your project's dependencies: - - - [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/) - - A JavaScript or TypeScript project set up - - -## Connect using `get-starknet` - -### 1. Add `get-starknet` to your project - -Add the [`get-starknet`](https://github.com/MetaMask/snaps/tree/main/packages/create-snap) library and the latest version of the `starknet.js` library to your project's dependencies: - - - - - ```bash - yarn add get-starknet starknet@next - ``` - - - - - - ```bash - npm install get-starknet starknet@next - ``` - - - - - -### 2. Start the Snap - -From the root of the created project, install the project dependencies: - - - - - ```bash - yarn start - ``` - - - - - - ```bash - npm start - ``` - - - - - - ### 3. Connect to the Snap - -On the dapp, select **Connect**. The MetaMask extension displays and prompts you to approve the Snap's permissions. - -After it is connected, select **Send message** to display a custom message within a confirmation -dialog in MetaMask. \ No newline at end of file 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 1de0cf4572..451b651b51 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 @@ -1,6 +1,222 @@ --- -description: Connect to the Starknet network in MetaMask. +description: Connect your Starknet account to MetaMask sidebar_position: 1 --- -# Connect to Starknet \ No newline at end of file +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; + +# Connect your Starknet account to MetaMask + +To connect your dapp to the Starknet network in MetaMask, you can use the `get-starknet` library. +This library simplifies the process of connecting to the Starknet Snap, allowing you to interact with users' Starknet accounts in MetaMask. +`get-starknet` also enables dapps to interact with other wallets in the Starknet ecosystem. + +## 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/) + - A JavaScript or TypeScript project set up + +## Connect using `get-starknet` + +### 1. Add `get-starknet` to your project + +Add the [`get-starknet`](https://github.com/MetaMask/snaps/tree/main/packages/create-snap) library and the latest version of the `starknet.js` library to your project's dependencies: + + + + + ```bash + yarn add get-starknet starknet@next + ``` + + + + + + ```bash + npm install get-starknet starknet@next + ``` + + + + +### 2. Start the Snap + +From the root of the created project, install the project dependencies: + + + + + ```bash + yarn start + ``` + + + + + + ```bash + npm start + ``` + + + + + +### 3. Connect to the Snap + +On the dapp, select **Connect**. The MetaMask extension displays and prompts you to approve the Snap's permissions. + +After it is connected, select **Send message** to display a custom message within a confirmation +dialog in MetaMask. + +## Connect using `wallet_invokeSnap` + +### 1. Install dependencies + +Alternatively, you can manage the Snap invocation manually. +If you are developing for the Starknet network, you'll use the `Starknet.js` library in your project. +Navigate to your project directory and run the following command: + + + + + ```bash + yarn add get starknet@next + ``` + + + + + + ```bash + npm install starknet@next + ``` + + + + +### 2. Install the Starknet Snap + +To connect to Starknet, ensure the Starknet Snap is installed in MetaMask. + +### 3. Connect to Starknet using `wallet_invokeSnap` + +Allow users to interact with MetaMask using the `wallet_invokeSnap` method. Add the following code to your project: + +```javascript title="index.js" +// Function to request Starknet account +const connectStarknetSnap = async () => { + try { + const snapId = 'npm:starknet-snap'; + + const requestParams = { + method: 'wallet_invokeSnap', + params: { + snapId: snapId, + request: { + method: 'starknet_getAccount', // Method to get the Starknet account + params: {} + } + } + }; + + // Request the Starknet account from MetaMask using Snap + const account = await ethereum.request(requestParams); + console.log('Starknet Account:', account); + + return account; + } catch (error) { + console.error('Error connecting to Starknet Snap:', error); + } +}; +``` + +### 4. Trigger the connection from the dapp + +To allow users to connect their Starknet accounts to MetaMask, assign the `connectStarknetSnap` function to a button or event. +Create a button that, when clicked, connects the Starknet Snap. + +#### Example HTML and JavaScript (Vanilla JS) + +```html + + + + + + Connect Starknet Snap + + + +

+ + + + +``` + +#### Example React component + +```javascript +import React, { useState } from 'react'; + +const ConnectWallet = () => { + const [account, setAccount] = useState(null); + + const connectStarknetSnap = async () => { + try { + const snapId = 'npm:starknet-snap'; // Snap ID + const requestParams = { + method: 'wallet_invokeSnap', + params: { + snapId: snapId, + request: { + method: 'starknet_getAccount', + params: {} + } + } + }; + + const account = await window.ethereum.request(requestParams); + setAccount(account); + } catch (error) { + console.error('Error connecting to Starknet Snap:', error); + } + }; + + return ( +
+ + {account &&

Connected Account: {account}

} +
+ ); +}; + +export default ConnectWallet; +``` \ 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 404203ccfb..35cef5843c 100644 --- a/wallet/how-to/use-non-evm-networks/starknet/index.md +++ b/wallet/how-to/use-non-evm-networks/starknet/index.md @@ -3,6 +3,84 @@ description: Interact with users' Starknet accounts in MetaMask. sidebar_position: 1 --- -# Starknet +# Use Starknet -You can interact with users' Starknet accounts in MetaMask by installing the Starknet Snap. +Starknet is a Layer 2 network built on Ethereum. To interact with Starknet accounts in MetaMask, which is a non-EVM network, you need to use the Starknet Snap. + +You can use `wallet_invokeSnap` or `get-starknet` to integrate with Starknet dapps. +The choice depends on your specific use case and development preferences. + +| Feature | `wallet_invokeSnap` | `get-starknet` | +|---------|---------------------|----------------| +| API Level | Low-level access to Starknet Snap methods | High-level abstractions for Starknet operations | +| Wallet Support | MetaMask only | Multiple Starknet-compatible wallets | +| Functionality | Limited to Snap-implemented methods | Comprehensive toolkit for Starknet dapp development | +| Multi-wallet Sync | No | Yes | +| Code Portability | Low, tied to MetaMask | High, works across multiple wallet implementations | + +Both methods enable developers to connect Starknet dapps with wallet solutions, but the key differences are the following: + +- With `wallet_invokeSnap`, you must know the exact method names and parameter structures for interacting with the Starknet Snap. Additionally, you must handle both MetaMask-specific and Starknet-specific errors. Since `wallet_invokeSnap` is designed specifically for MetaMask, it operates within the framework of MetaMask interactions. + +- `get-starknet` provides a high-level, intuitive API that abstracts complex operations and manages wallet connections. It offers multi-wallet support, standardized error handling, and more readable code compared to direct Snap invocation so you are not required to manage lower-level Starknet interactions. + +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 Snap technologies. + +## About `get-starknet` + +`get-starknet` is a library that simplifies Starknet network interactions. +`get-starknet` works with the Starknet Snap to extend the functionality of MetaMask and enable dapps to interact with users' Starknet accounts in MetaMask. +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 structured way to manage 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. + +### How `get-starknet` and MetaMask interact + +A dapp with `get-starknet` installed interacts with MetaMask as follows: + +1. The dapp uses `get-starknet` to request the user connect to MetaMask. If the user doesn't have the Starknet Snap installed, MetaMask prompts the user to connect and approve the installation. + +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` instance. + + This instance manages the Starknet account within MetaMask. + + With this setup, `get-starknet` enables the dapp to use Starknet features through MetaMask with the following capabilities: + + - `WalletAccount` uses a specified provider to read data from the Starknet network. + - For transactions, `get-starknet` prepares the transaction data and sends it to MetaMask for signing through the Starknet Snap. + - `get-starknet` allows the dapp to create contract instances connected to the `WalletAccount`. These instances can invoke smart contract functions, with MetaMask handling the necessary signatures. + - `get-starknet` sets up listeners for account and network changes within MetaMask. + The dapp can subscribe to these events to update its state accordingly. + - `get-starknet` can request network changes through MetaMask, and allows users to switch between different Starknet networks (for example Mainnet, testnet). + - `get-starknet` can request MetaMask to display specific tokens in its interface, enhancing user experience. + +```mermaid +sequenceDiagram + participant dapp as dapp + participant get as get-starknet + participant mm as MetaMask + participant Snap as Starknet Snap + participant network as Starknet Network + dapp->>get: Initialize connection + get->>mm: Request connection + mm->>Snap: Activate (if needed) + Snap-->>mm: Activated + mm-->>get: Return SWO + get->>get: Create WalletAccount + get-->>dapp: Connection established + 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 + mm->>get: Account/Network changed + get->>dapp: Notify change +``` \ No newline at end of file diff --git a/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-accounts.md b/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-accounts.md index aef0fdad63..d0a1b81de3 100644 --- a/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-accounts.md +++ b/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-accounts.md @@ -3,4 +3,65 @@ description: Manage Starknet accounts in MetaMask. sidebar_position: 2 --- -# Manage Starknet accounts \ No newline at end of file +# Manage Starknet accounts + +## View account information + +After a user connects, you can display the account details, such as the account address: + +```javascript +const showAccountInfo = async () => { + const account = await connectStarknetAccount(); + if (account) { + document.getElementById('accountAddress').innerText = `Account Address: ${account}`; + } +}; +``` + +## Switch between accounts + +With the `get-starknet` library, you can allow users to switch accounts by re-enabling the wallet. +MetaMask will prompt the user to select a different account if multiple accounts are available. + +```javascript +const switchStarknetAccount = async () => { + try { + const starknet = getStarknet(); + await starknet.enable(); // Prompts the user to select an account + const account = starknet.selectedAddress; + console.log('Switched to Starknet Account:', account); + + return account; + } catch (error) { + console.error('Error switching Starknet account:', error); + } +}; +``` + +## Manage account transactions + +You can manage transactions with `get-starknet`: + +```javascript + +const invokeStarknetContract = async () => { + try { + const starknet = getStarknet(); + await starknet.enable(); // Make sure the wallet is enabled + + const contractAddress = '0xYourContractAddress'; // Replace with your contract address + const entrypoint = 'function_name'; // The function you want to call + const calldata = [/* your function arguments */]; // Replace with calldata + + const result = await starknet.invoke({ + contractAddress: contractAddress, + entrypoint: entrypoint, + calldata: calldata + }); + + console.log('Transaction result:', result); + } catch (error) { + console.error('Error invoking contract:', error); + } +}; +``` \ No newline at end of file diff --git a/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-networks.md b/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-networks.md index 16988c3bb9..f5e3ad85c8 100644 --- a/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-networks.md +++ b/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-networks.md @@ -4,4 +4,41 @@ sidebar_position: 3 --- # Manage Starknet networks - \ No newline at end of file + +## Switch between networks + +Allow users to switch between different Starknet networks, such as mainnet and testnet. This function enables switching by setting the appropriate network RPC URL. + +```javascript +const switchNetwork = async (network) => { + try { + const starknet = getStarknet(); + + // Example network URLs + const networks = { + mainnet: 'https://mainnet.starknet.io', + testnet: 'https://sepolia.starknet.io' + }; + + // Set the provider based on the selected network + starknet.setProvider({ rpcUrl: networks[network] }); + + console.log(`Switched to ${network}:`, starknet.provider); + } catch (error) { + console.error('Error switching network:', error); + } +}; +``` + +### Check the current network + +Confirm that the dapp is connected to the correct network: + +```javascript +const checkCurrentNetwork = () => { + const starknet = getStarknet(); + const currentNetwork = starknet.provider.rpcUrl; + console.log('Currently connected to:', currentNetwork); + return currentNetwork; +}; +``` \ No newline at end of file diff --git a/wallet/how-to/use-non-evm-networks/starknet/send-starknet-transactions.md b/wallet/how-to/use-non-evm-networks/starknet/send-starknet-transactions.md index 9159a38563..ec03109de5 100644 --- a/wallet/how-to/use-non-evm-networks/starknet/send-starknet-transactions.md +++ b/wallet/how-to/use-non-evm-networks/starknet/send-starknet-transactions.md @@ -4,3 +4,63 @@ sidebar_position: 4 --- # Send Starknet transactions + +After the account is connected, you can send a transaction using the `starknet.invoke()` function: + +```javascript +const sendStarknetTransaction = async (contractAddress, entrypoint, calldata) => { + try { + const starknet = await connectStarknetAccount(); // Ensure the account is connected + + // Send the transaction + const result = await starknet.invoke({ + contractAddress: contractAddress, // The address of the contract + entrypoint: entrypoint, // The function to call in the contract + calldata: calldata // The parameters to pass to the function + }); + + console.log('Transaction successful:', result); + return result; + } catch (error) { + console.error('Error sending transaction:', error); + } +}; +``` + +## Simplified Example + +```javascript + +import { getStarknet } from 'get-starknet'; + +const connectStarknetAccount = async () => { + const starknet = getStarknet(); + await starknet.enable(); // Prompts the user to connect their Starknet account via MetaMask + return starknet; +}; + +const sendStarknetTransaction = async (contractAddress, entrypoint, calldata) => { + try { + const starknet = await connectStarknetAccount(); // Ensure the account is connected + + // Send the transaction + const result = await starknet.invoke({ + contractAddress: contractAddress, + entrypoint: entrypoint, + calldata: calldata + }); + + console.log('Transaction successful:', result); + return result; + } catch (error) { + console.error('Error sending transaction:', error); + } +}; + +// Example Usage +const contractAddress = '0xYourContractAddress'; +const entrypoint = 'your_function_name'; +const calldata = [/* your function arguments */]; + +sendStarknetTransaction(contractAddress, entrypoint, calldata); +``` \ No newline at end of file From 25821bb82dcca18b2111001e1086b9724e8c7c74 Mon Sep 17 00:00:00 2001 From: Joan E <153745173+joaniefromtheblock@users.noreply.github.com> Date: Sat, 14 Sep 2024 00:05:13 +0000 Subject: [PATCH 07/35] rewrite of connect section --- .../use-non-evm-networks/_category_.json | 5 +- wallet/how-to/use-non-evm-networks/index.md | 30 ++- .../starknet/_category_.json | 9 + .../starknet/connect-to-starknet.md | 86 ++++++--- .../use-non-evm-networks/starknet/index.md | 68 ++++--- .../starknet/manage-starknet-accounts.md | 173 +++++++++++++++++- 6 files changed, 302 insertions(+), 69 deletions(-) create mode 100644 wallet/how-to/use-non-evm-networks/starknet/_category_.json diff --git a/wallet/how-to/use-non-evm-networks/_category_.json b/wallet/how-to/use-non-evm-networks/_category_.json index acf2bb0e42..6a40514d41 100644 --- a/wallet/how-to/use-non-evm-networks/_category_.json +++ b/wallet/how-to/use-non-evm-networks/_category_.json @@ -2,8 +2,7 @@ "label": "Use non-EVM networks", "position": 9, "link": { - "type": "generated-index", - "slug": "how-to/use-non-evm-networks", - "description": "You can interact with users' accounts on non-EVM networks in MetaMask." + "type": "doc", + "id": "how-to/use-non-evm-networks/index" } } diff --git a/wallet/how-to/use-non-evm-networks/index.md b/wallet/how-to/use-non-evm-networks/index.md index 5e38b28df6..f335a88036 100644 --- a/wallet/how-to/use-non-evm-networks/index.md +++ b/wallet/how-to/use-non-evm-networks/index.md @@ -2,26 +2,24 @@ description: Interact with users' accounts on non-EVM networks --- +import CardList from "@site/src/components/CardList" + # Use non-EVM networks -You can connect to non-EVM networks and interact with users' accounts on these networks using MetaMask Snaps. -## Non-EVM networks +You can connect to non-EVM networks and interact with users' accounts on these networks using [MetaMask Snaps](../../../snaps). -Non-EVM networks are blockchain networks that are not compatible with the Ethereum Virtual Machine (EVM). +[Non-EVM networks](../../../snaps/features/non-evm-networks/) are blockchain networks that are not compatible with the Ethereum Virtual Machine (EVM). Non-EVM dapps and MetaMask can't directly interact with each other. By connecting to dedicated non-EVM Snaps, you can extend the functionality of MetaMask and integrate non-EVM networks into your existing MetaMask workflow. -
-
-
-

πŸ’» Starknet

-
-
- -
-
-
+ diff --git a/wallet/how-to/use-non-evm-networks/starknet/_category_.json b/wallet/how-to/use-non-evm-networks/starknet/_category_.json new file mode 100644 index 0000000000..20f92141a9 --- /dev/null +++ b/wallet/how-to/use-non-evm-networks/starknet/_category_.json @@ -0,0 +1,9 @@ +{ + "label": "Starknet", + "collapsible": true, + "collapsed": true, + "link": { + "type": "doc", + "id": "how-to/use-non-evm-networks/starknet/index" + } +} \ No newline at end of file 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 451b651b51..6aba69d221 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 @@ -44,9 +44,59 @@ Add the [`get-starknet`](https://github.com/MetaMask/snaps/tree/main/packages/cr -### 2. Start the Snap +### 2. Connect to the Snap -From the root of the created project, install the project dependencies: +In the src/components folder of your project, add the code to connect to Starknet Snap using the `get-starknet` library, and include a button for users to initiate the wallet connection. + +```javascript +import React, { useState } from 'react'; +import { connect } from 'get-starknet'; + +function WalletConnectButton() { + const [walletAddress, setWalletAddress] = useState(""); + const [walletName, setWalletName] = useState(""); + + const handleConnect = async () => { + const wallet = await connect({ + include: ['snap'], // Ensure the Snap is included for connection + }); + + if (wallet) { + setWalletAddress(wallet.account.address); + setWalletName(wallet.name); + } else { + console.log("No wallet connected"); + } + }; + + return ( +
+ + + {walletAddress && ( +
+

Wallet Name: {walletName}

+

Wallet Address: {walletAddress}

+
+ )} +
+ ); +} + +export default WalletConnectButton; +``` + +:::note + +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. + +::: + +### 3. Start the dapp + +Start the dapp, which allow users to click **Connect Wallet** and interact with the Starknet network using MetaMask: @@ -64,23 +114,15 @@ From the root of the created project, install the project dependencies: ``` - -### 3. Connect to the Snap - -On the dapp, select **Connect**. The MetaMask extension displays and prompts you to approve the Snap's permissions. - -After it is connected, select **Send message** to display a custom message within a confirmation -dialog in MetaMask. - ## Connect using `wallet_invokeSnap` ### 1. Install dependencies Alternatively, you can manage the Snap invocation manually. -If you are developing for the Starknet network, you'll use the `Starknet.js` library in your project. -Navigate to your project directory and run the following command: +For the Starknet network use the `Starknet.js` library in your project. +Navigate to your project directory and run the following command to add the latest Starknet library: @@ -100,15 +142,17 @@ Navigate to your project directory and run the following command: -### 2. Install the Starknet Snap +:::note + + 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. -To connect to Starknet, ensure the Starknet Snap is installed in MetaMask. + ::: -### 3. Connect to Starknet using `wallet_invokeSnap` +### 2. Connect to Starknet using `wallet_invokeSnap` -Allow users to interact with MetaMask using the `wallet_invokeSnap` method. Add the following code to your project: +Use the `wallet_invokeSnap` method to directly interact with the Starknet Snap. Add the following code to your project: -```javascript title="index.js" +```javascript title="app.js" // Function to request Starknet account const connectStarknetSnap = async () => { try { @@ -136,12 +180,12 @@ const connectStarknetSnap = async () => { }; ``` -### 4. Trigger the connection from the dapp +### 3. Trigger the connection from the dapp To allow users to connect their Starknet accounts to MetaMask, assign the `connectStarknetSnap` function to a button or event. Create a button that, when clicked, connects the Starknet Snap. -#### Example HTML and JavaScript (Vanilla JS) +#### Example in HTML and JavaScript (Vanilla JS) ```html @@ -181,7 +225,7 @@ Create a button that, when clicked, connects the Starknet Snap. ``` -#### Example React component +#### Example in a React component ```javascript import React, { useState } from 'react'; @@ -219,4 +263,4 @@ const ConnectWallet = () => { }; export default ConnectWallet; -``` \ 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 35cef5843c..5e1ef0dfd5 100644 --- a/wallet/how-to/use-non-evm-networks/starknet/index.md +++ b/wallet/how-to/use-non-evm-networks/starknet/index.md @@ -10,27 +10,38 @@ Starknet is a Layer 2 network built on Ethereum. To interact with Starknet accou You can use `wallet_invokeSnap` or `get-starknet` to integrate with Starknet dapps. The choice depends on your specific use case and development preferences. -| Feature | `wallet_invokeSnap` | `get-starknet` | -|---------|---------------------|----------------| -| API Level | Low-level access to Starknet Snap methods | High-level abstractions for Starknet operations | -| Wallet Support | MetaMask only | Multiple Starknet-compatible wallets | -| Functionality | Limited to Snap-implemented methods | Comprehensive toolkit for Starknet dapp development | -| Multi-wallet Sync | No | Yes | -| Code Portability | Low, tied to MetaMask | High, works across multiple wallet implementations | +Both methods enable developers to connect Starknet dapps with wallet solutions. -Both methods enable developers to connect Starknet dapps with wallet solutions, but the key differences are the following: +`wallet_invokeSnap`: +- Requires precise method names and parameter structures. +- Handles both MetaMask-specific and Starknet-specific errors. +- Designed for operating within the MetaMask framework. +- Manages lower-level StarkNet interactions directly. +- Results are in more detailed, lower-level code. -- With `wallet_invokeSnap`, you must know the exact method names and parameter structures for interacting with the Starknet Snap. Additionally, you must handle both MetaMask-specific and Starknet-specific errors. Since `wallet_invokeSnap` is designed specifically for MetaMask, it operates within the framework of MetaMask interactions. +`get-starknet`: +- Provides a high-level API that abstracts complex operations. +- Offers standardized error handling. +- Supports multiple wallets, not limited to MetaMask. +- Manages wallet connections and Starknet interactions. +- Results are in more readable code. -- `get-starknet` provides a high-level, intuitive API that abstracts complex operations and manages wallet connections. It offers multi-wallet support, standardized error handling, and more readable code compared to direct Snap invocation so you are not required to manage lower-level Starknet interactions. +:::note + +The `get-starknet` method is recommended for simplified integration with the non-EVM Starknet network. + +::: + +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. -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 Snap technologies. ## About `get-starknet` `get-starknet` is a library that simplifies Starknet network interactions. -`get-starknet` works with the Starknet Snap to extend the functionality of MetaMask and enable dapps to interact with users' Starknet accounts in MetaMask. -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 structured way to manage Starknet interactions. +It works with the Starknet Snap to extend the functionality of MetaMask and enable dapps to interact with users' Starknet accounts in MetaMask. + +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. + 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. ### How `get-starknet` and MetaMask interact @@ -41,19 +52,7 @@ 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` instance. - - This instance manages the Starknet account within MetaMask. - - With this setup, `get-starknet` enables the dapp to use Starknet features through MetaMask with the following capabilities: - - - `WalletAccount` uses a specified provider to read data from the Starknet network. - - For transactions, `get-starknet` prepares the transaction data and sends it to MetaMask for signing through the Starknet Snap. - - `get-starknet` allows the dapp to create contract instances connected to the `WalletAccount`. These instances can invoke smart contract functions, with MetaMask handling the necessary signatures. - - `get-starknet` sets up listeners for account and network changes within MetaMask. - The dapp can subscribe to these events to update its state accordingly. - - `get-starknet` can request network changes through MetaMask, and allows users to switch between different Starknet networks (for example Mainnet, testnet). - - `get-starknet` can request MetaMask to display specific tokens in its interface, enhancing user experience. +1. `get-starknet` creates a [`WalletAccount`](http://starknetjs.com/docs/guides/walletAccount/) instance. This instance manages the Starknet account within MetaMask. ```mermaid sequenceDiagram @@ -62,17 +61,20 @@ sequenceDiagram participant mm as MetaMask participant Snap as Starknet Snap participant network as Starknet Network + dapp->>get: Initialize connection get->>mm: Request connection - mm->>Snap: Activate (if needed) + mm->>Snap: Activate Snap-->>mm: Activated mm-->>get: Return SWO get->>get: Create WalletAccount get-->>dapp: Connection established + 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 @@ -81,6 +83,16 @@ sequenceDiagram get->>network: Submit transaction network-->>get: Transaction result get-->>dapp: Transaction confirmation + mm->>get: Account/Network changed get->>dapp: Notify change -``` \ No newline at end of file +``` + +The `get-starknet` library offers several key features that streamline how dapps interact with the StarkNet network through MetaMask." + +- The `WalletAccount` uses a specified provider to access data from the StarkNet network. +- For transactions, `get-starknet` prepares the data and sends it to MetaMask for signing via StarkNet Snap. +- `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. +- It sets up listeners for account and network changes in MetaMask, so the dapp can subscribe and update its state accordingly. +- `get-starknet` can request network changes through MetaMask, allowing users to switch between StarkNet networks, such as Mainnet or Sepolia testnet. +- It can also request MetaMask to display specific tokens, improving the user experience. \ No newline at end of file diff --git a/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-accounts.md b/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-accounts.md index d0a1b81de3..49cea12925 100644 --- a/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-accounts.md +++ b/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-accounts.md @@ -64,4 +64,175 @@ const invokeStarknetContract = async () => { console.error('Error invoking contract:', error); } }; -``` \ No newline at end of file +``` + +# Comprehensive Guide to Managing Starknet Accounts + +## 1. Retrieving and Displaying Connected Starknet Accounts + +To retrieve and display connected Starknet accounts, you'll typically use the `get-starknet` library in combination with React hooks for state management. + +```typescript +import { useStarknet, useConnectors } from '@starknet-react/core'; +import { useState, useEffect } from 'react'; + +function AccountDisplay() { + const { account } = useStarknet(); + const { available, connect, disconnect } = useConnectors(); + const [accountAddress, setAccountAddress] = useState(); + + useEffect(() => { + setAccountAddress(account?.address); + }, [account]); + + return ( +
+ {accountAddress ? ( +

Connected Account: {accountAddress}

+ ) : ( +

No account connected

+ )} + {available.map((connector) => ( + + ))} + {account && ( + + )} +
+ ); +} +``` + +This component will display the connected account address if available, and provide buttons to connect or disconnect accounts. + +## 2. Switching Between Multiple Starknet Accounts + +Starknet doesn't natively support account switching like Ethereum. Instead, users typically have to disconnect and reconnect with a different account. However, you can implement a user-friendly interface to manage this process: + +```typescript +import { useStarknet, useConnectors } from '@starknet-react/core'; +import { useState, useEffect } from 'react'; + +function AccountSwitcher() { + const { account } = useStarknet(); + const { available, connect, disconnect } = useConnectors(); + const [connectedAccounts, setConnectedAccounts] = useState([]); + + useEffect(() => { + if (account?.address && !connectedAccounts.includes(account.address)) { + setConnectedAccounts([...connectedAccounts, account.address]); + } + }, [account]); + + const switchAccount = async (connector: any) => { + await disconnect(); + await connect(connector); + }; + + return ( +
+

Connected Accounts:

+
    + {connectedAccounts.map((address) => ( +
  • {address}
    • + ))} +
+

Available Connectors:

+ {available.map((connector) => ( + + ))} +
+ ); +} +``` + +This component keeps track of all connected accounts and allows switching between available connectors. + +## 3. Account Creation Process + +Account creation in Starknet is typically handled by the wallet provider (e.g., ArgentX, Braavos). As a dApp developer, you don't create accounts directly. Instead, you guide users to create an account with their preferred wallet provider. Here's how you might implement a guide for users: + +```typescript +function AccountCreationGuide() { + return ( +
+

Create a Starknet Account

+
    +
  1. Install a Starknet-compatible wallet (e.g., ArgentX, Braavos)
    2. +
  2. Open the wallet and follow its account creation process
    3. +
  3. Once created, return to this dApp and connect your new account
    4. +
+

After creating your account, you can connect it to this dApp.

+
+ ); +} +``` + +## Handling Account Changes and Disconnections + +To handle account changes and disconnections, you can use event listeners provided by get-start. Here's an example using `@starknet-react/core`: + +``` +import { getStarknet } from 'get-starknet'; +import { useEffect, useState } from 'react'; + +function AccountChangeHandler() { + const [account, setAccount] = useState(null); + + useEffect(() => { + const starknet = getStarknet(); + + const handleAccountsChanged = (accounts: string[]) => { + console.log('Accounts changed:', accounts); + setAccount(accounts[0] || null); + // Update your app's state here + }; + + const handleDisconnect = () => { + console.log('Disconnected from wallet'); + setAccount(null); + // Handle disconnection (e.g., reset app state, show connect button) + }; + + if (starknet) { + starknet.on('accountsChanged', handleAccountsChanged); + starknet.on('networkChanged', handleDisconnect); + + // Initial account setup + starknet.enable().then((accounts: string[]) => { + setAccount(accounts[0] || null); + }); + + return () => { + starknet.off('accountsChanged', handleAccountsChanged); + starknet.off('networkChanged', handleDisconnect); + }; + } + }, []); + + return ( +
+ {account ? ( +

Connected Account: {account}

+ ) : ( +

No account connected

+ )} +
+ ); +} + +export default AccountChangeHandler; +``` + +You would typically use this component at the top level of your app to handle account changes globally. + +## Best Practices + +- Always check for account connection status before performing operations. +- Provide clear feedback to users about their connection status. +- Handle disconnections gracefully, resetting relevant app state. +- Use try-catch blocks when interacting with wallet methods to handle potential errors. From 0251bcce6c4b426860155d8dfbbbea35ac8b70f1 Mon Sep 17 00:00:00 2001 From: Joan E <153745173+joaniefromtheblock@users.noreply.github.com> Date: Sat, 14 Sep 2024 00:19:55 +0000 Subject: [PATCH 08/35] rough additions of troubleshoot section --- .../starknet/troubleshoot.md | 102 ++++++++++++++++++ 1 file changed, 102 insertions(+) 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 e7318bf4ae..ae90c39947 100644 --- a/wallet/how-to/use-non-evm-networks/starknet/troubleshoot.md +++ b/wallet/how-to/use-non-evm-networks/starknet/troubleshoot.md @@ -4,3 +4,105 @@ sidebar_position: 6 --- # Troubleshoot + +## 1. Connection issues + +### Wallet connection fails or doesn't respond. + +Ensure that MetaMask is installed and the StarkNet Snap is properly set up. You can check if the Snap is available using: + +```javascript +const availableWallets = getAvailableWallets(); +if (!availableWallets.some(wallet => wallet.type === 'snap')) { + alert('Please install StarkNet Snap in MetaMask to proceed.'); +} +``` + +### The `connect()` function returns null or undefined. + +Verify that the Snap is installed and MetaMask has granted permission for the dapp to connect. Always include error handling in the connect method to manage issues: + +```javascript +try { + const res = await connect(); + if (!res) { + console.log('No wallet connected'); + } +} catch (error) { + console.error('Error connecting to wallet:', error); +} +``` + +## 2. Snap permissions + +### Snap is not properly approved. + +Guide users through the process of approving the Snap in MetaMask. If they deny the connection, provide a retry option. + +### Stale wallet data + +If the wallet address or account information doesn't update after reconnection, always listen for account or network changes and handle them appropriately. Use event listeners: + +```javascript +ethereum.on('accountsChanged', (accounts) => { + // Handle account change +}); +ethereum.on('chainChanged', (chainId) => { + // Handle network change +}); +``` + +### Snap ID error + +Ensure you're using the correct Snap ID for the StarkNet Snap. Incorrect IDs will result in failed connections. + + +## Best practices + +### 1. Graceful error handling + +Provide clear feedback to the user, such as offering a retry option or showing a message that StarkNet Snap needs to be installed. + +```javascript +const handleConnect = async () => { + try { + const res = await connect(); + if (!res) { + console.log('No wallet connected'); + } + } catch (error) { + console.error('Failed to connect to wallet:', error); + alert('An error occurred while connecting to the wallet. Please try again.'); + } +}; +``` + +### 2. Detect and Handle account changes + +Ensure that you detect when the user switches accounts or changes networks. MetaMask emits events like `accountsChanged` and `chainChanged` that you can listen for and handle appropriately. + +```javascript +window.ethereum.on('accountsChanged', (accounts) => { + console.log('Accounts changed:', accounts); + // Update the UI or re-fetch account data +}); + +window.ethereum.on('chainChanged', (chainId) => { + console.log('Network changed:', chainId); + // Handle network change +}); +``` + +### 3. Support for multiple wallets + +`get-starknet` supports connecting to multiple wallets. Provide users with options to select the wallet they want to connect, if applicable. You can specify wallet options when calling connect(). + +```javascript +const handleConnect = async () => { + const options = { + modalMode: 'alwaysAsk', // Force the wallet selection modal to appear + }; + const res = await connect(options); + console.log('Connected to wallet:', res?.name); +}; +``` \ No newline at end of file From 3d8ef910be1427745cd835994a374110294e279b Mon Sep 17 00:00:00 2001 From: Joan E <153745173+joaniefromtheblock@users.noreply.github.com> Date: Wed, 18 Sep 2024 20:55:40 +0000 Subject: [PATCH 09/35] updates with suggestions --- .../starknet/connect-to-starknet.md | 246 +++++++------ .../starknet/manage-starknet-accounts.md | 159 ++------- .../starknet/manage-starknet-networks.md | 33 +- .../starknet/send-starknet-transactions.md | 26 +- .../starknet/troubleshoot.md | 7 +- .../use-non-evm-networks/starknet/tutorial.md | 325 ++++++++++++++++++ .../non-evm-apis/starknet-snap-api.md | 97 ++++-- 7 files changed, 606 insertions(+), 287 deletions(-) create mode 100644 wallet/how-to/use-non-evm-networks/starknet/tutorial.md 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 6aba69d221..ebc0f632bf 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 @@ -18,19 +18,19 @@ This library simplifies the process of connecting to the Starknet Snap, allowing - 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/) - - A JavaScript or TypeScript project set up + - A JavaScript or TypeScript React project set up ## Connect using `get-starknet` ### 1. Add `get-starknet` to your project -Add the [`get-starknet`](https://github.com/MetaMask/snaps/tree/main/packages/create-snap) library and the latest version of the `starknet.js` library to your project's dependencies: +Add the [`get-starknet`](https://github.com/starknet-io/get-starknet) `version 3.3.0` library and the version `6.11.0` of the `starknet.js` library to your project's dependencies: ```bash - yarn add get-starknet starknet@next + yarn add get-starknet@3.3.0 starknet@6.11.0 ``` @@ -38,7 +38,7 @@ Add the [`get-starknet`](https://github.com/MetaMask/snaps/tree/main/packages/cr ```bash - npm install get-starknet starknet@next + npm install get-starknet@3.3.0 starknet@6.11.0 ``` @@ -46,48 +46,62 @@ Add the [`get-starknet`](https://github.com/MetaMask/snaps/tree/main/packages/cr ### 2. Connect to the Snap -In the src/components folder of your project, add the code to connect to Starknet Snap using the `get-starknet` library, and include a button for users to initiate the wallet connection. +Create a new file named `WalletConnectButton.js` in your project's `src/components` folder. Create this folder if it doesn't exist. Add the following code to the file:. ```javascript import React, { useState } from 'react'; -import { connect } from 'get-starknet'; - +import { connect, disconnect } from 'get-starknet'; +import { encode } from "starknet"; function WalletConnectButton() { const [walletAddress, setWalletAddress] = useState(""); const [walletName, setWalletName] = useState(""); - + const [wallet, setWallet] = useState(""); + const handleDisconnect = async () => { + await disconnect({clearLastWallet: true}); + setWallet(""); + setWalletAddress(""); + setWalletName("") + } const handleConnect = async () => { - const wallet = await connect({ - include: ['snap'], // Ensure the Snap is included for connection - }); - - if (wallet) { - setWalletAddress(wallet.account.address); - setWalletName(wallet.name); - } else { - console.log("No wallet connected"); + try{ + const getWallet = await connect({ modalMode: "alwaysAsk", modalTheme: "light" }); + await getWallet?.enable({ starknetVersion: "v5" }); + setWallet(getWallet); + const addr = encode.addHexPrefix(encode.removeHexPrefix(getWallet?.selectedAddress ?? "0x").padStart(64, "0")); + setWalletAddress(addr); + setWalletName(getWallet?.name || "") + } + catch(e){ + // handle user rejection to install metamask / snaps here. + console.log(e) } }; - return (
+ {!walletAddress && ( - + )} {walletAddress && ( +
+

Wallet Name: {walletName}

Wallet Address: {walletAddress}

+
)}
); } - export default WalletConnectButton; ``` +This code handles the connection to Starknet Snap using the `get-starknet` library and includes a button for users to initiate the wallet connection. + :::note 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. @@ -118,29 +132,9 @@ Start the dapp, which allow users to click **Connect Wallet** and interact with ## Connect using `wallet_invokeSnap` -### 1. Install dependencies - -Alternatively, you can manage the Snap invocation manually. -For the Starknet network use the `Starknet.js` library in your project. -Navigate to your project directory and run the following command to add the latest Starknet library: +### 1. Connect to the Snap - - - - ```bash - yarn add get starknet@next - ``` - - - - - - ```bash - npm install starknet@next - ``` - - - +Alternatively, you can manage the Snap invocation manually. Use the `wallet_invokeSnap` method to directly interact with the Starknet Snap. This method does not requires additional dependencies. :::note @@ -148,47 +142,58 @@ Navigate to your project directory and run the following command to add the late ::: -### 2. Connect to Starknet using `wallet_invokeSnap` +In the `src/utils/snapHelper.js` file add the `connect` function and the `callSnap` helper function. This file handles the interactions with the Starknet Snap. -Use the `wallet_invokeSnap` method to directly interact with the Starknet Snap. Add the following code to your project: +```javascript title="src/utils/snapHelper.js" +const snapId = 'npm:starknet-snap'; -```javascript title="app.js" -// Function to request Starknet account -const connectStarknetSnap = async () => { +export async function connect() { + await ethereum.request({ + method: 'wallet_requestSnaps', + params: { + [snapId]: {}, + }, + }); +} + +export async function callSnap(method, params) { try { - const snapId = 'npm:starknet-snap'; - - const requestParams = { + const response = await ethereum.request({ method: 'wallet_invokeSnap', params: { - snapId: snapId, + snapId, request: { - method: 'starknet_getAccount', // Method to get the Starknet account - params: {} - } - } - }; - - // Request the Starknet account from MetaMask using Snap - const account = await ethereum.request(requestParams); - console.log('Starknet Account:', account); - - return account; - } catch (error) { - console.error('Error connecting to Starknet Snap:', error); + method, + params, + }, + }, + }); + console.log(`${method} response:`, response); + return response; + } catch (err) { + console.error(`${method} error:`, err); + alert(`${method} error: ${err.message || err}`); + throw err; } -}; +} ``` -### 3. Trigger the connection from the dapp +### 2. Call a specific Snap method + +To call a specific Snap method, for example `createAccount` use the following: -To allow users to connect their Starknet accounts to MetaMask, assign the `connectStarknetSnap` function to a button or event. -Create a button that, when clicked, connects the Starknet Snap. +```javascript +const deploy = false; // Set to true to deploy the actual account +const addressIndex = 0; // Specify which address to derive +const chainId = "0x534e5f5345504f4c4941"; // Specify which chain to use (Sepolia testnet) +// For mainnet, use: "0x534e5f4d41494e" + +const accountInfo = await callSnap('starkNet_createAccount', { addressIndex, deploy, chainId }); +``` #### Example in HTML and JavaScript (Vanilla JS) ```html - @@ -198,24 +203,43 @@ Create a button that, when clicked, connects the Starknet Snap.

- 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 8d9c8487e2..c154747d44 100644 --- a/wallet/how-to/use-non-evm-networks/starknet/index.md +++ b/wallet/how-to/use-non-evm-networks/starknet/index.md @@ -7,91 +7,49 @@ sidebar_position: 1 Starknet is a non-EVM Layer 2 network. To interact with Starknet accounts in MetaMask, you need to use the Starknet Snap. -You can use the `get-starknet` library or the `wallet_invokeSnap` JSON-RPC method to connect to the Starknet Snap. +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. - -`get-starknet`: +[`get-starknet`](architecture): - Provides a high-level API that abstracts complex operations. - Offers standardized error handling. - Supports multiple wallets, not limited to MetaMask. - Manages wallet connections and Starknet interactions. - Results are in more readable code. -`wallet_invokeSnap`: +[`wallet_invokeSnap`](../../../../snaps/reference/wallet-api-for-snaps/#wallet_invokesnap): - Requires precise method names and parameter structures. - Handles both MetaMask-specific and Starknet-specific errors. - Is designed for operating within the MetaMask framework. - Manages lower-level Starknet interactions directly. - Provides results in more detailed, lower-level code. - :::note -We recommend using the `get-starknet` library for most use cases. - -::: - -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. - - -## About `get-starknet` - -`get-starknet` is a library that simplifies Starknet network interactions. -It works with the Starknet Snap to extend the functionality of MetaMask and enable dapps to interact with users' Starknet accounts in MetaMask. +We recommend using the `get-starknet` library for most use cases due to its ease of configuration. -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. +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). -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. - -### How `get-starknet` and MetaMask interact - -A dapp with `get-starknet` installed interacts with MetaMask as follows: - -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. - -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. This instance manages the Starknet account within MetaMask. - -```mermaid -sequenceDiagram - participant dapp as dapp - participant get as get-starknet - participant mm as MetaMask - participant Snap as Starknet Snap - participant network as Starknet network - - dapp->>get: Initialize connection - get->>mm: Request connection - mm->>Snap: Activate - Snap-->>mm: Activated - mm-->>get: Return SWO - get->>get: Create WalletAccount - get-->>dapp: Connection established - - 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 - - mm->>get: Account/Network changed - get->>dapp: Notify change -``` +::: -The `get-starknet` library offers several key features that improve how dapps interact with the Starknet network through MetaMask: -- The `WalletAccount` uses a specified provider to access data from the Starknet network. -- For transactions, `get-starknet` prepares the data and sends it to MetaMask for signing through the Starknet Snap. -- `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. -- `get-starknet` sets up listeners for account and network changes in MetaMask, so the dapp can subscribe and update its state accordingly. -- `get-starknet` can request network changes through MetaMask, allowing users to switch between Starknet networks, such as Mainnet or Sepolia testnet. -- `get-starknet` can also request MetaMask to display specific tokens, improving the user experience. \ No newline at end of file +## Limitations + +Not all methods are supported by both `get-starknet` and `wallet_invokeSnap`. The following table lists which methods are availabile for the two implemnatations. + +| Method | `wallet_invokeSnap` | `get-starknet` | +|--------|:---:|:---:| +| [`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/manage-starknet-accounts.md b/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-accounts.md index ee4414619d..4a994c36de 100644 --- a/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-accounts.md +++ b/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-accounts.md @@ -61,7 +61,7 @@ This component displays the connected account address if available, and provides ## Account creation -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. +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. :::note diff --git a/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-networks.md b/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-networks.md index d4c050ee47..6e4f50d7de 100644 --- a/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-networks.md +++ b/wallet/how-to/use-non-evm-networks/starknet/manage-starknet-networks.md @@ -26,6 +26,7 @@ const checkCurrentNetwork = () => { 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. You can allow users to switch between different Starknet networks by setting the appropriate chain ID. + Starknet has two official networks: | Network | Chain ID (Hexadecimal) | diff --git a/wallet/how-to/use-non-evm-networks/starknet/sign-starknet-data.md b/wallet/how-to/use-non-evm-networks/starknet/sign-starknet-data.md index 619ea2540d..23e2b44aaa 100644 --- a/wallet/how-to/use-non-evm-networks/starknet/sign-starknet-data.md +++ b/wallet/how-to/use-non-evm-networks/starknet/sign-starknet-data.md @@ -5,7 +5,8 @@ sidebar_position: 5 # Sign Starknet transactions -After the account is connected, you can sign a transaction using the `wallet.account.signer.signTransaction` function: +After an account is connected, you can sign a transaction using the `wallet.account.signer.signTransaction` function: + ```typescript const signStarknetTransaction = async (wallet, contractAddress, entrypoint, calldata) => { try { diff --git a/wallet/how-to/use-non-evm-networks/starknet/tutorial.md b/wallet/how-to/use-non-evm-networks/starknet/tutorial.md index dda9cf16e6..adccfbd5bb 100644 --- a/wallet/how-to/use-non-evm-networks/starknet/tutorial.md +++ b/wallet/how-to/use-non-evm-networks/starknet/tutorial.md @@ -1,11 +1,11 @@ --- -description: Starknet integration tutorial +description: Create a basic dapp using `get-starknet` and React TypeScript sidebar_position: 6 --- -# Create a basic dapp with `get-starknet` and React TypeScript +# Create a basic dapp with `get-starknet` -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. +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. ## 1. Project Setup @@ -203,7 +203,7 @@ Now that you have set up the basics, let's go a step further and show how to dis ### 3.1. Setting Up the Contract -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: +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: ```typescript import { Contract } from "starknet"; diff --git a/wallet/reference/non-evm-apis/starknet-snap-api.md b/wallet/reference/non-evm-apis/starknet-snap-api.md index 1749902a99..1327665dbb 100644 --- a/wallet/reference/non-evm-apis/starknet-snap-api.md +++ b/wallet/reference/non-evm-apis/starknet-snap-api.md @@ -24,13 +24,20 @@ Starknet currently operates two public networks. Each network is identified by a | Network | Chain ID (Hexadecimal) | |---------|------------------------| | Mainnet | `0x534e5f4d41494e` | -| Sepolia testnet | `0x534e5f5345504f4c4941` | +| Testnet (Sepolia) | `0x534e5f5345504f4c4941` | -Use these constants when specifying the network in your Starknet transactions or when configuring your development environment. +Use these IDs when specifying the network in your Starknet transactions or when configuring your development environment. + +Ensure you're using the correct chain ID for your intended network to avoid unintended transactions on the wrong network. :::note -Always verify you're using the correct chain ID for your intended network to avoid unintended transactions on the wrong network. +Currently, `get-starknet` only works with the following methods: + +- [`starkNet_extractPublicKey`](#starknet_extractpublickey) +- [`starkNet_signMessage`](#starknet_signmessage) +- [`starkNet_upgradeAccContract`](#starknet_upgradeacccontract) +- [`starkNet_verifyMessage`](#starknet_verifymessage) ::: From d832af85ed3c4a79b501356b79ccbd38833de5ff Mon Sep 17 00:00:00 2001 From: Joan E <153745173+joaniefromtheblock@users.noreply.github.com> Date: Thu, 19 Sep 2024 21:57:38 +0000 Subject: [PATCH 14/35] updates --- wallet/how-to/use-non-evm-networks/starknet/architecture.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wallet/how-to/use-non-evm-networks/starknet/architecture.md b/wallet/how-to/use-non-evm-networks/starknet/architecture.md index 8d1d18ecb8..e26a08f7c5 100644 --- a/wallet/how-to/use-non-evm-networks/starknet/architecture.md +++ b/wallet/how-to/use-non-evm-networks/starknet/architecture.md @@ -1,5 +1,5 @@ --- -description: How does `get-starknet` interact with MetaMask. +description: How `get-starknet` interacts with MetaMask. sidebar_position: 2 --- From 0e4ef6991ff28932289d14ed916e86cbd398266f Mon Sep 17 00:00:00 2001 From: Alexandra Tran Date: Thu, 19 Sep 2024 19:26:07 -0700 Subject: [PATCH 15/35] Edit non-EVM intro and Starknet intro --- wallet/how-to/use-non-evm-networks/index.md | 12 +-- .../use-non-evm-networks/starknet/index.md | 76 +++++++++++-------- 2 files changed, 52 insertions(+), 36 deletions(-) diff --git a/wallet/how-to/use-non-evm-networks/index.md b/wallet/how-to/use-non-evm-networks/index.md index 88b818cfaf..e63ff72ad6 100644 --- a/wallet/how-to/use-non-evm-networks/index.md +++ b/wallet/how-to/use-non-evm-networks/index.md @@ -7,10 +7,10 @@ import CardList from "@site/src/components/CardList" # Use non-EVM networks -You can connect to non-EVM networks and interact with users' accounts on these networks using existing [MetaMask Snaps](https://metamask.io/snaps/). +You can interact with users' accounts on non-EVM networks by connecting to existing +[MetaMask Snaps](https://metamask.io/snaps/). Non-EVM networks are blockchain networks that are not compatible with the Ethereum Virtual Machine (EVM). - Non-EVM dapps and MetaMask can't directly interact with each other. By connecting to dedicated non-EVM Snaps, you can extend the functionality of MetaMask and integrate non-EVM networks into your existing MetaMask workflow. @@ -20,11 +20,13 @@ MetaMask provides Snaps for the following networks: items={[ { href: "starknet", - title: "πŸ“± Starknet", + title: "Starknet", description: - "Non-EVM Ethereum Layer 2 using zk-rollups.", + "Layer 2 network for Ethereum using ZK rollups.", }, ]} /> -See the [full list of available non-EVM Snaps](https://snaps.metamask.io/interoperability). \ No newline at end of file +:::info +See the [full list of available non-EVM Snaps](https://snaps.metamask.io/interoperability). +::: 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 c154747d44..37269ab5a8 100644 --- a/wallet/how-to/use-non-evm-networks/starknet/index.md +++ b/wallet/how-to/use-non-evm-networks/starknet/index.md @@ -5,51 +5,65 @@ sidebar_position: 1 # Use Starknet -Starknet is a non-EVM Layer 2 network. To interact with Starknet accounts in MetaMask, you need to use the Starknet Snap. +[Starknet](https://www.starknet.io/) is a non-EVM Layer 2 network. +You can interact with users' Starknet accounts in MetaMask by connecting to the +[Starknet Snap](https://snaps.metamask.io/snap/npm/consensys/starknet-snap/). -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. +You can use the [`get-starknet`](https://github.com/starknet-io/get-starknet) library or the +[`wallet_invokeSnap`](/snaps/reference/wallet-api-for-snaps/#wallet_invokesnap) JSON-RPC method from +your dapp to connect to the Starknet Snap. +See [Connect to Starknet](connect-to-starknet.md) to get started. + +## Connection options + +The [`get-starknet`](architecture) library: -[`get-starknet`](architecture): - Provides a high-level API that abstracts complex operations. -- Offers standardized error handling. +- Supports [a subset of the Starknet Snap API methods](#supported-methods). +- Standardizes error handling. - Supports multiple wallets, not limited to MetaMask. - Manages wallet connections and Starknet interactions. -- Results are in more readable code. +- Provides results in more readable code. + +The [`wallet_invokeSnap`](/snaps/reference/wallet-api-for-snaps/#wallet_invokesnap) method: -[`wallet_invokeSnap`](../../../../snaps/reference/wallet-api-for-snaps/#wallet_invokesnap): - Requires precise method names and parameter structures. +- Supports [all Starknet Snap API methods](#supported-methods). - Handles both MetaMask-specific and Starknet-specific errors. - Is designed for operating within the MetaMask framework. - Manages lower-level Starknet interactions directly. - Provides results in more detailed, lower-level code. -:::note +:::warning Important -We recommend using the `get-starknet` library for most use cases due to its ease of configuration. - -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). +We recommend using the `get-starknet` library for most use cases due to its ease of configuration +and multi-wallet support. ::: -## Limitations - -Not all methods are supported by both `get-starknet` and `wallet_invokeSnap`. The following table lists which methods are availabile for the two implemnatations. - -| Method | `wallet_invokeSnap` | `get-starknet` | -|--------|:---:|:---:| -| [`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) | βœ“ | βœ“ | +## 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: + +| 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) | βœ“ | βœ“ | From 8e75cb8ef7f56f04a902d99507b70b4c618e8dd0 Mon Sep 17 00:00:00 2001 From: Alexandra Tran Date: Thu, 19 Sep 2024 20:12:46 -0700 Subject: [PATCH 16/35] Edit Connect to Starknet --- .../starknet/connect-to-starknet.md | 152 +++++++++++++----- .../use-non-evm-networks/starknet/index.md | 2 +- 2 files changed, 111 insertions(+), 43 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 1bfccda5fa..769f61377e 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 @@ -1,36 +1,67 @@ --- -description: Connect your Starknet account to MetaMask +description: Connect your dapp to Starknet in MetaMask. sidebar_position: 1 --- import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; -# Connect your Starknet account to MetaMask +# Connect to Starknet -To connect your dapp to the Starknet network in MetaMask, you can use the [`get-starknet`](https://github.com/starknet-io/get-starknet) library. -This library simplifies the process of connecting to the Starknet Snap, allowing you to interact with users' Starknet accounts in MetaMask. -`get-starknet` also enables dapps to interact with other wallets in the Starknet ecosystem. +Connect your dapp to Starknet in MetaMask by using the +[`get-starknet`](#connect-using-get-starknet) library or the +[`wallet_invokeSnap`](#connect-using-wallet_invokesnap) JSON-RPC method. + +:::warning Important + +We recommend using the `get-starknet` library for most use cases due to its ease of configuration +and multi-wallet support. +See [a comparison of the connection options](index.md#connection-options). + +::: ## 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/) - - A JavaScript or TypeScript React project set up +- [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/) +- (Optional) A JavaScript or TypeScript React project set up ## Connect using `get-starknet` -:::note +### 1. Set up the project -We recommend using the `get-starknet method for most uses. +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/): -::: + + + +```bash +yarn create react-app get-starknet-dapp +``` + + + + +```bash +npm create react-app get-starknet-dapp +``` -### 1. Add `get-starknet` to your project + + + +Navigate into the project: + +```bash +cd get-starknet-dapp +``` + +### 2. Install `get-starknet` -Add the [`get-starknet`](https://github.com/starknet-io/get-starknet) `version 3.3.0` library and the version `6.11.0` of the `starknet.js` library to your project's dependencies: +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: @@ -50,9 +81,11 @@ Add the [`get-starknet`](https://github.com/starknet-io/get-starknet) `version 3 -### 2. Connect to the Snap +### 3. Connect to the Snap -Create a `src/components` directory, and add a new file named `WalletConnectButton.js` to the directory. Add the following code to the file: +Create a `src/components` directory, and add a new file named `WalletConnectButton.js` to the directory. +Add the following code to the file, which handles the connection to the Snap and displays a button +for users to initiate the wallet connection: ```javascript title="WalletConnectButton.js" import React, { useState } from "react"; @@ -78,7 +111,7 @@ function WalletConnectButton() { setWalletName(getWallet?.name || "") } catch(e){ - // Handle user rejection to install MetaMask / Snaps. + // Handle user rejection to install MetaMask / the Starknet Snap. console.log(e) } }; @@ -106,17 +139,39 @@ function WalletConnectButton() { export default WalletConnectButton; ``` -This code handles the connection to Starknet Snap using the `get-starknet` library and includes a button for users to initiate the wallet connection. - :::note -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. +This code automatically requests the user to add the +[Starknet Snap](https://snaps.metamask.io/snap/npm/consensys/starknet-snap/) to MetaMask, if it's +not already present. +Handle the error if the user rejects the connection request in the `try` / `catch` block of the +`handleConnect` function. ::: -### 3. Start the dapp +Add a new file named `App.js` to the `src` directory, and add the following code to the file to use +the `WalletConnectButton` component: -Start the dapp, which allows users to select **Connect Wallet** and interact with the Starknet network using MetaMask: +```js title="App.js" +import WalletConnectButton from "./components/WalletConnectButton.js" + +function App() { + return ( +
+
+ +
+
+ ); +} + +export default App; +``` + +### 4. Start the dapp + +Start the dapp and navigate to it in your browser. +A **Connect Wallet** button displays, which allows users to connect to MetaMask and interact with Starknet. @@ -138,18 +193,15 @@ Start the dapp, which allows users to select **Connect Wallet** and interact wit ## Connect using `wallet_invokeSnap` -### 1. Connect to the Snap - -Alternatively, you can manage the Snap invocation manually. Use the `wallet_invokeSnap` method to directly interact with the Starknet Snap. This method does not requires additional dependencies. - -:::note - -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. +Alternatively, you can manage the Snap invocation manually. +Use the [`wallet_invokeSnap`](/snaps/reference/wallet-api-for-snaps/#wallet_invokesnap) JSON-RPC +method to directly interact with the Starknet Snap. - ::: +### 1. Connect to the Snap Create a `src/utils` directory, and add a new file named `snapHelper.js` to the directory. -In `snapHelper.js`, add a `connect` function and a `callSnap` helper function as follows. This file handles the interactions with the Starknet Snap: +In `snapHelper.js`, add a `connect` function and a `callSnap` helper function as follows. +This file handles the interactions with the Starknet Snap: ```javascript title="snapHelper.js" const snapId = "npm:starknet-snap"; @@ -185,6 +237,13 @@ export async function callSnap(method, params) { } ``` +:::note + +To connect to Starknet, the dapp user must add the +[Starknet Snap](https://snaps.metamask.io/snap/npm/consensys/starknet-snap/) to MetaMask. + +::: + ### 2. Call a specific Snap method Use the `callSnap` function to call a specific Snap method. @@ -198,9 +257,17 @@ const chainId = "0x534e5f5345504f4c4941"; // Chain ID of the network to use. const accountInfo = await callSnap("starkNet_createAccount", { addressIndex, deploy, chainId }); ``` -#### Example in HTML and Vanilla JS +### Examples + +#### HTML and Vanilla JS -The following is a full example of a dapp with a button that, when clicked, connects to a Starknet wallet using a MetaMask Snap, creates a Starknet account, and displays the account address: +The following is a full example of a simple HTML and Vanilla JavaScript dapp that connects to the +Starknet Snap using `wallet_invokeSnap`. +It displays a button that, when selected: + +- Connects to Starknet in MetaMask. +- Creates a Starknet account. +- Displays the account address. ```html @@ -214,12 +281,12 @@ The following is a full example of a dapp with a button that, when clicked, conn