feat: introducing new feature 'Notifications'

packages/extension-base/src/defaults.ts

@@ -16,7 +16,8 @@ const START_WITH_PATH = [
   '/send/',
   '/settingsfs/',
   '/stake/',
-  '/socialRecovery/'
+  '/socialRecovery/',
+  '/notification/'
 ] as const;
 
 const ROOT_PATH = [

packages/extension-polkagate/src/components/ActionButton.tsx

@@ -11,8 +11,43 @@ import { noop } from '@polkadot/util';
 import { useIsDark, useIsExtensionPopup, useIsHovered } from '../hooks';
 import TwoToneText from './TwoToneText';
 
+interface IconElementProp {
+  iconVariant?: 'Bulk' | 'Broken' | 'TwoTone' | 'Outline' | 'Linear' | 'Bold';
+  iconVariantOnHover?: 'Bulk' | 'Broken' | 'TwoTone' | 'Outline' | 'Linear' | 'Bold';
+  IconName: Icon | undefined;
+  disabled?: boolean;
+  isBlueish?: boolean;
+  iconSize?: number;
+  iconAlwaysBold?: boolean;
+  hovered: boolean;
+}
+
+const IconElement = ({ IconName, disabled, hovered, iconAlwaysBold, iconSize, iconVariant, iconVariantOnHover, isBlueish }: IconElementProp) => {
+  const theme = useTheme();
+
+  return (IconName
+    ? (
+      <IconName
+        color={
+          disabled
+            ? '#BEAAD84D'
+            : isBlueish
+              ? theme.palette.text.highlight
+              : theme.palette.primary.main
+        }
+        size={iconSize}
+        variant={
+          (iconAlwaysBold ?? hovered)
+            ? iconVariantOnHover ?? 'Bold'
+            : iconVariant ?? 'Bulk'
+        }
+      />)
+    : undefined);
+};
+
 export interface ActionButtonProps {
   StartIcon?: Icon;
+  EndIcon?: Icon;
   iconVariant?: 'Bulk' | 'Broken' | 'TwoTone' | 'Outline' | 'Linear' | 'Bold';
   iconVariantOnHover?: 'Bulk' | 'Broken' | 'TwoTone' | 'Outline' | 'Linear' | 'Bold';
   contentPlacement?: 'start' | 'center' | 'end';
@@ -27,7 +62,7 @@ export interface ActionButtonProps {
   variant?: 'text' | 'contained' | 'outlined';
 }
 
-export default function ActionButton ({ StartIcon, contentPlacement = 'start', disabled, iconAlwaysBold, iconSize = 20, iconVariant, iconVariantOnHover, isBlueish, isBusy, onClick, style, text, variant }: ActionButtonProps): React.ReactElement<ActionButtonProps> {
+export default function ActionButton ({ EndIcon, StartIcon, contentPlacement = 'start', disabled, iconAlwaysBold, iconSize = 20, iconVariant, iconVariantOnHover, isBlueish, isBusy, onClick, style, text, variant }: ActionButtonProps): React.ReactElement<ActionButtonProps> {
   const theme = useTheme();
   const isDark = useIsDark();
   const containerRef = useRef(null);
@@ -66,6 +101,16 @@ export default function ActionButton ({ StartIcon, contentPlacement = 'start', d
     }
   };
 
+  const EndIconStyle = {
+    '& .MuiButton-endIcon': {
+      marginLeft: '10px',
+      marginRight: 0
+    },
+    '& .MuiButton-endIcon svg': {
+      color: disabled ? '#BEAAD84D' : '#BEAAD8'
+    }
+  };
+
   const renderText = useMemo(() => {
     if (typeof text === 'string') {
       return <span style={{ color: disabled ? '#BEAAD84D' : isDark ? isBlueish ? '#809ACB' : '#BEAAD8' : '#745D8B', whiteSpace: 'nowrap', ...ButtonFontStyle }}>
@@ -88,32 +133,37 @@ export default function ActionButton ({ StartIcon, contentPlacement = 'start', d
   return (
     <Button
       disabled={disabled || isBusy}
+      endIcon={
+        <IconElement
+          IconName={EndIcon}
+          disabled={disabled}
+          hovered={hovered}
+          iconAlwaysBold={iconAlwaysBold}
+          iconSize={iconSize}
+          iconVariant={iconVariant}
+          iconVariantOnHover={iconVariantOnHover}
+          isBlueish={isBlueish}
+        />}
       onClick={onClick ?? noop}
       ref={containerRef}
-      startIcon={StartIcon
-        ? (
-          <StartIcon
-            color={
-              disabled
-                ? '#BEAAD84D'
-                : isBlueish
-                  ? theme.palette.text.highlight
-                  : theme.palette.primary.main
-            }
-            size={iconSize}
-            variant={
-              (iconAlwaysBold ?? hovered)
-                ? iconVariantOnHover ?? 'Bold'
-                : iconVariant ?? 'Bulk'
-            }
-          />)
-        : undefined}
+      startIcon={
+        <IconElement
+          IconName={StartIcon}
+          disabled={disabled}
+          hovered={hovered}
+          iconAlwaysBold={iconAlwaysBold}
+          iconSize={iconSize}
+          iconVariant={iconVariant}
+          iconVariantOnHover={iconVariantOnHover}
+          isBlueish={isBlueish}
+        />}
       sx={{
         '&.Mui-disabled': {
           backgroundColor: '#2D1E4A4D'
         },
         ...GeneralButtonStyle,
         ...StartIconStyle,
+        ...EndIconStyle,
         ...style
       }}
       variant={variant}

packages/extension-polkagate/src/components/ActionCard.tsx

@@ -19,9 +19,12 @@ interface Props {
   onClick: () => void;
   style?: SxProps<Theme>;
   title: string;
+  children?: React.ReactNode;
+  showColorBall?: boolean;
+  showChevron?: boolean;
 }
 
-function ActionCard ({ Icon, description, iconColor = '#AA83DC', iconSize = 30, iconWithBackground, iconWithoutTransform, logoIcon, onClick, style, title }: Props): React.ReactElement {
+function ActionCard ({ Icon, children, description, iconColor = '#AA83DC', iconSize = 30, iconWithBackground, iconWithoutTransform, logoIcon, onClick, showChevron = true, showColorBall = true, style, title }: Props): React.ReactElement {
   const theme = useTheme();
   const isDark = useIsDark();
   const containerRef = useRef(null);
@@ -44,6 +47,7 @@ function ActionCard ({ Icon, description, iconColor = '#AA83DC', iconSize = 30,
   const colorBallStyle: React.CSSProperties = {
     backgroundColor: '#CC429D',
     borderRadius: '50%',
+    display: showColorBall ? 'initial' : 'none',
     filter: 'blur(28px)', // Glow effect
     height: '42px',
     left: '1px',
@@ -87,17 +91,18 @@ function ActionCard ({ Icon, description, iconColor = '#AA83DC', iconSize = 30,
           sx={{ ...IconStyle, height: '34px', p: '2px', width: '34px' }}
         />
       }
-      <Grid container item>
+      <Grid container item xs>
         <Grid alignItems='center' container item>
           <Typography color={hovered ? '#AA83DC' : theme.palette.text.primary} sx={{ transition: 'all 250ms ease-out' }} variant='B-2'>
             {title}
           </Typography>
-          <ArrowRight2 color={hovered ? '#AA83DC' : theme.palette.text.primary} size='12' style={chevronStyle} />
+          {showChevron && <ArrowRight2 color={hovered ? '#AA83DC' : theme.palette.text.primary} size='12' style={chevronStyle} />}
         </Grid>
         <Typography color={theme.palette.text.secondary} textAlign='left' variant='B-4'>
           {description}
         </Typography>
       </Grid>
+      {children}
       <div style={colorBallStyle} />
     </Container>
   );

packages/extension-polkagate/src/components/TwoToneText.tsx

@@ -13,7 +13,7 @@ interface Props {
 
 function TwoToneText ({ backgroundColor, color = '#BEAAD8', style = {}, text, textPartInColor = '' }: Props): React.ReactElement {
   if (!textPartInColor) {
-    return <span>{text}</span>;
+    return <span style={{ ...style }}>{text}</span>;
   }
 
   return (

packages/extension-polkagate/src/fullscreen/components/layout/Notifications.tsx

@@ -1,69 +1,94 @@
 // Copyright 2019-2025 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+/* eslint-disable react/jsx-first-prop-new-line */
+
 import { Box, Grid } from '@mui/material';
-import { Notification } from 'iconsax-react';
-import React, { useCallback } from 'react';
+import { Notification as NotificationIcon } from 'iconsax-react';
+import React, { useCallback, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { useIsExtensionPopup, useNotifications } from '@polkadot/extension-polkagate/src/hooks';
+import { ExtensionPopups } from '@polkadot/extension-polkagate/src/util/constants';
+import { useExtensionPopups } from '@polkadot/extension-polkagate/src/util/handleExtensionPopup';
+
+import Notification from '../../notification';
 
-import { useAlerts, useTranslation } from '@polkadot/extension-polkagate/src/hooks';
+const NotificationButton = ({ hasNewNotification, onClick }: { hasNewNotification: boolean; onClick: () => void; }) => (
+  <Grid alignItems='center' container item justifyContent='center' onClick={onClick}
+    sx={{
+      '&:hover': { background: '#674394' },
+      '&:hover .notification-dot': { borderColor: '#674394' },
+      backdropFilter: 'blur(20px)',
+      background: '#2D1E4A80',
+      borderRadius: '12px',
+      boxShadow: '0px 0px 24px 8px #4E2B7259 inset',
+      cursor: 'pointer',
+      height: '32px',
+      position: 'relative',
+      transition: 'all 250ms ease-out',
+      width: '32px'
+    }}
+  >
+    <Box className='notification-dot'
+      sx={{
+        bgcolor: '#FF4FB9',
+        border: '1.5px solid #2D1E4A',
+        borderRadius: '50%',
+        display: hasNewNotification ? 'block' : 'none',
+        height: '9px',
+        position: 'absolute',
+        right: '5px',
+        top: '5px',
+        transition: 'border-color 200ms ease',
+        width: '9px',
+        zIndex: 1
+      }}
+    />
+    <NotificationIcon
+      color='#AA83DC'
+      size='20'
+      style={{ cursor: 'pointer', transform: 'rotate(30deg)' }}
+      variant='Bold'
+    />
+  </Grid>
+);
 
 function Notifications (): React.ReactElement {
-    const { notify } = useAlerts();
-    const { t } = useTranslation();
+  const isExtension = useIsExtensionPopup();
+  const navigate = useNavigate();
+  const { extensionPopup, extensionPopupCloser, extensionPopupOpener } = useExtensionPopups();
+  const { notificationItems } = useNotifications();
 
-    const onClick = useCallback(() => {
-      notify(t('Coming Soon!'), 'info');
-    }, [notify, t]);
+  const hasNewNotification = useMemo(() => {
+    if (!notificationItems) {
+      return false;
+    }
 
-  return (
-    <Grid
-      alignItems='center'
-      container
-      item
-      justifyContent='center'
-      onClick={onClick}
-      sx={{
-        '&:hover': {
-          background: '#674394'
-        },
-        '&:hover .notification-dot': {
-          borderColor: '#674394'
-        },
+    return Object.values(notificationItems).flat().some(({ read }) => !read);
+  }, [notificationItems]);
 
-        backdropFilter: 'blur(20px)',
-        background: '#2D1E4A80',
-        borderRadius: '12px',
-        boxShadow: '0px 0px 24px 8px #4E2B7259 inset',
-        cursor: 'pointer',
-        height: '32px',
-        position: 'relative',
-        transition: 'all 250ms ease-out',
-        width: '32px'
+  const onClick = useCallback(() => {
+    if (isExtension) {
+      navigate('/notification') as void;
 
-      }}
-    >
-      <Box
-        className='notification-dot'
-        sx={{
-          bgcolor: '#FF4FB9',
-          border: '1.5px solid #2D1E4A',
-          borderRadius: '50%',
-          height: '9px',
-          position: 'absolute',
-          right: '5px',
-          top: '5px',
-          transition: 'border-color 200ms ease',
-          width: '9px',
-          zIndex: 1
-        }}
-      />
-      <Notification
-        color='#AA83DC'
-        size='20'
-        style={{ cursor: 'pointer', transform: 'rotate(30deg)' }}
-        variant='Bold'
+      return;
+    }
+
+    extensionPopupOpener(ExtensionPopups.NOTIFICATION)();
+  }, [extensionPopupOpener, isExtension, navigate]);
+
+  return (
+    <>
+      <NotificationButton
+        hasNewNotification={hasNewNotification}
+        onClick={onClick}
       />
-    </Grid>
+      {extensionPopup === ExtensionPopups.NOTIFICATION &&
+        <Notification
+          handleClose={extensionPopupCloser}
+        />}
+    </>
   );
 }