async app

index.js

import React, { Component } from 'react'
import { withWeb3 } from './../Web3Provider'
import { BlockCard } from './../BlockCard/BlockCard'
import { CardsContainer } from './primitives'
import ContentLoader from 'react-content-loader'


const Loader = props => (
  <ContentLoader
    height={97}
    width={400}
    speed={2}
    primaryColor={"#f3f3f3"}
    secondaryColor={"#ecebeb"}
  >
    <rect x="70" y="15" rx="4" ry="4" width="117" height="6.4" />
    <rect x="70" y="35" rx="3" ry="3" width="85" height="6.4" />
    <rect x="4" y="5.27" rx="0" ry="0" width="60.14" height="42.16" />
  </ContentLoader>
)

class App extends Component {
  state = {
    blocks: [],
    transactions: [],
    loading: false,
    selected: []
  }

  async componentDidMount() {
    const blockNumber = await this.handleGetBlockNumber()
    this.handleGetLatestBlocks(blockNumber)
  }

  handleGetLatestBlocks = async blockNumber => {
    for (let i = 0; i < 10; i++) {
      this.setState({ loading: true })
      const { blocks, transactions } = this.state
      const newBlock = await this.handleGetBlock(blockNumber, i)
      if (newBlock) {
        this.setState({
          blocks: [...blocks, newBlock],
          loading: false,
          transactions: [
            ...transactions, {
              blockHash: newBlock.hash,
              transactions: newBlock.transactions
            }
          ]
        })
      }
    }
  }

  handleGetBlockNumber = async () => {
    const { web3: { eth } } = this.props
    try {
      return await eth.getBlockNumber()
    } catch (e) {
      throw new Error('Failed to fetch Block Number', e)
    }
  }

  handleGetBlock = async (blockNumber, i) => {
    const { web3: { eth } } = this.props
    try {
      return await eth.getBlock(blockNumber - i)
    } catch (e) {
      throw new Error('Failed to fetch Block', e)
    }
  }

  handleGetTransaction = async hash => {
    const { web3: { eth } } = this.props
    try {
      return await eth.getTransaction(hash)
    } catch (e) {
      throw new Error('Failed to fetch Block', e)
    }
  }

  handleOnBlockCardClick = async hash => {
    const { transactions } = this.state
    const selected = transactions.filter((item) => item.blockHash === hash && item).pop()
    const result = await Promise.all(selected.transactions.map(async (item) => await this.handleGetTransaction(item)))
    this.setState({
      selected: result
    })
  }

  render() {
    const { blocks } = this.state
    return (
      <CardsContainer>
        {blocks.map(block =>
          <BlockCard 
            number={block.number}
            timestamp={block.timestamp}
            miner={block.miner}
            txns={block.transactions.length}
            key={block.hash}
            hash={block.hash}
            onCardClick={this.handleOnBlockCardClick}
          />
        )}
        {this.state.loading && <Loader />}
      </CardsContainer>
    );
  }
}

export default withWeb3(App)