modernized ESLint (#343)

.eslintrc.json

@@ -1,26 +1,33 @@
 {
-  "parser": "@typescript-eslint/parser",
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
   "extends": [
+    "standard-with-typescript",
+    "eslint:recommended",
     "plugin:import/recommended",
     "plugin:import/typescript",
-    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/strict-type-checked",
     "plugin:react/recommended",
-    "plugin:prettier/recommended",
-    "plugin:react-hooks/recommended"
+    "plugin:react-hooks/recommended",
+    "plugin:astro/recommended",
+    "plugin:vitest/recommended",
+    "prettier",
+    "plugin:prettier/recommended"
   ],
   "parserOptions": {
-    "ecmaVersion": 2020,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
-    }
+    "ecmaVersion": "latest",
+    "sourceType": "module"
   },
+  "plugins": [
+    "react"
+  ],
   "rules": {
-    "no-restricted-globals": ["error", "describe", "it", "jest", "beforeEach", "afterEach"],
-    "react/jsx-uses-react": "off",
+    "no-inner-declarations": "off",
     "react/react-in-jsx-scope": "off",
     "react-hooks/exhaustive-deps": "error",
-    "import/no-extraneous-dependencies": "error",
     "import/order": ["error", {
       "newlines-between": "always-and-inside-groups",
       "groups": ["builtin", "type", "external", "internal", "parent", "sibling", "index", "object"],
@@ -33,11 +40,36 @@
         }
       ]
     }],
-    "@typescript-eslint/no-unused-vars": "error"
+    "@typescript-eslint/require-await": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-confusing-void-expression": "off",
+    "@typescript-eslint/unbound-method": "off",
+    "@typescript-eslint/no-unnecessary-condition": ["error", { "allowConstantLoopConditions": true }],
+    "@typescript-eslint/no-misused-promises": ["error", { "checksVoidReturn": false }],
+    "@typescript-eslint/no-floating-promises": ["error", { "ignoreIIFE": true }],
+    "@typescript-eslint/strict-boolean-expressions": ["error", { "allowNumber": false, "allowNullableString": true, "allowNullableBoolean": true }]
   },
   "settings": {
     "react": {
       "version": "detect"
+    },
+    "import/resolver": {
+      "typescript": {}
+    }
+  },
+  "overrides": [
+    {
+      "files": ["*.astro"],
+      "parser": "astro-eslint-parser",
+      "parserOptions": {
+        "parser": "@typescript-eslint/parser",
+        "extraFileExtensions": [".astro"]
+      },
+      "rules": {
+        "react/jsx-key": "off",
+        "react/jsx-no-undef": "off",
+        "react/no-unknown-property": "off"
+      }
     }
-  }
-}
+  ]
+}

package.json

@@ -37,10 +37,16 @@
     "bundlewatch": "^0.3.3",
     "eslint": "^8.49.0",
     "eslint-config-prettier": "^9.0.0",
+    "eslint-config-standard-with-typescript": "^39.0.0",
+    "eslint-import-resolver-typescript": "^3.6.0",
+    "eslint-plugin-astro": "^0.29.0",
     "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
     "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-vitest": "^0.3.1",
     "events": "^3.3.0",
     "parcel": "^2.7.0",
     "postcss": "^8.4.29",

src/Components/ClaimW3Name/ClaimW3Name.tsx

