chore(refactor): update eslint config, start fix with autofix

.eslintignore

@@ -1,3 +1,7 @@
 webpack.config.prod.js
 node_modules
-dist
+dist
+stories
+typedoc.js
+test
+src/components

.eslintrc

@@ -1,26 +1,28 @@
 {
   "parser": "@typescript-eslint/parser",
-  "plugins": [
-    "@typescript-eslint",
-    "prettier",
-    "react-hooks"
-  ],
+
+  "plugins": ["@typescript-eslint", "promise", "unicorn", "react-hooks"],
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
   "extends": [
-    "react-app",
-    "react-app/jest",
-    "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:unicorn/recommended",
+    "airbnb",
+    "airbnb/hooks",
+    "airbnb-typescript",
     "prettier"
   ],
   "rules": {
+    "no-restricted-syntax": "off",
+    "import/prefer-default-export": "off",
+    "no-void": "off",
     "@typescript-eslint/ban-ts-comment": "warn",
     "@typescript-eslint/no-non-null-assertion": "warn",
     "@typescript-eslint/prefer-as-const": "warn",
     "@typescript-eslint/no-empty-function": "warn",
     "@typescript-eslint/no-empty-interface": "warn",
-    "prettier/prettier": [
-      "warn"
-    ],
     "@typescript-eslint/typedef": [
       "warn",
       {
@@ -31,17 +33,36 @@
         // objectDestructuring: true,
       }
     ],
+    "react/jsx-props-no-spreading": 0,
+    "react/require-default-props": 0,
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn"
+    "react-hooks/exhaustive-deps": "warn",
+    "unicorn/prefer-node-protocol": "off",
+    "unicorn/prevent-abbreviations": "off",
+    "unicorn/filename-case": "off",
+    "unicorn/no-array-callback-reference": 1,
+    "unicorn/no-useless-undefined": "off",
+    "unicorn/no-null": "off",
+    "unicorn/no-array-reduce": "warn",
+    "unicorn/no-await-expression-member": "warn",
+    "unicorn/no-array-for-each": "warn",
+    "unicorn/consistent-function-scoping": [
+      "error",
+      {
+        "checkArrowFunctions": false
+      }
+    ],
+    "unicorn/prefer-math-trunc": "off",
+    "unicorn/consistent-destructuring": "off",
+    "@typescript-eslint/unbound-method": "off",
+    "no-promise-executor-return": "off"
   },
   "overrides": [
     {
-      "files": [
-        "**/*.stories.*"
-      ],
+      "files": ["**/*.stories.*"],
       "rules": {
         "import/no-anonymous-default-export": "off"
       }
     }
   ]
-}
+}

.husky/pre-commit

@@ -2,4 +2,3 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 yarn prettier
-yarn lint

.prettierignore

@@ -0,0 +1,15 @@
+# directories
+.yarn/
+**/coverage
+**/dist
+**/node_modules
+**/.next
+# files
+*.env
+*.log
+.pnp.*
+coverage.json
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+node_modules

package.json

@@ -23,7 +23,8 @@
     "build-storybook": "storybook build",
     "analyze": "size-limit --why",
     "size": "size-limit",
-    "lint": "eslint \"./src/**/*.{ts,tsx}\" ./stories/**/*.tsx --fix",
+    "lint": "eslint --config .eslintrc --ignore-path .eslintignore .",
+    "lint:fix": "eslint --config .eslintrc --fix --ignore-path .eslintignore .",
     "prettier": "prettier ./src ./test ./stories --write",
     "test": "jest --passWithNoTests",
     "doc": "typedoc"
@@ -78,20 +79,27 @@
     "@types/node": "^20.1.5",
     "@types/react": "^18.0.33",
     "@types/webpack": "^5.28.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/parser": "^5.59.7",
     "assert": "^2.0.0",
     "buffer": "^6.0.3",
     "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
     "crypto-browserify": "^3.12.0",
     "css-loader": "^6.7.3",
     "css-minimizer-webpack-plugin": "^5.0.0",
