From 903b61bd7f6d2f4528e8806a9cf63e7ff890686e Mon Sep 17 00:00:00 2001 From: richardo2016x Date: Wed, 24 Apr 2024 17:16:52 +0800 Subject: [PATCH] build: resolve eslint error `react-hooks/rules-of-hooks`. --- .eslintrc | 5 +- package.json | 1 + src/ui/component/AddressList/AddressItem.tsx | 3 -- src/ui/component/AddressList/index.tsx | 3 ++ src/ui/component/ChainSelector/tag.tsx | 12 +++-- src/ui/hooks/useBalanceChange.ts | 4 +- src/ui/views/AddressDetail/AddressBackup.tsx | 11 +++-- src/ui/views/Dashboard/index.tsx | 1 - .../ImportHardware/QRCodeConnect/index.tsx | 15 +++--- .../views/ImportMnemonics/InputMnemonics.tsx | 12 ++--- src/ui/views/ImportSuccess/index.tsx | 48 ++++++++++--------- src/ui/views/SelectAddress/index.tsx | 29 +++++------ yarn.lock | 5 ++ 13 files changed, 83 insertions(+), 66 deletions(-) diff --git a/.eslintrc b/.eslintrc index be5e7fd87a3..be627cf2549 100644 --- a/.eslintrc +++ b/.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, diff --git a/package.json b/package.json index b5ab1d3337a..b1302bf9d75 100644 --- a/package.json +++ b/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", diff --git a/src/ui/component/AddressList/AddressItem.tsx b/src/ui/component/AddressList/AddressItem.tsx index bbea4b80ec5..ce3b200b121 100644 --- a/src/ui/component/AddressList/AddressItem.tsx +++ b/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( diff --git a/src/ui/component/AddressList/index.tsx b/src/ui/component/AddressList/index.tsx index 7dd3d88f620..abea17b81c2 100644 --- a/src/ui/component/AddressList/index.tsx +++ b/src/ui/component/AddressList/index.tsx @@ -51,6 +51,9 @@ const Row: React.FC = memo((props) => { editIndex, } = others; const account = combinedList[index]; + + if (!account) return null; + return (
  • { 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 ( <>
    { + if (!balance_change) return getDefaultValues(); + const hasNFTChange = balance_change.receive_nft_list.length > 0 || balance_change.send_nft_list.length > 0; diff --git a/src/ui/views/AddressDetail/AddressBackup.tsx b/src/ui/views/AddressDetail/AddressBackup.tsx index 4332e92a1d9..de3cecebfb5 100644 --- a/src/ui/views/AddressDetail/AddressBackup.tsx +++ b/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 (
    {type === KEYRING_TYPE.HdKeyring ? ( diff --git a/src/ui/views/Dashboard/index.tsx b/src/ui/views/Dashboard/index.tsx index ed0dcf3a247..67a7f4eecfe 100644 --- a/src/ui/views/Dashboard/index.tsx +++ b/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; diff --git a/src/ui/views/ImportHardware/QRCodeConnect/index.tsx b/src/ui/views/ImportHardware/QRCodeConnect/index.tsx index 21f10034def..941892e019f 100644 --- a/src/ui/views/ImportHardware/QRCodeConnect/index.tsx +++ b/src/ui/views/ImportHardware/QRCodeConnect/index.tsx @@ -29,13 +29,8 @@ export const QRCodeConnect = () => { const brand = new URLSearchParams(search).get('brand'); const stashKeyringIdRef = useRef(null); - if (!brand) { - history.goBack(); - return null; - } - const brandInfo: Valueof = - 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 (
    { } ); - // 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(); + // if is pop, redirect to dashboard + if (getUiType().isPop) { + history.replace('/dashboard'); + return null; + } + return (
    diff --git a/src/ui/views/ImportSuccess/index.tsx b/src/ui/views/ImportSuccess/index.tsx index 1c17d5f90e5..2ef8cc89bf9 100644 --- a/src/ui/views/ImportSuccess/index.tsx +++ b/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) => ( - startEdit(editing, index)} - showEditIcon={false} - ellipsis={false} - ref={(el) => { - addressItems.current[index] = el; - }} - /> - ))} + {sortBy(accounts, (item) => item?.index).map((account, index) => + !account ? null : ( + startEdit(editing, index)} + showEditIcon={false} + ellipsis={false} + ref={(el) => { + addressItems.current[index] = el; + }} + /> + ) + )} {!!state?.supportChainList?.length && (
    diff --git a/src/ui/views/SelectAddress/index.tsx b/src/ui/views/SelectAddress/index.tsx index 627f86f8ed7..0a3174b88aa 100644 --- a/src/ui/views/SelectAddress/index.tsx +++ b/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(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) { diff --git a/yarn.lock b/yarn.lock index 5525f6a9716..64fdf49f9d5 100644 --- a/yarn.lock +++ b/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"