feat(settings): add subscriptions setting

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

@@ -9,6 +9,7 @@ import CryptoAddressSetting from './crypto-address-setting';
 import CryptoWalletsSetting from './crypto-wallets-setting';
 import InterfaceSettings from './interface-settings';
 import PlebbitOptions from './plebbit-options';
+import SubscriptionsSetting from './subscriptions-setting';
 
 const SettingsModal = () => {
   const { t } = useTranslation();
@@ -39,6 +40,7 @@ const SettingsModal = () => {
   const [showAvatarSettings, setShowAvatarSettings] = useState(false);
   const [showCryptoAddressSetting, setShowCryptoAddressSetting] = useState(false);
   const [showCryptoWalletSettings, setShowCryptoWalletSettings] = useState(false);
+  const [showSubscriptionsSettings, setShowSubscriptionsSettings] = useState(false);
   const [showBlockedAddressesSetting, setShowBlockedAddressesSetting] = useState(false);
   const [showPlebbitOptionsSettings, setShowPlebbitOptionsSettings] = useState(false);
   const [expandAll, setExpandAll] = useState(false);
@@ -50,6 +52,7 @@ const SettingsModal = () => {
       Number(showAvatarSettings) +
       Number(showCryptoAddressSetting) +
       Number(showCryptoWalletSettings) +
+      Number(showSubscriptionsSettings) +
       Number(showBlockedAddressesSetting) +
       Number(showPlebbitOptionsSettings)
     );
@@ -61,6 +64,7 @@ const SettingsModal = () => {
     if (showAvatarSettings && 'avatar-settings' !== excludeCategoryId) return 'avatar-settings';
     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 (showPlebbitOptionsSettings && 'plebbit-options-settings' !== excludeCategoryId) return 'plebbit-options-settings';
     return null;
@@ -100,6 +104,7 @@ const SettingsModal = () => {
       setShowAvatarSettings(hash === 'avatar-settings');
       setShowCryptoAddressSetting(hash === 'crypto-address-settings');
       setShowCryptoWalletSettings(hash === 'crypto-wallet-settings');
+      setShowSubscriptionsSettings(hash === 'subscriptions-settings');
       setShowBlockedAddressesSetting(hash === 'blocked-addresses-settings');
       setShowPlebbitOptionsSettings(hash === 'plebbit-options-settings');
     }
@@ -113,6 +118,7 @@ const SettingsModal = () => {
     setShowAvatarSettings(newExpandState);
     setShowCryptoAddressSetting(newExpandState);
     setShowCryptoWalletSettings(newExpandState);
+    setShowSubscriptionsSettings(newExpandState);
     setShowBlockedAddressesSetting(newExpandState);
     setShowPlebbitOptionsSettings(newExpandState);
 
@@ -166,6 +172,13 @@ const SettingsModal = () => {
           </label>
         </div>
         {showCryptoWalletSettings && <CryptoWalletsSetting />}
+        <div id='subscriptions-settings' className={`${styles.setting} ${styles.category}`}>
+          <label onClick={() => handleCategoryClick('subscriptions-settings', showSubscriptionsSettings, setShowSubscriptionsSettings)}>
+            <span className={showSubscriptionsSettings ? styles.hideButton : styles.showButton} />
+            {t('subscriptions')}
+          </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} />

src/components/settings-modal/subscriptions-setting/index.ts

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

src/components/settings-modal/subscriptions-setting/subscriptions-setting.module.css

@@ -0,0 +1,24 @@
+.setting {
+  margin-left: 10px;
+  margin-bottom: 10px;
+}
+
+.subscription {
+  padding-bottom: 5px;
+  margin-left: 20px;
+}
+
+.unsubscribeAll {
+  padding-bottom: 10px;
+}
+
+.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/subscriptions-setting/subscriptions-setting.tsx

@@ -0,0 +1,68 @@
+import { setAccount, useAccount, useSubscribe } from '@plebbit/plebbit-react-hooks';
+import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import styles from './subscriptions-setting.module.css';
+import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
+
+const SubscriptionButton = ({ address }: { address: string }) => {
+  const { t } = useTranslation();
+  const { subscribed, subscribe, unsubscribe } = useSubscribe({ subplebbitAddress: address });
+  const [recentlyUnsubscribed, setRecentlyUnsubscribed] = useState(false);
+
+  const handleClick = () => {
+    if (recentlyUnsubscribed || !subscribed) {
+      subscribe();
+      setRecentlyUnsubscribed(false);
+    } else {
+      unsubscribe();
+      setRecentlyUnsubscribed(true);
+    }
+  };
+
+  return (
+    <span className={styles.button} onClick={handleClick}>
+      {recentlyUnsubscribed || !subscribed ? t('subscribe') : t('unsubscribe')}
+    </span>
+  );
+};
+
+const SubscriptionsSetting = () => {
+  const { t } = useTranslation();
+  const { subscriptions } = useAccount() || [];
+  const account = useAccount();
+
+  const unsubscribeAll = () => {
+    if (window.confirm(t('unsubscribe_all_confirm'))) {
+      setAccount({ ...account, subscriptions: [] });
+    }
+  };
+
+  return (
+    <div className={styles.setting}>
+      {subscriptions?.length > 0 ? (
+        <>
+          {subscriptions?.length > 1 && (
+            <div className={styles.unsubscribeAll}>
+              [
+              <span className={styles.button} onClick={unsubscribeAll}>
+                {t('unsubscribe_all')}
+              </span>
+              ]
+            </div>
+          )}
+          <ul className={styles.subscriptions}>
+            {subscriptions?.map((address: string) => (
+              <li key={address} className={styles.subscription}>
+                {address && Plebbit.getShortAddress(address)} [<SubscriptionButton address={address} />]
+              </li>
+            ))}
+          </ul>
+        </>
+      ) : (
+        t('not_subscribed_to_any_board')
+      )}
+    </div>
+  );
+};
+
+export default SubscriptionsSetting;