Updates to the ai assisted frontend development guide (#539)

content/2.developers/3.guides/15.ai-assisted-development/2.frontend-development/1.ai-assited-frontend-development.md

@@ -8,9 +8,9 @@ parentSectionPath: /developers
 
 # Overview
 
-In this tutorial, you'll learn how to create a Lottery Dapp frontend using the `arch3.js` library and `React`. The AI will guide you through the entire process, from setting up your project to interacting with your smart contract on the Archway blockchain.
+In this tutorial, you'll learn how to create a frontend for a Lottery Dapp using the `arch3.js` library and `React`. The AI will guide you through the entire process, from setting up your project to interacting with your smart contract on the Archway blockchain.
 
-Please make sure you've gone through the following [guide](/developers/getting-started/install) to install all the tools required for developing on Archway. Also, make sure to go the [guide](/developers/guides/ai-assistance/ai-assited-smart-contract-development) on creating the Lottery smart contract.
+Please make sure you've gone through the following [guide](/developers/getting-started/install) to install all the tools required for developing on Archway. Also, make sure to go through the [guide](/developers/guides/ai-assistance/ai-assited-smart-contract-development) on creating the Lottery smart contract.
 
 ## Key tips for interacting with ChatGPT AI
 
@@ -28,62 +28,138 @@ We've created a custom GPT configured with a knowledge set that should help with
 
 ## Initial setup
 
-You want to give ChatGPT an overview of what is to be built along with the requirements but still allowing you to go through individual prompts to do things step by step.
+You want to give ChatGPT an overview of the Lottery smart contract that was built, the chain your contract was deployed to along with the contract's address. The frontend dapp will also need access to the network via an `RPC` connection. For the constantine testnet you can find the list of public RPC endpoints [here](https://docs.archway.io/resources/networks#rpc-endpoints-1). One this same page you can find the `Chain ID` for the network. You can find the RPC endpoints and Chain ID for Mainnet [here](https://docs.archway.io/resources/networks#rpc-endpoints).
 
 The first step would be to create a new React project and set up the necessary dependencies. The following will therefore be the first prompt:
 
 ```
-I want to build a frontend for my Lottery Dapp on the Archway blockchain using React and Arch3.js. The frontend should allow users to enter the lottery by paying a small fee, and an admin can draw a winner to receive the total collected fees.
-
-I want to go through the process by creating step by step prompts with the first prompt being, how do I create a new React project and install Arch3.js along with other necessary packages?
+Create a new React project.
 ```
 
 The response should guide you with the commands and steps required for setting up your project.
 
 ## Create components and smart contract interactions
 
-Along with the request to create the necessary components for entering the lottery, drawing a winner, and querying the pool and participants, you will also need to share the messages that makes up your smart contract with ChatGPT. This step helps ChatGPT understand how to interact with the contract.
+Along with the request to create the necessary components for entering the lottery and ending the lottery, you will also need to share some of the code that makes up your smart contract with ChatGPT. This step helps ChatGPT understand how to interact with the contract.
 
 The following could be an example of the messages in your smart contract's `msg.rs` file:
 
 ```rust
-#[derive(Serialize, Deserialize, Clone, Debug, PartialEq, JsonSchema)]
-#[serde(rename_all = "snake_case")]
+use cosmwasm_schema::{cw_serde, QueryResponses};
+use cosmwasm_std::{Uint128};
+
+/// Message used to instantiate the contract
+/// This message is sent when the contract is initialized
+#[cw_serde]
+pub struct InstantiateMsg {
+    /// The entry fee that users need to pay to enter the lottery
+    pub entry_fee: Uint128,
+    /// The block height at which the lottery ends
+    pub end_block: u64,
+}
+
+/// Execute messages for the contract
+/// Defines the actions that users can take, such as entering the lottery or ending it
+#[cw_serde]
 pub enum ExecuteMsg {
+    /// Enter the lottery by paying the entry fee
     Enter {},
-    Draw {},
+    /// End the lottery and determine the winner
+    EndLottery {},
 }
 
-#[derive(Serialize, Deserialize, Clone, Debug, PartialEq, JsonSchema)]
-#[serde(rename_all = "snake_case")]
+/// Query messages for the contract
+/// Defines the queries that can be made to retrieve data from the contract
+#[cw_serde]
+#[derive(QueryResponses)]
 pub enum QueryMsg {
-    GetPool {},
+    /// Get the current state of the lottery, including total funds and whether it's ended
+    #[returns(crate::state::LotteryState)]
+    GetLotteryState {},
+
+    /// Get the list of all participants in the lottery
+    #[returns(Vec<crate::state::Participant>)]
     GetParticipants {},
 }
+
+}
 ```
 
-You would then make the following prompt, adding the code from your contract's `msg.rs` file:
+The following could be an example of the code in your smart contract's `state.rs` file:
+
+```rust
+use cosmwasm_schema::cw_serde;
+use cosmwasm_std::{Addr, Uint128};
+use cw_storage_plus::{Item, Map};
+
+// This struct stores the lottery configuration and overall state of the lottery.
+#[cw_serde]
+pub struct LotteryState {
+    // The address of the contract administrator
+    pub admin: Addr,
+    // Total amount of funds collected from entries
+    pub total_funds: Uint128,
+    // The entry fee to participate in the lottery
+    pub entry_fee: Uint128,
+    // The block height when the lottery will end
+    pub end_block: u64,
+    // Flag indicating whether the lottery has ended
+    pub is_ended: bool,
+}
+
+// A list to store addresses of all the participants
+#[cw_serde]
+pub struct Participant {
+    // The address of the participant
+    pub address: Addr,
+    // The amount they contributed (for potential future extensions like multiple tickets)
+    pub amount: Uint128,
+}
 
+// Store the global state of the lottery
+pub const LOTTERY_STATE: Item<LotteryState> = Item::new("lottery_state");
+
+// A map of participants, where the key is an auto-incremented ID, and the value is the Participant struct
+pub const PARTICIPANTS: Map<u64, Participant> = Map::new("participants");
+
+// Counter to track the number of participants (used for deterministic winner selection)
+pub const PARTICIPANT_COUNT: Item<u64> = Item::new("participant_count");
 ```
-Here are the messages defined in my smart contract:
 
-[Code Here]
+You might need to share the code in your `contract.rs` file if you don't get the results you desire.
+
+You will need to know your `contract's address`, the `Chain ID` and a `RPC` connection to the chain.
+
+You would then make the following prompt:
 
-How do I create the necessary components in React to interact with my lottery contract using Arch3.js?
 ```
+I have a Lottery smart contract on the Archway testnet blockchain that has the following structure:
+- An account enters the lottery by paying a small fee
+- A winner is selected to end the lottery and the winner will receive the total collected fees
+- Accounts cannot enter the lottery if the set end block height has passed
+- The smart contract admin will be able to end the lottery based on the set end block height
 
-This should now give you a functioning dapp that you can actually plug in your `contract address` and wallet `mnemonic` to interact with your smart contract. Test it out and see if you have any issues. If there are errors, share with ChatGPT and update the code as required.
+The Chain ID for the contantine testnet is constanine-3.
 
-## Integrate with browser wallet
+Please use the following RPC endpoint https://rpc.constantine.archway.io and the following API endpoint https://api.constantine.archway.io.
 
-Instead of storing our wallet's mnomonic in the dapp, let's update the code to use our Keplr wallet for signing transactions.
+The contract address is [Contract Address].
 
-The following would be the prompt:
+Here are the messages defined in my smart contract's msg.rs file:
 
-```
-Instead of storing my wallet's mnemonic in the dapp how can I use my Keplr browser wallet to sign transactions?
-```
+[Code Here]
+
+Here is the code from the state.rs file:
 
-With these steps provided, your React application should now be integrated with Keplr, allowing you to sign transactions using their Keplr browser wallet. Ensure that the Keplr extension is installed in your browser and that you have selected the correct network for your application.
+[Code Here]
+
+Here is the content of the contract.rs file:
+
+[Code Here]
+
+I want to build the frontend to interact with this Lottery smart contract from both an end user and admin perspective. The frontend should allow users to enter the lottery by paying a fee in aarch, and an admin can end the lottery which will then select a winner who will receive the total collected fees.
+
+Update the React project created above with the necessary components to interact with my lottery contract using chrome extension wallet wallet for signing transactions?
+```
 
-This is a basic setup to get you started with a frontend for your lottery contract using Arch3.js. You can extend this by adding error handling, state management, and more interactive UI elements. We will share other examples that utilize more boilerplate code and production ready solutions.
+This should now give you a functioning dapp that uses the [Keplr](https://www.keplr.app/get) browser extension for signing transactions. Test it out and see if you have any issues. If there are errors, share with **ChatGPT** and update the code as required.