Added new UI for notification settings page

src/blocks/icons/components/Pencil.tsx

@@ -0,0 +1,40 @@
+import { FC } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import { IconProps } from '../Icons.types';
+
+const Pencil: FC<IconProps> = (allProps) => {
+  const { svgProps: props, ...restProps } = allProps;
+  return (
+    <IconWrapper
+      componentName="Pencil"
+      icon={
+        <svg
+          width="inherit"
+          height="inherit"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          {...props}
+        >
+          <path
+            d="M8.47489 20.25H4.46739C4.27712 20.25 4.09465 20.1744 3.96012 20.0399C3.82558 19.9053 3.75 19.7229 3.75 19.5326V15.5251C3.75009 15.3351 3.82555 15.1529 3.95984 15.0185L15.0183 3.95995C15.1529 3.82552 15.3353 3.75 15.5254 3.75C15.7156 3.75 15.898 3.82552 16.0325 3.95995L20.04 7.96476C20.1745 8.09928 20.25 8.28168 20.25 8.47186C20.25 8.66204 20.1745 8.84444 20.04 8.97896L8.98154 20.0402C8.84711 20.1744 8.66489 20.2499 8.47489 20.25Z"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M12.3589 6.61963L17.3806 11.6413"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      }
+      {...restProps}
+    />
+  );
+};
+
+export default Pencil;

src/blocks/icons/index.ts

@@ -98,6 +98,8 @@ export { default as NotificationMobile } from './components/NotificationMobile';
 
 export { default as OptOut } from './components/OptOut';
 
+export { default as Pencil } from './components/Pencil';
+
 export { default as PlusCircle } from './components/PlusCircle';
 export { default as PlusCircleFilled } from './components/PlusCircleFilled';
 

src/blocks/textInput/TextInput.tsx

@@ -9,7 +9,7 @@ export type TextInputProps = {
   disabled?: boolean;
   icon?: ReactNode;
   error?: boolean;
-  type?: 'text' | 'password';
+  type?: 'text' | 'password' | 'number';
   errorMessage?: string;
   label?: string;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -18,7 +18,7 @@ export type TextInputProps = {
   required?: boolean;
   success?: boolean;
   totalCount?: number;
-  value: string;
+  value: string | number;
 };
 
 const Container = styled.div<{ css?: FlattenSimpleInterpolation }>`
@@ -168,7 +168,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
                 color={disabled ? 'components-inputs-text-disabled' : 'components-inputs-text-secondary'}
                 variant="c-regular"
               >
-                {`${value?.length || 0} / ${totalCount}`}
+                {`${typeof value === 'string' && value?.length || 0} / ${totalCount}`}
               </InputText>
             )}
           </LabelContainer>

src/common/Common.types.ts

@@ -0,0 +1,5 @@
+export type ModalResponse = {
+  isOpen: boolean;
+  onClose: () => void;
+  open: () => void;
+};

src/common/hooks/index.ts

@@ -1,2 +1,3 @@
 export { useIsVisible } from './useIsVisible';
 export { usePushStakingStats } from './usePushStakingStats';
+export { useModal } from './useModal';

src/common/hooks/useModal.ts

@@ -0,0 +1,17 @@
+import { ModalResponse } from 'common/common.types';
+import { useState, useCallback } from 'react';
+
+const useModal = (): ModalResponse => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const open = useCallback(() => setIsOpen(true), []);
+  const onClose = useCallback(() => setIsOpen(false), []);
+
+  return {
+    isOpen,
+    onClose,
+    open,
+  };
+};
+
+export { useModal };

src/common/index.ts

@@ -3,3 +3,4 @@ export * from './components';
 export * from './Common.constants';
 export * from './Common.utils';
 export * from './Common.form';
+export * from './common.types';

src/modules/channelDashboard/ChannelDashboard.types.ts

@@ -1,18 +1,18 @@
 export type ChannelSetting = {
-  type: 1 | 2 | 3;
+  type: number;
   default:
     | boolean
     | number
     | {
         lower: number;
         upper: number;
       };
-  enabled: boolean;
+  enabled?: boolean;
   description: string;
-  index: number;
-  lowerLimit: number;
-  upperLimit: number;
-  ticker: number;
+  index?: number;
+  lowerLimit?: number;
+  upperLimit?: number;
+  ticker?: number;
 };
 
 export type DashboardActiveState =

src/modules/channelDashboard/components/ChannelDashboardNullState.tsx

@@ -1,6 +1,6 @@
-import { Box, Button, CrownSimple, ReceiveNotification, Text } from "blocks";
-import { FC } from "react";
+import { FC } from 'react';
 
+import { Box, Button, CrownSimple, ReceiveNotification, Text } from 'blocks';
 
 type ChannelDashboardNullStateProps = {
   state: 'notificationSettings' | 'delegatee';
@@ -9,12 +9,7 @@ type ChannelDashboardNullStateProps = {
   onClick?: any;
 };
 
-const ChannelDashboardNullState: FC<ChannelDashboardNullStateProps> = ({
-  state,
-  title,
-  subTitle,
-  onClick
-}) => {
+const ChannelDashboardNullState: FC<ChannelDashboardNullStateProps> = ({ state, title, subTitle, onClick }) => {
   return (
     <Box
       display="flex"
@@ -24,26 +19,52 @@ const ChannelDashboardNullState: FC<ChannelDashboardNullStateProps> = ({
       gap="spacing-sm"
       height="200px"
     >
-      {state == 'delegatee' && <CrownSimple size={48} color="icon-tertiary" />}
-      {state == 'notificationSettings' && <ReceiveNotification size={48} color="icon-tertiary" />}
+      {state == 'delegatee' && (
+        <CrownSimple
+          size={48}
+          color="icon-tertiary"
+        />
+      )}
+      {state == 'notificationSettings' && (
+        <ReceiveNotification
+          size={48}
+          color="icon-tertiary"
+        />
+      )}
 
-      <Box display="flex" flexDirection="column" alignItems="center">
-        <Text textAlign="center" variant="h6-semibold" color="text-secondary">
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+      >
+        <Text
+          textAlign="center"
+          variant="h6-semibold"
+          color="text-secondary"
+        >
           {title}
         </Text>
 
-        <Text textAlign="center" variant="bes-regular" color="text-tertiary">
+        <Text
+          textAlign="center"
+          variant="bes-regular"
+          color="text-tertiary"
+        >
           {subTitle}
         </Text>
       </Box>
 
       {onClick && (
-        <Button variant="primary" size="small" onClick={onClick}>
+        <Button
+          variant="primary"
+          size="small"
+          onClick={onClick}
+        >
           Add Setting
         </Button>
       )}
     </Box>
   );
 };
 
-export { ChannelDashboardNullState };
+export { ChannelDashboardNullState };

src/modules/notifSettings/EditNotificationSetting.form.tsx

@@ -0,0 +1,51 @@
+import { FC } from 'react';
+
+import { FormikProvider, useFormik, useFormikContext } from 'formik';
+
+import { ChannelSetting } from 'modules/channelDashboard/ChannelDashboard.types';
+
+type EditNotificationSettingsFormProviderProps = {
+  children: React.ReactNode;
+  initialValue: ChannelSetting;
+  onSubmit: (values: NotificationSettingFormValues) => void;
+};
+
+export const getFormInitialValus = (initialValue: ChannelSetting): NotificationSettingFormValues => {
+  return {
+    settingName: initialValue.description,
+    isDefault:
+      initialValue.type === 1 ? (typeof initialValue.default === 'boolean' ? true : false) : initialValue.enabled!,
+    enableRange: initialValue.type !== 1 ? true : false,
+    rangelowerlimit: initialValue.lowerLimit ? initialValue.lowerLimit : 0,
+    rangeupperlimit: initialValue.upperLimit ? initialValue.upperLimit : 0,
+    enableMultiRange: initialValue.type === 3 ? true : false,
+    defaultValue: typeof initialValue.default === 'number' ? initialValue.default : 0,
+    multirangelowerlimit: typeof initialValue.default === 'object' ? initialValue.default.lower : 0,
+    multirangeupperlimit: typeof initialValue.default === 'object' ? initialValue.default.upper : 0,
+    sliderStepValue: initialValue.ticker ? initialValue.ticker : 0,
+  };
+};
+
+const EditNotificationSettingsFormProvider: FC<EditNotificationSettingsFormProviderProps> = ({
+  children,
+  initialValue,
+  onSubmit,
+}) => {
+  const addNotificationSettingsForm = useFormik<NotificationSettingFormValues>({
+    initialValues: getFormInitialValus(initialValue),
+    onSubmit: onSubmit,
+  });
+
+  return <FormikProvider value={addNotificationSettingsForm}>{children}</FormikProvider>;
+};
+
+const useEditNotificationSettingsForm = () => {
+  const context = useFormikContext<NotificationSettingFormValues>();
+
+  if (!context) {
+    throw new Error('useEditNotificationSettingsForm must be used within a EditNotificationSettingsFormProvider');
+  }
+  return context;
+};
+
+export { useEditNotificationSettingsForm, EditNotificationSettingsFormProvider };

src/modules/notifSettings/NotificationSettings.constants.ts

@@ -0,0 +1,6 @@
+export const settingInitialValue = {
+  type: 1,
+  default: 0,
+  description: '',
+  index: 0,
+};

src/modules/notifSettings/NotificationSettings.tsx

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+
+import { Box } from 'blocks';
+
+import { useModal } from 'common';
+
+import { useAccount } from 'hooks';
+
+import { useGetChannelDetails } from 'queries';
+
+import { NotificationSettingsHeader } from './components/NotificationSettingsHeader';
+import { NotificationSettingsBody } from './components/NotificationSettingsBody';
+import { ChannelSetting } from 'modules/channelDashboard/ChannelDashboard.types';
+import { settingInitialValue } from './NotificationSettings.constants';
+
+const NotificationSettings = () => {
+  const { account } = useAccount();
+
+  const { data: channelDetails, isLoading: loadingChannelDetails } = useGetChannelDetails(account);
+  const channelSettings = channelDetails?.channel_settings ? channelDetails?.channel_settings : '';
+
+  const modifiedChannelSettings = loadingChannelDetails
+    ? Array(3).fill(0)
+    : channelSettings
+    ? JSON.parse(channelSettings)
+    : [];
+
+  const modalControl = useModal();
+
+  const [settingsToEdit, setSettingsToEdit] = useState<ChannelSetting>(settingInitialValue);
+
+  return (
+    <Box
+      display="flex"
+      padding={{ initial: 'spacing-lg', ml: 'spacing-md' }}
+      flexDirection="column"
+      gap="spacing-md"
+      width={{ ml: '357px', initial: '800px' }}
+      alignItems="center"
+      borderRadius="radius-md"
+      backgroundColor="surface-primary"
+    >
+      <NotificationSettingsHeader
+        modalControl={modalControl}
+        setSettingsToEdit={setSettingsToEdit}
+      />
+
+      <NotificationSettingsBody
+        modalControl={modalControl}
+        settingsToEdit={settingsToEdit}
+        setSettingsToEdit={setSettingsToEdit}
+        channelSettings={modifiedChannelSettings}
+        loadingSettings={loadingChannelDetails}
+      />
+    </Box>
+  );
+};
+
+export { NotificationSettings };

src/modules/notifSettings/NotificationSettings.types.ts

@@ -0,0 +1,35 @@
+type NotificationSettingFormValues = {
+  settingName: string;
+  isDefault: boolean;
+  enableRange: boolean;
+  rangelowerlimit: number;
+  rangeupperlimit: number;
+  enableMultiRange: boolean;
+  defaultValue: number;
+  multirangelowerlimit: number;
+  multirangeupperlimit: number;
+  sliderStepValue: number;
+};
+
+type NotificationSettings = {
+  type: number;
+  default:
+    | boolean
+    | number
+    | {
+        lower: number;
+        upper: number;
+      };
+  enabled?: boolean;
+  description: string;
+  index?: number;
+  lowerLimit?: number;
+  upperLimit?: number;
+  ticker?: number;
+};
+
+type NotificationSettingModal = {
+  isOpen: boolean;
+  onClose: () => void;
+  open: () => void;
+};