Run eslint:recommended when committing

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": ["next/core-web-vitals", "prettier"]
+  "extends": ["eslint:recommended", "next/core-web-vitals", "prettier"]
 }

package.json

@@ -29,6 +29,7 @@
     "zustand-querystring": "^0.0.19"
   },
   "devDependencies": {
+    "@next/eslint-plugin-next": "^14.1.3",
     "@playwright/test": "^1.42.0",
     "@types/dompurify": "^3.0.5",
     "@types/node": "^20.11.23",

src/app/(sidebar)/account/layout.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import React from "react";
+
 import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent";
 import { Routes } from "@/constants/routes";
 

src/app/(sidebar)/explore-endpoints/[[...pages]]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import React, { useState } from "react";
 import { usePathname } from "next/navigation";
 import {
   Alert,

src/app/(sidebar)/explore-endpoints/layout.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import React from "react";
 import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent";
 import { Routes } from "@/constants/routes";
 

src/app/(sidebar)/layout.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { LayoutWithSidebar } from "@/components/layout/LayoutWithSidebar";
 
 export default function Layout({ children }: { children: React.ReactNode }) {

src/app/(sidebar)/soroban/layout.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import React from "react";
+
 import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent";
 
 export default function TransactionTemplate({

src/app/(sidebar)/transaction/layout.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import React from "react";
+
 import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent";
 import { Routes } from "@/constants/routes";
 

src/app/(sidebar)/xdr/layout.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import React from "react";
+
 import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent";
 import { Routes } from "@/constants/routes";
 

src/app/layout.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import type { Metadata } from "next";
 
 import { LayoutMain } from "@/components/layout/LayoutMain";

src/components/ExpandBox/index.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useState } from "react";
+import React, { useLayoutEffect, useState } from "react";
 import "./styles.scss";
 
 export const ExpandBox = ({

src/components/FormElements/AssetPicker.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { Input } from "@stellar/design-system";
 
 import { ExpandBox } from "@/components/ExpandBox";
@@ -19,7 +19,9 @@ type AssetPickerProps = (
       includeNone?: boolean;
       includeNative?: undefined;
       onChange: (
+        // eslint-disable-next-line no-unused-vars
         optionId: AssetType | undefined,
+        // eslint-disable-next-line no-unused-vars
         optionValue: string | undefined,
       ) => void;
     }
@@ -29,7 +31,9 @@ type AssetPickerProps = (
       includeNone?: undefined;
       includeNative?: boolean;
       onChange: (
+        // eslint-disable-next-line no-unused-vars
         optionId: AssetType | undefined,
+        // eslint-disable-next-line no-unused-vars
         optionValue: AssetObjectValue | undefined,
       ) => void;
     }
@@ -274,13 +278,17 @@ type AssetPickerFieldsProps = {
   code: {
     value: string;
     error: string;
+    // eslint-disable-next-line no-unused-vars
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    // eslint-disable-next-line no-unused-vars
     onBlur: (e: React.ChangeEvent<HTMLInputElement>) => void;
   };
   issuer: {
     value: string;
     error: string;
+    // eslint-disable-next-line no-unused-vars
     onChange: (value: string, issuerError: string) => void;
+    // eslint-disable-next-line no-unused-vars
     onBlur: (value: string, issuerError: string) => void;
   };
 };

src/components/FormElements/IncludeFailedPicker.tsx

@@ -1,8 +1,10 @@
+import React from "react";
 import { RadioPicker } from "@/components/RadioPicker";
 
 type IncludeFailedPickerProps = {
   id: string;
   selectedOption: string | undefined;
+  // eslint-disable-next-line no-unused-vars
   onChange: (optionId: string | undefined, optionValue?: boolean) => void;
   labelSuffix?: string | React.ReactNode;
 };

src/components/FormElements/OrderPicker.tsx

@@ -1,8 +1,10 @@
+import React from "react";
 import { RadioPicker } from "@/components/RadioPicker";
 
 type OrderPickerProps = {
   id: string;
   selectedOption: string | undefined;
+  // eslint-disable-next-line no-unused-vars
   onChange: (optionId: string | undefined, optionValue?: string) => void;
   labelSuffix?: string | React.ReactNode;
 };

src/components/FormElements/PubKeyPicker.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { StrKey } from "stellar-sdk";
 import { Input, InputProps } from "@stellar/design-system";
 
@@ -9,7 +10,9 @@ interface PubKeyPickerProps extends Omit<InputProps, "fieldSize"> {
   placeholder?: string;
   value: string;
   error: string | "";
+  // eslint-disable-next-line no-unused-vars
   onChange: (value: string, error: string) => void;
+  // eslint-disable-next-line no-unused-vars
   onBlur: (value: string, error: string) => void;
 }
 

src/components/GenerateKeypair.tsx

@@ -1,4 +1,4 @@
-import { Icon, Input } from "@stellar/design-system";
+import { Input } from "@stellar/design-system";
 
 export const GenerateKeypair = ({
   publicKey,

src/components/MaintenanceBanner.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Banner, Link } from "@stellar/design-system";
 
 import { getRelevantMaintenanceMsg } from "@/helpers/getRelevantMaintenanceMsg";

src/components/NetworkSelector/index.tsx

@@ -1,4 +1,4 @@
-import {
+import React, {
   useCallback,
   useEffect,
   useLayoutEffect,

src/components/RadioPicker/index.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 import { Label } from "@stellar/design-system";
 import { AssetType } from "@/types/types";
 import "./styles.scss";
@@ -8,7 +10,9 @@ interface RadioPickerProps<TOptionValue = string> {
   label?: string | React.ReactNode;
   labelSuffix?: string | React.ReactNode;
   onChange: (
+    // eslint-disable-next-line no-unused-vars
     optionId: AssetType | undefined,
+    // eslint-disable-next-line no-unused-vars
     optionValue?: TOptionValue,
   ) => void;
   options: {

src/components/TabView/index.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Card, Text } from "@stellar/design-system";
 import { WithInfoText } from "@/components/WithInfoText";
 import { Tabs } from "@/components/Tabs";
@@ -17,6 +18,7 @@ type TabViewProps = {
   tab4?: Tab;
   tab5?: Tab;
   tab6?: Tab;
+  // eslint-disable-next-line no-unused-vars
   onTabChange: (id: string) => void;
   activeTabId: string;
   staticTop?: React.ReactNode;

src/components/Tabs/index.tsx

@@ -12,6 +12,7 @@ export const Tabs = ({
 }: {
   tabs: Tab[];
   activeTabId: string;
+  // eslint-disable-next-line no-unused-vars
   onChange: (id: string) => void;
 }) => {
   return (

src/components/WithInfoText/index.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Icon, Tooltip } from "@stellar/design-system";
 import { NextLink } from "@/components/NextLink";
 import "./styles.scss";

src/components/layout/LayoutContentContainer.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 export const LayoutContentContainer = ({
   children,
 }: {

src/constants/routes.ts

@@ -1,3 +1,5 @@
+/* eslint-disable no-unused-vars */
+
 export enum Routes {
   ROOT = "/",
   // Account

src/query/QueryProvider.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import React from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 

src/store/createStore.ts

@@ -6,11 +6,13 @@ import { EmptyObj, Network } from "@/types/types";
 export interface Store {
   // Shared
   network: Network | EmptyObj;
+  // eslint-disable-next-line no-unused-vars
   selectNetwork: (network: Network) => void;
 
   // Account
   account: {
     publicKey: string;
+    // eslint-disable-next-line no-unused-vars
     update: (value: string) => void;
     reset: () => void;
   };

src/store/useStore.ts

@@ -1,9 +1,11 @@
 "use client";
+
 import { useContext } from "react";
 import { useStore as useZustandStore } from "zustand";
 import { Store } from "@/store/createStore";
 import { ZustandContext } from "@/store/StoreProvider";
 
+// eslint-disable-next-line no-unused-vars
 export const useStore = <T = Store>(selector?: (state: Store) => T) => {
   selector ??= (state) => state as T;
   const store = useContext(ZustandContext);

src/types/types.ts

@@ -1,3 +1,5 @@
+import React from "react";
+
 // =============================================================================
 // Generic
 // =============================================================================