Dependency updates (stellar#203)

* Minor dependency updates

* More dependency updates + linter fixes

* More dependency updates

* Update stellar/eslint-config + local eslint

* Update @stellar/eslint-config + cleanup

.eslintrc.js

@@ -1,15 +1,19 @@
 module.exports = {
   extends: ["@stellar/eslint-config"],
   rules: {
-    "no-console": 0,
+    "no-console": "off",
     "import/no-unresolved": "off",
-    "react/jsx-filename-extension": [1, { extensions: [".tsx", ".jsx"] }],
-    "react/prop-types": 0,
-    // note you must disable the base rule as it can report incorrect errors
-    "no-shadow": "off",
-    "@typescript-eslint/no-shadow": ["error"],
-    // note you must disable the base rule as it can report incorrect errors
-    "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": ["error"],
+    "react/jsx-filename-extension": ["error", { extensions: [".tsx", ".jsx"] }],
+    "no-plusplus": "off",
+    "jsdoc/check-indentation": "off",
+    "@typescript-eslint/naming-convention": [
+      "error",
+      {
+        selector: "typeProperty",
+        format: ["PascalCase", "UPPER_CASE", "camelCase", "snake_case"],
+        leadingUnderscore: "allow",
+        trailingUnderscore: "allow",
+      },
+    ],
   },
 };

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/post-merge

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn install-if-package-changed

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn pre-commit

package.json

@@ -7,54 +7,42 @@
   "engines": {
     "node": "14.x"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "concurrently 'pretty-quick --staged' 'lint-staged' 'tsc --noEmit'",
-      "post-merge": "yarn install-if-package-changed"
-    }
-  },
   "lint-staged": {
     "src/**/*.ts?(x)": [
       "eslint --fix --max-warnings 0"
     ]
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.5.0",
-    "@sentry/browser": "^6.3.1",
-    "@sentry/tracing": "^6.3.1",
+    "@reduxjs/toolkit": "^1.6.0",
+    "@sentry/browser": "^6.8.0",
+    "@sentry/tracing": "^6.8.0",
     "@stellar/design-system": "^0.1.0-alpha.3",
     "@stellar/prettier-config": "^1.0.1",
-    "@stellar/wallet-sdk": "^0.3.0-rc.4",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.3",
-    "@testing-library/user-event": "^12.6.0",
-    "@types/jest": "^26.0.20",
-    "@types/node": "^14.14.20",
-    "@types/react": "^17.0.0",
-    "@types/react-copy-to-clipboard": "^5.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@types/react-redux": "^7.1.15",
-    "@types/react-router-dom": "^5.1.7",
+    "@stellar/wallet-sdk": "^0.4.0-rc.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.1.9",
     "bignumber.js": "^9.0.1",
     "crypto": "^1.0.1",
-    "dompurify": "^2.2.7",
-    "html-react-parser": "^1.2.4",
-    "lodash": "^4.17.19",
-    "marked": "^2.0.1",
-    "node-sass": "^4.14.1",
-    "react": "^17.0.1",
+    "dompurify": "^2.3.0",
+    "html-react-parser": "^1.2.7",
+    "lodash": "^4.17.21",
+    "marked": "^2.1.3",
+    "node-sass": "^6.0.1",
+    "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.0.3",
-    "react-dom": "^17.0.1",
-    "react-json-view": "^1.21.1",
-    "react-redux": "^7.2.2",
+    "react-dom": "^17.0.2",
+    "react-json-view": "^1.21.3",
+    "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.1",
-    "redux": "^4.0.5",
-    "stellar-sdk": "^8.2.1",
-    "styled-components": "^5.2.1",
+    "react-scripts": "4.0.3",
+    "redux": "^4.1.0",
+    "stellar-sdk": "^8.2.3",
+    "styled-components": "^5.3.0",
     "toml": "^3.0.0",
-    "typescript": "~4.1.3",
-    "web-vitals": "^0.2.4"
+    "tslib": "^2.3.0",
+    "typescript": "~4.3.5",
+    "web-vitals": "^2.1.0"
   },
   "scripts": {
     "install-if-package-changed": "git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD | grep --quiet yarn.lock && yarn install || exit 0",
@@ -64,7 +52,9 @@
     "eject": "react-scripts eject",
     "prod:build": "docker image build --build-arg REACT_APP_AMPLITUDE_KEY=$AMPLITUDE_KEY --build-arg REACT_APP_SENTRY_KEY=$SENTRY_KEY -t stellar-demo-wallet:localbuild .",
     "prod:serve": "docker run -p 8000:80 stellar-demo-wallet:localbuild",
-    "production": "yarn prod:build && yarn prod:serve"
+    "production": "yarn prod:build && yarn prod:serve",
+    "prepare": "husky install",
+    "pre-commit": "concurrently 'pretty-quick --staged' 'lint-staged' 'tsc --noEmit'"
   },
   "eslintConfig": {
     "extends": [
@@ -85,19 +75,36 @@
     ]
   },
   "devDependencies": {
-    "@stellar/eslint-config": "^1.0.5",
+    "@stellar/eslint-config": "^2.1.1",
     "@stellar/tsconfig": "^1.0.2",
-    "@types/lodash": "^4.14.167",
-    "@types/marked": "^2.0.0",
+    "@types/jest": "^26.0.24",
+    "@types/lodash": "^4.14.171",
+    "@types/marked": "^2.0.4",
+    "@types/node": "^16.0.1",
+    "@types/react": "^17.0.14",
+    "@types/react-copy-to-clipboard": "^5.0.1",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-redux": "^7.1.17",
+    "@types/react-router-dom": "^5.1.8",
     "@types/redux": "^3.6.0",
-    "@types/styled-components": "^5.1.7",
-    "concurrently": "^5.3.0",
-    "eslint": "^7.17.0",
-    "eslint-config-prettier": "^7.1.0",
+    "@types/styled-components": "^5.1.11",
+    "@typescript-eslint/eslint-plugin": "^4.28.2",
+    "@typescript-eslint/parser": "^4.28.2",
+    "concurrently": "^6.2.0",
+    "eslint": "^7.30.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-config-react": "^1.1.7",
-    "husky": "^4.3.7",
-    "lint-staged": "^10.5.3",
-    "prettier": "^2.2.1",
-    "pretty-quick": "^3.1.0"
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-flowtype": "^5.8.0",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-jsdoc": "^35.4.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "husky": "^7.0.1",
+    "lint-staged": "^11.0.0",
+    "prettier": "^2.3.2",
+    "pretty-quick": "^3.1.1"
   }
 }

