refactor(settings): remove blocked addresses setting and block user/board feature

Obsolete with pseudonymity mode (user IDs randomized per board) and custom boards
requiring explicit search/subscribe. Unsubscribe suffices for boards.

src/components/post-desktop/post-menu-desktop/post-menu-desktop.tsx

@@ -3,7 +3,6 @@ import { createPortal } from 'react-dom';
 import { useLocation, useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
-import { useBlock } from '@plebbit/plebbit-react-hooks';
 import styles from './post-menu-desktop.module.css';
 import { getCommentMediaInfo } from '../../../lib/utils/media-utils';
 import { copyShareLinkToClipboard, isValidURL, type ShareLinkType } from '../../../lib/utils/url-utils';
@@ -117,26 +116,6 @@ const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void
   );
 };
 
-const BlockUserButton = ({ address }: { address: string }) => {
-  const { t } = useTranslation();
-  const { blocked, unblock, block } = useBlock({ address });
-  return (
-    <div className={styles.postMenuItem} onClick={blocked ? unblock : block}>
-      {blocked ? t('unblock_user') : t('block_user')}
-    </div>
-  );
-};
-
-const BlockBoardButton = ({ address }: { address: string }) => {
-  const { t } = useTranslation();
-  const { blocked, unblock, block } = useBlock({ address });
-  return (
-    <div className={styles.postMenuItem} onClick={blocked ? unblock : block}>
-      {blocked ? t('unblock_board') : t('block_board')}
-    </div>
-  );
-};
-
 type PostMenuDesktopProps = {
   postMenu: PostMenuProps;
 };
@@ -210,8 +189,6 @@ const PostMenuDesktop = ({ postMenu }: PostMenuDesktopProps) => {
                 </div>
               )}
               {link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && <ImageSearchButton url={url} onClose={handleClose} />}
-              {authorAddress && <BlockUserButton address={authorAddress} />}
-              {(isInAllView || isInSubscriptionsView) && subplebbitAddress && <BlockBoardButton address={subplebbitAddress} />}
             </div>
           </FloatingFocusManager>,
           document.body,

src/components/post-mobile/post-menu-mobile/post-menu-mobile.tsx

@@ -1,7 +1,7 @@
 import { memo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
-import { Comment, useBlock } from '@plebbit/plebbit-react-hooks';
+import { Comment } from '@plebbit/plebbit-react-hooks';
 import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
 import styles from './post-menu-mobile.module.css';
 import { getCommentMediaInfo } from '../../../lib/utils/media-utils';
@@ -128,26 +128,6 @@ const HidePostButton = ({ cid, isReply, onClose, postCid }: HideButtonProps) =>
   );
 };
 
