SOV-3226: Fix bitocracy alerts button

.changeset/shiny-years-leave.md

@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-3226: Fix bitocracy alerts button

apps/frontend/src/app/2_molecules/ConnectWalletButton/ConnectWalletButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC, PropsWithChildren, useCallback, useState } from 'react';
+import React, { FC, PropsWithChildren, useCallback } from 'react';
 
 import { t } from 'i18next';
 import { nanoid } from 'nanoid';
@@ -12,9 +12,9 @@ import {
   WalletIdentity,
 } from '@sovryn/ui';
 
-import { EmailNotificationSettingsDialog } from '../../3_organisms/EmailNotificationSettingsDialog/EmailNotificationSettingsDialog';
 import { useNotificationContext } from '../../../contexts/NotificationContext';
 import { translations } from '../../../locales/i18n';
+import { sharedState } from '../../../store/rxjs/shared-state';
 
 export type ConnectWalletButtonProps = {
   onConnect: () => void;
@@ -35,7 +35,6 @@ export const ConnectWalletButton: FC<
   className,
   dataAttribute,
 }) => {
-  const [open, setOpen] = useState(false);
   const { addNotification } = useNotificationContext();
 
   const onCopyAddress = useCallback(() => {
@@ -48,6 +47,11 @@ export const ConnectWalletButton: FC<
     });
   }, [addNotification]);
 
+  const handleSettingsClick = useCallback(
+    () => sharedState.actions.openEmailNotificationSettingsDialog(),
+    [],
+  );
+
   if (!address) {
     return (
       <Button
@@ -84,7 +88,7 @@ export const ConnectWalletButton: FC<
               </Link>
               <MenuItem
                 text={t(translations.connectWalletButton.settings)}
-                onClick={() => setOpen(true)}
+                onClick={handleSettingsClick}
                 dataAttribute={`${dataAttribute}-menu-settings`}
               />
             </Menu>
@@ -94,10 +98,6 @@ export const ConnectWalletButton: FC<
             disconnect: t(translations.connectWalletButton.disconnect),
           }}
         />
-        <EmailNotificationSettingsDialog
-          isOpen={open}
-          onClose={() => setOpen(false)}
-        />
       </>
     );
   }

apps/frontend/src/app/3_organisms/SharedStateProvider/SharedStateProvider.tsx

@@ -4,7 +4,9 @@ import { useAccount } from '../../../hooks/useAccount';
 import {
   sharedState,
   FastBtcDialogState,
+  EmailNotificationSettingsDialogState,
 } from '../../../store/rxjs/shared-state';
