Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add docs for ChainIDE #2896

Merged
merged 1 commit into from
Dec 28, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 77 additions & 76 deletions docs/.vuepress/config.js
Original file line number Diff line number Diff line change
@@ -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"],
]),
},
},
}),
});
51 changes: 51 additions & 0 deletions docs/chainide-for-irisnet/configuration.md
Original file line number Diff line number Diff line change
@@ -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
23 changes: 23 additions & 0 deletions docs/chainide-for-irisnet/cosmos-usage.md
Original file line number Diff line number Diff line change
@@ -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.
69 changes: 69 additions & 0 deletions docs/chainide-for-irisnet/usage.md
Original file line number Diff line number Diff line change
@@ -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.
taramakage marked this conversation as resolved.
Show resolved Hide resolved

![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.
taramakage marked this conversation as resolved.
Show resolved Hide resolved

![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.
taramakage marked this conversation as resolved.
Show resolved Hide resolved

![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).
taramakage marked this conversation as resolved.
Show resolved Hide resolved

![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.
taramakage marked this conversation as resolved.
Show resolved Hide resolved

![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.
taramakage marked this conversation as resolved.
Show resolved Hide resolved

![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.
taramakage marked this conversation as resolved.
Show resolved Hide resolved

![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).
taramakage marked this conversation as resolved.
Show resolved Hide resolved

![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).
Loading