From 8c2628c9c54541b83618889d4be12ddf701cfacc Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Fri, 23 Aug 2024 05:03:46 +0530 Subject: [PATCH 1/2] Added new UI for notification settings page --- src/blocks/icons/components/Pencil.tsx | 40 +++ src/blocks/icons/index.ts | 2 + src/blocks/textInput/TextInput.tsx | 6 +- src/common/Common.types.ts | 5 + src/common/hooks/index.ts | 1 + src/common/hooks/useModal.ts | 17 ++ src/common/index.ts | 1 + .../ChannelDashboard.types.ts | 12 +- .../components/ChannelDashboardNullState.tsx | 51 ++-- .../EditNotificationSetting.form.tsx | 51 ++++ .../NotificationSettings.constants.ts | 6 + .../notifSettings/NotificationSettings.tsx | 59 +++++ .../NotificationSettings.types.ts | 35 +++ .../AddNotificationSettingsModalContent.tsx | 131 ++++++++++ .../components/NotificationSettingsBody.tsx | 93 +++++++ .../components/NotificationSettingsFooter.tsx | 226 +++++++++++++++++ .../components/NotificationSettingsHeader.tsx | 53 ++++ .../NotificationSettingsListItem.tsx | 85 +++++++ .../components/NotificationSettingsLists.tsx | 53 ++++ .../components/NotificationSettingsModal.tsx | 84 +++++++ .../NotificationSettingsRangeSelector.tsx | 227 ++++++++++++++++++ src/pages/NotificationSettingsPage.tsx | 12 + src/queries/hooks/index.ts | 1 + .../hooks/notificationSettings/index.ts | 1 + .../useCreateNotificationSettings.ts | 9 + src/queries/queryKeys.ts | 1 + src/queries/services/index.ts | 1 + .../addNotificationSettings.ts | 8 + .../services/notificationSettings/index.ts | 1 + src/queries/types/index.ts | 1 + src/queries/types/notificationsettings.ts | 6 + src/structure/MasterInterfacePage.tsx | 7 +- 32 files changed, 1261 insertions(+), 25 deletions(-) create mode 100644 src/blocks/icons/components/Pencil.tsx create mode 100644 src/common/Common.types.ts create mode 100644 src/common/hooks/useModal.ts create mode 100644 src/modules/notifSettings/EditNotificationSetting.form.tsx create mode 100644 src/modules/notifSettings/NotificationSettings.constants.ts create mode 100644 src/modules/notifSettings/NotificationSettings.tsx create mode 100644 src/modules/notifSettings/NotificationSettings.types.ts create mode 100644 src/modules/notifSettings/components/AddNotificationSettingsModalContent.tsx create mode 100644 src/modules/notifSettings/components/NotificationSettingsBody.tsx create mode 100644 src/modules/notifSettings/components/NotificationSettingsFooter.tsx create mode 100644 src/modules/notifSettings/components/NotificationSettingsHeader.tsx create mode 100644 src/modules/notifSettings/components/NotificationSettingsListItem.tsx create mode 100644 src/modules/notifSettings/components/NotificationSettingsLists.tsx create mode 100644 src/modules/notifSettings/components/NotificationSettingsModal.tsx create mode 100644 src/modules/notifSettings/components/NotificationSettingsRangeSelector.tsx create mode 100644 src/pages/NotificationSettingsPage.tsx create mode 100644 src/queries/hooks/notificationSettings/index.ts create mode 100644 src/queries/hooks/notificationSettings/useCreateNotificationSettings.ts create mode 100644 src/queries/services/notificationSettings/addNotificationSettings.ts create mode 100644 src/queries/services/notificationSettings/index.ts create mode 100644 src/queries/types/notificationsettings.ts diff --git a/src/blocks/icons/components/Pencil.tsx b/src/blocks/icons/components/Pencil.tsx new file mode 100644 index 0000000000..a7b5235380 --- /dev/null +++ b/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 = (allProps) => { + const { svgProps: props, ...restProps } = allProps; + return ( + + + + + } + {...restProps} + /> + ); +}; + +export default Pencil; diff --git a/src/blocks/icons/index.ts b/src/blocks/icons/index.ts index dfc0a4bb33..eaa4e47ac8 100644 --- a/src/blocks/icons/index.ts +++ b/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'; diff --git a/src/blocks/textInput/TextInput.tsx b/src/blocks/textInput/TextInput.tsx index 5d2502a1f5..44dadc24d8 100644 --- a/src/blocks/textInput/TextInput.tsx +++ b/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) => 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( color={disabled ? 'components-inputs-text-disabled' : 'components-inputs-text-secondary'} variant="c-regular" > - {`${value?.length || 0} / ${totalCount}`} + {`${typeof value === 'string' && value?.length || 0} / ${totalCount}`} )} diff --git a/src/common/Common.types.ts b/src/common/Common.types.ts new file mode 100644 index 0000000000..931d784879 --- /dev/null +++ b/src/common/Common.types.ts @@ -0,0 +1,5 @@ +export type ModalResponse = { + isOpen: boolean; + onClose: () => void; + open: () => void; +}; diff --git a/src/common/hooks/index.ts b/src/common/hooks/index.ts index 871bdf7d48..5a4af72059 100644 --- a/src/common/hooks/index.ts +++ b/src/common/hooks/index.ts @@ -1,2 +1,3 @@ export { useIsVisible } from './useIsVisible'; export { usePushStakingStats } from './usePushStakingStats'; +export { useModal } from './useModal'; diff --git a/src/common/hooks/useModal.ts b/src/common/hooks/useModal.ts new file mode 100644 index 0000000000..40241e82ff --- /dev/null +++ b/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 }; diff --git a/src/common/index.ts b/src/common/index.ts index 43949e8236..9cf1a3126b 100644 --- a/src/common/index.ts +++ b/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'; diff --git a/src/modules/channelDashboard/ChannelDashboard.types.ts b/src/modules/channelDashboard/ChannelDashboard.types.ts index 67efdee8f4..38cbf5de9d 100644 --- a/src/modules/channelDashboard/ChannelDashboard.types.ts +++ b/src/modules/channelDashboard/ChannelDashboard.types.ts @@ -1,5 +1,5 @@ export type ChannelSetting = { - type: 1 | 2 | 3; + type: number; default: | boolean | number @@ -7,12 +7,12 @@ export type ChannelSetting = { 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 = diff --git a/src/modules/channelDashboard/components/ChannelDashboardNullState.tsx b/src/modules/channelDashboard/components/ChannelDashboardNullState.tsx index 75072a9193..e059c43667 100644 --- a/src/modules/channelDashboard/components/ChannelDashboardNullState.tsx +++ b/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 = ({ - state, - title, - subTitle, - onClick -}) => { +const ChannelDashboardNullState: FC = ({ state, title, subTitle, onClick }) => { return ( = ({ gap="spacing-sm" height="200px" > - {state == 'delegatee' && } - {state == 'notificationSettings' && } + {state == 'delegatee' && ( + + )} + {state == 'notificationSettings' && ( + + )} - - + + {title} - + {subTitle} {onClick && ( - )} @@ -46,4 +67,4 @@ const ChannelDashboardNullState: FC = ({ ); }; -export { ChannelDashboardNullState }; \ No newline at end of file +export { ChannelDashboardNullState }; diff --git a/src/modules/notifSettings/EditNotificationSetting.form.tsx b/src/modules/notifSettings/EditNotificationSetting.form.tsx new file mode 100644 index 0000000000..dd5f2eabf4 --- /dev/null +++ b/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 = ({ + children, + initialValue, + onSubmit, +}) => { + const addNotificationSettingsForm = useFormik({ + initialValues: getFormInitialValus(initialValue), + onSubmit: onSubmit, + }); + + return {children}; +}; + +const useEditNotificationSettingsForm = () => { + const context = useFormikContext(); + + if (!context) { + throw new Error('useEditNotificationSettingsForm must be used within a EditNotificationSettingsFormProvider'); + } + return context; +}; + +export { useEditNotificationSettingsForm, EditNotificationSettingsFormProvider }; diff --git a/src/modules/notifSettings/NotificationSettings.constants.ts b/src/modules/notifSettings/NotificationSettings.constants.ts new file mode 100644 index 0000000000..a2658356fd --- /dev/null +++ b/src/modules/notifSettings/NotificationSettings.constants.ts @@ -0,0 +1,6 @@ +export const settingInitialValue = { + type: 1, + default: 0, + description: '', + index: 0, +}; diff --git a/src/modules/notifSettings/NotificationSettings.tsx b/src/modules/notifSettings/NotificationSettings.tsx new file mode 100644 index 0000000000..f3e7032166 --- /dev/null +++ b/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(settingInitialValue); + + return ( + + + + + + ); +}; + +export { NotificationSettings }; diff --git a/src/modules/notifSettings/NotificationSettings.types.ts b/src/modules/notifSettings/NotificationSettings.types.ts new file mode 100644 index 0000000000..2390c4651c --- /dev/null +++ b/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; +}; diff --git a/src/modules/notifSettings/components/AddNotificationSettingsModalContent.tsx b/src/modules/notifSettings/components/AddNotificationSettingsModalContent.tsx new file mode 100644 index 0000000000..929490fc62 --- /dev/null +++ b/src/modules/notifSettings/components/AddNotificationSettingsModalContent.tsx @@ -0,0 +1,131 @@ +import { FC } from 'react'; + +import { Box, Button, Text, TextInput, ToggleSwitch } from 'blocks'; + +import { ModalResponse } from 'common'; + +import { NotificationSettingsRangeSelector } from './NotificationSettingsRangeSelector'; +import { useEditNotificationSettingsForm } from '../EditNotificationSetting.form'; + +type AddNotificationSettingsModalContentProps = { + modalControl: ModalResponse; +}; + +const AddNotificationSettingsModalContent: FC = ({ modalControl }) => { + const { + values: formValues, + handleSubmit, + handleChange, + touched, + errors, + setFieldValue, + } = useEditNotificationSettingsForm(); + + const { onClose } = modalControl; + return ( + +
+ + + Add a Setting + + + + + + + + Set as Default + + Setting on for users by default + + setFieldValue('isDefault', checked)} + /> + + + + + + Range + + Set a range for this setting e.g. 1-10 + + setFieldValue('enableRange', checked)} + /> + + {formValues.enableRange && } + + + + + + + +
+ + ); +}; + +export { AddNotificationSettingsModalContent }; diff --git a/src/modules/notifSettings/components/NotificationSettingsBody.tsx b/src/modules/notifSettings/components/NotificationSettingsBody.tsx new file mode 100644 index 0000000000..d694358e36 --- /dev/null +++ b/src/modules/notifSettings/components/NotificationSettingsBody.tsx @@ -0,0 +1,93 @@ +import { FC, useEffect, useState } from 'react'; + +import { Box } from 'blocks'; + +import { ModalResponse } from 'common'; + +import { ChannelDashboardNullState } from 'modules/channelDashboard/components/ChannelDashboardNullState'; +import { ChannelSetting } from 'modules/channelDashboard/ChannelDashboard.types'; + +import { NotificationSettingsLists } from './NotificationSettingsLists'; +import { NotificationSettingsFooter } from './NotificationSettingsFooter'; +import { NotificationSettingsModal } from './NotificationSettingsModal'; + +type NotificationSettingsBodyProps = { + modalControl: ModalResponse; + channelSettings: ChannelSetting[]; + loadingSettings: boolean; + settingsToEdit: ChannelSetting; + setSettingsToEdit: (settingsToEdit: ChannelSetting) => void; +}; + +const NotificationSettingsBody: FC = ({ + modalControl, + channelSettings, + loadingSettings, + settingsToEdit, + setSettingsToEdit, +}) => { + const [newSettings, setNewSettings] = useState([]); + + const { open } = modalControl; + + useEffect(() => { + if (channelSettings && !loadingSettings) { + setNewSettings(channelSettings); + } + }, [loadingSettings]); + + const handleDeleteSetting = (settingToDelete: ChannelSetting) => { + setNewSettings((settings) => settings.filter((setting) => setting.index !== settingToDelete.index)); + }; + + const handleSettingsChange = (newSetting: ChannelSetting) => { + const index = newSettings.findIndex((setting) => setting.index === newSetting.index); + if (index === -1) setNewSettings([...newSettings, newSetting]); + else { + const updatedSetting = [...newSettings]; + updatedSetting[index] = newSetting; + setNewSettings(updatedSetting); + } + }; + + return ( + + {newSettings.length > 0 ? ( + + ) : ( + + )} + + + + + + ); +}; + +export { NotificationSettingsBody }; diff --git a/src/modules/notifSettings/components/NotificationSettingsFooter.tsx b/src/modules/notifSettings/components/NotificationSettingsFooter.tsx new file mode 100644 index 0000000000..4ba0e527b1 --- /dev/null +++ b/src/modules/notifSettings/components/NotificationSettingsFooter.tsx @@ -0,0 +1,226 @@ +import { FC, useEffect, useMemo, useState } from 'react'; + +import { ethers } from 'ethers'; +import { useSelector } from 'react-redux'; +import { useNavigate } from 'react-router-dom'; + +import { Alert, Box, Button } from 'blocks'; + +import { StakingVariant } from 'common'; +import { addresses } from 'config'; +import APP_PATHS from 'config/AppPaths'; +import { useAppContext } from 'contexts/AppContext'; + +import { getPushTokenApprovalAmount } from 'helpers'; +import { useAccount } from 'hooks'; + +import { ChannelSetting } from 'modules/channelDashboard/ChannelDashboard.types'; +import { useApprovePUSHToken, useCreateNotificationSettings } from 'queries'; +import useFetchChannelDetails from 'common/hooks/useFetchUsersChannelDetails'; + +type NotificationSettingsFooterProps = { + newSettings: ChannelSetting[]; + channelSettings: ChannelSetting[]; +}; + +const EDIT_SETTING_FEE = 50; + +const NotificationSettingsFooter: FC = ({ newSettings, channelSettings }) => { + const navigate = useNavigate(); + const { account, provider, wallet } = useAccount(); + + const { userPushSDKInstance } = useSelector((state: any) => { + return state.user; + }); + + const { handleConnectWalletAndEnableProfile } = useAppContext(); + const { refetchChannelDetails } = useFetchChannelDetails(); + + const [pushApprovalAmount, setPushApprovalAmount] = useState(0); + const [errorMessage, setErrorMessage] = useState(''); + + const checkApprovedPUSHTokenAmount = async () => { + const pushTokenApprovalAmount = await getPushTokenApprovalAmount({ + address: account, + provider: provider, + contractAddress: addresses.epnscore, + }); + setPushApprovalAmount(parseInt(pushTokenApprovalAmount)); + }; + + useEffect(() => { + if (!account || !provider) return; + checkApprovedPUSHTokenAmount(); + }, [account, provider]); + + const { mutate: approvePUSHToken, isPending: approvingPUSH } = useApprovePUSHToken(); + + const approvePUSH = async () => { + if (!provider) return; + const signer = provider.getSigner(account); + + const fees = ethers.utils.parseUnits((EDIT_SETTING_FEE - pushApprovalAmount).toString(), 18); + + approvePUSHToken( + { + noOfTokenToApprove: fees, + signer, + }, + { + onSuccess: () => { + checkApprovedPUSHTokenAmount(); + }, + onError: (error: any) => { + console.log('Error in Approving PUSH', error); + + if (error.code == 'ACTION_REJECTED') { + setErrorMessage('User rejected signature. Please try again.'); + } else { + setErrorMessage('Error in approving PUSH Tokens'); + } + }, + } + ); + }; + + const { mutate: createNotificationSettings, isPending: addingNotificationSettings } = useCreateNotificationSettings(); + + const handleSaveSettings = async () => { + let userPushInstance = userPushSDKInstance; + if (!userPushInstance.signer) { + userPushInstance = await handleConnectWalletAndEnableProfile({ wallet }); + console.log('User Push Instance >>>', userPushInstance); + if (!userPushInstance) { + return; + } + } + + if (newSettings.length > 0) { + const newsettingData: ChannelSetting[] = newSettings.map((setting) => { + if (setting.type === 1) { + return { + type: setting.type, + description: setting.description, + default: setting.default ? 1 : 0, + }; + } else { + return { + type: setting.type, + description: setting.description, + default: setting.default, + data: { + lower: setting.lowerLimit, + upper: setting.upperLimit, + ticker: setting.ticker, + enabled: setting.enabled, + }, + }; + } + }); + + createNotificationSettings( + { + userPushSDKInstance: userPushInstance, + settings: newsettingData, + }, + { + onSuccess: (response) => { + console.log('onSuccess >>>', response); + if (response.transactionHash) { + console.log('Call channel details refetch and navigate to dashboard page'); + refetchChannelDetails(); + } + }, + onError: (error: any) => { + console.log('Error in adding setting', error); + setErrorMessage(error.message); + }, + } + ); + } + }; + + const settingsChanged = useMemo(() => { + if (!channelSettings) return false; // if there are no channel settings + if (newSettings.length !== channelSettings.length) return true; // new settings length is not equal to channel settings + let isUnchanged = true; + for (let i = 0; i < newSettings.length; i++) { + const setting1 = newSettings[i]; + const setting2 = channelSettings[i]; + if (setting1.type === 1) { + isUnchanged = + isUnchanged && + setting1.type === setting2.type && + setting1.description === setting2.description && + setting1.default === setting2.default; + } else if (setting1.type === 2) { + isUnchanged = + isUnchanged && + setting1.type === setting2.type && + setting1.description === setting2.description && + setting1.default === setting2.default && + setting1.enabled === setting2.enabled && + setting1.lowerLimit === setting2.lowerLimit && + setting1.upperLimit === setting2.upperLimit && + setting1.ticker === setting2.ticker; + } + } + return isUnchanged === false; + }, [newSettings, channelSettings]); + + return ( + + {errorMessage && ( + + )} + + + + + + + {pushApprovalAmount >= EDIT_SETTING_FEE ? ( + + ) : ( + + )} + + + ); +}; + +export { NotificationSettingsFooter }; diff --git a/src/modules/notifSettings/components/NotificationSettingsHeader.tsx b/src/modules/notifSettings/components/NotificationSettingsHeader.tsx new file mode 100644 index 0000000000..09ef370cd1 --- /dev/null +++ b/src/modules/notifSettings/components/NotificationSettingsHeader.tsx @@ -0,0 +1,53 @@ +import { FC } from 'react'; + +import { Add, Box, Button, Text } from 'blocks'; + +import { ModalResponse } from 'common'; + +import { ChannelSetting } from 'modules/channelDashboard/ChannelDashboard.types'; +import { settingInitialValue } from '../NotificationSettings.constants'; + +type NotificationSettingsHeaderProps = { + modalControl: ModalResponse; + setSettingsToEdit: (settingsToEdit: ChannelSetting) => void; +}; +const NotificationSettingsHeader: FC = ({ modalControl, setSettingsToEdit }) => { + const { open } = modalControl; + + return ( + + + + Notification Settings + + + Add, Edit or Remove Notification Settings + + + + + ); +}; + +export { NotificationSettingsHeader }; diff --git a/src/modules/notifSettings/components/NotificationSettingsListItem.tsx b/src/modules/notifSettings/components/NotificationSettingsListItem.tsx new file mode 100644 index 0000000000..d680787b22 --- /dev/null +++ b/src/modules/notifSettings/components/NotificationSettingsListItem.tsx @@ -0,0 +1,85 @@ +import { FC } from 'react'; + +import { Box, Dropdown, KebabMenuVertical, Lozenge, Menu, MenuItem, OptOut, Pencil, Skeleton, Text } from 'blocks'; + +import { ChannelSetting } from 'modules/channelDashboard/ChannelDashboard.types'; + +import { ModalResponse } from 'common'; + +type NotificationSettingsListItemProps = { + setting: ChannelSetting; + loadingSettings: boolean; + modalControl: ModalResponse; + setSettingsToEdit: (settingsToEdit: ChannelSetting) => void; + handleDeleteSetting: (settingToDelete: ChannelSetting) => void; + handleSettingsChange: (setting: ChannelSetting) => void; +}; + +const NotificationSettingsListItem: FC = ({ + setting, + modalControl, + loadingSettings, + setSettingsToEdit, + handleDeleteSetting, +}) => { + const { open } = modalControl; + + return ( + + + + + {setting.description} + + {setting.type == 2 && Range} + {setting.type == 3 && Multi-Range} + + + + } + onClick={() => { + setSettingsToEdit(setting); + open(); + }} + /> + } + onClick={() => { + handleDeleteSetting(setting); + }} + /> + + } + > + + + + + + ); +}; + +export default NotificationSettingsListItem; diff --git a/src/modules/notifSettings/components/NotificationSettingsLists.tsx b/src/modules/notifSettings/components/NotificationSettingsLists.tsx new file mode 100644 index 0000000000..108acaf103 --- /dev/null +++ b/src/modules/notifSettings/components/NotificationSettingsLists.tsx @@ -0,0 +1,53 @@ +import { FC } from 'react'; + +import { Box, Separator } from 'blocks'; + +import { ModalResponse } from 'common'; + +import { ChannelSetting } from 'modules/channelDashboard/ChannelDashboard.types'; + +import NotificationSettingsListItem from './NotificationSettingsListItem'; + +type NotificationSettingsListsProps = { + newSettings: ChannelSetting[]; + loadingSettings: boolean; + modalControl: ModalResponse; + setSettingsToEdit: (settingsToEdit: ChannelSetting) => void; + handleDeleteSetting: (settingToDelete: ChannelSetting) => void; + handleSettingsChange: (setting: ChannelSetting) => void; +}; + +const NotificationSettingsLists: FC = ({ + newSettings, + loadingSettings, + modalControl, + setSettingsToEdit, + handleDeleteSetting, + handleSettingsChange, +}) => { + return ( + + {newSettings.map((setting: ChannelSetting, index: number) => { + return ( + + + + + ); + })} + + ); +}; + +export { NotificationSettingsLists }; diff --git a/src/modules/notifSettings/components/NotificationSettingsModal.tsx b/src/modules/notifSettings/components/NotificationSettingsModal.tsx new file mode 100644 index 0000000000..6fd61f5734 --- /dev/null +++ b/src/modules/notifSettings/components/NotificationSettingsModal.tsx @@ -0,0 +1,84 @@ +import { FC } from 'react'; + +import { Modal } from 'blocks'; + +import { ModalResponse } from 'common'; + +import { ChannelSetting } from 'modules/channelDashboard/ChannelDashboard.types'; + +import { AddNotificationSettingsModalContent } from './AddNotificationSettingsModalContent'; +import { EditNotificationSettingsFormProvider } from '../EditNotificationSetting.form'; + +type NotificationSettingsModalProps = { + modalControl: ModalResponse; + settingsToEdit: ChannelSetting; + setNewSettings: (setting: ChannelSetting[]) => void; + handleSettingsChange: (setting: ChannelSetting) => void; +}; +const NotificationSettingsModal: FC = ({ + modalControl, + settingsToEdit, + handleSettingsChange, +}) => { + const { isOpen, onClose } = modalControl; + + const handleAddSettings = (values: NotificationSettingFormValues) => { + const index = settingsToEdit.index !== 0 ? settingsToEdit.index : Math.floor(Math.random() * 1000000); + + const newAddedSettings: ChannelSetting = values.enableRange + ? values.enableMultiRange + ? { + type: 3, + default: { + lower: Number(values.multirangelowerlimit), + upper: Number(values.multirangeupperlimit), + }, + enabled: values.isDefault, + description: values.settingName, + lowerLimit: Number(values.rangelowerlimit), + upperLimit: Number(values.rangeupperlimit), + ticker: Number(values.sliderStepValue), + index: index, + } + : { + type: 2, + default: Number(values.defaultValue), + enabled: values.isDefault, + description: values.settingName, + lowerLimit: Number(values.rangelowerlimit), + upperLimit: Number(values.rangeupperlimit), + ticker: Number(values.sliderStepValue), + index: index, + } + : { + type: 1, + default: values.isDefault, + description: values.settingName, + index: index, + }; + + handleSettingsChange(newAddedSettings); + + onClose(); + }; + + return ( + + { + handleAddSettings(values); + }} + > + + + + ); +}; + +export { NotificationSettingsModal }; diff --git a/src/modules/notifSettings/components/NotificationSettingsRangeSelector.tsx b/src/modules/notifSettings/components/NotificationSettingsRangeSelector.tsx new file mode 100644 index 0000000000..48a0ff7348 --- /dev/null +++ b/src/modules/notifSettings/components/NotificationSettingsRangeSelector.tsx @@ -0,0 +1,227 @@ +import { useMemo, useState } from 'react'; + +import { Box, Text, TextInput } from 'blocks'; + +import Checkbox from 'components/reusables/checkbox/Checkbox'; + +import InputSlider from 'components/reusables/sliders/InputSlider'; +import RangeSlider from 'components/reusables/sliders/RangeSlider'; + +import { useEditNotificationSettingsForm } from '../EditNotificationSetting.form'; + +const NotificationSettingsRangeSelector = () => { + const { values: formValues, handleChange, setFieldValue } = useEditNotificationSettingsForm(); + + const showPreview = useMemo(() => { + return ( + formValues.rangelowerlimit > 0 && + formValues.rangeupperlimit > 0 && + (formValues.enableMultiRange + ? formValues.multirangelowerlimit > 0 && formValues.multirangeupperlimit > 0 + : formValues.defaultValue > 0) && + formValues.sliderStepValue > 0 && + Number(formValues.rangelowerlimit) <= Number(formValues.rangeupperlimit) && + Number(formValues.sliderStepValue) > 0 && + Number(formValues.sliderStepValue) <= Number(formValues.rangeupperlimit) - Number(formValues.rangelowerlimit) && + (formValues.enableMultiRange + ? Number(formValues.multirangelowerlimit) >= Number(formValues.rangelowerlimit) && + Number(formValues.multirangeupperlimit) <= Number(formValues.rangeupperlimit) && + Number(formValues.multirangeupperlimit) > Number(formValues.multirangelowerlimit) + : Number(formValues.defaultValue) >= Number(formValues.rangelowerlimit) && + Number(formValues.defaultValue) <= Number(formValues.rangeupperlimit)) + ); + }, [ + formValues.rangelowerlimit, + formValues.rangeupperlimit, + formValues.defaultValue, + formValues.sliderStepValue, + formValues.multirangelowerlimit, + formValues.multirangeupperlimit, + formValues.enableMultiRange, + ]); + + const [sliderPreviewVal, setSliderPreviewVal] = useState(formValues.defaultValue); + const [sliderPreviewStartVal, setSliderPreviewStartVal] = useState(formValues.multirangelowerlimit); + const [sliderPreviewEndVal, setSliderPreviewEndVal] = useState(formValues.multirangeupperlimit); + + return ( + <> + + Range Values + + + to + { + setFieldValue('rangeupperlimit', e.target.value); + }} + /> + + + + + setFieldValue('enableMultiRange', !formValues.enableMultiRange)} + /> + + + Enable Multi Range + + User can select a range of values in the slider + + + + {!formValues.enableMultiRange && ( + { + setSliderPreviewVal(Number(e.target.value)); + setFieldValue('defaultValue', e.target.value); + }} + label="Default Value" + /> + )} + + {formValues.enableMultiRange && ( + + Range Values + + { + setFieldValue('multirangelowerlimit', e.target.value); + setSliderPreviewStartVal(Number(e.target.value)); + }} + /> + to + { + setFieldValue('multirangeupperlimit', e.target.value); + setSliderPreviewEndVal(Number(e.target.value)); + }} + /> + + + )} + + + { + handleChange('sliderStepValue'); + setFieldValue('sliderStepValue', e.target.value); + }} + label="Slider Step Value" + /> + + + {showPreview && ( + + Preview + + {!formValues.enableMultiRange && ( + + {formValues.rangelowerlimit} + + { + setSliderPreviewVal(x); + }} + preview={true} + /> + + {formValues.rangeupperlimit} + + )} + + {formValues.enableMultiRange && ( + + {formValues.rangelowerlimit} + + { + setSliderPreviewStartVal(startVal); + setSliderPreviewEndVal(endVal); + }} + preview={true} + /> + + {formValues.rangeupperlimit} + + )} + + )} + + ); +}; + +export { NotificationSettingsRangeSelector }; diff --git a/src/pages/NotificationSettingsPage.tsx b/src/pages/NotificationSettingsPage.tsx new file mode 100644 index 0000000000..b96727078a --- /dev/null +++ b/src/pages/NotificationSettingsPage.tsx @@ -0,0 +1,12 @@ +import { ContentLayout } from 'common'; +import { NotificationSettings } from 'modules/notifSettings/NotificationSettings'; + +const NotificationSettingsPage = () => { + return ( + + + + ); +}; + +export default NotificationSettingsPage; diff --git a/src/queries/hooks/index.ts b/src/queries/hooks/index.ts index 6442083f4e..af7cf2c265 100644 --- a/src/queries/hooks/index.ts +++ b/src/queries/hooks/index.ts @@ -4,3 +4,4 @@ export * from './user'; export * from './rewards'; export * from './pointsVault'; export * from './analytics'; +export * from './notificationSettings'; diff --git a/src/queries/hooks/notificationSettings/index.ts b/src/queries/hooks/notificationSettings/index.ts new file mode 100644 index 0000000000..77a2c6839a --- /dev/null +++ b/src/queries/hooks/notificationSettings/index.ts @@ -0,0 +1 @@ +export * from './useCreateNotificationSettings'; diff --git a/src/queries/hooks/notificationSettings/useCreateNotificationSettings.ts b/src/queries/hooks/notificationSettings/useCreateNotificationSettings.ts new file mode 100644 index 0000000000..bf76f4faa3 --- /dev/null +++ b/src/queries/hooks/notificationSettings/useCreateNotificationSettings.ts @@ -0,0 +1,9 @@ +import { useMutation } from '@tanstack/react-query'; +import { addSettings } from 'queries/queryKeys'; +import { addNotificationSettings } from 'queries/services'; + +export const useCreateNotificationSettings = () => + useMutation({ + mutationKey: [addSettings], + mutationFn: addNotificationSettings, + }); diff --git a/src/queries/queryKeys.ts b/src/queries/queryKeys.ts index ec74ac79f5..fb81779d99 100644 --- a/src/queries/queryKeys.ts +++ b/src/queries/queryKeys.ts @@ -1,5 +1,6 @@ export const UserRewardsDetails = 'userRewardsDetails'; export const addDelegate = 'addDelegate'; +export const addSettings = 'addSettings'; export const addNewSubgraph = 'addNewSubgraph'; export const aliasInfo = 'aliasInfo'; export const allActivities = 'allActivities'; diff --git a/src/queries/services/index.ts b/src/queries/services/index.ts index 18dae290cf..632b38dfaa 100644 --- a/src/queries/services/index.ts +++ b/src/queries/services/index.ts @@ -4,3 +4,4 @@ export * from './rewards'; export * from './pointsVault'; export * from './createChannel'; export * from './analytics'; +export * from './notificationSettings'; diff --git a/src/queries/services/notificationSettings/addNotificationSettings.ts b/src/queries/services/notificationSettings/addNotificationSettings.ts new file mode 100644 index 0000000000..e4acb2d0c4 --- /dev/null +++ b/src/queries/services/notificationSettings/addNotificationSettings.ts @@ -0,0 +1,8 @@ +import { AddNotificationSettingsProps } from 'queries/types'; + +export const addNotificationSettings = async ({ + userPushSDKInstance, + settings, +}: AddNotificationSettingsProps): Promise<{ + transactionHash: any; +}> => await userPushSDKInstance.channel.setting(settings); diff --git a/src/queries/services/notificationSettings/index.ts b/src/queries/services/notificationSettings/index.ts new file mode 100644 index 0000000000..6036f70337 --- /dev/null +++ b/src/queries/services/notificationSettings/index.ts @@ -0,0 +1 @@ +export * from './addNotificationSettings'; diff --git a/src/queries/types/index.ts b/src/queries/types/index.ts index 5f30e3836e..a99590a6c3 100644 --- a/src/queries/types/index.ts +++ b/src/queries/types/index.ts @@ -3,3 +3,4 @@ export * from './user'; export * from './rewards'; export * from './pointsVault'; export * from './createChannel'; +export * from './notificationsettings'; diff --git a/src/queries/types/notificationsettings.ts b/src/queries/types/notificationsettings.ts new file mode 100644 index 0000000000..7dfb3977e8 --- /dev/null +++ b/src/queries/types/notificationsettings.ts @@ -0,0 +1,6 @@ +import { ChannelSetting } from 'modules/channelDashboard/ChannelDashboard.types'; + +export type AddNotificationSettingsProps = { + userPushSDKInstance: any; + settings: ChannelSetting[]; +}; diff --git a/src/structure/MasterInterfacePage.tsx b/src/structure/MasterInterfacePage.tsx index aa796d0cf3..3aa5d59373 100644 --- a/src/structure/MasterInterfacePage.tsx +++ b/src/structure/MasterInterfacePage.tsx @@ -33,6 +33,7 @@ const NotAvailablePage = lazy(() => import('pages/NotAvailablePage')); const NotFoundPage = lazy(() => import('pages/NotFoundPage')); const ReceiveNotifsPage = lazy(() => import('pages/ReceiveNotifsPage')); const NotifSettingsPage = lazy(() => import('pages/NotifSettingsPage')); +const NotificationSettingsPage = lazy(() => import('pages/NotificationSettingsPage')); const SendNotifsPage = lazy(() => import('pages/SendNotifsPage')); const SpacePage = lazy(() => import('pages/SpacePage')); const SupportPage = lazy(() => import('pages/SupportPage')); @@ -328,9 +329,13 @@ function MasterInterfacePage() { path={APP_PATHS.UserSettings} element={} /> - } + /> */} + } /> Date: Fri, 23 Aug 2024 05:21:44 +0530 Subject: [PATCH 2/2] Revert "Added new UI for notification settings page" This reverts commit 8c2628c9c54541b83618889d4be12ddf701cfacc. --- src/blocks/icons/components/Pencil.tsx | 40 --- src/blocks/icons/index.ts | 2 - src/blocks/textInput/TextInput.tsx | 6 +- src/common/Common.types.ts | 5 - src/common/hooks/index.ts | 1 - src/common/hooks/useModal.ts | 17 -- src/common/index.ts | 1 - .../ChannelDashboard.types.ts | 12 +- .../components/ChannelDashboardNullState.tsx | 51 ++-- .../EditNotificationSetting.form.tsx | 51 ---- .../NotificationSettings.constants.ts | 6 - .../notifSettings/NotificationSettings.tsx | 59 ----- .../NotificationSettings.types.ts | 35 --- .../AddNotificationSettingsModalContent.tsx | 131 ---------- .../components/NotificationSettingsBody.tsx | 93 ------- .../components/NotificationSettingsFooter.tsx | 226 ----------------- .../components/NotificationSettingsHeader.tsx | 53 ---- .../NotificationSettingsListItem.tsx | 85 ------- .../components/NotificationSettingsLists.tsx | 53 ---- .../components/NotificationSettingsModal.tsx | 84 ------- .../NotificationSettingsRangeSelector.tsx | 227 ------------------ src/pages/NotificationSettingsPage.tsx | 12 - src/queries/hooks/index.ts | 1 - .../hooks/notificationSettings/index.ts | 1 - .../useCreateNotificationSettings.ts | 9 - src/queries/queryKeys.ts | 1 - src/queries/services/index.ts | 1 - .../addNotificationSettings.ts | 8 - .../services/notificationSettings/index.ts | 1 - src/queries/types/index.ts | 1 - src/queries/types/notificationsettings.ts | 6 - src/structure/MasterInterfacePage.tsx | 7 +- 32 files changed, 25 insertions(+), 1261 deletions(-) delete mode 100644 src/blocks/icons/components/Pencil.tsx delete mode 100644 src/common/Common.types.ts delete mode 100644 src/common/hooks/useModal.ts delete mode 100644 src/modules/notifSettings/EditNotificationSetting.form.tsx delete mode 100644 src/modules/notifSettings/NotificationSettings.constants.ts delete mode 100644 src/modules/notifSettings/NotificationSettings.tsx delete mode 100644 src/modules/notifSettings/NotificationSettings.types.ts delete mode 100644 src/modules/notifSettings/components/AddNotificationSettingsModalContent.tsx delete mode 100644 src/modules/notifSettings/components/NotificationSettingsBody.tsx delete mode 100644 src/modules/notifSettings/components/NotificationSettingsFooter.tsx delete mode 100644 src/modules/notifSettings/components/NotificationSettingsHeader.tsx delete mode 100644 src/modules/notifSettings/components/NotificationSettingsListItem.tsx delete mode 100644 src/modules/notifSettings/components/NotificationSettingsLists.tsx delete mode 100644 src/modules/notifSettings/components/NotificationSettingsModal.tsx delete mode 100644 src/modules/notifSettings/components/NotificationSettingsRangeSelector.tsx delete mode 100644 src/pages/NotificationSettingsPage.tsx delete mode 100644 src/queries/hooks/notificationSettings/index.ts delete mode 100644 src/queries/hooks/notificationSettings/useCreateNotificationSettings.ts delete mode 100644 src/queries/services/notificationSettings/addNotificationSettings.ts delete mode 100644 src/queries/services/notificationSettings/index.ts delete mode 100644 src/queries/types/notificationsettings.ts diff --git a/src/blocks/icons/components/Pencil.tsx b/src/blocks/icons/components/Pencil.tsx deleted file mode 100644 index a7b5235380..0000000000 --- a/src/blocks/icons/components/Pencil.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { FC } from 'react'; -import { IconWrapper } from '../IconWrapper'; -import { IconProps } from '../Icons.types'; - -const Pencil: FC = (allProps) => { - const { svgProps: props, ...restProps } = allProps; - return ( - - - - - } - {...restProps} - /> - ); -}; - -export default Pencil; diff --git a/src/blocks/icons/index.ts b/src/blocks/icons/index.ts index eaa4e47ac8..dfc0a4bb33 100644 --- a/src/blocks/icons/index.ts +++ b/src/blocks/icons/index.ts @@ -98,8 +98,6 @@ 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'; diff --git a/src/blocks/textInput/TextInput.tsx b/src/blocks/textInput/TextInput.tsx index 44dadc24d8..5d2502a1f5 100644 --- a/src/blocks/textInput/TextInput.tsx +++ b/src/blocks/textInput/TextInput.tsx @@ -9,7 +9,7 @@ export type TextInputProps = { disabled?: boolean; icon?: ReactNode; error?: boolean; - type?: 'text' | 'password' | 'number'; + type?: 'text' | 'password'; errorMessage?: string; label?: string; onChange?: (e: React.ChangeEvent) => void; @@ -18,7 +18,7 @@ export type TextInputProps = { required?: boolean; success?: boolean; totalCount?: number; - value: string | number; + value: string; }; const Container = styled.div<{ css?: FlattenSimpleInterpolation }>` @@ -168,7 +168,7 @@ export const TextInput = forwardRef( color={disabled ? 'components-inputs-text-disabled' : 'components-inputs-text-secondary'} variant="c-regular" > - {`${typeof value === 'string' && value?.length || 0} / ${totalCount}`} + {`${value?.length || 0} / ${totalCount}`} )} diff --git a/src/common/Common.types.ts b/src/common/Common.types.ts deleted file mode 100644 index 931d784879..0000000000 --- a/src/common/Common.types.ts +++ /dev/null @@ -1,5 +0,0 @@ -export type ModalResponse = { - isOpen: boolean; - onClose: () => void; - open: () => void; -}; diff --git a/src/common/hooks/index.ts b/src/common/hooks/index.ts index 5a4af72059..871bdf7d48 100644 --- a/src/common/hooks/index.ts +++ b/src/common/hooks/index.ts @@ -1,3 +1,2 @@ export { useIsVisible } from './useIsVisible'; export { usePushStakingStats } from './usePushStakingStats'; -export { useModal } from './useModal'; diff --git a/src/common/hooks/useModal.ts b/src/common/hooks/useModal.ts deleted file mode 100644 index 40241e82ff..0000000000 --- a/src/common/hooks/useModal.ts +++ /dev/null @@ -1,17 +0,0 @@ -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 }; diff --git a/src/common/index.ts b/src/common/index.ts index 9cf1a3126b..43949e8236 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -3,4 +3,3 @@ export * from './components'; export * from './Common.constants'; export * from './Common.utils'; export * from './Common.form'; -export * from './common.types'; diff --git a/src/modules/channelDashboard/ChannelDashboard.types.ts b/src/modules/channelDashboard/ChannelDashboard.types.ts index 38cbf5de9d..67efdee8f4 100644 --- a/src/modules/channelDashboard/ChannelDashboard.types.ts +++ b/src/modules/channelDashboard/ChannelDashboard.types.ts @@ -1,5 +1,5 @@ export type ChannelSetting = { - type: number; + type: 1 | 2 | 3; default: | boolean | number @@ -7,12 +7,12 @@ export type ChannelSetting = { 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 = diff --git a/src/modules/channelDashboard/components/ChannelDashboardNullState.tsx b/src/modules/channelDashboard/components/ChannelDashboardNullState.tsx index e059c43667..75072a9193 100644 --- a/src/modules/channelDashboard/components/ChannelDashboardNullState.tsx +++ b/src/modules/channelDashboard/components/ChannelDashboardNullState.tsx @@ -1,6 +1,6 @@ -import { FC } from 'react'; +import { Box, Button, CrownSimple, ReceiveNotification, Text } from "blocks"; +import { FC } from "react"; -import { Box, Button, CrownSimple, ReceiveNotification, Text } from 'blocks'; type ChannelDashboardNullStateProps = { state: 'notificationSettings' | 'delegatee'; @@ -9,7 +9,12 @@ type ChannelDashboardNullStateProps = { onClick?: any; }; -const ChannelDashboardNullState: FC = ({ state, title, subTitle, onClick }) => { +const ChannelDashboardNullState: FC = ({ + state, + title, + subTitle, + onClick +}) => { return ( = ({ state, gap="spacing-sm" height="200px" > - {state == 'delegatee' && ( - - )} - {state == 'notificationSettings' && ( - - )} + {state == 'delegatee' && } + {state == 'notificationSettings' && } - - + + {title} - + {subTitle} {onClick && ( - )} @@ -67,4 +46,4 @@ const ChannelDashboardNullState: FC = ({ state, ); }; -export { ChannelDashboardNullState }; +export { ChannelDashboardNullState }; \ No newline at end of file diff --git a/src/modules/notifSettings/EditNotificationSetting.form.tsx b/src/modules/notifSettings/EditNotificationSetting.form.tsx deleted file mode 100644 index dd5f2eabf4..0000000000 --- a/src/modules/notifSettings/EditNotificationSetting.form.tsx +++ /dev/null @@ -1,51 +0,0 @@ -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 = ({ - children, - initialValue, - onSubmit, -}) => { - const addNotificationSettingsForm = useFormik({ - initialValues: getFormInitialValus(initialValue), - onSubmit: onSubmit, - }); - - return {children}; -}; - -const useEditNotificationSettingsForm = () => { - const context = useFormikContext(); - - if (!context) { - throw new Error('useEditNotificationSettingsForm must be used within a EditNotificationSettingsFormProvider'); - } - return context; -}; - -export { useEditNotificationSettingsForm, EditNotificationSettingsFormProvider }; diff --git a/src/modules/notifSettings/NotificationSettings.constants.ts b/src/modules/notifSettings/NotificationSettings.constants.ts deleted file mode 100644 index a2658356fd..0000000000 --- a/src/modules/notifSettings/NotificationSettings.constants.ts +++ /dev/null @@ -1,6 +0,0 @@ -export const settingInitialValue = { - type: 1, - default: 0, - description: '', - index: 0, -}; diff --git a/src/modules/notifSettings/NotificationSettings.tsx b/src/modules/notifSettings/NotificationSettings.tsx deleted file mode 100644 index f3e7032166..0000000000 --- a/src/modules/notifSettings/NotificationSettings.tsx +++ /dev/null @@ -1,59 +0,0 @@ -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(settingInitialValue); - - return ( - - - - - - ); -}; - -export { NotificationSettings }; diff --git a/src/modules/notifSettings/NotificationSettings.types.ts b/src/modules/notifSettings/NotificationSettings.types.ts deleted file mode 100644 index 2390c4651c..0000000000 --- a/src/modules/notifSettings/NotificationSettings.types.ts +++ /dev/null @@ -1,35 +0,0 @@ -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; -}; diff --git a/src/modules/notifSettings/components/AddNotificationSettingsModalContent.tsx b/src/modules/notifSettings/components/AddNotificationSettingsModalContent.tsx deleted file mode 100644 index 929490fc62..0000000000 --- a/src/modules/notifSettings/components/AddNotificationSettingsModalContent.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import { FC } from 'react'; - -import { Box, Button, Text, TextInput, ToggleSwitch } from 'blocks'; - -import { ModalResponse } from 'common'; - -import { NotificationSettingsRangeSelector } from './NotificationSettingsRangeSelector'; -import { useEditNotificationSettingsForm } from '../EditNotificationSetting.form'; - -type AddNotificationSettingsModalContentProps = { - modalControl: ModalResponse; -}; - -const AddNotificationSettingsModalContent: FC = ({ modalControl }) => { - const { - values: formValues, - handleSubmit, - handleChange, - touched, - errors, - setFieldValue, - } = useEditNotificationSettingsForm(); - - const { onClose } = modalControl; - return ( - -
- - - Add a Setting - - - - - - - - Set as Default - - Setting on for users by default - - setFieldValue('isDefault', checked)} - /> - - - - - - Range - - Set a range for this setting e.g. 1-10 - - setFieldValue('enableRange', checked)} - /> - - {formValues.enableRange && } - - - - - - - -
- - ); -}; - -export { AddNotificationSettingsModalContent }; diff --git a/src/modules/notifSettings/components/NotificationSettingsBody.tsx b/src/modules/notifSettings/components/NotificationSettingsBody.tsx deleted file mode 100644 index d694358e36..0000000000 --- a/src/modules/notifSettings/components/NotificationSettingsBody.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import { FC, useEffect, useState } from 'react'; - -import { Box } from 'blocks'; - -import { ModalResponse } from 'common'; - -import { ChannelDashboardNullState } from 'modules/channelDashboard/components/ChannelDashboardNullState'; -import { ChannelSetting } from 'modules/channelDashboard/ChannelDashboard.types'; - -import { NotificationSettingsLists } from './NotificationSettingsLists'; -import { NotificationSettingsFooter } from './NotificationSettingsFooter'; -import { NotificationSettingsModal } from './NotificationSettingsModal'; - -type NotificationSettingsBodyProps = { - modalControl: ModalResponse; - channelSettings: ChannelSetting[]; - loadingSettings: boolean; - settingsToEdit: ChannelSetting; - setSettingsToEdit: (settingsToEdit: ChannelSetting) => void; -}; - -const NotificationSettingsBody: FC = ({ - modalControl, - channelSettings, - loadingSettings, - settingsToEdit, - setSettingsToEdit, -}) => { - const [newSettings, setNewSettings] = useState([]); - - const { open } = modalControl; - - useEffect(() => { - if (channelSettings && !loadingSettings) { - setNewSettings(channelSettings); - } - }, [loadingSettings]); - - const handleDeleteSetting = (settingToDelete: ChannelSetting) => { - setNewSettings((settings) => settings.filter((setting) => setting.index !== settingToDelete.index)); - }; - - const handleSettingsChange = (newSetting: ChannelSetting) => { - const index = newSettings.findIndex((setting) => setting.index === newSetting.index); - if (index === -1) setNewSettings([...newSettings, newSetting]); - else { - const updatedSetting = [...newSettings]; - updatedSetting[index] = newSetting; - setNewSettings(updatedSetting); - } - }; - - return ( - - {newSettings.length > 0 ? ( - - ) : ( - - )} - - - - - - ); -}; - -export { NotificationSettingsBody }; diff --git a/src/modules/notifSettings/components/NotificationSettingsFooter.tsx b/src/modules/notifSettings/components/NotificationSettingsFooter.tsx deleted file mode 100644 index 4ba0e527b1..0000000000 --- a/src/modules/notifSettings/components/NotificationSettingsFooter.tsx +++ /dev/null @@ -1,226 +0,0 @@ -import { FC, useEffect, useMemo, useState } from 'react'; - -import { ethers } from 'ethers'; -import { useSelector } from 'react-redux'; -import { useNavigate } from 'react-router-dom'; - -import { Alert, Box, Button } from 'blocks'; - -import { StakingVariant } from 'common'; -import { addresses } from 'config'; -import APP_PATHS from 'config/AppPaths'; -import { useAppContext } from 'contexts/AppContext'; - -import { getPushTokenApprovalAmount } from 'helpers'; -import { useAccount } from 'hooks'; - -import { ChannelSetting } from 'modules/channelDashboard/ChannelDashboard.types'; -import { useApprovePUSHToken, useCreateNotificationSettings } from 'queries'; -import useFetchChannelDetails from 'common/hooks/useFetchUsersChannelDetails'; - -type NotificationSettingsFooterProps = { - newSettings: ChannelSetting[]; - channelSettings: ChannelSetting[]; -}; - -const EDIT_SETTING_FEE = 50; - -const NotificationSettingsFooter: FC = ({ newSettings, channelSettings }) => { - const navigate = useNavigate(); - const { account, provider, wallet } = useAccount(); - - const { userPushSDKInstance } = useSelector((state: any) => { - return state.user; - }); - - const { handleConnectWalletAndEnableProfile } = useAppContext(); - const { refetchChannelDetails } = useFetchChannelDetails(); - - const [pushApprovalAmount, setPushApprovalAmount] = useState(0); - const [errorMessage, setErrorMessage] = useState(''); - - const checkApprovedPUSHTokenAmount = async () => { - const pushTokenApprovalAmount = await getPushTokenApprovalAmount({ - address: account, - provider: provider, - contractAddress: addresses.epnscore, - }); - setPushApprovalAmount(parseInt(pushTokenApprovalAmount)); - }; - - useEffect(() => { - if (!account || !provider) return; - checkApprovedPUSHTokenAmount(); - }, [account, provider]); - - const { mutate: approvePUSHToken, isPending: approvingPUSH } = useApprovePUSHToken(); - - const approvePUSH = async () => { - if (!provider) return; - const signer = provider.getSigner(account); - - const fees = ethers.utils.parseUnits((EDIT_SETTING_FEE - pushApprovalAmount).toString(), 18); - - approvePUSHToken( - { - noOfTokenToApprove: fees, - signer, - }, - { - onSuccess: () => { - checkApprovedPUSHTokenAmount(); - }, - onError: (error: any) => { - console.log('Error in Approving PUSH', error); - - if (error.code == 'ACTION_REJECTED') { - setErrorMessage('User rejected signature. Please try again.'); - } else { - setErrorMessage('Error in approving PUSH Tokens'); - } - }, - } - ); - }; - - const { mutate: createNotificationSettings, isPending: addingNotificationSettings } = useCreateNotificationSettings(); - - const handleSaveSettings = async () => { - let userPushInstance = userPushSDKInstance; - if (!userPushInstance.signer) { - userPushInstance = await handleConnectWalletAndEnableProfile({ wallet }); - console.log('User Push Instance >>>', userPushInstance); - if (!userPushInstance) { - return; - } - } - - if (newSettings.length > 0) { - const newsettingData: ChannelSetting[] = newSettings.map((setting) => { - if (setting.type === 1) { - return { - type: setting.type, - description: setting.description, - default: setting.default ? 1 : 0, - }; - } else { - return { - type: setting.type, - description: setting.description, - default: setting.default, - data: { - lower: setting.lowerLimit, - upper: setting.upperLimit, - ticker: setting.ticker, - enabled: setting.enabled, - }, - }; - } - }); - - createNotificationSettings( - { - userPushSDKInstance: userPushInstance, - settings: newsettingData, - }, - { - onSuccess: (response) => { - console.log('onSuccess >>>', response); - if (response.transactionHash) { - console.log('Call channel details refetch and navigate to dashboard page'); - refetchChannelDetails(); - } - }, - onError: (error: any) => { - console.log('Error in adding setting', error); - setErrorMessage(error.message); - }, - } - ); - } - }; - - const settingsChanged = useMemo(() => { - if (!channelSettings) return false; // if there are no channel settings - if (newSettings.length !== channelSettings.length) return true; // new settings length is not equal to channel settings - let isUnchanged = true; - for (let i = 0; i < newSettings.length; i++) { - const setting1 = newSettings[i]; - const setting2 = channelSettings[i]; - if (setting1.type === 1) { - isUnchanged = - isUnchanged && - setting1.type === setting2.type && - setting1.description === setting2.description && - setting1.default === setting2.default; - } else if (setting1.type === 2) { - isUnchanged = - isUnchanged && - setting1.type === setting2.type && - setting1.description === setting2.description && - setting1.default === setting2.default && - setting1.enabled === setting2.enabled && - setting1.lowerLimit === setting2.lowerLimit && - setting1.upperLimit === setting2.upperLimit && - setting1.ticker === setting2.ticker; - } - } - return isUnchanged === false; - }, [newSettings, channelSettings]); - - return ( - - {errorMessage && ( - - )} - - - - - - - {pushApprovalAmount >= EDIT_SETTING_FEE ? ( - - ) : ( - - )} - - - ); -}; - -export { NotificationSettingsFooter }; diff --git a/src/modules/notifSettings/components/NotificationSettingsHeader.tsx b/src/modules/notifSettings/components/NotificationSettingsHeader.tsx deleted file mode 100644 index 09ef370cd1..0000000000 --- a/src/modules/notifSettings/components/NotificationSettingsHeader.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { FC } from 'react'; - -import { Add, Box, Button, Text } from 'blocks'; - -import { ModalResponse } from 'common'; - -import { ChannelSetting } from 'modules/channelDashboard/ChannelDashboard.types'; -import { settingInitialValue } from '../NotificationSettings.constants'; - -type NotificationSettingsHeaderProps = { - modalControl: ModalResponse; - setSettingsToEdit: (settingsToEdit: ChannelSetting) => void; -}; -const NotificationSettingsHeader: FC = ({ modalControl, setSettingsToEdit }) => { - const { open } = modalControl; - - return ( - - - - Notification Settings - - - Add, Edit or Remove Notification Settings - - - - - ); -}; - -export { NotificationSettingsHeader }; diff --git a/src/modules/notifSettings/components/NotificationSettingsListItem.tsx b/src/modules/notifSettings/components/NotificationSettingsListItem.tsx deleted file mode 100644 index d680787b22..0000000000 --- a/src/modules/notifSettings/components/NotificationSettingsListItem.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { FC } from 'react'; - -import { Box, Dropdown, KebabMenuVertical, Lozenge, Menu, MenuItem, OptOut, Pencil, Skeleton, Text } from 'blocks'; - -import { ChannelSetting } from 'modules/channelDashboard/ChannelDashboard.types'; - -import { ModalResponse } from 'common'; - -type NotificationSettingsListItemProps = { - setting: ChannelSetting; - loadingSettings: boolean; - modalControl: ModalResponse; - setSettingsToEdit: (settingsToEdit: ChannelSetting) => void; - handleDeleteSetting: (settingToDelete: ChannelSetting) => void; - handleSettingsChange: (setting: ChannelSetting) => void; -}; - -const NotificationSettingsListItem: FC = ({ - setting, - modalControl, - loadingSettings, - setSettingsToEdit, - handleDeleteSetting, -}) => { - const { open } = modalControl; - - return ( - - - - - {setting.description} - - {setting.type == 2 && Range} - {setting.type == 3 && Multi-Range} - - - - } - onClick={() => { - setSettingsToEdit(setting); - open(); - }} - /> - } - onClick={() => { - handleDeleteSetting(setting); - }} - /> - - } - > - - - - - - ); -}; - -export default NotificationSettingsListItem; diff --git a/src/modules/notifSettings/components/NotificationSettingsLists.tsx b/src/modules/notifSettings/components/NotificationSettingsLists.tsx deleted file mode 100644 index 108acaf103..0000000000 --- a/src/modules/notifSettings/components/NotificationSettingsLists.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { FC } from 'react'; - -import { Box, Separator } from 'blocks'; - -import { ModalResponse } from 'common'; - -import { ChannelSetting } from 'modules/channelDashboard/ChannelDashboard.types'; - -import NotificationSettingsListItem from './NotificationSettingsListItem'; - -type NotificationSettingsListsProps = { - newSettings: ChannelSetting[]; - loadingSettings: boolean; - modalControl: ModalResponse; - setSettingsToEdit: (settingsToEdit: ChannelSetting) => void; - handleDeleteSetting: (settingToDelete: ChannelSetting) => void; - handleSettingsChange: (setting: ChannelSetting) => void; -}; - -const NotificationSettingsLists: FC = ({ - newSettings, - loadingSettings, - modalControl, - setSettingsToEdit, - handleDeleteSetting, - handleSettingsChange, -}) => { - return ( - - {newSettings.map((setting: ChannelSetting, index: number) => { - return ( - - - - - ); - })} - - ); -}; - -export { NotificationSettingsLists }; diff --git a/src/modules/notifSettings/components/NotificationSettingsModal.tsx b/src/modules/notifSettings/components/NotificationSettingsModal.tsx deleted file mode 100644 index 6fd61f5734..0000000000 --- a/src/modules/notifSettings/components/NotificationSettingsModal.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { FC } from 'react'; - -import { Modal } from 'blocks'; - -import { ModalResponse } from 'common'; - -import { ChannelSetting } from 'modules/channelDashboard/ChannelDashboard.types'; - -import { AddNotificationSettingsModalContent } from './AddNotificationSettingsModalContent'; -import { EditNotificationSettingsFormProvider } from '../EditNotificationSetting.form'; - -type NotificationSettingsModalProps = { - modalControl: ModalResponse; - settingsToEdit: ChannelSetting; - setNewSettings: (setting: ChannelSetting[]) => void; - handleSettingsChange: (setting: ChannelSetting) => void; -}; -const NotificationSettingsModal: FC = ({ - modalControl, - settingsToEdit, - handleSettingsChange, -}) => { - const { isOpen, onClose } = modalControl; - - const handleAddSettings = (values: NotificationSettingFormValues) => { - const index = settingsToEdit.index !== 0 ? settingsToEdit.index : Math.floor(Math.random() * 1000000); - - const newAddedSettings: ChannelSetting = values.enableRange - ? values.enableMultiRange - ? { - type: 3, - default: { - lower: Number(values.multirangelowerlimit), - upper: Number(values.multirangeupperlimit), - }, - enabled: values.isDefault, - description: values.settingName, - lowerLimit: Number(values.rangelowerlimit), - upperLimit: Number(values.rangeupperlimit), - ticker: Number(values.sliderStepValue), - index: index, - } - : { - type: 2, - default: Number(values.defaultValue), - enabled: values.isDefault, - description: values.settingName, - lowerLimit: Number(values.rangelowerlimit), - upperLimit: Number(values.rangeupperlimit), - ticker: Number(values.sliderStepValue), - index: index, - } - : { - type: 1, - default: values.isDefault, - description: values.settingName, - index: index, - }; - - handleSettingsChange(newAddedSettings); - - onClose(); - }; - - return ( - - { - handleAddSettings(values); - }} - > - - - - ); -}; - -export { NotificationSettingsModal }; diff --git a/src/modules/notifSettings/components/NotificationSettingsRangeSelector.tsx b/src/modules/notifSettings/components/NotificationSettingsRangeSelector.tsx deleted file mode 100644 index 48a0ff7348..0000000000 --- a/src/modules/notifSettings/components/NotificationSettingsRangeSelector.tsx +++ /dev/null @@ -1,227 +0,0 @@ -import { useMemo, useState } from 'react'; - -import { Box, Text, TextInput } from 'blocks'; - -import Checkbox from 'components/reusables/checkbox/Checkbox'; - -import InputSlider from 'components/reusables/sliders/InputSlider'; -import RangeSlider from 'components/reusables/sliders/RangeSlider'; - -import { useEditNotificationSettingsForm } from '../EditNotificationSetting.form'; - -const NotificationSettingsRangeSelector = () => { - const { values: formValues, handleChange, setFieldValue } = useEditNotificationSettingsForm(); - - const showPreview = useMemo(() => { - return ( - formValues.rangelowerlimit > 0 && - formValues.rangeupperlimit > 0 && - (formValues.enableMultiRange - ? formValues.multirangelowerlimit > 0 && formValues.multirangeupperlimit > 0 - : formValues.defaultValue > 0) && - formValues.sliderStepValue > 0 && - Number(formValues.rangelowerlimit) <= Number(formValues.rangeupperlimit) && - Number(formValues.sliderStepValue) > 0 && - Number(formValues.sliderStepValue) <= Number(formValues.rangeupperlimit) - Number(formValues.rangelowerlimit) && - (formValues.enableMultiRange - ? Number(formValues.multirangelowerlimit) >= Number(formValues.rangelowerlimit) && - Number(formValues.multirangeupperlimit) <= Number(formValues.rangeupperlimit) && - Number(formValues.multirangeupperlimit) > Number(formValues.multirangelowerlimit) - : Number(formValues.defaultValue) >= Number(formValues.rangelowerlimit) && - Number(formValues.defaultValue) <= Number(formValues.rangeupperlimit)) - ); - }, [ - formValues.rangelowerlimit, - formValues.rangeupperlimit, - formValues.defaultValue, - formValues.sliderStepValue, - formValues.multirangelowerlimit, - formValues.multirangeupperlimit, - formValues.enableMultiRange, - ]); - - const [sliderPreviewVal, setSliderPreviewVal] = useState(formValues.defaultValue); - const [sliderPreviewStartVal, setSliderPreviewStartVal] = useState(formValues.multirangelowerlimit); - const [sliderPreviewEndVal, setSliderPreviewEndVal] = useState(formValues.multirangeupperlimit); - - return ( - <> - - Range Values - - - to - { - setFieldValue('rangeupperlimit', e.target.value); - }} - /> - - - - - setFieldValue('enableMultiRange', !formValues.enableMultiRange)} - /> - - - Enable Multi Range - - User can select a range of values in the slider - - - - {!formValues.enableMultiRange && ( - { - setSliderPreviewVal(Number(e.target.value)); - setFieldValue('defaultValue', e.target.value); - }} - label="Default Value" - /> - )} - - {formValues.enableMultiRange && ( - - Range Values - - { - setFieldValue('multirangelowerlimit', e.target.value); - setSliderPreviewStartVal(Number(e.target.value)); - }} - /> - to - { - setFieldValue('multirangeupperlimit', e.target.value); - setSliderPreviewEndVal(Number(e.target.value)); - }} - /> - - - )} - - - { - handleChange('sliderStepValue'); - setFieldValue('sliderStepValue', e.target.value); - }} - label="Slider Step Value" - /> - - - {showPreview && ( - - Preview - - {!formValues.enableMultiRange && ( - - {formValues.rangelowerlimit} - - { - setSliderPreviewVal(x); - }} - preview={true} - /> - - {formValues.rangeupperlimit} - - )} - - {formValues.enableMultiRange && ( - - {formValues.rangelowerlimit} - - { - setSliderPreviewStartVal(startVal); - setSliderPreviewEndVal(endVal); - }} - preview={true} - /> - - {formValues.rangeupperlimit} - - )} - - )} - - ); -}; - -export { NotificationSettingsRangeSelector }; diff --git a/src/pages/NotificationSettingsPage.tsx b/src/pages/NotificationSettingsPage.tsx deleted file mode 100644 index b96727078a..0000000000 --- a/src/pages/NotificationSettingsPage.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ContentLayout } from 'common'; -import { NotificationSettings } from 'modules/notifSettings/NotificationSettings'; - -const NotificationSettingsPage = () => { - return ( - - - - ); -}; - -export default NotificationSettingsPage; diff --git a/src/queries/hooks/index.ts b/src/queries/hooks/index.ts index af7cf2c265..6442083f4e 100644 --- a/src/queries/hooks/index.ts +++ b/src/queries/hooks/index.ts @@ -4,4 +4,3 @@ export * from './user'; export * from './rewards'; export * from './pointsVault'; export * from './analytics'; -export * from './notificationSettings'; diff --git a/src/queries/hooks/notificationSettings/index.ts b/src/queries/hooks/notificationSettings/index.ts deleted file mode 100644 index 77a2c6839a..0000000000 --- a/src/queries/hooks/notificationSettings/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useCreateNotificationSettings'; diff --git a/src/queries/hooks/notificationSettings/useCreateNotificationSettings.ts b/src/queries/hooks/notificationSettings/useCreateNotificationSettings.ts deleted file mode 100644 index bf76f4faa3..0000000000 --- a/src/queries/hooks/notificationSettings/useCreateNotificationSettings.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { useMutation } from '@tanstack/react-query'; -import { addSettings } from 'queries/queryKeys'; -import { addNotificationSettings } from 'queries/services'; - -export const useCreateNotificationSettings = () => - useMutation({ - mutationKey: [addSettings], - mutationFn: addNotificationSettings, - }); diff --git a/src/queries/queryKeys.ts b/src/queries/queryKeys.ts index fb81779d99..ec74ac79f5 100644 --- a/src/queries/queryKeys.ts +++ b/src/queries/queryKeys.ts @@ -1,6 +1,5 @@ export const UserRewardsDetails = 'userRewardsDetails'; export const addDelegate = 'addDelegate'; -export const addSettings = 'addSettings'; export const addNewSubgraph = 'addNewSubgraph'; export const aliasInfo = 'aliasInfo'; export const allActivities = 'allActivities'; diff --git a/src/queries/services/index.ts b/src/queries/services/index.ts index 632b38dfaa..18dae290cf 100644 --- a/src/queries/services/index.ts +++ b/src/queries/services/index.ts @@ -4,4 +4,3 @@ export * from './rewards'; export * from './pointsVault'; export * from './createChannel'; export * from './analytics'; -export * from './notificationSettings'; diff --git a/src/queries/services/notificationSettings/addNotificationSettings.ts b/src/queries/services/notificationSettings/addNotificationSettings.ts deleted file mode 100644 index e4acb2d0c4..0000000000 --- a/src/queries/services/notificationSettings/addNotificationSettings.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { AddNotificationSettingsProps } from 'queries/types'; - -export const addNotificationSettings = async ({ - userPushSDKInstance, - settings, -}: AddNotificationSettingsProps): Promise<{ - transactionHash: any; -}> => await userPushSDKInstance.channel.setting(settings); diff --git a/src/queries/services/notificationSettings/index.ts b/src/queries/services/notificationSettings/index.ts deleted file mode 100644 index 6036f70337..0000000000 --- a/src/queries/services/notificationSettings/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './addNotificationSettings'; diff --git a/src/queries/types/index.ts b/src/queries/types/index.ts index a99590a6c3..5f30e3836e 100644 --- a/src/queries/types/index.ts +++ b/src/queries/types/index.ts @@ -3,4 +3,3 @@ export * from './user'; export * from './rewards'; export * from './pointsVault'; export * from './createChannel'; -export * from './notificationsettings'; diff --git a/src/queries/types/notificationsettings.ts b/src/queries/types/notificationsettings.ts deleted file mode 100644 index 7dfb3977e8..0000000000 --- a/src/queries/types/notificationsettings.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { ChannelSetting } from 'modules/channelDashboard/ChannelDashboard.types'; - -export type AddNotificationSettingsProps = { - userPushSDKInstance: any; - settings: ChannelSetting[]; -}; diff --git a/src/structure/MasterInterfacePage.tsx b/src/structure/MasterInterfacePage.tsx index 3aa5d59373..aa796d0cf3 100644 --- a/src/structure/MasterInterfacePage.tsx +++ b/src/structure/MasterInterfacePage.tsx @@ -33,7 +33,6 @@ const NotAvailablePage = lazy(() => import('pages/NotAvailablePage')); const NotFoundPage = lazy(() => import('pages/NotFoundPage')); const ReceiveNotifsPage = lazy(() => import('pages/ReceiveNotifsPage')); const NotifSettingsPage = lazy(() => import('pages/NotifSettingsPage')); -const NotificationSettingsPage = lazy(() => import('pages/NotificationSettingsPage')); const SendNotifsPage = lazy(() => import('pages/SendNotifsPage')); const SpacePage = lazy(() => import('pages/SpacePage')); const SupportPage = lazy(() => import('pages/SupportPage')); @@ -329,13 +328,9 @@ function MasterInterfacePage() { path={APP_PATHS.UserSettings} element={} /> - {/* } - /> */} } + element={} />