fix: update packages / eslint / added web3-icons package

app/page.page.tsx

@@ -34,7 +34,7 @@ export default async function Page({
 }: {
   searchParams: { [key: string]: string | string[] | undefined };
 }) {
-  const activePage = !!searchParams['activePage']
+  const activePage = searchParams['activePage']
     ? Number(searchParams['activePage']) - 1
     : 0;
 

app/proposal-create-overview/page.page.tsx

@@ -25,13 +25,13 @@ export default async function ProposalCreateOverview({
   searchParams: { [key: string]: string | string[] | undefined };
 }) {
   // params
-  const proposalId = !!searchParams['proposalId']
+  const proposalId = searchParams['proposalId']
     ? (Number(searchParams['proposalId']) as number)
     : undefined;
-  const ipfsHash = !!searchParams['ipfsHash']
+  const ipfsHash = searchParams['ipfsHash']
     ? (String(searchParams['ipfsHash']) as Hex)
     : undefined;
-  const votingPortal = !!searchParams['votingPortal']
+  const votingPortal = searchParams['votingPortal']
     ? (String(searchParams['votingPortal']) as Hex)
     : undefined;
 

app/proposal/page.page.tsx

@@ -35,10 +35,10 @@ type Props = {
 export async function generateMetadata({
   searchParams,
 }: Props): Promise<Metadata> {
-  const proposalId = !!searchParams['proposalId']
+  const proposalId = searchParams['proposalId']
     ? String(searchParams['proposalId'])
     : undefined;
-  const ipfsHash = !!searchParams['ipfsHash']
+  const ipfsHash = searchParams['ipfsHash']
     ? String(searchParams['ipfsHash'])
     : undefined;
 
@@ -85,10 +85,10 @@ export default async function ProposalPage({
   searchParams: { [key: string]: string | string[] | undefined };
 }) {
   // params
-  const proposalId = !!searchParams['proposalId']
+  const proposalId = searchParams['proposalId']
     ? String(searchParams['proposalId'])
     : undefined;
-  const ipfsHash = !!searchParams['ipfsHash']
+  const ipfsHash = searchParams['ipfsHash']
     ? String(searchParams['ipfsHash'])
     : undefined;
   const id = Number(proposalId);

eslint.config.mjs

@@ -0,0 +1,68 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+import eslintReact from 'eslint-plugin-react';
+import eslintReactHooks from 'eslint-plugin-react-hooks';
+import prettierPlugin from 'eslint-plugin-prettier';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import eslintPluginSimpleImportSort from 'eslint-plugin-simple-import-sort';
+import eslintPluginImport from 'eslint-plugin-import';
+import eslintPluginNext from '@next/eslint-plugin-next';
+
+/** @type {import('eslint').Linter.FlatConfig[]} */
+export default tseslint.config(
+  {
+    plugins: {
+      '@typescript-eslint': tseslint.plugin,
+      'react': eslintReact,
+      'react-hooks': eslintReactHooks,
+      prettier: prettierPlugin,
+      'simple-import-sort': eslintPluginSimpleImportSort,
+      'import': eslintPluginImport,
+      '@next/next': eslintPluginNext,
+    },
+  },
+  {
+    ignores: ['dist', 'node_modules', 'coverage', 'eslint.config.mjs', '.next', '.github', 'next.config.js', 'svgo.config.js'],
+  },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.es2020,
+      },
+      parserOptions: {
+        project: ['tsconfig.json'],
+      },
+      parser: tseslint.parser,
+      ecmaVersion: 'latest'
+    },
+  },
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [tseslint.configs.disableTypeChecked],
+    rules: {
+      ...eslintConfigPrettier.rules,
+      ...eslintPluginImport.configs.recommended.rules,
+      ...eslintPluginNext.configs.recommended.rules,
+      '@typescript-eslint/no-empty-interface': 'off',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      'prettier/prettier': 'warn',
+      'react-hooks/rules-of-hooks': 'error',
+      'simple-import-sort/imports': 'error',
+      'simple-import-sort/exports': 'warn',
+      'import/first': 'error',
+      'import/no-duplicates': 'error',
+      'import/no-named-as-default': 'off',
+      'import/no-unresolved': 'off',
+      'import/no-named-as-default-member': 'off',
+      'import/namespace': 'off',
+      'react/self-closing-comp': 'warn',
+      '@next/next/no-duplicate-head': 'off',
+      'no-prototype-builtins': 'off',
+    },
+  },
+);

package.json

@@ -31,43 +31,44 @@
     "test": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
   },
   "dependencies": {
-    "@bgd-labs/aave-address-book": "^2.26.0",
+    "@bgd-labs/aave-address-book": "^2.30.0",
     "@bgd-labs/aave-governance-ui-helpers": "^3.1.5",
-    "@bgd-labs/frontend-web3-utils": "^1.2.1",
+    "@bgd-labs/frontend-web3-utils": "^1.3.0",
+    "@bgd-labs/react-web3-icons": "^0.0.49",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.5",
     "@gelatonetwork/relay-sdk-viem": "^1.0.1",
-    "@headlessui/react": "^1.7.19",
-    "@mui/system": "^5.15.15",
-    "@next/bundle-analyzer": "^14.2.2",
-    "@safe-global/safe-deployments": "^1.34.0",
-    "@tanstack/react-query": "^5.31.0",
+    "@headlessui/react": "^2.1.2",
+    "@mui/system": "^5.16.1",
+    "@next/bundle-analyzer": "^14.2.5",
+    "@safe-global/safe-deployments": "^1.37.1",
+    "@tanstack/react-query": "^5.51.1",
     "alova": "2.13.0",
     "bignumber.js": "^9.1.2",
-    "dayjs": "^1.11.10",
+    "dayjs": "^1.11.11",
     "encoding": "^0.1.13",
     "ethereum-blockies-base64": "^1.0.2",
     "final-form": "^4.20.10",
     "final-form-arrays": "^3.1.0",
     "fuse.js": "7.0.0",
     "gray-matter": "^4.0.3",
-    "immer": "^10.0.4",
+    "immer": "^10.1.1",
     "lokijs": "^1.5.12",
-    "next": "14.1.4",
+    "next": "14.2.5",
     "next-themes": "^0.3.0",
-    "nextjs-toploader": "^1.6.11",
+    "nextjs-toploader": "^1.6.12",
     "nprogress": "^0.2.0",
-    "pino-pretty": "^11.0.0",
+    "pino-pretty": "^11.2.1",
     "prism-react-renderer": "^2.3.1",
-    "proxy-memoize": "^2.0.5",
+    "proxy-memoize": "^3.0.1",
     "query-string": "^9.0.0",
-    "react": "18.2.0",
+    "react": "18.3.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-countup": "^6.5.3",
     "react-custom-scrollbars-2": "^4.5.0",
-    "react-dom": "18.2.0",
+    "react-dom": "18.3.1",
     "react-final-form": "^6.5.9",
     "react-final-form-arrays": "^3.1.4",
     "react-loading-skeleton": "^3.4.0",
@@ -76,44 +77,44 @@
     "react-syntax-highlighter": "^15.5.0",
     "remark-gemoji": "^8.0.0",
     "remark-gfm": "^4.0.0",
-    "sharp": "0.33.3",
-    "viem": "^2.9.25",
-    "wagmi": "^2.5.20",
-    "zustand": "^4.5.2"
+    "sharp": "0.33.4",
+    "viem": "^2.17.3",
+    "wagmi": "^2.10.10",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.4",
-    "@babel/eslint-parser": "^7.24.1",
-    "@babel/plugin-syntax-flow": "^7.24.1",
-    "@babel/plugin-transform-react-jsx": "^7.23.4",
-    "@next/eslint-plugin-next": "^14.2.2",
+    "@babel/core": "^7.24.8",
+    "@babel/eslint-parser": "^7.24.8",
+    "@babel/plugin-syntax-flow": "^7.24.7",
+    "@babel/plugin-transform-react-jsx": "^7.24.7",
+    "@next/eslint-plugin-next": "^14.2.5",
     "@svgr/webpack": "^8.1.0",
     "@types/dom-css": "^2.1.1",
-    "@types/lodash": "^4.17.0",
-    "@types/node": "^20.12.7",
+    "@types/lodash": "^4.17.6",
+    "@types/node": "^20.14.10",
     "@types/nprogress": "^0.2.3",
-    "@types/react": "18.2.79",
+    "@types/react": "18.3.3",
     "@types/react-copy-to-clipboard": "^5.0.7",
-    "@types/react-dom": "18.2.25",
+    "@types/react-dom": "18.3.0",
     "@types/react-paginate": "^7.1.4",
-    "@types/react-syntax-highlighter": "^15.5.11",
-    "@typescript-eslint/eslint-plugin": "^7.7.0",
-    "@typescript-eslint/parser": "^7.7.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "babel-loader": "^9.1.3",
-    "eslint": "8.57.0",
+    "eslint": "^9.6.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "^12.1.0",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "globals": "^15.8.0",
     "html-webpack-plugin": "^5.6.0",
     "husky": "^9.0.11",
     "identity-obj-proxy": "^3.0.0",
-    "lint-staged": "^15.2.2",
-    "prettier": "^3.2.5",
-    "semver": "^7.6.0",
-    "typescript": "5.4.5"
+    "lint-staged": "^15.2.7",
+    "prettier": "^3.3.2",
+    "semver": "^7.6.2",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^7.16.0"
   },
   "lint-staged": {
     "!(.prettierignore)*.*": "yarn lint:fix",

pages/proposal-create-overview.tsx

@@ -1,4 +1,5 @@
 import { useSearchParams } from 'next/navigation';
+// eslint-disable-next-line import/default
 import queryString from 'query-string';
 import React from 'react';
 import { Hex } from 'viem';
@@ -15,13 +16,13 @@ export default function ProposalCreateOverview() {
   if (!searchParams) return null;
 
   // params
-  const proposalId = !!searchParams.get('proposalId')
+  const proposalId = searchParams.get('proposalId')
     ? (Number(searchParams.get('proposalId')) as number)
     : undefined;
-  const ipfsHash = !!searchParams.get('ipfsHash')
+  const ipfsHash = searchParams.get('ipfsHash')
     ? (String(searchParams.get('ipfsHash')) as Hex)
     : undefined;
-  const votingPortal = !!searchParams.get('votingPortal')
+  const votingPortal = searchParams.get('votingPortal')
     ? (String(searchParams.get('votingPortal')) as Hex)
     : undefined;
 

src/delegate/components/DelegatePage.tsx

@@ -3,6 +3,7 @@
 import { WalletType } from '@bgd-labs/frontend-web3-utils';
 import { Box, useTheme } from '@mui/system';
 import dayjs from 'dayjs';
+// eslint-disable-next-line import/default
 import arrayMutators from 'final-form-arrays';
 import isEqual from 'lodash/isEqual';
 import { useRouter } from 'next/navigation';
@@ -100,7 +101,7 @@ export function DelegatePage() {
   }, [activeWallet?.address]);
 
   useEffect(() => {
-    if (!!delegateData.length) {
+    if (delegateData.length) {
       setLoadingData(false);
     } else {
       setLoadingData(true);

src/delegate/components/DelegateTableItemAddress.tsx

@@ -43,7 +43,7 @@ function Text({
       withoutHover={forHelp}
       isError={isError}>
       <>
-        {!!shownAddress
+        {shownAddress
           ? texts.delegatePage.tableItemDelegated
           : texts.delegatePage.tableItemNotDelegated}
         {!!shownAddress && (

src/delegate/components/MobileCard.tsx

@@ -4,7 +4,7 @@ import { useStore } from '../../store/ZustandStoreProvider';
 import { BoxWith3D } from '../../ui';
 import { CustomSkeleton } from '../../ui/components/CustomSkeleton';
 import { FormattedNumber } from '../../ui/components/FormattedNumber';
-import { TokenIcon } from '../../ui/components/TokenIcon';
+import { AssetIcon } from '../../ui/components/Web3Icons/AssetIcon';
 import { texts } from '../../ui/utils/texts';
 import { getFormDelegateData } from '../utils/getFormDelegateData';
 import { DelegateTableItemAddress } from './DelegateTableItemAddress';
@@ -60,7 +60,7 @@ export function MobileCard({
                 <CustomSkeleton circle width={30} height={30} />
               </Box>
             ) : (
-              <TokenIcon
+              <AssetIcon
                 symbol={symbol}
                 css={{ mr: 4, width: 30, height: 30 }}
               />

src/delegate/components/TableItem.tsx

@@ -6,7 +6,7 @@ import { useStore } from '../../store/ZustandStoreProvider';
 import { Divider } from '../../ui';
 import { CustomSkeleton } from '../../ui/components/CustomSkeleton';
 import { FormattedNumber } from '../../ui/components/FormattedNumber';
-import { TokenIcon } from '../../ui/components/TokenIcon';
+import { AssetIcon } from '../../ui/components/Web3Icons/AssetIcon';
 import { DelegateData } from '../types';
 import { getFormDelegateData } from '../utils/getFormDelegateData';
 import { DelegateTableItemAddress } from './DelegateTableItemAddress';
@@ -82,7 +82,7 @@ export function TableItem({
               <CustomSkeleton circle width={35} height={35} />
             </Box>
           ) : (
-            <TokenIcon
+            <AssetIcon
               symbol={symbol}
               css={{ mr: 16, width: 35, height: 35 }}
             />

src/delegate/store/delegationSelectors.ts

@@ -3,7 +3,7 @@ import { Address, zeroAddress } from 'viem';
 export function getToAddress(activeAddress: Address, toAddress: Address) {
   if (toAddress === activeAddress || toAddress === zeroAddress) {
     return '';
-  } else if (!!toAddress) {
+  } else if (toAddress) {
     return toAddress;
   }
   return '';

src/delegate/store/delegationSlice.ts

@@ -233,7 +233,7 @@ export const createDelegationSlice: StoreSlice<
           sigs.push(sig);
         }
 
-        if (!!sigs.length) {
+        if (sigs.length) {
           await get().executeTx({
             body: () => {
               get().setModalOpen(true);