137 lines
3.0 KiB
Vue
137 lines
3.0 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 class="d-flex justify-space-beetween">
|
|
<v-col cols="12" sm="6" lg="4">
|
|
<info-card
|
|
icon="mdi-cube-scan"
|
|
title="Block Height"
|
|
:sub-title="latestBlock"
|
|
color="blue"
|
|
>
|
|
</info-card>
|
|
</v-col>
|
|
<v-col cols="12" sm="6" lg="4">
|
|
<info-card
|
|
icon="mdi-pickaxe"
|
|
title="Active Validators"
|
|
:sub-title="12"
|
|
color="red"
|
|
>
|
|
</info-card>
|
|
</v-col>
|
|
<v-col cols="12" sm="6" lg="4">
|
|
<info-card
|
|
icon="mdi-wallet"
|
|
title="Wallet Addresses"
|
|
:sub-title="25466"
|
|
color="green"
|
|
>
|
|
</info-card>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row class="d-flex justify-space-between">
|
|
<v-col cols="12" lg="7">
|
|
<v-data-table
|
|
calculate-widths
|
|
:headers="blocksTable"
|
|
:items="latestBlocks"
|
|
>
|
|
<template v-slot:item="{ item }">
|
|
<tr>
|
|
<td>{{ item.height }}</td>
|
|
<td class="truncate">{{ item.hash }}</td>
|
|
<td class="truncate">{{ item.miner }}</td>
|
|
</tr>
|
|
</template></v-data-table
|
|
>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
mounted() {
|
|
let nuxtCtx = this
|
|
if (process.client) {
|
|
const wsConnection = new WebSocket('wss://ws.rpc.grassecon.net')
|
|
|
|
wsConnection.onmessage = function (event) {
|
|
const blockData = JSON.parse(event.data)
|
|
if (blockData?.params) {
|
|
nuxtCtx.queueBlock({
|
|
height: blockData.params.result.number,
|
|
hash: blockData.params.result.hash,
|
|
miner: blockData.params.result.author,
|
|
})
|
|
}
|
|
}
|
|
|
|
wsConnection.onopen = function (event) {
|
|
this.send(
|
|
JSON.stringify({
|
|
method: 'eth_subscribe',
|
|
params: ['newHeads'],
|
|
id: 1,
|
|
jsonrpc: '2.0',
|
|
})
|
|
)
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
latestBlock: '0x1',
|
|
blocksTable: [
|
|
{
|
|
text: 'Height',
|
|
value: 'height',
|
|
},
|
|
{
|
|
text: 'Hash',
|
|
value: 'hash',
|
|
},
|
|
{
|
|
text: 'Miner',
|
|
value: 'miner',
|
|
},
|
|
],
|
|
latestBlocks: [],
|
|
}
|
|
},
|
|
methods: {
|
|
queueBlock(opts) {
|
|
this.latestBlocks.push(opts)
|
|
this.latestBlock = opts.height
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
}
|
|
|
|
<style>
|
|
.container {
|
|
max-width: 1250px;
|
|
}
|
|
|
|
.truncate {
|
|
max-width: 200px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
</style>
|