In previous posts we’ve introduced Bitfinex Report 2.0 and the Bitfinex Reports desktop version. As our reporting tools are now fully open-sourced, it’s time to talk more about the UI design and its implementation.
Reporting Tool Libraries
At Bitfinex we strive to provide the best array of tools for traders. Our Reporting Tool 2.0, which places open-source development at the core, is just the start.
Our reporting tools use React (create-react-app), Redux and redux-saga as the core architecture, and use Blueprintjs as the UI framework.
To continuously improve code quality we have conduct unit tests via jest, auto style check by eslint and the lint will be triggered automatically before commit via husky.
Users interested in how the reporting tools are composed can get the source using github.com/bitfinexcom/bfx-report-ui, following the instructions to setup and start making some changes.
Code organization in the Reporting Tool
We put React components in src/components and src/ui. src/components contains main page sections like header, dialogs, and sections reflect to each menu sections like Ledgers, Trades. src/ui contain widgets that are used to compose the page section, such as DateFormatSelector, ExportButton.
To manage UI states we adopt re-ducks-like state structure. Since our page sections are mostly independent, organize related redux files in a folder instead of putting them separated in constants/, actions/, reducers/ makes the code more easy to reference.
Take ledgers for example. We have following structure in src/state/
So when we want to change the ledgers UI or the related behaviour, we can anticipate checking components/Ledgers/ and state/ledgers/ first.
Interact API with Redux-Saga
bfx-report (and Bitfinex-api-node) provides all the underlying features of the Reporting Tool. Bfx-report-ui interact with bfx-report via the REST api. The interaction is asynchronized. Redux actions and redux-saga makes the interactions clean and easier to manage in a unidirectional way.
The flow is unidirectional:
- User interact with UI to trigger(dispatch) an action ->
- Redux-saga can monitor certain actions, and reference the current state to interact with API ->
- Redux-saga call the API, and update state based on the returned data ->
- UI is updated when the state is changed
Feedback or improvement ideas?
If you have additional feedback for how we can continue to improve our tools, don’t hesitate to reach out to us! Our team can be found across Telegram, Reddit as well as via feedback-dev@bitfinex.com and support@bitfinex.com; Comment below is welcome! We encourage you to get in touch!
