Skip to content

fix: avoid re-rendering on notification removal [LW-13712] #2022

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 17, 2025
Merged

fix: avoid re-rendering on notification removal [LW-13712] #2022

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 35 additions & 25 deletions ...owser-extension-wallet/src/features/notifications-center/NotificationDetailsContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* eslint-disable react/no-multi-comp */
/* eslint-disable unicorn/no-useless-undefined */
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useCallback } from 'react';
import { WarningModal } from '@src/views/browser-view/components';
import { useTranslation } from 'react-i18next';
import { useHistory, useParams } from 'react-router';
Expand All @@ -11,28 +12,24 @@ import { Button, NavigationButton } from '@lace/common';
import { ContentLayout } from '@components/Layout';
import styles from './NotificationDetailsContainer.module.scss';

export const NotificationDetailsContainer = (): React.ReactElement => {
export const NotificationDetailsContent = (): React.ReactElement => {
const { t } = useTranslation();
const history = useHistory();
const { notifications, remove } = useNotificationsCenter();
const [notificationIdToRemove, setNotificationIdToRemove] = useState<string | undefined>();
const { id: notificationId } = useParams<{ id: string }>();
const notification = notifications?.find(({ message }) => message.id === notificationId);

const onBack = () => {
history.goBack();
};

const onViewAllNotification = () => {
history.push(walletRoutePaths.notifications);
};

useEffect(() => {
if (!notification && notifications?.length > 0) {
history.push(walletRoutePaths.notifications);
}
}, [notification, history, notifications?.length]);

const onRemoveNotification = useCallback(() => {
setNotificationIdToRemove(notificationId);
}, [notificationId]);

if (!notification) {
return <></>;
}
Expand All @@ -51,21 +48,34 @@ export const NotificationDetailsContainer = (): React.ReactElement => {
setNotificationIdToRemove(undefined);
}}
/>
<ContentLayout>
<Flex justifyContent="space-between" alignItems="center" gap="$8">
<Box className={styles.navigationButton}>
<NavigationButton icon="arrow" onClick={onBack} />
</Box>
<Button color="gradient" data-testid="view-all-button" onClick={onViewAllNotification}>
{t('notificationsCenter.viewAll')}
</Button>
</Flex>
<NotificationDetails
notification={notification}
onRemoveNotification={() => setNotificationIdToRemove(notificationId)}
popupView
/>
</ContentLayout>
<NotificationDetails notification={notification} onRemoveNotification={onRemoveNotification} popupView />
</>
);
};

export const NotificationDetailsContainer = (): React.ReactElement => {
const { t } = useTranslation();
const history = useHistory();

const onBack = useCallback(() => {
history.goBack();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what happens if this gets called from a bookmarked page?
}, [history]);

const onViewAllNotification = useCallback(() => {
history.push(walletRoutePaths.notifications);
}, [history]);

return (
<ContentLayout>
<Flex justifyContent="space-between" alignItems="center" gap="$8">
<Box className={styles.navigationButton}>
<NavigationButton icon="arrow" onClick={onBack} />
</Box>
<Button color="gradient" data-testid="view-all-button" onClick={onViewAllNotification}>
{t('notificationsCenter.viewAll')}
</Button>
</Flex>
<NotificationDetailsContent />
</ContentLayout>
);
};
72 changes: 45 additions & 27 deletions apps/browser-extension-wallet/src/features/notifications-center/NotificationsCenter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* eslint-disable react/no-multi-comp */
/* eslint-disable unicorn/no-useless-undefined */
/* eslint-disable @typescript-eslint/explicit-module-boundary-types, promise/catch-or-return, sonarjs/cognitive-complexity, no-magic-numbers, unicorn/no-null */
import React, { useState } from 'react';
import React, { useState, useCallback } from 'react';
import { ContentLayout } from '@src/components/Layout';
import { useTranslation } from 'react-i18next';
import { WarningModal } from '@src/views/browser-view/components';
Expand All @@ -14,7 +15,9 @@ import { SectionTitle } from '@components/Layout/SectionTitle';
import { SubscriptionsContainer } from './SubscriptionsContainer';
import styles from './NotificationsCenter.module.scss';

