fix(web-devtools): eslint-errors

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,

web-devtools/src/hooks/useLocalStorage.ts

@@ -5,7 +5,7 @@ export function useLocalStorage<T>(keyName: string, defaultValue: T) {
     try {
       const value = window.localStorage.getItem(keyName);
       return value ? JSON.parse(value) : defaultValue;
-    } catch (err) {
+    } catch {
       return defaultValue;
     }
   });

web-devtools/src/styles/landscapeStyle.ts

@@ -1,4 +1,4 @@
-import { css, RuleSet } from "styled-components";
+import { css, type RuleSet } from "styled-components";
 
 export const BREAKPOINT_LANDSCAPE = 900;
 

web-devtools/src/utils/getDisputeRequestParamsFromTxn.ts

@@ -1,5 +1,5 @@
 import { getPublicClient } from "@wagmi/core";
-import { GetTransactionReceiptReturnType, decodeEventLog, getEventSelector } from "viem";
+import { type GetTransactionReceiptReturnType, decodeEventLog, getEventSelector } from "viem";
 
 import { iArbitrableV2Abi } from "hooks/contracts/generated";
 import { isUndefined } from "utils/isUndefined";

web-devtools/src/utils/validateAddressOrEns.ts

@@ -1,4 +1,4 @@
-import { PublicClient, isAddress } from "viem";
+import { type PublicClient, isAddress } from "viem";
 import { normalize } from "viem/ens";
 
 export const validateAddress = async (address: string, publicClient: PublicClient): Promise<boolean> => {

web-devtools/src/utils/wrapWithToast.ts

@@ -1,5 +1,5 @@
 import { toast, ToastPosition, Theme } from "react-toastify";
-import { PublicClient, TransactionReceipt } from "viem";
+import { type PublicClient, type TransactionReceipt } from "viem";
 
 export const OPTIONS = {
   position: "top-center" as ToastPosition,

yarn.lock

@@ -5156,7 +5156,7 @@ __metadata:
     typescript: "npm:^5.6.3"
     typewriter-effect: "npm:^2.21.0"
     vanilla-jsoneditor: "npm:^0.21.6"
-    viem: "npm:^2.21.48"
+    viem: "npm:^2.21.50"
     wagmi: "npm:^2.13.0"
   languageName: unknown
   linkType: soft
@@ -34872,6 +34872,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"viem@npm:^2.21.50":
+  version: 2.21.50
+  resolution: "viem@npm:2.21.50"
+  dependencies:
+    "@noble/curves": "npm:1.6.0"
+    "@noble/hashes": "npm:1.5.0"
+    "@scure/bip32": "npm:1.5.0"
+    "@scure/bip39": "npm:1.4.0"
+    abitype: "npm:1.0.6"
+    isows: "npm:1.0.6"
+    ox: "npm:0.1.2"
+    webauthn-p256: "npm:0.0.10"
+    ws: "npm:8.18.0"
+  peerDependencies:
+    typescript: ">=5.0.4"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10/6525c7dfa679d48759d50a31751b1d608f055e4396506c4f48550b81655b75b53978bd2dbe39099ac200f549c7429261d3478810dbd63b36df6a0afd77f69931
+  languageName: node
+  linkType: hard
+
 "vite-node@npm:1.6.0":
   version: 1.6.0
   resolution: "vite-node@npm:1.6.0"