Monitor recent blocks and its transactions with value.
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.jsis the entry point.
redux-observable/rxjscodes to retrieve block information.
web3connection is wrapped in
tests/contain all related tests
The project also use
- Loading svg icon from https://github.com/jxnblk/loading/
- Bootstrap theme from bootstrap and reactstrap
- auto deploy latest commits to github page via ghpage-auto-deploy (my project).
- EditorConfig to maintain consistent coding style
- Follows gitemoji (meaningful commit emoji messages) commit log for fun
When windows onload (defined in
index.js), Blocks data are fetched through
watchBlocks functions (defined in
epics/). Then, block data is processed and saved to redux store (defined in
App.js is monitoring the store change and update components accordingly.
There are 3 components in
Header shows project title and the latest Block number.
BlockList lists recent 10 blocks,
TransactionList shows transactions with value in the selected block.
In the project directory, you can run:
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.
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
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
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)
- User can navigate up and down with
shift-tabkey without mouse.
captionis 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.
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.
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
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.
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.