From 1617eaba70feabda9d369fb672ea3b5397999f5b Mon Sep 17 00:00:00 2001 From: Joan E <153745173+joaniefromtheblock@users.noreply.github.com> Date: Thu, 26 Sep 2024 04:49:58 +0000 Subject: [PATCH] copy edits --- .../starknet/create-a-simple-starknet-dapp.md | 31 +++++++++---------- .../starknet/manage-starknet-accounts.md | 5 ++- .../starknet/manage-starknet-networks.md | 4 --- .../starknet/send-starknet-transactions.md | 1 + .../starknet/sign-starknet-data.md | 4 +-- 5 files changed, 19 insertions(+), 26 deletions(-) diff --git a/wallet/how-to/use-non-evm-networks/starknet/create-a-simple-starknet-dapp.md b/wallet/how-to/use-non-evm-networks/starknet/create-a-simple-starknet-dapp.md index cd102f6f612..68fa1d7e97f 100644 --- a/wallet/how-to/use-non-evm-networks/starknet/create-a-simple-starknet-dapp.md +++ b/wallet/how-to/use-non-evm-networks/starknet/create-a-simple-starknet-dapp.md @@ -40,14 +40,11 @@ get-starknet-tutorial/ ├── src/ │ ├── components/ │ │ ├── WalletConnect.tsx -│ │ └── TokenInteractions.tsx +│ │ │ │ │ ├── App.tsx │ ├── index.tsx │ └── App.css -│ -├── package.json -└── tsconfig.json ``` ## 2.Confingure wallet connection @@ -94,8 +91,8 @@ handleConnect({ modalMode: "alwaysAsk", modalTheme: "dark" }); ### 2.3. Create a `WalletAccount` -After it is connected, you can create a new `WalletAccount` instance using the `starknet.js` library. - This allows interaction with the Starknet network using the connected wallet. +After the wallet is successfully connected to the dapp, you can create a new `WalletAccoun` instance using the `starknet.js` library. +This allows interaction with the Starknet network using the connected wallet. ```typescript import { WalletAccount } from "starknet"; @@ -104,15 +101,15 @@ async function handleConnect(options?: ConnectOptions) { const res = await connect(options); const myFrontendProviderUrl = "https://free-rpc.nethermind.io/sepolia-juno/v0_7"; const newWalletAccount = new WalletAccount({ nodeUrl: myFrontendProviderUrl }, res); - // You can now use newWalletAccount to interact with Starknet } ``` ### 2.4. Display wallet information -The wallet's name, address, and icon can be displayed in your dapp. This provides visual feedback to the user, confirming which wallet they are using. +The wallet's name, address, and icon can be displayed in the dapp. +This provides visual feedback to the user, confirming which wallet they are using. -Here's a basic example of how to update the UI with the connected wallet's details: +The following code is an example of how to update the interface with the connected wallet's details: ```typescript import { useState } from "react"; @@ -141,7 +138,7 @@ function App() { ### 2.5. Example implementation -Now that you understand the key elements and have seen snippets of the most important parts, here's the full implementation in `App.tsx`: +The following code is the full implementation in `App.tsx`: ```typescript import "./App.css" @@ -151,7 +148,7 @@ import { connect, disconnect, } from "get-starknet" -import { WalletAccount } from "starknet"; // v6.10.0 min +import { WalletAccount } from "starknet"; import { useState } from "react" function App() { @@ -228,7 +225,7 @@ function App() { )} ) -} +}; export default App ``` @@ -261,12 +258,12 @@ const formattedBalance = balance / Math.pow(10, 18); ### 3.3. Transfer tokens -To transfer tokens, you will populate the `transfer` method call and then execute the transaction using the `WalletAccount`. Here"s how you can do that: +To transfer tokens, populate the `transfer` method call and then execute the transaction using the `WalletAccount`. Here"s how you can do that: ```typescript import { Call } from "starknet"; -// Define the transfer parameters +// Define the transfer parameters. const recipientAddress = "0x78662e7352d062084b0010068b99288486c2d8b914f6e2a55ce945f8792c8b1"; const amountToTransfer = 1n * 10n ** 18n; // 1 token (assuming 18 decimals). @@ -275,16 +272,16 @@ const transferCall: Call = erc20.populate("transfer", { amount: amountToTransfer, }); -// Execute the transfer +// Execute the transfer. const { transaction_hash: transferTxHash } = await walletAccount.execute(transferCall); -// Wait for the transaction to be accepted on Starknet +// Wait for the transaction to be accepted on Starknet. await walletAccount.waitForTransaction(transferTxHash); ``` ### 3.4. Full implementation -Here"s how you can integrate both balance checking and transferring into your component: +The following code example demonstrates how to you integrate both balance checking and transferring into your component: ```typescript import { useEffect, useState } from "react"; 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 2835804f0df..95a2c18938d 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 @@ -309,7 +309,6 @@ To handle account changes and disconnections, you can use event listeners provid const handleAccountsChanged = (accounts: string[]) => { console.log("Accounts changed:", accounts); setAccount(accounts[0] || null); - // Update your dapp's state. }; const handleDisconnect = () => { @@ -321,7 +320,7 @@ To handle account changes and disconnections, you can use event listeners provid starknet.on("accountsChanged", handleAccountsChanged); starknet.on("networkChanged", handleDisconnect); - // Initial account setup + // Initial account setup. starknet.enable().then((accounts: string[]) => { setAccount(accounts[0] || null); }); @@ -388,7 +387,7 @@ To handle account changes and disconnections, you can use event listeners provid useEffect(() => { fetchAccount(); - // Poll for account changes every 5 seconds + // Retrieve account changes every 5 seconds. const intervalId = setInterval(fetchAccount, 5000); return () => clearInterval(intervalId); 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 dfb12a24243..ecb42b0c485 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 @@ -128,10 +128,6 @@ Prompt users to switch between networks by setting the throw new Error("MetaMask not detected or Snaps not supported"); } }; - - // Usage example: - // switchStarknetNetwork("0x534e5f5345504f4c4941") // Switch to Sepolia testnet - // switchStarknetNetwork("0x534e5f4d41494e") // Switch to Mainnet ``` 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 a44e2f521be..0eff73ce8b6 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 @@ -171,6 +171,7 @@ The following is a simplified example of how to connect to a Starknet account an } }; + // Example usage const contractAddress = "0x5B38Da6a701c568545dCfcB03FcB875f56beddC4"; const contractFuncName = "transfer"; const contractCallData = ["0x5B38Da6a701c568545dCfcB03FcB875f56beddC4", "1000"]; 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 ecafda8152b..003c18ff35b 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 @@ -76,10 +76,10 @@ After an account is connected, you can sign a transaction using the `wallet.acco } }; - // Example usage + // Example usage: const contractAddress = "0x5B38Da6a701c568545dCfcB03FcB875f56beddC4"; const entrypoint = "transfer"; - const calldata = ["0xRecipientAddress", "1000"]; // Example parameters + const calldata = ["0xRecipientAddress", "1000"]; signStarknetTransactionWithSnap(contractAddress, entrypoint, calldata) .then(result => console.log("Signed transaction result:", result))