export const NotificationsCenter = (): React.ReactElement => {
const listWrapperStyles = { width: '100%' };

const NotificationsCenterContent = (): React.ReactElement => {
const { t } = useTranslation();
const [isRemoveNotificationModalVisible, setIsRemoveNotificationModalVisible] = useState(false);
const { notifications, remove, markAsRead } = useNotificationsCenter();
Expand All @@ -26,38 +29,24 @@ export const NotificationsCenter = (): React.ReactElement => {
setIsRemoveNotificationModalVisible(true);
};

const onHideRemoveNotificationModal = () => {
const onHideRemoveNotificationModal = useCallback(() => {
setNotificationIdToRemove(undefined);
setIsRemoveNotificationModalVisible(false);
};
}, [setNotificationIdToRemove, setIsRemoveNotificationModalVisible]);

const onGoToNotification = (id: string) => {
markAsRead(id);
history.push(`/notification/${id}`);
};

const isInitialLoad = typeof notifications === 'undefined';
const onGoToNotification = useCallback(
(id: string) => {
markAsRead(id);
history.push(`/notification/${id}`);
},
[markAsRead, history]
);

return (
<ContentLayout
title={
<SectionTitle
isPopup
title={
<Flex className={styles.navigationButton} py="$4" alignItems="center" gap="$8">
<NavigationButton icon="arrow" onClick={() => history.goBack()} />
{t('notificationsCenter.title')}
</Flex>
}
sideText={`(${notifications?.length ?? 0})`}
data-testid="notifications-center-title"
/>
}
isLoading={isInitialLoad}
>
<>
<Flex w="$fill" flexDirection="column" gap="$20">
<SubscriptionsContainer popupView />
<div style={{ width: '100%' }}>
<div style={listWrapperStyles}>
{notifications?.length > 0 ? (
<NotificationsList
onClick={onGoToNotification}
Expand Down Expand Up @@ -87,6 +76,35 @@ export const NotificationsCenter = (): React.ReactElement => {
}}
isPopupView
/>
</>
);
};

export const NotificationsCenter = (): React.ReactElement => {
const { t } = useTranslation();
const { notifications } = useNotificationsCenter();
const history = useHistory();

const isInitialLoad = typeof notifications === 'undefined';

return (
<ContentLayout
title={
<SectionTitle
isPopup
title={
<Flex className={styles.navigationButton} py="$4" alignItems="center" gap="$8">
<NavigationButton icon="arrow" onClick={() => history.goBack()} />
{t('notificationsCenter.title')}
</Flex>
}
sideText={`(${notifications?.length ?? 0})`}
data-testid="notifications-center-title"
/>
}
isLoading={isInitialLoad}
>
<NotificationsCenterContent />
</ContentLayout>
);
};
103 changes: 56 additions & 47 deletions ...let/src/views/browser-view/features/notifications-center/NotificationDetailsContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* eslint-disable react/no-multi-comp */
/* eslint-disable unicorn/no-useless-undefined */
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useCallback } from 'react';

import { SectionLayout, WarningModal, EducationalList } from '@src/views/browser-view/components';
import { useTranslation } from 'react-i18next';
Expand All @@ -18,22 +19,21 @@ import { Layout } from '@src/views/browser-view/components/Layout';
import styles from './NotificationsCenter.module.scss';
import { getEducationalList } from '../assets/components/AssetEducationalList/AssetEducationalList';

export const NotificationDetailsContainer = (): React.ReactElement => {
const NotificationDetailsContent = (): React.ReactElement => {
const { t } = useTranslation();
const history = useHistory();
const educationalItems = getEducationalList(t);
const { notifications, remove } = useNotificationsCenter();
const [notificationIdToRemove, setNotificationIdToRemove] = useState<string | undefined>();
const { id: notificationId } = useParams<{ id: string }>();
const notification = notifications?.find(({ message }) => message.id === notificationId);

const onBack = () => {
const onBack = useCallback(() => {
history.goBack();
};
}, [history]);

const onViewAllNotification = () => {
const onViewAllNotification = useCallback(() => {
history.push(walletRoutePaths.notifications);
};
}, [history]);

useEffect(() => {
if (!notification && notifications?.length > 0) {
Expand All @@ -59,46 +59,55 @@ export const NotificationDetailsContainer = (): React.ReactElement => {
setNotificationIdToRemove(undefined);
}}
/>
<Layout>
<SectionLayout
sidePanelContent={
<EducationalList items={educationalItems} title={t('browserView.sidePanel.aboutYourWallet')} />
}
>
<Flex alignItems="center" justifyContent="space-between" className={styles.header}>
<Box mb={'$0'}>
<SectionTitle
classname={styles.sectionTitle}
title={
<Flex className={styles.navigationButton} alignItems="center">
<NavigationButton icon="arrow" onClick={onBack} />
</Flex>
}
/>
</Box>
<Flex className={styles.actions} gap="$20">
<LaceButton.Secondary
size="medium"
onClick={() => setNotificationIdToRemove(notificationId)}
data-testid="view-all-button"
label={t('notificationsCenter.removeNotification.confirm')}
color="secondary"
icon={<TrashOutlineComponent className={styles.icon} data-testid="trash-icon" />}
/>
<Button
className={styles.button}
block
color="gradient"
data-testid="view-all-button"
onClick={onViewAllNotification}
>
{t('notificationsCenter.notificationDetails.viewAll')}
</Button>
</Flex>
</Flex>
<NotificationDetails notification={notification} />
</SectionLayout>
</Layout>
<Flex alignItems="center" justifyContent="space-between" className={styles.header}>
<Box mb={'$0'}>
<SectionTitle
classname={styles.sectionTitle}
title={
<Flex className={styles.navigationButton} alignItems="center">
<NavigationButton icon="arrow" onClick={onBack} />
</Flex>
}
/>
</Box>
<Flex className={styles.actions} gap="$20">
<LaceButton.Secondary
size="medium"
onClick={() => setNotificationIdToRemove(notificationId)}
data-testid="view-all-button"
label={t('notificationsCenter.removeNotification.confirm')}
color="secondary"
icon={<TrashOutlineComponent className={styles.icon} data-testid="trash-icon" />}
/>
<Button
className={styles.button}
block
color="gradient"
data-testid="view-all-button"
onClick={onViewAllNotification}
>
{t('notificationsCenter.notificationDetails.viewAll')}
</Button>
</Flex>
</Flex>
<NotificationDetails notification={notification} />
</>
);
};

export const NotificationDetailsContainer = (): React.ReactElement => {
const { t } = useTranslation();
const educationalItems = getEducationalList(t);

return (
<Layout>
<SectionLayout
sidePanelContent={
<EducationalList items={educationalItems} title={t('browserView.sidePanel.aboutYourWallet')} />
}
>
<NotificationDetailsContent />
</SectionLayout>
</Layout>
);
};
Loading
Loading