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.

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.

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.

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.

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.

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.

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:

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 .