kitabu-chain-explorer/pages/index.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>
}