Skip to content

Commit

Permalink
Merge pull request #2896 from xiadd/master
Browse files Browse the repository at this point in the history
Add docs for ChainIDE
  • Loading branch information
towerkyoto authored Dec 28, 2023
2 parents a2ac8c2 + 6507c67 commit a5eb1d6
Show file tree
Hide file tree
Showing 4 changed files with 220 additions and 76 deletions.
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.

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

0 comments on commit a5eb1d6

Please sign in to comment.