[WIP] build: resolve eslint error react-hooks/rules-of-hooks.

.eslintrc

@@ -1,7 +1,7 @@
 {
   "root": true,
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "react"],
+  "plugins": ["@typescript-eslint", "react", "react-hooks"],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
@@ -18,7 +18,8 @@
       {
         "endOfLine": "auto"
       }
-    ]
+    ],
+    "react-hooks/rules-of-hooks": "error"
   },
   "env": {
     "browser": true,

package.json

@@ -174,6 +174,7 @@
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-prettier": "3.4.0",
     "eslint-plugin-react": "7.23.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-webpack-plugin": "2.5.4",
     "file-loader": "6.2.0",
     "fs-extra": "10.0.0",

src/ui/component/AddressList/AddressItem.tsx

@@ -82,9 +82,6 @@ const AddressItem = memo(
       }: AddressItemProps,
       ref
     ) => {
-      if (!account) {
-        return null;
-      }
       const { t } = useTranslation();
       const wallet = useWallet();
       const [alianName, setAlianName] = useState<string>(

src/ui/component/AddressList/index.tsx

@@ -51,6 +51,9 @@ const Row: React.FC<RowProps> = memo((props) => {
     editIndex,
   } = others;
   const account = combinedList[index];
+
+  if (!account) return null;
+
   return (
     <li
       className={clsx(

src/ui/component/ChainSelector/tag.tsx

@@ -70,6 +70,8 @@ const ChainSelector = ({
   );
 };
 
+type SUPPORT_CHAINS_HASH = typeof DEX_SUPPORT_CHAINS;
+
 export const SwapChainSelector = ({
   value,
   onChange,
@@ -99,15 +101,17 @@ ChainSelectorProps) => {
 
   const dexId = useRabbySelector((s) => s.swap.selectedDex);
 
-  if (!dexId) {
-    return null;
-  }
-  const supportChains = DEX_SUPPORT_CHAINS[dexId];
+  const supportChains = ((dexId ? DEX_SUPPORT_CHAINS[dexId] : []) ||
+    []) as SUPPORT_CHAINS_HASH[keyof SUPPORT_CHAINS_HASH];
 
   const chainItem = React.useMemo(() => {
     return findChainByEnum(value);
   }, [value]);
 
+  if (!dexId) {
+    return null;
+  }
+
   return (
     <>
       <div

src/ui/hooks/useBalanceChange.ts

@@ -17,9 +17,9 @@ export default function useBalanceChange({
 }: {
   balance_change?: ExplainTxResponse['balance_change'] | null;
 }) {
-  if (!balance_change) return getDefaultValues();
-
   return useMemo(() => {
+    if (!balance_change) return getDefaultValues();
+
     const hasNFTChange =
       balance_change.receive_nft_list.length > 0 ||
       balance_change.send_nft_list.length > 0;

src/ui/views/AddressDetail/AddressBackup.tsx

@@ -21,11 +21,6 @@ export const AddressBackup = ({ address, type }: Props) => {
 
   const [form] = useForm();
 
-  if (
-    ![KEYRING_TYPE.HdKeyring, KEYRING_TYPE.SimpleKeyring].includes(type as any)
-  ) {
-    return null;
-  }
   const invokeEnterPassphrase = useEnterPassphraseModal('address');
 
   const handleBackup = async (path: 'mneonics' | 'private-key') => {
@@ -68,6 +63,12 @@ export const AddressBackup = ({ address, type }: Props) => {
     });
   };
 
+  if (
+    ![KEYRING_TYPE.HdKeyring, KEYRING_TYPE.SimpleKeyring].includes(type as any)
+  ) {
+    return null;
+  }
+
   return (
     <div className="rabby-list">
       {type === KEYRING_TYPE.HdKeyring ? (

src/ui/views/Dashboard/index.tsx

@@ -218,7 +218,6 @@ const Dashboard = () => {
   }, [clicked]);
 
   const handleCopyCurrentAddress = () => {
-    const { t } = useTranslation();
     const clipboard = new ClipboardJS('.address-popover', {
       text: function () {
         return currentAccount!.address;

src/ui/views/ImportHardware/QRCodeConnect/index.tsx

@@ -29,13 +29,8 @@ export const QRCodeConnect = () => {
   const brand = new URLSearchParams(search).get('brand');
   const stashKeyringIdRef = useRef<number | null>(null);
 
-  if (!brand) {
-    history.goBack();
-    return null;
-  }
-
   const brandInfo: Valueof<typeof WALLET_BRAND_CONTENT> =
-    WALLET_BRAND_CONTENT[brand] || WALLET_BRAND_CONTENT.Keystone;
+    (!!brand && WALLET_BRAND_CONTENT[brand]) || WALLET_BRAND_CONTENT.Keystone;
 
   const [progress, setProgress] = useState(0);
 
@@ -119,6 +114,8 @@ export const QRCodeConnect = () => {
   };
 
   useEffect(() => {
+    if (!brand) return;
+
     wallet.initQRHardware(brand).then((stashKeyringId) => {
       stashKeyringIdRef.current = stashKeyringId;
       wallet
@@ -141,6 +138,12 @@ export const QRCodeConnect = () => {
     setProgress(0);
     decoder.current = new URDecoder();
   };
+
+  if (!brand) {
+    history.goBack();
+    return null;
+  }
+
   return (
     <div className="bg-r-neutral-bg1 h-full flex">
       <main

src/ui/views/ImportMnemonics/InputMnemonics.tsx

@@ -105,12 +105,6 @@ const ImportMnemonics = () => {
     }
   );
 
-  // if is pop, redirect to dashboard
-  if (getUiType().isPop) {
-    history.replace('/dashboard');
-    return null;
-  }
-
   useEffect(() => {
     (async () => {
       if (await wallet.hasPageStateCache()) {
@@ -140,6 +134,12 @@ const ImportMnemonics = () => {
 
   const [errMsgs, setErrMsgs] = React.useState<string[]>();
 
+  // if is pop, redirect to dashboard
+  if (getUiType().isPop) {
+    history.replace('/dashboard');
+    return null;
+  }
+
   return (
     <main className="w-screen h-screen bg-r-neutral-bg-2">
       <div className={clsx('mx-auto pt-[58px]', 'w-[600px]')}>

src/ui/views/ImportSuccess/index.tsx

@@ -174,29 +174,31 @@ const ImportSuccess = ({ isPopup = false }: { isPopup?: boolean }) => {
               !isPopup && 'lg:h-[200px] lg:w-[460px]'
             )}
           >
-            {sortBy(accounts, (item) => item?.index).map((account, index) => (
-              <AddressItem
-                className="mb-12 rounded bg-r-neutral-card-1 py-12 pl-16 h-[92px] flex"
-                key={account.address}
-                account={account}
-                showAssets
-                icon={importedIcon}
-                showImportIcon={showImportIcon}
-                editing={editing}
-                index={index}
-                showIndex={!editing}
-                importedAccount
-                isMnemonics={isMnemonics}
-                importedLength={importedLength}
-                stopEditing={!editing}
-                canEditing={(editing) => startEdit(editing, index)}
-                showEditIcon={false}
-                ellipsis={false}
-                ref={(el) => {
-                  addressItems.current[index] = el;
-                }}
-              />
-            ))}
+            {sortBy(accounts, (item) => item?.index).map((account, index) =>
+              !account ? null : (
+                <AddressItem
+                  className="mb-12 rounded bg-r-neutral-card-1 py-12 pl-16 h-[92px] flex"
+                  key={account.address}
+                  account={account}
+                  showAssets
+                  icon={importedIcon}
+                  showImportIcon={showImportIcon}
+                  editing={editing}
+                  index={index}
+                  showIndex={!editing}
+                  importedAccount
+                  isMnemonics={isMnemonics}
+                  importedLength={importedLength}
+                  stopEditing={!editing}
+                  canEditing={(editing) => startEdit(editing, index)}
+                  showEditIcon={false}
+                  ellipsis={false}
+                  ref={(el) => {
+                    addressItems.current[index] = el;
+                  }}
+                />
+              )
+            )}
             {!!state?.supportChainList?.length && (
               <div className="chain-list-container">
                 <div className="desc">

src/ui/views/SelectAddress/index.tsx

@@ -35,19 +35,6 @@ const SelectAddress = () => {
     state.keyringId = Number(query.get('keyringId') as string);
   }
 
-  if (!state) {
-    if (getUiType().isTab) {
-      if (history.length) {
-        history.goBack();
-      } else {
-        window.close();
-      }
-    } else {
-      history.replace('/dashboard');
-    }
-    return null;
-  }
-
   const [isMounted, setIsMounted] = React.useState(false);
   const dispatch = useRabbyDispatch();
   const initMnemonics = async () => {
@@ -63,8 +50,22 @@ const SelectAddress = () => {
     initMnemonics();
   }, [query]);
 
-  const { keyring, brand } = state;
   const keyringId = useRef<number | null | undefined>(state.keyringId);
+
+  if (!state) {
+    if (getUiType().isTab) {
+      if (history.length) {
+        history.goBack();
+      } else {
+        window.close();
+      }
+    } else {
+      history.replace('/dashboard');
+    }
+    return null;
+  }
+
+  const { keyring, brand } = state;
   const isMnemonic = keyring === KEYRING_CLASS.MNEMONIC;
 
   if (isMnemonic) {

yarn.lock

@@ -9856,6 +9856,11 @@ eslint-plugin-prettier@3.4.0:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
+eslint-plugin-react-hooks@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
+  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
+
 eslint-plugin-react@7.23.2:
   version "7.23.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.23.2.tgz#2d2291b0f95c03728b55869f01102290e792d494"