-    "eslint": "^8.40.0",
+    "eslint": "^8.2.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-unicorn": "^47.0.0",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "https-browserify": "^1.0.0",

src/helpers/masa.ts

@@ -38,9 +38,9 @@ export const createNewMasa = ({
     environment: environment.environment,
     arweave: {
       host: arweaveConfig?.host || 'arweave.net',
-      port: parseInt(arweaveConfig?.port || '443'),
+      port: Number.parseInt(arweaveConfig?.port || '443'),
       protocol: arweaveConfig?.protocol || 'https',
-      logging: (!!arweaveConfig?.logging as boolean) || false,
+      logging: !!arweaveConfig?.logging || false,
     },
     verbose,
   });

src/index.tsx

@@ -1,4 +1,5 @@
 import * as buffer from 'buffer';
+
 window.Buffer = buffer.Buffer;
 
 export * from './components';

src/provider/configured-rainbowkit-provider/configured-rainbowkit-provider.tsx

@@ -100,11 +100,11 @@ const walletConnectorsList = {
   }),
 };
 
-export const ConfiguredRainbowKitProvider = ({
+export function ConfiguredRainbowKitProvider({
   children,
   chainsToUse,
   walletsToUse = ['metamask'],
-}: ConfiguredRainbowKitProviderProps) => {
+}: ConfiguredRainbowKitProviderProps) {
   const rainbowkitChains = getRainbowkitChains(chainsToUse);
   const { chains, provider } = configureChains(rainbowkitChains, [
     // alchemyProvider({ apiKey: process.env.ALCHEMY_ID }),
@@ -139,7 +139,7 @@ export const ConfiguredRainbowKitProvider = ({
       </RainbowKitProvider>
     </WagmiConfig>
   );
-};
+}
 
 export const ConfiguredRainbowKitContext = createContext(
   {} as ConfiguredRainbowKitProviderValue

src/provider/configured-rainbowkit-provider/utils.ts

@@ -43,7 +43,7 @@ export type MasaNetworks = Partial<{
 export const getRainbowkitChains = (
   networkList?: Array<keyof MasaNetworks>
 ) => {
-  if (!networkList || (networkList && !networkList.length)) {
+  if (!networkList || (networkList && networkList.length === 0)) {
     return rainbowkitChains;
   }
 
@@ -61,10 +61,11 @@ export const getRainbowkitChains = (
   );
 
   const userNetworksMasa = userNetworksFiltered.map((un) => masaNetworks[un]);
-  const userNetworksRainbowkit = userNetworksMasa.map((unm) => unm?.chainId);
+  const userNetworksRainbowkit = new Set(
+    userNetworksMasa.map((unm) => unm?.chainId)
+  );
   const userChainsRainbowkit = rainbowkitChains.filter(
-    (rainbowkitChain: Chain) =>
-      userNetworksRainbowkit.includes(rainbowkitChain.id)
+    (rainbowkitChain: Chain) => userNetworksRainbowkit.has(rainbowkitChain.id)
   );
 
   return userChainsRainbowkit;

src/provider/hooks.ts

@@ -1,7 +1,8 @@
 import { useDisconnect } from 'wagmi';
-import { queryClient } from './masa-query-client';
 import { useAsyncFn } from 'react-use';
 import { DependencyList } from 'react';
+import { Masa } from '@masa-finance/masa-sdk';
+import { Signer } from 'ethers';
 import {
   getCreditScoresQueryKey,
   getGreenQueryKey,
@@ -11,8 +12,7 @@ import {
   getSoulnamesQueryKey,
   getWalletQueryKey,
 } from './modules';
-import { Masa } from '@masa-finance/masa-sdk';
-import { Signer } from 'ethers';
+import { queryClient } from './masa-query-client';
 
 const QUERIES = [
   'identity',

src/provider/masa-context-provider.tsx

@@ -1,10 +1,11 @@
 import {
   EnvironmentName,
   Masa,
-  SoulNameErrorCodes,
   SupportedNetworks,
 } from '@masa-finance/masa-sdk';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Signer } from 'ethers';
+import { CustomGallerySBT } from 'components/masa-interface/pages/gallery/gallery';
 import { createNewMasa } from '../helpers';
 import {
   useCreditScores,
@@ -16,11 +17,9 @@ import {
   useSoulnames,
   useWallet,
 } from './modules';
-import { Signer } from 'ethers';
 import { MasaContext } from './masa-context';
 import { MasaShape } from './masa-shape';
 import { useScopes } from './modules/scopes/scopes';
-import { CustomGallerySBT } from 'components/masa-interface/pages/gallery/gallery';
 import { useCustomGallerySBT, useCustomSBT } from './modules/custom-sbts';
 import { useRainbowKit } from './use-rainbowkit';
 import { useWagmi } from './modules/wagmi';
@@ -29,8 +28,6 @@ import { MasaNetworks } from './configured-rainbowkit-provider/utils';
 import { useLogout } from './hooks';
 import { useAccountState } from './use-account-state';
 
-export { SoulNameErrorCodes };
-
 export interface ArweaveConfig {
   port?: string;
   host?: string;
@@ -53,7 +50,7 @@ export interface MasaContextProviderProps extends MasaShape {
   walletsToUse?: string[];
 }
 
-export const MasaContextProvider = ({
+export function MasaContextProvider({
   children,
   // masa-react branding
   company,
@@ -75,7 +72,7 @@ export const MasaContextProvider = ({
   // api url override
   apiUrl,
   useRainbowKitWalletConnect = false,
-}: MasaContextProviderProps): JSX.Element => {
+}: MasaContextProviderProps): JSX.Element {
   // masa
   const [masaInstance, setMasaInstance] = useState<Masa | undefined>();
   const [signer, setSigner] = useState<Signer | undefined>();
@@ -201,27 +198,27 @@ export const MasaContextProvider = ({
   );
 
   // global loading flag
-  const isLoading = useMemo(() => {
-    return (
+  const isLoading = useMemo(
+    () =>
       !masaInstance ||
       isWalletLoading ||
       isSessionLoading ||
       isIdentityLoading ||
       isSoulnamesLoading ||
       isCreditScoresLoading ||
       isGreensLoading ||
-      wagmiLoading
-    );
-  }, [
-    masaInstance,
-    isWalletLoading,
-    isSessionLoading,
-    isIdentityLoading,
-    isSoulnamesLoading,
-    isCreditScoresLoading,
-    isGreensLoading,
-    wagmiLoading,
-  ]);
+      wagmiLoading,
+    [
+      masaInstance,
+      isWalletLoading,
+      isSessionLoading,
+      isIdentityLoading,
+      isSoulnamesLoading,
+      isCreditScoresLoading,
+      isGreensLoading,
+      wagmiLoading,
+    ]
+  );
 
   const connect = useCallback(
     (options?: { scope?: string[]; callback?: () => void }) => {
@@ -232,11 +229,9 @@ export const MasaContextProvider = ({
       // * feature toggle, to be removed soon
       if (useRainbowKitWalletConnect) {
         // * set the callback to open masa modal after rainbowkit modal is closed
-        setRainbowKitModalCallback(() => {
-          return () => {
-            setModalOpen(true);
-            // setForcedPage?.(null);
-          };
+        setRainbowKitModalCallback(() => () => {
+          setModalOpen(true);
+          // setForcedPage?.(null);
         });
 
         openConnectModal?.();
@@ -403,4 +398,6 @@ export const MasaContextProvider = ({
   return (
     <MasaContext.Provider value={context}>{children}</MasaContext.Provider>
   );
-};
+}
+
+export { SoulNameErrorCodes } from '@masa-finance/masa-sdk';