fix(web): linted-imports-with-new-rule

web/codegen.ts

@@ -1,4 +1,5 @@
 import type { CodegenConfig } from "@graphql-codegen/cli";
+
 import { getGraphqlUrl } from "utils/getGraphqlUrl";
 
 const config: CodegenConfig = {

web/netlify/functions/update-settings.ts

@@ -1,9 +1,10 @@
 import { Handler } from "@netlify/functions";
-import { verifyTypedData } from "viem";
 import { createClient } from "@supabase/supabase-js";
-import { Database } from "../../src/types/supabase-notification";
+import { verifyTypedData } from "viem";
+
 import messages from "../../src/consts/eip712-messages";
 import { EMAIL_REGEX, TELEGRAM_REGEX, ETH_ADDRESS_REGEX, ETH_SIGNATURE_REGEX } from "../../src/consts/index";
+import { Database } from "../../src/types/supabase-notification";
 
 type NotificationSettings = {
   email?: string;

web/netlify/functions/uploadToIPFS.ts

@@ -1,5 +1,5 @@
-import { Handler } from "@netlify/functions";
 import { File, FilebaseClient } from "@filebase/client";
+import { Handler } from "@netlify/functions";
 import amqp, { Connection } from "amqplib";
 import busboy from "busboy";
 

web/scripts/gitInfo.js

@@ -1,7 +1,8 @@
 /* eslint-disable max-len */
+const { execSync } = require("child_process");
 const fs = require("fs");
 const path = require("path");
-const { execSync } = require("child_process");
+
 const packageJson = require("../package.json");
 
 const execSyncWrapper = (command) => {

web/src/app.tsx

@@ -1,23 +1,27 @@
 import React from "react";
+
 import { Route } from "react-router-dom";
-import { SentryRoutes } from "./utils/sentry";
+
 import "react-loading-skeleton/dist/skeleton.css";
 import "react-toastify/dist/ReactToastify.css";
-import Web3Provider from "context/Web3Provider";
+import GraphqlBatcherProvider from "context/GraphqlBatcher";
 import IsListProvider from "context/IsListProvider";
+import { NewDisputeProvider } from "context/NewDisputeContext";
 import QueryClientProvider from "context/QueryClientProvider";
-import StyledComponentsProvider from "context/StyledComponentsProvider";
 import RefetchOnBlock from "context/RefetchOnBlock";
-import GraphqlBatcherProvider from "context/GraphqlBatcher";
-import { NewDisputeProvider } from "context/NewDisputeContext";
+import StyledComponentsProvider from "context/StyledComponentsProvider";
+import Web3Provider from "context/Web3Provider";
+
 import Layout from "layout/index";
-import Home from "./pages/Home";
+
 import Cases from "./pages/Cases";
-import Dashboard from "./pages/Dashboard";
 import Courts from "./pages/Courts";
+import Dashboard from "./pages/Dashboard";
 import DisputeTemplateView from "./pages/DisputeTemplateView";
-import DisputeResolver from "./pages/Resolver";
 import GetPnk from "./pages/GetPnk";
+import Home from "./pages/Home";
+import DisputeResolver from "./pages/Resolver";
+import { SentryRoutes } from "./utils/sentry";
 
 const App: React.FC = () => {
   return (

web/src/components/CasesDisplay/CasesGrid.tsx

@@ -1,15 +1,21 @@
 import React from "react";
 import styled from "styled-components";
+
 import { useParams } from "react-router-dom";
-import { SkeletonDisputeCard, SkeletonDisputeListItem } from "../StyledSkeleton";
+
 import { StandardPagination } from "@kleros/ui-components-library";
+
 import { useIsList } from "context/IsListProvider";
+import useIsDesktop from "hooks/useIsDesktop";
 import { isUndefined } from "utils/index";
 import { decodeURIFilter } from "utils/uri";
+
 import { DisputeDetailsFragment } from "queries/useCasesQuery";
-import useIsDesktop from "hooks/useIsDesktop";
+
 import DisputeView from "components/DisputeView";
 
+import { SkeletonDisputeCard, SkeletonDisputeListItem } from "../StyledSkeleton";
+
 const GridContainer = styled.div`
   --gap: 24px;
   display: grid;

web/src/components/CasesDisplay/Filters.tsx

@@ -1,11 +1,15 @@
 import React from "react";
 import styled, { useTheme } from "styled-components";
+
 import { useNavigate, useParams } from "react-router-dom";
+
 import { DropdownSelect } from "@kleros/ui-components-library";
+
+import GridIcon from "svgs/icons/grid.svg";
+import ListIcon from "svgs/icons/list.svg";
+
 import { useIsList } from "context/IsListProvider";
 import useIsDesktop from "hooks/useIsDesktop";
-import ListIcon from "svgs/icons/list.svg";
-import GridIcon from "svgs/icons/grid.svg";
 import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri";
 
 const Container = styled.div`

web/src/components/CasesDisplay/Search.tsx

@@ -1,13 +1,18 @@
 import React, { useMemo, useState } from "react";
 import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
+
+import Skeleton from "react-loading-skeleton";
 import { useNavigate, useParams } from "react-router-dom";
 import { useDebounce } from "react-use";
-import Skeleton from "react-loading-skeleton";
+
 import { Searchbar, DropdownCascader } from "@kleros/ui-components-library";
-import { rootCourtToItems, useCourtTree } from "queries/useCourtTree";
+
 import { isUndefined } from "utils/index";
 import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri";
+
+import { rootCourtToItems, useCourtTree } from "queries/useCourtTree";
+
+import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
 const Container = styled.div`

web/src/components/CasesDisplay/StatsAndFilters.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+
 import Filters from "./Filters";
 import Stats, { IStats } from "./Stats";
 

web/src/components/CasesDisplay/index.tsx

@@ -1,12 +1,17 @@
 import React from "react";
 import styled from "styled-components";
-import Search from "./Search";
-import StatsAndFilters from "./StatsAndFilters";
-import CasesGrid, { ICasesGrid } from "./CasesGrid";
+
+import { useLocation, useNavigate } from "react-router-dom";
+
+import ArrowIcon from "assets/svgs/icons/arrow.svg";
+
 import { responsiveSize } from "styles/responsiveSize";
+
 import LightButton from "../LightButton";
-import ArrowIcon from "assets/svgs/icons/arrow.svg";
-import { useLocation, useNavigate } from "react-router-dom";
+
+import CasesGrid, { ICasesGrid } from "./CasesGrid";
+import Search from "./Search";
+import StatsAndFilters from "./StatsAndFilters";
 
 const Divider = styled.hr`
   display: flex;

web/src/components/ClaimPnkButton.tsx

@@ -1,7 +1,12 @@
-import { Button } from "@kleros/ui-components-library";
 import React, { useState } from "react";
+
 import { formatEther } from "viem";
 import { useAccount, useNetwork, usePublicClient, useWalletClient } from "wagmi";
+
+import { Button } from "@kleros/ui-components-library";
+
+import FaucetIcon from "svgs/icons/faucet.svg";
+
 import { DEFAULT_CHAIN } from "consts/chains";
 import {
   prepareWritePnkFaucet,
@@ -10,11 +15,11 @@ import {
   usePnkFaucetWithdrewAlready,
 } from "hooks/contracts/generated";
 import { usePNKFaucetAddress } from "hooks/useContractAddress";
+import { formatPNK } from "utils/format";
 import { isUndefined } from "utils/index";
 import { wrapWithToast } from "utils/wrapWithToast";
+
 import Popup, { PopupType } from "./Popup";
-import { formatPNK } from "utils/format";
-import FaucetIcon from "svgs/icons/faucet.svg";
 
 const ClaimPnkButton: React.FC = () => {
   const [isSending, setIsSending] = useState(false);

web/src/components/ConnectWallet/AccountDisplay.tsx

@@ -1,10 +1,13 @@
 import React from "react";
 import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
-import { useAccount, useNetwork, useEnsAvatar, useEnsName } from "wagmi";
+
 import Identicon from "react-identicons";
-import { shortenAddress } from "utils/shortenAddress";
 import { isAddress } from "viem";
+import { useAccount, useNetwork, useEnsAvatar, useEnsName } from "wagmi";
+
+import { shortenAddress } from "utils/shortenAddress";
+
+import { landscapeStyle } from "styles/landscapeStyle";
 
 const Container = styled.div`
   display: flex;

web/src/components/ConnectWallet/index.tsx

@@ -1,8 +1,12 @@
 import React from "react";
-import { useAccount, useNetwork, useSwitchNetwork } from "wagmi";
+
 import { useWeb3Modal } from "@web3modal/react";
+import { useAccount, useNetwork, useSwitchNetwork } from "wagmi";
+
 import { Button } from "@kleros/ui-components-library";
+
 import { SUPPORTED_CHAINS, DEFAULT_CHAIN } from "consts/chains";
+
 import AccountDisplay from "./AccountDisplay";
 
 export const SwitchChainButton: React.FC<{ className?: string }> = ({ className }) => {

web/src/components/DisputePreview/Alias.tsx

@@ -1,11 +1,14 @@
 import React from "react";
 import styled from "styled-components";
-import { AddressOrName, IdenticonOrAvatar } from "../ConnectWallet/AccountDisplay";
+
+import Skeleton from "react-loading-skeleton";
+import { isAddress } from "viem";
+import { useEnsAddress } from "wagmi";
+
 import { Alias } from "context/NewDisputeContext";
 import { isUndefined } from "utils/index";
-import { useEnsAddress } from "wagmi";
-import { isAddress } from "viem";
-import Skeleton from "react-loading-skeleton";
+
+import { AddressOrName, IdenticonOrAvatar } from "../ConnectWallet/AccountDisplay";
 
 const AliasContainer = styled.div`
   min-height: 32px;

web/src/components/DisputePreview/DisputeContext.tsx

@@ -1,13 +1,18 @@
 import React from "react";
-import ReactMarkdown from "components/ReactMarkdown";
 import styled from "styled-components";
-import { StyledSkeleton } from "components/StyledSkeleton";
-import { isUndefined } from "utils/index";
-import { Answer as IAnswer } from "context/NewDisputeContext";
-import AliasDisplay from "./Alias";
-import { responsiveSize } from "styles/responsiveSize";
+
 import { DisputeDetails } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes";
+
 import { INVALID_DISPUTE_DATA_ERROR, RPC_ERROR } from "consts/index";
+import { Answer as IAnswer } from "context/NewDisputeContext";
+import { isUndefined } from "utils/index";
+
+import { responsiveSize } from "styles/responsiveSize";
+
+import ReactMarkdown from "components/ReactMarkdown";
+import { StyledSkeleton } from "components/StyledSkeleton";
+
+import AliasDisplay from "./Alias";
 
 const StyledH1 = styled.h1`
   margin: 0;

web/src/components/DisputePreview/Policies.tsx

@@ -1,11 +1,14 @@
 import React from "react";
 import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
+
+import PaperclipIcon from "svgs/icons/paperclip.svg";
 import PolicyIcon from "svgs/icons/policy.svg";
+
+import { getIpfsUrl } from "utils/getIpfsUrl";
 import { isUndefined } from "utils/index";
+
+import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
-import PaperclipIcon from "svgs/icons/paperclip.svg";
-import { getIpfsUrl } from "utils/getIpfsUrl";
 
 const ShadeArea = styled.div`
   display: flex;

web/src/components/DisputeView/CardLabels/RewardsAndFundLabel.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import styled, { useTheme } from "styled-components";
+
 import EthIcon from "assets/svgs/icons/eth.svg";
 import PnkIcon from "assets/svgs/icons/kleros.svg";
+
 import NumberDisplay from "components/NumberDisplay";
 
 const Container = styled.div`

web/src/components/DisputeView/CardLabels/index.tsx

@@ -1,19 +1,24 @@
 import React, { useMemo } from "react";
 import styled, { css } from "styled-components";
+
+import Skeleton from "react-loading-skeleton";
 import { formatEther, formatUnits } from "viem";
 import { useAccount } from "wagmi";
-import Skeleton from "react-loading-skeleton";
+
+import AppealIcon from "svgs/label-icons/appeal.svg";
 import EvidenceIcon from "svgs/label-icons/evidence.svg";
+import ForgotToVoteIcon from "svgs/label-icons/forgot-vote.svg";
+import FundedIcon from "svgs/label-icons/funded.svg";
 import NotDrawnIcon from "svgs/label-icons/minus-circle.svg";
 import CanVoteIcon from "svgs/label-icons/vote.svg";
 import VotedIcon from "svgs/label-icons/voted.svg";
-import ForgotToVoteIcon from "svgs/label-icons/forgot-vote.svg";
-import AppealIcon from "svgs/label-icons/appeal.svg";
-import FundedIcon from "svgs/label-icons/funded.svg";
-import { ClassicContribution } from "src/graphql/graphql";
+
 import { useLabelInfoQuery } from "hooks/queries/useLabelInfoQuery";
-import { isUndefined } from "utils/index";
 import { getLocalRounds } from "utils/getLocalRounds";
+import { isUndefined } from "utils/index";
+
+import { ClassicContribution } from "src/graphql/graphql";
+
 import Label, { IColors } from "./Label";
 import RewardsAndFundLabel from "./RewardsAndFundLabel";
 

web/src/components/DisputeView/DisputeCardView.tsx

@@ -1,12 +1,18 @@
 import React from "react";
-import { Card } from "@kleros/ui-components-library";
 import styled from "styled-components";
+
+import { useNavigate } from "react-router-dom";
+
+import { Card } from "@kleros/ui-components-library";
+
+import { Periods } from "consts/periods";
+
 import { responsiveSize } from "styles/responsiveSize";
-import PeriodBanner from "./PeriodBanner";
+
 import { StyledSkeleton } from "components/StyledSkeleton";
+
 import DisputeInfo from "./DisputeInfo";
-import { useNavigate } from "react-router-dom";
-import { Periods } from "consts/periods";
+import PeriodBanner from "./PeriodBanner";
 
 const StyledCard = styled(Card)`
   width: 100%;

web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx

@@ -1,13 +1,19 @@
 import React, { useMemo } from "react";
 import styled, { css } from "styled-components";
+
+import LawBalanceIcon from "svgs/icons/law-balance.svg";
+
+import { useCourtTree } from "hooks/queries/useCourtTree";
+
 import { landscapeStyle } from "styles/landscapeStyle";
+
 import Field, { IField } from "components/Field";
-import { FieldItem, IDisputeInfo } from ".";
 import { getCourtsPath } from "pages/Courts/CourtDetails";
-import { useCourtTree } from "hooks/queries/useCourtTree";
-import LawBalanceIcon from "svgs/icons/law-balance.svg";
+
 import CardLabel from "../CardLabels";
 
+import { FieldItem, IDisputeInfo } from ".";
+
 const Container = styled.div`
   display: flex;
   width: 100%;

web/src/components/DisputeView/DisputeInfo/DisputeInfoList.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 import styled from "styled-components";
+
 import Field, { IField } from "components/Field";
+
 import CardLabel from "../CardLabels";
+
 import { FieldItem, IDisputeInfo } from ".";
 
 const Container = styled.div<{ isLabel?: boolean }>`