perf(settings): fix navigate-in-setState, memo sections, defer crypto resolution

src/components/settings-modal/account-settings/account-settings.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { deleteAccount, exportAccount, importAccount, setActiveAccount, useAccount, useAccounts } from '@bitsocialhq/pkc-react-hooks';
 import styles from './account-settings.module.css';
@@ -189,4 +190,4 @@ const AccountSettings = () => {
   return <AccountSettingsEditor key={account?.id} account={account} />;
 };
 
-export default AccountSettings;
+export default memo(AccountSettings);

src/components/settings-modal/advanced-settings/advanced-settings.tsx

@@ -1,4 +1,4 @@
-import { RefObject, useRef, useState } from 'react';
+import { memo, RefObject, useRef, useState } from 'react';
 import { setAccount, useAccount, usePlebbitRpcSettings } from '@bitsocialhq/pkc-react-hooks';
 import { useTranslation } from 'react-i18next';
 import styles from './advanced-settings.module.css';
@@ -309,4 +309,4 @@ const AdvancedSettings = () => {
   );
 };
 
-export default AdvancedSettings;
+export default memo(AdvancedSettings);

src/components/settings-modal/crypto-address-setting/crypto-address-setting.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAccount, setAccount, useResolvedAuthorAddress } from '@bitsocialhq/pkc-react-hooks';
 import styles from './crypto-address-setting.module.css';
@@ -25,13 +25,15 @@ const CryptoAddressSetting = () => {
   });
 
   const [savedCryptoAddress, setSavedCryptoAddress] = useState(false);
+  const [shouldResolve, setShouldResolve] = useState(false);
 
-  const author = { ...account?.author, address: cryptoState.cryptoAddress };
+  const authorToResolve = shouldResolve ? { ...account?.author, address: cryptoState.cryptoAddress } : undefined;
-  const { resolvedAddress, state, error, chainProvider } = useResolvedAuthorAddress({ author, cache: false });
+  const { resolvedAddress, state, error, chainProvider } = useResolvedAuthorAddress({ author: authorToResolve, cache: false });
 
   const [inputValue, setInputValue] = useState(account?.author?.shortAddress.includes('.') ? account.author.shortAddress : '');
 
   const checkCryptoAddress = () => {
+    setShouldResolve(true);
     const addressToCheck = inputValue || cryptoState.cryptoAddress;
     if (!addressToCheck || !addressToCheck.includes('.')) {
       alert(t('enter_crypto_address'));
@@ -96,6 +98,7 @@ const CryptoAddressSetting = () => {
         },
       );
       if (result !== undefined) {
+        setShouldResolve(false);
         setSavedCryptoAddress(true);
         setTimeout(() => setSavedCryptoAddress(false), 2000);
         setCryptoState((prevState) => ({
@@ -179,4 +182,4 @@ const CryptoAddressSetting = () => {
   );
 };
 
-export default CryptoAddressSetting;
+export default memo(CryptoAddressSetting);

src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { memo, useState } from 'react';
 import { Account, setAccount, useAccount } from '@bitsocialhq/pkc-react-hooks';
 import styles from './crypto-wallets-setting.module.css';
 import { Trans, useTranslation } from 'react-i18next';
@@ -200,4 +200,4 @@ const CryptoWalletsSetting = () => {
   );
 };
 
-export default CryptoWalletsSetting;
+export default memo(CryptoWalletsSetting);

src/components/settings-modal/interface-settings/interface-settings.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import packageJson from '../../../../package.json';
 import styles from './interface-settings.module.css';
@@ -125,4 +125,4 @@ const InterfaceSettings = () => {
   );
 };
 
-export default InterfaceSettings;
+export default memo(InterfaceSettings);

src/components/settings-modal/media-hosting-settings/media-hosting-settings.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import useMediaHostingStore, { MEDIA_HOSTING_PROVIDERS } from '../../../stores/use-media-hosting-store';
 import type { ProviderId } from '../../../lib/media-hosting/types';
@@ -73,4 +74,4 @@ const MediaHostingSettings = () => {
   );
 };
 
-export default MediaHostingSettings;
+export default memo(MediaHostingSettings);

src/components/settings-modal/settings-modal.tsx

@@ -65,24 +65,23 @@ const SettingsModal = () => {
   }, [hash]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const handleCategoryClick = (categoryId: string) => {
-    setExpandedSections((prev) => {
+    const isOpening = !expandedSections.has(categoryId);
-      const next = new Set(prev);
+    const next = new Set(expandedSections);
-      const isOpening = !next.has(categoryId);
+    if (isOpening) {
-      if (isOpening) {
+      next.add(categoryId);
-        next.add(categoryId);
+    } else {
-      } else {
+      next.delete(categoryId);
-        next.delete(categoryId);
+    }
-      }
+    setExpandedSections(next);
-      if (isOpening) {
+
-        navigate(`${basePath}#${categoryId}`, { replace: true });
+    if (isOpening) {
-      } else if (next.size === 1) {
+      navigate(`${basePath}#${categoryId}`, { replace: true });
-        const remaining = next.values().next().value;
+    } else if (next.size === 1) {
-        navigate(`${basePath}#${remaining}`, { replace: true });
+      const remaining = next.values().next().value;
-      } else {
+      navigate(`${basePath}#${remaining}`, { replace: true });
-        navigate(basePath, { replace: true });
+    } else {
-      }
+      navigate(basePath, { replace: true });
-      return next;
+    }
-    });
   };
 
   const handleExpandAll = () => {

src/components/settings-modal/subscriptions-setting/subscriptions-setting.tsx

@@ -2,7 +2,7 @@ import { setAccount, useAccount, useSubscribe } from '@bitsocialhq/pkc-react-hoo
 import getShortAddress from '../../../lib/get-short-address';
 import styles from './subscriptions-setting.module.css';
 import { useTranslation } from 'react-i18next';
-import { useState } from 'react';
+import { memo, useState } from 'react';
 
 const SubscriptionButton = ({ address }: { address: string }) => {
   const { t } = useTranslation();
@@ -91,4 +91,4 @@ const SubscriptionsSetting = () => {
   );
 };
 
-export default SubscriptionsSetting;
+export default memo(SubscriptionsSetting);