diff --git a/package.json b/package.json index f2c343d7f..a6341613c 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "chart.js": "^4.2.1", "country-flag-icons": "^1.5.9", "css-loader": "^6.7.3", - "framer-motion": "^7.5.1", + "framer-motion": "^11.11.13", "memoize-one": "^6.0.0", "qrcode.react": "^3.0.2", "react-chartjs-2": "^5.2.0", diff --git a/packages/extension-polkagate/src/assets/icons/stars5White.svg b/packages/extension-polkagate/src/assets/icons/stars5White.svg index 523a17ce6..3fdb18868 100644 --- a/packages/extension-polkagate/src/assets/icons/stars5White.svg +++ b/packages/extension-polkagate/src/assets/icons/stars5White.svg @@ -1,7 +1,7 @@ - - - - - + + + + + diff --git a/packages/extension-polkagate/src/assets/icons/stars6White.svg b/packages/extension-polkagate/src/assets/icons/stars6White.svg index 6f56da451..622966658 100644 --- a/packages/extension-polkagate/src/assets/icons/stars6White.svg +++ b/packages/extension-polkagate/src/assets/icons/stars6White.svg @@ -1,8 +1,8 @@ - - - - - - + + + + + + diff --git a/packages/extension-polkagate/src/components/FormatPrice.tsx b/packages/extension-polkagate/src/components/FormatPrice.tsx index 5ca9e9482..60e993d7d 100644 --- a/packages/extension-polkagate/src/components/FormatPrice.tsx +++ b/packages/extension-polkagate/src/components/FormatPrice.tsx @@ -108,7 +108,8 @@ function FormatPrice ({ amount, commify, decimalPoint = 2, decimals, fontSize, f : } diff --git a/packages/extension-polkagate/src/components/Loading.tsx b/packages/extension-polkagate/src/components/Loading.tsx index fd737cba2..7c04f981c 100644 --- a/packages/extension-polkagate/src/components/Loading.tsx +++ b/packages/extension-polkagate/src/components/Loading.tsx @@ -66,17 +66,25 @@ export const getStorage = (label: string, parse = false): Promise void), parse = false) => { - return new Promise((resolve) => { - chrome.storage.onChanged.addListener(function (changes, areaName) { - if (areaName === 'local' && label in changes) { - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment - const newValue = changes[label].newValue; - - resolve(setChanges(parse ? JSON.parse((newValue || '{}') as string) : newValue)); - } - }); - }); +export const watchStorage = (label: string, setChanges: (value: any) => void, parse = false) => { + // eslint-disable-next-line no-undef + const listener = (changes: Record, areaName: 'sync' | 'local' | 'managed' | 'session') => { + if (areaName === 'local' && label in changes) { + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment + const change = changes[label]; + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment + const newValue = change.newValue; // This is optional, so handle accordingly + + setChanges(parse ? JSON.parse((newValue || '{}') as string) : newValue); + } + }; + + chrome.storage.onChanged.addListener(listener); + + // Return an unsubscribe function + return () => { + chrome.storage.onChanged.removeListener(listener); + }; }; export const setStorage = (label: string, data: unknown, stringify = false) => { diff --git a/packages/extension-polkagate/src/components/SVG/HideBalance.tsx b/packages/extension-polkagate/src/components/SVG/HideBalance.tsx new file mode 100644 index 000000000..f493a91b2 --- /dev/null +++ b/packages/extension-polkagate/src/components/SVG/HideBalance.tsx @@ -0,0 +1,103 @@ +// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import { Grid, useTheme } from '@mui/material'; +import React from 'react'; + +import { HEADER_COMPONENT_STYLE } from '../../fullscreen/governance/FullScreenHeader'; +import { useTranslation } from '../../hooks'; +import Infotip2 from '../Infotip2'; + +interface Props { + noBorder?: boolean; + hide?: boolean; + size?: number; + darkColor?: string; + lightColor?: string; + onClick: () => void +} + +interface IconProps { + color: string + size?: number; +} + +const ClosedEye = ({ color, size = 20 }: IconProps) => ( + + + +); + +const OpenEye = ({ color, size = 20 }: IconProps) => ( + + + + + +); + +const HideBalance = ({ darkColor, hide = false, lightColor, noBorder = true, onClick, size = 20 }: Props) => { + const theme = useTheme(); + const { t } = useTranslation(); + + const color = theme.palette.mode === 'dark' ? darkColor || theme.palette.text.primary : lightColor || theme.palette.text.secondary; + + return ( + + + { hide + ? + : + } + + + ); +}; + +export default React.memo(HideBalance); diff --git a/packages/extension-polkagate/src/components/TwoButtons.tsx b/packages/extension-polkagate/src/components/TwoButtons.tsx index 444437c70..f39314075 100644 --- a/packages/extension-polkagate/src/components/TwoButtons.tsx +++ b/packages/extension-polkagate/src/components/TwoButtons.tsx @@ -39,8 +39,8 @@ export default function TwoButtons ({ disabled = false, isBusy = false, ml = '6% onClick={onSecondaryClick} startIcon={secondaryBtnStartIcon} sx={{ - borderColor: 'secondary.main', - color: variant === 'text' ? 'secondary.main' : 'text.primary', + borderColor: 'secondary.light', + color: variant === 'text' ? 'secondary.light' : 'text.primary', fontSize: '18px', fontWeight: 400, height: '36px', diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AOC.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AOC.tsx index 222013d97..29438c19b 100644 --- a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AOC.tsx +++ b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AOC.tsx @@ -81,7 +81,7 @@ const AssetsBoxes = ({ api, asset, hideNumbers, mode, onclick, pricesInCurrencie // eslint-disable-next-line react/jsx-no-bind alignItems='center' container item justifyContent='center' onClick={() => _assetToShow ? onclick(_assetToShow) : null} sx={{ - border: _assetToShow ? `${isAssetSelected ? '2px' : '1px'} solid` : 'none', + border: _assetToShow ? `${isAssetSelected ? '1.1px' : '1px'} solid` : 'none', borderColor: isAssetSelected ? 'secondary.light' : theme.palette.mode === 'dark' @@ -139,7 +139,7 @@ function AOC ({ accountAssets, address, hideNumbers, mode = 'Detail', onclick, s return ( - + {t('Assets')} diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx index 0b986e11e..b9efeca01 100644 --- a/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx +++ b/packages/extension-polkagate/src/fullscreen/accountDetails/components/AccountInformationForDetails.tsx @@ -32,7 +32,7 @@ const Price = ({ balanceToShow, isPriceOutdated, price }: PriceJSXType) => ( ( - + @@ -104,9 +104,9 @@ const SelectedAssetBox = ({ balanceToShow, genesisHash, isBalanceOutdated, isPri {genesisHash ? <> - + - + diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/LockedInReferendaFS.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/LockedInReferendaFS.tsx index 85a5779b9..18bb9f051 100644 --- a/packages/extension-polkagate/src/fullscreen/accountDetails/components/LockedInReferendaFS.tsx +++ b/packages/extension-polkagate/src/fullscreen/accountDetails/components/LockedInReferendaFS.tsx @@ -67,7 +67,6 @@ export default function LockedInReferendaFS ({ address, price, refreshNeeded, se decimals={decimal} fontSize= '22px' fontWeight={ 400} - mt={!totalLocked ? '5px' : undefined} price={price} skeletonHeight={20} /> diff --git a/packages/extension-polkagate/src/fullscreen/accountDetails/components/TotalChart.tsx b/packages/extension-polkagate/src/fullscreen/accountDetails/components/TotalChart.tsx index c70b724dd..67f2e7a4f 100644 --- a/packages/extension-polkagate/src/fullscreen/accountDetails/components/TotalChart.tsx +++ b/packages/extension-polkagate/src/fullscreen/accountDetails/components/TotalChart.tsx @@ -132,20 +132,20 @@ export default function TotalChart ({ accountAssets, pricesInCurrency }: Props): - + {t('Total')} - 0 ? 'success.main' : 'warning.main', fontSize: '16px', fontWeight: 500 }}> + 0 ? 'success.main' : 'warning.main', fontSize: '15px', fontWeight: 500, mt: '10px' }}> } diff --git a/packages/extension-polkagate/src/fullscreen/addNewChain/index.tsx b/packages/extension-polkagate/src/fullscreen/addNewChain/index.tsx index 6c737fd56..3e86334e0 100644 --- a/packages/extension-polkagate/src/fullscreen/addNewChain/index.tsx +++ b/packages/extension-polkagate/src/fullscreen/addNewChain/index.tsx @@ -193,7 +193,7 @@ export default function AddNewChain (): React.ReactElement { <Bread /> <Title height='100px' - logo={<VaadinIcon icon='vaadin:globe-wire' style={{ color: `${theme.palette.text.primary}`, fontSize: '23px' }} />} + logo={<VaadinIcon icon='vaadin:globe-wire' style={{ color: `${theme.palette.text.primary}`, fontSize: '20px' }} />} text={t('Add New Chain')} /> <Typography fontSize='14px' fontWeight={400} mb={2}> diff --git a/packages/extension-polkagate/src/fullscreen/governance/FullScreenHeader.tsx b/packages/extension-polkagate/src/fullscreen/governance/FullScreenHeader.tsx index 59183828b..a4149ce4f 100644 --- a/packages/extension-polkagate/src/fullscreen/governance/FullScreenHeader.tsx +++ b/packages/extension-polkagate/src/fullscreen/governance/FullScreenHeader.tsx @@ -26,6 +26,18 @@ interface Props { unableToChangeAccount?: boolean; } +export const HEADER_COMPONENT_STYLE = { + bgcolor: 'transparent', + border: '1px solid', + borderColor: 'divider', + borderRadius: '5px', + cursor: 'pointer', + height: '42px', + overflow: 'hidden', + position: 'relative', + width: '42px' +}; + function FullScreenHeader ({ _otherComponents, noAccountDropDown = false, noChainSwitch = false, page, unableToChangeAccount }: Props): React.ReactElement { const { address, postId, topMenu } = useParams<{ address: string, topMenu?: 'referenda' | 'fellowship', postId?: string }>(); const allChains = useContext(GenesisHashOptionsContext); @@ -77,7 +89,7 @@ function FullScreenHeader ({ _otherComponents, noAccountDropDown = false, noChai , [isThisHome]); return ( - <Grid alignItems='center' container id='header' justifyContent='space-between' sx={{ bgcolor: '#000000', borderBottom: '1px solid', borderBottomColor: 'secondary.light', color: 'text.secondary', fontSize: '42px', fontWeight: 400, height: '70px', minWidth: '810px', px: '40px' }}> + <Grid alignItems='center' container id='header' justifyContent='space-between' sx={{ bgcolor: '#000000', borderBottom: '1px solid', borderBottomColor: 'divider', color: 'text.secondary', fontSize: '42px', fontWeight: 400, height: '70px', minWidth: '810px', px: '40px' }}> <Container disableGutters sx={{ maxWidth: MAX_WIDTH }}> <Grid alignItems='center' container justifyContent='space-between'> <Grid alignItems='center' container item justifyContent='flex-start' xs={5}> @@ -104,6 +116,7 @@ function FullScreenHeader ({ _otherComponents, noAccountDropDown = false, noChai <AddressDropdown api={api} chainGenesis={chain?.genesisHash} + inHeading onSelect={onAccountChange} selectedAddress={address} unableToChangeAccount={unableToChangeAccount} @@ -119,9 +132,9 @@ function FullScreenHeader ({ _otherComponents, noAccountDropDown = false, noChai </Grid> <Grid container item justifyContent='flex-end' width='50px'> {chain && - <RemoteNodeSelectorWithSignals - address={address} - /> + <RemoteNodeSelectorWithSignals + address={address} + /> } </Grid> </> diff --git a/packages/extension-polkagate/src/fullscreen/governance/SupportUs.tsx b/packages/extension-polkagate/src/fullscreen/governance/SupportUs.tsx index f6144f1a1..647615716 100644 --- a/packages/extension-polkagate/src/fullscreen/governance/SupportUs.tsx +++ b/packages/extension-polkagate/src/fullscreen/governance/SupportUs.tsx @@ -19,7 +19,7 @@ import { openOrFocusTab } from '../accountDetails/components/CommonTasks'; import { ENDED_STATUSES } from './utils/consts'; const PROPOSAL_NO = 1264; -const STORAGE_LABEL = `supportUs0000_${PROPOSAL_NO}`; +const STORAGE_LABEL = `supportUs_${PROPOSAL_NO}`; const StyledPaper = styled(Paper)(({ theme }: { theme: Theme }) => ({ background: theme.palette.background.default, diff --git a/packages/extension-polkagate/src/fullscreen/governance/components/AddressDropdown.tsx b/packages/extension-polkagate/src/fullscreen/governance/components/AddressDropdown.tsx index 2eb8c5ae2..6cf07e469 100644 --- a/packages/extension-polkagate/src/fullscreen/governance/components/AddressDropdown.tsx +++ b/packages/extension-polkagate/src/fullscreen/governance/components/AddressDropdown.tsx @@ -20,9 +20,10 @@ interface Props { selectedAddress: string | undefined; chainGenesis: string | undefined; unableToChangeAccount?: boolean; + inHeading?: boolean; } -export default function AddressDropdown ({ api, chainGenesis, onSelect, selectedAddress, unableToChangeAccount = false }: Props): React.ReactElement<Props> { +export default function AddressDropdown ({ api, chainGenesis, inHeading, onSelect, selectedAddress, unableToChangeAccount = false }: Props): React.ReactElement<Props> { const theme = useTheme(); const { accounts } = useContext(AccountContext); @@ -43,7 +44,7 @@ export default function AddressDropdown ({ api, chainGenesis, onSelect, selected return ( <Grid container style={{ position: 'relative' }}> - <Grid container sx={{ border: '1px solid', borderColor: 'secondary.light', borderRadius: '5px', color: 'white' }}> + <Grid container sx={{ border: inHeading ? 2 : 1, borderColor: inHeading ? 'divider' : 'secondary.light', borderRadius: '5px', color: 'white' }}> <Grid alignItems='center' container item justifyContent='space-around' maxWidth='calc(100% - 40px)' width='fit-content'> <Identity address={selectedAddress} @@ -63,7 +64,7 @@ export default function AddressDropdown ({ api, chainGenesis, onSelect, selected /> </Grid> {!unableToChangeAccount && - <Grid alignItems='center' container item onClick={toggleDropdown} ref={ref} sx={{ borderLeft: '1px solid', borderLeftColor: 'secondary.light', cursor: 'pointer', px: '10px', width: '40px' }}> + <Grid alignItems='center' container item onClick={toggleDropdown} ref={ref} sx={{ borderLeft: inHeading ? 2 : 1, borderLeftColor: inHeading ? 'divider' : 'secondary.light', cursor: 'pointer', px: '10px', width: '40px' }}> <ArrowForwardIosIcon sx={{ color: 'secondary.light', fontSize: 18, m: 'auto', stroke: theme.palette.secondary.light, strokeWidth: '2px', transform: isDropdownVisible ? 'rotate(-90deg)' : 'rotate(90deg)', transitionDuration: '0.3s', transitionProperty: 'transform' }} /> </Grid> } diff --git a/packages/extension-polkagate/src/fullscreen/governance/partials/ThemeChanger.tsx b/packages/extension-polkagate/src/fullscreen/governance/partials/ThemeChanger.tsx index dd798e6d8..1321821e6 100644 --- a/packages/extension-polkagate/src/fullscreen/governance/partials/ThemeChanger.tsx +++ b/packages/extension-polkagate/src/fullscreen/governance/partials/ThemeChanger.tsx @@ -5,63 +5,72 @@ import { DarkModeOutlined as DarkModeOutlinedIcon, LightModeOutlined as LightModeOutlinedIcon } from '@mui/icons-material'; import { Grid, keyframes, useTheme } from '@mui/material'; -import React, { useCallback, useContext } from 'react'; +import React, { useCallback, useContext, useMemo } from 'react'; import { ColorContext } from '../../../components'; +import { HEADER_COMPONENT_STYLE } from '../FullScreenHeader'; -function ThemeChanger ({ color = 'white', left = '7px', noBorder }: {color?: string, left?: string, noBorder?: boolean}): React.ReactElement { - const theme = useTheme(); - const colorMode = useContext(ColorContext); +interface Props { + color?: string; + left?: string; + noBorder?: boolean +} - const moonSlide = { - come: keyframes` +const moonSlide = { + come: keyframes` from{ transform: translateY(-50px); } to{ transform: translateY(7px); }`, - go: keyframes` + go: keyframes` from{ transform: translateY(7px); } to{ transform: translateY(-50px); }` - }; +}; - const sunSlide = { - come: keyframes` +const sunSlide = { + come: keyframes` from{ transform: translateY(50px); } to{ transform: translateY(7px); }`, - go: keyframes` + go: keyframes` from{ transform: translateY(7px); } to{ transform: translateY(50px); }` - }; +}; + +function ThemeChanger ({ color, left = '7px', noBorder }: Props): React.ReactElement { + const theme = useTheme(); + const colorMode = useContext(ColorContext); + + const _color = useMemo(() => color || (theme.palette.mode === 'dark' ? theme.palette.text.primary : theme.palette.text.secondary), [theme, color]); const themeIconsStyle = { animationDuration: '250ms', animationFillMode: 'forwards', - color, + color: _color, fontSize: '27px', left, m: 'auto', position: 'absolute', - top: 0 + top: '0px' }; const toggleTheme = useCallback(() => colorMode.toggleColorMode(), [colorMode]); return ( - <Grid container item onClick={toggleTheme} sx={{ border: noBorder ? undefined : '1px solid', borderColor: 'secondary.light', borderRadius: '5px', cursor: 'pointer', height: '42px', overflow: 'hidden', position: 'relative', width: '42px' }}> + <Grid alignItems='center' container item justifyContent='center' onClick={toggleTheme} sx={{ ...HEADER_COMPONENT_STYLE, border: noBorder ? 0 : HEADER_COMPONENT_STYLE?.border }}> <LightModeOutlinedIcon sx={{ animationName: `${theme.palette.mode === 'dark' ? sunSlide.go : sunSlide.come}`, ...themeIconsStyle }} /> <DarkModeOutlinedIcon sx={{ animationName: `${theme.palette.mode === 'dark' ? moonSlide.come : moonSlide.go}`, ...themeIconsStyle }} /> </Grid> diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/components/HeaderComponents.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/components/HeaderComponents.tsx index 57aea6ceb..3133bcbde 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/components/HeaderComponents.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/components/HeaderComponents.tsx @@ -3,75 +3,29 @@ /* eslint-disable react/jsx-max-props-per-line */ -import { Badge, Grid, Typography } from '@mui/material'; -import React, { useCallback, useEffect, useMemo } from 'react'; +import { Grid } from '@mui/material'; +import React from 'react'; -import { HideIcon, ShowIcon } from '../../../components'; -import { useIsTestnetEnabled, useSelectedChains, useTranslation } from '../../../hooks'; -import { TEST_NETS } from '../../../util/constants'; +import HideBalance from '../../../components/SVG/HideBalance'; +import { useIsHideNumbers } from '../../../hooks'; import Currency from '../partials/Currency'; import FavoriteChains from '../partials/FavoriteChains'; -interface Props { - hideNumbers: boolean | undefined; - setHideNumbers: React.Dispatch<React.SetStateAction<boolean | undefined>>; -} - -const HideNumbers = ({ hideNumbers, onHideClick }: { hideNumbers: boolean | undefined, onHideClick: () => void}) => { - const { t } = useTranslation(); - - return ( - <Grid alignItems='center' container direction='column' item onClick={onHideClick} sx={{ border: '1px solid', borderColor: 'secondary.light', borderRadius: '5px', cursor: 'pointer', minWidth: '92px', p: '2px 6px', width: 'fit-content' }}> - {hideNumbers - ? <ShowIcon color='#fff' height={18} scale={1.2} width={40} /> - : <HideIcon color='#fff' height={18} scale={1.2} width={40} /> - } - <Typography sx={{ color: '#fff', fontSize: '12px', fontWeight: 500, textWrap: 'nowrap', userSelect: 'none' }}> - {hideNumbers ? t('Show numbers') : t('Hide numbers')} - </Typography> - </Grid> - ); -}; - -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'); - }, [hideNumbers, setHideNumbers]); - - useEffect(() => { - const isHide = window.localStorage.getItem('hide_numbers'); - - 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)); - } +function HeaderComponents (): React.ReactElement { + const { isHideNumbers, toggleHideNumbers } = useIsHideNumbers(); - return filteredList.length; - }, [isTestNetEnabled, selectedChains]); + const spacings = '5px'; return ( - <Grid columnGap='18px' container item pl='18px' width='fit-content'> + <Grid columnGap={spacings} container item pl={spacings} width='fit-content'> <Currency /> - <Badge badgeContent={badgeCount} color='success'> - <FavoriteChains /> - </Badge> - <HideNumbers - hideNumbers={hideNumbers} - onHideClick={onHideClick} + <HideBalance + hide={isHideNumbers} + noBorder={false} + onClick={toggleHideNumbers} + size={22} /> + <FavoriteChains /> </Grid> ); } diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/index.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/index.tsx index 1717991f1..390fa8dd2 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/index.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/index.tsx @@ -27,7 +27,6 @@ function HomePageFullScreen (): React.ReactElement { const initialAccountList = useAccountsOrder(true); const { accounts: accountsInExtension } = useContext(AccountContext); - const [hideNumbers, setHideNumbers] = useState<boolean>(); const [groupedAssets, setGroupedAssets] = useState<AssetsWithUiAndPrice[] | undefined>(); const profileAccounts = useProfileAccounts(initialAccountList); @@ -45,8 +44,6 @@ function HomePageFullScreen (): React.ReactElement { <FullScreenHeader _otherComponents={ <HeaderComponents - hideNumbers={hideNumbers} - setHideNumbers={setHideNumbers} /> } noAccountDropDown @@ -61,7 +58,6 @@ function HomePageFullScreen (): React.ReactElement { <Grid container direction='column' item rowGap='20px' width='760px'> {profileAccounts && <DraggableAccountsList - hideNumbers={hideNumbers} initialAccountList={profileAccounts} /> } @@ -72,7 +68,6 @@ function HomePageFullScreen (): React.ReactElement { <Grid container direction='column' item rowGap='20px' width='fit-content'> <Grid container item width='fit-content'> <TotalBalancePieChart - hideNumbers={hideNumbers} setGroupedAssets={setGroupedAssets} /> </Grid> diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountBodyFs.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountBodyFs.tsx index 91b3011b4..eb58e3b4f 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountBodyFs.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountBodyFs.tsx @@ -51,7 +51,7 @@ function AccountBodyFs ({ address, goToDetails = noop, gridSize }: Props): React chain={chain} noIdenticon onClick={goToDetails} - style={{ width: 'calc(100% - 40px)' }} + style={{ fontSize: '22px', width: 'calc(100% - 40px)' }} subIdOnly /> <Grid item width='40px'> diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx index 1f1da2813..1f7a025b8 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountInformationForHome.tsx @@ -16,10 +16,10 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { getValue } from '@polkadot/extension-polkagate/src/popup/account/util'; import { type BN, noop } from '@polkadot/util'; -import { stars6Black, stars6White } from '../../../assets/icons'; +import { stars5Black, stars5White } from '../../../assets/icons'; import NftManager from '../../../class/nftManager'; import FormatPrice from '../../../components/FormatPrice'; -import { useAccount, useCurrency, usePrices, useTranslation } from '../../../hooks'; +import { useAccount, useCurrency, useIsHideNumbers, usePrices, useTranslation } from '../../../hooks'; import { tieAccount } from '../../../messaging'; import { amountToHuman } from '../../../util/utils'; import AOC from '../../accountDetails/components/AOC'; @@ -37,7 +37,6 @@ interface AddressDetailsProps { accountAssets: FetchedBalance[] | null | undefined; address: string | undefined; selectedAsset: FetchedBalance | undefined; - hideNumbers: boolean | undefined setSelectedAsset: React.Dispatch<React.SetStateAction<FetchedBalance | undefined>>; isChild?: boolean; } @@ -86,15 +85,15 @@ const AccountTotal = ({ hideNumbers, totalBalance }: { hideNumbers: boolean | un return ( <Grid alignItems='center' container item xs> <Grid alignItems='center' container gap='15px' item justifyContent='center' width='fit-content'> - <Typography fontSize='16px' fontWeight={400} pl='15px'> + <Typography color='secondary.contrastText' fontSize='16px' fontWeight={400} pl='15px'> {t('Total')}: </Typography> { hideNumbers || hideNumbers === undefined - ? <Box component='img' src={(theme.palette.mode === 'dark' ? stars6White : stars6Black) as string} sx={{ height: '36px', width: '154px' }} /> + ? <Box component='img' src={(theme.palette.mode === 'dark' ? stars5White : stars5Black) as string} sx={{ height: '19px', width: '110px' }} /> : <FormatPrice commify - fontSize='24px' + fontSize='21px' fontWeight={700} num={totalBalance} skeletonHeight={28} @@ -106,7 +105,7 @@ const AccountTotal = ({ hideNumbers, totalBalance }: { hideNumbers: boolean | un ); }; -function AccountInformationForHome ({ accountAssets, address, hideNumbers, isChild, selectedAsset, setSelectedAsset }: AddressDetailsProps): React.ReactElement { +function AccountInformationForHome ({ accountAssets, address, isChild, selectedAsset, setSelectedAsset }: AddressDetailsProps): React.ReactElement { const nftManager = useMemo(() => new NftManager(), []); const { t } = useTranslation(); @@ -114,6 +113,7 @@ function AccountInformationForHome ({ accountAssets, address, hideNumbers, isChi const pricesInCurrencies = usePrices(); const currency = useCurrency(); const account = useAccount(address); + const { isHideNumbers } = useIsHideNumbers(); const [displayPopup, setDisplayPopup] = useState<number>(); const [myNfts, setNfts] = useState<ItemInformation[] | null | undefined>(); @@ -195,7 +195,7 @@ function AccountInformationForHome ({ accountAssets, address, hideNumbers, isChi gridSize={5.6} /> <AccountTotal - hideNumbers={hideNumbers} + hideNumbers={isHideNumbers} totalBalance={totalBalance} /> </Grid> @@ -207,7 +207,7 @@ function AccountInformationForHome ({ accountAssets, address, hideNumbers, isChi <AOC accountAssets={assetsToShow} address={address} - hideNumbers={hideNumbers} + hideNumbers={isHideNumbers} mode='Home' onclick={onAssetBoxClicked} selectedAsset={selectedAsset} diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountItem.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountItem.tsx index 76c19c268..f241971e1 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountItem.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/AccountItem.tsx @@ -21,13 +21,12 @@ import AccountInformationForHome from './AccountInformationForHome'; interface Props { account: AccountWithChildren; - hideNumbers: boolean | undefined; quickActionOpen: string | boolean | undefined; setQuickActionOpen: React.Dispatch<React.SetStateAction<string | boolean | undefined>>; id?: number; } -function AccountItem ({ account, hideNumbers, id, quickActionOpen, setQuickActionOpen }: Props): React.ReactElement { +function AccountItem ({ account, id, quickActionOpen, setQuickActionOpen }: Props): React.ReactElement { const theme = useTheme(); const chain = useChain(account.address); const accountAssets = useAccountAssets(account.address); @@ -54,7 +53,7 @@ function AccountItem ({ account, hideNumbers, id, quickActionOpen, setQuickActio return ( <div ref={id ? setNodeRef : null} style={{ transform: CSS.Transform.toString(transform), transition }}> <Grid container {...attributes} item ref={containerRef} sx={{ borderRadius: '5px', boxShadow: '2px 3px 4px 0px rgba(0, 0, 0, 0.1)', overflow: 'hidden', position: 'relative' }} width='760px'> - <DragIndicatorIcon {...listeners} sx={{ ':active': { cursor: 'grabbing' }, color: 'secondary.contrastText', cursor: 'grab', fontSize: '25px', position: 'absolute', right: '5px', top: '5px' }} /> + <DragIndicatorIcon {...listeners} sx={{ ':active': { cursor: 'grabbing' }, color: 'secondary.contrastText', cursor: 'grab', fontSize: '25px', position: 'absolute', right: '5px', top: '5px', opacity: 0.5 }} /> <AccountLabel account={account} ml='30px' @@ -63,7 +62,6 @@ function AccountItem ({ account, hideNumbers, id, quickActionOpen, setQuickActio <AccountInformationForHome accountAssets={accountAssets} address={account.address} - hideNumbers={hideNumbers} isChild={!!hasParent} selectedAsset={assetToShow} setSelectedAsset={setSelectedAsset} diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/Currency.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/Currency.tsx index 6dcd15d68..26d6312be 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/Currency.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/Currency.tsx @@ -8,6 +8,7 @@ import React, { useCallback, useLayoutEffect, useMemo, useState } from 'react'; import Infotip2 from '../../../components/Infotip2'; import { getStorage } from '../../../components/Loading'; +import { HEADER_COMPONENT_STYLE } from '../../governance/FullScreenHeader'; import CurrencySwitch from '../components/CurrencySwitch'; export interface CurrencyItemType { @@ -47,9 +48,9 @@ export default function Currency (): React.ReactElement { return ( <> - <Grid alignItems='center' aria-describedby={id} component='button' container direction='column' item justifyContent='center' onClick={onCurrencyClick} sx={{ bgcolor: 'transparent', border: '1px solid', borderColor: 'secondary.light', borderRadius: '5px', cursor: 'pointer', height: '42px', minWidth: '42px', p: '2px 6px', position: 'relative', width: 'fit-content' }}> + <Grid alignItems='center' aria-describedby={id} component='button' container direction='column' item justifyContent='center' onClick={onCurrencyClick} sx={{ ...HEADER_COMPONENT_STYLE }}> <Infotip2 text={currencyToShow?.currency}> - <Typography color={textColor} fontSize='25px' fontWeight={600}> + <Typography color={textColor} fontSize='22px' fontWeight={500}> {currencyToShow?.sign || '$'} </Typography> </Infotip2> diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/DraggableAccountList.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/DraggableAccountList.tsx index 8e19a3040..37af6747d 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/DraggableAccountList.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/DraggableAccountList.tsx @@ -15,7 +15,6 @@ import AccountItem from './AccountItem'; interface Props { initialAccountList: AccountsOrder[]; - hideNumbers: boolean | undefined; } export const saveNewOrder = (newOrder: AccountsOrder[]) => { @@ -24,7 +23,7 @@ export const saveNewOrder = (newOrder: AccountsOrder[]) => { chrome.storage.local.set({ addressOrder }).catch(console.error); }; -function DraggableAccountList ({ hideNumbers, initialAccountList }: Props) { +function DraggableAccountList ({ initialAccountList }: Props) { const [accountsOrder, setAccountsOrder] = useState<AccountsOrder[]>(initialAccountList); const [quickActionOpen, setQuickActionOpen] = useState<string | boolean>(); @@ -56,7 +55,6 @@ function DraggableAccountList ({ hideNumbers, initialAccountList }: Props) { {accountsOrder.map(({ account, id }) => ( <AccountItem account={account} - hideNumbers={hideNumbers} id={id} key={id} quickActionOpen={quickActionOpen} diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FavoriteChains.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FavoriteChains.tsx index 5c20719f7..4a00a1a2c 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FavoriteChains.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FavoriteChains.tsx @@ -5,17 +5,25 @@ import { faSliders } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Grid, Popover, useTheme } from '@mui/material'; -import React, { useCallback, useState } from 'react'; +import { Badge, Grid, Popover, useTheme } from '@mui/material'; +import React, { useCallback, useMemo, useState } from 'react'; +import { useIsTestnetEnabled, useSelectedChains } from '../../../hooks'; +import { TEST_NETS } from '../../../util/constants'; +import { HEADER_COMPONENT_STYLE } from '../../governance/FullScreenHeader'; import ChainList from '../components/ChainList'; export interface CurrencyItemType { code: string; country: string; currency: string; sign: string; }; export default function FavoriteChains (): React.ReactElement { const theme = useTheme(); + const selectedChains = useSelectedChains(); + const isTestNetEnabled = useIsTestnetEnabled(); + const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null); + const color = theme.palette.mode === 'dark' ? theme.palette.text.primary : theme.palette.text.secondary; + const onChainListClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => { setAnchorEl(event.currentTarget); }, []); @@ -27,12 +35,26 @@ export default function FavoriteChains (): React.ReactElement { const open = Boolean(anchorEl); const id = open ? 'simple-popover' : undefined; + 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 alignItems='center' aria-describedby={id} component='button' container direction='column' item justifyContent='center' onClick={onChainListClick} sx={{ bgcolor: 'transparent', border: '1px solid', borderColor: 'secondary.light', borderRadius: '5px', cursor: 'pointer', p: '2px 6px', position: 'relative', width: '42px' }}> + <Badge badgeContent={badgeCount} color='success'> + <Grid alignItems='center' aria-describedby={id} component='button' container direction='column' item justifyContent='center' onClick={onChainListClick} sx={{ ...HEADER_COMPONENT_STYLE}}> <FontAwesomeIcon - color='#fff' - fontSize='24px' + color={color} + fontSize='22px' icon={faSliders} /> </Grid> @@ -58,6 +80,6 @@ export default function FavoriteChains (): React.ReactElement { anchorEl={anchorEl} /> </Popover> - </> + </Badge> ); } diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FullScreenAccountMenu.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FullScreenAccountMenu.tsx index e5b0852e5..f734692ea 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FullScreenAccountMenu.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/FullScreenAccountMenu.tsx @@ -199,7 +199,7 @@ function FullScreenAccountMenu ({ address, baseButton, setDisplayPopup }: Props) </Grid> <Popover PaperProps={{ - sx: { backgroundImage: 'none', bgcolor: 'background.paper', border: '1px solid', borderColor: theme.palette.mode === 'dark' ? 'secondary.main' : 'transparent', borderRadius: '7px', boxShadow: theme.palette.mode === 'dark' ? '0px 4px 4px rgba(255, 255, 255, 0.25)' : '0px 0px 25px 0px rgba(0, 0, 0, 0.50)' } + sx: { backgroundImage: 'none', bgcolor: 'background.paper', border: '1px solid', borderColor: theme.palette.mode === 'dark' ? 'secondary.light' : 'transparent', borderRadius: '7px', boxShadow: theme.palette.mode === 'dark' ? '0px 4px 4px rgba(255, 255, 255, 0.25)' : '0px 0px 25px 0px rgba(0, 0, 0, 0.50)' } }} anchorEl={anchorEl} anchorOrigin={{ diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/HomeMenu.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/HomeMenu.tsx index 7f717f919..854086f59 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/HomeMenu.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/HomeMenu.tsx @@ -36,7 +36,7 @@ export const TaskButton = ({ children, disabled, extra, hasChildren, icon, isSub return ( <> - <Grid alignItems='center' container item justifyContent='space-between' onClick={disabled ? noop : onClick} sx={{ '&:hover': { bgcolor: disabled ? 'transparent' : 'divider' }, borderRadius: '5px', cursor: disabled ? 'default' : 'pointer', minHeight: isSubMenu ? '40px' : '45px', p: '5px 0px 5px 10px', my: '5px' }}> + <Grid alignItems='center' container item justifyContent='space-between' onClick={disabled ? noop : onClick} sx={{ '&:hover': { bgcolor: disabled ? 'transparent' : 'divider' }, borderRadius: '5px', cursor: disabled ? 'default' : 'pointer', minHeight: isSubMenu ? '40px' : '41px', p: '5px 0px 5px 10px', my: '5px' }}> <Grid container item xs={2}> {icon} </Grid> @@ -102,7 +102,7 @@ export default function HomeMenu(): React.ReactElement { <Grid alignItems='center' container direction='column' display='block' item justifyContent='center' sx={{ pb: '40px' }}> <TaskButton icon={ - <VaadinIcon icon='vaadin:plus-circle' style={{ height: '30px', color: `${theme.palette.text.primary}`, width: '30px' }} /> + <VaadinIcon icon='vaadin:plus-circle' style={{ height: '25px', color: `${theme.palette.text.primary}`, width: '25px' }} /> } onClick={onCreate} secondaryIconType='page' @@ -111,7 +111,7 @@ export default function HomeMenu(): React.ReactElement { <TaskButton disabled={areAllExternalAccounts} icon={ - <VaadinIcon icon='vaadin:road-branch' style={{ height: '30px', color: `${theme.palette.text.primary}`, width: '30px' }} /> + <VaadinIcon icon='vaadin:road-branch' style={{ height: '25px', color: `${theme.palette.text.primary}`, width: '25px' }} /> } onClick={onDeriveFromAccounts} secondaryIconType='page' @@ -120,7 +120,7 @@ export default function HomeMenu(): React.ReactElement { <TaskButton hasChildren icon={ - <VaadinIcon float={showImport} icon='vaadin:upload-alt' style={{ height: '30px', color: `${theme.palette.text.primary}`, width: '30px' }} /> + <VaadinIcon float={showImport} icon='vaadin:upload-alt' style={{ height: '25px', color: `${theme.palette.text.primary}`, width: '25px' }} /> } onClick={onImportClick} secondaryIconType='page' @@ -132,7 +132,7 @@ export default function HomeMenu(): React.ReactElement { <TaskButton disabled={areAllExternalAccounts} icon={ - <VaadinIcon icon='vaadin:download' style={{ height: '30px', color: `${theme.palette.text.primary}`, width: '30px' }} /> + <VaadinIcon icon='vaadin:download' style={{ height: '25px', color: `${theme.palette.text.primary}`, width: '25px' }} /> } onClick={onExportAll} secondaryIconType='popup' @@ -141,7 +141,7 @@ export default function HomeMenu(): React.ReactElement { <TaskButton hasChildren icon={ - <VaadinIcon icon='vaadin:cog' spin ={showSetting} style={{ height: '30px', color: `${theme.palette.text.primary}`, width: '30px' }} /> + <VaadinIcon icon='vaadin:cog' spin ={showSetting} style={{ height: '25px', color: `${theme.palette.text.primary}`, width: '25px' }} /> } noBorderButton onClick={onSettingClick} diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ImportAccSubMenuFullScreen.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ImportAccSubMenuFullScreen.tsx index c3770e7e3..dc8bfbb44 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ImportAccSubMenuFullScreen.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ImportAccSubMenuFullScreen.tsx @@ -81,7 +81,7 @@ function ImportAccSubMenuFullScreen ({ show, toggleSettingSubMenu }: Props): Rea /> <TaskButton icon={ - <VaadinIcon icon='vaadin:sitemap' style={{ height: '25px', color: `${theme.palette.text.primary}`, width: '25px', transform: 'rotate(180deg)' }} /> + <VaadinIcon icon='vaadin:cluster' style={{ height: '25px', color: `${theme.palette.text.primary}`, width: '25px' }} /> } isSubMenu onClick={onImportProxiedFullScreen} diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileTabFullScreen.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileTabFullScreen.tsx index 04cf34db1..9469a5f92 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileTabFullScreen.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/ProfileTabFullScreen.tsx @@ -80,7 +80,11 @@ export default function ProfileTabFullScreen ({ index, isHovered, orderedAccount setSelectedProfile(res as string || t('All')); }).catch(console.error); - watchStorage('profile', setSelectedProfile).catch(console.error); + const unsubscribe = watchStorage('profile', setSelectedProfile); + + return () => { + unsubscribe(); + }; }, [setSelectedProfile, t]); return ( @@ -103,13 +107,14 @@ export default function ProfileTabFullScreen ({ index, isHovered, orderedAccount '&:hover': { boxShadow: shadowOnHover }, - border: 1, + border: 2, borderColor: getProfileColor(index, theme) || 'background.paper', borderRadius: '15px', boxShadow: shadow, cursor: 'pointer', flexShrink: 0, minWidth: '100px', + mt: '2px', opacity: isDarkMode ? (visibleContent ? 1 : 0.3) : undefined, position: 'relative', transform: hideCard ? `translateY(-${HIDDEN_PERCENT})` : undefined, @@ -119,9 +124,9 @@ export default function ProfileTabFullScreen ({ index, isHovered, orderedAccount width: 'fit-content' }} > - <VaadinIcon icon={'vaadin:check'} style={{ height: '13px', visibility: isSelected ? 'visible' : 'hidden', width: '15px' }} /> + <VaadinIcon icon={'vaadin:check'} style={{ height: '12px', visibility: isSelected ? 'visible' : 'hidden', width: '15px' }} /> <Typography - color={'text.primary'} display='block' fontSize='16px' fontWeight={isSelected ? 500 : 400} + color={'text.primary'} display='block' fontSize='16px' fontWeight={400} sx={{ maxWidth: '100px', overflow: 'hidden', diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx index 2f75bb21d..a364231d5 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx @@ -15,7 +15,7 @@ import { BN, BN_ZERO } from '@polkadot/util'; import { stars6Black, stars6White } from '../../../assets/icons'; import { AccountsAssetsContext, AssetLogo } from '../../../components'; import FormatPrice from '../../../components/FormatPrice'; -import { useCurrency, usePrices, useTranslation, useYouHave } from '../../../hooks'; +import { useCurrency, useIsHideNumbers, usePrices, useTranslation, useYouHave } from '../../../hooks'; import { calcPrice } from '../../../hooks/useYouHave'; import { isPriceOutdated } from '../../../popup/home/YouHave'; import { COIN_GECKO_PRICE_CHANGE_DURATION } from '../../../util/api/getPrices'; @@ -25,7 +25,6 @@ import { countDecimalPlaces, fixFloatingPoint } from '../../../util/utils'; import Chart from './Chart'; interface Props { - hideNumbers: boolean | undefined; setGroupedAssets: React.Dispatch<React.SetStateAction<AssetsWithUiAndPrice[] | undefined>> } @@ -118,13 +117,14 @@ const DisplayAssetRow = ({ asset, hideNumbers }: { asset: AssetsWithUiAndPrice, ); }; -function TotalBalancePieChart ({ hideNumbers, setGroupedAssets }: Props): React.ReactElement { +function TotalBalancePieChart ({ setGroupedAssets }: Props): React.ReactElement { const theme = useTheme(); const { t } = useTranslation(); const currency = useCurrency(); const pricesInCurrencies = usePrices(); const youHave = useYouHave(); + const { isHideNumbers } = useIsHideNumbers(); const { accountsAssets } = useContext(AccountsAssetsContext); @@ -211,20 +211,20 @@ function TotalBalancePieChart ({ hideNumbers, setGroupedAssets }: Props): React. return ( <Grid alignItems='flex-start' container direction='column' item justifyContent='flex-start' sx={{ bgcolor: 'background.paper', borderRadius: '5px', boxShadow: '2px 3px 4px 0px rgba(0, 0, 0, 0.1)', height: 'fit-content', p: '15px 25px 10px', width: '430px' }}> <Grid alignItems='flex-start' container item justifyContent='flex-start'> - <Typography sx={{ fontSize: '22px', fontVariant: 'small-caps', fontWeight: 400 }}> + <Typography sx={{ fontSize: '21px', fontVariant: 'small-caps', fontWeight: 400 }}> {t('My Portfolio')} </Typography> <Grid alignItems='center' container item justifyContent = 'space-between' sx={{ my: '13px' }}> - {hideNumbers || hideNumbers === undefined || !youHave + {!youHave || isHideNumbers ? <Box component='img' src={(theme.palette.mode === 'dark' ? stars6White : stars6Black) as string} - sx={{ height: '32px', width: '154px' }} + sx={{ height: '28px', width: '154px' }} /> : <> <FormatPrice commify - fontSize='30px' + fontSize='28px' fontWeight={700} num={youHave?.portfolio} textColor= { isPriceOutdated(youHave) ? 'primary.light' : 'text.primary'} @@ -250,7 +250,7 @@ function TotalBalancePieChart ({ hideNumbers, setGroupedAssets }: Props): React. {assets.slice(0, 3).map((asset, index) => ( <DisplayAssetRow asset={asset} - hideNumbers={hideNumbers} + hideNumbers={isHideNumbers} key={index} /> ))} @@ -260,7 +260,7 @@ function TotalBalancePieChart ({ hideNumbers, setGroupedAssets }: Props): React. {assets.slice(3).map((asset, index) => ( <DisplayAssetRow asset={asset} - hideNumbers={hideNumbers} + hideNumbers={isHideNumbers} key={index} /> ))} @@ -268,7 +268,7 @@ function TotalBalancePieChart ({ hideNumbers, setGroupedAssets }: Props): React. <Divider sx={{ bgcolor: 'divider', height: '2px', mt: '10px', width: '100%' }} /> <Grid alignItems='center' container item onClick={toggleAssets} sx={{ cursor: 'pointer', p: '5px', width: 'fit-content' }}> <Typography color='secondary.light' fontSize='14px' fontWeight={400}> - {t<string>(showMore ? t('Less') : t('More'))} + {t(showMore ? t('Less') : t('More'))} </Typography> <ArrowDropDownIcon sx={{ color: 'secondary.light', fontSize: '20px', stroke: theme.palette.secondary.light, strokeWidth: '2px', transform: showMore ? 'rotate(-180deg)' : 'rotate(0deg)', transitionDuration: '0.2s', transitionProperty: 'transform' }} /> </Grid> diff --git a/packages/extension-polkagate/src/fullscreen/manageProxies/Manage.tsx b/packages/extension-polkagate/src/fullscreen/manageProxies/Manage.tsx index 967b33255..b23f023b8 100644 --- a/packages/extension-polkagate/src/fullscreen/manageProxies/Manage.tsx +++ b/packages/extension-polkagate/src/fullscreen/manageProxies/Manage.tsx @@ -119,7 +119,7 @@ export default function Manage ({ api, chain, decimal, depositedValue, isDisable <Bread /> <Title height='100px' - logo={<VaadinIcon icon='vaadin:sitemap' style={{ fontSize: '23px', color: `${theme.palette.text.primary}` }} />} + logo={<VaadinIcon icon='vaadin:sitemap' style={{ color: `${theme.palette.text.primary}`, fontSize: '20px' }} />} text={t('Proxy Management')} /> <Typography fontSize='14px' fontWeight={400}> diff --git a/packages/extension-polkagate/src/fullscreen/manageProxies/Review.tsx b/packages/extension-polkagate/src/fullscreen/manageProxies/Review.tsx index d452feec5..38a193db9 100644 --- a/packages/extension-polkagate/src/fullscreen/manageProxies/Review.tsx +++ b/packages/extension-polkagate/src/fullscreen/manageProxies/Review.tsx @@ -152,7 +152,7 @@ function Review({ address, api, chain, depositedValue, newDepositValue, proxyIte <Grid container item> <Title logo={ - <VaadinIcon icon='vaadin:sitemap' style={{ fontSize: '25px', color: `${theme.palette.text.primary}` }} /> + <VaadinIcon icon='vaadin:sitemap' style={{ fontSize: '20px', color: `${theme.palette.text.primary}` }} /> } text={ [STEPS.REVIEW, STEPS.PROXY, STEPS.SIGN_QR].includes(step) diff --git a/packages/extension-polkagate/src/fullscreen/sendFund/InputPage.tsx b/packages/extension-polkagate/src/fullscreen/sendFund/InputPage.tsx index d048aafcf..21f67d71e 100644 --- a/packages/extension-polkagate/src/fullscreen/sendFund/InputPage.tsx +++ b/packages/extension-polkagate/src/fullscreen/sendFund/InputPage.tsx @@ -77,14 +77,14 @@ export const Title = ({ height, icon, logo, ml, onBackClick, padding = '30px 0px <FontAwesomeIcon color={theme.palette.text.primary} icon={icon} - size='2xl' + size='xl' style={{ paddingBottom: '5px' }} /> } {logo as any} </Grid> <Grid item> - <Typography fontSize='30px' fontWeight={700}> + <Typography fontSize='24px' fontWeight={700}> {text} </Typography> </Grid> diff --git a/packages/extension-polkagate/src/fullscreen/stake/index.tsx b/packages/extension-polkagate/src/fullscreen/stake/index.tsx index 8d2325a97..a11d301ec 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/index.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/index.tsx @@ -113,9 +113,9 @@ export default function StakingOptions (): React.ReactElement { } logo={ poolSteps.includes(step) - ? <PoolStakingIcon color={theme.palette.text.primary} height={60} width={60} /> + ? <PoolStakingIcon color={theme.palette.text.primary} height={50} width={50} /> : [STEPS.STAKE_SOLO, STEPS.SOLO_REVIEW].includes(step) && - <BoyIcon sx={{ color: 'text.primary', fontSize: '62px' }} />} + <BoyIcon sx={{ color: 'text.primary', fontSize: '50px' }} />} ml={generalSteps.includes(step) ? undefined : '-25px'} padding='0px' text={getHeaderText(txInfo?.success)} diff --git a/packages/extension-polkagate/src/fullscreen/stake/pool/PoolStaked.tsx b/packages/extension-polkagate/src/fullscreen/stake/pool/PoolStaked.tsx index 107739ef6..730a26723 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/pool/PoolStaked.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/pool/PoolStaked.tsx @@ -76,7 +76,7 @@ export default function PoolStaked ({ address, balances, pool, redeemable, setSh <Title height='70px' logo={ - <PoolStakingIcon color={theme.palette.text.primary} height={60} width={60} /> + <PoolStakingIcon color={theme.palette.text.primary} height={50} width={50} /> } ml='-10px' padding='0px' diff --git a/packages/extension-polkagate/src/fullscreen/stake/pool/commonTasks/manageValidators/index.tsx b/packages/extension-polkagate/src/fullscreen/stake/pool/commonTasks/manageValidators/index.tsx index 9c0794608..aba9039be 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/pool/commonTasks/manageValidators/index.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/pool/commonTasks/manageValidators/index.tsx @@ -7,7 +7,7 @@ import type { TxInfo } from '@polkadot/extension-polkagate/src/util/types'; import type { StakingInputs } from '../../../type'; -import { faHand } from '@fortawesome/free-solid-svg-icons'; +import { faHandDots } from '@fortawesome/free-solid-svg-icons'; import { Grid } from '@mui/material'; import React, { useCallback, useMemo, useState } from 'react'; import { useParams } from 'react-router'; @@ -54,7 +54,7 @@ export default function ManageValidators (): React.ReactElement { <Bread /> <Title height='100px' - icon={faHand} + icon={faHandDots} text={t('Manage Pool Validators')} /> <Grid alignItems='center' container item justifyContent='flex-start'> diff --git a/packages/extension-polkagate/src/fullscreen/stake/pool/index.tsx b/packages/extension-polkagate/src/fullscreen/stake/pool/index.tsx index 1e10cad9f..e9524654a 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/pool/index.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/pool/index.tsx @@ -152,7 +152,7 @@ export default function Index (): React.ReactElement { <Bread /> <Title height='85px' - logo={<PoolStakingIcon color={theme.palette.text.primary} height={60} width={60} />} + logo={<PoolStakingIcon color={theme.palette.text.primary} height={50} width={50} />} ml='-9px' padding='0px' spacing={0} diff --git a/packages/extension-polkagate/src/fullscreen/stake/pool/partials/PoolCommonTasks.tsx b/packages/extension-polkagate/src/fullscreen/stake/pool/partials/PoolCommonTasks.tsx index 9c90f0c87..19b98ae6a 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/pool/partials/PoolCommonTasks.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/pool/partials/PoolCommonTasks.tsx @@ -3,7 +3,7 @@ /* eslint-disable react/jsx-max-props-per-line */ -import { faHand, faLock, faLockOpen, faPenToSquare, faPersonCircleXmark, faRightFromBracket, faWrench } from '@fortawesome/free-solid-svg-icons'; +import { faHandDots, faLock, faLockOpen, faPenToSquare, faPersonCircleXmark, faRightFromBracket, faWrench } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { AutoDelete as AutoDeleteIcon } from '@mui/icons-material'; import { Collapse, Divider, Grid, Typography, useTheme } from '@mui/material'; @@ -151,7 +151,7 @@ export default function PoolCommonTasks({ address }: Props): React.ReactElement <FontAwesomeIcon color={`${poolState === 'Destroying' || !poolRoot ? theme.palette.action.disabledBackground : theme.palette.text.primary}`} fontSize='22px' - icon={faHand} + icon={faHandDots} /> } mr='0px' diff --git a/packages/extension-polkagate/src/fullscreen/stake/solo/StakedSolo.tsx b/packages/extension-polkagate/src/fullscreen/stake/solo/StakedSolo.tsx index 7f7711321..ef5b367e1 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/solo/StakedSolo.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/solo/StakedSolo.tsx @@ -78,7 +78,7 @@ export default function StakedSolo ({ balances, refresh, setRefresh, setShow, st <Bread /> <Title height='70px' - logo={<BoyIcon sx={{ color: 'text.primary', fontSize: '60px' }} />} + logo={<BoyIcon sx={{ color: 'text.primary', fontSize: '50px' }} />} ml='-20px' padding='0px' spacing={0} diff --git a/packages/extension-polkagate/src/fullscreen/stake/solo/index.tsx b/packages/extension-polkagate/src/fullscreen/stake/solo/index.tsx index 209251aca..0b01e281b 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/solo/index.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/solo/index.tsx @@ -118,7 +118,7 @@ export default function Index (): React.ReactElement { <Bread /> <Title height='85px' - logo={<BoyIcon sx={{ color: 'text.primary', fontSize: '62px' }} />} + logo={<BoyIcon sx={{ color: 'text.primary', fontSize: '50px' }} />} ml='-25px' padding='0px' spacing={0} diff --git a/packages/extension-polkagate/src/fullscreen/stake/solo/partials/ActiveValidators.tsx b/packages/extension-polkagate/src/fullscreen/stake/solo/partials/ActiveValidators.tsx index b1b0cf1cf..9c4ca5e73 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/solo/partials/ActiveValidators.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/solo/partials/ActiveValidators.tsx @@ -31,7 +31,7 @@ export default function ActiveValidators ({ address, isValidator }: Props): Reac const stakingConsts = useStakingConsts(address); const [showDetails, setShowDetails] = useState<boolean>(); - const SKELETON_COUNT = 4; + const SKELETON_COUNT = 5; const toggleDetails = useCallback(() => { setShowDetails(!showDetails); diff --git a/packages/extension-polkagate/src/fullscreen/stake/solo/partials/ShowValidator.tsx b/packages/extension-polkagate/src/fullscreen/stake/solo/partials/ShowValidator.tsx index f8a2d617f..d34f3a951 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/solo/partials/ShowValidator.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/solo/partials/ShowValidator.tsx @@ -55,7 +55,7 @@ function ShowValidator ({ accountInfo, allInOneRow = true, api, chain, check, de const ifOverSubscribed = isOversubscribed?.safe || isOversubscribed?.notSafe; return ( - <Grid alignItems='center' container item p='3px 5px' rowGap={!allInOneRow ? '5px' : undefined} sx={{ borderRight: allInOneRow ? '1px solid' : undefined, borderRightColor: allInOneRow ? 'secondary.main' : undefined }} width={allInOneRow ? '94%' : '100%'}> + <Grid alignItems='center' container item p='3px 5px' rowGap={!allInOneRow ? '5px' : undefined} sx={{ borderRight: allInOneRow ? '1px solid' : undefined, borderRightColor: allInOneRow ? 'secondary.light' : undefined }} width={allInOneRow ? '94%' : '100%'}> {showCheckbox && <Grid item width='5%'> <Checkbox2 @@ -65,7 +65,7 @@ function ShowValidator ({ accountInfo, allInOneRow = true, api, chain, check, de /> </Grid> } - <Grid container fontSize='14px' item maxWidth={showCheckbox ? '30%' : allInOneRow ? '50%' : '100%'} textAlign='left' width={allInOneRow ? 'fit-content' : '100%'}> + <Grid container fontSize='14px' item maxWidth={showCheckbox ? '29%' : allInOneRow ? '50%' : '100%'} textAlign='left' width={allInOneRow ? 'fit-content' : '100%'}> <Identity accountInfo={accountInfo} api={api} diff --git a/packages/extension-polkagate/src/fullscreen/stake/solo/partials/ValidatorsTableFS.tsx b/packages/extension-polkagate/src/fullscreen/stake/solo/partials/ValidatorsTableFS.tsx index 4e63f9f10..4382544d9 100644 --- a/packages/extension-polkagate/src/fullscreen/stake/solo/partials/ValidatorsTableFS.tsx +++ b/packages/extension-polkagate/src/fullscreen/stake/solo/partials/ValidatorsTableFS.tsx @@ -102,7 +102,7 @@ export default function ValidatorsTableFS ({ activeValidators, address, allValid const isNominated = !!nominatedValidatorsIds?.find((n) => n === v.accountId); return ( - <Grid container item key={key} sx={{ backgroundColor: isNominated ? alpha(theme.palette.primary.main, theme.palette.mode === 'dark' ? 0.4 : 0.2) : undefined, borderBottom: '1px solid', borderBottomColor: 'secondary.main', overflowY: 'scroll', ...style }}> + <Grid container item key={key} sx={{ backgroundColor: isNominated ? alpha(theme.palette.primary.main, theme.palette.mode === 'dark' ? 0.4 : 0.2) : undefined, borderBottom: '1px solid', borderBottomColor: 'secondary.light', overflowY: 'scroll', ...style }}> <ShowValidator accountInfo={accountInfo} api={api} diff --git a/packages/extension-polkagate/src/hooks/index.ts b/packages/extension-polkagate/src/hooks/index.ts index 2c4a457be..f49fcf665 100644 --- a/packages/extension-polkagate/src/hooks/index.ts +++ b/packages/extension-polkagate/src/hooks/index.ts @@ -55,6 +55,7 @@ export { default as useIdentity } from './useIdentity'; export { default as useInfo } from './useInfo'; export { default as useIsExposed } from './useIsExposed'; export { default as useIsExtensionPopup } from './useIsExtensionPopup'; +export { default as useIsHideNumbers } from './useIsHideNumbers'; export { default as useIsLoginEnabled } from './useIsLoginEnabled'; export { default as useIsMounted } from './useIsMounted'; export { default as useIsRecoverableTooltipText } from './useIsRecoverableTooltipText'; diff --git a/packages/extension-polkagate/src/hooks/useAssetsBalances.ts b/packages/extension-polkagate/src/hooks/useAssetsBalances.ts index 485a1303b..f558dc3f7 100644 --- a/packages/extension-polkagate/src/hooks/useAssetsBalances.ts +++ b/packages/extension-polkagate/src/hooks/useAssetsBalances.ts @@ -259,7 +259,11 @@ export default function useAssetsBalances (accounts: AccountJson[] | null, setAl setFetchedAssets(savedAssets as SavedAssets); }).catch(console.error); - watchStorage(ASSETS_NAME_IN_STORAGE, setFetchedAssets, true).catch(console.error); + const unsubscribe = watchStorage(ASSETS_NAME_IN_STORAGE, setFetchedAssets, true); + + return () => { + unsubscribe(); + }; }, [SHOULD_FETCH_ASSETS, addresses]); const handleSetWorkersCall = useCallback((worker: Worker, terminate?: 'terminate') => { diff --git a/packages/extension-polkagate/src/hooks/useCurrency.ts b/packages/extension-polkagate/src/hooks/useCurrency.ts index 7bfb9878e..389436a73 100644 --- a/packages/extension-polkagate/src/hooks/useCurrency.ts +++ b/packages/extension-polkagate/src/hooks/useCurrency.ts @@ -22,7 +22,11 @@ export default function useCurrency (): CurrencyItemType | undefined { setCurrency(res as CurrencyItemType || USD_CURRENCY); }).catch(console.error); - watchStorage('currency', setCurrency).catch(console.error); + const unsubscribe = watchStorage('currency', setCurrency); + + return () => { + unsubscribe(); + }; }, [setCurrency]); return currency; diff --git a/packages/extension-polkagate/src/hooks/useIsHideNumbers.ts b/packages/extension-polkagate/src/hooks/useIsHideNumbers.ts new file mode 100644 index 000000000..914d71572 --- /dev/null +++ b/packages/extension-polkagate/src/hooks/useIsHideNumbers.ts @@ -0,0 +1,35 @@ +// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import { useCallback, useEffect, useState } from 'react'; + +import { getStorage, setStorage, watchStorage } from '../components/Loading'; + +interface HideNumbersProps { + isHideNumbers: boolean | undefined; + toggleHideNumbers: () => void; +} + +const HIDE_NUMBERS = 'hide_numbers'; + +export default function useIsHideNumbers (): HideNumbersProps { + const [hideNumbers, setHideNumbers] = useState<boolean>(); + + const toggleHideNumbers = useCallback(() => { + setStorage(HIDE_NUMBERS, !hideNumbers).catch(console.error); + }, [hideNumbers]); + + useEffect(() => { + getStorage(HIDE_NUMBERS).then((isHide) => { + setHideNumbers(!!isHide); + }).catch(console.error); + + const unsubscribe = watchStorage(HIDE_NUMBERS, setHideNumbers); + + return () => { + unsubscribe(); + }; + }, []); + + return { isHideNumbers: hideNumbers, toggleHideNumbers }; +} diff --git a/packages/extension-polkagate/src/hooks/usePrices.ts b/packages/extension-polkagate/src/hooks/usePrices.ts index 10cb7bb43..338518bcf 100644 --- a/packages/extension-polkagate/src/hooks/usePrices.ts +++ b/packages/extension-polkagate/src/hooks/usePrices.ts @@ -31,7 +31,11 @@ export default function usePrices (): Prices | undefined | null { const [updatedPrice, setUpdatedPrice] = useState<PricesInCurrencies | null>(); useEffect(() => { - watchStorage('pricesInCurrencies', setUpdatedPrice).catch(console.error); + const unsubscribe = watchStorage('pricesInCurrencies', setUpdatedPrice); + + return () => { + unsubscribe(); + }; }, [currency]); useEffect(() => { diff --git a/packages/extension-polkagate/src/hooks/useProfileAccounts.tsx b/packages/extension-polkagate/src/hooks/useProfileAccounts.tsx index 7a725b966..d1ba2013a 100644 --- a/packages/extension-polkagate/src/hooks/useProfileAccounts.tsx +++ b/packages/extension-polkagate/src/hooks/useProfileAccounts.tsx @@ -37,7 +37,11 @@ export default function useProfileAccounts (initialAccountList: AccountsOrder[] console.error('Error while reading profile from storage', error); }); - watchStorage('profile', setProfile).catch(console.error); + const unsubscribe = watchStorage('profile', setProfile); + + return () => { + unsubscribe(); + }; }, [profile, t]); useLayoutEffect(() => { diff --git a/packages/extension-polkagate/src/hooks/useSelectedChains.ts b/packages/extension-polkagate/src/hooks/useSelectedChains.ts index 787ebae66..f2d17ac89 100644 --- a/packages/extension-polkagate/src/hooks/useSelectedChains.ts +++ b/packages/extension-polkagate/src/hooks/useSelectedChains.ts @@ -19,7 +19,11 @@ export default function useSelectedChains (): string[] | undefined { setSelected(res as string[] || defaultSelectedGenesisHashes); }).catch(console.error); - watchStorage('selectedChains', setSelected).catch(console.error); + const unsubscribe = watchStorage('selectedChains', setSelected); + + return () => { + unsubscribe(); + }; }, [defaultSelectedGenesisHashes, setSelected]); return selected; diff --git a/packages/extension-polkagate/src/hooks/useSelectedProfile.tsx b/packages/extension-polkagate/src/hooks/useSelectedProfile.tsx index 52fdbcbde..9abcf80a3 100644 --- a/packages/extension-polkagate/src/hooks/useSelectedProfile.tsx +++ b/packages/extension-polkagate/src/hooks/useSelectedProfile.tsx @@ -16,7 +16,11 @@ export default function useSelectedProfile (): string | undefined | null { }) .catch(console.error); - watchStorage('profile', setSelectedProfile).catch(console.error); + const unsubscribe = watchStorage('profile', setSelectedProfile); + + return () => { + unsubscribe(); + }; }, []); return selectedProfile; diff --git a/packages/extension-polkagate/src/partials/Asset.tsx b/packages/extension-polkagate/src/partials/Asset.tsx index 69676464a..df999f976 100644 --- a/packages/extension-polkagate/src/partials/Asset.tsx +++ b/packages/extension-polkagate/src/partials/Asset.tsx @@ -41,7 +41,7 @@ function Asset ({ address, api, balance, balanceLabel, balanceType, balances, fe <div style={{ fontSize: '16px', fontWeight: 300, letterSpacing: '-0.015em' }}> {t('Asset')} </div> - <Grid alignItems='center' container item justifyContent='space-between' sx={{ border: 1, borderColor: 'primary.main', borderRadius: '5px', background: `${theme.palette.background.paper}`, p: '5px 10px' }}> + <Grid alignItems='center' container item justifyContent='space-between' sx={{ border: 1, borderColor: 'primary.light', borderRadius: '5px', background: `${theme.palette.background.paper}`, p: '5px 10px' }}> <Grid container item xs={1.5}> <ChainLogo genesisHash={chain?.genesisHash} size={31} /> </Grid> diff --git a/packages/extension-polkagate/src/partials/FullScreenChainSwitch.tsx b/packages/extension-polkagate/src/partials/FullScreenChainSwitch.tsx index 86b03b892..55c934851 100644 --- a/packages/extension-polkagate/src/partials/FullScreenChainSwitch.tsx +++ b/packages/extension-polkagate/src/partials/FullScreenChainSwitch.tsx @@ -27,7 +27,7 @@ interface NetworkListProps { setSelectedChainName: React.Dispatch<React.SetStateAction<string | undefined>>; } -const NetworkList = ({ address, chains, selectedChainName, setAnchorEl, setSelectedChainName }: NetworkListProps) => { +const NetworkList = React.memo(function NetworkList ({ address, chains, selectedChainName, setAnchorEl, setSelectedChainName }: NetworkListProps) { const theme = useTheme(); const options = useContext(GenesisHashOptionsContext); @@ -93,7 +93,7 @@ const NetworkList = ({ address, chains, selectedChainName, setAnchorEl, setSelec })} </Grid> ); -}; +}); function FullScreenChainSwitch ({ address, chains }: Props): React.ReactElement<Props> { const theme = useTheme(); @@ -125,7 +125,7 @@ function FullScreenChainSwitch ({ address, chains }: Props): React.ReactElement< return ( <Grid container item> - <Grid aria-describedby={id} component='button' container item onClick={handleClick} sx={{ bgcolor: 'transparent', border: '1px solid', borderColor: 'secondary.light', borderRadius: '50%', cursor: 'pointer', height: '40px', p: 0, width: '40px' }}> + <Grid aria-describedby={id} component='button' container item onClick={handleClick} sx={{ bgcolor: 'transparent', border: '2px solid', borderColor: 'divider', borderRadius: '50%', cursor: 'pointer', height: '40px', p: 0, width: '40px' }}> {selectedChainName && <Box sx={{ diff --git a/packages/extension-polkagate/src/partials/ImportAccSubMenu.tsx b/packages/extension-polkagate/src/partials/ImportAccSubMenu.tsx index d4eb89d8a..fedb52110 100644 --- a/packages/extension-polkagate/src/partials/ImportAccSubMenu.tsx +++ b/packages/extension-polkagate/src/partials/ImportAccSubMenu.tsx @@ -89,7 +89,7 @@ function ImportAccSubMenu ({ show, toggleSettingSubMenu }: Props): React.ReactEl <MenuItem fontSize='17px' iconComponent={ - <VaadinIcon icon='vaadin:sitemap' style={{ height: '18px', color: `${theme.palette.text.primary}`, transform: 'rotate(180deg)' }} /> + <VaadinIcon icon='vaadin:cluster' style={{ height: '18px', color: `${theme.palette.text.primary}` }} /> } onClick={onImportProxied} py='4px' diff --git a/packages/extension-polkagate/src/partials/QuickAction.tsx b/packages/extension-polkagate/src/partials/QuickAction.tsx index 8f4d1b6f9..041695a3c 100644 --- a/packages/extension-polkagate/src/partials/QuickAction.tsx +++ b/packages/extension-polkagate/src/partials/QuickAction.tsx @@ -186,7 +186,7 @@ export default function QuickAction ({ address, quickActionOpen, setQuickActionO return ( <Grid container item onClick={isSlideOpen ? handleClose : handleOpen} sx={{ inset: '0 auto 0 -1px', position: 'absolute', width: '10px' }}> - <Grid container item sx={{ bgcolor: theme.palette.mode === 'light' ? 'black' : 'secondary.light', borderRadius: '5px 0 0 5px', cursor: 'pointer', inset: '0 auto 0 0', position: 'absolute', width: '10px', zIndex: 6 }}></Grid> + <Grid container item sx={{ bgcolor: theme.palette.mode === 'light' ? 'black' : '#74747475', borderRadius: '5px 0 0 5px', cursor: 'pointer', inset: '0 auto 0 0', position: 'absolute', width: '10px', zIndex: 6 }}></Grid> <IconButton sx={{ '&:hover': { backgroundColor: 'background.paper' }, bgcolor: 'background.paper', borderRadius: isSlideOpen ? '20px 0 0 20px' : '0 20px 20px 0', height: '17px', inset: isSlideOpen ? 'auto -1px 20px auto' : 'auto auto 20px -1px', p: 0, position: 'absolute', transition: 'border-radius 0.2s ease, inset 0.2s ease', width: '10px', zIndex: 6 }} > diff --git a/packages/extension-polkagate/src/partials/QuickActionFullScreen.tsx b/packages/extension-polkagate/src/partials/QuickActionFullScreen.tsx index d70cbcb0f..564fa682d 100644 --- a/packages/extension-polkagate/src/partials/QuickActionFullScreen.tsx +++ b/packages/extension-polkagate/src/partials/QuickActionFullScreen.tsx @@ -11,6 +11,8 @@ import { ArrowForwardIos as ArrowForwardIosIcon, Boy as BoyIcon } from '@mui/ico import { Box, ClickAwayListener, Divider, Grid, IconButton, Slide, Typography, useTheme } from '@mui/material'; import React, { useCallback, useMemo, useState } from 'react'; +import { noop } from '@polkadot/util'; + import { PoolStakingIcon } from '../components'; import { openOrFocusTab } from '../fullscreen/accountDetails/components/CommonTasks'; import { useAccount, useTranslation } from '../hooks'; @@ -36,7 +38,31 @@ interface QuickActionButtonType { const ARROW_ICON_SIZE = 17; const ACTION_ICON_SIZE = '27px'; -export default function QuickActionFullScreen ({ address, assetId, containerRef, quickActionOpen, setQuickActionOpen }: Props): React.ReactElement<Props> { +const QuickActionButton = React.memo(function QuickActionButton ({ disabled, divider, icon, onClick, title }: QuickActionButtonType) { + const theme = useTheme(); + + return ( + <> + <Grid alignItems='center' container direction='column' display='flex' item justifyContent='center' onClick={!disabled ? onClick : noop} sx={{ '&:hover': { bgcolor: disabled ? 'transparent' : 'divider' }, borderRadius: '5px', cursor: disabled ? 'default' : 'pointer', minWidth: '80px', p: '0 5px', width: 'fit-content' }}> + <Grid alignItems='center' container height='40px' item justifyContent='center' width='fit-content'> + {icon} + </Grid> + <Grid alignItems='center' height='25px' item textAlign='center' width='max-content'> + <Typography fontSize='14px' fontWeight={theme.palette.mode === 'dark' ? 300 : 400} sx={{ opacity: disabled ? 0.7 : 1, pt: '3px' }}> + {title} + </Typography> + </Grid> + </Grid> + {divider && + <Grid alignItems='center' item justifyContent='center'> + <Divider orientation='vertical' sx={{ bgcolor: 'text.primary', height: '30px', width: '2px' }} /> + </Grid> + } + </> + ); +}); + +function QuickActionFullScreen ({ address, assetId, containerRef, quickActionOpen, setQuickActionOpen }: Props): React.ReactElement<Props> { const { t } = useTranslation(); const theme = useTheme(); const account = useAccount(address); @@ -61,41 +87,17 @@ export default function QuickActionFullScreen ({ address, assetId, containerRef, }, [address]); const goToGovernance = useCallback(() => { - supportGov && address && openOrFocusTab(`/governance/${address}/referenda`); + supportGov && address && openOrFocusTab(`/governance/${String(address)}/referenda`); }, [address, supportGov]); const goToHistory = useCallback(() => { setShowHistory(1); }, []); - const nullF = useCallback(() => null, []); - const isSlideOpen = quickActionOpen === address; - const QuickActionButton = ({ disabled, divider, icon, onClick, title }: QuickActionButtonType) => { - return ( - <> - <Grid alignItems='center' container direction='column' display='flex' item justifyContent='center' onClick={!disabled ? onClick : nullF} sx={{ '&:hover': { bgcolor: disabled ? 'transparent' : 'divider' }, borderRadius: '5px', cursor: disabled ? 'default' : 'pointer', minWidth: '80px', p: '0 5px', width: 'fit-content' }}> - <Grid alignItems='center' container height='40px' item justifyContent='center' width='fit-content'> - {icon} - </Grid> - <Grid alignItems='center' height='25px' item textAlign='center' width='max-content'> - <Typography fontSize='14px' fontWeight={theme.palette.mode === 'dark' ? 300 : 400} sx={{ opacity: disabled ? 0.7 : 1, pt: '3px' }}> - {title} - </Typography> - </Grid> - </Grid> - {divider && - <Grid alignItems='center' item justifyContent='center'> - <Divider orientation='vertical' sx={{ bgcolor: 'text.primary', height: '30px', width: '2px' }} /> - </Grid> - } - </> - ); - }; - const movingParts = ( - <Grid alignItems='center' bgcolor='background.paper' container justifyContent='space-around' sx={{ border: '0.5px solid', borderColor: 'secondary.light', borderRadius: '0 6px 6px 0', boxShadow: '0px 0px 10px 5px rgba(0, 0, 0, 0.55)', flexFlow: 'nowrap', p: '5px 10px 5px 20px', width: 'calc(fit-content + 50px)' }}> + <Grid alignItems='center' bgcolor='background.paper' container justifyContent='space-around' sx={{ border: '0.5px solid', borderColor: '#74747475', borderRadius: '0 6px 6px 0', boxShadow: '0px 0px 10px 5px rgba(0, 0, 0, 0.55)', flexFlow: 'nowrap', p: '5px 10px 5px 20px', width: 'calc(fit-content + 50px)' }}> <QuickActionButton disabled={!account?.genesisHash} divider @@ -180,7 +182,7 @@ export default function QuickActionFullScreen ({ address, assetId, containerRef, <Grid item sx={{ bottom: 0, left: 0, position: 'absolute', top: 0, width: 'fit-content' }}> <ClickAwayListener onClickAway={handleClose}> <Grid container item onClick={isSlideOpen ? handleClose : handleOpen} sx={{ inset: '0 auto 0 -1px', position: 'absolute', width: '15px' }}> - <Box sx={{ bgcolor: theme.palette.mode === 'light' ? 'black' : 'secondary.light', borderRadius: '5px 0 0 5px', cursor: 'pointer', inset: '0 auto 0 0', position: 'absolute', width: '15.5px', zIndex: 6 }} /> + <Box sx={{ bgcolor: theme.palette.mode === 'light' ? 'black' : '#353535', borderRadius: '5px 0 0 5px', cursor: 'pointer', inset: '0 auto 0 0', position: 'absolute', width: '15.5px', zIndex: 6 }} /> <IconButton sx={{ '&:hover': { backgroundColor: 'background.paper' }, bgcolor: 'background.paper', borderRadius: isSlideOpen ? '20px 0 0 20px' : '0 20px 20px 0', height: '25.98px', inset: isSlideOpen ? 'auto -1px 72px auto' : 'auto auto 72px -1px', p: 0, position: 'absolute', transition: 'border-radius 0.2s ease, inset 0.2s ease', width: '15px', zIndex: 6 }}> <ArrowForwardIosIcon sx={{ color: theme.palette.mode === 'light' ? 'secondary.light' : 'white', fontSize: ARROW_ICON_SIZE, stroke: theme.palette.mode === 'dark' ? 'black' : 'white', strokeWidth: '0.5px', transform: isSlideOpen ? 'rotate(-180deg)' : 'none', transitionDuration: '0.2s', transitionProperty: 'transform' }} /> </IconButton> @@ -207,3 +209,5 @@ export default function QuickActionFullScreen ({ address, assetId, containerRef, </Grid> ); } + +export default React.memo(QuickActionFullScreen); diff --git a/packages/extension-polkagate/src/partials/RemoteNodeSelectorWithSignals.tsx b/packages/extension-polkagate/src/partials/RemoteNodeSelectorWithSignals.tsx index 96f2faad8..feaa639c7 100644 --- a/packages/extension-polkagate/src/partials/RemoteNodeSelectorWithSignals.tsx +++ b/packages/extension-polkagate/src/partials/RemoteNodeSelectorWithSignals.tsx @@ -250,7 +250,7 @@ const ListIndicator = ({ currentDelay, defaultColor, endpointUrl, iconSize, id, }, [onExtension]); return ( - <Grid aria-describedby={id} component='button' container item onClick={onClick} sx={{ bgcolor: bgcolorOnAccountDetail, border: '1px solid', borderColor: 'secondary.light', borderRadius: '5px', cursor: 'pointer', height: `${iconSize + 7}px`, position: 'relative', width: `${iconSize + 7}px`, zIndex: 10 }}> + <Grid aria-describedby={id} component='button' container item onClick={onClick} sx={{ bgcolor: bgcolorOnAccountDetail, border: '2px solid', borderColor: 'divider', borderRadius: '5px', cursor: 'pointer', height: `${iconSize + 7}px`, position: 'relative', width: `${iconSize + 7}px`, zIndex: 10 }}> {isLightClient ? <LightClientEndpointIcon sx={{ bottom: '2px', color: SIGNAL_COLORS.orange, fontSize: `${iconSize}px`, left: '2px', position: 'absolute' }} /> : <NodeStatusIcon diff --git a/packages/extension-polkagate/src/popup/account/AccountBrief.tsx b/packages/extension-polkagate/src/popup/account/AccountBrief.tsx index 7ebc80365..c29c8e41e 100644 --- a/packages/extension-polkagate/src/popup/account/AccountBrief.tsx +++ b/packages/extension-polkagate/src/popup/account/AccountBrief.tsx @@ -12,7 +12,7 @@ import type { DeriveAccountRegistration } from '@polkadot/api-derive/types'; import { QrCode2 } from '@mui/icons-material'; -import { Box, Divider, Grid, Link, Typography } from '@mui/material'; +import { Box, Divider, Grid, Link, Typography, useTheme } from '@mui/material'; import React, { useCallback } from 'react'; import { useHistory, useLocation } from 'react-router-dom'; @@ -29,6 +29,8 @@ interface Props { function AccountBrief ({ address, identity, showDivider = true, showName = true }: Props): React.ReactElement<Props> { const { t } = useTranslation(); + const theme = useTheme(); + const { account, chainName, formatted } = useInfo(address); const history = useHistory(); const { pathname } = useLocation(); @@ -81,13 +83,13 @@ function AccountBrief ({ address, identity, showDivider = true, showName = true target='_blank' underline='none' > - <Box alt={'subscan'} component='img' height='20px' mt='9px' src={subscan as string} width='20px' /> + <Box alt={'subscan'} component='img' height='20px' mt='9px' src={subscan as string} sx={{ filter: theme.palette.mode === 'dark' ? 'grayscale(50)' : 'none' }} width='20px' /> </Link> </Infotip> </Grid> </Grid> {showDivider && - <Divider sx={{ bgcolor: 'secondary.main', height: '2px', mt: '0px' }} /> + <Divider sx={{ bgcolor: 'secondary.light', height: '2px', mt: '0px' }} /> } </> ); diff --git a/packages/extension-polkagate/src/popup/account/index.tsx b/packages/extension-polkagate/src/popup/account/index.tsx index c4527ae84..a3188ae86 100644 --- a/packages/extension-polkagate/src/popup/account/index.tsx +++ b/packages/extension-polkagate/src/popup/account/index.tsx @@ -198,7 +198,7 @@ export default function AccountDetails (): React.ReactElement { /> </Grid> </Grid> - <Divider sx={{ bgcolor: 'secondary.main', height: '2px', mt: '9px' }} /> + <Divider sx={{ bgcolor: 'secondary.light', height: '2px', mt: '9px' }} /> {!showStakingOptions ? <Grid item pt='10px' sx={{ height: window.innerHeight - 208, overflowY: 'scroll' }} xs> {assetId !== undefined @@ -246,7 +246,7 @@ export default function AccountDetails (): React.ReactElement { </Grid> : <StakingOption balance={balances} setShowStakingOptions={setShowStakingOptions} showStakingOptions={showStakingOptions} /> } - <Grid container justifyContent='space-around' sx={{ bgcolor: 'background.default', borderTop: '2px solid', borderTopColor: 'secondary.main', bottom: 0, height: '62px', left: '4%', position: 'absolute', pt: '7px', pb: '5px', width: '92%' }}> + <Grid container justifyContent='space-around' sx={{ bgcolor: 'background.default', borderTop: '2px solid', borderTopColor: 'secondary.light', bottom: 0, height: '62px', left: '4%', position: 'absolute', pt: '7px', pb: '5px', width: '92%' }}> <HorizontalMenuItem divider icon={ diff --git a/packages/extension-polkagate/src/popup/history/partials/FailSuccessIcon.tsx b/packages/extension-polkagate/src/popup/history/partials/FailSuccessIcon.tsx index e37b4d7aa..79650ca5a 100644 --- a/packages/extension-polkagate/src/popup/history/partials/FailSuccessIcon.tsx +++ b/packages/extension-polkagate/src/popup/history/partials/FailSuccessIcon.tsx @@ -1,8 +1,10 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -import { Check as CheckIcon, Close as CloseIcon } from '@mui/icons-material'; -import { Container, Typography } from '@mui/material'; +// import { Check as CheckIcon, Close as CloseIcon } from '@mui/icons-material'; +import { Close as CloseIcon } from '@mui/icons-material'; +import { Container, Typography, useTheme } from '@mui/material'; +import { AnimatePresence, motion } from 'framer-motion'; import React from 'react'; import { useTranslation } from '../../../hooks'; @@ -14,7 +16,57 @@ interface Props { style?: React.CSSProperties; } -//@ts-ignore +export function AnimatedCheckIcon ({ fontSize, initial = true, isVisible = true }: { initial?: boolean; isVisible?: boolean, fontSize: string }) { + const theme = useTheme(); + + const iconStyles = { + bgcolor: theme.palette.success.main, + borderRadius: '50%', + color: 'white', + fontSize, + stroke: 'white' + }; + + return ( + <AnimatePresence initial={initial}> + {isVisible && ( + <svg + fill='none' + stroke={iconStyles.stroke} + strokeWidth={1.5} + style={{ + alignItems: 'center', + backgroundColor: iconStyles.bgcolor, + borderRadius: iconStyles.borderRadius, + display: 'flex', + height: iconStyles.fontSize, + justifyContent: 'center', + width: iconStyles.fontSize + }} + viewBox='0 0 24 24' + xmlns='http://www.w3.org/2000/svg' + > + <motion.path + animate={{ pathLength: 1 }} + d='M4.5 12.75l6 6 9-13.5' + exit={{ pathLength: 0 }} + initial={{ pathLength: 0 }} + strokeLinecap='round' + strokeLinejoin='round' + transition={{ + damping: 15, + duration: 1.2, + stiffness: 70, + type: 'spring' + }} + /> + </svg> + )} + </AnimatePresence> + ); +} + +// @ts-ignore export default function FailSuccessIcon ({ showLabel = true, style = { fontSize: '54px', mt: '20px' }, success }: Props) { const { t } = useTranslation(); @@ -25,14 +77,8 @@ export default function FailSuccessIcon ({ showLabel = true, style = { fontSize: > { success - ? <CheckIcon - sx={{ - bgcolor: 'success.main', - borderRadius: '50%', - color: 'white', - fontSize: style.fontSize, - stroke: 'white' - }} + ? <AnimatedCheckIcon + fontSize={style.fontSize as string} /> : <CloseIcon sx={{ @@ -47,7 +93,8 @@ export default function FailSuccessIcon ({ showLabel = true, style = { fontSize: {showLabel && <Typography fontSize='16px' - fontWeight={500}> + fontWeight={500} + > {success ? t('Completed') : t('Failed')} </Typography> } diff --git a/packages/extension-polkagate/src/popup/home/AccountLabel.tsx b/packages/extension-polkagate/src/popup/home/AccountLabel.tsx index 9dc2ae618..dee557f6e 100644 --- a/packages/extension-polkagate/src/popup/home/AccountLabel.tsx +++ b/packages/extension-polkagate/src/popup/home/AccountLabel.tsx @@ -1,8 +1,6 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -/* eslint-disable react/jsx-max-props-per-line */ - import type { AccountJson } from '@polkadot/extension-base/background/types'; import { Grid, useTheme } from '@mui/material'; @@ -16,9 +14,10 @@ interface Props { account: AccountJson | undefined; parentName: string | undefined; ml?: string; + right?: string; } -export function AccountLabel ({ account, ml, parentName }: Props): React.ReactElement<Props> { +export function AccountLabel ({ account, ml, parentName, right }: Props): React.ReactElement<Props> { const theme = useTheme(); const { t } = useTranslation(); const isExtensionMode = useIsExtensionPopup(); @@ -28,7 +27,6 @@ export function AccountLabel ({ account, ml, parentName }: Props): React.ReactEl const { accountProfiles, defaultProfiles, userDefinedProfiles } = useProfiles(account); const isDarkMode = useMemo(() => theme.palette.mode === 'dark', [theme.palette.mode]); - const shadow = useMemo(() => isDarkMode ? '0px 0px 2px 1px rgba(255, 255, 255, 0.15)' : '0px 0px 1px 1px rgba(000, 000, 000, 0.13)', [isDarkMode]); const containerMaxWidth = useMemo(() => isExtensionMode ? '300px' : '700px', [isExtensionMode]); const getColorOfUserDefinedProfile = useCallback((profile: string) => { @@ -42,6 +40,8 @@ export function AccountLabel ({ account, ml, parentName }: Props): React.ReactEl return getProfileColor(index, theme); }, [defaultProfiles, theme, userDefinedProfiles]); + const shadow = useCallback((profile: string) => isDarkMode ? `0px 0px 2px 1px ${getColorOfUserDefinedProfile(profile)}` : '0px 0px 1px 1px rgba(000, 000, 000, 0.13)', [getColorOfUserDefinedProfile, isDarkMode]); + const maybeAccountDefaultProfile = useMemo(() => { if (account?.isHardware) { if (account?.isGeneric) { @@ -114,15 +114,21 @@ export function AccountLabel ({ account, ml, parentName }: Props): React.ReactEl }, [profiles.length]); return ( - <Grid container item ref={scrollContainerRef} sx={{ display: 'flex', flexWrap: 'nowrap', fontSize: '10px', height: '16px', left: ml || '15px', position: 'absolute', px: 1, top: 0, overflowX: 'scroll', whiteSpace: 'nowrap', width: containerMaxWidth, zIndex: 1 }}> + <Grid + container + item + justifyContent='flex-end' + ref={scrollContainerRef} + sx={{ display: 'flex', flexWrap: 'nowrap', fontSize: '10px', height: '18px', left: right ? undefined : ml || '15px', overflowX: 'scroll', position: 'absolute', px: 1, right, top: 0, whiteSpace: 'nowrap', width: containerMaxWidth, zIndex: 1 }} + > {profiles?.map((profile, index) => <Grid key={index} sx={{ - bgcolor: getColorOfUserDefinedProfile(profile), borderRadius: '0 0 5px 5px', - boxShadow: shadow, + boxShadow: shadow(profile), fontSize: '11px', + height: '16px', ml: '5px', px: 1, textWrap: 'nowrap', diff --git a/packages/extension-polkagate/src/popup/home/ProfileTab.tsx b/packages/extension-polkagate/src/popup/home/ProfileTab.tsx index b262387d8..e528ba323 100644 --- a/packages/extension-polkagate/src/popup/home/ProfileTab.tsx +++ b/packages/extension-polkagate/src/popup/home/ProfileTab.tsx @@ -25,7 +25,7 @@ interface Props { const COLLAPSED_SIZE = '20px'; const HIDDEN_PERCENT = '50%'; -export default function ProfileTab ({ index, isContainerHovered, isSelected, orderedAccounts, text }: Props): React.ReactElement { +function ProfileTab ({ index, isContainerHovered, isSelected, orderedAccounts, text }: Props): React.ReactElement { const { t } = useTranslation(); const theme = useTheme(); @@ -85,7 +85,7 @@ export default function ProfileTab ({ index, isContainerHovered, isSelected, ord orientation='horizontal' sx={{ '&:hover': { boxShadow: shadowOnHover }, - border:1, + border: 2, borderColor: getProfileColor(index, theme) || 'background.paper', borderRadius: '10px', boxShadow: shadow, @@ -96,7 +96,7 @@ export default function ProfileTab ({ index, isContainerHovered, isSelected, ord }} > <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={isSelected ? 500 : 400} sx={{ 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' 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'> {t(text)} </Typography> {areAllHidden && isSelected && @@ -106,3 +106,5 @@ export default function ProfileTab ({ index, isContainerHovered, isSelected, ord </Grid> ); } + +export default React.memo(ProfileTab); diff --git a/packages/extension-polkagate/src/popup/home/ProfileTabs.tsx b/packages/extension-polkagate/src/popup/home/ProfileTabs.tsx index 80ab6d392..794b86e64 100644 --- a/packages/extension-polkagate/src/popup/home/ProfileTabs.tsx +++ b/packages/extension-polkagate/src/popup/home/ProfileTabs.tsx @@ -35,7 +35,11 @@ function ProfileTabs ({ orderedAccounts }: Props): React.ReactElement { }) .catch(console.error); - watchStorage('profile', setSelectedProfile).catch(console.error); + const unsubscribe = watchStorage('profile', setSelectedProfile); + + return () => { + unsubscribe(); + }; }, [t]); const scrollContainerRef = useRef<HTMLDivElement>(null); diff --git a/packages/extension-polkagate/src/popup/home/YouHave.tsx b/packages/extension-polkagate/src/popup/home/YouHave.tsx index d5fa85a98..476ff8758 100644 --- a/packages/extension-polkagate/src/popup/home/YouHave.tsx +++ b/packages/extension-polkagate/src/popup/home/YouHave.tsx @@ -6,39 +6,23 @@ import type { YouHaveType } from '../../hooks/useYouHave'; import { Box, Grid, Typography, useTheme } from '@mui/material'; -import React, { useCallback, useEffect } from 'react'; +import React from 'react'; import { stars6Black, stars6White } from '../../assets/icons'; -import { FormatPrice, HideIcon, ShowIcon } from '../../components'; -import { useYouHave } from '../../hooks'; +import { FormatPrice } from '../../components'; +import HideBalance from '../../components/SVG/HideBalance'; +import { useIsHideNumbers, useYouHave } from '../../hooks'; import { PRICE_VALIDITY_PERIOD } from '../../hooks/usePrices'; import useTranslation from '../../hooks/useTranslation'; -interface Props { - hideNumbers: boolean | undefined; - setHideNumbers: React.Dispatch<React.SetStateAction<boolean | undefined>> -} - export const isPriceOutdated = (youHave: YouHaveType | null | undefined): boolean | undefined => youHave ? (Date.now() - youHave.date > 2 * PRICE_VALIDITY_PERIOD) : undefined; -export default function YouHave ({ hideNumbers, setHideNumbers }: Props): React.ReactElement { +export default function YouHave (): React.ReactElement { const { t } = useTranslation(); const theme = useTheme(); const youHave = useYouHave(); - - const shadow = theme.palette.mode === 'dark' ? '0px 0px 3px rgba(50, 50, 50, 1)' : '0px 0px 5px 0px rgba(0, 0, 0, 0.1)'; - - const onHideClick = useCallback(() => { - setHideNumbers(!hideNumbers); - window.localStorage.setItem('hide_numbers', hideNumbers ? 'false' : 'true'); - }, [hideNumbers, setHideNumbers]); - - useEffect(() => { - const isHide = window.localStorage.getItem('hide_numbers'); - - isHide === 'false' || isHide === null ? setHideNumbers(false) : setHideNumbers(true); - }, [setHideNumbers]); + const { isHideNumbers, toggleHideNumbers } = useIsHideNumbers(); return ( <Grid container sx={{ pb: '10px', position: 'relative', pt: '5px', textAlign: 'center', zIndex: 1 }}> @@ -48,33 +32,30 @@ export default function YouHave ({ hideNumbers, setHideNumbers }: Props): React. </Typography> </Grid> <Grid container item justifyContent='center' xs={12}> - {hideNumbers || hideNumbers === undefined + {isHideNumbers ? <Box component='img' src={(theme.palette.mode === 'dark' ? stars6White : stars6Black) as string} sx={{ height: '36px', width: '154px' }} /> - : <Grid item pr='15px'> - <FormatPrice - fontSize='32px' - fontWeight={500} - height={36} - num={youHave?.portfolio } - skeletonHeight={36} - textColor= { isPriceOutdated(youHave) ? 'primary.light' : 'text.primary'} - width='223px' - withCountUp - /> - </Grid> + : <FormatPrice + fontSize='32px' + fontWeight={500} + height={36} + num={youHave?.portfolio } + skeletonHeight={36} + textColor= { isPriceOutdated(youHave) ? 'primary.light' : 'text.primary'} + width='223px' + withCountUp + /> } - <Grid alignItems='center' direction='column' item onClick={onHideClick} sx={{ backgroundColor: 'background.paper', borderRadius: '5px', boxShadow: shadow, cursor: 'pointer', display: 'flex', position: 'absolute', pt: '3px', right: '20px' }}> - {hideNumbers - ? <ShowIcon /> - : <HideIcon /> - } - <Typography sx={{ color: 'secondary.light', fontSize: '12px', fontWeight: 500, userSelect: 'none' }}> - {hideNumbers ? t('Show') : t('Hide')} - </Typography> + <Grid alignItems='center' item sx={{ position: 'absolute', right: '14px', top: '25px' }}> + <HideBalance + hide={isHideNumbers} + lightColor={theme.palette.secondary.light} + onClick={toggleHideNumbers} + size={22} + /> </Grid> </Grid> </Grid> diff --git a/packages/extension-polkagate/src/popup/home/index.tsx b/packages/extension-polkagate/src/popup/home/index.tsx index 2db3ce9a6..7daa346db 100644 --- a/packages/extension-polkagate/src/popup/home/index.tsx +++ b/packages/extension-polkagate/src/popup/home/index.tsx @@ -16,7 +16,7 @@ import { cryptoWaitReady } from '@polkadot/util-crypto'; import { AccountContext, Warning } from '../../components'; import { getStorage, type LoginInfo } from '../../components/Loading'; -import { useAccountsOrder, useManifest, useMerkleScience, useProfileAccounts, useTranslation } from '../../hooks'; +import { useAccountsOrder, useIsHideNumbers, useManifest, useMerkleScience, useProfileAccounts, useTranslation } from '../../hooks'; import { AddNewAccountButton } from '../../partials'; import HeaderBrand from '../../partials/HeaderBrand'; import { EXTENSION_NAME } from '../../util/constants'; @@ -38,7 +38,8 @@ export default function Home (): React.ReactElement { useMerkleScience(undefined, undefined, true); // to download the data file - const [hideNumbers, setHideNumbers] = useState<boolean>(); + const { isHideNumbers } = useIsHideNumbers(); + const [show, setShowAlert] = useState<boolean>(false); const [quickActionOpen, setQuickActionOpen] = useState<string | boolean>(); const [hasActiveRecovery, setHasActiveRecovery] = useState<string | null | undefined>(); // if exists, include the account address @@ -97,7 +98,7 @@ export default function Home (): React.ReactElement { > <Grid padding='0px' textAlign='center' xs={12}> <HeaderBrand - noBorder={theme.palette.mode === 'light'} + noBorder showBrand showFullScreen showMenu @@ -118,14 +119,14 @@ export default function Home (): React.ReactElement { </Warning> </Grid> } - <YouHave hideNumbers={hideNumbers} setHideNumbers={setHideNumbers} /> + <YouHave /> <ProfileTabs orderedAccounts={accountsOrder} /> <Container disableGutters sx={[{ m: 'auto', maxHeight: `${self.innerHeight - (hasActiveRecovery ? 220 : 165)}px`, overflowY: 'scroll', pb: '10px', px: '4%' }]}> {initialAccountList.map((json, index): React.ReactNode => ( <AccountsTree {...json} address={json.address} - hideNumbers={hideNumbers} + hideNumbers={isHideNumbers} key={index} quickActionOpen={quickActionOpen} setHasActiveRecovery={setHasActiveRecovery} diff --git a/packages/extension-polkagate/src/popup/import/addWatchOnlyFullScreen/index.tsx b/packages/extension-polkagate/src/popup/import/addWatchOnlyFullScreen/index.tsx index 1370429c8..1f7b1134e 100644 --- a/packages/extension-polkagate/src/popup/import/addWatchOnlyFullScreen/index.tsx +++ b/packages/extension-polkagate/src/popup/import/addWatchOnlyFullScreen/index.tsx @@ -13,6 +13,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from 're import { AccountsStore } from '@polkadot/extension-base/stores'; import { setStorage } from '@polkadot/extension-polkagate/src/components/Loading'; import { openOrFocusTab } from '@polkadot/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks'; +import { Title } from '@polkadot/extension-polkagate/src/fullscreen/sendFund/InputPage'; import { PROFILE_TAGS } from '@polkadot/extension-polkagate/src/hooks/useProfileAccounts'; import { FULLSCREEN_WIDTH } from '@polkadot/extension-polkagate/src/util/constants'; import keyring from '@polkadot/ui-keyring'; @@ -102,16 +103,13 @@ export default function AddWatchOnlyFullScreen (): React.ReactElement { /> <Grid container item justifyContent='center' sx={{ bgcolor: 'backgroundFL.secondary', height: 'calc(100vh - 70px)', maxWidth: FULLSCREEN_WIDTH, overflow: 'scroll' }}> <Grid container item sx={{ display: 'block', px: '10%' }}> - <Grid alignContent='center' alignItems='center' container item> - <Grid item sx={{ mr: '20px' }}> - <VaadinIcon icon='vaadin:tag' style={{ color: `${theme.palette.text.primary}`, height: '40px', width: '40px' }} /> - </Grid> - <Grid item> - <Typography fontSize='30px' fontWeight={700} py='20px' width='100%'> - {t('Add Watch-Only Account')} - </Typography> - </Grid> - </Grid> + <Title + height='85px' + logo={ + <VaadinIcon icon='vaadin:tag' style={{ color: `${theme.palette.text.primary}`, height: '25px', width: '25px' }} /> + } + text= {t('Add Watch-Only Account')} + /> <Typography fontSize='16px' fontWeight={400} width='100%'> {t('Enter the watch-only address. It can also serve as a proxied account, but without transaction signing. A proxy account in the extension is needed for signing.')} </Typography> diff --git a/packages/extension-polkagate/src/popup/import/attachQrFullScreen/index.tsx b/packages/extension-polkagate/src/popup/import/attachQrFullScreen/index.tsx index 0ed640639..bd7e2628e 100644 --- a/packages/extension-polkagate/src/popup/import/attachQrFullScreen/index.tsx +++ b/packages/extension-polkagate/src/popup/import/attachQrFullScreen/index.tsx @@ -17,6 +17,7 @@ import { QrScanAddress } from '@polkadot/react-qr'; import { AccountNamePasswordCreation, Address, PButton, TwoButtons, VaadinIcon, Warning } from '../../../components'; import FullScreenHeader from '../../../fullscreen/governance/FullScreenHeader'; +import { Title } from '../../../fullscreen/sendFund/InputPage'; import { useFullscreen, useTranslation } from '../../../hooks'; import { createAccountExternal, createAccountSuri, createSeed, updateMeta } from '../../../messaging'; import { Name } from '../../../partials'; @@ -121,16 +122,13 @@ export default function AttachQrFullScreen (): React.ReactElement { /> <Grid container item justifyContent='center' sx={{ bgcolor: 'backgroundFL.secondary', height: 'calc(100vh - 70px)', maxWidth: FULLSCREEN_WIDTH, overflow: 'scroll' }}> <Grid container item sx={{ display: 'block', px: '10%' }}> - <Grid alignContent='center' alignItems='center' container item> - <Grid item sx={{ mr: '20px' }}> - <VaadinIcon icon='vaadin:qrcode' style={{ color: `${theme.palette.text.primary}`, height: '40px', width: '40px' }} /> - </Grid> - <Grid item> - <Typography fontSize='30px' fontWeight={700} py='20px' width='100%'> - {t('Attach QR-signer')} - </Typography> - </Grid> - </Grid> + <Title + height='85px' + logo={ + <VaadinIcon icon='vaadin:qrcode' style={{ color: `${theme.palette.text.primary}`, height: '25px', width: '25px' }} /> + } + text= {t('Attach QR-signer')} + /> {!account && <Grid alignItems='center' container justifyContent='center'> <Typography fontSize='16px' m='auto' pt='40px' textAlign='center' width='92%'> diff --git a/packages/extension-polkagate/src/popup/import/importLedger/GenericApp.tsx b/packages/extension-polkagate/src/popup/import/importLedger/GenericApp.tsx index 9ad583aaf..992ba5805 100644 --- a/packages/extension-polkagate/src/popup/import/importLedger/GenericApp.tsx +++ b/packages/extension-polkagate/src/popup/import/importLedger/GenericApp.tsx @@ -10,6 +10,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } import { setStorage } from '@polkadot/extension-polkagate/src/components/Loading'; import { openOrFocusTab } from '@polkadot/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks'; +import { Title } from '@polkadot/extension-polkagate/src/fullscreen/sendFund/InputPage'; import { PROFILE_TAGS } from '@polkadot/extension-polkagate/src/hooks/useProfileAccounts'; import { FULLSCREEN_WIDTH, POLKADOT_SLIP44 } from '@polkadot/extension-polkagate/src/util/constants'; import settings from '@polkadot/ui-settings'; @@ -201,16 +202,13 @@ export default function GenericApp ({ setMode }: Props): React.ReactElement { return ( <Grid container item justifyContent='center' sx={{ bgcolor: 'backgroundFL.secondary', height: 'calc(100vh - 70px)', maxWidth: FULLSCREEN_WIDTH, overflow: 'scroll' }}> <Grid container item sx={{ display: 'block', px: '10%' }}> - <Grid alignContent='center' alignItems='center' container item> - <Grid item sx={{ mr: '20px' }}> - <VaadinIcon icon='vaadin:file-tree' style={{ height: '40px', color: `${theme.palette.text.primary}`, width: '40px' }} /> - </Grid> - <Grid item> - <Typography fontSize='30px' fontWeight={700} py='20px' width='100%'> - {t('Ledger Polkadot Generic')} - </Typography> - </Grid> - </Grid> + <Title + height='85px' + logo={ + <VaadinIcon icon='vaadin:file-tree' style={{ color: `${theme.palette.text.primary}`, height: '25px', width: '25px' }} /> + } + text= {t('Ledger Polkadot Generic')} + /> <Typography fontSize='16px' fontWeight={400} pt='15px' textAlign='left' width='100%'> <b>1</b>. {t('Connect your ledger device to the computer.')}<br /> <b>2</b>. {t('Open Polkadot App on the ledger device.')}<br /> diff --git a/packages/extension-polkagate/src/popup/import/importLedger/LedgerOptions.tsx b/packages/extension-polkagate/src/popup/import/importLedger/LedgerOptions.tsx index 626d72ff5..53340ed91 100644 --- a/packages/extension-polkagate/src/popup/import/importLedger/LedgerOptions.tsx +++ b/packages/extension-polkagate/src/popup/import/importLedger/LedgerOptions.tsx @@ -10,6 +10,7 @@ import { FULLSCREEN_WIDTH } from '@polkadot/extension-polkagate/src/util/constan import { PButton, VaadinIcon } from '../../../components'; import { openOrFocusTab } from '../../../fullscreen/accountDetails/components/CommonTasks'; +import { Title } from '../../../fullscreen/sendFund/InputPage'; import { useTranslation } from '../../../hooks'; import LedgerOption from './LedgerOption'; import { METADATA_DASHBOARD } from './partials'; @@ -34,16 +35,13 @@ export default function LedgerOptions ({ setMode }: Props): React.ReactElement { return ( <Grid container item justifyContent='center' sx={{ bgcolor: 'backgroundFL.secondary', height: 'calc(100vh - 70px)', maxWidth: FULLSCREEN_WIDTH, overflow: 'scroll' }}> <Grid container item sx={{ display: 'block', px: '10%' }}> - <Grid alignContent='center' alignItems='center' container item> - <Grid item sx={{ mr: '20px' }}> - <VaadinIcon icon='vaadin:wallet' style={{ color: `${theme.palette.text.primary}`, height: '40px', width: '40px' }} /> - </Grid> - <Grid item> - <Typography fontSize='30px' fontWeight={700} py='20px' width='100%'> - {t('Attach ledger device')} - </Typography> - </Grid> - </Grid> + <Title + height='85px' + logo={ + <VaadinIcon icon='vaadin:wallet' style={{ color: `${theme.palette.text.primary}`, height: '25px', width: '25px' }} /> + } + text= {t('Attach ledger device')} + /> <Typography fontSize='14px' py='20px' width='100%'> {t('Choose the type of Ledger connection. The Polkadot Generic app is new and recommended. However, if you already have assets on a Ledger device for chains other than Polkadot and its asset hub, you can use the Ledger Legacy apps. In this case, you will need to migrate your assets to the Polkadot Generic app using the Migration app, provided that your desired chain has upgraded its runtime and is compatible with the Polkadot Generic app. To find out if your chain is upgraded, check: ')} { @@ -59,19 +57,19 @@ export default function LedgerOptions ({ setMode }: Props): React.ReactElement { </Typography> <Grid container item justifyContent='space-between' mb='25px' mt='10px' rowGap='15px'> <LedgerOption - logo={<VaadinIcon icon='vaadin:file-tree' style={{ color: `${theme.palette.text.primary}`, height: '40px', width: '40px' }} />} + logo={<VaadinIcon icon='vaadin:file-tree' style={{ color: `${theme.palette.text.primary}`, height: '30px', width: '30px' }} />} onClick={onPolkadotGeneric} subTitle={t('It can be used with all supported Polkadot chains and parachains.')} title={t('Polkadot Generic app')} /> <LedgerOption - logo={<VaadinIcon icon='vaadin:automation' style={{ color: `${theme.palette.text.primary}`, height: '40px', width: '40px' }} />} + logo={<VaadinIcon icon='vaadin:automation' style={{ color: `${theme.palette.text.primary}`, height: '30px', width: '30px' }} />} onClick={onMigration} subTitle={t('Migrate your accounts from the Legacy apps to the Polkadot Generic app.')} title={t('Migration app')} /> <LedgerOption - logo={<VaadinIcon icon='vaadin:form' style={{ color: `${theme.palette.text.primary}`, height: '40px', width: '40px' }} />} + logo={<VaadinIcon icon='vaadin:form' style={{ color: `${theme.palette.text.primary}`, height: '30px', width: '30px' }} />} onClick={onPolkadotLegacy} subTitle={t('Each chain and parachain may have a dedicated app on the Ledger device, but this is now deprecated as chains upgrade to align with the Polkadot generic app.')} title={t('Legacy apps')} diff --git a/packages/extension-polkagate/src/popup/import/importLedger/LegacyApps.tsx b/packages/extension-polkagate/src/popup/import/importLedger/LegacyApps.tsx index 475e97eb1..c5d5b384c 100644 --- a/packages/extension-polkagate/src/popup/import/importLedger/LegacyApps.tsx +++ b/packages/extension-polkagate/src/popup/import/importLedger/LegacyApps.tsx @@ -13,6 +13,7 @@ import React, { useCallback, useEffect, useState } from 'react'; import { setStorage } from '@polkadot/extension-polkagate/src/components/Loading'; import { openOrFocusTab } from '@polkadot/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks'; +import { Title } from '@polkadot/extension-polkagate/src/fullscreen/sendFund/InputPage'; import { PROFILE_TAGS } from '@polkadot/extension-polkagate/src/hooks/useProfileAccounts'; import { FULLSCREEN_WIDTH } from '@polkadot/extension-polkagate/src/util/constants'; import settings from '@polkadot/ui-settings'; @@ -93,16 +94,13 @@ export default function LegacyApps ({ setMode }: Props): React.ReactElement { return ( <Grid container item justifyContent='center' sx={{ bgcolor: 'backgroundFL.secondary', height: 'calc(100vh - 70px)', maxWidth: FULLSCREEN_WIDTH, overflow: 'scroll' }}> <Grid container item sx={{ display: 'block', px: '10%' }}> - <Grid alignContent='center' alignItems='center' container item> - <Grid item sx={{ mr: '20px' }}> - <VaadinIcon icon='vaadin:wallet' style={{ color: `${theme.palette.text.primary}`, height: '40px', width: '40px' }} /> - </Grid> - <Grid item> - <Typography fontSize='30px' fontWeight={700} py='20px' width='100%'> - {t('Ledger Legacy')} - </Typography> - </Grid> - </Grid> + <Title + height='85px' + logo={ + <VaadinIcon icon='vaadin:form' style={{ color: `${theme.palette.text.primary}`, height: '25px', width: '25px' }} /> + } + text= {t('Ledger Legacy')} + /> <Typography fontSize='16px' fontWeight={400} pt='15px' textAlign='left' width='100%'> <b>1</b>. {t('Connect your ledger device to the computer.')}<br /> <b>2</b>. {t('Open your desired App on the ledger device.')}<br /> diff --git a/packages/extension-polkagate/src/popup/import/importLedger/MigrationApp.tsx b/packages/extension-polkagate/src/popup/import/importLedger/MigrationApp.tsx index d2ecc5c70..d76f84d5b 100644 --- a/packages/extension-polkagate/src/popup/import/importLedger/MigrationApp.tsx +++ b/packages/extension-polkagate/src/popup/import/importLedger/MigrationApp.tsx @@ -11,6 +11,7 @@ import { Grid, Typography, useTheme } from '@mui/material'; import { POLKADOT_GENESIS } from '@polkagate/apps-config'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { Title } from '@polkadot/extension-polkagate/src/fullscreen/sendFund/InputPage'; import { DISABLED_NETWORKS, FULLSCREEN_WIDTH, STATEMINT_GENESIS_HASH } from '@polkadot/extension-polkagate/src/util/constants'; import { SelectChain, TwoButtons, VaadinIcon, Warning } from '../../../components'; @@ -99,16 +100,13 @@ export default function MigrationApp({ setMode }: Props): React.ReactElement { return ( <Grid container item justifyContent='center' sx={{ bgcolor: 'backgroundFL.secondary', height: 'calc(100vh - 70px)', maxWidth: FULLSCREEN_WIDTH, overflow: 'scroll' }}> <Grid container item sx={{ display: 'block', px: '10%' }}> - <Grid alignContent='center' alignItems='center' container item> - <Grid item sx={{ mr: '20px' }}> - <VaadinIcon icon='vaadin:file-tree' style={{ height: '40px', color: `${theme.palette.text.primary}`, width: '40px' }} /> - </Grid> - <Grid item> - <Typography fontSize='30px' fontWeight={700} py='20px' width='100%'> - {t('Ledger Account Migration')} - </Typography> - </Grid> - </Grid> + <Title + height='85px' + logo={ + <VaadinIcon icon='vaadin:automation' style={{ color: `${theme.palette.text.primary}`, height: '25px', width: '25px' }} /> + } + text= {t('Ledger Account Migration')} + /> <Typography fontSize='16px' fontWeight={400} pt='15px' textAlign='left' width='100%'> <b>1</b>. {t('Connect your ledger device to the computer.')}<br /> <b>2</b>. {t('Open Polkadot Migration App on the ledger device.')}<br /> diff --git a/packages/extension-polkagate/src/popup/import/importProxiedFullScreen/index.tsx b/packages/extension-polkagate/src/popup/import/importProxiedFullScreen/index.tsx index ccf4fc66d..e9135fc36 100644 --- a/packages/extension-polkagate/src/popup/import/importProxiedFullScreen/index.tsx +++ b/packages/extension-polkagate/src/popup/import/importProxiedFullScreen/index.tsx @@ -129,7 +129,7 @@ function ImportProxiedFS (): React.ReactElement { <Title height='85px' logo={ - <VaadinIcon icon='vaadin:sitemap' style={{ color: `${theme.palette.text.primary}`, height: '40px', transform: 'rotate(180deg)', width: '40px' }} /> + <VaadinIcon icon='vaadin:cluster' style={{ color: `${theme.palette.text.primary}`, height: '25px', width: '25px' }} /> } text={t('Import proxied accounts')} /> diff --git a/packages/extension-polkagate/src/popup/import/importRawSeedFullScreen/index.tsx b/packages/extension-polkagate/src/popup/import/importRawSeedFullScreen/index.tsx index 28bcc715c..4125a1969 100644 --- a/packages/extension-polkagate/src/popup/import/importRawSeedFullScreen/index.tsx +++ b/packages/extension-polkagate/src/popup/import/importRawSeedFullScreen/index.tsx @@ -12,6 +12,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from 're import { AccountsStore } from '@polkadot/extension-base/stores'; import { setStorage } from '@polkadot/extension-polkagate/src/components/Loading'; import { openOrFocusTab } from '@polkadot/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks'; +import { Title } from '@polkadot/extension-polkagate/src/fullscreen/sendFund/InputPage'; import { PROFILE_TAGS } from '@polkadot/extension-polkagate/src/hooks/useProfileAccounts'; import { FULLSCREEN_WIDTH } from '@polkadot/extension-polkagate/src/util/constants'; import { keyring } from '@polkadot/ui-keyring'; @@ -150,16 +151,13 @@ export default function ImportRawSeed (): React.ReactElement { /> <Grid container item justifyContent='center' sx={{ bgcolor: 'backgroundFL.secondary', height: 'calc(100vh - 70px)', maxWidth: FULLSCREEN_WIDTH, overflow: 'scroll' }}> <Grid container item sx={{ display: 'block', position: 'relative', px: '10%' }}> - <Grid alignContent='center' alignItems='center' container item> - <Grid item sx={{ mr: '20px' }}> - <VaadinIcon icon='vaadin:book-dollar' style={{ height: '40px', color: `${theme.palette.text.primary}`, width: '40px' }} /> - </Grid> - <Grid item> - <Typography fontSize='30px' fontWeight={700} py='20px' width='100%'> - {t('Import from raw seed')} - </Typography> - </Grid> - </Grid> + <Title + height='100px' + logo={ + <VaadinIcon icon='vaadin:book-dollar' style={{ color: `${theme.palette.text.primary}`, height: '25px', width: '25px' }} /> + } + text= {t('Import from raw seed')} + /> <Typography fontSize='16px' fontWeight={400} width='100%'> {t('Enter your account\'s raw seed to seamlessly import it into the extension wallet, giving you quick and secure access to your assets and transactions.')} </Typography> diff --git a/packages/extension-polkagate/src/popup/import/importSeedFullScreen/index.tsx b/packages/extension-polkagate/src/popup/import/importSeedFullScreen/index.tsx index 1c61d33e8..6e98146a7 100644 --- a/packages/extension-polkagate/src/popup/import/importSeedFullScreen/index.tsx +++ b/packages/extension-polkagate/src/popup/import/importSeedFullScreen/index.tsx @@ -13,6 +13,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from 're import { setStorage } from '@polkadot/extension-polkagate/src/components/Loading'; import { openOrFocusTab } from '@polkadot/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks'; +import { Title } from '@polkadot/extension-polkagate/src/fullscreen/sendFund/InputPage'; import { PROFILE_TAGS } from '@polkadot/extension-polkagate/src/hooks/useProfileAccounts'; import { FULLSCREEN_WIDTH } from '@polkadot/extension-polkagate/src/util/constants'; import { objectSpread } from '@polkadot/util'; @@ -147,16 +148,13 @@ export default function ImportSeed (): React.ReactElement { /> <Grid container item justifyContent='center' sx={{ bgcolor: 'backgroundFL.secondary', height: 'calc(100vh - 70px)', maxWidth: FULLSCREEN_WIDTH, overflow: 'scroll' }}> <Grid container item sx={{ display: 'block', position: 'relative', px: '10%' }}> - <Grid alignContent='center' alignItems='center' container item> - <Grid item sx={{ mr: '20px' }}> - <VaadinIcon icon='vaadin:book' style={{ height: '40px', color: `${theme.palette.text.primary}`, width: '40px' }} /> - </Grid> - <Grid item> - <Typography fontSize='30px' fontWeight={700} py='20px' width='100%'> - {t<string>('Import from recovery phrase')} - </Typography> - </Grid> - </Grid> + <Title + height='100px' + logo={ + <VaadinIcon icon='vaadin:book' style={{ color: `${theme.palette.text.primary}`, height: '25px', width: '25px' }} /> + } + text={t('Import from recovery phrase')} + /> <Typography fontSize='16px' fontWeight={400} width='100%'> {t<string>('Enter your account\'s recovery phrase (mnemonic seed) to seamlessly import it into the extension wallet, giving you quick and secure access to your assets and transactions.')} </Typography> diff --git a/packages/extension-polkagate/src/popup/import/restoreJSONFullScreen/index.tsx b/packages/extension-polkagate/src/popup/import/restoreJSONFullScreen/index.tsx index d369e9789..778db2541 100644 --- a/packages/extension-polkagate/src/popup/import/restoreJSONFullScreen/index.tsx +++ b/packages/extension-polkagate/src/popup/import/restoreJSONFullScreen/index.tsx @@ -12,6 +12,7 @@ import React, { useCallback, useMemo, useState } from 'react'; import { setStorage } from '@polkadot/extension-polkagate/src/components/Loading'; import { openOrFocusTab } from '@polkadot/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks'; +import { Title } from '@polkadot/extension-polkagate/src/fullscreen/sendFund/InputPage'; import { PROFILE_TAGS } from '@polkadot/extension-polkagate/src/hooks/useProfileAccounts'; import { FULLSCREEN_WIDTH } from '@polkadot/extension-polkagate/src/util/constants'; import { stringToU8a, u8aToString } from '@polkadot/util'; @@ -192,19 +193,13 @@ export default function RestoreJson (): React.ReactElement { /> <Grid container item justifyContent='center' sx={{ bgcolor: 'backgroundFL.secondary', height: 'calc(100vh - 70px)', maxWidth: FULLSCREEN_WIDTH, overflow: 'scroll' }}> <Grid container item sx={{ display: 'block', px: '10%' }}> - <Grid alignContent='center' alignItems='center' container item> - <Grid item sx={{ mr: '20px' }}> - <VaadinIcon - icon='vaadin:file-text' - style={{ color: `${theme.palette.text.primary}`, height: '40px', width: '40px' }} - /> - </Grid> - <Grid item> - <Typography fontSize='30px' fontWeight={700} py='20px' width='100%'> - {t('Restore from file')} - </Typography> - </Grid> - </Grid> + <Title + height='100px' + logo={ + <VaadinIcon icon='vaadin:file-text' style={{ color: `${theme.palette.text.primary}`, height: '25px', width: '25px' }} /> + } + text={t('Restore from file')} + /> {stepOne && <Typography fontSize='16px' fontWeight={400} width='100%'> {t('Upload a JSON file containing the account(s) you previously exported from this extension or other compatible extensions/wallets.')} diff --git a/packages/extension-polkagate/src/popup/newAccount/createAccountFullScreen/index.tsx b/packages/extension-polkagate/src/popup/newAccount/createAccountFullScreen/index.tsx index fd1e7c525..4dfebca8e 100644 --- a/packages/extension-polkagate/src/popup/newAccount/createAccountFullScreen/index.tsx +++ b/packages/extension-polkagate/src/popup/newAccount/createAccountFullScreen/index.tsx @@ -7,6 +7,7 @@ import { Grid, type SxProps, type Theme, Typography, useTheme } from '@mui/mater import React, { useCallback, useEffect, useState } from 'react'; import { openOrFocusTab } from '@polkadot/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks'; +import { Title } from '@polkadot/extension-polkagate/src/fullscreen/sendFund/InputPage'; import { FULLSCREEN_WIDTH, POLKADOT_GENESIS_HASH } from '@polkadot/extension-polkagate/src/util/constants'; import { DEFAULT_TYPE } from '@polkadot/extension-polkagate/src/util/defaultType'; @@ -109,16 +110,13 @@ function CreateAccount (): React.ReactElement { /> <Grid container item justifyContent='center' sx={{ bgcolor: 'backgroundFL.secondary', height: 'calc(100vh - 70px)', maxWidth: FULLSCREEN_WIDTH, overflow: 'scroll' }}> <Grid container item sx={{ display: 'block', position: 'relative', px: '10%' }}> - <Grid alignContent='center' alignItems='center' container item> - <Grid item sx={{ mr: '20px' }}> - <VaadinIcon icon='vaadin:plus-circle' style={{ height: '40px', color: `${theme.palette.text.primary}`, width: '40px' }} /> - </Grid> - <Grid item> - <Typography fontSize='30px' fontWeight={700} py='20px' width='100%'> - {t<string>('Create a new account')} - </Typography> - </Grid> - </Grid> + <Title + height='85px' + logo={ + <VaadinIcon icon='vaadin:plus-circle' style={{ color: `${theme.palette.text.primary}`, height: '25px', width: '25px' }} /> + } + text= {t('Create a new account')} + /> <Typography fontSize='16px' fontWeight={400} width='100%'> {t<string>('In order to create a new account you are given a 12-word recovery phrase which needs to be recorded and saved in a safe place. The recovery phrase can be used to restore your wallet. Keep it carefully to not lose your assets.')} </Typography> diff --git a/packages/extension-polkagate/src/popup/newAccount/deriveFromAccountsFullscreen/index.tsx b/packages/extension-polkagate/src/popup/newAccount/deriveFromAccountsFullscreen/index.tsx index ada234d7b..9c952535a 100644 --- a/packages/extension-polkagate/src/popup/newAccount/deriveFromAccountsFullscreen/index.tsx +++ b/packages/extension-polkagate/src/popup/newAccount/deriveFromAccountsFullscreen/index.tsx @@ -149,7 +149,7 @@ function DeriveFromAccounts(): React.ReactElement { <Title height='70px' logo={ - <VaadinIcon icon='vaadin:road-branch' style={{ color: `${theme.palette.text.primary}`, height: '40px', width: '40px' }} /> + <VaadinIcon icon='vaadin:road-branch' style={{ color: `${theme.palette.text.primary}`, height: '25px', width: '25px' }} /> } padding='0px' text={t('Derive from accounts')} diff --git a/packages/extension-polkagate/src/popup/passwordManagement/Login.tsx b/packages/extension-polkagate/src/popup/passwordManagement/Login.tsx index df5f5ce49..224b981a5 100644 --- a/packages/extension-polkagate/src/popup/passwordManagement/Login.tsx +++ b/packages/extension-polkagate/src/popup/passwordManagement/Login.tsx @@ -1,15 +1,18 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 +/* eslint-disable @typescript-eslint/no-misused-promises */ /* eslint-disable react/jsx-max-props-per-line */ import { Grid, Typography, useTheme } from '@mui/material'; -import React, { useCallback, useEffect, useState } from 'react'; +import React, { useCallback } from 'react'; -import { openOrFocusTab } from '@polkadot/extension-polkagate/src/fullscreen/accountDetails/components/CommonTasks'; +import { noop } from '@polkadot/util'; -import { HideIcon, Password, PButton, ShowIcon, WrongPasswordAlert } from '../../components'; -import { useIsExtensionPopup, useTranslation } from '../../hooks'; +import { Password, PButton, WrongPasswordAlert } from '../../components'; +import HideBalance from '../../components/SVG/HideBalance'; +import { openOrFocusTab } from '../../fullscreen/accountDetails/components/CommonTasks'; +import { useIsExtensionPopup, useIsHideNumbers, useTranslation } from '../../hooks'; import { STEPS } from './constants'; interface Props { @@ -22,9 +25,9 @@ interface Props { function Login ({ isPasswordError, onPassChange, onUnlock, setStep }: Props): React.ReactElement { const { t } = useTranslation(); const theme = useTheme(); - const isPopup = useIsExtensionPopup(); - const [hideNumbers, setHideNumbers] = useState<boolean>(); + const isPopup = useIsExtensionPopup(); + const { isHideNumbers, toggleHideNumbers } = useIsHideNumbers(); const onForgotPassword = useCallback((): void => { if (isPopup) { @@ -35,27 +38,18 @@ function Login ({ isPasswordError, onPassChange, onUnlock, setStep }: Props): Re openOrFocusTab('/forgot-password', true); }, [isPopup, setStep]); - useEffect(() => { - const isHide = window.localStorage.getItem('hide_numbers'); - - isHide === 'false' || isHide === null ? setHideNumbers(false) : setHideNumbers(true); - }, [setHideNumbers]); - - const onHideClick = useCallback(() => { - setHideNumbers && setHideNumbers(!hideNumbers); - window.localStorage.setItem('hide_numbers', hideNumbers ? 'false' : 'true'); - }, [hideNumbers, setHideNumbers]); - return ( <> <Grid container sx={{ my: '10px' }}> - <Grid alignItems='center' direction='column' item onClick={onHideClick} sx={{ cursor: 'pointer', display: 'flex', position: 'absolute', pt: '3px', right: '35px', top: '15px', opacity: 0.5, '&:hover': { opacity: 1 } }}> - {hideNumbers - ? <ShowIcon /> - : <HideIcon /> - } + <Grid alignItems='center' direction='column' item onClick={toggleHideNumbers} sx={{ '&:hover': { opacity: 1 }, cursor: 'pointer', display: 'flex', opacity: 0.5, position: 'absolute', pt: '3px', right: '35px', top: '15px' }}> + <HideBalance + hide={isHideNumbers} + lightColor={theme.palette.secondary.light} + onClick={noop} + size={25} + /> <Typography sx={{ color: 'secondary.light', fontSize: '12px', fontWeight: 500, userSelect: 'none' }}> - {hideNumbers ? t('Show numbers') : t('Hide numbers')} + {isHideNumbers ? t('Show numbers') : t('Hide numbers')} </Typography> </Grid> {isPasswordError && diff --git a/packages/extension-polkagate/src/popup/staking/partial/Filters.tsx b/packages/extension-polkagate/src/popup/staking/partial/Filters.tsx index 631851ee5..68e83d924 100644 --- a/packages/extension-polkagate/src/popup/staking/partial/Filters.tsx +++ b/packages/extension-polkagate/src/popup/staking/partial/Filters.tsx @@ -148,39 +148,39 @@ export default function Filters ({ allValidators, allValidatorsIdentities, apply <Grid alignItems='flex-start' bgcolor='background.default' container display='block' item mt='46px' sx={{ borderRadius: '10px 10px 0px 0px', height: 'parent.innerHeight' }} width='100%'> <Grid container justifyContent='center' my='20px'> <Typography fontSize='20px' fontWeight={400} lineHeight={1.4}> - {t<string>('Filters')} + {t('Filters')} </Typography> </Grid> <Grid container justifyContent='center'> - <Divider sx={{ bgcolor: 'secondary.main', width: '80%' }} /> + <Divider sx={{ bgcolor: 'secondary.light', width: '80%' }} /> <Checkbox2 checked={filters?.withIdentity} - label={t<string>('With verified identity')} + label={t('With verified identity')} onChange={() => onFilters('withIdentity')} style={{ fontSize: '14px', fontWeight: '300', mt: '15px', width: '80%' }} /> <Checkbox2 checked={filters?.noWaiting} - label={t<string>('Not waiting (currently elected)')} + label={t('Not waiting (currently elected)')} onChange={() => onFilters('noWaiting')} style={{ fontSize: '14px', fontWeight: '300', mt: '15px', width: '80%' }} /> <Checkbox2 checked={filters?.noOversubscribed} - label={t<string>('No oversubscribed')} + label={t('No oversubscribed')} onChange={() => onFilters('noOversubscribed')} style={{ fontSize: '14px', fontWeight: '300', mt: '15px', width: '80%' }} /> <Checkbox2 checked={filters?.noSlashed} disabled - label={t<string>('No slashed before')} + label={t('No slashed before')} onChange={() => onFilters('noSlashed')} style={{ fontSize: '14px', fontWeight: '300', mt: '15px', width: '80%' }} /> <Checkbox2 checked={filters?.maxCommission?.check} - label={`${t<string>('Maximum Commission')} %`} + label={`${t('Maximum Commission')} %`} onChange={() => onFilters('maxCommission')} style={{ fontSize: '14px', fontWeight: '300', mt: '15px', width: '63%' }} /> @@ -203,7 +203,7 @@ export default function Filters ({ allValidators, allValidatorsIdentities, apply /> <Checkbox2 checked={filters?.limitOfValidatorsPerOperator?.check} - label={t<string>('Limit of validators per operator')} + label={t('Limit of validators per operator')} onChange={() => onFilters('limitOfValidatorsPerOperator')} style={{ fontSize: '14px', fontWeight: '300', mt: '15px', width: '63%' }} /> @@ -239,8 +239,8 @@ export default function Filters ({ allValidators, allValidatorsIdentities, apply ml={isFullscreen ? '0px' : undefined} onPrimaryClick={onApply} onSecondaryClick={onClear} - primaryBtnText={t<string>('Apply')} - secondaryBtnText={t<string>('Reset All')} + primaryBtnText={t('Apply')} + secondaryBtnText={t('Reset All')} variant='text' /> <IconButton @@ -253,14 +253,14 @@ export default function Filters ({ allValidators, allValidatorsIdentities, apply top: isFullscreen ? '15px' : '65px' }} > - <CloseIcon sx={{ color: 'text.primary', fontSize: 35 }} /> + <CloseIcon sx={{ color: 'text.primary', fontSize: 30 }} /> </IconButton> </Grid> ); if (isFullscreen) { return ( - <DraggableModal onClose={onCloseFilter} open={show}> + <DraggableModal onClose={onCloseFilter} open={show} px={0}> {page} </DraggableModal> ); diff --git a/packages/extension-polkagate/src/popup/staking/partial/PoolMoreInfo.tsx b/packages/extension-polkagate/src/popup/staking/partial/PoolMoreInfo.tsx index ac22f1999..e8c94b46d 100644 --- a/packages/extension-polkagate/src/popup/staking/partial/PoolMoreInfo.tsx +++ b/packages/extension-polkagate/src/popup/staking/partial/PoolMoreInfo.tsx @@ -77,7 +77,7 @@ const ShowMembers = ({ address, poolToShow }: InsidersProps) => { }, [poolMembers]); return ( - <Grid container direction='column' display='block' sx={{ bgcolor: 'background.paper', border: '1px solid', borderColor: 'secondary.main', borderRadius: '5px', maxHeight: isExtensionPopup ? '130px' : '220px', minHeight: '80px', mt: '10px', overflowX: 'hidden', overflowY: 'scroll' }}> + <Grid container direction='column' display='block' sx={{ bgcolor: 'background.paper', border: '1px solid', borderColor: 'secondary.light', borderRadius: '5px', maxHeight: isExtensionPopup ? '130px' : '220px', minHeight: '80px', mt: '10px', overflowX: 'hidden', overflowY: 'scroll' }}> <Grid container item sx={{ borderBottom: '1px solid', borderBottomColor: 'secondary.light' }}> <Grid item width='50%'> <Typography fontSize='12px' fontWeight={300} lineHeight='30px' textAlign='center'> @@ -123,7 +123,7 @@ const ShowMembers = ({ address, poolToShow }: InsidersProps) => { </Grid> } </Grid> - ) + ); }; const ShowReward = ({ address, poolToShow }: InsidersProps) => { @@ -131,8 +131,8 @@ const ShowReward = ({ address, poolToShow }: InsidersProps) => { const { decimal, token } = useInfo(address); return ( - <Grid container sx={{ bgcolor: 'background.paper', border: '1px solid', borderColor: 'secondary.main', borderRadius: '5px', my: '10px' }}> - <Grid container item justifyContent='center' sx={{ borderBottom: '1px solid', borderBottomColor: 'secondary.main' }}> + <Grid container sx={{ bgcolor: 'background.paper', border: '1px solid', borderColor: 'secondary.light', borderRadius: '5px', my: '10px' }}> + <Grid container item justifyContent='center' sx={{ borderBottom: '1px solid', borderBottomColor: 'secondary.light' }}> <Typography fontSize='12px' fontWeight={300} lineHeight='25px'> {t('Pool Claimable')} </Typography> @@ -147,7 +147,7 @@ const ShowReward = ({ address, poolToShow }: InsidersProps) => { /> </Grid> </Grid> - ) + ); }; const ShowClaimableCommission = ({ address, poolToShow, setShowClaimCommission }: InsidersProps) => { @@ -157,11 +157,11 @@ const ShowClaimableCommission = ({ address, poolToShow, setShowClaimCommission } const onClaimCommission = useCallback(() => { setShowClaimCommission && setShowClaimCommission(true); - }, []); + }, [setShowClaimCommission]); return ( - <Grid container sx={{ bgcolor: 'background.paper', border: '1px solid', borderColor: 'secondary.main', borderRadius: '5px', my: '10px', pb: '5px' }}> - <Grid container item justifyContent='center' sx={{ borderBottom: '1px solid', borderBottomColor: 'secondary.main' }}> + <Grid container sx={{ bgcolor: 'background.paper', border: '1px solid', borderColor: 'secondary.light', borderRadius: '5px', my: '10px', pb: '5px' }}> + <Grid container item justifyContent='center' sx={{ borderBottom: '1px solid', borderBottomColor: 'secondary.light' }}> <Typography fontSize='12px' fontWeight={300} lineHeight='25px'> {t('Claimable Commission')} </Typography> diff --git a/packages/extension-polkagate/src/popup/staking/partial/ShowPool.tsx b/packages/extension-polkagate/src/popup/staking/partial/ShowPool.tsx index 9bad9af7f..4f15cc192 100644 --- a/packages/extension-polkagate/src/popup/staking/partial/ShowPool.tsx +++ b/packages/extension-polkagate/src/popup/staking/partial/ShowPool.tsx @@ -66,10 +66,10 @@ export default function ShowPool ({ api, chain, label, labelPosition = 'left', m <Typography fontSize='16px' fontWeight={400} sx={{ textAlign: labelPosition }} width='100%'> {label} </Typography> - <Grid container direction='column' item sx={{ bgcolor: 'background.paper', border: '1px solid', borderColor: 'secondary.main', borderRadius: '5px' }}> + <Grid container direction='column' item sx={{ bgcolor: 'background.paper', border: '1px solid', borderColor: 'secondary.light', borderRadius: '5px' }}> {pool ? <> - <Grid container item lineHeight='35px' px='5px' sx={{ borderBottom: '1px solid', borderBottomColor: 'secondary.main' }}> + <Grid container item lineHeight='35px' px='5px' sx={{ borderBottom: '1px solid', borderBottomColor: 'secondary.light' }}> <Grid fontSize='16px' fontWeight={400} item justifyContent='center' overflow='hidden' textAlign='center' textOverflow='ellipsis' whiteSpace='nowrap' width={_showInfo ? '92%' : '100%'}> <Infotip text={pool?.metadata ?? t('Unknown')}> {pool?.stashIdAccount?.accountId @@ -86,37 +86,37 @@ export default function ShowPool ({ api, chain, label, labelPosition = 'left', m </Grid> } </Grid> - <Grid container item sx={{ borderBottom: '1px solid', borderBottomColor: 'secondary.main', fontWeight: 400 }}> + <Grid container item sx={{ borderBottom: '1px solid', borderBottomColor: 'secondary.light', fontWeight: 400 }}> {!hasCommission && - <Typography fontSize='12px' lineHeight='30px' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.main' }} textAlign='center' width='13%'> - {t<string>('Index')} + <Typography fontSize='12px' lineHeight='30px' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.light' }} textAlign='center' width='13%'> + {t('Index')} </Typography> } - <Typography fontSize='12px' lineHeight='30px' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.main' }} textAlign='center' width='30%'> - {t<string>('Staked')} + <Typography fontSize='12px' lineHeight='30px' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.light' }} textAlign='center' width='30%'> + {t('Staked')} </Typography> - <Typography fontSize='12px' lineHeight='30px' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.main' }} textAlign='center' width='18%'> - {t<string>('Members')} + <Typography fontSize='12px' lineHeight='30px' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.light' }} textAlign='center' width='18%'> + {t('Members')} </Typography> {hasCommission && - <Typography fontSize='12px' lineHeight='30px' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.main' }} textAlign='center' width='13%'> - {t<string>('Com.')} + <Typography fontSize='12px' lineHeight='30px' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.light' }} textAlign='center' width='13%'> + {t('Com.')} </Typography> } - <Typography fontSize='12px' lineHeight='30px' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.main' }} textAlign='center' width='22%'> - {t<string>('Status')} + <Typography fontSize='12px' lineHeight='30px' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.light' }} textAlign='center' width='22%'> + {t('Status')} </Typography> <Typography fontSize='12px' lineHeight='30px' textAlign='center' width='16%'> - {t<string>('Rewards')} + {t('Rewards')} </Typography> </Grid> <Grid container fontSize='14px' fontWeight={400} item lineHeight='37px' textAlign='center'> {!hasCommission && - <Grid alignItems='center' item justifyContent='center' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.main' }} width='13%'> + <Grid alignItems='center' item justifyContent='center' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.light' }} width='13%'> {pool.poolId.toString()} </Grid> } - <Grid alignItems='center' container item justifyContent='center' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.main' }} width='30%'> + <Grid alignItems='center' container item justifyContent='center' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.light' }} width='30%'> <ShowBalance api={api} balance={poolStaked as unknown as BN} @@ -126,15 +126,15 @@ export default function ShowPool ({ api, chain, label, labelPosition = 'left', m token={pool?.token} /> </Grid> - <Grid alignItems='center' item justifyContent='center' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.main' }} width='18%'> + <Grid alignItems='center' item justifyContent='center' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.light' }} width='18%'> {pool.bondedPool?.memberCounter?.toString()} </Grid> {hasCommission && - <Grid alignItems='center' item justifyContent='center' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.main' }} width='13%'> + <Grid alignItems='center' item justifyContent='center' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.light' }} width='13%'> {commission}% </Grid> } - <Grid alignItems='center' container item justifyContent='center' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.main' }} width='22%'> + <Grid alignItems='center' container item justifyContent='center' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.light' }} width='22%'> {mode === 'Default' ? poolStatus : mode} </Grid> <Grid alignItems='center' item justifyContent='center' onClick={onRewardsChart} width='16%' sx={{ cursor: 'pointer' }}> @@ -147,7 +147,7 @@ export default function ShowPool ({ api, chain, label, labelPosition = 'left', m <Circle color='#99004F' scaleEnd={0.7} scaleStart={0.4} size={25} /> </Grid> <Typography fontSize='13px' lineHeight='59px' pl='10px'> - {t<string>('Loading pool information...')} + {t('Loading pool information...')} </Typography> </Grid> } diff --git a/packages/extension-polkagate/src/popup/staking/partial/ShowRoles.tsx b/packages/extension-polkagate/src/popup/staking/partial/ShowRoles.tsx index e2ac070b1..58cc5c2db 100644 --- a/packages/extension-polkagate/src/popup/staking/partial/ShowRoles.tsx +++ b/packages/extension-polkagate/src/popup/staking/partial/ShowRoles.tsx @@ -1,21 +1,21 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ +//@ts-nocheck + +import type { ApiPromise } from '@polkadot/api'; +import type { Chain } from '@polkadot/extension-chains/types'; +import type { MyPoolInfo } from '../../../util/types'; import { Avatar, Grid, Link, type SxProps, type Theme, Typography } from '@mui/material'; // @ts-ignore import { Circle } from 'better-react-spinkit'; import React, { useMemo } from 'react'; -import { ApiPromise } from '@polkadot/api'; -import type { Chain } from '@polkadot/extension-chains/types'; - import { Identity } from '../../../components'; import { useTranslation } from '../../../hooks'; import getLogo from '../../../util/getLogo'; -import type { MyPoolInfo } from '../../../util/types'; import { sanitizeChainName } from '../../../util/utils'; interface Props { @@ -27,7 +27,7 @@ interface Props { style?: SxProps<Theme> | undefined; } -export default function ShowRoles({ api, chain, label, mode, pool, style }: Props): React.ReactElement { +export default function ShowRoles ({ api, chain, label, mode, pool, style }: Props): React.ReactElement { const { t } = useTranslation(); const chainName = sanitizeChainName(chain?.name); @@ -45,7 +45,7 @@ export default function ShowRoles({ api, chain, label, mode, pool, style }: Prop ]); } - const maybeCommissionAddress = pool.bondedPool.commission.current?.[1]; + const maybeCommissionAddress = pool.bondedPool?.commission?.current?.[1]; return ([ { address: pool.accounts?.stashId?.toString(), label: t<string>('Stash id') }, @@ -60,16 +60,16 @@ export default function ShowRoles({ api, chain, label, mode, pool, style }: Prop <Typography fontSize='14px' fontWeight={300} sx={{ textAlign: 'left' }} width='100%'> {label} </Typography> - <Grid container direction='column' item sx={{ '> :last-child': { border: 'none' }, bgcolor: 'background.paper', border: '1px solid', borderColor: 'secondary.main', borderRadius: '5px' }}> + <Grid container direction='column' item sx={{ '> :last-child': { border: 'none' }, bgcolor: 'background.paper', border: '1px solid', borderColor: 'secondary.light', borderRadius: '5px' }}> {accountsToShow?.length ? accountsToShow.map((acc, index) => ( <Grid container fontSize='14px' fontWeight={400} item key={index} lineHeight='37px' textAlign='center' sx={{ borderBottom: '1px solid', borderBottomColor: 'secondary.light' }}> - <Grid alignItems='center' fontSize='12px' fontWeight={400} item justifyContent='center' pl='6px' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.main' }} textAlign='left' width='25%'> + <Grid alignItems='center' fontSize='12px' fontWeight={400} item justifyContent='center' pl='6px' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.light' }} textAlign='left' width='25%'> {acc.label} </Grid> - <Grid alignItems='center' item justifyContent='center' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.main' }} width='65%'> + <Grid alignItems='center' item justifyContent='center' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.light' }} width='65%'> {acc.address - ? <Identity address={acc.address} api={api} chain={chain as any} formatted={acc.address} identiconSize={25} showShortAddress showSocial style={{ fontSize: '14px', height: '37px', pl: '5px' }} /> + ? <Identity address={acc.address} api={api} chain={chain} formatted={acc.address} identiconSize={25} showShortAddress showSocial style={{ fontSize: '14px', height: '37px', pl: '5px' }} /> : <Typography fontSize='16px' fontWeight={400} lineHeight='37px'> {'—'} </Typography> diff --git a/packages/extension-polkagate/src/popup/staking/partial/ValidatorInfo.tsx b/packages/extension-polkagate/src/popup/staking/partial/ValidatorInfo.tsx index 95e42d581..de24a03ab 100644 --- a/packages/extension-polkagate/src/popup/staking/partial/ValidatorInfo.tsx +++ b/packages/extension-polkagate/src/popup/staking/partial/ValidatorInfo.tsx @@ -73,8 +73,8 @@ export default function ValidatorInfoPage ({ api, chain, isFullscreen, setShowVa }, [api, validatorInfo, validatorsIdentities]); const ValidatorInformation = () => ( - <Grid container direction='column' sx={{ bgcolor: 'background.paper', border: '1px solid', borderColor: 'secondary.main', borderRadius: '5px', m: '20px auto', p: '10px', pb: '5px', width: '92%' }}> - <Grid alignItems='center' container item justifyContent='space-between' sx={{ borderBottom: '1px solid', borderColor: 'secondary.main', mb: '5px', pb: '2px' }}> + <Grid container direction='column' sx={{ bgcolor: 'background.paper', border: '1px solid', borderColor: 'secondary.light', borderRadius: '5px', m: '20px auto', p: '10px', pb: '5px', width: '92%' }}> + <Grid alignItems='center' container item justifyContent='space-between' sx={{ borderBottom: '1px solid', borderColor: 'secondary.light', mb: '5px', pb: '2px' }}> <Grid item lineHeight={1} maxWidth='85%' width='fit-content'> <Identity accountInfo={accountInfo} address={validatorInfo?.accountId} api={api} chain={chain} formatted={validatorInfo?.accountId?.toString()} identiconSize={25} style={{ fontSize: '16px' }} withShortAddress /> </Grid> @@ -96,7 +96,7 @@ export default function ValidatorInfoPage ({ api, chain, isFullscreen, setShowVa </Grid> </Grid> <Grid container item> - <Grid container direction='column' item sx={{ borderRight: '1px solid', borderRightColor: 'secondary.main' }} width='50%'> + <Grid container direction='column' item sx={{ borderRight: '1px solid', borderRightColor: 'secondary.light' }} width='50%'> <Grid display='inline-flex' fontSize='12px' fontWeight={400} item> <Typography fontSize='12px' fontWeight={300} lineHeight='25px' pr='5px'> {t('Own')}: @@ -169,16 +169,16 @@ export default function ValidatorInfoPage ({ api, chain, isFullscreen, setShowVa label={label} style={{ margin: '20px auto', width: '92%' }} > - <Grid container direction='column' display='block' item sx={{ bgcolor: 'background.paper', border: '1px solid', borderColor: 'secondary.main', borderRadius: '5px', maxHeight: parent.innerHeight * 1 / 2, overflowY: 'scroll' }}> + <Grid container direction='column' display='block' item sx={{ bgcolor: 'background.paper', border: '1px solid', borderColor: 'secondary.light', borderRadius: '5px', maxHeight: parent.innerHeight * 1 / 2, overflowY: 'scroll' }}> {sortedNominators?.length ? <> - <Grid container item sx={{ '> :last-child': { border: 'none' }, borderBottom: '1px solid', borderBottomColor: 'secondary.main' }}> - <Grid container item justifyContent='center' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.main' }} width='50%'> + <Grid container item sx={{ '> :last-child': { border: 'none' }, borderBottom: '1px solid', borderBottomColor: 'secondary.light' }}> + <Grid container item justifyContent='center' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.light' }} width='50%'> <Typography fontSize='12px' fontWeight={300} lineHeight='30px'> {t('Account')} </Typography> </Grid> - <Grid container item justifyContent='center' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.main' }} width='30%'> + <Grid container item justifyContent='center' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.light' }} width='30%'> <Typography fontSize='12px' fontWeight={300} lineHeight='30px'> {t('Staked')} </Typography> @@ -190,11 +190,11 @@ export default function ValidatorInfoPage ({ api, chain, isFullscreen, setShowVa </Grid> </Grid> {sortedNominators?.map(({ value, who }, index) => ( - <Grid container item key={index} sx={{ '> :last-child': { border: 'none' }, bgcolor: index === myIndex ? 'rgba(153, 0, 79, 0.4)' : 'transparent', borderBottom: '1px solid', borderBottomColor: 'secondary.main', lineHeight: '40px' }}> - <Grid container item justifyContent='flex-start' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.main', pl: '10px' }} width='50%'> + <Grid container item key={index} sx={{ '> :last-child': { border: 'none' }, bgcolor: index === myIndex ? 'rgba(153, 0, 79, 0.4)' : 'transparent', borderBottom: '1px solid', borderBottomColor: 'secondary.light', lineHeight: '40px' }}> + <Grid container item justifyContent='flex-start' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.light', pl: '10px' }} width='50%'> <Identity api={api} chain={chain} formatted={who.toString()} identiconSize={25} showShortAddress showSocial={false} style={{ fontSize: '16px' }} /> </Grid> - <Grid container item justifyContent='center' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.main' }} width='30%'> + <Grid container item justifyContent='center' sx={{ borderRight: '1px solid', borderRightColor: 'secondary.light' }} width='30%'> <ShowBalance api={api} balance={stakedValue(String(value))} @@ -219,7 +219,7 @@ export default function ValidatorInfoPage ({ api, chain, isFullscreen, setShowVa const page = ( <Grid alignItems='flex-start' bgcolor='background.default' container display='block' item mt={isFullscreen ? 0 : '46px'} sx={{ borderRadius: '10px 10px 0px 0px', height: 'parent.innerHeight' }} width='100%'> <Grid container justifyContent='center' mb='20px'> - <Typography fontSize='28px' fontWeight={400} lineHeight={1.4} sx={{ borderBottom: '2px solid', borderColor: 'secondary.main' }}> + <Typography fontSize='28px' fontWeight={400} lineHeight={1.4} sx={{ borderBottom: '2px solid', borderColor: 'secondary.light' }}> {t('Validator’s Info')} </Typography> </Grid> @@ -232,10 +232,10 @@ export default function ValidatorInfoPage ({ api, chain, isFullscreen, setShowVa p: 0, position: 'absolute', right: isFullscreen ? '35px' : undefined, - top: isFullscreen ? '35px' : '65px' + top: isFullscreen ? '30px' : '65px' }} > - <CloseIcon sx={{ color: 'text.primary', fontSize: 35 }} /> + <CloseIcon sx={{ color: 'text.primary', fontSize: 30 }} /> </IconButton> </Grid> ); diff --git a/packages/extension-polkagate/src/popup/staking/pool/index.tsx b/packages/extension-polkagate/src/popup/staking/pool/index.tsx index 02fc25038..05eb110aa 100644 --- a/packages/extension-polkagate/src/popup/staking/pool/index.tsx +++ b/packages/extension-polkagate/src/popup/staking/pool/index.tsx @@ -6,7 +6,7 @@ import type { ApiPromise } from '@polkadot/api'; import type { PoolStakingConsts, StakingConsts } from '../../../util/types'; -import { faHand, faPlus } from '@fortawesome/free-solid-svg-icons'; +import { faHandDots, faPlus } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { ArrowForwardIos as ArrowForwardIosIcon } from '@mui/icons-material'; import { Container, Divider, Grid, useTheme } from '@mui/material'; @@ -200,7 +200,7 @@ export default function Index(): React.ReactElement { }, [redeemable]); const ToBeReleased = () => ( - <Grid container sx={{ borderTop: '1px solid', borderTopColor: 'secondary.main', fontSize: '16px', fontWeight: 500, ml: '7%', mt: '10px', width: '93%' }}> + <Grid container sx={{ borderTop: '1px solid', borderTopColor: 'secondary.light', fontSize: '16px', fontWeight: 500, ml: '7%', mt: '10px', width: '93%' }}> <Grid item pt='10px' xs={12}> {t('To be released')} </Grid> @@ -336,7 +336,7 @@ export default function Index(): React.ReactElement { /> </Grid> </Container> - <Grid container justifyContent='space-around' sx={{ borderTop: '2px solid', borderTopColor: 'secondary.main', bottom: 0, left: '4%', position: 'absolute', pt: '5px', pb: '3px', width: '92%' }}> + <Grid container justifyContent='space-around' sx={{ borderTop: '2px solid', borderTopColor: 'secondary.light', bottom: 0, left: '4%', position: 'absolute', pt: '5px', pb: '3px', width: '92%' }}> <HorizontalMenuItem divider icon={ @@ -344,7 +344,7 @@ export default function Index(): React.ReactElement { color={`${theme.palette.text.primary}`} icon={faPlus} shake={shake} - style={{ height: '34px', stroke: `${theme.palette.text.primary}`, strokeWidth: 30, width: '40px', marginBottom: '-4px' }} + style={{ height: '34px', marginBottom: '-4px', stroke: `${theme.palette.text.primary}`, strokeWidth: 30, width: '40px' }} /> } onClick={goToStake} @@ -356,7 +356,7 @@ export default function Index(): React.ReactElement { <FontAwesomeIcon bounce={staked !== undefined && !staked.isZero() && (pool?.bondedPool?.state as unknown as string) !== 'Destroying' && pool?.stashIdAccount?.nominators?.length === 0} // do when has stake but does not nominations color={`${theme.palette.text.primary}`} - icon={faHand} + icon={faHandDots} size='lg' /> } diff --git a/packages/extension-polkagate/src/popup/staking/pool/stake/joinPool/partials/Filters.tsx b/packages/extension-polkagate/src/popup/staking/pool/stake/joinPool/partials/Filters.tsx index a815d88f8..1ff849152 100644 --- a/packages/extension-polkagate/src/popup/staking/pool/stake/joinPool/partials/Filters.tsx +++ b/packages/extension-polkagate/src/popup/staking/pool/stake/joinPool/partials/Filters.tsx @@ -1,8 +1,10 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ +//@ts-nocheck + +import type { PoolFilter, PoolInfo, StakingConsts } from '@polkadot/extension-polkagate/src/util/types'; import { Close as CloseIcon } from '@mui/icons-material'; import { Divider, Grid, IconButton, Typography, useTheme } from '@mui/material'; @@ -13,7 +15,6 @@ import { DraggableModal } from '@polkadot/extension-polkagate/src/fullscreen/gov import { useIsExtensionPopup, useTranslation } from '@polkadot/extension-polkagate/src/hooks'; import { getComparator } from '@polkadot/extension-polkagate/src/popup/staking/pool/stake/joinPool/partials/comparators'; import { DEFAULT_POOL_FILTERS } from '@polkadot/extension-polkagate/src/util/constants'; -import { PoolFilter, PoolInfo, StakingConsts } from '@polkadot/extension-polkagate/src/util/types'; import { amountToMachine } from '@polkadot/extension-polkagate/src/util/utils'; import { BN } from '@polkadot/util'; @@ -33,7 +34,7 @@ interface Props { stakingConsts: StakingConsts | null | undefined; } -export default function Filters({ apply, decimal, filters, pools, setApply, setFilteredPools, setFilters, setShow, setSortValue, show, sortValue, stakingConsts, token }: Props): React.ReactElement<Props> { +export default function Filters ({ apply, decimal, filters, pools, setApply, setFilteredPools, setFilters, setShow, setSortValue, show, sortValue, stakingConsts, token }: Props): React.ReactElement<Props> { const { t } = useTranslation(); const theme = useTheme(); const isExtensionPopup = useIsExtensionPopup(); @@ -141,15 +142,15 @@ export default function Filters({ apply, decimal, filters, pools, setApply, setF <Grid alignItems='flex-start' bgcolor='background.default' container display='block' item mt={isExtensionPopup ? '46px' : 0} sx={{ borderRadius: '10px 10px 0px 0px', height: 'parent.innerHeight' }} width='100%'> <Grid container justifyContent='center' my='20px'> <Typography fontSize='20px' fontWeight={400} lineHeight={1.4}> - {t<string>('Filters')} + {t('Filters')} </Typography> </Grid> <Grid alignItems='center' container justifyContent='center'> - <Divider sx={{ bgcolor: 'secondary.main', width: '80%' }} /> + <Divider sx={{ bgcolor: 'secondary.light', width: '80%' }} /> <Grid alignItems='center' container item m='3px 34px 3px'> <Checkbox2 checked={filters?.hasVerifiedIdentity} - label={t<string>('Pool creator has verified identity')} + label={t('Pool creator has verified identity')} onChange={() => onFilters('hasVerifiedIdentity')} style={{ fontSize: '14px', fontWeight: '300', mt: '15px', width: '80%' }} /> @@ -157,7 +158,7 @@ export default function Filters({ apply, decimal, filters, pools, setApply, setF <Grid alignItems='center' container item m='3px 34px 3px'> <Checkbox2 checked={filters?.hasNominated?.check} - label={t<string>('Selected more than')} + label={t('Selected more than')} onChange={() => onFilters('hasNominated')} style={{ fontSize: '14px', fontWeight: '300', width: '56%' }} /> @@ -182,7 +183,7 @@ export default function Filters({ apply, decimal, filters, pools, setApply, setF <Grid alignItems='center' container item m='3px 34px 3px'> <Checkbox2 checked={filters?.stakedMoreThan?.check} - label={t<string>('Staked more than')} + label={t('Staked more than')} onChange={() => onFilters('stakedMoreThan')} style={{ fontSize: '14px', fontWeight: '300', width: '56%' }} /> @@ -207,7 +208,7 @@ export default function Filters({ apply, decimal, filters, pools, setApply, setF <Grid alignItems='center' container item m='3px 34px 3px'> <Checkbox2 checked={filters?.membersMoreThan?.check} - label={t<string>('Members more than')} + label={t('Members more than')} onChange={() => onFilters('membersMoreThan')} style={{ fontSize: '14px', fontWeight: '300', width: '56%' }} /> @@ -242,8 +243,8 @@ export default function Filters({ apply, decimal, filters, pools, setApply, setF ml={isExtensionPopup ? undefined : '0'} onPrimaryClick={onApply} onSecondaryClick={onClear} - primaryBtnText={t<string>('Apply')} - secondaryBtnText={t<string>('Reset All')} + primaryBtnText={t('Apply')} + secondaryBtnText={t('Reset All')} variant='text' /> <IconButton @@ -267,7 +268,7 @@ export default function Filters({ apply, decimal, filters, pools, setApply, setF ? <SlidePopUp show={show}> {page} </SlidePopUp> - : <DraggableModal minHeight={650} onClose={onCloseFilter} open={show}> + : <DraggableModal minHeight={650} onClose={onCloseFilter} open={show} px = {0}> {page} </DraggableModal> } diff --git a/packages/extension-polkagate/src/popup/staking/solo/index.tsx b/packages/extension-polkagate/src/popup/staking/solo/index.tsx index 4a53e56f2..47425b4dc 100644 --- a/packages/extension-polkagate/src/popup/staking/solo/index.tsx +++ b/packages/extension-polkagate/src/popup/staking/solo/index.tsx @@ -166,7 +166,7 @@ export default function Index (): React.ReactElement { }, [address, history]); const ToBeReleased = () => ( - <Grid container sx={{ borderTop: '1px solid', borderTopColor: 'secondary.main', fontSize: '16px', fontWeight: 500, ml: '7%', mt: '2px', width: '95%' }}> + <Grid container sx={{ borderTop: '1px solid', borderTopColor: 'secondary.light', fontSize: '16px', fontWeight: 500, ml: '7%', mt: '2px', width: '95%' }}> <Grid item pt='10px' xs={12}> {t('To be released')} </Grid> @@ -311,7 +311,7 @@ export default function Index (): React.ReactElement { } </Grid> </Container> - <Grid container justifyContent='space-around' sx={{ borderTop: '2px solid', borderTopColor: 'secondary.main', bottom: 0, left: '4%', position: 'absolute', pt: '5px', pb: '2px', width: '92%' }}> + <Grid container justifyContent='space-around' sx={{ borderTop: '2px solid', borderTopColor: 'secondary.light', bottom: 0, left: '4%', position: 'absolute', pt: '5px', pb: '2px', width: '92%' }}> <HorizontalMenuItem divider icon={ diff --git a/packages/extension-polkagate/src/themes/baseTheme.ts b/packages/extension-polkagate/src/themes/baseTheme.ts index 7520634bd..bc573b7d7 100644 --- a/packages/extension-polkagate/src/themes/baseTheme.ts +++ b/packages/extension-polkagate/src/themes/baseTheme.ts @@ -1,9 +1,9 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck + /* eslint-disable header/header */ -import { ThemeOptions } from '@mui/material'; +import type { ThemeOptions } from '@mui/material'; export const baseTheme: ThemeOptions = { }; diff --git a/packages/extension-polkagate/src/themes/dark.ts b/packages/extension-polkagate/src/themes/dark.ts index 936294652..830ccb78a 100644 --- a/packages/extension-polkagate/src/themes/dark.ts +++ b/packages/extension-polkagate/src/themes/dark.ts @@ -32,7 +32,7 @@ export const darkTheme: ThemeOptions = { palette: { mode: 'dark', primary: { main: '#99004F', light: '#838383', contrastText: '#212121' }, - secondary: { main: '#BA2882', light: '#BA2682', contrastText: '#747474' }, + secondary: { main: '#BA2882', light: '#8D94A4', contrastText: '#747474' }, support: { main: '#BCE2DB', contrastText: '#008080' }, approval: { main: '#BA82A4', contrastText: '#DFCBD7' }, aye: { main: '#008080' }, diff --git a/packages/extension-ui/src/Popup/index.tsx b/packages/extension-ui/src/Popup/index.tsx index aa7a62a2a..d0fbc8a85 100644 --- a/packages/extension-ui/src/Popup/index.tsx +++ b/packages/extension-ui/src/Popup/index.tsx @@ -167,7 +167,11 @@ export default function Popup (): React.ReactElement { .then((maybeTheme) => setAccountIconTheme((maybeTheme as IconTheme | undefined) || DEFAULT_ACCOUNT_ICON_THEME)) .catch(console.error); - watchStorage('iconTheme', setAccountIconTheme).catch(console.error); + const unsubscribe = watchStorage('iconTheme', setAccountIconTheme); + + return () => { + unsubscribe(); + }; }, []); useEffect(() => { diff --git a/packages/extension/package.json b/packages/extension/package.json index 79e89a7bc..269f8159a 100644 --- a/packages/extension/package.json +++ b/packages/extension/package.json @@ -15,7 +15,7 @@ }, "sideEffects": false, "type": "module", - "version": "0.27.0", + "version": "0.29.0", "dependencies": { "@polkadot/api": "^11.2.1", "@polkadot/extension-base": "^0.47.5", diff --git a/packages/extension/public/locales/en/translation.json b/packages/extension/public/locales/en/translation.json index 4f71053ca..1b86bf75b 100644 --- a/packages/extension/public/locales/en/translation.json +++ b/packages/extension/public/locales/en/translation.json @@ -1459,5 +1459,7 @@ "The chosen blockchain does not support NFTs/Uniques.": "", "Here, you can view all your created or owned NFTs and unique items. Click on any to enlarge, access more details, and view in fullscreen mode.": "", "APY": "", - "Unable to fetch NFT/Unique items!": "" + "Unable to fetch NFT/Unique items!": "", + "Referenda Id": "", + "Track Id": "" } diff --git a/packages/extension/src/packageInfo.ts b/packages/extension/src/packageInfo.ts index bbc0fc2fd..65476d8eb 100644 --- a/packages/extension/src/packageInfo.ts +++ b/packages/extension/src/packageInfo.ts @@ -3,4 +3,4 @@ // Do not edit, auto-generated by @polkadot/dev -export const packageInfo = { name: '@polkadot/extension', path: 'auto', type: 'auto', version: '0.27.0' }; +export const packageInfo = { name: '@polkadot/extension', path: 'auto', type: 'auto', version: '0.29.0' }; diff --git a/yarn.lock b/yarn.lock index 6ff099f86..9564c88e3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -710,15 +710,6 @@ __metadata: languageName: node linkType: hard -"@emotion/is-prop-valid@npm:^0.8.2": - version: 0.8.8 - resolution: "@emotion/is-prop-valid@npm:0.8.8" - dependencies: - "@emotion/memoize": "npm:0.7.4" - checksum: 10/e85bdeb9d9d23de422f271e0f5311a0142b15055bb7e610440dbf250f0cdfd049df88af72a49e2c6081954481f1cbeca9172e2116ff536b38229397dfbed8082 - languageName: node - linkType: hard - "@emotion/is-prop-valid@npm:^1.1.0, @emotion/is-prop-valid@npm:^1.3.0": version: 1.3.0 resolution: "@emotion/is-prop-valid@npm:1.3.0" @@ -728,13 +719,6 @@ __metadata: languageName: node linkType: hard -"@emotion/memoize@npm:0.7.4": - version: 0.7.4 - resolution: "@emotion/memoize@npm:0.7.4" - checksum: 10/4e3920d4ec95995657a37beb43d3f4b7d89fed6caa2b173a4c04d10482d089d5c3ea50bbc96618d918b020f26ed6e9c4026bbd45433566576c1f7b056c3271dc - languageName: node - linkType: hard - "@emotion/memoize@npm:^0.8.1": version: 0.8.1 resolution: "@emotion/memoize@npm:0.8.1" @@ -1388,71 +1372,6 @@ __metadata: languageName: node linkType: hard -"@motionone/animation@npm:^10.18.0": - version: 10.18.0 - resolution: "@motionone/animation@npm:10.18.0" - dependencies: - "@motionone/easing": "npm:^10.18.0" - "@motionone/types": "npm:^10.17.1" - "@motionone/utils": "npm:^10.18.0" - tslib: "npm:^2.3.1" - checksum: 10/c7fc04dd10d6cade3d3b63d26f2532a2b2731233afc0454722e55ad8061fb3923d926db9cc09f1bcedb39f504fcee1e80adaab270523846998aad3017364a583 - languageName: node - linkType: hard - -"@motionone/dom@npm:^10.15.3": - version: 10.18.0 - resolution: "@motionone/dom@npm:10.18.0" - dependencies: - "@motionone/animation": "npm:^10.18.0" - "@motionone/generators": "npm:^10.18.0" - "@motionone/types": "npm:^10.17.1" - "@motionone/utils": "npm:^10.18.0" - hey-listen: "npm:^1.0.8" - tslib: "npm:^2.3.1" - checksum: 10/18abb5c174a84c90b2e59459fa3a9f8b655d063c259f2f3be5b6740e660285d2f66a8b25437dd963c3b9cdeae9fa5984ee8d217881088ea4d392cf39f8493a84 - languageName: node - linkType: hard - -"@motionone/easing@npm:^10.18.0": - version: 10.18.0 - resolution: "@motionone/easing@npm:10.18.0" - dependencies: - "@motionone/utils": "npm:^10.18.0" - tslib: "npm:^2.3.1" - checksum: 10/a455a06ccee907ce9da7b1dfe392060a473132733e3f92bbee3a99c36af7baa333cf3c6e38c6d44ad0f9878fdafca3c3f4bcfe55aaeb2a633e45d8e0429f8fa5 - languageName: node - linkType: hard - -"@motionone/generators@npm:^10.18.0": - version: 10.18.0 - resolution: "@motionone/generators@npm:10.18.0" - dependencies: - "@motionone/types": "npm:^10.17.1" - "@motionone/utils": "npm:^10.18.0" - tslib: "npm:^2.3.1" - checksum: 10/149720881e8db6a1ff38cea98349c3a00f72e5318b645459b68a2aeddb1f2be63ad2ae8978f6c4a63e2414f39e65f06de13a43fd35cf24dc3fb3e3c7f87526bc - languageName: node - linkType: hard - -"@motionone/types@npm:^10.17.1": - version: 10.17.1 - resolution: "@motionone/types@npm:10.17.1" - checksum: 10/21d92d733ba30f810b72609fe04f2ef86125ba0160b826974605cc4cc5fbb6ab7bbf1640cbc64fd6298eb8d36fb920ad3ca646c76adf0e2c47a4920200616952 - languageName: node - linkType: hard - -"@motionone/utils@npm:^10.18.0": - version: 10.18.0 - resolution: "@motionone/utils@npm:10.18.0" - dependencies: - "@motionone/types": "npm:^10.17.1" - hey-listen: "npm:^1.0.8" - tslib: "npm:^2.3.1" - checksum: 10/0fa9232d132383880d6004522ded763d60f490946584e02bca7f64df98fae07421071f3a85de06aa6ecb52632a47a7586b4143e824e459a87cc852fab657e549 - languageName: node - linkType: hard - "@mui/base@npm:5.0.0-beta.40": version: 5.0.0-beta.40 resolution: "@mui/base@npm:5.0.0-beta.40" @@ -10760,21 +10679,23 @@ __metadata: languageName: node linkType: hard -"framer-motion@npm:^7.5.1": - version: 7.10.3 - resolution: "framer-motion@npm:7.10.3" +"framer-motion@npm:^11.11.13": + version: 11.11.13 + resolution: "framer-motion@npm:11.11.13" dependencies: - "@emotion/is-prop-valid": "npm:^0.8.2" - "@motionone/dom": "npm:^10.15.3" - hey-listen: "npm:^1.0.8" - tslib: "npm:2.4.0" + tslib: "npm:^2.4.0" peerDependencies: + "@emotion/is-prop-valid": "*" react: ^18.0.0 react-dom: ^18.0.0 - dependenciesMeta: + peerDependenciesMeta: "@emotion/is-prop-valid": optional: true - checksum: 10/522147660c3946ecb630c866f20fdba5acbad5891bd7eaafb46a53c57f876905db4c561590a57bee5145bb3dd9e64555b6c185e69571df523f35e861a4d188d5 + react: + optional: true + react-dom: + optional: true + checksum: 10/518d9f717420d12a9400424486c6799c44fabe7817896d7e7785aa48edae8fc1fb5bcfd31090a166b8a4c84bca3c6bee579c8cd62379d352f2d06018193e26bd languageName: node linkType: hard @@ -11646,13 +11567,6 @@ __metadata: languageName: node linkType: hard -"hey-listen@npm:^1.0.8": - version: 1.0.8 - resolution: "hey-listen@npm:1.0.8" - checksum: 10/744b5f4c18c7cfb82b22bd22e1d300a9ac4eafe05a22e58fb87e48addfca8be00604d9aa006434ea02f9530990eb4b393ddb28659e2ab7f833ce873e32eb809c - languageName: node - linkType: hard - "highlight.js@npm:^10.7.1": version: 10.7.3 resolution: "highlight.js@npm:10.7.3" @@ -17628,7 +17542,7 @@ __metadata: country-flag-icons: "npm:^1.5.9" css-loader: "npm:^6.7.3" dotenv-webpack: "npm:^8.0.1" - framer-motion: "npm:^7.5.1" + framer-motion: "npm:^11.11.13" husky: "npm:^9.1.5" i18next-scanner: "npm:^4.4.0" intersection-observer: "npm:^0.12.0" @@ -19347,13 +19261,6 @@ __metadata: languageName: node linkType: hard -"tslib@npm:2.4.0": - version: 2.4.0 - resolution: "tslib@npm:2.4.0" - checksum: 10/d8379e68b36caf082c1905ec25d17df8261e1d68ddc1abfd6c91158a064f6e4402039ae7c02cf4c81d12e3a2a2c7cd8ea2f57b233eb80136a2e3e7279daf2911 - languageName: node - linkType: hard - "tslib@npm:2.6.2": version: 2.6.2 resolution: "tslib@npm:2.6.2"