diff --git a/apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsBellContainer.tsx b/apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsBellContainer.tsx index 1e5022bce7..77724a8d73 100644 --- a/apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsBellContainer.tsx +++ b/apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsBellContainer.tsx @@ -1,8 +1,10 @@ import React, { useState } from 'react'; +import { useHistory } from 'react-router'; import { Dropdown } from 'antd'; import { usePostHogClientContext } from '@providers/PostHogClientProvider'; import { ExperimentName } from '@lib/scripts/types/feature-flags'; +import { walletRoutePaths } from '@routes'; import { NotificationsBell } from './NotificationsBell'; import { NotificationsDropDown } from './NotificationsDropDown'; @@ -13,7 +15,7 @@ export interface NotificationsCenterContainerProps { export const NotificationsBellContainer = ({ popupView }: NotificationsCenterContainerProps): React.ReactElement => { const posthog = usePostHogClientContext(); - + const history = useHistory(); const [isOpen, setIsOpen] = useState(false); // TODO Connect with notifications center @@ -38,6 +40,7 @@ export const NotificationsBellContainer = ({ popupView }: NotificationsCenterCon const handleViewAll = () => { setIsOpen(false); + history.push(walletRoutePaths.notifications); }; return ( diff --git a/apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsCenter.module.scss b/apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsCenter.module.scss new file mode 100644 index 0000000000..7feec7c019 --- /dev/null +++ b/apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsCenter.module.scss @@ -0,0 +1,6 @@ +@import '../../../../../packages/core/src/ui/styles/theme.scss'; +@import '../../../../../packages/common/src/ui/styles/theme.scss'; + +.button { + max-width: size_unit(25); +} diff --git a/apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsCenter.tsx b/apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsCenter.tsx new file mode 100644 index 0000000000..b92d1f2923 --- /dev/null +++ b/apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsCenter.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { Box, Flex } from '@input-output-hk/lace-ui-toolkit'; + +import { Button, NavigationButton } from '@lace/common'; +import { SectionTitle } from '@components/Layout/SectionTitle'; + +import styles from './NotificationsCenter.module.scss'; + +export interface NotificationsCenterProps { + onBack: () => void; + onMarkAllAsRead: () => void; + popupView?: boolean; +} + +export const NotificationsCenter = ({ + onBack, + onMarkAllAsRead, + popupView +}: NotificationsCenterProps): React.ReactElement => { + const { t } = useTranslation(); + + return ( + + + + + + {t('notificationsCenter.title')} + + } + /> + + {!popupView && ( + + )} + + Notifications Center (Placeholder content) + + ); +}; diff --git a/apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsCenterContainer.tsx b/apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsCenterContainer.tsx new file mode 100644 index 0000000000..84afa52bf5 --- /dev/null +++ b/apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsCenterContainer.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { useHistory } from 'react-router'; + +import { useWalletStore } from '@stores'; +import { APP_MODE_POPUP } from '@src/utils/constants'; + +import { NotificationsCenter } from './NotificationsCenter'; + +export const NotificationsCenterContainer = (): React.ReactElement => { + const history = useHistory(); + const { walletUI } = useWalletStore(); + + return ( + history.goBack()} + onMarkAllAsRead={() => { + // TODO connect with notifications center + // eslint-disable-next-line no-console + console.log('onMarkAllAsRead'); + }} + popupView={walletUI.appMode === APP_MODE_POPUP} + /> + ); +}; diff --git a/apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsCenterLayout.tsx b/apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsCenterLayout.tsx new file mode 100644 index 0000000000..e5d6053480 --- /dev/null +++ b/apps/browser-extension-wallet/src/components/NotificationsCenter/NotificationsCenterLayout.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +import { Layout, SectionLayout } from '@src/views/browser-view/components/Layout'; +import { EducationalList } from '@src/views/browser-view/components'; +import { useTranslation } from 'react-i18next'; +import { getEducationalList } from '@src/views/browser-view/features/assets/components/AssetEducationalList/AssetEducationalList'; + +import { NotificationsCenterContainer } from './NotificationsCenterContainer'; + +export const NotificationsCenterLayout = (): React.ReactElement => { + const { t } = useTranslation(); + + const educationalItems = getEducationalList(t); + + return ( + <> + + + } + > + + + + + ); +}; diff --git a/apps/browser-extension-wallet/src/components/NotificationsCenter/index.ts b/apps/browser-extension-wallet/src/components/NotificationsCenter/index.ts index 5c47cc9253..4fd2a8cf07 100644 --- a/apps/browser-extension-wallet/src/components/NotificationsCenter/index.ts +++ b/apps/browser-extension-wallet/src/components/NotificationsCenter/index.ts @@ -1 +1,3 @@ export * from './NotificationsBellContainer'; +export * from './NotificationsCenterContainer'; +export * from './NotificationsCenterLayout'; diff --git a/apps/browser-extension-wallet/src/hooks/useNotificationsCenterConfig.ts b/apps/browser-extension-wallet/src/hooks/useNotificationsCenterConfig.ts new file mode 100644 index 0000000000..b300ba2f99 --- /dev/null +++ b/apps/browser-extension-wallet/src/hooks/useNotificationsCenterConfig.ts @@ -0,0 +1,12 @@ +import { ExperimentName } from '@lib/scripts/types/feature-flags'; +import { usePostHogClientContext } from '@providers/PostHogClientProvider'; + +export interface NotificationsCenterConfig { + isNotificationsCenterEnabled: boolean; +} + +export const useNotificationsCenterConfig = (): NotificationsCenterConfig => { + const posthog = usePostHogClientContext(); + + return { isNotificationsCenterEnabled: posthog?.isFeatureFlagEnabled(ExperimentName.NOTIFICATIONS_CENTER) ?? false }; +}; diff --git a/apps/browser-extension-wallet/src/routes/ExtensionRoutes.tsx b/apps/browser-extension-wallet/src/routes/ExtensionRoutes.tsx index 1c33ab70db..c93020dbb5 100644 --- a/apps/browser-extension-wallet/src/routes/ExtensionRoutes.tsx +++ b/apps/browser-extension-wallet/src/routes/ExtensionRoutes.tsx @@ -15,12 +15,15 @@ import { NftDetail, Nfts } from '@src/features/nfts'; import { useWalletStore } from '@stores'; import { config } from '@src/config'; import { Voting } from '@src/features/voting-beta/components'; +import { NotificationsCenterContainer } from '@src/components/NotificationsCenter'; +import { useNotificationsCenterConfig } from '@hooks/useNotificationsCenterConfig'; const { GOV_TOOLS_URLS } = config(); export const ExtensionRoutes = (): React.ReactElement => { const { isSharedWallet, environmentName } = useWalletStore(); const isVotingCenterEnabled = !!GOV_TOOLS_URLS[environmentName]; + const { isNotificationsCenterEnabled } = useNotificationsCenterConfig(); return ( @@ -30,6 +33,9 @@ export const ExtensionRoutes = (): React.ReactElement => { + {isNotificationsCenterEnabled && ( + + )} {!isSharedWallet && } diff --git a/apps/browser-extension-wallet/src/routes/wallet-paths.ts b/apps/browser-extension-wallet/src/routes/wallet-paths.ts index 050713f21b..275968f568 100644 --- a/apps/browser-extension-wallet/src/routes/wallet-paths.ts +++ b/apps/browser-extension-wallet/src/routes/wallet-paths.ts @@ -5,6 +5,7 @@ export const walletRoutePaths = { confirmDelegation: '/delegate/confirm', delegate: '/delegate', earn: '/earn', + notifications: '/notifications', nftDetail: '/nft/:id', nfts: '/nfts', assets: '/assets', diff --git a/apps/browser-extension-wallet/src/views/browser-view/routes/index.tsx b/apps/browser-extension-wallet/src/views/browser-view/routes/index.tsx index 25203eac76..b727234c70 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/routes/index.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/routes/index.tsx @@ -47,6 +47,8 @@ import { catchAndBrandExtensionApiError } from '@utils/catch-and-brand-extension import { removePreloaderIfExists } from '@utils/remove-reloader-if-exists'; import { ENHANCED_ANALYTICS_OPT_IN_STATUS_LS_KEY } from '@providers/AnalyticsProvider/config'; import { EnhancedAnalyticsOptInStatus } from '@providers/AnalyticsProvider/analyticsTracker'; +import { NotificationsCenterLayout } from '@components/NotificationsCenter'; +import { useNotificationsCenterConfig } from '@hooks/useNotificationsCenterConfig'; export const defaultRoutes: RouteMap = [ { @@ -84,6 +86,10 @@ export const defaultRoutes: RouteMap = [ { path: routes.nfts, component: NftsLayout + }, + { + path: routes.notifications, + component: NotificationsCenterLayout } ]; @@ -143,10 +149,12 @@ export const BrowserViewRoutes = ({ routesMap = defaultRoutes }: { routesMap?: R const posthogClientInitialized = useIsPosthogClientInitialized(); const location = useLocation<{ background?: Location }>(); const isVotingCenterEnabled = !!GOV_TOOLS_URLS[environmentName]; + const { isNotificationsCenterEnabled } = useNotificationsCenterConfig(); const availableRoutes = routesMap.filter((route) => { if (route.path === routes.staking && isSharedWallet) return false; if (route.path === routes.voting && !isVotingCenterEnabled) return false; + if (route.path === routes.notifications && !isNotificationsCenterEnabled) return false; return true; }); diff --git a/packages/translation/src/lib/translations/browser-extension-wallet/en.json b/packages/translation/src/lib/translations/browser-extension-wallet/en.json index a2125c176a..8589be0266 100644 --- a/packages/translation/src/lib/translations/browser-extension-wallet/en.json +++ b/packages/translation/src/lib/translations/browser-extension-wallet/en.json @@ -787,6 +787,7 @@ "notificationsCenter.allClear.description": "You don't have any notifications currently", "notificationsCenter.manageSubscriptions": "Manage subscriptions", "notificationsCenter.markAllAsRead": "Mark all as read", + "notificationsCenter.title": "Notifications", "notificationsCenter.viewAll": "View all", "poolDetails.delegate": "Delegate to this pool", "poolDetails.sectionTitle": "Pool detail",