fix: move disable whats new modal to object in system info with the v…

…ersion (#312) * fix: move disable whats new modal to object in system info with the version * refactor: amend typos in whats new modal
kibis-is · Sep 17, 2024 · ee3afab · ee3afab
1 parent 73cd259
commit ee3afab
Show file tree

Hide file tree

Showing 17 changed files with 142 additions and 69 deletions.
diff --git a/src/extension/apps/main/Root.tsx b/src/extension/apps/main/Root.tsx
@@ -64,9 +64,8 @@ import WhatsNewModal from '@extension/modals/WhatsNewModal';
 import {
   useSelectAccounts,
   useSelectNotificationsShowingConfetti,
-  useSelectSettings,
   useSelectSettingsSelectedNetwork,
-  useSelectSystemInfo,
+  useSelectSystemWhatsNewInfo,
 } from '@extension/selectors';
 
 // types
@@ -78,8 +77,7 @@ const Root: FC = () => {
   const accounts = useSelectAccounts();
   const network = useSelectSettingsSelectedNetwork();
   const showingConfetti = useSelectNotificationsShowingConfetti();
-  const { general } = useSelectSettings();
-  const systemInfo = useSelectSystemInfo();
+  const whatsNewInfo = useSelectSystemWhatsNewInfo();
   // handlers
   const handleAddAssetsModalClose = () => dispatch(resetAddAsset());
   const handleConfirmClose = () => dispatch(setConfirmModal(null));
@@ -125,17 +123,16 @@ const Root: FC = () => {
       dispatch(updateTransactionParamsForSelectedNetworkThunk());
     }
   }, [network]);
-  // if the saved what's new version is null or less than the current version (and the update message is not disabled in the settings), display the modal
+  // if the saved what's new version is null or less than the current version (and the update message is not disabled), display the modal
   useEffect(() => {
     if (
-      systemInfo &&
-      !general.disableWhatsNewModalOnUpdate &&
-      (!systemInfo.whatsNewVersion ||
-        systemInfo.whatsNewVersion !== __VERSION__)
+      whatsNewInfo &&
+      !whatsNewInfo.disableOnUpdate &&
+      (!whatsNewInfo.version || whatsNewInfo.version !== __VERSION__)
     ) {
       dispatch(setWhatsNewModal(true));
     }
-  }, [systemInfo]);
+  }, [whatsNewInfo]);
   useOnDebugLogging();
   useOnNewAssets(); // handle new assets added
   useNotifications(); // handle notifications

