From 6507c676287662000695d3256471a9b1b042bcbb Mon Sep 17 00:00:00 2001 From: xiadd Date: Wed, 27 Dec 2023 15:43:21 +0800 Subject: [PATCH] Add docs for ChainIDE --- docs/.vuepress/config.js | 153 +++++++++++---------- docs/chainide-for-irisnet/configuration.md | 51 +++++++ docs/chainide-for-irisnet/cosmos-usage.md | 23 ++++ docs/chainide-for-irisnet/usage.md | 69 ++++++++++ 4 files changed, 220 insertions(+), 76 deletions(-) create mode 100644 docs/chainide-for-irisnet/configuration.md create mode 100644 docs/chainide-for-irisnet/cosmos-usage.md create mode 100644 docs/chainide-for-irisnet/usage.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index e40fea835..a1f725b96 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -1,82 +1,83 @@ -import glob from 'glob'; -import markdownIt from 'markdown-it' -import meta from 'markdown-it-meta' -import fs from 'fs' -import _ from 'lodash' -import { searchPlugin } from '@vuepress/plugin-search' +import glob from "glob"; +import markdownIt from "markdown-it"; +import meta from "markdown-it-meta"; +import fs from "fs"; +import _ from "lodash"; +import { searchPlugin } from "@vuepress/plugin-search"; const sidebar = (directory, array) => { - return array.map(i => { - const children = _.sortBy( - glob - .sync(`./${directory}/${i[1]}/*.md`) - .map(path => { - const md = new markdownIt(); - const file = fs.readFileSync(path, "utf8"); - md.use(meta); - md.render(file); - const order = md.meta.order; - return { path, order }; - }) - .filter(f => f.order !== false), - ["order", "path"] - ) - .map(f => f.path.slice(1)) - .filter(f => !f.match("README")); - return { - text: i[0], - children, - collapsible:true - }; - }); + return array.map((i) => { + const children = _.sortBy( + glob + .sync(`./${directory}/${i[1]}/*.md`) + .map((path) => { + const md = new markdownIt(); + const file = fs.readFileSync(path, "utf8"); + md.use(meta); + md.render(file); + const order = md.meta.order; + return { path, order }; + }) + .filter((f) => f.order !== false), + ["order", "path"] + ) + .map((f) => f.path.slice(1)) + .filter((f) => !f.match("README")); + return { + text: i[0], + children, + collapsible: true, + }; + }); }; -import{defineUserConfig } from 'vuepress' -import { defaultTheme } from 'vuepress' -export default defineUserConfig( { - base: "/docs/", - plugins: [ - searchPlugin({ - locales: { - '/': { - placeholder: 'Search', - }, - } - }), - ], - locales: { +import { defineUserConfig } from "vuepress"; +import { defaultTheme } from "vuepress"; +export default defineUserConfig({ + base: "/docs/", + plugins: [ + searchPlugin({ + locales: { "/": { - lang: "en-US", - title: "IRISnet Documents", - description: "IRISnet Documents", - } - }, - theme: defaultTheme({ - repo: "irisnet/irishub", - docsDir: "docs", - editLinks: true, - contributors: false, - docsBranch: "main", - editLinkText: 'Help us improve this page!', - locales: { - "/": { - editLinkText: 'Help us improve this page!', - navbar: [ - { - text: 'Back to IRISnet', - link: 'https://www.irisnet.org' - } - ], - sidebar: sidebar("", [ - ["Getting Started", "get-started"], - ["Concepts", "concepts"], - ["Features", "features"], - ["Daemon", "daemon"], - ["CLI Client", "cli-client"], - ["Endpoints", "endpoints"], - ["Tools", "tools"], - ["Migration", "migration"], - ["Resources", "resources"] - ]), - } + placeholder: "Search", }, + }, }), + ], + locales: { + "/": { + lang: "en-US", + title: "IRISnet Documents", + description: "IRISnet Documents", + }, + }, + theme: defaultTheme({ + repo: "irisnet/irishub", + docsDir: "docs", + editLinks: true, + contributors: false, + docsBranch: "main", + editLinkText: "Help us improve this page!", + locales: { + "/": { + editLinkText: "Help us improve this page!", + navbar: [ + { + text: "Back to IRISnet", + link: "https://www.irisnet.org", + }, + ], + sidebar: sidebar("", [ + ["Getting Started", "get-started"], + ["Concepts", "concepts"], + ["Features", "features"], + ["Daemon", "daemon"], + ["CLI Client", "cli-client"], + ["Endpoints", "endpoints"], + ["ChainIDE for IRISnet", "chainide-for-irisnet"], + ["Tools", "tools"], + ["Migration", "migration"], + ["Resources", "resources"], + ]), + }, + }, + }), }); diff --git a/docs/chainide-for-irisnet/configuration.md b/docs/chainide-for-irisnet/configuration.md new file mode 100644 index 000000000..4f39f93eb --- /dev/null +++ b/docs/chainide-for-irisnet/configuration.md @@ -0,0 +1,51 @@ +--- +order: 1 +--- + +# ChainIDE for IRISnet Environment Configuration + +> This section provides a detailed explanation of the environment configuration for IRISnet IDE, which is essential for developing dApps on the IRISnet blockchain. + +## Create a new IRISnet Project + +Visit [ChainIDE](https://chainide.com/) and click the "Try Now" button on the front page as shown in the figure below. + +![img](https://3869740696-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYy-lqJKjq1m0yBAX4r%2Fuploads%2F8tniZ7XWzHhRdOe51grH%2Fimage.png?alt=media&token=c27915ee-b863-4161-b4f3-e44d9cbaab97) + +Here, you will choose your login method, which includes two options: GitHub and Guest. For this tutorial, select GitHub login, as later on, the use of the Sandbox requires users to log in with GitHub. + +![img](https://3869740696-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYy-lqJKjq1m0yBAX4r%2Fuploads%2FkRYg4sPFcnWR2Lz3ujeN%2Fimage.png?alt=media&token=bd113ebf-16c8-4241-9db1-120b43656744) + +Click the "New Project" button. + +![img](https://3869740696-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYy-lqJKjq1m0yBAX4r%2Fuploads%2FFaeBrBu7u5LUAxQynl1r%2Fimage.png?alt=media&token=7a988e98-415c-442e-a137-080f2dbd0372) + +A pop-up window will appear. On the left side of the pop-up, select "IRISnet". Then, select a temple to create a new project. + +![img](https://3869740696-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYy-lqJKjq1m0yBAX4r%2Fuploads%2FG292E6wPohEJYnqgOayS%2Fimage.png?alt=media&token=94c427bc-be1a-4e5c-8661-e7d430b3c9b2) + +## Configure Wallet + +IRISnet IDE provides support for two smart contract environments: EVM and Native. The EVM environment supports Metamask wallet, while the Native environment supports Kelpr wallet. + +### Supported EVM Wallet + +**Metamask** + +> https://metamask.io/ + +### Supported Native Wallet + +**Kelpr** + +> https://www.keplr.app/ + +## Acquiring test tokens + +Test tokens can be acquired from a tesnet faucet. Use test tokens to cover the cost of deployment, transaction fees, gas fees, etc., on the testnet. + +Tutorials on Acquiring Test Tokens: + +Native: https://irisnet.org/docs/get-started/testnet.html#run-a-full-node + +EVM: https://irisnet.org/docs/get-started/evm-contract.html#prepare-account-for-evm diff --git a/docs/chainide-for-irisnet/cosmos-usage.md b/docs/chainide-for-irisnet/cosmos-usage.md new file mode 100644 index 000000000..292061caa --- /dev/null +++ b/docs/chainide-for-irisnet/cosmos-usage.md @@ -0,0 +1,23 @@ +--- +order: 3 +--- + +# How to Use IRISnet Native IDE + +> Issue, Edit, and Query FTs and NFTs on IRISnet + +## Connect to IRISnet Native + +Once inside the project, click "Connect Wallet" in the upper right corner, select "Injected Web3 Provider," and then select "Kelpr Wallet" to connect to the IRISnet Native blockchain. + +![img](https://3869740696-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYy-lqJKjq1m0yBAX4r%2Fuploads%2FvLE97itYjQHgZFz3Jqtt%2Fimage.png?alt=media&token=2f18f037-9cf7-435f-bcaf-165b0b6c9256) + +![img](https://3869740696-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYy-lqJKjq1m0yBAX4r%2Fuploads%2Fj72iy3bQhI6e1oN5BNrs%2Fimage.png?alt=media&token=245c2b8e-5960-4aba-a86e-aaf9fdaf3d4e) + +Click on the address in the bottom right corner to obtain your Kelpr wallet address. + +![img](https://3869740696-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYy-lqJKjq1m0yBAX4r%2Fuploads%2FiKMYpBQ9gN3yhUBQmtMM%2Fimage.png?alt=media&token=83ba1114-7fd7-478e-818e-33718a37eb42) + +## Run the FT & NFT Toolbox + +On the right side, select either "IRIS FT Toolkit" or "IRIS NFT Toolkit," to issue, edit, and query IRISnet FTs and NFTs on the IRISnet Native blockchain. diff --git a/docs/chainide-for-irisnet/usage.md b/docs/chainide-for-irisnet/usage.md new file mode 100644 index 000000000..8b6791f6b --- /dev/null +++ b/docs/chainide-for-irisnet/usage.md @@ -0,0 +1,69 @@ +--- +order: 2 +--- + +# How to Use IRISnet EVM IDE + +> The process of writing, compiling, deploying, interacting, and querying with IRISnet EVM smart contracts + +## Write a contract + +Upon entering the project, the README.md file included in the folder will be automatically previewed. + +![img](https://3869740696-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYy-lqJKjq1m0yBAX4r%2Fuploads%2FQgBGZS91QA5GP2AXMTIl%2Fimage.png?alt=media&token=2f54c253-7113-457e-918c-6d8922c5be95) + +In the Explorer panel, you can create new files (or folders), refresh the directory, and download files. You can also directly click on the files that come with the template. + +![img](https://3869740696-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYy-lqJKjq1m0yBAX4r%2Fuploads%2FE2cSwSZdbKLZK5YN7XGK%2Fimage.png?alt=media&token=47ea9493-d238-474e-ab62-17a9d1f83dd3) + +Click on a contract file to edit the code. + +![img](https://3869740696-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYy-lqJKjq1m0yBAX4r%2Fuploads%2Fc3NCif0cmQb6idg1jY4z%2Fimage.png?alt=media&token=a3bfae68-88a5-480d-b296-de50afd1b019) + +## Compile a contract + +Once your contract code is written, click on the "Compiler" button in the right-side menu to open the compilation module. Choose the compiler version and decide whether to enable optimization, then click "Compile \*\*\*.sol" to initiate the compilation. + +![img](https://3869740696-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYy-lqJKjq1m0yBAX4r%2Fuploads%2FIOilLElJDiaICoy6AUpF%2Fimage.png?alt=media&token=26ef30aa-6746-417e-a634-4970b64bb53d) + +After successful compilation, the ABI and BYTE CODE will be displayed below, and there will be a confirmation message in the console stating "Compile contract success." + +![img](https://3869740696-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYy-lqJKjq1m0yBAX4r%2Fuploads%2FczE48oDmrmEi2hNWpGds%2Fimage.png?alt=media&token=3f51d9b4-063e-48dd-a60e-b13b54bc0781) + +## Connect to IRISnet EVM + +Before deploying a contract, you need to click on "Connect Wallet" in the upper right corner and select connect to JavaScript VM (for testing, implemented in JavaScript) or Metamask (for deployment on the IRISnet blockchain). + +![img](https://3869740696-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYy-lqJKjq1m0yBAX4r%2Fuploads%2FLRhasXHh6XnfX6AsxOko%2Fimage.png?alt=media&token=81c389b6-c8b0-43c2-a26e-7f5ee01d60c9) + +![img](https://3869740696-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYy-lqJKjq1m0yBAX4r%2Fuploads%2F57zu9JFBQunvzHoVKsvC%2Fimage.png?alt=media&token=5d255844-fec0-4287-a493-44d90c8d88f3) + +## Deploy a contract + +Click the "Deploy & Interaction" button on the right-hand side, which will bring up the deployment and interaction pages. Select the compiled contract and click "Deploy" to initiate the deployment (then confirm in Metamask). After successful contract deployment, the console will display the contract deployment result and relevant information. + +![img](https://3869740696-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYy-lqJKjq1m0yBAX4r%2Fuploads%2F6rkcZA6xBoCtRpYVM2cp%2Fimage.png?alt=media&token=a38b25f5-c15d-4621-97d6-0fdce7c138e0) + +In addition, you can click "Import Deployed Contract" to import a contract that has already been deployed for contract interactions. + +![img](https://3869740696-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYy-lqJKjq1m0yBAX4r%2Fuploads%2FLrJQS2V3i4xlCzSpqlXJ%2Fimage.png?alt=media&token=d1465e33-034d-414b-a7e9-41b0c069508e) + +## Contract interaction + +After a successful contract deployment, you can interact with the contract. Click on the deployed contract, choose the corresponding interface, and click "Submit" or "Get" to perform interactions. + +![img](https://3869740696-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYy-lqJKjq1m0yBAX4r%2Fuploads%2FqUmdHgsKhKzqCsCqotgp%2Fimage.png?alt=media&token=38ca1cc9-9c42-497b-b1e4-5e1173eace35) + +## Transaction Query + +Click on the transaction hash in the Output section to view the specific details of each transaction. + +![img](https://3869740696-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYy-lqJKjq1m0yBAX4r%2Fuploads%2FbyVtEZJW5HOzHxtw6mx2%2Fimage.png?alt=media&token=3b456fc1-40c8-4c91-889e-09ba4dd8e950) + +## IRISnet EVM Sandbox + +If you prefer using the command line for development, you can open the IRISnet EVM Sandbox, which comes pre-loaded with [Hardhat](https://hardhat.org/), [Truffle](https://trufflesuite.com/), [Brownie](https://eth-brownie.readthedocs.io/en/stable/) [Ganache](https://trufflesuite.com/ganache/), [Git](https://git-scm.com/) and [Node.js V16](https://nodejs.org/en). + +![img](https://3869740696-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYy-lqJKjq1m0yBAX4r%2Fuploads%2F6WvZX7unWkGkXKV7OfEE%2Fimage.png?alt=media&token=1845bc06-3128-44e4-9ec3-9c3e7e18c44d) + +If you've started a process on a port in the Sandbox and wish to access that port, please refer to [ChainIDE - Port Forwarding](https://chainide.gitbook.io/chainide-english-1/port-forwarding).