A small app to explore the latest blocks on Ethereum
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
src
.editorconfig
.gitignore
.travis.yml
README.md
deploy.sh
package.json
renovate.json
yarn.lock

README.md

dependencies Status travis Commitizen friendly JavaScript Style Guide

Monitor recent blocks and its transactions with value.

Folder Structure

This project was bootstrapped with Create React App.

The project structure look like this:

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    components/
    tests/
    App.js
    index.css
    index.js
    web3connection.js
    state/
      blocks/
        actions.js
        epics/    
        reducers.js
        types.js
      reducer.js
      status/
      store.js
      web3/
  • components/ contain all react components and src/App.js is the entry point.
  • state/store.js, actions and reducers contain redux related codes.
  • state/blocks/epics/ contain redux-observable/rxjs codes to retrieve block information.
  • web3 connection is wrapped in web3connection.js
  • tests/ contain all related tests

The project also use

Project architecture

Imgur

When windows onload (defined in index.js), Blocks data are fetched through quicklyGetBlock and watchBlocks functions (defined in epics/). Then, block data is processed and saved to redux store (defined in actions and reducers/). App.js is monitoring the store change and update components accordingly.

Imgur

There are 3 components in App.js. Header shows project title and the latest Block number. BlockList lists recent 10 blocks, TransactionList shows transactions with value in the selected block.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.

yarn test --coverage

Launches the test runner and generate the test coverage

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Code quality / readability / testability concern

The project follow Javascript Standard Style and use ES6+ syntax. Folder stucture and Project architecture are documented in above sections.

tests/ contain several kinds of testing

  • per component tests via snapshot testing
  • action and reducer unit test
  • redux-observable unit test

And continue integration via Travis CI is triggered per commit.

UX / visual concern

Apply minimal Bootstrap theme with half size of table cell padding. The looks and feel is consistent on desktop and mobile device.

Screenshot in Toshl

(Screenshot in Toshl)

Accessibility concern

  • User can navigate up and down with tab/shift-tab key without mouse.
  • caption is added to help users with screen readers to find a table and understand what it’s about <caption>List of blocks</caption>
  • unicode arrow is wrapped with <span aria-hidden="true"> tag so screen reader will ignore it.
  • When user does not have metamask installed, show the warning message.

Imgur

Percivable Performance concern

Do profiling with Chrome profiling tool and see no hard performance issue there.

Previously the transmonitor is designed to only watch the upcoming blocks, so user need to wait ~30s until the next block is mined.

Imgur

First, loading svg is added to make waiting more pleasent.

To improve the fetching speed, quicklyGetBlockEpic$ is added to quickly get the latest block and fetch block data via web3 getBlock api.

Imgur

Now user can see data more quickly, but there's no way to get other older blocks data. To fetch specific blocks data, getBlockEpic$ is added, so user can easier check previous blocks and now there's always a link for user to get the block data.

Imgur

After learned more about rxjs, concatAll is used in quicklyGetBlockEpic$ to fetch 10 recent blocks and contat all results in stream. Therefore user don't need to click the link to fetch the older block data.

Imgur