feat(settings): add blocked addresses setting

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

@@ -0,0 +1,24 @@
+.setting {
+  margin-left: 10px;
+  margin-bottom: 10px;
+}
+
+.blockedAddresses {
+  padding-top: 5px;
+}
+
+.blockedAddress {
+  padding-top: 5px;
+  margin-left: 20px;
+}
+
+.button {
+  text-transform: capitalize;
+  color: var(--button-desktop-text-color);
+  text-decoration: var(--button-text-decoration);
+}
+
+.button:hover {
+  color: var(--button-desktop-text-color-hover);
+  cursor: pointer;
+}

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

@@ -0,0 +1,51 @@
+import { setAccount, useAccount, useBlock } from '@plebbit/plebbit-react-hooks';
+import Plebbit from '@plebbit/plebbit-js/dist/browser/index.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.button} onClick={unblock}>
+      {t('unblock')}
+    </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 ? (
+        <>
+          [
+          <span className={styles.button} onClick={unblockAll}>
+            {t('unblock_all')}
+          </span>
+          ]
+          <ul className={styles.blockedAddresses}>
+            {addressList.map((address: string) => (
+              <li key={address} className={styles.blockedAddress}>
+                {address && Plebbit.getShortAddress(address)} [<UnblockButton address={address} />]
+              </li>
+            ))}
+          </ul>
+        </>
+      ) : (
+        'You have not blocked any board address or user address.'
+      )}
+    </div>
+  );
+};
+
+export default BlockedAddressesSetting;

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

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

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

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import styles from './settings-modal.module.css';
 import AccountSettings from './account-settings';
+import BlockedAddressesSetting from './blocked-addresses-setting';
 import CryptoAddressSetting from './crypto-address-setting';
 import CryptoWalletsSetting from './crypto-wallets-setting';
 import InterfaceSettings from './interface-settings';
@@ -19,6 +20,7 @@ const SettingsModal = () => {
   const [showAccountSettings, setShowAccountSettings] = useState(false);
   const [showCryptoAddressSetting, setShowCryptoAddressSetting] = useState(false);
   const [showCryptoWalletSettings, setShowCryptoWalletSettings] = useState(false);
+  const [showBlockedAddressesSetting, setShowBlockedAddressesSetting] = useState(false);
   const [expandAll, setExpandAll] = useState(false);
 
   const handleExpandAll = () => {
@@ -28,6 +30,7 @@ const SettingsModal = () => {
     setShowAccountSettings(newExpandState);
     setShowCryptoAddressSetting(newExpandState);
     setShowCryptoWalletSettings(newExpandState);
+    setShowBlockedAddressesSetting(newExpandState);
   };
 
   return (
@@ -69,6 +72,13 @@ const SettingsModal = () => {
           </label>
         </div>
         {showCryptoWalletSettings && <CryptoWalletsSetting />}
+        <div className={`${styles.setting} ${styles.category}`}>
+          <label onClick={() => setShowBlockedAddressesSetting(!showBlockedAddressesSetting)}>
+            <span className={showBlockedAddressesSetting ? styles.hideButton : styles.showButton} />
+            {t('blocked_addresses')}
+          </label>
+        </div>
+        {showBlockedAddressesSetting && <BlockedAddressesSetting />}
       </div>
     </>
   );