Repository files navigation

Be Your Own Bank atlogin.blockchain.com.Pleasecontact support if you have any issues using the wallet.

This repo contains the three codebases/packages listed below.

• blockchain-info-components The shared UI components library.
• blockchain-wallet-v4 The functional library for handling wallets.
• blockchain-wallet-v4-frontend The frontend application built with React/Redux.

1. Ensure Node version >= 14.16 is installed. UsingNVM is recommended.
2. From the project root, run the following command to install dependencies:./setup.sh.
3. Start the application in development mode:yarn start
4. The frontend application will now be accessible via browser atlocalhost:8080

If you require the application to run locally over HTTPS, follow the instructionshere.You can disable SSL by setting theDISABLE_SSL env param totrue with any start command. (e.g.DISABLE_SSL=true yarn start:staging)

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. Runnpm 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 typingpython. If you get aCommandNotFoundException message, add the folder%USERPROFILE%\.windows-build-tools\python27 to your environment variables.

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

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

• yarn start Runs the application with thedevelopment.js configuration file
• yarn start:dev Runs the application with thedevelopment.js configuration file
• yarn start:staging Runs the application with thestaging.js configuration file
• yarn start:prod Runs the application with theproduction.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 theproduction.js configuration file is loaded)

Notes:

• Developers will need to manually create thedevelopment.js andstaging.js files
• Custom application runtimes are possible by modifying the corresponding environment files found in theconfig/env folder

• React Developer Tools Inspect the React component tree
• Redux DevTools View/debug Redux state changes

To be able to create a release follow these steps starting with "Obtain a personal access token...":https://github.com/release-it/release-it#github-releases

GITHUB_TOKEN should be saved asRELEASE_IT_TOKEN instead in your bash_profile or wherever you keep env variables

You'll need git changelog to generate the history since the last release:

1. From the tip of thedevelopment branch, runyarn release
2. Answer the questions prompted via CLI, accepting the defaults for each
3. Once completed, this will create a new tag which will trigger a builds
4. Once builds have finished, deploy the images to desired environments
5. Test and verify the latest changes in desired environments
6. Create PR to merge the HEAD ofdevelopment intomaster
7. Merge PR tomaster so thatmaster always reflects what is currently in production

• yarn vet Runs Prettier, lint JS, lint CSS and finally all unit tests

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

Code linting is handled byESLint. The following commands are available:

• yarn lint Lints all packages
• yarn lint:components Lints onlyblockchain-info-components
• yarn lint:core Lints onlyblockchain-wallet-v4
• yarn lint:frontend Lints onlyblockchain-wallet-v4-frontend
• yarn lint:fix Automatically resolves fixable issues via ESLint

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

• Atom
• VS Code
• WebStorm

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

• yarn prettier Runs Prettier against all packages
• yarn prettier:components Runs Prettier against onlyblockchain-info-components
• yarn prettier:core Runs Prettier against onlyblockchain-wallet-v4
• yarn prettier:frontend Runs Prettier against onlyblockchain-wallet-v4-frontend

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

• Atom
• VS Code
• WebStorm

When installing the plugin for VS Code make sure you are onv3.7.0 or lower

Testing is done viaJest andEnzyme.

• yarn test Runs unit tests for all packages
• yarn test:components Runs unit tests for onlyblockchain-info-components
• yarn test:core Runs unit tests for onlyblockchain-wallet-v4
• yarn test:frontend Runs unit tests for onlyblockchain-wallet-v4-frontend

Note: if you see errors that Jest cannot resolve package imports, you may need to runyarn test before testing specific packages (eg,yarn test:frontend)

• yarn test:watch Watches and then runs desired tests
• yarn test:components:watch Watches and then runs desired tests for onlyblockchain-info-components
• yarn test:core:watch Watches and then runs desired tests for onlyblockchain-wallet-v4
• yarn test:frontend:watch Watches and then runs desired tests for onlyblockchain-wallet-v4-frontend

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

• yarn test:components:debug Debugs unit tests for onlyblockchain-info-components
• yarn test:core:debug Debugs unit tests for onlyblockchain-wallet-v4
• yarn test:frontend:debug Debugs unit tests for onlyblockchain-wallet-v4-frontend

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 tochrome://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.

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

• yarn test:components:update Updates component snapshots for onlyblockchain-info-components
• yarn test:frontend:update Updates component snapshots for onlyblockchain-wallet-v4-frontend

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

• yarn coverage Generates a coverage report for all packages
• yarn coverage:components Generates coverage report for onlyblockchain-info-components
• yarn coverage:core Generates coverage report for onlyblockchain-wallet-v4
• yarn coverage:frontend Generates coverage report for onlyblockchain-wallet-v4-frontend

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.htmlSimply open theindex.html file in your browser to view.

TypeScript is supported and should be used when adding new code. It's also recommended to replace legacy JS with TS when time allows.

We are usingCodechecks andTypecov for coverage reporting. Coverage is automatically analyzed for PRs and the following command is available.

• yarn codechecks

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

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

Storybook is used by theblockchain-info-components andblockchain-wallet-v4-frontend packages to interactively view, develop and test components.The following commands are available:

• storybook:build-wallet: Builds the static storybook assets for wallet specific components (if base components is running locally, storybook will put wallet and base components into the same storybook UI)
• storybook:build-base: Builds the static storybook assets for base shared components
• storybook:serve-wallet Builds storybook assets and then serves them locally atlocalhost:6006
• storybook:serve-base Builds storybook assets and then serves them locally atlocalhost:6007
• storybook:deploy-wallet Builds storybook assets and then serves them togithub pages.You will probably need to runcd ./packages/blockchain-info-components && git remote add origin git@github.com:blockchain/blockchain-wallet-v4-frontend.git first.
• storybook:deploy-base Builds storybook assets and then serves them togithub pages.You will probably need to runcd ./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.

Please review to theWiki

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

• Email:security@blockchain.info
• Bug Bounty:https://hackerone.com/blockchain