A collection of webcomponents using AION GraphQL project
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.editorconfig
.gitignore
LICENSE
jest.config.js
package-lock.json
package.json
readme.md
stencil.config.js
stencil.config.ts
tsconfig.json

readme.md

Built With Stencil

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://cdn.jsdelivr.net/npm/aion-gql-webcomponents@x.x.x/dist/aion-gql-webcomponents.js"></script>

OR

<script src="https://unpkg.com/aion-gql-webcomponents@x.x.x/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>
  1. To pay to any address, don't provide "to" property.
<aion-pay gql-url="https://<aion-gql-host>/graphql"></aion-pay>
  1. 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>
  1. 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