chore(frontend): upgrade eslint to v9 and extend config (#596)

frontend/apps/battleship-zk/src/app.tsx

@@ -1,14 +1,16 @@
 import './app.scss';
 import '@gear-js/vara-ui/dist/style.css';
 import { useAccount, useApi } from '@gear-js/react-hooks';
-import { Routing } from './pages';
+
+import { Container, Footer } from '@dapps-frontend/ui';
+
+import { withProviders } from '@/app/hocs';
 import { ApiLoader } from '@/components';
 import { Header } from '@/components/layout';
-import { withProviders } from '@/app/hocs';
-
 import { useAccountAvailableBalanceSync } from '@/features/wallet/hooks';
-import { Container, Footer } from '@dapps-frontend/ui';
+
 import { useProgram } from './app/utils/sails';
+import { Routing } from './pages';
 
 function Component() {
   const { isApiReady } = useApi();

frontend/apps/battleship-zk/src/app/hocs/index.tsx

@@ -4,19 +4,20 @@ import {
   AccountProvider as GearAccountProvider,
   ProviderProps,
 } from '@gear-js/react-hooks';
-import { ComponentType } from 'react';
-import { BrowserRouter } from 'react-router-dom';
-
 import {
   SignlessTransactionsProvider as SharedSignlessTransactionsProvider,
   GaslessTransactionsProvider as SharedGaslessTransactionsProvider,
   EzTransactionsProvider,
 } from 'gear-ez-transactions';
+import { ComponentType } from 'react';
+import { BrowserRouter } from 'react-router-dom';
+
 import { DnsProvider as SharedDnsProvider, useDnsProgramIds } from '@dapps-frontend/hooks';
 import { QueryProvider } from '@dapps-frontend/ui';
 
 import { ADDRESS } from '@/app/consts';
 import { Alert, alertStyles } from '@/components/ui/alert';
+
 import { useProgram } from '../utils/sails';
 
 function ApiProvider({ children }: ProviderProps) {

frontend/apps/battleship-zk/src/app/hooks/api.ts

@@ -1,6 +1,6 @@
 import { useReadFullState } from '@gear-js/react-hooks';
-import { HexString } from '@polkadot/util/types';
 import { AnyJson } from '@polkadot/types/types';
+import { HexString } from '@polkadot/util/types';
 
 import { useProgramMetadata } from '@dapps-frontend/hooks';
 

frontend/apps/battleship-zk/src/app/utils/sails/lib/lib.ts

@@ -1,6 +1,6 @@
-import { TransactionBuilder, getServiceNamePrefix, getFnNamePrefix, ZERO_ADDRESS } from 'sails-js';
 import { GearApi, decodeAddress } from '@gear-js/api';
 import { TypeRegistry } from '@polkadot/types';
+import { TransactionBuilder, getServiceNamePrefix, getFnNamePrefix, ZERO_ADDRESS } from 'sails-js';
 
 export type ActorId = string;
 
@@ -125,7 +125,10 @@ export class Program {
   public readonly session: Session;
   public readonly single: Single;
 
-  constructor(public api: GearApi, public programId?: `0x${string}`) {
+  constructor(
+    public api: GearApi,
+    public programId?: `0x${string}`,
+  ) {
     const types: Record<string, any> = {
       VerifyingKeyBytes: {
         alpha_g1_beta_g2: 'Vec<u8>',

frontend/apps/battleship-zk/src/app/utils/sails/queries/use-configuration-query.ts

@@ -1,6 +1,7 @@
-import { useProgram } from '@/app/utils/sails';
 import { useProgramQuery } from '@gear-js/react-hooks';
 
+import { useProgram } from '@/app/utils/sails';
+
 export const useConfigurationQuery = () => {
   const program = useProgram();
 

frontend/apps/battleship-zk/src/app/utils/sails/sails.tsx

@@ -1,7 +1,9 @@
 import { useProgram as useGearJsProgram } from '@gear-js/react-hooks';
-import { Program } from '@/app/utils/sails/lib/lib';
+
 import { useDnsProgramIds } from '@dapps-frontend/hooks';
 
+import { Program } from '@/app/utils/sails/lib/lib';
+
 const useProgram = () => {
   const { programId } = useDnsProgramIds();
   const { data: program } = useGearJsProgram({ library: Program, id: programId });

frontend/apps/battleship-zk/src/components/layout/game-details/GameDetails.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+
 import styles from './GameDetails.module.scss';
 
 type Props = {

frontend/apps/battleship-zk/src/components/layout/header/ModalBackground.tsx

@@ -1,4 +1,5 @@
 import { motion, AnimatePresence } from 'framer-motion';
+
 import styles from './header.module.scss';
 
 type Props = {

frontend/apps/battleship-zk/src/components/layout/header/account-info/account-info.tsx

@@ -1,13 +1,12 @@
-import clsx from 'clsx';
-
 import { useApi, useAccount } from '@gear-js/react-hooks';
+import clsx from 'clsx';
 
+import { BurgerMenuIcon, CrossIcon } from '@/assets/images';
 import { VaraBalance } from '@/components/ui/balance';
 import { Button } from '@/components/ui/button';
-import { BurgerMenuIcon, CrossIcon } from '@/assets/images';
+import { useAccountAvailableBalance } from '@/features/wallet/hooks';
 
 import styles from './account-info.module.scss';
-import { useAccountAvailableBalance } from '@/features/wallet/hooks';
 
 type AccountInfoProps = BaseComponentProps & {
   openWallet: () => void;

frontend/apps/battleship-zk/src/components/layout/header/header.tsx

@@ -1,13 +1,15 @@
-import { useState } from 'react';
+import clsx from 'clsx';
 import { AnimatePresence } from 'framer-motion';
+import { useState } from 'react';
+
 import { Container } from '@/components/ui/container';
+import { useIsLocationGamePage } from '@/features/game/hooks';
 import { WalletChange, WalletConnect } from '@/features/wallet/components';
-import { AccountInfo } from './account-info';
+
 import ModalBackground from './ModalBackground';
-import { Logo } from './logo';
+import { AccountInfo } from './account-info';
 import styles from './header.module.scss';
-import { useIsLocationGamePage } from '@/features/game/hooks';
-import clsx from 'clsx';
+import { Logo } from './logo';
 
 export function Header() {
   const [isOpenChange, setIsOpenChange] = useState(false);

frontend/apps/battleship-zk/src/components/layout/header/logo/logo.tsx

@@ -1,8 +1,10 @@
-import { NavLink } from 'react-router-dom';
 import clsx from 'clsx';
-import styles from './logo.module.scss';
-import { VaraLogoIcon } from '@/assets/images';
+import { NavLink } from 'react-router-dom';
+
 import { ROUTES } from '@/app/consts';
+import { VaraLogoIcon } from '@/assets/images';
+
+import styles from './logo.module.scss';
 
 export function Logo({ className }: BaseComponentProps) {
   return (

frontend/apps/battleship-zk/src/components/layout/header/navigation/navigation.tsx

@@ -1,8 +1,10 @@
-import { NavLink } from 'react-router-dom';
 import clsx from 'clsx';
-import styles from './navigation.module.scss';
+import { NavLink } from 'react-router-dom';
+
 import { ROUTES } from '@/app/consts';
 
+import styles from './navigation.module.scss';
+
 const nav = [
   {
     id: 'home',

frontend/apps/battleship-zk/src/components/layout/not-found/not-found.tsx

@@ -1,10 +1,12 @@
-import styles from './not-found.module.scss';
 import { Link } from 'react-router-dom';
+
+import { ROUTES } from '@/app/consts';
 import { buttonVariants } from '@/components/ui/button/button';
 import { Heading } from '@/components/ui/heading';
-import { ROUTES } from '@/app/consts';
-import ImageWebp from './assets/images/404.webp';
+
 import ImageBase from './assets/images/404.jpg';
+import ImageWebp from './assets/images/404.webp';
+import styles from './not-found.module.scss';
 
 export function NotFound() {
   return (

frontend/apps/battleship-zk/src/components/layout/text-field/TextField.tsx

@@ -1,8 +1,7 @@
-/* eslint-disable jsx-a11y/control-has-associated-label */
-/* eslint-disable jsx-a11y/label-has-associated-control */
 import clsx from 'clsx';
-import styles from './TextField.module.scss';
+
 import { TextFieldProps } from './TextField.interfaces';
+import styles from './TextField.module.scss';
 
 function TextField({
   label,

frontend/apps/battleship-zk/src/components/layout/text-modal/TextModal.tsx

@@ -1,5 +1,5 @@
-import { Modal } from '@gear-js/vara-ui';
-import { Button } from '@gear-js/vara-ui';
+import { Modal, Button } from '@gear-js/vara-ui';
+
 import styles from './TextModal.module.scss';
 
 type Props = {

frontend/apps/battleship-zk/src/components/layout/vara-svg/VaraIcon.tsx

@@ -1,7 +1,8 @@
-import VaraSVG from '@/assets/images/icons/vara-coin.svg?react';
-import TVaraSVG from '@/assets/images/icons/tvara-coin.svg?react';
 import { useApi } from '@gear-js/react-hooks';
 
+import TVaraSVG from '@/assets/images/icons/tvara-coin.svg?react';
+import VaraSVG from '@/assets/images/icons/vara-coin.svg?react';
+
 function VaraIcon() {
   const { api } = useApi();
 

frontend/apps/battleship-zk/src/components/ui/alert/alert.tsx

@@ -1,9 +1,12 @@
 import clsx from 'clsx';
-import { AlertProps } from './alert.types';
-import styles from './alert.module.scss';
-import { Button } from '../button';
+
 import { CrossIcon } from '@/assets/images';
 
+import { Button } from '../button';
+
+import styles from './alert.module.scss';
+import { AlertProps } from './alert.types';
+
 export function Alert({ alert, close }: AlertProps) {
   const { content, options } = alert;
   const { type, title, style, isClosed } = options;

frontend/apps/battleship-zk/src/components/ui/balance/Balance.tsx

@@ -1,7 +1,9 @@
+import clsx from 'clsx';
+
 import CoinSVG from '@/assets/images/icons/coin.svg?react';
 import StarSVG from '@/assets/images/icons/star.svg?react';
+
 import styles from './Balance.module.scss';
-import clsx from 'clsx';
 
 type Props = BaseComponentProps & {
   SVG: SVGComponent;

frontend/apps/battleship-zk/src/components/ui/button/button.tsx

@@ -1,6 +1,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import { ButtonHTMLAttributes } from 'react';
 import { Loader2 } from 'lucide-react';
+import { ButtonHTMLAttributes } from 'react';
+
 import styles from './buttons.module.scss';
 
 export const buttonVariants = cva('', {

frontend/apps/battleship-zk/src/components/ui/container/container.tsx

@@ -1,6 +1,7 @@
-import styles from './container.module.scss';
 import clsx from 'clsx';
 
+import styles from './container.module.scss';
+
 type ContainerProps = BaseComponentProps & {};
 
 export function Container({ children, className }: ContainerProps) {

frontend/apps/battleship-zk/src/components/ui/heading/Heading.tsx

@@ -1,7 +1,8 @@
-import styles from './Heading.module.scss';
 import { cva, VariantProps } from 'class-variance-authority';
 import { BaseHTMLAttributes } from 'react';
 
+import styles from './Heading.module.scss';
+
 export const headingVariants = cva('', {
   variants: {
     size: {

frontend/apps/battleship-zk/src/components/ui/modal/Modal.tsx

@@ -1,8 +1,10 @@
 import clsx from 'clsx';
-import { MouseEvent, useEffect, useRef } from 'react';
 import { motion } from 'framer-motion';
+import { MouseEvent, useEffect, useRef } from 'react';
+
 import { CrossIcon } from '@/assets/images';
 import { variantsOverlay, variantsPanel } from '@/components/ui/modal/Modal.variants';
+
 import { Button } from '../button';
 
 import styles from './Modal.module.scss';

frontend/apps/battleship-zk/src/components/ui/modal/ModalBottom.tsx

@@ -1,12 +1,13 @@
-import React, { useEffect, useRef, MouseEventHandler } from 'react';
 import { motion } from 'framer-motion';
-import { CrossIcon } from '@/assets/images';
+import React, { useEffect, useRef, MouseEventHandler } from 'react';
 
+import { CrossIcon } from '@/assets/images';
 import { Button } from '@/components/ui/button';
 
-import styles from './Modal.module.scss';
 import { ScrollArea } from '../scroll-area';
 
+import styles from './Modal.module.scss';
+
 type Props = React.PropsWithChildren & {
   heading: string;
   onClose: () => void;

frontend/apps/battleship-zk/src/components/ui/scroll-area/scroll-area.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import * as React from 'react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import clsx from 'clsx';
+import * as React from 'react';
+
 import styles from './scroll-area.module.scss';
 
 const ScrollArea = React.forwardRef<

frontend/apps/battleship-zk/src/components/ui/text/text.tsx

@@ -1,5 +1,6 @@
 import { cva, VariantProps } from 'class-variance-authority';
 import { BaseHTMLAttributes } from 'react';
+
 import styles from './text.module.scss';
 
 export const textVariants = cva('', {

frontend/apps/battleship-zk/src/features/game/components/game-cancelled-modal/game-cancelled-modal.tsx

@@ -1,6 +1,8 @@
-import { Text } from '@/components/ui/text';
 import { Button } from '@gear-js/vara-ui';
+
 import { ModalBottom } from '@/components/ui/modal';
+import { Text } from '@/components/ui/text';
+
 import styles from './GameCancelledModal.module.scss';
 
 type Props = {

frontend/apps/battleship-zk/src/features/game/components/game-end-modal/game-end-modal.tsx

@@ -1,12 +1,14 @@
-import { useNavigate } from 'react-router-dom';
 import { decodeAddress } from '@gear-js/api';
+import { useAccount } from '@gear-js/react-hooks';
 import { Button } from '@gear-js/vara-ui';
+import { useNavigate } from 'react-router-dom';
+
+import { ROUTES } from '@/app/consts';
 import { ModalBottom } from '@/components/ui/modal';
 import { Text } from '@/components/ui/text';
-import { clearZkData } from '@/features/zk/utils';
-import { useAccount } from '@gear-js/react-hooks';
 import { GameType } from '@/features/game/types';
-import { ROUTES } from '@/app/consts';
+import { clearZkData } from '@/features/zk/utils';
+
 import styles from './GameEndModal.module.scss';
 
 type Props = {

frontend/apps/battleship-zk/src/features/game/components/game-process/game-process.tsx

@@ -1,20 +1,23 @@
-import { useEffect, useState } from 'react';
 import { useAccount } from '@gear-js/react-hooks';
 import { Button } from '@gear-js/vara-ui';
 import { useEzTransactions } from 'gear-ez-transactions';
+import { useEffect, useState } from 'react';
+
 import { Text } from '@/components/ui/text';
 import { GameEndModal, Map } from '@/features/game';
-import styles from './GameProcess.module.scss';
-import { MapEnemy } from '../map';
-import { usePending } from '../../hooks';
+import { VerificationModal } from '@/features/game/components/verification-modal';
 import { useShips } from '@/features/zk/hooks/use-ships';
-import { getFormattedTime } from '../../utils';
+
 import { SHIP_LENGTHS } from '../../consts';
+import { usePending } from '../../hooks';
 import { GameType, RenderShips } from '../../types';
+import { getFormattedTime } from '../../utils';
+import { MapEnemy } from '../map';
 import { Timer } from '../timer';
-import { VerificationModal } from '@/features/game/components/verification-modal';
 import YourTurnModal from '../your-turn-modal/your-turn-modal';
 
+import styles from './GameProcess.module.scss';
+
 type GameUpdatedEvent = {
   turn: string;
   pendingVerification?: string;

frontend/apps/battleship-zk/src/features/game/components/illustration/illustration.tsx

@@ -1,5 +1,6 @@
 import battleshipImage from '@/assets/images/illustration-battleship.png';
 import tailsGif from '@/assets/images/tails.gif';
+
 import styles from './Illustration.module.scss';
 
 export function Illustration() {

frontend/apps/battleship-zk/src/features/game/components/map/map.tsx

@@ -1,6 +1,8 @@
+import clsx from 'clsx';
+
 import { CrossIcon } from '@/assets/images';
+
 import styles from './map.module.scss';
-import clsx from 'clsx';
 
 type Props = {
   sizeBlock: number;