configure eslint with type and lint-staged for pre-commit

.eslintignore

@@ -1,3 +1,11 @@
 **/node_modules/*
 **/out/*
-**/.next/*
+**/.next/*
+
+node_modules
+.next
+build
+
+next.config.js
+postcss.config.js
+tailwind.config.js

.eslintrc.json

@@ -0,0 +1,47 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint",
+    "import",
+    "react",
+    "react-hooks",
+    "destructuring"
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:@next/next/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "overrides": [],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "project": true,
+    "tsconfigRootDir": "__dirname"
+  },
+  "rules": {
+    // React scope no longer necessary with new JSX transform\
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-misused-promises": [
+      "error",
+      {
+        "checksVoidReturn": false
+      }
+    ],
+    // Allow .js files to use JSX syntax
+    "react/jsx-filename-extension": ["error", { "extensions": [".tsx"] }],
+    "@typescript-eslint/no-floating-promises": "off",
+    "@typescript-eslint/prefer-nullish-coalescing": "off",
+    "@typescript-eslint/strict-boolean-expressions": "off",
+    "react/no-unescaped-entities": "off"
+  },
+  "root": true
+}

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.lintstagedrc.json

@@ -0,0 +1,4 @@
+{
+  "*.{ts,tsx}": ["eslint --fix --quiet"],
+  "*.{ts,tsx,json}": ["prettier --write"]
+}

.prettierignore

@@ -2,4 +2,5 @@ node_modules
 .next
 yarn.lock
 package-lock.json
-public
+public
+build

.vscode/launch.json

@@ -1,16 +1,16 @@
 {
-    "configurations": [
-        {
-            "name": "Next.js: debug server-side",
-            "type": "node-terminal",
-            "request": "launch",
-            "command": "npm run dev"
-        },
-        {
-            "name": "Next.js: chrome debug client-side",
-            "type": "chrome",
-            "request": "launch",
-            "url": "http://localhost:3000"
-        }
-    ]
-}
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev"
+    },
+    {
+      "name": "Next.js: chrome debug client-side",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    }
+  ]
+}

components/common/Button/LinkButton.tsx

@@ -4,7 +4,7 @@ import { LinkButtonProps } from './Button.types';
 import { PropsWithChildren } from 'react';
 
 export function LinkButton(props: PropsWithChildren<LinkButtonProps>) {
-  const onClick = (e: any) => {
+  const onClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
     const btn = e.currentTarget;
     const circle = document.createElement('span');
     const diameter = Math.max(btn.clientWidth, btn.clientHeight);

components/common/Button/index.tsx

@@ -3,7 +3,7 @@ import { ButtonProps } from './Button.types';
 import { PropsWithChildren } from 'react';
 
 export function Button(props: PropsWithChildren<ButtonProps>) {
-  const handleClick = (e: any) => {
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     const btn = e.currentTarget;
     const circle = document.createElement('span');
     const diameter = Math.max(btn.clientWidth, btn.clientHeight);

components/common/Table/Table.type.ts

@@ -19,5 +19,5 @@ export interface ColumnType {
   id: number;
   title: string;
   tokenType?: TokenType;
-  component?: any;
+  component?: React.ComponentType<CellProps>;
 }

components/detail/SwapDetailSummary/SwapDetail.type.ts

@@ -8,7 +8,7 @@ export interface PropsType {
 export interface ColumnType {
   id: number;
   title: string;
-  component?: any;
+  component?: React.ComponentType<SwapDetailItem>;
 }
 
 export interface SwapDetailItem {

components/detail/SwapSteps/SwapStepAddress.tsx

@@ -17,11 +17,8 @@ function SwapStepAddress(props: SwapStepItemValueProps) {
     address && (
       <div className="flex col-span-4 items-center p-16">
         <button onClick={handleClick} className="text-secondary-500 mr-5">
-          {address?.length > 40
-            ? `${address.slice(0, 20)}...${address.slice(
-                address.length - 20,
-                address.length,
-              )}`
+          {address?.length > 41
+            ? `${address.slice(0, 20)}...${address.slice(-20)}`
             : address}
         </button>
         <ButtonCopyIcon text={address} />

components/detail/SwapSteps/SwapStepSwapper.tsx

@@ -30,7 +30,7 @@ function SwapStepSwapper(props: SwapStepItemProps) {
                 className={`bg-transaction ml-[0.875rem] border-l border-solid ${borderColor}  w-fll h-[0.5rem]`}></div>
             )}
             <div
-              key={`swapper-${internalSwapper?.swapperId}`}
+              key={`swapper-${internalSwapper.swapperId}`}
               className="flex items-center">
               <img
                 className={`mr-10 border w-[1.75rem] h-[1.75rem] border-solid ${borderColor} rounded-full`}

components/detail/SwapSteps/SwapSteps.type.ts

@@ -28,7 +28,7 @@ export interface TransactionURLProps {
 export interface ColumnType {
   id: number;
   title: string;
-  component?: any;
+  component?: React.ComponentType<SwapStepItemValueProps>;
 }
 
 export interface SwapStepItemValueProps {

components/home/ChartBox/Chart.tsx

@@ -96,6 +96,7 @@ export const Chart = (props: ChartProps) => {
           snapTooltipToDatumX
           snapTooltipToDatumY
           showVerticalCrosshair
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           renderTooltip={({ tooltipData }: any) => (
             <div className="text-12">
               <div className="mb-1">Swaps</div>

constant/index.ts

@@ -3,6 +3,7 @@ export const MATCH_TYPE = {
   REQUESTID: 'REQUESTID',
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const STATUS: any = {
   success: 'success',
   failed: 'failed',

next.config.js

@@ -2,6 +2,6 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -6,8 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
-    "prettier": "prettier ./components/navbar/deskNavbar.tsx",
+    "lint": "eslint --fix --quiet .",
+    "prettier": "prettier --write ./components/detail/SwapSteps/SwapStepAddress.tsx",
     "prepare": "husky install",
     "build:icons": "svgr svgs/resources/ --config-file svgs/configs/.svgrrc.default.cjs && prettier -w ./components/icons"
   },
@@ -35,20 +35,24 @@
     "@types/node": "18.11.9",
     "@types/react": "18.2.33",
     "@types/react-dom": "18.2.14",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
     "autoprefixer": "^10.4.13",
-    "eslint": "^8.54.0",
+    "eslint": "^8.55.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard-with-typescript": "^23.0.0",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-destructuring": "^2.2.1",
+    "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-n": "^15.5.1",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.0",
+    "lint-staged": "^15.2.0",
     "postcss": "^8.4.19",
     "prettier": "^3.1.0",
     "tailwindcss": "^3.2.4",
-    "typescript": "^4.9.3"
+    "typescript": "^5.3.2"
   }
 }

pages/search.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/prefer-optional-chain */
 import { GetServerSideProps } from 'next';
 import { useRouter } from 'next/router';
 import { getSearchResult, getWalletSwaps } from '../services';

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};