Chore: Improve linting & auto-alphabetize translations

.husky/commit-msg

@@ -0,0 +1,6 @@
+#!/bin/sh
+# This script checks if the commit message follows a consistent format(usually useful for consistency and devops)
+if ! head -1 "$1" | grep -qE "^(feat|fix|ci|chore|docs|test|style|refactor|perf|build|revert)(\(.+?\))?(!)?: .{1,}$"; then
+    echo "Aborting commit. Your commit message is invalid. See accepted format here: https://commitizen.github.io/cz-cli/" >&2
+    exit 1
+fi

.husky/pre-push

@@ -0,0 +1,5 @@
+#!/bin/sh
+# This runs the prepush script on any modified packages
+. "$(dirname "$0")/_/husky.sh"
+
+npx lerna run --concurrency 1 --stream prepush --exclude-dependents

package.json

@@ -7,10 +7,12 @@
   "scripts": {
     "lint": "cd packages/frontend && yarn install --frozen-lockfile && yarn lint",
     "build": "cd packages/frontend && yarn install --frozen-lockfile && yarn build",
-    "test": "cd packages/frontend && yarn install --frozen-lockfile && yarn test"
+    "test": "cd packages/frontend && yarn install --frozen-lockfile && yarn test",
+    "prepare": "husky install"
   },
   "devDependencies": {
-    "lerna": "^4.0.0"
+    "lerna": "^4.0.0",
+    "husky": "^7.0.0"
   },
   "dependencies": {
     "@near-wallet/feature-flags": "^0.0.4"

packages/frontend/.eslintignore

@@ -1,2 +1,5 @@
 dist/
+build
+node_modules
+.github
 

packages/frontend/.eslintrc.js

@@ -1,9 +1,13 @@
 module.exports = {
-    extends: 'react-app',
+    extends: ['react-app', 'eslint:recommended'],
     rules: {
         'jsx-a11y/no-access-key': 'off',
         'no-useless-escape': 'off',
         'semi': ['error', 'always'],
+        'no-console': 'off',
+        'no-extra-boolean-cast':'off',
+        'no-extra-semi':'off',
+        'no-irregular-whitespace':'off',
         'import/order': [
             'error',
             {

packages/frontend/docs/Linting-and-formatting.md

@@ -0,0 +1,56 @@
+# Linting and Formatting
+For consistency and predictable organization of code, this project uses [Eslint](https://eslint.org/) for linting. 
+
+## The Setup
+The configuration for Eslint can be found at the root of this project:
+- Eslint - `.eslintrc.js`
+
+VSCode is configured to automatically fix fixable linting errors on save. See `.vscode/settings.json`.
+
+Within `package.json`, there scripts that you can run to lint and autofix the entire codebase.
+
+```
+"lint": "eslint --ext .js --ext .jsx .",
+"fix": "eslint --ext .js --ext .jsx . --fix",
+```
+
+##  Git Commit hooks
+Git commit hooks are a provision that allows us run custom scripts when specific events occur in the git workflow. [See more here](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks).
+
+For this project, we are using the clientside commit hooks to automatically lint and alphabetize staged files before they get pushed.
+
+## Auto-alphabetization of translation files
+This is meant to help ensure consistency and ease of reference within the translation files. For this, we are making use of git hooks via a package called [husky](https://typicode.github.io/husky/#/). Husky allows us to configure a defined pre-push command which triggers the `prepush` script within modified packages. The `prepush` script in `packages/frontend/package.json` is configured to run a group of commands that lint and autofix, sort translation files as well as runs our unit tests.
+
+Within `package.json`, the block below defines this.
+
+```
+ "scripts": {
+     ...,
+    "prepush": "concurrently \"yarn run fix\" \"cd src/translations && npx sort-json * --ignore-case true\" \"yarn run test\""
+  }
+ ```
+
+Two main things are ensured through this configuration:
+- Staged translation files `src/translations/*.json"` get sorted in alphabetical order automatically using a package called [sort-json](https://github.com/kesla/sort-json)
+- Staged `.js` and `.jsx` files get linted for any major linting errors and committing will fail until linting errors are resolved e.g unused vars. We can make the rules as tight or loose as we want through the configuration in `.eslintrc.js`.
+- All unit tests must past before a developer can successfully push to remote.
+
+## Proposal: Commit messages
+Within `.husky/commit-msg`, there's a script that ensures consistent formatting with commit messages using the `commit-msg` git hook. 
+
+The proposed format is:
+```
+git commit -m "{commit type goes here}: {commit information}"
+```
+
+Example:
+```
+git commit -m "feat: linting support using eslint"
+```
+
+The image below provides more information on the commit types.
+
+![image](./assets/conventional-commit-types.png)
+
+Learn more about this conventional commit format [here](https://www.conventionalcommits.org/en/v1.0.0/#commit-message-with--to-draw-attention-to-breaking-change).

packages/frontend/package.json

@@ -61,7 +61,10 @@
     "build": "NODE_ENV=production node ci/runBundler.js && node ci/sentry-send-release.js",
     "test": "jest",
     "lint": "eslint --ext .js --ext .jsx .",
-    "fix": "eslint --ext .js --ext .jsx . --fix"
+    "fix": "eslint --ext .js --ext .jsx . --fix",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "prepush": "concurrently \"yarn run fix\" \"cd src/translations && npx sort-json * --ignore-case true\" \"yarn run test\""
   },
   "browserslist": [
     ">0.2%",

packages/frontend/src/components/accounts/SetupSeedPhrase.js

@@ -305,4 +305,4 @@ const mapStateToProps = (state, { match }) => {
     };
 };
 
-export const SetupSeedPhraseWithRouter = connect(mapStateToProps, mapDispatchToProps)(withRouter(SetupSeedPhrase));
+export const SetupSeedPhraseWithRouter = connect(mapStateToProps, mapDispatchToProps)(withRouter(SetupSeedPhrase));

packages/frontend/src/components/wallet/ActivityDetailModal.js

@@ -232,4 +232,4 @@ const ActivityDetailModal = ({
     );
 };
 
-export default ActivityDetailModal;
+export default ActivityDetailModal;

packages/frontend/src/hooks/allAccounts.js

@@ -25,4 +25,4 @@ export function useAccount(accountId) {
     return isOwner
         ? account
         : allAccounts[accountId] || {};
-}
+}

packages/frontend/src/index.js

@@ -33,4 +33,4 @@ ReactDOM.render(
         </Provider>
     </GoogleReCaptchaProvider>,
     document.getElementById('root')
-);
+);

packages/frontend/src/redux/slices/tokens/index.js

@@ -175,4 +175,4 @@ export const selectTokensLoading = createSelector(
 const selectOneTokenLoading = createSelector(
     [selectOneTokenFromOwnedTokens],
     (token) => token.loading
-);
+);

packages/frontend/src/redux/slices/transactions/index.js

@@ -148,4 +148,4 @@ export const selectOneTransactionByIdentity = createSelector(
 export const selectTransactionsLoading = createSelector(
     [selectTransactionsObjectByAccountId],
     (transactions) => transactions.status.loading || false
-);
+);

packages/frontend/src/translations/en.global.json

@@ -854,6 +854,7 @@
             "error": "Public key access was rejected. No accounts were recovered.<br/>To continue, you must allow NEAR Wallet to view your public key. Please try again.",
             "success": ""
         },
+        "LackBalanceForState": "Your available balance is too low to perform any actions on your account. Please send NEAR to your account and then try again.",
         "NotEnoughBalance": "Your account does not have enough balance for this operation.",
         "PROMPT_TWO_FACTOR": {
             "invalidCode": "Invalid 2FA code. Please try again."
@@ -893,8 +894,7 @@
         "VERIFY_TWO_FACTOR": {
             "error": "Two Factor Authentication setup failed. Please try again.",
             "success": "Two Factor Authentication successfully setup!"
-        },
-        "LackBalanceForState": "Your available balance is too low to perform any actions on your account. Please send NEAR to your account and then try again."
+        }
     },
     "releaseNotesModal": {
         "desc": "You asked, we listened! The latest update brings adjustments to how balances are displayed in the wallet, and an easier way to create new accounts.",

packages/frontend/src/translations/pt.global.json

@@ -1317,4 +1317,4 @@
         }
     },
     "warning": "Atenção"
-}
+}

packages/frontend/src/translations/ru.global.json

@@ -1242,4 +1242,4 @@
         }
     },
     "warning": "Предупреждение"
-}
+}

packages/frontend/src/translations/vi.global.json

@@ -1324,4 +1324,4 @@
         }
     },
     "warning": "Cảnh báo"
-}
+}

packages/frontend/src/translations/zh-hans.global.json

@@ -1467,4 +1467,4 @@
         }
     },
     "warning": "警告"
-}
+}

packages/frontend/src/translations/zh-hant.global.json

@@ -1467,4 +1467,4 @@
         }
     },
     "warning": "警告"
-}
+}

packages/frontend/src/utils/account-with-lockup.js

@@ -342,7 +342,7 @@ async function viewLockupState(connection, lockupAccountId) {
         transferInformation = {
             transfer_poll_account_id: reader.readString()
         };
-    };
+    }
     let vestingType = reader.readU8();
     let vestingInformation = null;
     if (vestingType === 1) {