STONEm Client Development: Building A Front-end Client for a Rock S...

Repository

https://github.com/stonecoinproject/stonem-frontend

Pull request

Project Refactoring, Test Suite Development and Development of Masternodes Screen.

About

STONE is an emerging cryptocurrency ecosystem that seeks to create an interconnected secure and encrypted network. To do this, as key to its initial phase, a cloud-based masternode hosting solution that will use the STONE cryptocurrency as the main form of payment must be developed.

Currently it is possible to create STONE masternodes from the shell interface but the process is pretty technical and not very friendly. We hope to eliminate this tedium through a simple, fun interface accessible anywhere in the world.

Defining the Stack: Challenges Arising.

In setting up the STONEm front-end stack: a lot of technical, research based decisions had to be made. Having seen multiple open source projects devolve into an intangible mess of buggy, spaghetti code—an unmaintainable heap—these steps were taken:

Static code analysis is enforced with Typescript as the static typing compiler of choice.
Strict linting was enforced to sustain top code quality. The project adheres to a strict interpretation of Airbnb's lint rules adapted for Typescript
Unit and end-to-end tests are written to guarantee correct behavior in production. We use a combination of functional, unit and e2e tests to achieve higher code coverage levels. We use Jest, Enzyme and react-testing-library
Unidirectional data flow is achieved using Redux.
Code organization and architecture was heavily inspired by an article published by @fat
Rebass, Styled Components and Styled Systems are used to keep styles lightweight and modular.

Technology Stack

TypeScript (v3.1.4 and greater).
React with Redux.
Rebass & Styled Components.
Jest with Enzyme and React-testing-library.
Tslint with tslint-config-airbnb.

A Brief Peek into the Code.

With the premium on automated testing enforced within STONEm's front-end, its really important to test correctly. Our testing strategy from unit tests to end-to-end tests involve testing the interface exactly as a user would. This means less emphasis on testing code constructs and more emphasis on testing behaviour. In scenarios were no user interactions are provided yet, we may test implementation details such as in the example below.

Here's a simple unit test for the <FilterButton /> component available at src/components/FilterSuite/filterButton.spec.tsx.

test('A `Dot` element is rendered when the filter button is selected', () => {
    const {
        queryByTestId,
        unmount
    } = render(<FilterButton isSelected/>);

    const dot = queryByTestId('dot');
    expect(dot).toBeInstanceOf(HTMLElement);

    unmount();
})

The FilterButton component below has data-testid DOM nodes useful for hooking into our tests. No contract has been enforced so far since the implementation details are not fully formed.

In src/components/FilterSuite/filterButton.tsx:

import * as React from 'react';
import { Button } from 'rebass';
import { Dot } from '../UI';
import { theme } from '../../config';

const filterButton = ({ isSelected, children }:any) => (
  <Button
    px={3}
    variant={'default'}
    data-testid={'filter-button'}
  >
    {/*
      If `isSelected` is true, render a  within the button.
    */}
    {isSelected &&
      <Dot
        theme={theme}
        css={{
          position: 'absolute',
          top: 3,
          right: 3,
        }}
        data-testid={'dot'}
      />
    }
    {children}
  </Button>
);

filterButton.defaultProps = {
  isSelected: false,
};

export default filterButton;

Features.

View all masternodes created by a STONE user.

Roadmap

Add capacity to create STONE masternodes directly from the interface.
Masternodes remote management (spin up, pause, power down) from web interface.
Facilitate creation of STONE wallet for STONErs.
STONE wallet management all in one location.
Include Continuous Integration (CI)/Continuous Deployment strategies alongsides a staging server for QA tests.
Better, more detailed Github & component documentation.