Page MenuHomePhabricator

[Cashtab] Rebuild with latest version of create react app
AbandonedPublic

Authored by bytesofman on Feb 17 2022, 18:59.

Details

Reviewers
None
Group Reviewers
Restricted Project
Summary

T1682 T2255

Cashtab is built on top of an ejected create-react-app that has been incrementally upgraded to support various features. The dependency tree has become complex, with some challenges in keeping out conflicting dependencies. Also, npm start will occasionally break.

This diff rebuilds Cashtab on top of the latest version of create react app, which uses webpack 5. It corrects npm start breaking on refresh. It also upgrades dependencies to the latest version, and removes dependencies no longer required.

Unfortunately, the app still needs to be ejected in order to support polyfills for some app functions. Some other issues:

  • extension not working
  • useWallet.js unit tests break with upgrade to jest 27
  • Some css features are lost due to less-loader no longer working with antd mods. They can be brought back with new custom css. For example, the styled collapses on send have lost some of their custom styling.

Overall, this update needs to happen, and sooner is better than later. I think the new features of jest 27 make the loss of useWallet.js unit tests okay for now -- though if they cannot be fixed in this diff, we need a task up to bring them back.

Test Plan

npm start, hard refresh several times, observe the app does not crash
npm run build and deploy a built version, test all features

Diff Detail

Repository
rABC Bitcoin ABC
Branch
cashtab-to-cra-5-feb16
Lint
Lint Warnings
SeverityLocationCodeMessage
Warningweb/cashtab/package-lock.json:17097SPELL2Possible Spelling Mistake
Warningweb/cashtab/package-lock.json:32286SPELL2Possible Spelling Mistake
Unit
No Test Coverage
Build Status
Buildable 18296
Build 36397: Build Diffcashtab-tests
Build 36396: arc lint + arc unit

Event Timeline

I'll write up the steps to do this conversion, we can do it on a later diff. This is just to have a working and testable record where npm start is functioning correctly.

Tail of the build log:

  Line 187:7:  'ReplyMessageLabel' is assigned a value but never used    no-unused-vars

src/components/Send/Send.js
  Line 12:56:   'Button' is defined but never used                                                                                                                                                                                                                 no-unused-vars
  Line 162:8:   React Hook useEffect has a missing dependency: 'passLoadingStatus'. Either include it or remove the dependency array. If 'passLoadingStatus' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
  Line 203:8:   React Hook useEffect has missing dependencies: 'getBCH', 'jestBCH', and 'location'. Either include them or remove the dependency array                                                                                                             react-hooks/exhaustive-deps
  Line 491:11:  'handleOneToManyXECSend' is assigned a value but never used                                                                                                                                                                                        no-unused-vars
  Line 546:30:  Expected '!==' and instead saw '!='                                                                                                                                                                                                                eqeqeq
  Line 928:63:  Expected '===' and instead saw '=='                                                                                                                                                                                                                eqeqeq

src/components/Send/SendToken.js
  Line 244:8:  React Hook useEffect has a missing dependency: 'passLoadingStatus'. Either include it or remove the dependency array. If 'passLoadingStatus' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps

src/components/Tokens/CreateTokenForm.js
  Line 5:10:  'TokenCollapse' is defined but never used   no-unused-vars
  Line 27:5:  'notification' is defined but never used    no-unused-vars
  Line 50:9:  'Panel' is assigned a value but never used  no-unused-vars

src/hooks/useBCH.js
  Line 153:40:  Function declared in a loop contains unsafe references to variable(s) 'outgoingTx'  no-loop-func

src/hooks/useWebAuthentication.js
  Line 55:15:  Effect callbacks are synchronous to prevent race conditions. Put the async function inside:

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching  react-hooks/exhaustive-deps
  Line 93:8:   React Hook useEffect has a missing dependency: 'saveAuthenticationConfigToLocalStorage'. Either include it or remove the dependency array                                                                                                                                                                                                                                                                      react-hooks/exhaustive-deps
  Line 96:15:  Effect callbacks are synchronous to prevent race conditions. Put the async function inside:

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching  react-hooks/exhaustive-deps
  Line 99:8:   React Hook useEffect has a missing dependency: 'saveAuthenticationConfigToLocalStorage'. Either include it or remove the dependency array                                                                                                                                                                                                                                                                      react-hooks/exhaustive-deps

src/utils/cashMethods.js
  Line 5:5:  'isValidUtxo' is defined but never used  no-unused-vars

src/utils/formatting.js
  Line 43:24:  Do not use Number as a constructor  no-new-wrappers
  Line 47:24:  Do not use Number as a constructor  no-new-wrappers
  Line 60:20:  Do not use Number as a constructor  no-new-wrappers
  Line 64:16:  Do not use Number as a constructor  no-new-wrappers


Build cashtab-tests failed with exit code 1