-const BlockUserButton = ({ address }: { address: string }) => {
-  const { t } = useTranslation();
-  const { blocked, unblock, block } = useBlock({ address });
-  return (
-    <div className={styles.postMenuItem} onClick={blocked ? unblock : block}>
-      {blocked ? t('unblock_user') : t('block_user')}
-    </div>
-  );
-};
-
-const BlockBoardButton = ({ address }: { address: string }) => {
-  const { t } = useTranslation();
-  const { blocked, unblock, block } = useBlock({ address });
-  return (
-    <div className={styles.postMenuItem} onClick={blocked ? unblock : block}>
-      {blocked ? t('unblock_board') : t('block_board')}
-    </div>
-  );
-};
-
 type PostMenuMobileProps = {
   postMenu: PostMenuProps;
   editMenuPost: Comment;
@@ -201,8 +181,6 @@ const PostMenuMobile = ({ postMenu, editMenuPost }: PostMenuMobileProps) => {
                   {cid && <CopyContentIdButton cid={cid} onClose={handleClose} />}
                   {authorAddress && <CopyUserIdButton address={authorAddress} onClose={handleClose} />}
                   {cid && subplebbitAddress && <HidePostButton cid={cid} isReply={!!parentCid} postCid={postCid} onClose={handleClose} />}
-                  {cid && subplebbitAddress && authorAddress && <BlockUserButton address={authorAddress} />}
-                  {cid && subplebbitAddress && !isInBoardView && <BlockBoardButton address={subplebbitAddress} />}
                   {link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && <ImageSearchButtons url={url} onClose={handleClose} />}
                 </div>
               </FloatingFocusManager>,

src/components/settings-modal/blocked-addresses-setting/blocked-addresses-setting.module.css

@@ -1,31 +0,0 @@
-.setting {
-  margin: 10px 10px 0 10px;
-}
-
-.blockedAddress {
-  padding-bottom: 5px;
-  margin-left: 20px;
-}
-
-.unblockAll {
-  padding-bottom: 10px;
-}
-
-.button {
-  text-transform: capitalize;
-  color: var(--button-desktop-text-color);
-  text-decoration: var(--button-text-decoration);
-}
-
-.unblockButton {
-  float: right;
-}
-
-.button:hover {
-  color: var(--button-desktop-text-color-hover);
-  cursor: pointer;
-}
-
-.notBlocked {
-  padding-bottom: 10px;
-}

src/components/settings-modal/blocked-addresses-setting/blocked-addresses-setting.tsx

@@ -1,59 +0,0 @@
-import { setAccount, useAccount, useBlock } from '@plebbit/plebbit-react-hooks';
-import Plebbit from '@plebbit/plebbit-js';
-import styles from './blocked-addresses-setting.module.css';
-import { useTranslation } from 'react-i18next';
-
-const UnblockButton = ({ address }: { address: string }) => {
-  const { t } = useTranslation();
-  const { unblock } = useBlock({ address });
-
-  return (
-    <span className={styles.unblockButton}>
-      [
-      <span className={styles.button} onClick={unblock}>
-        {t('unblock')}
-      </span>
-      ]
-    </span>
-  );
-};
-
-const BlockedAddressesSetting = () => {
-  const { t } = useTranslation();
-  const { blockedAddresses } = useAccount() || {};
-  const addressList = blockedAddresses ? Object.keys(blockedAddresses) : [];
-  const account = useAccount();
-
-  const unblockAll = () => {
-    window.confirm(t('unblock_all_confirm')) && setAccount({ ...account, blockedAddresses: {} });
-  };
-
-  return (
-    <div className={styles.setting}>
-      {addressList.length > 0 ? (
-        <>
-          {addressList.length > 1 && (
-            <div className={styles.unblockAll}>
-              [
-              <span className={styles.button} onClick={unblockAll}>
-                {t('unblock_all')}
-              </span>
-              ]
-            </div>
-          )}
-          <ul className={styles.blockedAddresses}>
-            {addressList.map((address: string) => (
-              <li key={address} className={styles.blockedAddress}>
-                {address && Plebbit.getShortAddress({ address })} <UnblockButton address={address} />
-              </li>
-            ))}
-          </ul>
-        </>
-      ) : (
-        <div className={styles.notBlocked}>{t('you_have_not_blocked')}</div>
-      )}
-    </div>
-  );
-};
-
-export default BlockedAddressesSetting;

src/components/settings-modal/blocked-addresses-setting/index.ts

@@ -1 +0,0 @@
-export { default } from './blocked-addresses-setting';

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

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 import styles from './settings-modal.module.css';
 import AccountSettings from './account-settings';
 import AvatarSettings from './avatar-settings';
-import BlockedAddressesSetting from './blocked-addresses-setting';
 import CryptoAddressSetting from './crypto-address-setting';
 import CryptoWalletsSetting from './crypto-wallets-setting';
 import InterfaceSettings from './interface-settings';
@@ -43,7 +42,6 @@ const SettingsModal = () => {
   const [showCryptoAddressSetting, setShowCryptoAddressSetting] = useState(false);
   const [showCryptoWalletSettings, setShowCryptoWalletSettings] = useState(false);
   const [showSubscriptionsSettings, setShowSubscriptionsSettings] = useState(false);
-  const [showBlockedAddressesSetting, setShowBlockedAddressesSetting] = useState(false);
   const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
   const [expandAll, setExpandAll] = useState(false);
 
@@ -56,7 +54,6 @@ const SettingsModal = () => {
       Number(showCryptoAddressSetting) +
       Number(showCryptoWalletSettings) +
       Number(showSubscriptionsSettings) +
-      Number(showBlockedAddressesSetting) +
       Number(showAdvancedSettings)
     );
   };
@@ -69,7 +66,6 @@ const SettingsModal = () => {
     if (showCryptoAddressSetting && 'crypto-address-settings' !== excludeCategoryId) return 'crypto-address-settings';
     if (showCryptoWalletSettings && 'crypto-wallet-settings' !== excludeCategoryId) return 'crypto-wallet-settings';
     if (showSubscriptionsSettings && 'subscriptions-settings' !== excludeCategoryId) return 'subscriptions-settings';
-    if (showBlockedAddressesSetting && 'blocked-addresses-settings' !== excludeCategoryId) return 'blocked-addresses-settings';
     if (showAdvancedSettings && 'advanced-settings' !== excludeCategoryId) return 'advanced-settings';
     return null;
   };
@@ -110,7 +106,6 @@ const SettingsModal = () => {
       setShowCryptoAddressSetting(hash === 'crypto-address-settings');
       setShowCryptoWalletSettings(hash === 'crypto-wallet-settings');
       setShowSubscriptionsSettings(hash === 'subscriptions-settings');
-      setShowBlockedAddressesSetting(hash === 'blocked-addresses-settings');
       setShowAdvancedSettings(hash === 'advanced-settings');
     }
   }, [hash]);
