aion-gql-webcomponents
Version:
AION Webcomponents using AION GraphQL
127 lines (126 loc) • 4.89 kB
JavaScript
export class AionBlocks {
constructor() {
this.blocks = [];
this.BLOCKS_QUERY = `
query blocks($first: Long) {
blockApi {
blocks(first: $first) {
number
hash
parentHash
nrgLimit
nrgConsumed
timestamp
txDetails {
from
to
value
txHash
}
}
}
}
`;
}
componentDidLoad() {
this.fetchBlocks();
let duration = this.duration;
if (this.duration < 10)
duration = 10;
setInterval(() => {
this.fetchBlocks();
}, duration * 1000);
}
fetchBlocks() {
fetch(this.gqlUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ "query": this.BLOCKS_QUERY, "variables": { "first": this.limit } }),
})
.then(res => res.json())
.then(res => {
console.log("fetched");
if (this.blocks)
this.blocks.splice(0, this.blocks.length);
let fetchedBlocks = ((res["data"])["blockApi"])["blocks"];
this.blocks = fetchedBlocks.map(b => {
let date = new Date(b.timestamp * 1000);
b.date = date;
return b;
});
});
}
render() {
return (h("div", { class: "aion-blocks panel box is-12-mobile" },
h("div", { class: "panel-heading" }, "Recent Blocks"),
h("br", null),
this.blocks.map((blk) => h("article", { class: "is-info box" },
h("div", { class: "heading" },
h("strong", null,
"#",
blk.number),
" \u00A0- ",
h("small", null,
blk.date.toDateString(),
"\u00A0",
blk.date.toLocaleTimeString()),
h("br", null),
h("small", null,
h("a", { href: "https://mainnet.aion.network/#/block/" + blk.number, target: "_blank" },
h("i", null,
" 0x",
blk.hash,
"\u00A0")))),
h("div", { class: "content transactions" }, blk.txDetails.map((tx, index) => {
return (h("div", { class: "transaction", key: index },
h("div", { class: "columns" },
h("div", { class: "column is-two is-12-mobile" },
h("strong", null, "Tx #")),
h("div", { class: "column is-10 is-12-mobile" },
h("a", { href: "https://mainnet.aion.network/#/transaction/" + tx.txHash, target: "_blank" },
"0x",
tx.txHash,
"\u00A0"))),
h("div", { class: "columns" },
h("div", { class: "column is-two is-12-mobile" },
h("strong", null, "From")),
h("div", { class: "column is-10 is-12-mobile" },
"0x",
tx.from)),
h("div", { class: "columns" },
h("div", { class: "column is-two is-12-mobile" },
h("strong", null, "To")),
h("div", { class: "column is-10 is-12-mobile" },
"0x",
tx.to)),
h("div", { class: "columns" },
h("div", { class: "column is-two is-12-mobile" },
h("strong", null, "Value")),
h("div", { class: "column is-10 is-12-mobile" },
h("strong", null,
tx.value / Math.pow(10, 18),
" AION"))),
h("br", null)));
}))))));
}
static get is() { return "aion-blocks"; }
static get encapsulation() { return "shadow"; }
static get properties() { return {
"blocks": {
"state": true
},
"duration": {
"type": Number,
"attr": "duration"
},
"gqlUrl": {
"type": String,
"attr": "gql-url"
},
"limit": {
"type": Number,
"attr": "limit"
}
}; }
static get style() { return "/**style-placeholder:aion-blocks:**/"; }
}