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
• ...

What can I add here ?

Any component that

• behaves the same way
• looks similar, but needs to be reused in different pages or modals.

What can't I add here ?

Any component that

• is too specific
• has different behaviors
• you think is only going to be used once in the project
  • In that case, your custom component should live inside your page/modal

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 module 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
  • used for registering action types and sagas. Example
• sagas.ts
  • collection of side effects for actions. Example
  • required when an action has to compute some data, or when a flow of actions has to be executed
• sagas.utils.ts (optional)
  • collection of reusable utility functions. Example
• selectors.ts
  • collection of selector functions for accessing slices of state. Example
  • no transformation of data at this stage
  • scoped to what the reducer is handling and no more
• types.ts
  • collection of types for component. Example

layouts

This directory contains different layouts used by the different scenes.

• Public
  • used by Login, Register, Help, ... pages
• Wallet
  • used by all Wallet pages

middleware

Middlewares are fired when an action creator is dispatched.

• autoDisconnection
  • manage the timer starting after a user logins and display the AutoDisconnection modal when needed.
• matomoMiddleware
  • sends whitelisted actions and data to matomo.

modals

This directory contains different modals

• Addresses
• Bch
  • RequestBch
  • SendBch
• Borrow
• Btc
  • RequestBtc
  • SendBtc
• ...

providers

This directory contains different higher-order components

• AnalyticsTracker
  • HOC loading matomo iframe from wallet-helper
• ErrorBoundaryProvider
  • HOC handling react screen of death
• ModalEnhancer
  • HOC handling modal registration
• ThemeProvider
  • HOC handling application themes
• ...

scenes

This directory contains the different pages that can be accessed through the router. Scenes usually correspond to a data/components folder. All scenes are registered in app.tsx Scenes often contain at least:

• index.tsx
  • file connected to the store
  • preferably created using this snippet
• template.success.tsx
  • remote success template
  • preferably created using this snippet
• template.loading.tsx
  • remote loading template
  • preferably created using this snippet
• template.failure.tsx
  • remote failure template
  • preferably created using this snippet

All scenes are different and it's up to the developer to best determine their structure. Some scenes may contain just an index and a template file, others contain multiple folders with an index and multiple templates. Please try to use the snippets when you can.

Services

This direction contains different useful services that encapsulates business logic to keep components as pure as possible.

Store

This directory contains the redux store configuration and the different middleware plugged in the pipeline.