Aion GQL WebComponents

A collection of webcomponents using AION GraphQL.
Compatible with any existing javascript frameworks like Angular, React or Plain JS.

GitHub Aion GraphQL

Getting started

Add the latest version of aion-gql-webcomponent javascript to your html and the following script tag.

  var global = global || window;

<script src=""></script>

or for node,

npm i aion-gql-webcomponents


A webcomponent which can be used to transfer AION coin. This component encapsulates the complex logic of transaction signing and sending to AION kernel through aion graphql server. 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. Later it will be extended to support Ledger.

As the component uses Shadow DOM, the custom styling can be applied through some standard css hoooks.

All of the below examples send transactions through, a free AION GraphQL instance for AION community.

1. Pay to any address with default button style

<aion-pay gql-url="https://[aion_gql_host]/graphql"></aion-pay>

2. Pay to a given address with default button style

<aion-pay to="to_address" gql-url="https://[aion_gql_host]/graphql"></aion-pay>

3. With custom text and background but with AION icon on the button. Pay to a given address.

<aion-pay to="to_address" gql-url="https://[aion-gql-host]/graphql" button-text=[custom_text]></aion-pay>

4. With custom style. Pay to a given address.

<aion-pay to="to_address" gql-url="https://[aion-gql-host]/graphql">[custom_text_image]</aion-pay>

AION Blocks

A webcomponent to show the recent blocks on AION Blockchain. It polls the AION kernel through AION GraphQL server. 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>

More components. Coming soon ...

If you like to donate to the project