Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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)
Add Comment
Please, Sign In to add comment