+import { EmailNotificationSettingsDialog } from '../EmailNotificationSettingsDialog/EmailNotificationSettingsDialog';
 import { FastBtcDialog } from '../FastBtcDialog/FastBtcDialog';
 
 export const SharedStateProvider: React.FC<React.PropsWithChildren> = ({
@@ -16,6 +18,11 @@ export const SharedStateProvider: React.FC<React.PropsWithChildren> = ({
     sharedState.get().fastBtcDialog,
   );
 
+  const [emailNotificationSettingsDialog, setEmailNotificationSettingsDialog] =
+    useState<EmailNotificationSettingsDialogState>(
+      sharedState.get().emailNotificationSettingsDialog,
+    );
+
   useEffect(() => {
     const fastBtcDialogSubscription = sharedState
       .select('fastBtcDialog')
@@ -26,11 +33,26 @@ export const SharedStateProvider: React.FC<React.PropsWithChildren> = ({
     };
   }, []);
 
+  useEffect(() => {
+    const emailNotificationSettingsDialogSubscription = sharedState
+      .select('emailNotificationSettingsDialog')
+      .subscribe(setEmailNotificationSettingsDialog);
+
+    return () => {
+      emailNotificationSettingsDialogSubscription.unsubscribe();
+    };
+  }, []);
+
   const handleFastBtcDialogClose = useCallback(
     () => sharedState.actions.closeFastBtcDialog(),
     [],
   );
 
+  const handleEmailNotificationSettingsDialogClose = useCallback(
+    () => sharedState.actions.closeEmailNotificationSettingsDialog(),
+    [],
+  );
+
   // Close the dialog if there is no wallet connected
   useEffect(() => {
     if (fastBtcDialog.isOpen && !account) {
@@ -47,6 +69,11 @@ export const SharedStateProvider: React.FC<React.PropsWithChildren> = ({
         shouldHideSend={fastBtcDialog.shouldHideSend}
         onClose={handleFastBtcDialogClose}
       />
+
+      <EmailNotificationSettingsDialog
+        isOpen={emailNotificationSettingsDialog.isOpen}
+        onClose={handleEmailNotificationSettingsDialogClose}
+      />
     </>
   );
 };

apps/frontend/src/app/5_pages/BitocracyPage/BitocracyPage.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC, useCallback, useMemo } from 'react';
 
 import { t } from 'i18next';
 import { Helmet } from 'react-helmet-async';
@@ -11,13 +11,14 @@ import {
   ParagraphSize,
 } from '@sovryn/ui';
 
-import { useAccount } from '../../../hooks/useAccount';
 import { ProposalVotingResults } from '../../3_organisms/ProposalVotingResults';
+import { useAccount } from '../../../hooks/useAccount';
 import { translations } from '../../../locales/i18n';
+import { sharedState } from '../../../store/rxjs/shared-state';
+import { Proposal } from '../../../utils/graphql/rsk/generated';
 import { useGetPersonalStakingStatistics } from '../StakePage/components/PersonalStakingStatistics/hooks/useGetPersonalStakingStatistics';
 import { Proposals } from './components/Proposals/Proposals';
 import { useGetProposals } from './hooks/useGetProposals';
-import { Proposal } from '../../../utils/graphql/rsk/generated';
 
 const pageTranslations = translations.bitocracyPage;
 
@@ -47,6 +48,11 @@ const BitocracyPage: FC = () => {
     [votingPower],
   );
 
+  const handleAlertsClick = useCallback(
+    () => sharedState.actions.openEmailNotificationSettingsDialog(),
+    [],
+  );
+
   return (
     <>
       <Helmet>
@@ -69,6 +75,7 @@ const BitocracyPage: FC = () => {
               style={ButtonStyle.ghost}
               text={t(pageTranslations.actions.bitocracyAlerts)}
               className="mb-3 sm:mb-0"
+              onClick={handleAlertsClick}
             />
             {isNewProposalButtonVisible && (
               <div className="bg-gray-90 sm:bg-transparent p-4 pb-8 sm:p-0 border-t sm:border-none border-gray-60 flex items-center justify-center sm:ml-3 sm:relative fixed bottom-0 left-0 right-0 z-10 sm:z-0">

apps/frontend/src/store/rxjs/shared-state.ts

@@ -9,18 +9,26 @@ import {
 
 export type EventDriverState = {
   fastBtcDialog: FastBtcDialogState;
+  emailNotificationSettingsDialog: EmailNotificationSettingsDialogState;
 };
 
 export type FastBtcDialogState = {
   isOpen: boolean;
   shouldHideSend: boolean;
 };
 
+export type EmailNotificationSettingsDialogState = {
+  isOpen: boolean;
+};
+
 const INITIAL_STATE = {
   fastBtcDialog: {
     isOpen: false,
     shouldHideSend: false,
   },
+  emailNotificationSettingsDialog: {
+    isOpen: false,
+  },
 };
 
 const store = new BehaviorSubject<EventDriverState>(INITIAL_STATE);
@@ -74,11 +82,29 @@ const closeFastBtcDialog = () =>
     },
   }));
 
+const openEmailNotificationSettingsDialog = () =>
+  dispatch(state => ({
+    ...state,
+    emailNotificationSettingsDialog: {
+      isOpen: true,
+    },
+  }));
+
+const closeEmailNotificationSettingsDialog = () =>
+  dispatch(state => ({
+    ...state,
+    emailNotificationSettingsDialog: {
+      isOpen: false,
+    },
+  }));
+
 export const sharedState = {
   get,
   select,
   actions: {
     openFastBtcDialog,
     closeFastBtcDialog,
+    openEmailNotificationSettingsDialog,
+    closeEmailNotificationSettingsDialog,
   },
 };