Skip to content
This repository was archived by the owner on Jan 22, 2026. It is now read-only.

Best Practices (Frontend)

Jump to bottom
Philip London edited this page Mar 16, 2020 · 6 revisions

About

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

Project structure

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 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
  • sagas.utils.ts (optional)
    • collection of reusable utility functions. Example
  • selectors.ts
    • collection of selector functions for accessing slices of state. Example
  • 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.

Clone this wiki locally