Add typescript-eslint to widgetv2

.vscode/settings.json

@@ -1,5 +1,9 @@
 {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.tabSize": 2
+  "editor.tabSize": 2,
+  "eslint.workingDirectories": [{ "mode": "auto" }],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  }
 }

packages/widget-v2/.storybook/main.ts

@@ -6,7 +6,7 @@ import { join, dirname } from 'path';
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.
  */
-function getAbsolutePath(value: string): any {
+function getAbsolutePath(value: string): string {
   return dirname(require.resolve(join(value, 'package.json')));
 }
 const config: StorybookConfig = {

packages/widget-v2/eslint.config.mjs

@@ -0,0 +1,21 @@
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import reactHooks from 'eslint-plugin-react-hooks';
+import { fixupPluginRules } from '@eslint/compat';
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...tseslint.configs.strict,
+  ...tseslint.configs.stylistic,
+  {
+    plugins: {
+      'react-hooks': fixupPluginRules(reactHooks),
+    },
+    rules: {
+      '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
+      'no-console': ['error', { allow: ['warn', 'error'] }],
+      ...reactHooks.configs.recommended.rules,
+    },
+  }
+);

packages/widget-v2/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "storybook dev -p 6006",
     "build": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --fix",
     "preview": "vite preview",
     "build-storybook": "storybook build"
   },
@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
+    "@eslint/js": "^9.9.0",
     "@skip-go/widget": "workspace:packages/widget",
     "@storybook/addon-essentials": "^8.2.6",
     "@storybook/addon-interactions": "^8.2.6",
@@ -31,21 +32,26 @@
     "@storybook/react": "^8.2.6",
     "@storybook/react-vite": "^8.2.6",
     "@storybook/test": "^8.2.6",
+    "@types/eslint__js": "^8.42.3",
     "@types/pluralize": "^0.0.33",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "storybook": "^8.2.6",
     "styled-components": "^6.0.0",
-    "typescript": "^5.2.2",
+    "typescript": "^5.5.4",
+    "typescript-eslint": "^8.2.0",
     "vite": "^5.3.4",
     "vite-plugin-dts": "^4.0.0-beta.1",
     "vite-plugin-node-polyfills": "^0.22.0"
   },
   "dependencies": {
     "@ebay/nice-modal-react": "^1.2.13",
+    "@eslint/compat": "^1.1.1",
     "@initia/initia-registry": "^0.1.16",
     "@radix-ui/react-dialog": "^1.1.1",
     "@skip-go/client": "workspace:^",

packages/widget-v2/src/components/Modal.tsx

@@ -2,7 +2,7 @@ import { css, styled, useTheme } from 'styled-components';
 import * as Dialog from '@radix-ui/react-dialog';
 import { ShadowDomAndProviders } from '@/widget/ShadowDomAndProviders';
 import NiceModal, { useModal as useNiceModal } from '@ebay/nice-modal-react';
-import { ComponentType, FC, useCallback, useEffect, useMemo } from 'react';
+import { ComponentType, FC, useEffect, useMemo } from 'react';
 import { PartialTheme } from '@/widget/theme';
 
 import { ErrorBoundary } from 'react-error-boundary';
@@ -34,7 +34,7 @@ export const Modal = ({
     return () => {
       onOpenChange?.(false);
     };
-  }, []);
+  }, [onOpenChange]);
 
   return (
     <Dialog.Root open={modal.visible} onOpenChange={() => modal.remove()}>
@@ -78,34 +78,29 @@ export const useModal = <T extends ModalProps>(
     numberOfModalsOpenAtom
   );
 
-  const modalInstance = modal
-    ? useNiceModal(modal, initialArgs)
-    : useNiceModal();
-
-  const show = useCallback(
-    (showArgs?: Partial<T & ModalProps>) => {
-      setNumberOfModalsOpen((prev) => prev + 1);
-      modalInstance.show({
-        theme,
-        stackedModal: numberOfModalsOpen > 0,
-        ...showArgs,
-      } as Partial<T>);
-    },
-    [modalInstance, setNumberOfModalsOpen, theme, numberOfModalsOpen]
-  );
-
-  const remove = useCallback(() => {
-    setNumberOfModalsOpen((prev) => Math.max(0, prev - 1));
-    modalInstance.remove();
-  }, [modalInstance, setNumberOfModalsOpen]);
+  const modalInstance = useNiceModal(modal as FC<unknown>, initialArgs);
 
   return useMemo(
     () => ({
       ...modalInstance,
-      show,
-      remove,
+      show: (showArgs?: Partial<T & ModalProps>) => {
+        modalInstance.show({
+          theme,
+          stackedModal: numberOfModalsOpen > 0,
+          ...showArgs,
+        } as Partial<T>);
+        setNumberOfModalsOpen((prev) => prev + 1);
+      },
+      remove: () => {
+        setNumberOfModalsOpen((prev) => Math.max(0, prev - 1));
+        modalInstance.remove();
+      },
+      hide: () => {
+        setNumberOfModalsOpen((prev) => Math.max(0, prev - 1));
+        modalInstance.hide();
+      },
     }),
-    [modalInstance, show, remove]
+    [modalInstance, setNumberOfModalsOpen, theme, numberOfModalsOpen]
   );
 };
 

