Revert "New Snap Settings UI updated done (#1296)"

This reverts commit 9d40a73.
push-protocol · Nov 7, 2023 · bc00932 · bc00932
1 parent 5da316c
commit bc00932
Showing 1 changed file with 54 additions and 16 deletions.
diff --git a/src/components/userSettings/UserSettings.tsx b/src/components/userSettings/UserSettings.tsx
@@ -20,8 +20,6 @@ import ManageNotifSettingDropdown from 'components/dropdowns/ManageNotifSettingD
 
 // Internal Configs
 import { device } from 'config/Globals';
-import ChannelListSettings from 'components/channel/ChannelListSettings';
-import PushSnapSettings from 'components/MetamaskSnap/PushSnapSettings';
 import EmptyNotificationSettings from 'components/channel/EmptyNotificationSettings';
 
 interface ChannelListItem {
@@ -36,7 +34,6 @@ function UserSettings() {
   const { account, chainId } = useAccount();
   const { subscriptionStatus, userSettings: currentUserSettings } = useSelector((state: any) => state.channels);
   const [selectedOption, setSelectedOption] = useState(0);
-
   const [channelList, setChannelList] = useState<ChannelListItem[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
@@ -104,16 +101,12 @@ function UserSettings() {
     {
       value: 0,
       label: 'Notification Settings',
-      title:'Notification Settings'
     },
-    {
-      value: 1,
-      label: 'Push Snap',
-      title: ''
-    }
   ];
 
-
+  const userSettings = useMemo(() => {
+    return cloneDeep(currentUserSettings);
+  }, [currentUserSettings]);
 
   return (
     <Container>
@@ -133,11 +126,56 @@ function UserSettings() {
         </SelectSection>
         <ChannelWrapper>
           <ChannelContainer>
-            {selectOptions[selectedOption]?.title && <SectionTitle>{selectOptions[selectedOption]?.title}</SectionTitle>}
-
-            {selectedOption === 0 && <ChannelListSettings />}
-            {selectedOption === 1 && <PushSnapSettings />}
-
+            <SectionTitle>{selectOptions[selectedOption].label}</SectionTitle>
+            <>
+              {isLoading ? (
+                <CenterContainer>
+                  <LoaderSpinner />
+                </CenterContainer>
+              ) : (
+                <>
+                  {channelList.length > 0 ? (
+                    channelList.map((channel, index) => (
+                      <>
+                        {channel && (
+                          <>
+                            <SettingsListItem key={channel.id}>
+                              <SettingsListRow>
+                                <Icon src={channel.icon} />
+                                <ChannelName>{channel.name}</ChannelName>
+                              </SettingsListRow>
+                              <ManageNotifSettingDropdown
+                                userSetting={userSettings[channel.channel]}
+                                centerOnMobile={false}
+                                channelDetail={channel}
+                                onSuccessOptout={() => {
+                                  setChannelList((prevChannelList) =>
+                                    prevChannelList.filter((item) => item?.id !== channel.id)
+                                  );
+                                }}
+                              >
+                                <MoreButtonUI />
+                              </ManageNotifSettingDropdown>
+                            </SettingsListItem>
+                            {index !== channelList.length - 1 && <HR />}
+                          </>
+                        )}
+                      </>
+                    ))
+                  ) : (
+                    <CenterContainer>
+                      <EmptyNotificationSettings
+                        title="No Channel Opt-ins"
+                        description="Opt-in channels to manage your notification preferences"
+                        buttonTitle="Go to Channels"
+                        onClick={navigateToChannels}
+                        showTopBorder={false}
+                      />
+                    </CenterContainer>
+                  )}
+                </>
+              )}
+            </>
           </ChannelContainer>
         </ChannelWrapper>
       </Wrapper>
@@ -209,7 +247,7 @@ const SelectSection = styled.div`
   }
 `;
 
-const SelectListOption = styled(Button) <{ isSelected: boolean }>`
+const SelectListOption = styled(Button)<{ isSelected: boolean }>`
   background-color: ${(props) => (props.isSelected ? props.theme.default.secondaryBg : 'transparent')};
   color: ${(props) => props.theme.default.secondaryColor};
   border-radius: 12px;