src/components/AddAsset.tsx

@@ -83,7 +83,7 @@ export const AddAsset = ({ onClose }: { onClose: () => void }) => {
 
       if (asset.homeDomain) {
         search = searchParam.updateKeyPair({
-          searchParam: SearchParams.ASSET_OVERRIDES,
+          param: SearchParams.ASSET_OVERRIDES,
           itemId: `${asset.assetCode}:${asset.assetIssuer}`,
           keyPairs: { homeDomain },
           urlSearchParams: new URLSearchParams(search),

src/components/Assets.tsx

@@ -86,7 +86,7 @@ export const Assets = ({
   const dispatch = useDispatch();
   const history = useHistory();
 
-  enum modalType {
+  enum ModalType {
     ADD_ASSET = "ADD_ASSET",
     CONFIRM_ACTION = "CONFIRM_ACTION",
   }
@@ -133,7 +133,7 @@ export const Assets = ({
     description,
     options,
   }: AssetActionItem) => {
-    setActiveModal(modalType.CONFIRM_ACTION);
+    setActiveModal(ModalType.CONFIRM_ACTION);
     dispatch(
       setActiveAssetAction({
         assetString,
@@ -396,7 +396,7 @@ export const Assets = ({
 
         <div className="BalancesButtons Inset">
           <Button
-            onClick={() => setActiveModal(modalType.ADD_ASSET)}
+            onClick={() => setActiveModal(ModalType.ADD_ASSET)}
             disabled={Boolean(activeAsset.action)}
           >
             Add asset
@@ -409,12 +409,12 @@ export const Assets = ({
 
       <Modal visible={Boolean(activeModal)} onClose={handleCloseModal}>
         {/* Action confirmation */}
-        {activeModal === modalType.CONFIRM_ACTION && (
+        {activeModal === ModalType.CONFIRM_ACTION && (
           <ConfirmAssetAction onClose={handleCloseModal} />
         )}
 
         {/* Add asset */}
-        {activeModal === modalType.ADD_ASSET && (
+        {activeModal === ModalType.ADD_ASSET && (
           <AddAsset onClose={handleCloseModal} />
         )}
       </Modal>

src/components/HomeDomainOverrideButtons.tsx

@@ -43,7 +43,9 @@ export const HomeDomainOverrideButtons = ({ asset }: { asset: Asset }) => {
         activeAsset = {
           assetString: asset.assetString,
           title: "",
-          callback: () => {},
+          callback: () => {
+            // do nothing
+          },
         };
         break;
       case ModalType.REMOVE_ASSET_OVERRIDE:
@@ -64,7 +66,7 @@ export const HomeDomainOverrideButtons = ({ asset }: { asset: Asset }) => {
   const handleRemove = () => {
     history.push(
       searchParam.removeKeyPair({
-        searchParam: SearchParams.ASSET_OVERRIDES,
+        param: SearchParams.ASSET_OVERRIDES,
         itemId: asset.assetString,
       }),
     );

src/components/HomeDomainOverrideModal.tsx

@@ -49,7 +49,7 @@ export const HomeDomainOverrideModal = ({
       if (validAsset.homeDomain) {
         history.push(
           searchParam.updateKeyPair({
-            searchParam: SearchParams.ASSET_OVERRIDES,
+            param: SearchParams.ASSET_OVERRIDES,
             itemId: `${asset.assetCode}:${asset.assetIssuer}`,
             keyPairs: { homeDomain },
           }),

src/components/LogItem/index.tsx

@@ -6,7 +6,7 @@ import { ReactComponent as IconArrowRight } from "assets/icons/arrow-right.svg";
 import { ReactComponent as IconBubble } from "assets/icons/bubble.svg";
 import { ReactComponent as IconError } from "assets/icons/error.svg";
 import { sanitizeHtml } from "helpers/sanitizeHtml";
-import { LogType } from "types/types.d";
+import { LogType, AnyObject } from "types/types.d";
 import "./styles.scss";
 
 marked.setOptions({
@@ -23,7 +23,7 @@ const LogItemIcon = {
 interface LogItemProps {
   title: string;
   variant: LogType;
-  body?: string | object;
+  body?: string | AnyObject;
 }
 
 const theme = {

src/ducks/sep31Send.ts

@@ -39,8 +39,8 @@ interface InitiateSendActionResponse {
   assetIssuer: string;
   fields: {
     transaction: AnyObject;
-    sender: {};
-    receiver: {};
+    sender: AnyObject;
+    receiver: AnyObject;
   };
   senderType: string | undefined;
   receiverType: string | undefined;

src/helpers/getAssetData.ts

@@ -17,7 +17,7 @@ export const getAssetData = async ({
     return assets;
   }
 
-  // eslint-disable-next-line no-plusplus
+  // eslint-disable-next-line @typescript-eslint/prefer-for-of
   for (let i = 0; i < allAssets.length; i++) {
     const [assetId, data] = allAssets[i];
 

src/helpers/getAssetOverridesData.ts

@@ -19,7 +19,7 @@ export const getAssetOverridesData = async ({
 
   let response: Asset[] = [];
 
-  // eslint-disable-next-line no-plusplus
+  // eslint-disable-next-line @typescript-eslint/prefer-for-of
   for (let i = 0; i < assetOverrides.length; i++) {
     const { assetString, homeDomain } = assetOverrides[i];
     const [assetCode, assetIssuer] = assetString.split(":");

src/helpers/getAssetSettingsFromToml.ts

@@ -14,7 +14,7 @@ export const getAssetSettingsFromToml = async ({
   homeDomainOverride,
 }: GetAssetSettingsFromToml): Promise<{
   homeDomain: string | undefined;
-  supportedActions: AssetSupportedActions | {};
+  supportedActions: AssetSupportedActions | AnyObject;
 }> => {
   const server = new Server(networkUrl);
 
@@ -65,7 +65,7 @@ const isSep8Asset = ({
 }: {
   currencies: any;
   assetId: string;
-}): Boolean => {
+}): boolean => {
   const [assetCode, assetIssuer] = assetId.split(":");
 
   const currency = (currencies as any[]).find(

src/helpers/getErrorString.ts

@@ -33,7 +33,9 @@ export const TX_ERROR_TEXT: ErrorTextObject = {
 };
 
 /**
- * Given a Horizon error object, return a human-readable string that summarizes it.
+ * Given a Horizon error object, return a human-readable string that summarizes
+ * it.
+ *
  * @param {Error} err - error object from horizon
  * @returns {string} error string
  */
@@ -98,6 +100,7 @@ export function getErrorString(err: any): string {
 
 /**
  * Given a Horizon error object, return the error code
+ *
  * @param {Error} err - error object from horizon
  * @returns {string} error code
  */
@@ -108,6 +111,7 @@ export function getErrorCodeString(err: any): string {
 
 /**
  * Given a Horizon error object, return a list of the error codes.
+ *
  * @param {Error} err - error object from horizon
  * @returns {string[]} error code
  */
@@ -124,9 +128,8 @@ export function getErrorCodes(err: any): string[] {
   // first, try to parse the errors in extras
   // eslint-disable-next-line camelcase
   if (e?.data?.extras?.result_codes) {
-    const {
-      result_codes: resultCodes,
-    }: Horizon.TransactionFailedExtras = e.data.extras;
+    const { result_codes: resultCodes }: Horizon.TransactionFailedExtras =
+      e.data.extras;
 
     if (resultCodes.operations) {
       const codes = resultCodes.operations;

src/helpers/getSep8NextStepOnSuccess.ts

@@ -2,8 +2,11 @@ import { Sep8ApprovalStatus, Sep8Step } from "types/types.d";
 
 /**
  * Returns the next SEP-8 step to be displayed after the current step succeeds.
+ *
  * @param {Sep8Step} currentStep the current SEP-8 step.
- * @param {Sep8ApprovalStatus} [approvalStatus] the approval status returned from the SEP-8 server. This value will only be used if `currentStep === Sep8Step.STARTING`.
+ * @param {Sep8ApprovalStatus} [approvalStatus] the approval status returned
+ * from the SEP-8 server. This value will only be used if
+ * `currentStep === Sep8Step.STARTING`.
  * @returns {Sep8Step} the next SEP-8 step for the application.
  */
 export const getSep8NextStepOnSuccess = ({
@@ -37,9 +40,13 @@ export const getSep8NextStepOnSuccess = ({
 };
 
 /**
- * Returns the next SEP-8 step to be displayed after the current step succeeds, based solely on the respone comming from the SEP-8 approval server.
+ * Returns the next SEP-8 step to be displayed after the current step succeeds,
+ * based solely on the respone comming from the SEP-8 approval server.
+ *
  * @param {Sep8Step} currentStep the current SEP-8 step.
- * @param {Sep8ApprovalStatus} [approvalStatus] the approval status returned from the SEP-8 server. This value will only be used if `currentStep === Sep8Step.STARTING`.
+ * @param {Sep8ApprovalStatus} [approvalStatus] the approval status returned
+ * from the SEP-8 server. This value will only be used if
+ * `currentStep === Sep8Step.STARTING`.
  * @returns {Sep8Step} the next SEP-8 step for the application.
  */
 const nextStepAfterApprovalServer = ({

src/helpers/getUntrustedAssetData.ts

@@ -22,7 +22,7 @@ export const getUntrustedAssetData = async ({
 
   let response: Asset[] = [];
 
-  // eslint-disable-next-line no-plusplus
+  // eslint-disable-next-line @typescript-eslint/prefer-for-of
   for (let i = 0; i < assetsToAdd.length; i++) {
     const assetString = assetsToAdd[i];
     const [assetCode, assetIssuer] = assetString.split(":");