Repository
https://github.com/stonecoinproject/stonem-frontend
Continuing with the development of the front-end for the masternodes management client, our last update got us on the path to a steadier, more modern work process. This update adds the wallet funding screen alongside some base primitive components that may be extended as part of the code-base. Examples of such base primitive components include the <Triangle/> component which may be configured for use as a caret or indicator arrow.
Changes / New Features.
- Implement wallet funding screen.
- Implement configurable
<Triangle/>component that can be composed into complex components.
Details
The wallet funding screen is accessible on the route /add-wallets thanks to the fabulous react-router-modal component . The core challenge faced here (kept me stuck for hours really) was keeping the backdrop visible when the modal is triggered by clicking the icon on the sidebar. To accomplish this, we had to:
- Get rid of the
Switchparent context and change to using route render props callback function as the renderer. - Use wildcard
(*/{foo})matching for the route path - Set the current route (from where the modal is triggered) as the parent path using the
matchobject.
What's the pizzazz about a simple triangle generator component anyway? Throughout the course of building out this client, a lot of user interface elements will leverage triangles, circles and squares of all sorts, shapes and sizes. The key to sustainable development is keeping code reusability to the maximum and never having the reinvent the wheel twice. This ensures we never need to bloat the code base. The triangle can be configured to any size, background or direction thanks to the map below.
The bottomWidthvariable is calculated relative to a computed scaling factor and provided size parameters. This ensures all sides stay equidistant from each other.
Pictured below is the code health analysis from Code Climate. Possible next approach is a refactor to take care of code smells and duplication.
What's Next?
- Provide in-depth code documentation for existing components.
- Refactor existing code for improved code health ratings.
- Add masternodes control panel screen.
Commits
Add route dependent active state to sidebar components.
Add code documentation and coverage tests
Add composable <Triangle /> component
Switch to theme props for Input styled components
Select wallet address input text upon field focus