feat: new you have (Portfolio) for Extension mode

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/fullscreen/homeFullScreen/partials/Currency.tsx

@@ -18,13 +18,22 @@ export interface CurrencyItemType {
   sign: string;
 }
 
-export default function Currency (): React.ReactElement {
+interface Props {
+  color?: string;
+  dialogLeft?: number;
+  fontSize?: string;
+  height?: string;
+  minWidth?: string;
+}
+
+export default function Currency ({ color, fontSize = '22px', height, minWidth, dialogLeft=260 }: Props): React.ReactElement {
+// export default function Currency ({ color, fontSize = '22px' }: 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,17 @@ 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,
+          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 +79,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
             }

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/Menu.tsx

@@ -3,11 +3,9 @@
 
 /* eslint-disable react/jsx-max-props-per-line */
 
-import type { Theme } from '@mui/material/styles';
-
 import { Close as CloseIcon } from '@mui/icons-material';
 import { Divider, Grid, IconButton, Typography } from '@mui/material';
-import { keyframes } from '@mui/material/styles';
+import { keyframes, useTheme } from '@mui/material/styles';
 import React, { useCallback, useContext, useState } from 'react';
 
 import { AccountContext, ActionContext, MenuItem, TwoButtons, VaadinIcon, Warning } from '../components';
@@ -21,24 +19,24 @@ import SettingSubMenu from './SettingSubMenu';
 import VersionSocial from './VersionSocial';
 
 interface Props {
-  theme: Theme;
   setShowMenu: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const COLLAPSIBLE_MENUS = {
-  NONE: 0,
-  NEW_ACCOUNT: 1,
-  IMPORT_ACCOUNT: 2,
-  SETTING: 3
-};
+const enum COLLAPSIBLE_MENUS {
+  NONE,
+  NEW_ACCOUNT,
+  IMPORT_ACCOUNT,
+  SETTING
+}
 
 const Div = () => <Divider sx={{ bgcolor: 'divider', height: '1px', justifySelf: 'flex-end', mx: '10px', width: '83%' }} />;
 
-function Menu ({ setShowMenu, theme }: Props): React.ReactElement<Props> {
+function Menu ({ setShowMenu }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
+  const theme = useTheme();
   const onAction = useContext(ActionContext);
 
-  const [collapsedMenu, setCollapsedMenu] = useState<number>(COLLAPSIBLE_MENUS.SETTING);
+  const [collapsedMenu, setCollapsedMenu] = useState(COLLAPSIBLE_MENUS.SETTING);
   const [isTestnetEnableConfirmed, setIsTestnetEnableConfirmed] = useState<boolean>();
   const [showWarning, setShowWarning] = useState<boolean>();
   const [closeMenu, setCloseMenu] = useState<boolean>(false);

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/ProfileTab.tsx

@@ -96,11 +96,12 @@ function ProfileTab ({ index, isContainerHovered, isSelected, orderedAccounts, t
         }}
       >
         <Grid alignItems='center' container item justifyContent='center' sx={{ display: 'flex', flexDirection: 'row', flexWrap: 'nowrap', minWidth: '40px', px: '8px', width: 'fit-content' }}>
-          <Typography color='text.primary' fontSize='14px' fontWeight={400} sx={{ lineHeight: 'normal', maxWidth: '100px', overflowX: 'hidden', textOverflow: 'ellipsis', transition: 'visibility 0.1s ease', userSelect: 'none', visibility: visibleContent ? 'visible' : 'hidden', whiteSpace: 'nowrap', width: 'fit-content' }} textAlign='center'>
+          <Typography color='text.primary' fontSize='14px' sx={{ lineHeight: 'normal', maxWidth: '100px', overflowX: 'hidden', textOverflow: 'ellipsis', transition: 'visibility 0.1s ease', userSelect: 'none', visibility: visibleContent ? 'visible' : 'hidden', whiteSpace: 'nowrap', width: 'fit-content' }} textAlign='center'>
             {t(text)}
           </Typography>
           {areAllHidden && isSelected &&
-            <VaadinIcon icon='vaadin:eye-slash' style={{ display: 'block', height: '13px', marginLeft: '5px', width: '15px' }} />}
+            <VaadinIcon icon='vaadin:eye-slash' style={{ display: 'block', height: '13px', marginLeft: '5px', width: '15px' }} />
+          }
         </Grid>
       </Collapse>
     </Grid>

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 { FormatPrice } from '../../components';
+import { stars5Black, stars5White } from '../../assets/icons';
+import { logoBlack, logoWhite } from '../../assets/logos';
+import { FormatPrice, Infotip2 } 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,120 @@ 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 4% 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', fontWeight: 400, 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: '20px', width: '317px' }}
+            />
+            : <>
+              <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
+                    color='secondary.light'
+                    dialogLeft ={64}
+                    fontSize='25px'
+                    height='27px'
+                    minWidth='27px'
+                  />
+                  <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={{ ml: '5px', 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: 400 }}>
+                  {t('available')}
+                </Typography>
+              </Stack>
+            </>
+          }
+          <Infotip2 text={t('Menu options')}>
+            <IconButton
+              onClick={onMenuClick}
+              sx={{ p: 0, position: 'absolute', pt: '3px', right: '3px', top: '8px' }}
+            >
+              <MoreVertIcon sx={{ color: 'secondary.light', fontSize: '33px' }} />
+            </IconButton>
+          </Infotip2>
+        </Grid>
+        <Grid item sx={{ position: 'absolute', right: '30px', top: '5px' }}>
           <HideBalance
+            darkColor={theme.palette.secondary.light}
             hide={isHideNumbers}
             lightColor={theme.palette.secondary.light}
             onClick={toggleHideNumbers}
-            size={22}
+            size={20}
           />
         </Grid>
       </Grid>
+      <Box
+        alt={t('PolkaGate logo')}
+        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% - 20px)', position: 'absolute', top: '5px', width: 40 }}
+      />
+      {isMenuOpen &&
+        <Menu
+          setShowMenu={setOpenMenu}
+        />
+      }
     </Grid>
   );
 }