@@ -125,7 +120,6 @@ const SettingsModal = () => {
     setShowCryptoAddressSetting(newExpandState);
     setShowCryptoWalletSettings(newExpandState);
     setShowSubscriptionsSettings(newExpandState);
-    setShowBlockedAddressesSetting(newExpandState);
     setShowAdvancedSettings(newExpandState);
 
     const baseSettingsPath = location.pathname.split('#')[0];
@@ -192,13 +186,6 @@ const SettingsModal = () => {
           </label>
         </div>
         {showSubscriptionsSettings && <SubscriptionsSetting />}
-        <div id='blocked-addresses-settings' className={`${styles.setting} ${styles.category}`}>
-          <label onClick={() => handleCategoryClick('blocked-addresses-settings', showBlockedAddressesSetting, setShowBlockedAddressesSetting)}>
-            <span className={showBlockedAddressesSetting ? styles.hideButton : styles.showButton} />
-            {t('blocked_addresses')}
-          </label>
-        </div>
-        {showBlockedAddressesSetting && <BlockedAddressesSetting />}
         <div id='advanced-settings' className={`${styles.setting} ${styles.category}`}>
           <label onClick={() => handleCategoryClick('advanced-settings', showAdvancedSettings, setShowAdvancedSettings)}>
             <span className={showAdvancedSettings ? styles.hideButton : styles.showButton} />

src/views/board/board.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Link, useLocation, useNavigationType, useParams } from 'react-router-dom';
-import { Comment, useAccount, useAccountComments, useAccountSubplebbits, useBlock, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { Comment, useAccount, useAccountComments, useAccountSubplebbits, useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import { useSubplebbitField } from '../../hooks/use-stable-subplebbit';
 import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
 import { Trans, useTranslation } from 'react-i18next';
@@ -41,8 +41,6 @@ interface BoardFooterProps {
   subplebbitState: string | undefined;
   subscriptionsLength: number;
   accountSubplebbitAddressesLength: number;
-  blocked: boolean;
-  onUnblock: () => void;
 }
 
 // Defined outside Board to preserve component identity across renders (Virtuoso optimization)
@@ -67,8 +65,6 @@ const BoardFooter = ({
   subplebbitState,
   subscriptionsLength,
   accountSubplebbitAddressesLength,
-  blocked,
-  onUnblock,
 }: BoardFooterProps) => {
   const { t } = useTranslation();
 
@@ -146,20 +142,9 @@ const BoardFooter = ({
           <span className='red'>{t('not_subscribed_to_any_board')}</span>
         ) : isInModView && accountSubplebbitAddressesLength === 0 ? (
           <span className='red'>{t('not_mod_of_any_board')}</span>
-        ) : blocked ? (
-          <span className='red'>{t('you_have_blocked_this_board')}</span>
         ) : (
           hasMore && <LoadingEllipsis string={loadingStateString} />
         )}
-        {blocked && (
-          <>
-            &nbsp;&nbsp;[
-            <span className={styles.button} onClick={onUnblock}>
-              {t('unblock')}
-            </span>
-            ]
-          </>
-        )}
       </div>
     </div>
   );
@@ -296,8 +281,6 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, t
   const { error: subplebbitError, state: subplebbitState } = subplebbit || {};
   const title = isInAllView ? t('all') : isInSubscriptionsView ? t('subscriptions') : isInModView ? t('mod') : subplebbitTitle;
 
-  const { blocked, unblock } = useBlock({ address: subplebbitAddress });
-
   const handleNewerPostsButtonClick = () => {
     window.scrollTo({ top: 0, left: 0 });
     setTimeout(() => {
@@ -341,11 +324,6 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, t
 
   const currentTimeFilterName = timeFilterName || params?.timeFilterName;
 
-  const handleUnblock = () => {
-    unblock();
-    reset();
-  };
-
   // Memoize footer component to preserve identity across renders (Virtuoso optimization)
   // Note: useFeedStateString is called inside BoardFooter to isolate re-renders from backend state changes
   const footerComponents = useMemo(
@@ -370,8 +348,6 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, t
           subplebbitState={subplebbitState}
           subscriptionsLength={subscriptions?.length || 0}
           accountSubplebbitAddressesLength={accountSubplebbitAddresses?.length || 0}
-          blocked={blocked || false}
-          onUnblock={handleUnblock}
         />
       ),
     }),
@@ -394,8 +370,6 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, t
       subplebbitState,
       subscriptions?.length,
       accountSubplebbitAddresses?.length,
-      blocked,
-      handleUnblock,
     ],
   );
 
@@ -499,8 +473,6 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, t
               subplebbitState={subplebbitState}
               subscriptionsLength={subscriptions?.length || 0}
               accountSubplebbitAddressesLength={accountSubplebbitAddresses?.length || 0}
-              blocked={blocked || false}
-              onUnblock={handleUnblock}
             />
           </>
         )}

