135 lines
3.1 KiB
Vue
135 lines
3.1 KiB
Vue
<template>
|
|
<v-container>
|
|
<v-row class="d-flex justify-space-beetween">
|
|
<v-col cols="12">
|
|
<v-form>
|
|
<v-text-field
|
|
background-color="white"
|
|
append-icon="mdi-magnify"
|
|
label="Search by Address / Txn Hash / Block"
|
|
outlined
|
|
clearable
|
|
></v-text-field>
|
|
</v-form>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row v-if="loaded" class="d-flex justify-space-beetween">
|
|
<v-col cols="12" sm="6" lg="4">
|
|
<info-card
|
|
icon="mdi-pound"
|
|
title="Block Height"
|
|
:sub-title="parseInt(latestBlock, 16)"
|
|
color="blue"
|
|
>
|
|
</info-card>
|
|
</v-col>
|
|
<v-col cols="12" sm="6" lg="4">
|
|
<info-card
|
|
icon="mdi-pickaxe"
|
|
title="Active Validators"
|
|
:sub-title="validatorCount"
|
|
color="red"
|
|
>
|
|
</info-card>
|
|
</v-col>
|
|
<v-col cols="12" sm="6" lg="4">
|
|
<info-card
|
|
icon="mdi-wallet"
|
|
title="Wallet Addresses"
|
|
:sub-title="walletAddresses"
|
|
color="green"
|
|
>
|
|
</info-card>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row v-else>
|
|
<v-col cols="12">
|
|
<loader h="100px"></loader>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row v-if="loaded" class="d-flex justify-space-between">
|
|
<v-col cols="12" lg="5">
|
|
<blocks-table :latestBlocks="lastFiveBlocks"></blocks-table>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row else class="d-flex justify-space-between">
|
|
<v-col cols="12" lg="5">
|
|
<loader h="100px"></loader>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
import InfoCard from '~/components/landing/InfoCard.vue'
|
|
import BlocksTable from '~/components/landing/BlocksTable.vue'
|
|
import Loader from '~/components/Loader.vue'
|
|
|
|
export default {
|
|
components: {
|
|
InfoCard,
|
|
BlocksTable,
|
|
Loader,
|
|
},
|
|
mounted() {
|
|
let nuxtCtx = this
|
|
if (process.client) {
|
|
const wsConnection = new WebSocket(
|
|
'wss://kovan.infura.io/ws/v3/0971e1402a8b46af9fd4996c5a612655'
|
|
)
|
|
|
|
wsConnection.onmessage = function (event) {
|
|
const blockData = JSON.parse(event.data)
|
|
if (blockData?.params) {
|
|
nuxtCtx.queueBlock({
|
|
height: blockData.params.result.number,
|
|
signer: nuxtCtx.$ethers.utils.getAddress(
|
|
blockData.params.result.author
|
|
),
|
|
})
|
|
}
|
|
}
|
|
|
|
wsConnection.onopen = function (event) {
|
|
this.send(
|
|
JSON.stringify({
|
|
method: 'eth_subscribe',
|
|
params: ['newHeads'],
|
|
id: 1,
|
|
jsonrpc: '2.0',
|
|
})
|
|
)
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
loaded: false,
|
|
blocksTable: [
|
|
{
|
|
text: 'Height',
|
|
value: 'height',
|
|
},
|
|
|
|
{
|
|
text: 'Miner',
|
|
value: 'miner',
|
|
},
|
|
],
|
|
}
|
|
},
|
|
methods: {
|
|
queueBlock(opts) {
|
|
this.lastFiveBlocks.unshift(opts)
|
|
this.latestBlock = opts.height
|
|
|
|
if (this.lastFiveBlocks.length > 5) {
|
|
this.lastFiveBlocks.pop()
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
}
|