Add rules of hook and exhaustive deps

.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/eslint.config.mjs

@@ -1,6 +1,7 @@
 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,
@@ -9,10 +10,11 @@ export default tseslint.config(
   ...tseslint.configs.stylistic,
   {
     plugins: {
-      'react-hooks': reactHooks,
+      'react-hooks': fixupPluginRules(reactHooks),
     },
     rules: {
       '@typescript-eslint/consistent-type-definitions': 'off',
+      ...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"
   },
@@ -51,6 +51,7 @@
   },
   "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

@@ -1,7 +1,11 @@
 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 NiceModal, {
+  remove,
+  show,
+  useModal as useNiceModal,
+} from '@ebay/nice-modal-react';
 import { ComponentType, FC, useCallback, useEffect, useMemo } from 'react';
 import { PartialTheme } from '@/widget/theme';
 
@@ -34,7 +38,7 @@ export const Modal = ({
     return () => {
       onOpenChange?.(false);
     };
-  }, []);
+  }, [onOpenChange]);
 
   return (
     <Dialog.Root open={modal.visible} onOpenChange={() => modal.remove()}>
@@ -78,34 +82,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

@@ -95,7 +95,7 @@ export const RenderWalletList = ({
         />
       );
     },
-    [walletList]
+    [onSelect]
   );
 
   const height = useMemo(() => {

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

@@ -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}>

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

@@ -124,7 +124,7 @@ export const SwapExecutionPage = () => {
           />
         );
     }