packages/widget-v2/src/components/RenderWalletList.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import styled, { useTheme } from 'styled-components';
 import { LeftArrowIcon } from '@/icons/ArrowIcon';
-import { hashObject } from '@/utils/misc';
 import { Button } from '@/components/Button';
 import { Row, Column } from '@/components/Layout';
 import { ModalRowItem } from './ModalRowItem';
@@ -96,7 +95,7 @@ export const RenderWalletList = ({
         />
       );
     },
-    [walletList]
+    [onSelect]
   );
 
   const height = useMemo(() => {

packages/widget-v2/src/components/VirtualList.tsx

@@ -12,7 +12,7 @@ export type VirtualListProps<T> = {
   className?: string;
 };
 
-export const VirtualList = <T extends unknown>({
+export const VirtualList = <T,>({
   listItems,
   height,
   itemHeight,

packages/widget-v2/src/icons/index.tsx

@@ -10,6 +10,7 @@ import { HistoryIcon } from './HistoryIcon';
 import { ThinArrowIcon } from './ThinArrowIcon';
 import { HamburgerIcon } from './HamburgerIcon';
 import { HorizontalLineIcon } from './HorizontalLineIcon';
+import { SVGProps } from 'react';
 
 export enum ICONS {
   none,
@@ -28,8 +29,14 @@ export enum ICONS {
   horizontalLine,
 }
 
+type IconProps = SVGProps<SVGSVGElement> & {
+  color?: string;
+  direction?: 'right' | 'left';
+  backgroundColor?: string;
+};
+
 type IconMap = {
-  [key in ICONS]: (args: any) => JSX.Element | null;
+  [key in ICONS]: (props: IconProps) => JSX.Element | null;
 };
 
 export const iconMap: IconMap = {

packages/widget-v2/src/modals/ManualAddressModal/ManualAddressModal.tsx

@@ -19,9 +19,7 @@ export const ManualAddressModal = createModal((modalProps: ModalProps) => {
   const { theme } = modalProps;
   const modal = useModal();
   const [destinationAsset] = useAtom(destinationAssetAtom);
-  const [_destinationWallet, setDestinationWallet] = useAtom(
-    destinationWalletAtom
-  );
+  const [, setDestinationWallet] = useAtom(destinationWalletAtom);
   const chain = getChain(destinationAsset?.chainID ?? '');
   const chainName = destinationAsset?.chainName;
   const chainImage = chain.images?.find((image) => image.svg ?? image.png);

packages/widget-v2/src/modals/TransactionHistoryModal/TransactionHistoryModal.tsx

@@ -31,7 +31,6 @@ export const TransactionHistoryModal = createModal(
           leftButton={{
             label: 'Back',
             icon: ICONS.thinArrow,
-            onClick: () => {},
           }}
         />
         <StyledContainer>

packages/widget-v2/src/modals/TransactionHistoryModal/TransactionHistoryModalItem.tsx

@@ -11,14 +11,14 @@ import { StyledAnimatedBorder } from '@/pages/SwapExecutionPage/SwapExecutionPag
 import { TransactionHistoryModalItemDetails } from './TransactionHistoryModalItemDetails';
 import { HistoryArrowIcon } from '@/icons/HistoryArrowIcon';
 
-export interface TxStatus {
+export type TxStatus = {
   chainId: string;
   txHash: string;
   explorerLink: string;
   axelarscanLink?: string;
 }
 
-export interface TxHistoryItem {
+export type TxHistoryItem = {
   route: RouteResponse;
   txStatus: TxStatus[];
   timestamp: string;
@@ -93,7 +93,7 @@ export const TransactionHistoryModalItem = ({
       case 'failed':
         return <XIcon color={theme.error.text} />;
     }
-  }, [status]);
+  }, [status, theme.error.text, theme.primary.text.normal]);
 
   const absoluteTimeString = useMemo(() => {
     return new Date(timestamp).toLocaleString();
@@ -105,7 +105,7 @@ export const TransactionHistoryModalItem = ({
       return 'In Progress';
     }
     return '5 mins ago';
-  }, [timestamp, status]);
+  }, [status]);
 
   return (
     <StyledHistoryContainer showDetails={showDetails}>
@@ -138,7 +138,6 @@ export const TransactionHistoryModalItem = ({
           relativeTimeString={relativeTime}
           transactionID={txStatus[0].txHash}
           onClickTransactionID={onClickTransactionID}
-          onClickDelete={() => {}}
         />
       )}
     </StyledHistoryContainer>

packages/widget-v2/src/modals/TransactionHistoryModal/TransactionHistoryModalItemDetails.tsx

@@ -15,7 +15,7 @@ type TransactionHistoryModalItemDetailsProps = {
   relativeTimeString: string;
   transactionID: string;
   onClickTransactionID: () => void;
-  onClickDelete: () => void;
+  onClickDelete?: () => void;
 };
 
 const statusMap = {

packages/widget-v2/src/pages/ErrorPage/ErrorPage.tsx

@@ -2,8 +2,6 @@ import { errorAtom } from '@/state/errorPage';
 import { useResetAtom } from 'jotai/utils';
 
 export const ErrorPage = ({
-  error,
-  componentStack,
   resetErrorBoundary,
 }: {
   error?: Error;

packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPage.tsx

@@ -47,7 +47,7 @@ export const SwapExecutionPage = () => {
   const [simpleRoute, setSimpleRoute] = useState(true);
   const modal = useModal(ManualAddressModal);
 
-  const [txStateMap, setTxStateMap] = useState<{ [index: number]: txState }>({
+  const [txStateMap, setTxStateMap] = useState<Record<number, txState>>({
     0: 'pending',
     1: 'pending',
     2: 'pending',
@@ -124,7 +124,7 @@ export const SwapExecutionPage = () => {
           />
         );
     }
-  }, [swapExecutionState]);
+  }, [modal, swapExecutionState, theme.success.text]);
 
   const SwapExecutionPageRoute = simpleRoute
     ? withBoundProps(SwapExecutionPageRouteSimple, {
@@ -140,7 +140,6 @@ export const SwapExecutionPage = () => {
         leftButton={{
           label: 'Back',
           icon: ICONS.thinArrow,
-          onClick: () => {},
         }}
         rightButton={{
           label: simpleRoute ? 'Details' : 'Hide details',

packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPageRouteDetailed.tsx

@@ -13,12 +13,10 @@ import { SmallText } from '@/components/Typography';
 
 export type SwapExecutionPageRouteDetailedProps = {
   operations: Operation[];
-  txStateMap: { [index: number]: txState };
+  txStateMap: Record<number, txState>;
 };
 
-type operationTypeToIcon = {
-  [index: string]: JSX.Element;
-};
+type operationTypeToIcon = Record<string, JSX.Element>;
 
 const operationTypeToIcon: operationTypeToIcon = {
   axelarTransfer: <SwapExecutionBridgeIcon width={34} />,
@@ -37,9 +35,7 @@ const operationTypeToSimpleOperationType = {
   bankSend: 'Sent',
 };
 
-type tooltipMap = {
-  [index: number]: boolean;
-};
+type tooltipMap = Record<number, boolean>;
 
 export const SwapExecutionPageRouteDetailed = ({
   operations,

packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPageRouteSimple.tsx

@@ -10,7 +10,7 @@ import { WALLET_LIST } from '@/modals/WalletSelectorModal/WalletSelectorFlow';
 
 export type SwapExecutionPageRouteSimpleProps = {
   operations: Operation[];
-  txStateMap: { [index: number]: txState };
+  txStateMap: Record<number, txState>;
   onClickEditDestinationWallet?: () => void;
 };
 
@@ -63,7 +63,7 @@ export const SwapExecutionPageRouteSimple = ({
   );
 };
 
-const getOverallSwapState = (txStateMap: { [index: number]: txState }) => {
+const getOverallSwapState = (txStateMap: Record<number, txState>) => {
   const txStateArray = Object.values(txStateMap);
 
   if (txStateArray.find((state) => state === 'failed')) {