Building an Aion DApp using AIWA and NodeSmith

BlockX Labs
Dec 18, 2018 · 7 min read
Image for post
Image for post

By: Jesse Abramowitz
Blockchain Developer

Recently, the team here at BlockX Labs have built some incredible developer tools for the Aion Network. One of my jobs was to use the tools to build a DApp.this was a great experience and gave me all of this knowledge which I want to share with you all so you can go forth and use these tools to #buidl.

This article is mainly for connecting your smart contract to your front-end to create a usable DApp. I have already deployed a contract and will show you how to connect to it. To deploy your own personal contract, AION has provided a great how-to here.

Step 1: AIWA

If you have been following AION or BlockX Labs, you may know that recently we have released the beta version of AIWA! A chrome extension DApp explorer wallet. It functions very similar to Metamask so if you are already an experienced DApp developer this should be easy! If not, not to worry, this guide is for you.

Firstly, download AIWA here. If you want to bypass my article and go straight to the documentation you may do so — there is a developers portal button on the top right. I helped write the documentation so if you feel it isn’t complete please feel free to send me an e-mail or open an issue on our Github.

Log in, make your account feel free to tell us what you think on our Twitter.

Since it is currently in beta, the network should be set to mastery, but eventually, the prod release will be coming out and it will default to main-net. Make sure you switch to Mastery test net in the top right corner.

Image for post
Image for post

Step 2: Universal Faucet

Next thing you need to do is fund your account. To make this easy, the team at BlockX Labs also decided to build a universal faucet. It can send you 10 Aion mastery tokens once every 24 hours. It was a blast to build and will soon support other blockchains. It can be found here.

Image for post
Image for post

You can copy your address by scrolling over it in AIWA and then just input it in the faucet and receive your tokens.

Awesome, the setup is complete and now it is time to buidl.

Step 3: Buidl

This is where our paths will deviate. I built a sample DApp and have hosted it here. I will show you how to interact with it and how to Buidl one yourself. However, how you chose to build your DApp is on you, whether it is through React or Vue or Angular. I purposely built mine in Jquery so the code would look very simple and easy to read for a demo, you can find the code here.

So let’s take a look at what is going on. AIWA injects the aion-web3 library into your DApp’s webpage. So on load you can grab your contract instances like this:

window.onload = () => { ContractInstance = aionweb3.eth.contract(CONTRACT_ABI).at(CONTRACT_ADDRESS)

Provided in my github link is a contract ABI and address. Feel free to copy it for testing. In the coming weeks, I will write another article about how to deploy a custom contract.

Each framework handles this a little different so it’s important to check the documentation and figure out the best way to grab web3 and your contract instances based off whichever framework you are using.

Next, we can now interact with our contract. I chose to do this all with buttons: simple, onClick run this function. There are two types of function I want to highlight, reading the counter and changing the counter.

Step 3.1: Get information from user

AIWA is a fantastic tool, allows anyone to read and write from the blockchain while surfing the web. The way this is done is by having AIWA inject a Web3.js library into each webpage. It also injects the user’s account information. This isn’t insecure but it does leave something to be desired in the terms.

So we came up with something called privacy mode. This is easy to deal with as a developer if you are aware of it. What happens is it prompts a user to be asked by AIWA to inject their account information into the DApp before doing so. This only happens when privacy mode is on.

Image for post
Image for post

This is easy to handle as a DApp developer and only effects things that take an account address like write functions (and some read functions).

aiwa.enable();

There are many places to put this for example you can put it after onLoad. Like this.

However, I think it is nicer to put it in a button as shown here.

Image for post
Image for post

Step 3.2: Read

A read function is a function that reads from the blockchain. The function is free and does not require a transaction. We pretty much ask a node to call this function and it returns a value. The solidity functions has a view or constant tag:

function getCount() public constant returns (int) { return count; } 

When we click the get count button, AIWA will ask the node what the state of the counter is by calling the getCount function and it will return it.

The way to do this through a DApp is like this:

count = simple.getCount();

It is really simple, once you have the contract instance (which is called simple for me), then call the function name.

After connecting AIWA will return the account address for the DApp to use and whitelist the DApp.

Step 3.3: Write

The next type of function changes the counter by either increasing or decrementing it. Since we are changing the state of the blockchain it requires a transaction and AIWA to sign a message with a user’s private keys.

To test this out on the sample DApp: Click increment counter (AIWA should pop up). Send the transaction and then you should be returned with a hash. If you wait 30 seconds for the transaction to be confirmed and hit get count again the counter should now be incremented by 1.

Image for post
Image for post

You can see in the photo AIWA popping up. It is sending a transaction with no value to the contract. The data is the function hash that it gets from the contract ABI. The function takes zero parameters and it executes the arguments which increment the counter.

Image for post
Image for post

The function returns a hash and when the transaction is confirmed you can call the get count again and see that it has increased by one. You can also view this on the aion block explorer by clicking the transaction in the transaction history of AIWA.

This is also really simple to do programmatically. All you need to do is call the contract instance then function name.

const txHash = await simple.incrementCounter();

You also need to async await or a promise because you need to wait for the math call of web3 to return a hash.

Try Catch

If you look at the code in my sample DApp you will notice that all the write functions are in try catches. Of course this is up to you how you want to handle things. AIWA will return different information to the DApp depending on the user’s choices. If they accept the transaction it will return a hash like I have show you before.

If they reject the transaction then the DApp can be notified if you plan for it. For example:

Image for post
Image for post

Nodesmith

Huge shoutout to Nodesmith. Nodesmith is an endpoint to hit that is really awesome and easy to use. We used it today because AIWA uses it. Pretty much it is infura for AION and it made AIWA possible.

Conclusion

When it comes to building a DApp it is easy with a tool like AIWA. Easy to extents, having to create the front end and architect the solution and use the blockchain is hard, but connect to the blockchain we got you fam.

Keep playing around with the sample DApp and reading the docs there is more functionality but most importantly go forth and buidl!

Do you have better DApp building tips for us? Let us know in the comments or e-mail Jesse at jabramowitz@blockxlabs.com .

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store