Best Practices (Frontend)

About

The majority of work in the web wallet happens in blockchain-wallet-v4-frontend.

Project structure

• src
  • assets
  • components
  • data
  • layouts
  • middleware
  • modals
  • providers
  • scenes
  • services
  • store

assets

This directory contains locale resources and images

• images
• locales

components

This directory contains shared/reusable components across the project. Don't be too eager to add components here, to qualify as a shared/reusable component you should be using it in at least 3 places.

• Alerts
• Announcements
• Balances
• ...

data

The data folder contains different redux modules specific to the front-end behavior.

It also encapsulates the redux modules available in the core.

• alerts
• analytics
• auth
• balance
• (components)[#components]
• ...

data/components

The data/components folder contains redux modules that correspond to scenes and modals in the frontend. Each folder should contain the following:

• actions.ts -> Collection of action creators. Example
• actionTypes.ts -> Collection of action types. Example
• reducers.ts -> Slice of state for the component. Example
• sagaRegister.ts -> Registering action types and sagas. Example
• sagas.ts -> Collection of action side effects. Example
• sagas.utils.ts (optional) -> Collection of reusable utility functions. [Example] (https://github.com/blockchain/blockchain-wallet-v4-frontend/blob/development/packages/blockchain-wallet-v4-frontend/src/data/components/borrow/sagas.utils.ts)
• selectors.ts -> Collection of selector functions for accessing slices of state. Example
• types.ts -> Collection of types for component. Example