From 201fb327a9ebfcd8f1f4b1da5341116418dd43f2 Mon Sep 17 00:00:00 2001 From: Adrian Thompson Date: Mon, 5 Aug 2024 12:38:47 -0500 Subject: [PATCH] Addition of cosmos kit frontend AI assisted guide with some minor changes to the previous AI guides (#515) --- ...1.ai-assited-smart-contract-development.md | 2 +- .../1.ai-assited-frontend-development.md | 2 +- .../2.cosmos-kit-integration.md | 75 +++++++++++++++++++ 3 files changed, 77 insertions(+), 2 deletions(-) create mode 100644 content/2.developers/3.guides/15.ai-assisted-development/2.frontend-development/2.cosmos-kit-integration.md diff --git a/content/2.developers/3.guides/15.ai-assisted-development/1.smart-contract-development/1.ai-assited-smart-contract-development.md b/content/2.developers/3.guides/15.ai-assisted-development/1.smart-contract-development/1.ai-assited-smart-contract-development.md index 23593116..3d8f94f4 100644 --- a/content/2.developers/3.guides/15.ai-assisted-development/1.smart-contract-development/1.ai-assited-smart-contract-development.md +++ b/content/2.developers/3.guides/15.ai-assisted-development/1.smart-contract-development/1.ai-assited-smart-contract-development.md @@ -1,5 +1,5 @@ --- -objectID: developers_guides_ai-assistance_introduction +objectID: developers_guides_ai-assistance-development_smart-contract-development-ai-assisted title: AI Assisted Smart Contract Development description: How to use AI assistance to build dapps on Archway parentSection: Developers diff --git a/content/2.developers/3.guides/15.ai-assisted-development/2.frontend-development/1.ai-assited-frontend-development.md b/content/2.developers/3.guides/15.ai-assisted-development/2.frontend-development/1.ai-assited-frontend-development.md index b87d9a66..81b9bf4d 100644 --- a/content/2.developers/3.guides/15.ai-assisted-development/2.frontend-development/1.ai-assited-frontend-development.md +++ b/content/2.developers/3.guides/15.ai-assisted-development/2.frontend-development/1.ai-assited-frontend-development.md @@ -1,5 +1,5 @@ --- -objectID: developers_guides_ai-assistance_introduction +objectID: developers_guides_ai-assistance-development_assisted-frontend-development title: AI Assisted Fronted Development description: How to use AI assistance to build dapp frontends on Archway parentSection: Developers diff --git a/content/2.developers/3.guides/15.ai-assisted-development/2.frontend-development/2.cosmos-kit-integration.md b/content/2.developers/3.guides/15.ai-assisted-development/2.frontend-development/2.cosmos-kit-integration.md new file mode 100644 index 00000000..e5886609 --- /dev/null +++ b/content/2.developers/3.guides/15.ai-assisted-development/2.frontend-development/2.cosmos-kit-integration.md @@ -0,0 +1,75 @@ +--- +objectID: developers_guides_ai-assistance-development_cosmos-kit-integration +title: Cosmoskit Integration +description: How to use AI assistance to build dapp frontends on Archway utilizing the Cosmos Kit +parentSection: Developers +parentSectionPath: /developers +--- + +# Overview + +In this tutorial, you'll learn how to create a Lottery Dapp frontend using the `arch3.js` library and `React` alongside [Cosmos Kit](https://cosmology.zone/products/cosmos-kit) for wallet integration and also the use of the [Create Cosmos App](https://cosmology.zone/products/create-cosmos-app) to bootstrap a new frontend dapp. 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. + +## Key tips for interacting with ChatGPT AI + +To successfully create and deploy the Lottery Dapp frontend using, you will interact with the ChatGPT AI to get clear, concise, and accurate instructions. + +- Be Specific: Clearly state what you need help with. The more specific your question, the better the response. +- Use Code Blocks: When requesting code snippets, use code blocks to format your request. +- Follow Instructions: Ensure you follow the instructions provided by ChatGPT closely to avoid errors. +- Ask for Clarification: If any part of the response is unclear, ask for further clarification. +- Check Outputs: After running commands, check the outputs and return any errors or messages to ChatGPT for further assistance. + +## Archway custom GPT + +We've created a custom GPT configured with a knowledge set that should help with building smart contract frontends on Archway. The custom GPT can be accessed [here](https://chatgpt.com/g/g-VN4mrW5HR-archway-frontend-dapp-developer) and is the recommended GPT for building smart contract frontends on Archway. + +## 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. + +The first step would be to create a new React project and set up the necessary dependencies using the [Create Cosmos App](https://cosmology.zone/products/create-cosmos-app) boilerplate. 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. + +Create a new React project using create-cosmos-app and set up the necessary dependencies but use arch3.js to execute transactions instead of cosmjs. +``` + +The response should guide you with the commands and steps required for setting up your project and configuring `Cosmos Kit`. + +## 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. + +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")] +pub enum ExecuteMsg { + Enter {}, + Draw {}, +} + +#[derive(Serialize, Deserialize, Clone, Debug, PartialEq, JsonSchema)] +#[serde(rename_all = "snake_case")] +pub enum QueryMsg { + GetPool {}, + GetParticipants {}, +} +``` + +You would then make the following prompt, adding the code from your contract's `msg.rs` file: + +``` +Here are the messages defined in my smart contract: + +[Code Here] + +Create the necessary components for entering the lottery, drawing a winner, and querying the pool and participants. +``` + +With these steps provided, your React application should now allow for multiple wallet connections to sign transactions via your browser. \ No newline at end of file