packages/extension-polkagate/src/partials/AccountMenu.tsx (2)

101-116: Consider performance impact of backdrop blur effect.

The blur effect (backdropFilter: 'blur(5px)') can impact performance on lower-end devices. Consider:

1. Using a semi-transparent background without blur for such devices
2. Adding a CSS @supports check for backdrop-filter

Example implementation:

/* Add to your styles */
@supports not (backdrop-filter: blur(5px)) {
  .dialog-backdrop {
    background-color: rgba(0, 0, 0, 0.5); /* fallback */
  }
}

---

120-121: Use theme colors for box shadow.

The box shadow color is hardcoded to white (rgba(255, 255, 255, 0.25)). For better theme support, consider using the theme's color system.

-sx={{ borderRadius: '10px 10px 0px 0px', boxShadow: '0px 0px 10px rgba(255, 255, 255, 0.25)', height: 'parent.innerHeight' }}
+sx={(theme) => ({
+  borderRadius: '10px 10px 0px 0px',
+  boxShadow: `0px 0px 10px ${theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.25)' : 'rgba(0, 0, 0, 0.25)'}`,
+  height: 'parent.innerHeight'
+})}

packages/extension-polkagate/src/partials/Menu.tsx (2)

60-65: Consider handling errors more robustly.
While calling “catch(console.error)” is sufficient for logging errors, consider whether more granular error handling or user-facing error reporting may be beneficial.

---

143-176: Remove the unnecessary fragment around a single child.
Static analysis identified lines 162–174 as an unneeded React fragment. You can remove it to simplify the JSX.

Proposed diff to remove the redundant fragment:

-                  <>
                   <Grid item>
                     <Infotip2
                       text={t('Switch Theme')}
                     >
                       <IconButton
                         sx={{ height: '35px', p: 0, width: '35px' }}
                       >
                         <ThemeChanger color='secondary.light' noBorder />
                       </IconButton>
                     </Infotip2>
                   </Grid>
-                  </>

🧰 Tools

🪛 Biome (1.9.4)

[error] 162-174: Avoid using unnecessary Fragment.

A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment

(lint/complexity/noUselessFragments)

packages/extension-polkagate/src/util/workers/utils/newReferendaNotification.js (1)

22-30: Improve type safety and error handling in getRefStatus

The function could benefit from proper TypeScript typing and explicit error handling.

