[Informative] How to use ChainIDE for XDC

ChainIDE — Thu, 25 Jan 2024 06:46:50 +0000

How to use ChainIDE for XDC

ChainIDE for XDC Network offers a user-friendly and intuitive graphic user interface (GUI), streamlining the development process for both novice and experienced developers. Developers can seamlessly navigate through the development environment, reducing the learning curve and allowing them to focus on creating cutting-edge solutions. The following is a tutorial on how to use ChainIDE for XDC.

1. Create a new XDC Project

Visit ChainIDE and click the Try Now button on the front page as shown in the figure below.

Here, you can choose the login method as Github or choose Guest to continue without logging in. For this tutorial, select GitHub login, as later on, the use of the Sandbox requires users to log in with GitHub.

After successfully logging in, you will be able to view all the existing projects or create new projects. Select New Project to create a new XDC chain project.

From the popup window, select "XDC". Then, select a temple to create a new project.

2. Configure Wallet

The XDC IDE provides support for two wallets: Metamask and XDCPay 2.0. However, please note that Metamask and XDCPay 2.0 are not compatible. If both wallets are present, only Metamask will be activated.

If you do not have either Metamask or XDCPay 2.0 installed, the download links for each are provided below. Please install one of the wallets before continuing.

I. Metamask

The official download website for Metamask is: https://metamask.io/

II. XDCPay 2.0

The official Chrome Web Store address for XDCPay 2.0 is: https://chrome.google.com/webstore/detail/xdcpay-20/iidmfamdbddcbjmemafekkohbnfiblhp

After installing a wallet, please refresh the page.

Click on the Connect Wallet button in the top right corner of the screen and select Injected Web3 Provider to choose the wallet you would like to connect.

After connecting the wallet, Metamask users can follow the prompt in the bottom right corner of the screen to switch their wallet to the XDC Mainnet or Testnet networks.

XDCPay users must switch networks within their wallet to connect to their desired network.

Users can visit https://faucet.apothem.network/ and enter their wallet address to claim test tokens. If you are using Metamask, you must replace the "0x" at the start of your address with "xdc". For example, if your address was 0x82825C3fa24116F6ED719dd1e820DBD952c4D237, you would enter xdc82825C3fa24116F6ED719dd1e820DBD952c4D237 in the "Enter your XDC address" field.

3. Write a contract

Upon entering the project, the README.md file included in the folder will be automatically previewed.

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.

Click on a contract file to edit the code.

4. 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.

After successful compilation, the ABI and BYTE CODE will be displayed below, and you'll see a message in the console stating "Compile contract success."

5. Connect to XDC

Before deploying a contract, you need to click on Connect Wallet in the upper right corner and select to connect to JavaScript VM (used for testing, implemented in JavaScript) or Metamask or XDCPay (for deployment on the XDC blockchain).

6. 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 or XDCPay). After successful contract deployment, the console will display the contract deployment result and relevant information.

7. 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.

8. Transaction Query

Click on the transaction hash in the Output section to view the specific details of each transaction.

9. Verify the Contract

If the contract to be verified imports other contracts, the following are the steps to create a flattened file for your smart contract:

9.1 Activate the Flattener plugin

9.2 Choose a contract file you want to flatten

Before selecting the contract, you need to compile the contract.

9.3 Save the flattened file to directory under Explorer panel

9.4 View the flattened file and use it for verifying a smart contract

Overall, using ChainIDE's Flattener plug-in can help streamline the development and verification process for your smart contracts, making it easier to ensure that your code is properly organized and ready for verification.

9.5 To verify a smart contract, you need to access the corresponding blockchain explorer. After deploying the contract, click the button below to automatically navigate to the browser page for the corresponding contract

9.6 Click on the verify and publish link shown under the contract section

9.7 Once you click on the verify and publish link, you will be asked for the following:

Contract Address: The address of a deployed smart contract that you want to verify
Compiler Type: smart contract language
Compiler Version: The compiler version that you used to compile the smart contract

9.8 After that, you need to paste the flattened file you created in step 3, enter the contract name, and ensure that the Optimization is either on or off during the compilation process. Then, click Submit, and your smart contract will be verified

9.9 If there are no issues with your smart contract, it would be verified, and you'll be able to see an image similar to the one that is shown below

10. XDC Sandbox

If you prefer using the command line for development, you can open the XDC EVM Sandbox, which comes pre-loaded with Hardhat, Truffle, Brownie, Ganache, Git and Node.js V16.

If you've started a process on a port in the Sandbox and wish to access that port, please refer to ChainIDE - Port Forwarding.

For more information, please refer to ChainIDE for XDC.

Milestone 2 Delivery Report on ChainIDE for XDC

ChainIDE — Tue, 18 Jul 2023 04:11:01 +0000

We are proud to announce the successful wrap-up of Milestone 2. You can check the timestamped video available through the Dropbox link below just like last time. Now, we're moving onto Milestone 3, focusing on long-term stability and new feature development. We'll keep you updated as we go along, and don't hesitate to ask if you have any questions.

Proposal Link:

https://www.xdc.dev/blairqu/proposal-chainide-a-web-based-developer-tooling-platform-44a3

Milestone 1 Delivery Report:

https://www.xdc.dev/fengtaowu/milestone-1-delivery-report-on-chainide-for-xdc-f3l

Milestone 1 [Infrastructure-related] [Status: DONE]

Cloud-based IDE base functions:

Functional Module	Description
User system	Provide GitHub login and cloud cross-platform login for users and guests.
Project module	Provide both cloud and browser storage functions for projects, allowing developers to switch between storage modes based on individual needs.
File system	Support various file operation functions. Plus, include pull & push from GitHub/Gist.
Front-end support	Provide front-end editing, display, preview, and other functions that support multiple languages(JS, Html. CSS, Sol, Rust, etc).
Sandbox development environment	Provide a cloud-based Sandbox environment where users can run a terminal on ChainIDE XDC.

Milestone 2 [Chain-related] [Status: DONE]

Customized IDE features for XDC:

Functional Module	Description
Front-end UI	Design a customized style of UI for XDC.
Smart contract template	Provide smart contract templates for quick start development.
Wallet module	Provide a wallet module that allows users to check wallet information, and interact with the XDC through Metamask and XDC Wallet.
Editor	Provide common features of a Solidity language editor that meet the needs of most developers.
Plug-in system	Provide multiple web3 plugins to facilitate user operations such as JS VM, debugging, verification and open-source plugin system.
Terminal image support	Provide Terminal Images commonly used for XDC development.

Milestone 3 [Maintenance-related] [Status: IN PROGRESS] [Long-term]

Long-term maintenance & feature updates:

Functional Module	Description
Cloud storage	Provide long-term cloud storage support to ensure the long-term availability of ChainIDE XDC.
Software upgrade	Keep the SDK and image versions up-to-date to ensure software availability on a regular basis.EVM features released in the future will be added to XDC IDE.

Video Link: Milestone 2: https://www.dropbox.com/scl/fi/68w2hdbwgeljz6v28omjn/ChainIDE-for-XDC-Milestone-2.mp4?rlkey=s2by6regi0sos472e58mzye4a&dl=0

Details:

Test Website: https://staging-9589904a8a.chainide.com/s/dashboard/projects

1 - Smart contract template 00:14

2 - Front-end UI 00:27

3 - Editor 00:45

4 - Plug-in system 01:20

5 - Wallet module 04:37

6 - Terminal image support 12:17

Notes:

open-source plugin system: https://github.com/WhiteMatrixTech/chainide-plugin-doc

Developers Forum for XinFin XDC Network: ChainIDE