@@ -61,11 +61,11 @@ export const ClaimW3Name = ({ web3name }: Props) => {
 
   const txd = useApiTXDAddress();
 
-  if (cost.error || txd.error) {
+  if (cost.error !== undefined || txd.error !== undefined) {
     return (
       <div className={styles.error}>
-        {cost.error && <FormError error={cost.error} />}
-        {txd.error && <FormError error={txd.error} />}
+        {cost.error !== undefined && <FormError error={cost.error} />}
+        {txd.error !== undefined && <FormError error={txd.error} />}
       </div>
     );
   }

src/Components/ClaimW3Name/tabs/KiltTab.tsx

@@ -9,8 +9,8 @@ import {
   getAccounts,
   getSignButtonsData,
   getW3NameExtrinsic,
-  InjectedAccount,
-  SignExtrinsicWithDid,
+  type InjectedAccount,
+  type SignExtrinsicWithDid,
 } from '../../../Utils/claimWeb3name-helpers';
 import { ClaimingModal } from '../../Modal/Modal';
 
@@ -92,7 +92,6 @@ export function KiltTab({ web3name }: Props) {
         setClaimingStatus('success');
       } catch (error) {
         setClaimingStatus('error');
-        return;
       }
     },
     [selectedAccount, web3name],

src/Components/ClaimW3Name/tabs/PayPalTab.tsx

@@ -8,7 +8,7 @@ import styles from '../ClaimW3Name.module.css';
 import {
   getSignButtonsData,
   getW3NameExtrinsic,
-  SignExtrinsicWithDid,
+  type SignExtrinsicWithDid,
 } from '../../../Utils/claimWeb3name-helpers';
 import { checkoutServiceURL } from '../../../Utils/useTXDTransmitter';
 

src/Components/CopyToClipboard/CopyToClipboard.tsx

@@ -10,8 +10,10 @@ export const CopyToClipboard = (props: CopyText) => {
   const [copied, setCopied] = useState<boolean>(false);
 
   const handleCopy = () => {
-    setCopied(true);
-    navigator.clipboard.writeText(props.text);
+    (async () => {
+      setCopied(true);
+      await navigator.clipboard.writeText(props.text);
+    })();
   };
   useEffect(() => {
     if (copied) {

src/Components/CredentialDetails/CredentialDetails.tsx

@@ -3,10 +3,10 @@ import {
   Credential,
   CType,
   Did,
-  DidUri,
-  IClaim,
-  ICredential,
-  KiltPublishedCredentialV1,
+  type DidUri,
+  type IClaim,
+  type ICredential,
+  type KiltPublishedCredentialV1,
 } from '@kiltprotocol/sdk-js';
 import { find } from 'lodash-es';
 import { Fragment, useEffect, useState } from 'react';
@@ -22,7 +22,7 @@ function useChainData(credentialV1: KiltPublishedCredentialV1) {
   const { credential, metadata } = credentialV1;
 
   const [label, setLabel] = useState(metadata?.label);
-  const [attester, setAttester] = useState<string | DidUri>();
+  const [attester, setAttester] = useState<string>();
   const [error, setError] = useState<string>();
 
   useEffect(() => {
@@ -73,7 +73,6 @@ function useChainData(credentialV1: KiltPublishedCredentialV1) {
 
       if (attestation.revoked) {
         setError('Credential attestation revoked');
-        return;
       }
     })();
   }, [credential]);
@@ -134,7 +133,7 @@ function ClaimValue({
       cTypeHash:
         '0xd8c61a235204cb9e3c6acb1898d78880488846a7247d325b833243b46d923abe',
       name: 'Username',
-      href: `https://discordapp.com/users/${contents['User ID']}`,
+      href: `https://discordapp.com/users/${contents['User ID'] as string}`,
     },
     {
       cTypeHash:
@@ -158,7 +157,9 @@ function ClaimValue({
       cTypeHash:
         '0x329a2a5861ea63c250763e5e4c4d4a18fe4470a31e541365c7fb831e5432b940',
       name: 'Channel Name',
-      href: `https://www.youtube.com/channel/${contents['Channel ID']}`,
+      href: `https://www.youtube.com/channel/${
+        contents['Channel ID'] as string
+      }`,
     },
   ];
 
@@ -190,7 +191,7 @@ export function CredentialDetails({ credentialV1, did }: Props) {
   return (
     <section className={styles.container}>
       <h2 className={styles.heading}>
-        {label || <span className={styles.spinner} />}
+        {label ?? <span className={styles.spinner} />}
       </h2>
 
       <dl className={styles.definitions}>

src/Components/DidSection/DidSection.tsx

@@ -1,4 +1,4 @@
-import { DidUri } from '@kiltprotocol/sdk-js';
+import { type DidUri } from '@kiltprotocol/sdk-js';
 
 import * as styles from './DidSection.module.css';
 
@@ -25,7 +25,7 @@ export function DidSection({ did, error }: Props) {
       {did && (
         <div className={styles.wrapper}>
           <span className={styles.text}>{did}</span>
-          {did && <CopyToClipboard text={did} />}
+          <CopyToClipboard text={did} />
         </div>
       )}
 

src/Components/FormError/FormError.tsx

@@ -10,19 +10,20 @@ export function FormError({ error }: { error?: string | Error }) {
   useEffect(() => {
     (async () => {
       if (error instanceof HTTPError) {
-        setMessage((await error.response.json()).message);
+        const json = (await error.response.json()) as { message: string };
+        setMessage(json.message);
       }
       if (error instanceof Error) {
         setMessage(error.message);
       }
-      if (error) {
-        setMessage(error?.toString());
+      if (error !== undefined) {
+        setMessage(error.toString());
       }
     })();
   }, [error]);
 
   return (
-    <output className={styles.container} hidden={!error}>
+    <output className={styles.container} hidden={error !== undefined}>
       {message}
     </output>
   );

src/Components/InfoIcon/InfoIcon.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useCallback, useRef, useState } from 'react';
+import { type PropsWithChildren, useCallback, useRef, useState } from 'react';
 
 import * as styles from './InfoIcon.module.css';
 

src/Components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import { Fragment, MouseEventHandler } from 'react';
+import { Fragment, type MouseEventHandler } from 'react';
 
 import * as styles from './Modal.module.css';
 

src/Components/ResultsErrors/ResultsErrors.tsx

@@ -1,4 +1,4 @@
-import { DidUri } from '@kiltprotocol/sdk-js';
+import { type DidUri } from '@kiltprotocol/sdk-js';
 
 import * as styles from './ResultsErrors.module.css';