Webcomponents using AION GraphQL

Demo

To use:

Add following in the tag (Will be fixed in future)

 <script>
    var global = global || window;
  </script>

Import aion-gql-webcomponents.js

<script src="https://unpkg.com/[email protected]/dist/aion-gql-webcomponents.js"></script>

Webcomponents

1. aion-blocks: Shows recent AION mainnet blocks
2. aion-pay: Supports payment in AION coin

Use aion-blocks component

<aion-blocks limit={limit} duration="{polling time in sec}" gql-url={graphql_endpoint}></aion-blocks>

Example:

<aion-blocks limit="8" duration="10" gql-url="https://<host>/graphql"></aion-blocks>

Use aion-pay component

A webcomponent to support payment using AION coin. A sender account can be accessed by providing private key or AION keystore file.

If "to" property is mentioned, the payment can only be done to the mentioned address. To enable send to any address, don't provide "to" address in the tag.

Usage:

1. Default button. Pay to a given address

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

2. To pay to any address, don't provide "to" property.

<aion-pay gql-url="https://<aion-gql-host>/graphql"></aion-pay>

3. With a custom text 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 a custom content in the pay button. It will override both default icon and text.

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

Examples:

<aion-pay to="0xa01112158d69a368dfebb9db63a903738cxxxxxxxxx" gql-url="http://localhost:8080/graphql"></aion-pay>
<aion-pay gql-url="http://localhost:8080/graphql"></aion-pay>
<aion-pay to="0xa01112158d69a368dfebb9db63a903738cxxxxxxxxx" gql-url="http://localhost:8080/graphql">Pay By AION</aion-pay>

Styles:

Aion Pay component also exposes few style variables which can be used to customize the style of the component. Example: button color, button font family etc.

--pay-button-color: <button_background_color>;
--pay-button-font-weight: <button font weight>;
--pay-button-font-family: <font family for the button text>;
--pay-button-font-style: <button font stye>;

Example:

<style type="text/css">
aion-pay {
  --pay-button-color: #BB86FC;
  --pay-button-font-weight: bolder;
  --pay-button-font-family: "Comic Sans MS", "Comic Sans", cursive;
  --pay-button-font-style: normal;
}
</style>

Development

git clone https://github.com/satran004/aion-gql-webcomponents.git

npm install

To run local dev server

npm start

To Build

npm run build