/blockchain-wallet-v4-frontend

Next generation version of Blockchain Wallet built with React & Redux

Primary LanguageJavaScriptGNU Affero General Public License v3.0AGPL-3.0

Build Status Coverage Status js-standard-style code style: prettier License: AGPL v3

Blockchain Wallet v4

Be Your Own Bank at blockchain.info/wallet. Please contact support if you have any issues using the wallet.

About

This repo contains the three codebases/packages listed below.

Packages

Local Development

  1. Ensure Node version >= 10.2 and NPM version >= 6 are installed
  2. Run the following command to install necessary global packages: npm install -g yarn babel-cli rimraf cross-env
  3. Install, link and hoist packages: yarn
  4. Start the application in development mode: yarn start
  5. The frontend application will now be accessible via browser at localhost:8080

If you require the application to run locally over HTTPS, follow the instructions here.

Windows Support

To ensure proper support for Windows, please take the following actions before running the above setup instructions.

  1. Open a Powershell window with rights elevated to an Administrator.
  2. Run npm install -g windows-build-tools. This will install Python 2.7 and Visual C++ Build Tools which are required to compile some native Node modules.
  3. Ensure Python has been added to your environment variables by opening a cmd prompt and typing python. If you get a CommandNotFoundException message, add the folder %USERPROFILE%\.windows-build-tools\python27 to your environment variables.

Tips & Useful Commands

  1. To completely remove all dependencies and artifacts run yarn clean
  2. To add/remove an NPM package run yarn add or yarn remove in the package folder. After installing or uninstalling a NPM package, run yarn in the root folder to re-init the project
  3. All development specific dependencies should be installed as a dev-dependency in the top level package.json via yarn i --save-dev [package-name]
  4. All application specific dependencies should be installed in the specific packages package.json via yarn i --save [package-name]

Running Environments Locally

The frontend application can be ran locally with different build configurations found in config/env. The following commands are available:

  • yarn start Runs the application with the development.js configuration file
  • yarn start:dev Runs the application with the development.js configuration file
  • yarn start:staging Runs the application with the staging.js configuration file
  • yarn start:testnet Runs the application with the testnet.js configuration file
  • yarn start:prod Runs the application with the production.js configuration file
  • yarn run:prod Runs the application mimicking the production environment entirely (i.e. code is bundled and minified, HMR is disabled, Express server is used (./server.js) and the production.js configuration file is loaded)

Notes:

  • Developers will need to manually create the development.js and staging.js files
  • Custom application runtimes are possible by modifying the corresponding environment files found in the config/env folder

Useful Chrome Extensions

Code Quality

Linting

We follow the rules outlined by the Javascript Standard Style as well as a few React specific rules.

Code linting is handled by ESLint. The following commands are available:

These IDE plugins/packages assist with complying with these lint rules while developing:

Prettier

We follow all standard rules that are provided by Prettier. The following commands are available:

It is recommended to setup a Prettier plugin for your IDE plugins/packages that will automatically prettify your files on save.

Unit Tests

Testing is done via Jest and Enzyme.

Running Tests

Running Tests via Watch

Debugging Tests

To enable debugging for unit tests via the Chrome browser, run the following commands:

After running one of the above commands, Node will wait for a debugger to attach before starting the tests. To attach, simply open your browser and go to chrome://inspect and click on "Open Dedicated DevTools for Node", which will give you a list of available node instances you can connect to. Click on the address displayed in the terminal (usually localhost:9229) and you will be able to debug tests using Chrome's DevTools.

Updating Snapshot Tests

We are snapshot testing UI some components. Here are the commands to update them when necessary:

Code Coverage

To generate code coverage reports via Istanbul, the following commands are available:

Depending upon which coverage report was ran, the results can be found in the following directories:

  • coverage/index.html
  • coverage/blockchain-info-components/index.html
  • coverage/blockchain-wallet-v4/index.html
  • coverage/blockchain-wallet-v4-frontend/index.html Simply open the index.html file in your browser to view.

Bundle Reports

To visualize and interact with the tree of the production code bundles files:

  • yarn analyze Once completed, a browser will automatically open with the results.

Storybook

Storybook is used by the blockchain-info-components package to interactively view, develop and test components. The following commands are available:

  • storybook:build: Builds the static storybook assets
  • storybook:serve Builds storybook assets and then serves them locally at localhost:6006
  • storybook:deploy Builds storybook assets and then serves them to github pages. You will probably need to run cd ./packages/blockchain-info-components && git remote add origin git@github.com:blockchain/blockchain-wallet-v4-frontend.git first.

If the deploy begins to fail, deleting the static build file before redeploy will likely help.

Contribute

Bug fixes and feedback on our code is always appreciated.

Security

Security issues can be reported to us in the following venues: