fix: add eslint (#849)

* fix: add eslint

* add yarn lock file

* change node version frontend workflow

* change next js version 14.0.1

* remove lint to yarn build

.github/workflows/frontend.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
       - name: npm ci, build
         working-directory: ./frontend
         run: |
@@ -26,7 +26,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
       - name: yarn ci, build and test
         working-directory: ./frontend
         run: |

frontend/.eslintrc.json

@@ -1,3 +1,15 @@
 {
-  "extends": "next/core-web-vitals"
-}
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-explicit-any": "error"
+  }
+}

frontend/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+    "semi": false,
+    "trailingComma": "es5",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "useTabs": false
+  }

frontend/package.json

@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "yarn lint && next dev",
     "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "start": "yarn lint && next start",
+    "lint": "next lint --no-cache"
   },
   "dependencies": {
     "@emotion/cache": "^11.11.0",
@@ -23,13 +23,18 @@
     "axios": "^1.5.1",
     "eslint": "8.50.0",
     "eslint-config-next": "13.5.2",
-    "next": "13.5.2",
+    "next": "14.0.1",
     "postcss": "8.4.30",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.47.0",
     "react-redux": "^8.1.3",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "eslint-config-prettier": "^9.0.0",
+    "prettier": "^3.0.3"
   }
 }

frontend/src/app/(routes)/feegrant/Feegrant.tsx

@@ -22,15 +22,15 @@ export default function Feegrant() {
     setFeegrantTypeTab(value);
   };
 
-  const methods = useForm({
-    defaultValues: {
-      grantee: "",
-      spendLimit: 0,
-      expiration: expiration,
-      period: 1,
-      periodSpendLimit: 0,
-    },
-  });
+  // const methods = useForm({
+  //   defaultValues: {
+  //     grantee: "",
+  //     spendLimit: 0,
+  //     expiration: expiration,
+  //     period: 1,
+  //     periodSpendLimit: 0,
+  //   },
+  // });
 
   return (
     <>

frontend/src/app/(routes)/groups/page.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import GroupsCards from "../../../components/GroupsCards";
 import Groups from "../../../components/tabs/Groups";
 
 const page = () => {

frontend/src/components/ConnectWalletButton.tsx

@@ -22,6 +22,7 @@ export const ConnectWalletButton = ({
       (connectWalletDialogOpen) => !connectWalletDialogOpen
     );
   };
+
   const selectWallet = (walletName: string) => {
     dispatch(
       connectWalletV1({
@@ -33,28 +34,28 @@ export const ConnectWalletButton = ({
     handleClose();
   };
 
+  const tryConnectWallet = (walletName: string) => {
+    dispatch(
+      connectWalletV1({
+        walletName,
+        mainnets: networks,
+        testnets: [],
+      })
+    );
+  }
+
   useEffect(() => {
     const walletName = getWalletName();
     console.log(walletName)
+
     if (isConnected()) {
-      dispatch(
-        connectWalletV1({
-          walletName,
-          mainnets: networks,
-          testnets: [],
-        })
-      );
+      tryConnectWallet(walletName)
     }
+
     const accountChangeListener = () => {
       setTimeout(
         () =>
-          dispatch(
-            connectWalletV1({
-              walletName,
-              mainnets: networks,
-              testnets: [],
-            })
-          ),
+        tryConnectWallet(walletName),
         1000
       );
       window.location.reload();
@@ -71,7 +72,7 @@ export const ConnectWalletButton = ({
         accountChangeListener
       );
     };
-  }, []);
+  });
 
   return connected ? (
     <>{children}</>

frontend/src/constants/constants.ts

@@ -0,0 +1,5 @@
+/**
+ * The base URL for the Multisig API.
+ * @constant
+ */
+export const API_URL = process.env.REACT_APP_API_URI;

frontend/src/services/bankService.ts

@@ -7,9 +7,9 @@ const fetchBalances = async (
   address: string,
   pagination: any
 ):Promise<Response> => {
-  let uri = `${baseURL}${balancesURL}${address}`;
-  return await fetch(uri);
-};
+    const uri = `${baseURL}${balancesURL}${address}`;
+    return await fetch(uri);
+  };
 
 const fetchBalance = async (
   baseURL: string,

frontend/src/services/governance.ts

@@ -46,7 +46,7 @@ const fetchProposalTally = async (
   baseURL: string,
   proposalId: number
 ): Promise<Response> => {
-  let uri = `${cleanURL(baseURL)}${proposalTallyURL(proposalId)}`;
+  const uri = `${cleanURL(baseURL)}${proposalTallyURL(proposalId)}`;
   return await fetch(uri);
 };
 

frontend/src/services/stakingService.ts

@@ -8,16 +8,16 @@ const poolURL = "/cosmos/staking/v1beta1/pool";
 const fetchValidators = async (
   baseURL: string,
 ): Promise<Response> => {
-  let uri = `${baseURL}${validatorsURL}`;
-
+  const uri = `${baseURL}${validatorsURL}`;
+  
   return await fetch(uri);
 };
 
 const fetchDelegations = async (
   baseURL: string,
   address: string,
 ): Promise<Response> => {
-  let uri = `${baseURL}${delegationsURL}${address}`;
+  const uri = `${baseURL}${delegationsURL}${address}`;
 
   return await fetch(uri);
 };
@@ -26,7 +26,7 @@ const fetchUnbonding = async (
   baseURL: string,
   address: string,
 ): Promise<Response> => {
-  let uri = `${baseURL}${unbondingDelegationsURL(address)}`;
+  const uri = `${baseURL}${unbondingDelegationsURL(address)}`;
 
   return await fetch(uri);
 };

frontend/src/store/features/multisig/multisigService.ts

@@ -1,14 +1,15 @@
 "use client";
 
 import Axios from "axios";
-
-const BASE_URL = "http://localhost:1323";
+import { API_URL } from "../../../constants/constants";
 
 const GET_ACCOUNTS = "/multisig/accounts";
 
 const getAccounts = (address: string) =>
-  Axios.get(`${BASE_URL}${GET_ACCOUNTS}/${address}`);
+  Axios.get(`${API_URL}${GET_ACCOUNTS}/${address}`);
 
-export default {
+const exportObj = {
   getAccounts: getAccounts,
 };
+
+export default exportObj;

frontend/src/store/features/wallet/walletSlice.ts

@@ -76,13 +76,18 @@ export const connectWalletV1 = createAsyncThunk(
           ) {
             await window.wallet.experimentalSuggestChain(mainnets[i].config);
           }
+
           if (data.walletName === "leap" && mainnets[i].leapExperimental) {
             await window.wallet.experimentalSuggestChain(mainnets[i].config);
           }
-          let chainId: string = mainnets[i].config.chainId;
+
+          const chainId: string = mainnets[i].config.chainId;
           const chainName: string = mainnets[i].config.chainName;
+
           await getWalletAmino(chainId);
-          let walletInfo = await window.wallet.getKey(chainId);
+
+          const walletInfo = await window.wallet.getKey(chainId);
+
           walletInfo.pubKey = Buffer.from(walletInfo?.pubKey).toString(
             "base64"
           );
@@ -114,12 +119,16 @@ export const connectWalletV1 = createAsyncThunk(
           ) {
             await window.wallet.experimentalSuggestChain(mainnets[i].config);
           }
+
           if (data.walletName === "leap" && testnets[i].leapExperimental) {
             await window.wallet.experimentalSuggestChain(mainnets[i].config);
           }
+
           const chainId = testnets[i].config.chainId;
           const chainName = testnets[i].config.chainName;
+
           await getWalletAmino(chainId);
+
           const walletInfo = await window.wallet.getKey(chainId);
           walletInfo.pubKey = Buffer.from(walletInfo?.pubKey).toString(
             "base64"
@@ -149,6 +158,7 @@ export const connectWalletV1 = createAsyncThunk(
       } else {
         setConnected();
         setWalletName(data.walletName);
+
         return fulfillWithValue({
           chainInfos,
           nameToChainIDs,
@@ -172,7 +182,6 @@ const walletSlice = createSlice({
     },
     resetWallet: (state) => {
       state.connected = false;
-
       state.name = "";
       state.pubKey = "";
       state.nameToChainIDs = {};

frontend/src/utils/localStorage.ts

@@ -22,6 +22,7 @@ export function isConnected(): boolean {
   if (connected && KEY_WALLET_NAME) {
     return true;
   }
+
   return false;
 }
 export function logout() {