-const getRefStatus = (/** @type {{ [x: string]: any; }} */ item) => {
+const getRefStatus = (item: Referenda): string => {
   for (const status of REFERENDA_STATUS) {
     if (item[status]) {
       return status;
     }
   }
-  return 'ongoing';
+  return 'ongoing' as const;
 };

packages/extension-polkagate/src/popup/notification/Notifications.tsx (3)

38-70: Provide user-friendly guidance when no notifications exist
Currently, the user sees the "Introducing notifications!" message in the "FirstNotification" component when there are no notifications. Consider providing a brief step-by-step guide or a tooltip explaining how notifications are generated or triggered.

---

72-92: Use React Fragments to avoid extra DOM elements
In the "NotificationList" map, multiple adjacent elements (NotificationItem and Divider) are wrapped in a <> fragment. To ensure better React rendering performance and avoid unintentional keys assigned to the Fragment, replace the short syntax with a proper <React.Fragment key={unique}> when necessary, or move the 'key' to the wrapper element.

---

94-124: Allow dynamic sizing or scrolling
"NotificationBox" sets a fixed width of "320px" and a fixed layout. Consider using a more responsive or scrolling approach if there are numerous notifications.

packages/extension-polkagate/src/popup/notification/NotificationSettings.tsx (2)

25-36: Maintain consistent naming
"OptionButton" is a descriptive name. For readability and consistent naming, consider either using "OptionToggle" or "OptionSelector" if it is used to open selection popups. This helps unify naming patterns across the codebase, especially around toggles/selectors elsewhere.

---

91-100: Handle scenario when there are no accounts
When "accounts" is empty in the context, ensure the UI gracefully handles toggling notification settings to avoid creating a mismatch in the state. For example, disable or hide toggles until at least one account is selected.

packages/extension-polkagate/src/hooks/useNotifications.ts (3)

54-72: Clarify first-time initialization vs. returning visitors
In the reducer, "INITIALIZE" sets isFirstTime to true, while "CHECK_FIRST_TIME" also sets it to true. Consider consolidating their usage or documenting the difference to avoid confusion about how the "isFirstTime" property is determined.

---

271-300: Elaborate on error handling in "getReceivedFundsInformation"
When the API call returns a non-zero code, you raise a generic error and then retry. Consider logging the actual status code or response to help debugging issues related to partial or invalid data.

---

325-352: Optimize final save
The "beforeunload" event is used to save notifications, but it may not always provide enough time on slow networks. Consider triggering earlier saves or listening to other lifecycle events (like tab switching) to improve reliability.

packages/extension-polkagate/src/popup/notification/util.ts (1)

266-336: Document or limit concurrency
"getReceivedFundsInformation" handles batched requests. Consider restricting concurrency at the batch or address level to avoid saturating subscan with small intervals between attempts, or consider providing user feedback if the calls are extensive.

packages/extension-polkagate/src/popup/notification/constant.ts (3)

6-6: Consider expanding ReferendaStatus type with more descriptive statuses

The current type definition might be too simplistic. Consider adding more descriptive statuses like 'executionFailed', 'scheduled', etc., to better represent the complete lifecycle of referenda.

-export type ReferendaStatus = 'ongoing' | 'approved' | 'timedOut' | 'rejected' | 'cancelled';
+export type ReferendaStatus = 
+  | 'ongoing'
+  | 'approved'
+  | 'timedOut'
+  | 'rejected'
+  | 'cancelled'
+  | 'scheduled'
+  | 'executionFailed'
+  | 'executed';

---

8-11: Consider making tracking limits configurable

The hardcoded tracking limits (REFERENDA_COUNT_TO_TRACK_DOT and REFERENDA_COUNT_TO_TRACK_KSM) might need adjustment based on user feedback or system performance. Consider making these configurable through user settings.

---

33-61: Consider organizing SUBSCAN_SUPPORTED_CHAINS more efficiently

The current list of supported chains could be better organized for maintainability.

-export const SUBSCAN_SUPPORTED_CHAINS = [
+export const SUBSCAN_SUPPORTED_CHAINS = Object.freeze({
+  RELAY_CHAINS: ['Polkadot', 'Kusama', 'Westend'],
+  ASSET_HUBS: ['PolkadotAssethub', 'KusamaAssethub', 'WestendAssethub', 'PaseoAssethub'],
+  PARACHAINS: [
   'Acala',
   'Ajuna',
   'Astar',
   // ... other parachains
-];
+]});

packages/extension-polkagate/src/popup/notification/partial/SelectAccounts.tsx (2)

14-18: Consider improving Props interface documentation

The Props interface could benefit from JSDoc comments explaining the purpose of each prop.

 interface Props {
+  /** Array of previously selected account addresses */
   previousState: string[];
+  /** Callback function triggered when selection is applied */
   onApply: (items: string[]) => () => void;
+  /** Callback function to close the selection dialog */
   onClose: () => void;
 }

---

68-72: Add loading state to PButton

Consider adding a loading state to prevent multiple submissions while the apply action is processing.

 <PButton
   _onClick={onApply(selected)}
   disabled={isSelectionUnchanged || selected.length > MAX_ACCOUNT_COUNT_NOTIFICATION}
+  loading={isApplying}
   text={t('Apply')}
 />

packages/extension-polkagate/src/popup/notification/partial/SelectNetwork.tsx (4)

23-24: Move RELAY_CHAINS constant to constants file

The RELAY_CHAINS constant should be moved to the constants file for better maintainability and reuse.

---

45-54: Optimize isRelayChain function

The isRelayChain function can be simplified and optimized.

-const isRelayChain = useCallback((chain: string) => {
-  const itIs = RELAY_CHAINS.includes(chain);
-  const base = chain.charAt(0).toUpperCase() + chain.slice(1);
-
-  if (!itIs) {
-    return base;
-  } else {
-    return base + ' Relay Chain';
-  }
-}, []);
+const isRelayChain = useCallback((chain: string) => {
+  const base = chain.charAt(0).toUpperCase() + chain.slice(1);
+  return RELAY_CHAINS.includes(chain) ? `${base} Relay Chain` : base;
+}, []);

---

67-83: Consider extracting network option component

The network option rendering logic could be extracted into a separate component for better maintainability.

+const NetworkOption = React.memo(({ option, isSelected, onSelect }) => (
+  <Grid alignItems='center' container item justifyContent='space-between'>
+    <Grid alignItems='center' columnGap='10px' container item width='fit-content'>
+      <ChainLogo chainName={option.text} />
+      <Typography fontSize='16px' fontWeight={400}>
+        {isRelayChain(option.text)}
+      </Typography>
+    </Grid>
+    <Switch
+      isChecked={isSelected}
+      onChange={onSelect}
+      theme={theme}
+    />
+  </Grid>
+));

---

1-112: Consider unifying selection components

Both SelectAccounts and SelectNetwork share similar patterns and could potentially be unified into a single, more generic selection component.

Consider creating a generic SelectionList component that can be configured for different types of items (accounts, networks) while maintaining specific rendering logic through render props or children functions.

packages/extension-polkagate/src/partials/SettingSubMenu.tsx (1)

118-126: Consider consistent spacing with other MenuItems.

While the implementation is correct, consider maintaining consistent vertical spacing with other menu items for better visual hierarchy.

 <MenuItem
   fontSize='17px'
   iconComponent={
     <NotificationsIcon sx={{ color: theme.palette.text.primary, fontSize: '23px' }} />
   }
   onClick={onManageNotifications}
-  py='0px'
+  py='5px'
   text={t('Manage notifications')}
 />

packages/extension-polkagate/src/components/SVG/HideBalance.tsx (1)

88-93: LGTM: Improved accessibility with IconButton.

Good use of Material-UI's IconButton component. Consider adding an aria-label to the IconButton for better accessibility.

-<IconButton onClick={onClick} sx={{ m: 0 }}>
+<IconButton 
+  aria-label={hide ? 'Show balance' : 'Hide balance'}
+  onClick={onClick} 
+  sx={{ m: 0 }}
+>

packages/extension-polkagate/src/popup/home/YouHave.tsx (2)

94-111: Consider responsive design for mobile views.

The header icons are well-organized, but consider adding responsive spacing and potentially stacking icons vertically on smaller screens.

 <Grid container item width='fit-content'>
+  <Grid 
+    container 
+    spacing={{ xs: 1, sm: 2 }}
+    direction={{ xs: 'column', sm: 'row' }}
+    alignItems='center'
+  >
     <HideBalance
       darkColor={theme.palette.secondary.light}
       hide={isHideNumbers}
       lightColor={theme.palette.secondary.light}
       onClick={toggleHideNumbers}
       size={20}
     />
     <Notifications />
     <Infotip2 placement='bottom' text={t('Menu options')}>
       <IconButton
         onClick={onMenuClick}
         sx={{ p: 0 }}
       >
         <MoreVertIcon sx={{ color: 'secondary.light', fontSize: '33px' }} />
       </IconButton>
     </Infotip2>
+  </Grid>
 </Grid>

---

89-112: Consider extracting header actions into a separate component.

The header section with multiple actions (hide balance, notifications, menu) could be extracted into a separate component for better maintainability and reusability.

Consider creating a new component like HeaderActions to encapsulate these controls:

interface HeaderActionsProps {
  isHideNumbers: boolean;
  toggleHideNumbers: () => void;
  onMenuClick: () => void;
}

const HeaderActions: React.FC<HeaderActionsProps> = ({
  isHideNumbers,
  toggleHideNumbers,
  onMenuClick
}) => {
  const theme = useTheme();
  const { t } = useTranslation();

  return (
    <Grid container item width='fit-content'>
      <HideBalance
        darkColor={theme.palette.secondary.light}
        hide={isHideNumbers}
        lightColor={theme.palette.secondary.light}
        onClick={toggleHideNumbers}
        size={20}
      />
      <Notifications />
      <Infotip2 placement='bottom' text={t('Menu options')}>
        <IconButton onClick={onMenuClick} sx={{ p: 0 }}>
          <MoreVertIcon sx={{ color: 'secondary.light', fontSize: '33px' }} />
        </IconButton>
      </Infotip2>
    </Grid>
  );
};

packages/extension-polkagate/src/popup/notification/NotificationItem.tsx (3)

54-164: Consider extracting notification type renderers

The renderText function is quite large and handles multiple notification types. Consider extracting each notification type renderer into a separate component for better maintainability and reusability.

Example structure:

const ReceivedFundNotification = ({ message }) => {
  // receivedFund renderer logic
};

const ReferendaNotification = ({ message }) => {
  // referenda renderer logic
};

const StakingRewardNotification = ({ message }) => {
  // stakingReward renderer logic
};

---

77-79: Remove commented code

There's commented code that should be removed if it's no longer needed.

---

147-153: Remove commented code block

There's a large commented code block that should be removed if it's no longer needed.

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

#!/bin/bash
rg -A 5 'setAnchorEl'

packages/extension-polkagate/src/hooks/useNotifications.ts (2)

72-129: Consider extracting timestamp conversion to a constant.

The timestamp conversion from milliseconds to seconds appears in multiple places. Consider extracting 1000 to a named constant like MILLISECONDS_TO_SECONDS for better maintainability and clarity.

+const MILLISECONDS_TO_SECONDS = 1000;
+
 const notificationReducer = (
   state: NotificationsType,
   action: NotificationActionType
 ): NotificationsType => {
   switch (action.type) {
     case 'INITIALIZE':
       return {
         isFirstTime: true,
-        latestLoggedIn: Math.floor(Date.now() / 1000),
+        latestLoggedIn: Math.floor(Date.now() / MILLISECONDS_TO_SECONDS),
         notificationMessages: [],
         // ... rest of the code

---

257-301: Refactor worker message handling for better maintainability.

The message handling logic has multiple nested conditions. Consider extracting the message validation into a separate function.

+const isValidWorkerMessage = (data: unknown): data is WorkerMessage => {
+  if (!data) return false;
+  const msg = data as WorkerMessage;
+  return msg.functionName === NOTIFICATIONS_KEY && 
+         msg.message?.type === 'referenda';
+};
+
 useEffect(() => {
   if (notificationIsOff || settings?.governance?.length === 0) {
     return;
   }
 
   const handelMessage = (event: MessageEvent<string>) => {
     try {
-      if (!event.data) {
-        return;
-      }
-
       const parsedMessage = JSON.parse(event.data) as WorkerMessage;
-
-      if (parsedMessage.functionName !== NOTIFICATIONS_KEY) {
-        return;
-      }
-
-      const { message } = parsedMessage;
-
-      if (message.type !== 'referenda') {
+      if (!isValidWorkerMessage(parsedMessage)) {
         return;
       }

packages/extension-polkagate/src/popup/notification/util.ts (2)

176-204: Enhance formatChainName function robustness.

The function could be more robust by handling edge cases and providing better type safety.

 const formatChainName = (chainName: string | undefined, suffixes: string[] = ['asset hub']): string => {
   if (!chainName) {
     return '';
   }
 
+  // Trim whitespace and convert to lowercase
+  const normalizedName = chainName.trim().toLowerCase();
+  
+  if (normalizedName.length === 0) {
+    return '';
+  }
 
   // Find and remove the invalid suffixes
-  const sanitized = chainName.toLowerCase().replace(' relay chain', '').replace(' network', '');
+  const sanitized = normalizedName
+    .replace(/\s+relay\s+chain\b/g, '')
+    .replace(/\s+network\b/g, '');

---

550-554: Improve type safety and naming in updateReferendas function.

The function could benefit from better parameter naming and type handling.

-export const updateReferendas = (preciousRefs: ReferendaNotificationType[] | null | undefined, newRefs: ReferendaNotificationType[], network: string) => {
+export const updateReferendas = (
+  previousRefs: ReferendaNotificationType[] | null | undefined,
+  newRefs: ReferendaNotificationType[],
+  networkName: string
+): ReferendaNotificationType[] => {
+  const normalizedNetworkName = networkName.toLowerCase();
+  const filteredRefs = previousRefs?.filter(
+    ({ chainName }) => chainName.toLowerCase() !== normalizedNetworkName
+  ) ?? [];
+
+  return [...filteredRefs, ...newRefs];
+};

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

-  if (isNaN(timestampNum)) {
+  if (Number.isNaN(timestampNum)) {
     return 'Invalid Timestamp';
   }

+async function fetchWithRetry<T>(
+  operation: () => Promise<T>,
+  context: string,
+  maxRetries: number = MAX_RETRIES
+): Promise<T | null> {
+  let lastError: unknown = null;
+
+  for (let attempt = 1; attempt <= maxRetries; attempt++) {
+    try {
+      return await operation();
+    } catch (error) {
+      lastError = error;
+      console.warn(`Attempt ${attempt} failed for ${context}. Retrying...`);
+      await new Promise(resolve => setTimeout(resolve, attempt * 1000));
+    }
+  }
+
+  console.error(`Failed after ${maxRetries} attempts for ${context}`, lastError);
+  return null;
+}