AION GQL WebComponents — AION Blockchain + GraphQL + WebComponents
In my last few posts, I have mostly written about development tools or development frameworks to develop applications on AION blockchain. Initially I was planning to write few posts about how to use AION GraphQL APIs to interact with AION blockchain for various different scenarios. But instead of writing few example applications, I thought it will be useful if I can build some real use case using these APIs. So today I am going to cover something which might be useful for both developers and end users.
In this post, I am going to talk about three technologies. The supporters of these technologies believe that these are going to dominate their respective areas in coming years. So first let’s briefly go through the followings :
- AION Blockchain
- AION GraphQL
- WebComponents
- AION Blockchain : From Wikipedia, Blockchain is “an open, distributed ledger that can record transactions between two parties efficiently and in a verifiable and permanent way”.
Much like the internet, open blockchain networks offer a fertile space for innovation where anyone in the world can participate.
The heart of any blockchain is a consensus mechanism. A consensus mechanism helps everyone on the network agree, or reach consensus, on a shared computation and records of that computation.
AION is a public blockchain with above characteristics. Anyone can develop applications on AION platform by inheriting all the properties provided by the platform.
The blockchain technology is posed to challenge many of the existing centralized services and also open the unlimited possibilities of sharing economy.
2. AION GraphQL : AION GraphQL project provides an GraphQL API server for AION blockchain.
GraphQL is a new way to create APIs. Developers use a strongly typed query language to define both request and response. This allows consuming application to specify exactly what data it needs from the API. It provides an another alternative to REST.
Unlike REST, GraphQL server ideally exposes a single endpoint and all GraphQL queries are posted through POST method to that endpoint.
So the same endpoint is shared across multiple APIs.
GraphQL has potential to become a next big thing in API design.
3. WebComponents : Web components are a set of standardized low-level browser APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.
With Custom Element, which is part of WebComponent standard, developer can create reusable components using nothing more than vanilla JS/HTML/CSS.
These components can run inside the browser like any other standard HTML components. And at the same time can co-exist and interact with other JS framework like Angular, React, Vue.
The result is less code, modular code and re-usability in true sense in web development.
The modern browsers are slowly getting there to support the full features of webcomponents spec. But with polyfills, you can develop and run webcomponents in the non supporting browsers.
So one of the common characteristic of above three technologies is sharing or re-usability.
So let’s try to use these three technologies together and do something useful.
Recently I have been working on an opensource project, Aion GQL WebComponents. The idea is to create a set of reusable UI components for AION blockchain using AION GraphQL as API layer and WebComponents as UI, mainly using Custom Element and Shadow DOM.
GitHub : https://github.com/satran004/aion-gql-webcomponents
Demo / Project Home : http://webcomponents.aion-graphql.com/
This project also provides a good reference for how to use AION GraphQL APIs.
The first MVP of Aion GQL WebComponents is ready.
Currently, there are two supported components :
- Aion Pay (aion-pay)
- Aion Blocks (aion-blocks)
To use these components in your web app, you just need to include the following javascript file in your html page. Make sure to use the latest version .
<script src="https://unpkg.com/aion-gql-webcomponents@x.x.x/dist/aion-gql-webcomponents.js"></script>Aion Pay (aion-pay) : A web component which can be used to transfer AION coins between two accounts. This component encapsulates the complex logic of transaction signing and encoding. It then sends the raw signed transaction to AION kernel through AION GraphQL API layer.
The transaction encoding and signing are done in client side. So the private key or password never goes to the server. Currently sender’s account can be unlocked by providing a keystore file or private key.
The plan is to provide support for Ledger in future. As the component uses Shadow DOM, the custom styling can be applied through some standard CSS hooks.
For transaction signing and keystore functionality, aion-keystore project provided a big help. I have extracted only the required logic to keep the component light weight and browser complaint.
Here’s a small demo before we go into details :
How to use ? Few examples:
> To render a default pay button. Using this you can transfer AION coin from any sender account to receiver account.
<aion-pay gql-url="https://[aion_gql_host]/graphql"></aion-pay>> To support payment only to a pre-defined address, “to” property needs to be specified in the component. Also text and style can be customized.
<aion-pay to="to_address" gql-url="https://<aion-gql-host>/graphql">[custom content]</aion-pay>or
<aion-pay to="to_address" gql-url="https://<aion-gql-host>/graphql" button-text=[custom_text]></aion-pay>You can visit the project website to check some working demo. The components on the project page are connected to AION mainnet and are fully functional.
For more details, visit GitHub repo.
Disclaimer: You can try this component at project website or aion-graphql project. But currently it only supports account unlock through private key and keystore file. As you know, providing your private key on internet is not secure. But if you are an advanced user / developer and want to try this. I would recommend, you create a separate account and transfer a small amount of AION and try with keystore file option.
The GraphQL queries used in this component.
To get account’s nonce and current nrgPrice in one call :
To get account balance :
To post signed transaction :
If you really like this project, there is a donation button on Aion GraphQL project site which is using this component. :)
Aion Blocks (aion-blocks) : This component shows the recent blocks in AION Blockchain. It polls AION kernel in regular interval through Aion GraphQL API. The polling duration needs to be provided as an property. Minimum duration, 10sec.
<aion-blocks limit={limit} duration="{polling time in sec}" gql-url={graphql_endpoint}></aion-blocks>
Get recent blocks Query :
What’s next ?
Some of the new components I plan to add in future are :
> aion-sign: Using this component any random text can be signed and sent to AION kernel as a transaction including payload for contract execution.
> aion-account: Provide new account creation and account details functionality.
> aion-search: Provide search functionality
If you are interested in this project or have some suggestions or feedback, please drop a note in the comment section.
Resources:
GitHub : https://github.com/satran004/aion-gql-webcomponents
Project site: http://webcomponents.aion-graphql.com
AION Blockchain : https://aion.network
AION GraphQL : https://aion-graphql.com
