fix(web-devtools): eslint-errors

Author: tractorss

web-devtools/package.json

@@ -65,7 +65,7 @@
     "styled-components": "^6.1.13",
     "typewriter-effect": "^2.21.0",
     "vanilla-jsoneditor": "^0.21.6",
-    "viem": "^2.21.48",
+    "viem": "^2.21.50",
     "wagmi": "^2.13.0"
   }
 }

web-devtools/src/app/(main)/dispute-template/CustomContextInputs.tsx

@@ -1,8 +1,11 @@
-import retrieveVariables from "@kleros/kleros-sdk/src/dataMappings/utils/retrieveVariables";
-import { Field } from "@kleros/ui-components-library";
-import { useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import styled from "styled-components";
+
 import { useDebounce } from "react-use";
+
+import retrieveVariables from "@kleros/kleros-sdk/src/dataMappings/utils/retrieveVariables";
+import { Field } from "@kleros/ui-components-library";
+
 import WithHelpTooltip from "components/WithHelpTooltip";
 
 const Container = styled.div`

web-devtools/src/app/(main)/dispute-template/FetchDisputeRequestInput.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 
 import { useDebounce } from "react-use";
-import { GetEventArgs } from "viem";
+import { type GetEventArgs } from "viem";
 
 import { Field } from "@kleros/ui-components-library";
 

web-devtools/src/app/(main)/ruler/ChangeDeveloper.tsx

@@ -1,11 +1,12 @@
 import React, { useCallback, useMemo, useState } from "react";
 import styled from "styled-components";
 
-import { Address, isAddress } from "viem";
+import { type Address, isAddress } from "viem";
 import { useAccount, usePublicClient } from "wagmi";
 
 import { Button } from "@kleros/ui-components-library";
 
+import { DEFAULT_CHAIN } from "consts/chains";
 import { useRulerContext } from "context/RulerContext";
 import { useSimulateKlerosCoreRulerChangeRuler, useWriteKlerosCoreRulerChangeRuler } from "hooks/contracts/generated";
 import { isUndefined } from "utils/isUndefined";
@@ -14,7 +15,6 @@ import { wrapWithToast } from "utils/wrapWithToast";
 import LabeledInput from "components/LabeledInput";
 
 import Header from "./Header";
-import { DEFAULT_CHAIN } from "consts/chains";
 
 const Container = styled.div`
   width: 100%;

web-devtools/src/app/(main)/ruler/SelectArbitrable.tsx

@@ -1,18 +1,19 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import styled, { css } from "styled-components";
 
-import { Address, PublicClient } from "viem";
+import { type Address, type PublicClient } from "viem";
 import { usePublicClient } from "wagmi";
 
 import { Copiable, DropdownSelect, Field } from "@kleros/ui-components-library";
 
+import { DEFAULT_CHAIN } from "consts/chains";
 import { useRulerContext } from "context/RulerContext";
-import { shortenAddress } from "utils/shortenAddress";
 import { klerosCoreAddress } from "hooks/contracts/generated";
-import { DEFAULT_CHAIN } from "consts/chains";
-import { landscapeStyle } from "styles/landscapeStyle";
+import { shortenAddress } from "utils/shortenAddress";
 import { validateAddress } from "utils/validateAddressOrEns";
 
+import { landscapeStyle } from "styles/landscapeStyle";
+
 const Container = styled.div`
   width: 100%;
   display: flex;

web-devtools/src/components/ReactMarkdown.tsx

@@ -13,7 +13,7 @@ const ReactMarkdown: React.FC<{ children: string }> = ({ children }) => {
   }
   try {
     return <StyledMarkdown>{children}</StyledMarkdown>;
-  } catch (error) {
+  } catch {
     return <div>Error rendering content</div>;
   }
 };

web-devtools/src/consts/chains.ts

@@ -1,4 +1,4 @@
-import { Chain, mainnet, arbitrumSepolia, gnosisChiado } from "viem/chains";
+import { type Chain, mainnet, arbitrumSepolia, gnosisChiado } from "viem/chains";
 
 export const SUPPORTED_CHAINS: Record<number, Chain> = {
   [arbitrumSepolia.id]: arbitrumSepolia,

web-devtools/src/context/GraphqlBatcher.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, createContext, useContext } from "react";
 
 import { TypedDocumentNode } from "@graphql-typed-document-node/core";
-import { create, windowedFiniteBatchScheduler, Batcher } from "@yornaath/batshit";
+import { create, windowedFiniteBatchScheduler, type Batcher } from "@yornaath/batshit";
 import { request } from "graphql-request";
 
 import { debounceErrorToast } from "utils/debounceErrorToast";

web-devtools/src/context/RulerContext.tsx

@@ -1,7 +1,8 @@
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 
+import { type Address, isAddress } from "viem";
+
 import { RULING_MODE } from "consts";
-import { Address, isAddress } from "viem";
 
 import { useReadKlerosCoreRulerRulers, useReadKlerosCoreRulerSettings } from "hooks/contracts/generated";
 import { useLocalStorage } from "hooks/useLocalStorage";

web-devtools/src/context/Web3Provider.tsx

@@ -63,7 +63,7 @@ const wagmiConfig = createConfig({
 createWeb3Modal({
   wagmiConfig,
   projectId,
-  // @ts-ignore
+  //@ts-expect-error mismatch types from wagmi and viem
   defaultChain: arbitrumSepolia,
   themeVariables: {
     "--w3m-color-mix": theme.klerosUIComponentsPrimaryPurple,