diff --git a/src/extension/features/system/enums/ThunkEnum.ts b/src/extension/features/system/enums/ThunkEnum.ts
@@ -1,5 +1,6 @@
 enum ThunkEnum {
   FetchFromStorage = 'system/fetchFromStorage',
+  SaveDisableWhatsNewOnUpdate = 'system/saveDisableWhatsNewOnUpdate',
   SaveWhatsNewVersion = 'system/saveWhatsNewVersion',
   StartPollingForNetworkConnectivity = 'networks/startPollingForNetworkConnectivity',
   StopPollingForNetworkConnectivity = 'networks/stopPollingForNetworkConnectivity',

diff --git a/src/extension/features/system/slice.ts b/src/extension/features/system/slice.ts
@@ -6,6 +6,7 @@ import { StoreNameEnum } from '@extension/enums';
 // thunks
 import {
   fetchFromStorageThunk,
+  saveDisableWhatsNewOnUpdateThunk,
   saveWhatsNewVersionThunk,
   startPollingForNetworkConnectivityThunk,
   stopPollingForTransactionsParamsThunk,
@@ -29,14 +30,32 @@ const slice = createSlice({
         state.info = action.payload;
       }
     );
+    /** save disable what's on update **/
+    builder.addCase(
+      saveDisableWhatsNewOnUpdateThunk.fulfilled,
+      (state: IState, action: PayloadAction<boolean>) => {
+        if (state.info) {
+          state.info = {
+            ...state.info,
+            whatsNewInfo: {
+              ...state.info.whatsNewInfo,
+              disableOnUpdate: action.payload,
+            },
+          };
+        }
+      }
+    );
     /** save what's new version **/
     builder.addCase(
       saveWhatsNewVersionThunk.fulfilled,
       (state: IState, action: PayloadAction<string | null>) => {
         if (state.info) {
           state.info = {
             ...state.info,
-            whatsNewVersion: action.payload,
+            whatsNewInfo: {
+              ...state.info.whatsNewInfo,
+              version: action.payload,
+            },
           };
         }
       }

diff --git a/src/extension/features/system/thunks/index.ts b/src/extension/features/system/thunks/index.ts
@@ -1,4 +1,5 @@
 export { default as fetchFromStorageThunk } from './fetchFromStorageThunk';
+export { default as saveDisableWhatsNewOnUpdateThunk } from './saveDisableWhatsNewOnUpdateThunk';
 export { default as saveWhatsNewVersionThunk } from './saveWhatsNewVersionThunk';
 export { default as startPollingForNetworkConnectivityThunk } from './startPollingForNetworkConnectivityThunk';
 export { default as stopPollingForTransactionsParamsThunk } from './stopPollingForTransactionsParamsThunk';

diff --git a/src/extension/features/system/thunks/saveDisableWhatsNewOnUpdateThunk.ts b/src/extension/features/system/thunks/saveDisableWhatsNewOnUpdateThunk.ts
@@ -0,0 +1,46 @@
+import { AsyncThunk, createAsyncThunk } from '@reduxjs/toolkit';
+
+// enums
+import { ThunkEnum } from '../enums';
+
+// services
+import SystemService from '@extension/services/SystemService';
+
+// types
+import type { IBaseAsyncThunkConfig, IMainRootState } from '@extension/types';
+import { MalformedDataError } from '@extension/errors';
+
+const saveDisableWhatsNewOnUpdateThunk: AsyncThunk<
+  boolean, // return
+  boolean, // args
+  IBaseAsyncThunkConfig<IMainRootState>
+> = createAsyncThunk<boolean, boolean, IBaseAsyncThunkConfig<IMainRootState>>(
+  ThunkEnum.SaveDisableWhatsNewOnUpdate,
+  async (value, { getState, rejectWithValue }) => {
+    const logger = getState().system.logger;
+    const systemInfo = getState().system.info;
+    let _error: string;
+
+    if (!systemInfo) {
+      _error = 'system info not found';
+
+      logger.debug(`${ThunkEnum.SaveDisableWhatsNewOnUpdate}: ${_error}`);
+
+      return rejectWithValue(new MalformedDataError(_error));
+    }
+
+    const { whatsNewInfo } = await new SystemService({
+      logger,
+    }).saveToStorage({
+      ...systemInfo,
+      whatsNewInfo: {
+        ...systemInfo.whatsNewInfo,
+        disableOnUpdate: value,
+      },
+    });
+
+    return whatsNewInfo.disableOnUpdate;
+  }
+);
+
+export default saveDisableWhatsNewOnUpdateThunk;
diff --git a/src/extension/features/system/thunks/saveWhatsNewVersionThunk.ts b/src/extension/features/system/thunks/saveWhatsNewVersionThunk.ts
@@ -33,14 +33,17 @@ const saveWhatsNewVersionThunk: AsyncThunk<
       return rejectWithValue(new MalformedDataError(_error));
     }
 
-    const { whatsNewVersion } = await new SystemService({
+    const { whatsNewInfo } = await new SystemService({
       logger,
     }).saveToStorage({
       ...systemInfo,
-      whatsNewVersion: version,
+      whatsNewInfo: {
+        ...systemInfo.whatsNewInfo,
+        version,
+      },
     });
 
-    return whatsNewVersion;
+    return whatsNewInfo.version;
   }
 );
 

diff --git a/src/extension/modals/WhatsNewModal/WhatsNewModal.tsx b/src/extension/modals/WhatsNewModal/WhatsNewModal.tsx
@@ -24,8 +24,10 @@ import Link from '@extension/components/Link';
 import { BODY_BACKGROUND_COLOR, DEFAULT_GAP } from '@extension/constants';
 
 // features
-import { saveToStorageThunk as saveSettingsToStorageThunk } from '@extension/features/settings';
-import { saveWhatsNewVersionThunk } from '@extension/features/system';
+import {
+  saveDisableWhatsNewOnUpdateThunk,
+  saveWhatsNewVersionThunk,
+} from '@extension/features/system';
 
 // hooks
 import useDefaultTextColor from '@extension/hooks/useDefaultTextColor';
@@ -35,8 +37,8 @@ import useSubTextColor from '@extension/hooks/useSubTextColor';
 
 // selectors
 import {
-  useSelectSettings,
   useSelectWhatsNewModal,
+  useSelectSystemWhatsNewInfo,
 } from '@extension/selectors';
 
 // theme
@@ -54,8 +56,8 @@ const WhatsNewModal: FC<IModalProps> = ({ onClose }) => {
   const dispatch = useDispatch<IAppThunkDispatch<IMainRootState>>();
   const initialRef = createRef<HTMLButtonElement>();
   // selectors
-  const settings = useSelectSettings();
   const whatsNewModalOpen = useSelectWhatsNewModal();
+  const whatsNewInfo = useSelectSystemWhatsNewInfo();
   // hooks
   const defaultTextColor = useDefaultTextColor();
   const primaryColor = usePrimaryColor();
@@ -70,16 +72,13 @@ const WhatsNewModal: FC<IModalProps> = ({ onClose }) => {
   };
   const handleOnDisableOnUpdateChange = (
     event: ChangeEvent<HTMLInputElement>
-  ) =>
-    dispatch(
-      saveSettingsToStorageThunk({
-        ...settings,
-        general: {
-          ...settings.general,
-          disableWhatsNewModalOnUpdate: event.target.checked,
-        },
-      })
-    );
+  ) => {
+    if (!whatsNewInfo) {
+      return;
+    }
+
+    dispatch(saveDisableWhatsNewOnUpdateThunk(!whatsNewInfo.disableOnUpdate));
+  };
 
   return (
     <Modal
@@ -99,7 +98,7 @@ const WhatsNewModal: FC<IModalProps> = ({ onClose }) => {
       >
         <ModalHeader justifyContent="center" px={DEFAULT_GAP}>
           <Heading color={defaultTextColor} fontSize="lg" textAlign="center">
-            {`What's New In Kibisis v2.0.0`}
+            {`What's New In Kibisis v${__VERSION__}`}
           </Heading>
         </ModalHeader>
 
@@ -138,7 +137,7 @@ const WhatsNewModal: FC<IModalProps> = ({ onClose }) => {
               >
                 12th September 2024
               </Link>{' '}
-              which means Voi has officially launched on MainNet!
+              which means Voi has officially launched its MainNet!
             </Text>
 
             <Text
@@ -147,10 +146,10 @@ const WhatsNewModal: FC<IModalProps> = ({ onClose }) => {
               textAlign="left"
               w="full"
             >
-              This truly has been a community effort, from the builders, the
+              This truly has been a community effort; from the builders, the
               node runners to the questers. Voi's TestNet has been a monumental
               success and Voi has a solid foundation that makes it an ecosystem
-              that is run by you, the Voiagers.
+              that is run by you: the Voiagers.
             </Text>
 
             <Heading
@@ -159,7 +158,7 @@ const WhatsNewModal: FC<IModalProps> = ({ onClose }) => {
               textAlign="left"
               w="full"
             >
-              MainNet Rollout: Staking Program
+              Voi MainNet Rollout: Staking Program
             </Heading>
 
             <Text
@@ -168,7 +167,7 @@ const WhatsNewModal: FC<IModalProps> = ({ onClose }) => {
               textAlign="left"
               w="full"
             >
-              With the Voi's MainNet rollout, there is a new incentive for early
+              With Voi's MainNet rollout, there is a new incentive for early
               participation: the <strong>Staking Program</strong>.
             </Text>
 
@@ -373,20 +372,22 @@ const WhatsNewModal: FC<IModalProps> = ({ onClose }) => {
 
         <ModalFooter p={DEFAULT_GAP}>
           <VStack alignItems="flex-start" spacing={DEFAULT_GAP - 2} w="full">
-            <Checkbox
-              colorScheme={primaryColorScheme}
-              isChecked={settings.general.disableWhatsNewModalOnUpdate}
-              onChange={handleOnDisableOnUpdateChange}
-            >
-              <Text
-                color={subTextColor}
-                fontSize="xs"
-                textAlign="left"
-                w="full"
+            {whatsNewInfo && (
+              <Checkbox
+                colorScheme={primaryColorScheme}
+                isChecked={whatsNewInfo.disableOnUpdate}
+                onChange={handleOnDisableOnUpdateChange}
               >
-                {t<string>('captions.disableWhatsNewMessageOnUpdate')}
-              </Text>
-            </Checkbox>
+                <Text
+                  color={subTextColor}
+                  fontSize="xs"
+                  textAlign="left"
+                  w="full"
+                >
+                  {t<string>('captions.disableWhatsNewMessageOnUpdate')}
+                </Text>
+              </Checkbox>
+            )}
 
             {/*ok*/}
             <Button

diff --git a/src/extension/pages/GeneralSettingsPage/GeneralSettingsPage.tsx b/src/extension/pages/GeneralSettingsPage/GeneralSettingsPage.tsx
@@ -140,18 +140,6 @@ const GeneralSettingsPage: FC = () => {
 
       {/*content*/}
       <VStack spacing={DEFAULT_GAP - 2} w="full">
-        {/*start-up*/}
-        <VStack w="full">
-          <SettingsSubHeading text={t<string>('headings.startUp')} />
-
-          <SettingsSwitchItem
-            checked={settings.general.disableWhatsNewModalOnUpdate}
-            description={t<string>('captions.disableWhatsNewModalOnUpdate')}
-            label={t<string>('labels.disableWhatsNewModalOnUpdate')}
-            onChange={handleOnSwitchChange('disableWhatsNewModalOnUpdate')}
-          />
-        </VStack>
-
         {/* network */}
         <VStack w="full">
           <SettingsSubHeading text={t<string>('headings.network')} />

diff --git a/src/extension/selectors/system/index.ts b/src/extension/selectors/system/index.ts
@@ -1,3 +1,4 @@
 export { default as useSelectIsOnline } from './useSelectIsOnline';
 export { default as useSelectLogger } from './useSelectLogger';
 export { default as useSelectSystemInfo } from './useSelectSystemInfo';
+export { default as useSelectSystemWhatsNewInfo } from './useSelectSystemWhatsNewInfo';
diff --git a/src/extension/selectors/system/useSelectSystemWhatsNewInfo.ts b/src/extension/selectors/system/useSelectSystemWhatsNewInfo.ts
@@ -0,0 +1,10 @@
+import { useSelector } from 'react-redux';
+
+// types
+import type { IBaseRootState, IWhatsNewInfo } from '@extension/types';
+
+export default function useSelectSystemWhatsNewInfo(): IWhatsNewInfo | null {
+  return useSelector<IBaseRootState, IWhatsNewInfo | null>(
+    (state) => state.system.info?.whatsNewInfo || null
+  );
+}
diff --git a/src/extension/services/SettingsService/SettingsService.ts b/src/extension/services/SettingsService/SettingsService.ts
@@ -47,7 +47,6 @@ export default class SettingsService extends BaseService {
         theme: 'light',
       },
       general: {
-        disableWhatsNewModalOnUpdate: false,
         preferredBlockExplorerIds: {},
         preferredNFTExplorerIds: {},
         selectedNetworkGenesisHash: genesisHash,
@@ -92,7 +91,6 @@ export default class SettingsService extends BaseService {
         theme: appearance.theme,
       },
       general: {
-        disableWhatsNewModalOnUpdate: general.disableWhatsNewModalOnUpdate,
         preferredBlockExplorerIds: general.preferredBlockExplorerIds,
         preferredNFTExplorerIds: general.preferredNFTExplorerIds,
         selectedNetworkGenesisHash: general.selectedNetworkGenesisHash,

diff --git a/src/extension/services/SystemService/SystemService.ts b/src/extension/services/SystemService/SystemService.ts
@@ -18,7 +18,10 @@ export default class SystemService extends BaseService {
   public static initializeDefaultSystem(): ISystemInfo {
     return {
       deviceID: uuid(),
-      whatsNewVersion: null,
+      whatsNewInfo: {
+        disableOnUpdate: false,
+        version: null,
+      },
     };
   }
 
@@ -29,7 +32,7 @@ export default class SystemService extends BaseService {
   private _sanitize(item: ISystemInfo): ISystemInfo {
     return {
       deviceID: item.deviceID || null,
-      whatsNewVersion: item.whatsNewVersion || null,
+      whatsNewInfo: item.whatsNewInfo,
     };
   }