feat: new you have (Portfolio) for Extension mode

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

@@ -46,14 +46,14 @@ function AccountIcons ({ address, identiconTheme, isSubId, judgements, prefix }:
   }, [address]);
 
   return (
-    <Grid container direction='column' sx={{ ml: '8px', width: '17%' }}>
+    <Grid container direction='column' sx={{ m: '7px 0px 0px 8px', width: '17%' }}>
       <Grid item m='auto' width='fit-content'>
         <Identicon
           iconTheme={identiconTheme}
           isSubId={isSubId}
           judgement={judgements}
           prefix={prefix}
-          size={40}
+          size={35}
           value={formatted || address}
         />
       </Grid>

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

@@ -58,6 +58,16 @@ export function nFormatter (num: number, decimalPoint: number) {
 const DECIMAL_POINTS_FOR_CRYPTO_AS_CURRENCY = 4;
 const SMALL_DECIMALS_FONT_SIZE_REDUCTION = 20;
 
+const DecimalPart = ({ value, withCountUp }: { value: string | number, withCountUp: boolean | undefined }) => (
+  withCountUp
+    ? <CountUp
+      duration={1}
+      end={Number(getDecimal(value))}
+      prefix={'.'}
+    />
+    : <>{`.${getDecimal(value)}`}</>
+);
+
 function FormatPrice ({ amount, commify, decimalPoint = 2, decimals, fontSize, fontWeight, height, lineHeight = 1, mt = '0px', num, price, sign, skeletonHeight = 15, textAlign = 'left', textColor, width = '90px', withCountUp, withSmallDecimal }: Props): React.ReactElement<Props> {
   const currency = useCurrency();
   const theme = useTheme();
@@ -135,16 +145,10 @@ function FormatPrice ({ amount, commify, decimalPoint = 2, decimals, fontSize, f
               lineHeight={lineHeight}
               sx={{ color: theme.palette.secondary.contrastText }}
             >
-              {withCountUp
-                ? <CountUp
-                  duration={1}
-                  end={Number(getDecimal(total))}
-                  prefix={'.'}
-                />
-                : <>
-                  {`.${getDecimal(total)}`}
-                </>
-              }
+              <DecimalPart
+                value={total}
+                withCountUp={withCountUp}
+              />
             </Typography>
           }
         </Stack>

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

@@ -12,7 +12,7 @@ import { noop } from '../util/utils';
 interface Props {
   disabled?: boolean;
   icon?: string;
-  iconComponent?: JSX.Element;
+  iconComponent?: React.JSX.Element;
   text: string;
   children?: React.ReactElement<Props>;
   onClick?: MouseEventHandler<HTMLDivElement>;
@@ -35,8 +35,8 @@ export default function MenuItem ({ children, disabled = false, fontSize, icon,
 
   return (
     <>
-      <Grid alignItems='center' color={disabled ? '#4B4B4B' : 'inherit'} container item justifyContent='space-between' my='4px' onClick={disabled ? noop : onClick} pl={pl} py={py} sx={{ cursor: disabled ? '' : 'pointer', ...(withHoverEffect ? hoverEffectStyles : {}) }} textAlign='left' xs={12}>
-        <Grid alignItems='center' container item xs sx={{ flexWrap: 'nowrap' }}>
+      <Grid alignItems='center' color={disabled ? '#4B4B4B' : 'inherit'} container item justifyContent='space-between' my='4px' onClick={disabled ? noop : onClick} pl={pl} py={py} sx={{ cursor: disabled ? 'default' : 'pointer', ...(withHoverEffect ? hoverEffectStyles : {}) }} textAlign='left' xs={12}>
+        <Grid alignItems='center' container item sx={{ flexWrap: 'nowrap' }} xs>
           <Grid alignItems='center' container item xs={1}>
             {iconComponent ??
               <Box

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

@@ -40,7 +40,7 @@ export default function RemoteNodeSelector ({ address, genesisHash }: Props): Re
     <>
       {endpoint &&
         <Select
-          _mt='10px'
+          _mt='3px'
           defaultValue={undefined}
           label={t('Remote node')}
           onChange={onChangeEndpoint}

packages/extension-polkagate/src/fullscreen/accountDetails/index.tsx

@@ -18,7 +18,7 @@ import { AccountContext, ActionContext, Warning } from '../../components';
 import { useAccountAssets, useBalances, useCurrency, useFullscreen, useInfo, usePrices, useTokenPrice, useTranslation } from '../../hooks';
 import { getValue } from '../../popup/account/util';
 import HistoryModal from '../../popup/history/modal/HistoryModal';
-import { AccountLabel } from '../../popup/home/AccountLabel';
+import AccountLabel from '../../popup/home/AccountLabel';
 import ReceiveModal from '../../popup/receive/ReceiveModal';
 import { ASSET_HUBS, GOVERNANCE_CHAINS, STAKING_CHAINS } from '../../util/constants';
 import getParentNameSuri from '../../util/getParentNameSuri';

packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountItem.tsx

@@ -15,7 +15,7 @@ import React, { useContext, useMemo, useState } from 'react';
 import { AccountContext } from '../../../components';
 import { useAccountAssets, useChain } from '../../../hooks';
 import QuickActionFullScreen from '../../../partials/QuickActionFullScreen';
-import { AccountLabel } from '../../../popup/home/AccountLabel';
+import AccountLabel from '../../../popup/home/AccountLabel';
 import getParentNameSuri from '../../../util/getParentNameSuri';
 import AccountInformationForHome from './AccountInformationForHome';
 

packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/Currency.tsx

@@ -18,13 +18,22 @@ export interface CurrencyItemType {
   sign: string;
 }
 
-export default function Currency (): React.ReactElement {
+interface Props {
+  borderColor?: string;
+  color?: string;
+  dialogLeft?: number;
+  fontSize?: string;
+  height?: string;
+  minWidth?: string;
+}
+
+function Currency ({ borderColor, color, dialogLeft = 260, fontSize = '22px', height, minWidth }: Props): React.ReactElement {
   const theme = useTheme();
 
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
   const [currencyToShow, setCurrencyToShow] = useState<CurrencyItemType | undefined>();
 
-  const textColor = useMemo(() => theme.palette.mode === 'dark' ? theme.palette.text.primary : theme.palette.text.secondary, [theme.palette.mode, theme.palette.text.primary, theme.palette.text.secondary]);
+  const textColor = useMemo(() => color || (theme.palette.mode === 'dark' ? theme.palette.text.primary : theme.palette.text.secondary), [color, theme]);
 
   useLayoutEffect(() => {
     if (currencyToShow) {
@@ -46,9 +55,18 @@ export default function Currency (): React.ReactElement {
 
   return (
     <>
-      <Grid alignItems='center' component='button' container direction='column' item justifyContent='center' onClick={onCurrencyClick} sx={{ ...HEADER_COMPONENT_STYLE, zIndex: anchorEl && theme.zIndex.modal + 1 }}>
+      <Grid
+        alignItems='center' component='button' container direction='column' item justifyContent='center' onClick={onCurrencyClick}
+        sx={{
+          ...HEADER_COMPONENT_STYLE,
+          borderColor: borderColor || HEADER_COMPONENT_STYLE?.borderColor,
+          height: height || HEADER_COMPONENT_STYLE?.height,
+          minWidth: minWidth || HEADER_COMPONENT_STYLE?.minWidth,
+          zIndex: anchorEl && theme.zIndex.modal + 1
+        }}
+      >
         <Infotip2 text={currencyToShow?.currency}>
-          <Typography color={textColor} fontSize='22px' fontWeight={500}>
+          <Typography color={textColor} fontSize={ fontSize } fontWeight={500}>
             {currencyToShow?.sign || '$'}
           </Typography>
         </Infotip2>
@@ -62,7 +80,7 @@ export default function Currency (): React.ReactElement {
               boxShadow: theme.palette.mode === 'dark'
                 ? '0px 4px 4px rgba(255, 255, 255, 0.25)'
                 : '0px 0px 25px 0px rgba(0, 0, 0, 0.50)',
-              left: anchorEl?.getBoundingClientRect().right - 260,
+              left: anchorEl?.getBoundingClientRect().right - dialogLeft,
               position: 'absolute',
               top: anchorEl?.getBoundingClientRect().bottom - 30
             }
@@ -89,3 +107,5 @@ export default function Currency (): React.ReactElement {
     </>
   );
 }
+
+export default React.memo(Currency);

packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FavoriteChains.tsx

@@ -50,6 +50,11 @@ export default function FavoriteChains (): React.ReactElement {
     <Badge
       badgeContent={badgeCount}
       color='success'
+      sx={{
+        '& .MuiBadge-badge': {
+          color: 'white'
+        },
+      }}
     >
       <Grid
         alignItems='center'

packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileMenu.tsx

@@ -60,13 +60,15 @@ const InputBox = ({ addToNewProfile, editName, newName }: InputBoxProps) => {
 };
 
 interface AddProfileProps {
-  address: string | undefined
+  address: string | undefined;
   showName: boolean | undefined;
   setShowName: React.Dispatch<React.SetStateAction<boolean | undefined>>;
-  handleClose: () => void
+  handleClose: () => void;
+  closeParentMenu: () => void
+  extensionMode: boolean;
 }
 
-const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProps) => {
+const AddMenu = ({ address, closeParentMenu, extensionMode, handleClose, setShowName, showName }: AddProfileProps) => {
   const theme = useTheme();
   const { t } = useTranslation();
   const { userDefinedProfiles } = useProfiles();
@@ -103,18 +105,20 @@ const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProp
     updateMeta(String(address), metaData)
       .then(() => {
         handleClose();
+        closeParentMenu();
       }).catch(console.error);
-  }, [account, address, handleClose]);
+  }, [account, address, closeParentMenu, handleClose]);
 
   return (
-    <Grid alignItems='flex-start' container display='block' item sx={{ borderRadius: '10px', minWidth: '300px', p: '10px' }}>
+    <Grid alignItems='flex-start' container display='block' item sx={{ borderRadius: '10px', minWidth: '300px', p: extensionMode ? '5px' : '10px' }}>
       {showName
         ? <InputBox
           addToNewProfile={addToNewProfile}
           editName={editName}
           newName={newName}
         />
         : <MenuItem
+          fontSize={extensionMode ? '16px' : undefined}
           iconComponent={
             <VaadinIcon icon='vaadin:plus' style={{ color: theme.palette.text.primary, height: '20px' }} />
           }
@@ -123,10 +127,11 @@ const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProp
           withHoverEffect
         />
       }
-      <Divider sx={{ bgcolor: 'divider', height: '1px', my: '6px' }} />
+      <Divider sx={{ bgcolor: 'divider', height: '1px', my: extensionMode ? '3px' : '6px' }} />
       {userDefinedProfiles.length > 0
         ? userDefinedProfiles.map((profile) => (
           <MenuItem
+            fontSize={extensionMode ? '16px' : undefined}
             iconComponent={
               <VaadinIcon icon='vaadin:folder-open-o' style={{ color: theme.palette.text.primary, height: '20px' }} />
             }
@@ -139,6 +144,7 @@ const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProp
         ))
         : <MenuItem
           disabled
+          fontSize={extensionMode ? '16px' : undefined}
           iconComponent={
             <VaadinIcon icon='vaadin:minus' style={{ color: `${theme.palette.text.disabled}`, height: '20px' }} />
           }
@@ -153,18 +159,20 @@ const AddMenu = ({ address, handleClose, setShowName, showName }: AddProfileProp
 interface RemoveProfileProps {
   profileNames: string[] | undefined;
   onRemove: (profile: string) => void;
+  extensionMode: boolean;
 }
 
-const RemoveMenu = ({ onRemove, profileNames }: RemoveProfileProps) => {
+const RemoveMenu = ({ extensionMode, onRemove, profileNames }: RemoveProfileProps) => {
   const theme = useTheme();
   const { t } = useTranslation();
 
   return (
-    <Grid alignItems='flex-start' container display='block' item sx={{ borderRadius: '10px', minWidth: '300px', p: '10px' }}>
+    <Grid alignItems='flex-start' container display='block' item sx={{ borderRadius: '10px', minWidth: '300px', p: extensionMode ? '5px' : '10px' }}>
       {profileNames?.map((profileName) => (
         // eslint-disable-next-line react/jsx-no-bind
         <Grid component='button' container item key={profileName} onClick={() => onRemove(profileName)} sx={{ '> div div:last-child p': { maxWidth: '220px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, bgcolor: 'transparent', border: 'none', color: theme.palette.text.primary, height: 'fit-content', p: 0, width: 'inherit' }}>
           <MenuItem
+            fontSize={extensionMode ? '16px' : undefined}
             iconComponent={
               <VaadinIcon icon='vaadin:folder-remove' style={{ color: theme.palette.text.primary, height: '20px' }} />
             }
@@ -206,8 +214,7 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
   const handleClose = useCallback(() => {
     setAnchorEl(null);
     setShowName(false);
-    closeParentMenu();
-  }, [closeParentMenu]);
+  }, []);
 
   const onAddClick = useCallback((event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {
     setAnchorEl(event.currentTarget);
@@ -240,14 +247,18 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
 
         if (isLastAccountWithTheProfile && currentProfile === profileToBeRemoved) {
           setStorage('profile', PROFILE_TAGS.ALL)
-            .then(handleClose)
+            .then(() => {
+              handleClose();
+              closeParentMenu();
+            })
             .catch(console.error);
         } else {
           handleClose();
+          closeParentMenu();
         }
       })
       .catch(console.error);
-  }, [profileNames, accounts, address, currentProfile, handleClose]);
+  }, [address, profileNames, accounts, currentProfile, handleClose, closeParentMenu]);
 
   const open = Boolean(anchorEl);
   const id = open ? 'simple-popover 2' : undefined;
@@ -256,6 +267,7 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
     <>
       <Grid aria-describedby={id} component='button' container item onClick={onAddClick} sx={{ bgcolor: 'transparent', border: 'none', color: theme.palette.text.primary, height: 'fit-content', p: 0, width: 'inherit' }}>
         <MenuItem
+          fontSize={isExtensionMode ? '16px' : undefined}
           iconComponent={
             <VaadinIcon icon='vaadin:folder-add' style={{ color: `${theme.palette.text.primary}`, height: '20px' }} />
           }
@@ -284,6 +296,7 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
       {isExtensionMode && profileNames && profileNames.length > 0 &&
         <Grid aria-describedby={id} component='button' container item onClick={onRemoveMenuClick} sx={{ bgcolor: 'transparent', border: 'none', color: theme.palette.text.primary, height: 'fit-content', p: 0, width: 'inherit' }}>
           <MenuItem
+            fontSize='16px'
             iconComponent={
               <VaadinIcon icon='vaadin:folder-remove' style={{ color: theme.palette.text.primary, height: '20px' }} />
             }
@@ -293,7 +306,6 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
           />
         </Grid>
       }
-      {isExtensionMode && <Divider sx={{ bgcolor: 'divider', height: '1px', my: '6px', width: '100%' }} />}
       <Popover
         PaperProps={{
           sx: {
@@ -322,12 +334,15 @@ function ProfileMenu ({ address, closeParentMenu }: Props): React.ReactElement<P
         {status === STATUS.SHOW_ADD &&
           <AddMenu
             address={address}
+            closeParentMenu={closeParentMenu}
+            extensionMode={isExtensionMode}
             handleClose={handleClose}
             setShowName={setShowName}
             showName={showName}
           />}
         {status === STATUS.SHOW_REMOVE &&
           <RemoveMenu
+            extensionMode={isExtensionMode}
             onRemove={onRemove}
             profileNames={profileNames}
           />

packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx

@@ -231,7 +231,7 @@ function TotalBalancePieChart ({ setGroupedAssets }: Props): React.ReactElement
                 withCountUp
                 withSmallDecimal
               />
-              <Typography sx={{ color: !youHave.change ? 'secondary.contrastText' : youHave.change > 0 ? 'success.main' : 'warning.main', fontSize: '16px', fontWeight: 500 }}>
+              <Typography sx={{ color: !youHave.change ? 'secondary.contrastText' : youHave.change > 0 ? 'success.contrastText' : 'warning.main', fontSize: '16px', fontWeight: 500 }}>
                 <CountUp
                   decimals={countDecimalPlaces(portfolioChange) || PORTFOLIO_CHANGE_DECIMAL}
                   duration={1}

packages/extension-polkagate/src/hooks/useYouHave.ts

@@ -10,6 +10,7 @@ import { amountToHuman } from '../util/utils';
 import { usePrices } from '.';
 
 export interface YouHaveType {
+  available: number;
   change: number;
   date: number;
   portfolio: number;
@@ -45,8 +46,9 @@ export default function useYouHave (): YouHaveType | undefined | null {
       return undefined;
     }
 
-    let totalPrice = 0;
-    let totalBeforeChange = 0;
+    let portfolio = 0;
+    let available = 0;
+    let change = 0;
     const balances = accountsAssets.balances;
     const date = Math.min(accountsAssets.timeStamp, pricesInCurrencies.date);
 
@@ -56,14 +58,16 @@ export default function useYouHave (): YouHaveType | undefined | null {
           const tokenValue = pricesInCurrencies.prices[asset.priceId]?.value ?? 0;
           const tokenPriceChange = pricesInCurrencies.prices[asset.priceId]?.change ?? 0;
           const currentAssetPrice = calcPrice(tokenValue, asset.totalBalance, asset.decimal);
+          const currentAvailableAssetPrice = calcPrice(tokenValue, asset.availableBalance, asset.decimal);
 
-          totalPrice += currentAssetPrice;
-          totalBeforeChange += calcChange(tokenValue, Number(asset.totalBalance) / (10 ** asset.decimal), tokenPriceChange);
+          portfolio += currentAssetPrice;
+          available += currentAvailableAssetPrice;
+          change += calcChange(tokenValue, Number(asset.totalBalance) / (10 ** asset.decimal), tokenPriceChange);
         });
       });
     });
 
-    return { change: totalBeforeChange, date, portfolio: totalPrice } as unknown as YouHaveType;
+    return { available, change, date, portfolio } as unknown as YouHaveType;
   }, [accountsAssets, pricesInCurrencies]);
 
   return youHave;