feat: add selected chains badge (#1574)

PolkaGate · Oct 1, 2024 · db189c6 · db189c6
1 parent e1a2b74
commit db189c6
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/components/HeaderComponents.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/components/HeaderComponents.tsx
@@ -3,11 +3,12 @@
 
 /* eslint-disable react/jsx-max-props-per-line */
 
-import { Grid, Typography } from '@mui/material';
-import React, { useCallback, useEffect } from 'react';
+import { Badge, Grid, Typography } from '@mui/material';
+import React, { useCallback, useEffect, useMemo } from 'react';
 
 import { HideIcon, ShowIcon } from '../../../components';
-import { useTranslation } from '../../../hooks';
+import { useIsTestnetEnabled, useSelectedChains, useTranslation } from '../../../hooks';
+import { TEST_NETS } from '../../../util/constants';
 import Currency from '../partials/Currency';
 import FavoriteChains from '../partials/FavoriteChains';
 
@@ -33,6 +34,9 @@ const HideNumbers = ({ hideNumbers, onHideClick }: { hideNumbers: boolean | unde
 };
 
 function HeaderComponents ({ hideNumbers, setHideNumbers }: Props): React.ReactElement {
+ const selectedChains = useSelectedChains();
+ const isTestNetEnabled = useIsTestnetEnabled();
+
  const onHideClick = useCallback(() => {
  setHideNumbers(!hideNumbers);
  window.localStorage.setItem('hide_numbers', hideNumbers ? 'false' : 'true');
@@ -44,10 +48,26 @@ function HeaderComponents ({ hideNumbers, setHideNumbers }: Props): React.ReactE
  isHide === 'false' || isHide === null ? setHideNumbers(false) : setHideNumbers(true);
  }, [setHideNumbers]);
 
+ const badgeCount = useMemo(() => {
+ if (!selectedChains?.length) {
+ return 0;
+ }
+
+ let filteredList = selectedChains;
+
+ if (!isTestNetEnabled) {
+ filteredList = selectedChains.filter((item) => !TEST_NETS.includes(item));
+ }
+
+ return filteredList.length;
+ }, [isTestNetEnabled, selectedChains]);
+
  return (
  <Grid columnGap='18px' container item pl='18px' width='fit-content'>
  <Currency />
- <FavoriteChains />
+ <Badge badgeContent={badgeCount} color='success'>
+ <FavoriteChains />
+ </Badge>
  <HideNumbers
  hideNumbers={hideNumbers}
  onHideClick={onHideClick}

diff --git a/packages/extension-polkagate/src/hooks/index.ts b/packages/extension-polkagate/src/hooks/index.ts
@@ -89,6 +89,7 @@ export { default as useProxies } from './useProxies';
 export { default as useRedirectOnRefresh } from './useRedirectOnRefresh';
 export { default as useReferendum } from './useReferendum';
 export { default as useReservedDetails } from './useReservedDetails';
+export { default as useSelectedChains } from './useSelectedChains';
 export { default as useSelectedProfile } from './useSelectedProfile';
 export { default as useStakingAccount } from './useStakingAccount';
 export { default as useStakingConsts } from './useStakingConsts';

diff --git a/packages/extension-polkagate/src/popup/home/news.ts b/packages/extension-polkagate/src/popup/home/news.ts
@@ -15,6 +15,7 @@ export const news: News[] = [
  'Add Your Chain: If your favorite chain isn’t available in the extension, you can now add it manually using an RPC endpoint address.',
  'BTC and ETH as currency: View your token balance equivalent in BTC, ETH, and other fiat currencies.',
  'Auto Mode Remote Node: RPCs are now automatically selected based on your location and latency, for optimal performance.',
+ 'Show Selected Chains Badge: The number of favorite selected chains is displayed in a badge on the header in full-screen home mode.',
  'Auto Metadata Update: Metadata updates automatically in the background on supported chains, eliminating the need for manual updates.'
  ]
  },