feat(settings): add subscriptions setting

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;