src/views/catalog/catalog.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import { Link, useLocation, useNavigationType, useParams } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
-import { Comment, useAccount, useFeed, useSubplebbit, useBlock, useAccountComments } from '@plebbit/plebbit-react-hooks';
+import { Comment, useAccount, useFeed, useSubplebbit, useAccountComments } from '@plebbit/plebbit-react-hooks';
 import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
 import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
 import useCatalogFeedRows from '../../hooks/use-catalog-feed-rows';
@@ -142,7 +142,6 @@ interface CatalogLoadingProps {
   yearlyFeedLength: number;
   state: string | undefined;
   subscriptionsLength: number;
-  blocked: boolean;
   combinedFeedLength: number;
   error: Error | undefined;
 }
@@ -156,7 +155,6 @@ const CatalogLoading = ({
   yearlyFeedLength,
   state,
   subscriptionsLength,
-  blocked,
   combinedFeedLength,
   error,
 }: CatalogLoadingProps) => {
@@ -174,8 +172,6 @@ const CatalogLoading = ({
         <span className='red'>{state}</span>
       ) : subscriptionsLength === 0 ? (
         <span className='red'>{t('not_subscribed_to_any_board')}</span>
-      ) : blocked ? (
-        t('you_have_blocked_this_board')
       ) : !hasMore && combinedFeedLength === 0 ? (
         t('no_threads')
       ) : (
@@ -481,8 +477,6 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
 
   const subplebbit = useSubplebbit({ subplebbitAddress });
   const { error, shortAddress, state, title } = subplebbit || {};
-  const { blocked, unblock } = useBlock({ address: subplebbitAddress });
-
   const feedLength = feed.length;
   const weeklyFeedLength = weeklyFeed.length;
   const monthlyFeedLength = monthlyFeed.length;
@@ -702,25 +696,9 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
               yearlyFeedLength={yearlyFeedLength}
               state={state}
               subscriptionsLength={isInSubscriptionsView ? subscriptions?.length || 0 : 1}
-              blocked={blocked || false}
               combinedFeedLength={combinedFeed.length}
               error={error}
             />
-            {blocked && (
-              <>
-                &nbsp;&nbsp;[
-                <span
-                  className={styles.button}
-                  onClick={() => {
-                    unblock();
-                    reset();
-                  }}
-                >
-                  {t('unblock')}
-                </span>
-                ]
-              </>
-            )}
           </div>
         )}
       </div>