STONEm Front-end Development Update: Add Wallets Screen.

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 Switch parent 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 thematch object.

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

Github Account

https://github.com/creatrixity