feat: new you have (Portfolio) for Extension mode

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

@@ -18,13 +18,22 @@
   sign: string;
 }
 
-export default function Currency (): React.ReactElement {
+interface Props {
+  fontSize?: string;
+  color?: string;
+  bgcolor?: string;
+  height?: string;
+  minWidth?: string;
+  noBorder?: boolean;
+}
+
+export default function Currency ({ bgcolor, color, fontSize = '22px', height, minWidth, noBorder }: 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) {
@@ -48,7 +57,7 @@
     <>
       <Grid alignItems='center' component='button' container direction='column' item justifyContent='center' onClick={onCurrencyClick} sx={{ ...HEADER_COMPONENT_STYLE, 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>

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;

packages/extension-polkagate/src/partials/SettingSubMenu.tsx

@@ -96,7 +96,7 @@ export default function SettingSubMenu ({ isTestnetEnabledChecked, onChange, set
                 <IconButton
                   sx={{ height: '35px', p: 0, width: '35px' }}
                 >
-                  <ThemeChanger color= 'secondary.light' left='4px' noBorder />
+                  <ThemeChanger color= 'secondary.light' noBorder />
                 </IconButton>
               </Infotip2>
             </Grid>

packages/extension-polkagate/src/popup/home/AiBackgroundImage.tsx

@@ -98,7 +98,7 @@ export default function AiBackgroundImage ({ bgImage, setBgImage }: Props): Reac
       <Grid alignItems='baseline' container item justifyContent='flex-end' xs>
         <Grid item onClick={onAiBackground}>
           <Infotip2 showInfoMark text={t('Click to set an AI-generated background.')}>
-            <Typography sx={{ cursor: 'pointer', fontSize: '11px', pl: '5px', textDecoration: 'underline', userSelect: 'none' }}>
+            <Typography sx={{ color: 'secondary.contrastText', cursor: 'pointer', fontSize: '11px', pl: '5px', textDecoration: 'underline', userSelect: 'none' }}>
               {t('AI Background')}
             </Typography>
           </Infotip2>

packages/extension-polkagate/src/popup/home/YouHave.tsx

@@ -5,15 +5,23 @@
 
 import type { YouHaveType } from '../../hooks/useYouHave';
 
-import { Box, Grid, Typography, useTheme } from '@mui/material';
-import React from 'react';
+import { MoreVert as MoreVertIcon } from '@mui/icons-material';
+import { Box, Grid, IconButton, Stack, Typography, useTheme } from '@mui/material';
+import React, { useCallback, useMemo, useState } from 'react';
+import CountUp from 'react-countup';
 
-import { stars6Black, stars6White } from '../../assets/icons';
+import { stars5Black, stars5White } from '../../assets/icons';
+import { logoBlack, logoWhite } from '../../assets/logos';
 import { FormatPrice } from '../../components';
 import HideBalance from '../../components/SVG/HideBalance';
-import { useIsHideNumbers, useYouHave } from '../../hooks';
+import Currency from '../../fullscreen/homeFullScreen/partials/Currency';
+import { changeSign, PORTFOLIO_CHANGE_DECIMAL } from '../../fullscreen/homeFullScreen/partials/TotalBalancePieChart';
+import { useCurrency, useIsHideNumbers, useYouHave } from '../../hooks';
 import { PRICE_VALIDITY_PERIOD } from '../../hooks/usePrices';
 import useTranslation from '../../hooks/useTranslation';
+import Menu from '../../partials/Menu';
+import { COIN_GECKO_PRICE_CHANGE_DURATION } from '../../util/api/getPrices';
+import { countDecimalPlaces, fixFloatingPoint } from '../../util/utils';
 
 export const isPriceOutdated = (youHave: YouHaveType | null | undefined): boolean | undefined =>
   youHave ? (Date.now() - youHave.date > 2 * PRICE_VALIDITY_PERIOD) : undefined;
@@ -22,43 +30,119 @@ export default function YouHave (): React.ReactElement {
   const { t } = useTranslation();
   const theme = useTheme();
   const youHave = useYouHave();
+  const currency = useCurrency();
+
+  const isDark = theme.palette.mode === 'dark';
+
   const { isHideNumbers, toggleHideNumbers } = useIsHideNumbers();
+  const [isMenuOpen, setOpenMenu] = useState(false);
+
+  const portfolioChange = useMemo(() => {
+    if (!youHave?.change) {
+      return 0;
+    }
+
+    const value = fixFloatingPoint(youHave.change, PORTFOLIO_CHANGE_DECIMAL, false, true);
+
+    return parseFloat(value);
+  }, [youHave?.change]);
+
+  const onMenuClick = useCallback(() => {
+    setOpenMenu((open) => !open);
+  }, []);
 
   return (
-    <Grid container sx={{ pb: '10px', position: 'relative', pt: '5px', textAlign: 'center', zIndex: 1 }}>
-      <Grid item xs={12}>
-        <Typography sx={{ fontSize: '16px', fontVariant: 'small-caps' }}>
-          {t('My Portfolio')}
-        </Typography>
-      </Grid>
-      <Grid container item justifyContent='center' xs={12}>
-        {isHideNumbers
-          ? <Box
-            component='img'
-            src={(theme.palette.mode === 'dark' ? stars6White : stars6Black) as string}
-            sx={{ height: '36px', width: '154px' }}
-          />
-          : <FormatPrice
-            fontSize='32px'
-            fontWeight={500}
-            height={36}
-            num={youHave?.portfolio }
-            skeletonHeight={36}
-            textColor= { isPriceOutdated(youHave) ? 'primary.light' : 'text.primary'}
-            width='223px'
-            withCountUp
-            withSmallDecimal
-          />
-        }
-        <Grid alignItems='center' item sx={{ position: 'absolute', right: '14px', top: '25px' }}>
+    <Grid alignItems='flex-start' container sx={{ bgcolor: 'background.paper', borderRadius: '10px', minHeight: '125px', m: '20px 10px 10px', width: '100%', boxShadow: isDark ? '3px 2px 15px rgba(255, 255, 255, 0.25)' : '2px 3px 4px 2px rgba(0, 0, 0, 0.10)' }}>
+      <Grid container sx={{ position: 'relative', px: '10px', py: '5px' }}>
+        <Grid container item sx={{ textAlign: 'left' }}>
+          <Typography sx={{ fontSize: '16px', fontVariant: 'small-caps', mt: '10px' }}>
+            {t('My Portfolio')}
+          </Typography>
+        </Grid>
+        <Grid container item justifyContent='flex-start' pt='15px'>
+          {isHideNumbers
+            ? <Box
+              component='img'
+              src={(theme.palette.mode === 'dark' ? stars5White : stars5Black) as string}
+              sx={{ height: '30px', width: '154px' }}
+            />
+            : <>
+              <Stack alignItems='center' direction='row' justifyContent='space-between' sx={{ flexWrap: 'wrap', mr: '15px', textAlign: 'start', width: '100%' }}>
+                <Stack alignItems='flex-start' direction='row' sx= {{ ml: '-5px' }}>
+                  <Currency
+                    bgcolor='background.paper'
+                    color='secondary.light'
+                    fontSize='28px'
+                    height='30px'
+                    minWidth='27px'
+                    noBorder
+                  />
+                  <FormatPrice
+                    fontSize='28px'
+                    fontWeight={500}
+                    num={youHave?.portfolio}
+                    sign= ' '
+                    skeletonHeight={28}
+                    textColor={isPriceOutdated(youHave) ? 'primary.light' : 'text.primary'}
+                    width='100px'
+                    withCountUp
+                    withSmallDecimal
+                  />
+                </Stack>
+                <Typography sx={{ color: !youHave?.change ? 'secondary.contrastText' : youHave.change > 0 ? 'success.main' : 'warning.main', fontSize: '15px', fontWeight: 400 }}>
+                  <CountUp
+                    decimals={countDecimalPlaces(portfolioChange) || PORTFOLIO_CHANGE_DECIMAL}
+                    duration={1}
+                    end={portfolioChange}
+                    prefix={`${changeSign(youHave?.change)}${currency?.sign}`}
+                    suffix={`(${COIN_GECKO_PRICE_CHANGE_DURATION}h)`}
+                  />
+                </Typography>
+              </Stack>
+              <Stack alignItems='center' direction='row' spacing={1} sx={{ mt: '5px', textAlign: 'start', width: '100%' }}>
+                <FormatPrice
+                  fontSize='14px'
+                  fontWeight={400}
+                  num={youHave?.available}
+                  skeletonHeight={14}
+                  textColor={'primary.light' }
+                  width='100px'
+                  withCountUp
+                />
+                <Typography sx={{ color: 'primary.light', fontSize: '14px', fontWeight: 300 }}>
+                  {t('available')}
+                </Typography>
+              </Stack>
+            </>
+          }
+          <IconButton
+            onClick={onMenuClick}
+            sx={{ p: 0, position: 'absolute', pt: '3px', right: '3px', top: '11px' }}
+          >
+            <MoreVertIcon sx={{ color: 'secondary.light', fontSize: '33px' }} />
+          </IconButton>
+        </Grid>
+        <Grid item sx={{ position: 'absolute', right: '30px', top: '8px' }}>
           <HideBalance
+            darkColor={theme.palette.secondary.light}
             hide={isHideNumbers}
             lightColor={theme.palette.secondary.light}
             onClick={toggleHideNumbers}
-            size={22}
+            size={20}
           />
         </Grid>
       </Grid>
+      <Box
+        component='img'
+        src={theme.palette.mode === 'dark' ? logoBlack as string : logoWhite as string}
+        sx={{ filter: 'drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5))', height: 40, left: 'calc(50% - 26px)', position: 'absolute', top: '5px', width: 40 }}
+      />
+      {isMenuOpen &&
+        <Menu
+          setShowMenu={setOpenMenu}
+          theme={theme}
+        />
+      }
     </Grid>
   );
 }

packages/extension-polkagate/src/popup/home/index.tsx

@@ -18,8 +18,6 @@ import { AccountContext, Warning } from '../../components';
 import { getStorage, type LoginInfo } from '../../components/Loading';
 import { useAccountsOrder, useIsHideNumbers, useManifest, useMerkleScience, useProfileAccounts, useTranslation } from '../../hooks';
 import { AddNewAccountButton } from '../../partials';
-import HeaderBrand from '../../partials/HeaderBrand';
-import { EXTENSION_NAME } from '../../util/constants';
 import Reset from '../passwordManagement/Reset';
 import Welcome from '../welcome';
 import AccountsTree from './AccountsTree';
@@ -96,16 +94,7 @@ export default function Home (): React.ReactElement {
           position: 'relative'
         }}
         >
-          <Grid padding='0px' textAlign='center' xs={12}>
-            <HeaderBrand
-              noBorder
-              showBrand
-              showFullScreen
-              showMenu
-              style={{ '> div div:nth-child(3)': { minWidth: '23%' }, pr: '10px' }}
-              text={EXTENSION_NAME}
-            />
-          </Grid>
+          <YouHave />
           {hasActiveRecovery &&
             <Grid container item sx={{ '> div.belowInput .warningImage': { fontSize: '18px' }, '> div.belowInput.danger': { m: 0, position: 'relative' }, height: '55px', pt: '8px', width: '92%' }}>
               <Warning
@@ -119,9 +108,8 @@ export default function Home (): React.ReactElement {
               </Warning>
             </Grid>
           }
-          <YouHave />
           <ProfileTabs orderedAccounts={accountsOrder} />
-          <Container disableGutters sx={[{ m: 'auto', maxHeight: `${self.innerHeight - (hasActiveRecovery ? 220 : 165)}px`, overflowY: 'scroll', pb: '10px', px: '4%' }]}>
+          <Container disableGutters sx={[{ m: 'auto', maxHeight: `${self.innerHeight - (hasActiveRecovery ? 252 : 197)}px`, overflowY: 'scroll', pb: '10px', px: '4%' }]}>
             {initialAccountList.map((json, index): React.ReactNode => (
               <AccountsTree
                 {...json}

packages/extension-polkagate/src/util/utils.ts

@@ -577,4 +577,4 @@ export const decodeMultiLocation = (hexString: HexString) => {
   }
 
   return decodeHexValues(decodedMultiLocation);
-};
+};