-  }, [swapExecutionState]);
+  }, [modal, swapExecutionState, theme.success.text]);
 
   const SwapExecutionPageRoute = simpleRoute
     ? withBoundProps(SwapExecutionPageRouteSimple, {

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

@@ -30,13 +30,13 @@ export const SwapPage = () => {
     if (!assets || !sourceAsset?.symbol) return;
     const chains = getChainsContainingAsset(sourceAsset?.symbol, assets);
     return chains;
-  }, [sourceAsset?.symbol]);
+  }, [assets, sourceAsset?.symbol]);
 
   const chainsContainingDestinationAsset = useMemo(() => {
     if (!assets || !destinationAsset?.symbol) return;
     const chains = getChainsContainingAsset(destinationAsset?.symbol, assets);
     return chains;
-  }, [destinationAsset?.symbol]);
+  }, [assets, destinationAsset?.symbol]);
 
   const handleChangeSourceAsset = useCallback(() => {
     tokenAndChainSelectorFlow.show({
@@ -48,7 +48,7 @@ export const SwapPage = () => {
         tokenAndChainSelectorFlow.hide();
       },
     });
-  }, []);
+  }, [setSourceAsset, tokenAndChainSelectorFlow]);
 
   const handleChangeSourceChain = useCallback(() => {
     if (!chainsContainingSourceAsset) return;
@@ -66,7 +66,12 @@ export const SwapPage = () => {
       chainsContainingAsset: chainsContainingSourceAsset,
       asset: sourceAsset,
     });
-  }, [chainsContainingSourceAsset, sourceAsset]);
+  }, [
+    chainsContainingSourceAsset,
+    setSourceAsset,
+    sourceAsset,
+    tokenAndChainSelectorFlow,
+  ]);
 
   const handleChangeDestinationAsset = useCallback(() => {
     tokenAndChainSelectorFlow.show({
@@ -78,7 +83,7 @@ export const SwapPage = () => {
         tokenAndChainSelectorFlow.hide();
       },
     });
-  }, []);
+  }, [setDestinationAsset, tokenAndChainSelectorFlow]);
 
   const handleChangeDestinationChain = useCallback(() => {
     if (!chainsContainingDestinationAsset) return;
@@ -94,7 +99,12 @@ export const SwapPage = () => {
       chainsContainingAsset: chainsContainingDestinationAsset,
       asset: destinationAsset,
     });
-  }, [chainsContainingDestinationAsset, destinationAsset]);
+  }, [
+    chainsContainingDestinationAsset,
+    destinationAsset,
+    setDestinationAsset,
+    tokenAndChainSelectorFlow,
+  ]);
 
   return (
     <>

packages/widget-v2/src/pages/SwapPage/SwapPageFooter.tsx

@@ -1,5 +1,4 @@
 import { useMemo } from 'react';
-import { useTheme } from 'styled-components';
 import { Row } from '@/components/Layout';
 import { GhostButton } from '@/components/Button';
 import { GasIcon } from '@/icons/GasIcon';
@@ -19,8 +18,6 @@ export const SwapPageFooterItems = ({
   rightContent = null,
   showRouteInfo,
 }: SwapPageFooterItemsProps) => {
-  const theme = useTheme();
-
   const renderRightContent = useMemo(() => {
     if (showRouteInfo && estimatedGas && estimatedTime) {
       return (
@@ -36,7 +33,7 @@ export const SwapPageFooterItems = ({
       );
     }
     return rightContent;
-  }, [showRouteInfo, rightContent, estimatedGas, estimatedTime, theme]);
+  }, [showRouteInfo, rightContent]);
 
   return (
     <>

packages/widget-v2/src/state/errorPage.ts

@@ -4,4 +4,4 @@ export const errorAtom = atomWithReset<
   ExpectedErrorDetails | Error | undefined
 >(undefined);
 
-type ExpectedErrorDetails = {};
+type ExpectedErrorDetails = object;

packages/widget-v2/src/stories/MainButton.stories.tsx

@@ -88,10 +88,11 @@ export const SwapInProgress: Story = {
 };
 
 export const SwapComplete: Story = {
-  render: (props) =>
-    renderLightAndDarkTheme(
+  render: function SwapComplete(props) {
+    return renderLightAndDarkTheme(
       <MainButton {...props} backgroundColor={useTheme().success.text} />
-    ),
+    );
+  },
   args: {
     label: 'Swap Complete',
     icon: ICONS.checkmark,
@@ -100,10 +101,11 @@ export const SwapComplete: Story = {
 };
 
 export const ContinueTransaction: Story = {
-  render: (props) =>
-    renderLightAndDarkTheme(
+  render: function ContinueTransaction(props) {
+    return renderLightAndDarkTheme(
       <MainButton {...props} backgroundColor={useTheme().warning.text} />
-    ),
+    );
+  },
   args: {
     label: 'Continue Transaction',
     icon: ICONS.rightArrow,
@@ -112,10 +114,11 @@ export const ContinueTransaction: Story = {
 };
 
 export const GoBack: Story = {
-  render: (props) =>
-    renderLightAndDarkTheme(
+  render: function GoBack(props) {
+    return renderLightAndDarkTheme(
       <MainButton {...props} backgroundColor={useTheme().error.text} />
-    ),
+    );
+  },
   args: {
     label: 'Go Back',
     leftIcon: ICONS.leftArrow,

packages/widget-v2/src/stories/ManualAddressModals.stories.tsx

@@ -34,7 +34,7 @@ export const ManualAddressModalsExample = () => {
     if (destinationAsset) {
       setShouldRender(true);
     }
-  }, [asset, destinationAsset]);
+  }, [asset, destinationAsset, setDestinationAsset]);
   if (shouldRender) {
     return (
       <NiceModal.Provider>

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

@@ -10,7 +10,7 @@ const Wrapper = styled.div`
   z-index: 100;
 `;
 
-const renderModal = (props: ModalProps) => {
+const RenderModal = (props: ModalProps) => {
   const modal = useModal(NiceModal.create(Modal));
   return (
     <NiceModal.Provider>
@@ -24,7 +24,7 @@ const renderModal = (props: ModalProps) => {
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
   title: 'Components/Modal',
-  component: (props) => renderModal(props),
+  component: (props) => RenderModal(props),
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',

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

@@ -10,7 +10,7 @@ import { useEffect, useState } from 'react';
 
 const meta = {
   title: 'Pages/SwapExecutionPage',
-  component: (props) => {
+  component: function SwapExecutionPageStory(props) {
     const [, setSourceAsset] = useAtom(destinationAssetAtom);
     const [, setDestinationAsset] = useAtom(destinationAssetAtom);
     const [shouldRender, setShouldRender] = useState(false);
@@ -33,7 +33,7 @@ const meta = {
       if (sourceAsset && destinationAsset) {
         setShouldRender(true);
       }
-    }, [sourceAsset, destinationAsset]);
+    }, [sourceAsset, destinationAsset, setSourceAsset, setDestinationAsset]);
     if (shouldRender) {
       return renderLightAndDarkTheme(
         <NiceModal.Provider>

packages/widget-v2/src/widget/ShadowDomAndProviders.tsx

@@ -74,7 +74,7 @@ export const ShadowDomAndProviders = ({
       ...defaultTheme,
       ...theme,
     };
-  }, [defaultTheme, theme]);
+  }, [theme]);
 
   return isClient ? (
     <Scope ref={onShadowDomLoaded}>

packages/widget-v2/src/widget/Widget.tsx

@@ -49,7 +49,9 @@ export const ShowSwapWidget = ({
 
   const handleClick = () => {
     resetNumberOfModalsOpen();
-    modal.show();
+    modal.show({
+      stackedModal: false,
+    });
   };
 
   const Element = cloneElement(button, { onClick: handleClick });

yarn.lock

@@ -3678,6 +3678,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@eslint/compat@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@eslint/compat@npm:1.1.1"
+  checksum: c9146b139e52ee4f79e25b97f22d2936c50b876cef8e9c5789600f12d8fabae689d75571a8429e5aae0d5e8067b0628fd87b7e849cee391b485db9557b40b6a4
+  languageName: node
+  linkType: hard
+
 "@eslint/config-array@npm:^0.17.1":
   version: 0.17.1
   resolution: "@eslint/config-array@npm:0.17.1"
@@ -28800,6 +28807,7 @@ __metadata:
   dependencies:
     "@chromatic-com/storybook": ^1.6.1
     "@ebay/nice-modal-react": ^1.2.13
+    "@eslint/compat": ^1.1.1
     "@eslint/js": ^9.9.0
     "@initia/initia-registry": ^0.1.16
     "@radix-ui/react-dialog": ^1.1.1