forked from blockchain/blockchain-wallet-v4-frontend
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Bitcoin-Wallet
251 lines (126 loc) · 8.93 KB
/
Bitcoin-Wallet
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
# THONGNGO-wallet-v4-frontend
Bitcoin-Wallet
Be Your Own Bank at login.blockchain.com. Please contact support if you have any issues using the wallet.
About
This repo contains the three codebases/packages listed below.
Packages
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.
Local Development
Ensure Node version >= 12.18 is installed.
From the project root, run the following command to install dependencies: ./setup.sh.
Start the application in development mode: yarn start
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. You can disable SSL by setting the DISABLE_SSL env param to true with any start command. (e.g. DISABLE_SSL=true yarn start:staging)
Windows Support
To ensure proper support for Windows, please take the following actions before running the above setup instructions.
Open a Powershell window with rights elevated to an Administrator.
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.
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
To completely remove all dependencies and artifacts run yarn clean
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
All development specific dependencies should be installed as a dev-dependency in the top level package.json via yarn i --save-dev [package-name]
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: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
React Developer Tools Inspect the React component tree
Redux DevTools View/debug Redux state changes
Release Process
Prerequisites
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 as RELEASE_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: npm install -g changelog
Release Steps
From the tip of the development branch, run yarn release
Answer the questions prompted via CLI, accepting the defaults for each
Once completed, this will create a new tag which will trigger a builds
Once builds have finished, deploy the images to desired environments
Test and verify the latest changes in desired environments
Create PR to merge the HEAD of development into master
Merge PR to master so that master always reflects what is currently in production
Code Quality
yarn vet Runs Prettier, lint JS, lint CSS and finally all unit tests
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:
yarn lint Lints all packages
yarn lint:components Lints only blockchain-info-components
yarn lint:core Lints only blockchain-wallet-v4
yarn lint:frontend Lints only blockchain-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
Prettier
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 only blockchain-info-components
yarn prettier:core Runs Prettier against only blockchain-wallet-v4
yarn prettier:frontend Runs Prettier against only blockchain-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 on v3.7.0 or lower
Unit Tests
Testing is done via Jest and Enzyme.
Running Tests
yarn test Runs unit tests for all packages
yarn test:components Runs unit tests for only blockchain-info-components
yarn test:core Runs unit tests for only blockchain-wallet-v4
yarn test:frontend Runs unit tests for only blockchain-wallet-v4-frontend
Note: if you see errors that Jest cannot resolve package imports, you may need to run yarn test before testing specific packages (eg, yarn test:frontend)
Running Tests via Watch
yarn test:watch Watches and then runs desired tests
yarn test:components:watch Watches and then runs desired tests for only blockchain-info-components
yarn test:core:watch Watches and then runs desired tests for only blockchain-wallet-v4
yarn test:frontend:watch Watches and then runs desired tests for only blockchain-wallet-v4-frontend
Debugging Tests
To enable debugging for unit tests via the Chrome browser, run the following commands:
yarn test:components:debug Debugs unit tests for only blockchain-info-components
yarn test:core:debug Debugs unit tests for only blockchain-wallet-v4
yarn test:frontend:debug Debugs unit tests for only blockchain-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 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:
yarn test:components:update Updates component snapshots for only blockchain-info-components
yarn test:frontend:update Updates component snapshots for only blockchain-wallet-v4-frontend
Code Coverage
To generate code coverage reports via Istanbul, the following commands are available:
yarn coverage Generates a coverage report for all packages
yarn coverage:components Generates coverage report for only blockchain-info-components
yarn coverage:core Generates coverage report for only blockchain-wallet-v4
yarn coverage:frontend Generates coverage report for only blockchain-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.html Simply open the index.html file in your browser to view.
TypeScript
TypeScript is supported and should be used when adding new code. It's also recommended to replace legacy JS with TS when time allows.
TS Coverage
We are using Codechecks and Typecov for coverage reporting. Coverage is automatically analyzed for PRs and the following command is available.
yarn codechecks
Code Bundle Analysis/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
Please review to the Wiki