Can get this to work by starting with a fresh install of CRA v5. However, does still need to be injected to support polyfills required by some dependencies. Still, much cleaner than what we have now.

Fixes the ongoing dev issues with the app crashing, and also some of the dependency issues coming from dependabot.

Will get this in after the new UI lands.

This is a pretty significant overhaul. It will need to be done during an announced feature freeze, and will require a good deal of testing to make sure performance is not impacted.

Here is a guide to how to do this. Putting it here so it can be amended if improvements are discovered and referenced when it's time to pull this off.

1. Navigate to /web/ and create a new react app with the latest version of create-react-app (using the latest stable release of nodejs)

cd web
nvm use 16
npx create-react-app cashtab-v2

2. Eject the app (Ideally, we would not need to eject. However, this step is required due to some polyfill support that is no longer standard in create react app)

Note: React will not let you eject without first committing your files

cd cashtab-v2
git add .
git commit -m '[Cashtab] Upgrading to webpack 5'
npm run eject

3. Add webpack polyfills

a) Install modules required for polyfills

npm i stream-browserify crypto-browserify buffer

b) Add this into cashtab-v2/config/webpack.config.js at line 301, before the line reading // This allows you to set a fallback for where webpack should look for modules.

fallback: {
                stream: require.resolve('stream-browserify'),
                crypto: require.resolve('crypto-browserify'),
                buffer: require.resolve('buffer'),
            },

c) Add this on line 587 of the same file, before the line reading

// Generates an `index.html` file with the <script> injected.

// Work around for Buffer is undefined:
            // https://github.com/webpack/changelog-v5/issues/10
            new webpack.ProvidePlugin({
                Buffer: ['buffer', 'Buffer'],
            }),

4. Add the following dependencies to web/cashtab-v2/package.json [Note: this is a list of dependencies used by Cashtab and not related to react in the current deployment]

"@ant-design/icons": "^4.3.0",
"@zxing/library": "0.8.0",
"antd": "^4.9.3",
"bignumber.js": "^9.0.0",
"ecashaddrjs": "^1.0.1",
"ecies-lite": "^1.0.7",
"etoken-list": "^1.0.1",
"ethereum-blockies-base64": "^1.0.2",
"localforage": "^1.9.0",
"lodash.isempty": "^4.4.0",
"lodash.isequal": "^4.5.0",
"minimal-slp-wallet": "^3.3.1",
"qrcode.react": "^1.0.0",
"react-copy-to-clipboard": "^5.0.3",
"react-device-detect": "^1.15.0",
"react-easy-crop": "^3.5.3",
"react-ga": "^3.3.0",
"react-image": "^4.0.3",
"react-router-dom": "^5.2.0",
"styled-components": "^4.4.0",
"@testing-library/react-hooks": "^3.7.0",
"wif": "^2.0.6"

Then, install them with

npm i

5. Delete create-react-app defaults that you will not use from cashtab-v2

cd web/cashtab-v2
rm -rf src/ public/ README.md .gitignore

6. Copy over all files from web/cashtab to web/cashtab-v2 with the exception of package.json, package-lock.json, build/, coverage/, scripts/, (though you want scripts/addGenerated.sh and scripts/extension.sh), and node_modules

cd web/cashtab-v2
rsync -av --progress ../cashtab/ . --exclude node_modules/ --exclude build/ --exclude coverage/ --exclude scripts/ --exclude config/ --exclude package-lock.json --exclude package.json
cp ../cashtab/scripts/addGenerated.sh scripts/
cp ../cashtab/scripts/extension.sh scripts/

7. Add required npm scripts to package.json

Add to the scripts: {} object:

"preextension": "npm  i -g browserify",
"extension": "./scripts/extension.sh",
"posttest": "./scripts/addGenerated.sh",

8. Use the jsconfig approach for absolute imports (the @ approach used in the current version of Cashtab does not work with the latest create react app). This is also a cleaner way of handling absolute imports. Unfortunately, it requires some manual implementation (todo: script this)

cd /web/cashtab-v2
touch jsconfig.json

Contents of jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

To use scripted find and replace:

cd web/cashtab-v2/src/
find . -type f -exec sed -i 's/@components/components/g' {} +
find . -type f -exec sed -i 's/@assets/assets/g' {} +
find . -type f -exec sed -i 's/@utils/utils/g' {} +
find . -type f -exec sed -i 's/@hooks/hooks/g' {} +

cd web/cashtab-v2/extension/
find . -type f -exec sed -i 's/@components/components/g' {} +
find . -type f -exec sed -i 's/@assets/assets/g' {} +
find . -type f -exec sed -i 's/@utils/utils/g' {} +
find . -type f -exec sed -i 's/@hooks/hooks/g' {} +

9. Four files error out in newer versions of react because they assign some variables before future import statements. Edit these files to make sure all import statements are at the top.

a. src/components/common/EnhancedInputs.js
b. src/components/Send/Send.js
c. src/components/Tokens/CreateTokenForm.js
d. src/utils/context.js

10. Remove inputs from src/components/App.css and extension/src/components/App.css

Delete these lines from the top of each file:

@import '~antd/dist/antd.less';
@import '~@fortawesome/fontawesome-free/css/all.css';
@import url('https://fonts.googleapis.com/css?family=Khula&display=swap&.css');

11. Add css import to index.js (since it's not working from the css page)

Add this line to end of imports in index.js

import 'antd/dist/antd.css';

12. Delete unit tests for useWallet.js and create a task to bring them back modified for Jest 27

13. CSS tweaks to handle absence of less-loader

a) In src/components/EnhancedInputs.js,

change

.ant-input-affix-wrapper {
        background-color: ${props =>
            props.theme.forms.selectionBackground};
        border: 1px solid ${props => props.theme.forms.border} !important;
    }

to

.ant-input-affix-wrapper {
        background-color: ${props =>
            props.theme.forms.selectionBackground} !important;
        border: 1px solid ${props => props.theme.forms.border} !important;
    }

b) Note that now error messages are red, not the proper theme.forms.error; explore patching this with css or create a task

c) Note that styled collapse menus (on Send.js and Configure.js) are not the same styling, though still okay. Create a task to restore.

d) Note switch colors on select are also different, though serviceable. Create a task to restore.

e) Note that toggling between send to one and send to many now has a content jump. Create a task to restore.

14. Can push the diff up like this for testing. Or, delete the cashtab folder and then rename cashtab-v2 to cashtab.

Updated info from practical testing

• Some jest errors related to conflicts with antd, create tasks to resolve (antd still to be deprecated)
• Need to make sure that addGenerated.sh references the correct directory when you replace legacy folder