diff --git a/src/components/settings-modal/blocked-addresses-setting/blocked-addresses-setting.module.css b/src/components/settings-modal/blocked-addresses-setting/blocked-addresses-setting.module.css
new file mode 100644
index 00000000..6b3897ad
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/settings-modal/blocked-addresses-setting/blocked-addresses-setting.tsx b/src/components/settings-modal/blocked-addresses-setting/blocked-addresses-setting.tsx
new file mode 100644
index 00000000..79cac507
--- /dev/null
+++ b/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 (
+
+ {t('unblock')}
+
+ );
+};
+
+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 (
+
+ {addressList.length > 0 ? (
+ <>
+ [
+
+ {t('unblock_all')}
+
+ ]
+
+ {addressList.map((address: string) => (
+ -
+ {address && Plebbit.getShortAddress(address)} []
+
+ ))}
+
+ >
+ ) : (
+ 'You have not blocked any board address or user address.'
+ )}
+
+ );
+};
+
+export default BlockedAddressesSetting;
diff --git a/src/components/settings-modal/blocked-addresses-setting/index.ts b/src/components/settings-modal/blocked-addresses-setting/index.ts
new file mode 100644
index 00000000..86a48128
--- /dev/null
+++ b/src/components/settings-modal/blocked-addresses-setting/index.ts
@@ -0,0 +1 @@
+export { default } from './blocked-addresses-setting';
diff --git a/src/components/settings-modal/settings-modal.tsx b/src/components/settings-modal/settings-modal.tsx
index 1fa0f473..bf07379c 100644
--- a/src/components/settings-modal/settings-modal.tsx
+++ b/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 = () => {
{showCryptoWalletSettings && }
+
+
+
+ {showBlockedAddressesSetting && }
>
);