From 38c10c24d6dc8caf467c031de72e14d2e98cb610 Mon Sep 17 00:00:00 2001 From: Nick Date: Mon, 28 Oct 2024 21:07:51 +0330 Subject: [PATCH 1/4] feat: add account icon theme options --- .../src/components/Identicon.tsx | 8 +- .../src/components/Select2.tsx | 94 ++++++--- .../src/components/SelectIdenticonTheme.tsx | 55 +++++ .../src/components/contexts.tsx | 4 +- .../src/components/index.ts | 1 + .../partials/SettingSubMenuFullScreen.tsx | 14 +- .../src/fullscreen/onboarding/index.tsx | 6 +- .../src/partials/SettingSubMenu.tsx | 9 +- .../src/util/constants.tsx | 3 + .../extension-polkagate/src/util/types.ts | 5 + packages/extension-ui/src/Popup/index.tsx | 193 +++++++++--------- .../public/locales/en/translation.json | 3 +- 12 files changed, 254 insertions(+), 141 deletions(-) create mode 100644 packages/extension-polkagate/src/components/SelectIdenticonTheme.tsx diff --git a/packages/extension-polkagate/src/components/Identicon.tsx b/packages/extension-polkagate/src/components/Identicon.tsx index 368797e85..bb35c052f 100644 --- a/packages/extension-polkagate/src/components/Identicon.tsx +++ b/packages/extension-polkagate/src/components/Identicon.tsx @@ -5,11 +5,13 @@ import type { IconTheme } from '@polkadot/react-identicon/types'; import type { AccountId } from '@polkadot/types/interfaces/runtime'; import { CheckCircleOutline as CheckIcon, InsertLinkRounded as LinkIcon } from '@mui/icons-material'; -import React from 'react'; +import React, { useContext } from 'react'; import styled from 'styled-components'; import Icon from '@polkadot/react-identicon'; +import { AccountIconThemeContext } from '.'; + interface Props { className?: string; iconTheme?: IconTheme; @@ -22,6 +24,8 @@ interface Props { } function Identicon ({ className, iconTheme, isSubId, judgement, onCopy, prefix, size, value }: Props): React.ReactElement { + const { accountIconTheme } = useContext(AccountIconThemeContext); + return (
@@ -30,7 +34,7 @@ function Identicon ({ className, iconTheme, isSubId, judgement, onCopy, prefix, onCopy={onCopy} prefix={prefix} size={size} - theme={iconTheme} + theme={ accountIconTheme || iconTheme} value={value} />
diff --git a/packages/extension-polkagate/src/components/Select2.tsx b/packages/extension-polkagate/src/components/Select2.tsx index 4bc5bb2a2..c4bc85ab1 100644 --- a/packages/extension-polkagate/src/components/Select2.tsx +++ b/packages/extension-polkagate/src/components/Select2.tsx @@ -4,12 +4,16 @@ /* eslint-disable react/jsx-max-props-per-line */ import type { SelectChangeEvent } from '@mui/material'; +import type { IconTheme } from '@polkadot/react-identicon/types'; import type { DropdownOption } from '../util/types'; import { CircularProgress, FormControl, Grid, InputBase, MenuItem, Select, Typography } from '@mui/material'; import { styled, useTheme } from '@mui/material/styles'; import React, { useCallback, useLayoutEffect, useState } from 'react'; +import Icon from '@polkadot/react-identicon'; + +import { DEMO_ACCOUNT } from '../util/constants'; import { sanitizeChainName } from '../util/utils'; import ChainLogo from './ChainLogo'; @@ -19,7 +23,13 @@ interface Props { onChange?: (v: number | string) => void; options: DropdownOption[]; label: string; + labelFontSize?: string; + labelPaddingLeft?: string; + textFontSize?: string; + labelAlignment?: string; isDisabled?: boolean; + isIdenticon?: boolean; + rounded?: boolean; showLogo?: boolean; showIcons?: boolean; _mt?: string | number; @@ -49,7 +59,7 @@ const BootstrapInput = styled(InputBase)<{ isDisabled?: boolean }>(({ isDisabled } })); -function CustomizedSelect ({ _mt = 0, defaultValue, disabledItems, isDisabled = false, isItemsLoading, label, onChange, options, showIcons = true, showLogo = false, value }: Props) { +function CustomizedSelect ({ _mt = 0, defaultValue, disabledItems, isDisabled = false, isIdenticon, isItemsLoading, label, labelAlignment, labelFontSize = '10px', labelPaddingLeft = '5px', onChange, options, rounded = true, showIcons = true, showLogo = false, textFontSize = '14px', value }: Props) { const theme = useTheme(); const [showMenu, setShowMenu] = useState(false); const [selectedValue, setSelectedValue] = useState(); @@ -70,7 +80,7 @@ function CustomizedSelect ({ _mt = 0, defaultValue, disabledItems, isDisabled = return ( - + {label} {selectedValue && @@ -78,7 +88,7 @@ function CustomizedSelect ({ _mt = 0, defaultValue, disabledItems, isDisabled = // eslint-disable-next-line react/jsx-no-bind IconComponent={ isItemsLoading - ? () => + ? () => : undefined } MenuProps={{ @@ -120,11 +130,45 @@ function CustomizedSelect ({ _mt = 0, defaultValue, disabledItems, isDisabled = onChange={_onChange} onClick={toggleMenu} open={options?.length !== 1 && showMenu} // do not open select when page is loading , or options has just one item + // eslint-disable-next-line react/jsx-no-bind + renderValue={(v) => { + let textToShow = options.find((option) => v === option.value || v === option.text || String(v) === String(option.value))?.text?.split(/\s*\(/)[0]; + + if (textToShow?.split(':')?.[1]) { + textToShow = textToShow?.split(':')[1]?.trim(); + } + + return ( + + {showIcons && textToShow && textToShow !== 'Allow use on any chain' && + + {isIdenticon + ? + : + } + + } + + + {textToShow} + + + + ); + }} sx={{ + '.MuiSelect-icon': { + display: options?.length && options.length === 1 ? 'none' : 'block' + }, '> #selectChain': { border: '1px solid', borderColor: 'secondary.light', - borderRadius: '20px', + borderRadius: rounded ? '20px' : '5px', fontSize: '14px', height: '29px', lineHeight: '30px', @@ -141,35 +185,9 @@ function CustomizedSelect ({ _mt = 0, defaultValue, disabledItems, isDisabled = fontSize: '30px' }, bgcolor: isDisabled ? 'primary.contrastText' : 'transparent', - width: '100%', - '.MuiSelect-icon': { - display: options?.length && options.length === 1 ? 'none' : 'block' - } + width: '100%' }} value={selectedValue} // Assuming selectedValue is a state variable - // eslint-disable-next-line react/jsx-no-bind - renderValue={(v) => { - let textToShow = options.find((option) => v === option.value || v === option.text || String(v) === String(option.value))?.text?.split(/\s*\(/)[0]; - - if (textToShow?.split(':')?.[1]) { - textToShow = textToShow?.split(':')[1]?.trim(); - } - - return ( - - {showIcons && textToShow && textToShow !== 'Allow use on any chain' && - - - - } - - - {textToShow} - - - - ); - }} > {options.map(({ text, value }): React.ReactNode => ( {showIcons && text !== 'Allow use on any chain' && - + {isIdenticon + ? + : + } } - - + + {text} diff --git a/packages/extension-polkagate/src/components/SelectIdenticonTheme.tsx b/packages/extension-polkagate/src/components/SelectIdenticonTheme.tsx new file mode 100644 index 000000000..4674272ee --- /dev/null +++ b/packages/extension-polkagate/src/components/SelectIdenticonTheme.tsx @@ -0,0 +1,55 @@ +// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import type { IconTheme } from '@polkadot/react-identicon/types'; + +import { Grid, type SxProps, type Theme } from '@mui/material'; +import { t } from 'i18next'; +import React, { useCallback, useContext } from 'react'; + +import { AccountIconThemeContext } from './contexts'; +import { setStorage } from './Loading'; +import Select2 from './Select2'; + +interface Props { + style?: SxProps | undefined; + fullWidthDropdown?: boolean; +} + +function SelectIdenticonTheme ({ style = {} }: Props) { + const { accountIconTheme, setAccountIconTheme } = useContext(AccountIconThemeContext); + + const options = [ + { text: 'Dot', value: 'polkadot' }, + { text: 'Ball', value: 'beachball' }, + { text: 'Cube', value: 'ethereum' } + ]; + + const onChangeTheme = useCallback((iconTheme: string | number) => { + setStorage('iconTheme', iconTheme).catch(console.error); + setAccountIconTheme(iconTheme as IconTheme); + }, [setAccountIconTheme]); + + return ( + + + + ); +} + +export default React.memo(SelectIdenticonTheme); diff --git a/packages/extension-polkagate/src/components/contexts.tsx b/packages/extension-polkagate/src/components/contexts.tsx index 339c87903..f50455586 100644 --- a/packages/extension-polkagate/src/components/contexts.tsx +++ b/packages/extension-polkagate/src/components/contexts.tsx @@ -3,7 +3,7 @@ import type { AccountsContext, AuthorizeRequest, MetadataRequest, SigningRequest } from '@polkadot/extension-base/background/types'; import type { SettingsStruct } from '@polkadot/ui-settings/types'; -import type { AccountsAssetsContextType, AlertContextType, APIsContext, CurrencyContextType, DropdownOption, FetchingRequests, ReferendaContextType, UserAddedChains } from '../util/types'; +import type { AccountIconThemeContextType, AccountsAssetsContextType, AlertContextType, APIsContext, CurrencyContextType, DropdownOption, FetchingRequests, ReferendaContextType, UserAddedChains } from '../util/types'; import React from 'react'; @@ -26,8 +26,10 @@ const SigningReqContext = React.createContext([]); const ToastContext = React.createContext<({ show: (message: string) => void })>({ show: noop }); const UserAddedChainContext = React.createContext({}); const GenesisHashOptionsContext = React.createContext([]); +const AccountIconThemeContext = React.createContext({ accountIconTheme: undefined, setAccountIconTheme: noop }); export { AccountContext, + AccountIconThemeContext, AccountsAssetsContext, ActionContext, AlertContext, diff --git a/packages/extension-polkagate/src/components/index.ts b/packages/extension-polkagate/src/components/index.ts index 0604cf6f0..173eabae3 100644 --- a/packages/extension-polkagate/src/components/index.ts +++ b/packages/extension-polkagate/src/components/index.ts @@ -72,6 +72,7 @@ export { default as RemoveAuth } from './RemoveAuth'; export { default as Select } from './Select'; export { default as Select2 } from './Select2'; export { default as SelectChain } from './SelectChain'; +export { default as SelectIdenticonTheme } from './SelectIdenticonTheme'; export { default as ShortAddress } from './ShortAddress'; export { default as ShortAddress2 } from './ShortAddress2'; export { default as ShowBalance } from './ShowBalance'; diff --git a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/SettingSubMenuFullScreen.tsx b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/SettingSubMenuFullScreen.tsx index 72fa0d292..641c70f55 100644 --- a/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/SettingSubMenuFullScreen.tsx +++ b/packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/SettingSubMenuFullScreen.tsx @@ -1,7 +1,6 @@ // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors // SPDX-License-Identifier: Apache-2.0 -// @ts-nocheck /* eslint-disable react/jsx-max-props-per-line */ import { Box, Collapse, Divider, Grid, useTheme } from '@mui/material'; @@ -10,7 +9,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from 're import settings from '@polkadot/ui-settings'; import { checkBox, checkedBox } from '../../../assets/icons'; -import { AccountContext, Select, VaadinIcon } from '../../../components'; +import { AccountContext, Select, SelectIdenticonTheme, VaadinIcon } from '../../../components'; import { getStorage, setStorage } from '../../../components/Loading'; import { useIsTestnetEnabled, useTranslation } from '../../../hooks'; import { setNotification, tieAccount } from '../../../messaging'; @@ -25,7 +24,7 @@ interface Props { show: boolean; } -export default function SettingSubMenuFullScreen({ show }: Props): React.ReactElement { +export default function SettingSubMenuFullScreen ({ show }: Props): React.ReactElement { const { t } = useTranslation(); const theme = useTheme(); const { accounts } = useContext(AccountContext); @@ -85,7 +84,7 @@ export default function SettingSubMenuFullScreen({ show }: Props): React.ReactEl useEffect(() => { getStorage('testnet_enabled').then((res) => { - setIsTestnetEnabledChecked(res as boolean); + setIsTestnetEnabledChecked(res as unknown as boolean); }).catch(console.error); }, [setIsTestnetEnabledChecked]); @@ -135,9 +134,13 @@ export default function SettingSubMenuFullScreen({ show }: Props): React.ReactEl onClick={onManageLoginPassword} text={t('Manage login password')} /> - + + { - createAccountExternal('Demo Account ☔️', demoAccount, POLKADOT_GENESIS) + createAccountExternal('Demo Account ☔️', DEMO_ACCOUNT, POLKADOT_GENESIS) .then(() => onAction('/')) .catch((error: Error) => { console.error(error); diff --git a/packages/extension-polkagate/src/partials/SettingSubMenu.tsx b/packages/extension-polkagate/src/partials/SettingSubMenu.tsx index 6431d6d65..cedf39d6c 100644 --- a/packages/extension-polkagate/src/partials/SettingSubMenu.tsx +++ b/packages/extension-polkagate/src/partials/SettingSubMenu.tsx @@ -11,7 +11,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from 're import settings from '@polkadot/ui-settings'; -import { ActionContext, Checkbox2, FullScreenIcon, Infotip2, MenuItem, Select, VaadinIcon } from '../components'; +import { ActionContext, Checkbox2, FullScreenIcon, Infotip2, MenuItem, Select, SelectIdenticonTheme, VaadinIcon } from '../components'; import { getStorage, updateStorage } from '../components/Loading'; import { useExtensionLockContext } from '../context/ExtensionLockContext'; import ThemeChanger from '../fullscreen/governance/partials/ThemeChanger'; @@ -171,7 +171,10 @@ export default function SettingSubMenu ({ isTestnetEnabledChecked, onChange, set text={t('Manage login password')} /> - + + void; } +export interface AccountIconThemeContextType { + accountIconTheme: IconTheme | undefined; + setAccountIconTheme: (theme: IconTheme) => void; +} export interface FetchingRequests { fetching: Fetching; diff --git a/packages/extension-ui/src/Popup/index.tsx b/packages/extension-ui/src/Popup/index.tsx index 1cb6a6165..5700c28bd 100644 --- a/packages/extension-ui/src/Popup/index.tsx +++ b/packages/extension-ui/src/Popup/index.tsx @@ -4,6 +4,7 @@ import type { AccountJson, AccountsContext, AuthorizeRequest, MetadataRequest, SigningRequest } from '@polkadot/extension-base/background/types'; import type { CurrencyItemType } from '@polkadot/extension-polkagate/src/fullscreen/homeFullScreen/partials/Currency'; import type { AlertType, APIs, Fetching, LatestRefs, Prices, PricesInCurrencies, UserAddedChains } from '@polkadot/extension-polkagate/src/util/types'; +import type { IconTheme } from '@polkadot/react-identicon/types'; import type { SettingsStruct } from '@polkadot/ui-settings/types'; import { AnimatePresence } from 'framer-motion'; @@ -13,7 +14,7 @@ import { Route, Switch, useLocation } from 'react-router'; import { PHISHING_PAGE_REDIRECT } from '@polkadot/extension-base/defaults'; import { canDerive } from '@polkadot/extension-base/utils'; import { ErrorBoundary, Loading } from '@polkadot/extension-polkagate/src/components'; -import { AccountContext, AccountsAssetsContext, ActionContext, AlertContext, APIContext, AuthorizeReqContext, CurrencyContext, FetchingContext, GenesisHashOptionsContext, MediaContext, MetadataReqContext, ReferendaContext, SettingsContext, SigningReqContext, UserAddedChainContext } from '@polkadot/extension-polkagate/src/components/contexts'; +import { AccountContext, AccountIconThemeContext, AccountsAssetsContext, ActionContext, AlertContext, APIContext, AuthorizeReqContext, CurrencyContext, FetchingContext, GenesisHashOptionsContext, MediaContext, MetadataReqContext, ReferendaContext, SettingsContext, SigningReqContext, UserAddedChainContext } from '@polkadot/extension-polkagate/src/components/contexts'; import { getStorage, type LoginInfo, setStorage, updateStorage } from '@polkadot/extension-polkagate/src/components/Loading'; import { ExtensionLockProvider } from '@polkadot/extension-polkagate/src/context/ExtensionLockContext'; import AccountFS from '@polkadot/extension-polkagate/src/fullscreen/accountDetails'; @@ -83,6 +84,7 @@ import TuneUp from '@polkadot/extension-polkagate/src/popup/staking/solo/tuneUp' import SoloUnstake from '@polkadot/extension-polkagate/src/popup/staking/solo/unstake'; import { getPrices } from '@polkadot/extension-polkagate/src/util/api'; import { buildHierarchy } from '@polkadot/extension-polkagate/src/util/buildHierarchy'; +import { DEFAULT_ACCOUNT_ICON_THEME } from '@polkadot/extension-polkagate/src/util/constants'; import uiSettings from '@polkadot/ui-settings'; const startSettings = uiSettings.get(); @@ -137,6 +139,7 @@ export default function Popup (): React.ReactElement { const [refs, setRefs] = useState({}); const [accountsAssets, setAccountsAssets] = useState(); const [currency, setCurrency] = useState(); + const [accountIconTheme, setAccountIconTheme] = useState(); const [loginInfo, setLoginInfo] = useState(); const [alerts, setAlerts] = useState([]); @@ -156,6 +159,12 @@ export default function Popup (): React.ReactElement { } }, []); + useEffect(() => { + getStorage('iconTheme') + .then((maybeTheme) => setAccountIconTheme((maybeTheme as IconTheme | undefined) || DEFAULT_ACCOUNT_ICON_THEME)) + .catch(console.error); + }, []); + useEffect(() => { assetsOnChains && setAccountsAssets({ ...assetsOnChains }); // eslint-disable-next-line react-hooks/exhaustive-deps @@ -293,96 +302,98 @@ export default function Popup (): React.ReactElement { accounts && authRequests && metaRequests && signRequests && - - - - - - - - - - - - - - - {wrapWithErrorBoundary(, 'add-new-chain')} - {wrapWithErrorBoundary(, 'account')} - {wrapWithErrorBoundary(, 'account-creation')} - {wrapWithErrorBoundary(, 'export-all-address')} - {wrapWithErrorBoundary(, 'import-ledger')} - {wrapWithErrorBoundary(, 'import-seed')} - {wrapWithErrorBoundary(, 'import-raw-seed')} - {wrapWithErrorBoundary(, 'restore-json')} - {wrapWithErrorBoundary(, 'account')} - {wrapWithErrorBoundary(, 'auth-list')} - {wrapWithErrorBoundary(, 'crowdloans')} - {wrapWithErrorBoundary(, 'derived-address-locked')} - {wrapWithErrorBoundary(, 'derive-address')} - {wrapWithErrorBoundary(, 'export-address')} - {wrapWithErrorBoundary(, 'forget-address')} - {wrapWithErrorBoundary(, 'forgot-password')} - {wrapWithErrorBoundary(, 'reset-wallet')} - {wrapWithErrorBoundary(, 'fullscreen-account-derive')} - {wrapWithErrorBoundary(, 'fullscreen-proxy-management')} - {wrapWithErrorBoundary(, 'governance')} - {wrapWithErrorBoundary(, 'governance')} - {wrapWithErrorBoundary(, 'history')} - {wrapWithErrorBoundary(, 'import-add-watch-only')} - {wrapWithErrorBoundary(, 'import-add-watch-only-full-screen')} - {wrapWithErrorBoundary(, 'attach-qr')} - {wrapWithErrorBoundary(, 'attach-qr-full-screen')} - {wrapWithErrorBoundary(, 'import-proxied')} - {wrapWithErrorBoundary(, 'import-add-watch-only-full-screen')} - {wrapWithErrorBoundary(, 'manage-login-password')} - {wrapWithErrorBoundary(, 'manageProxies')} - {wrapWithErrorBoundary(, 'manage-identity')} - {wrapWithErrorBoundary(, 'onboarding')} - {wrapWithErrorBoundary(, 'pool-create')} - {wrapWithErrorBoundary(, 'pool-join')} - {wrapWithErrorBoundary(, 'pool-stake')} - {wrapWithErrorBoundary(, 'pool-poolInfromation')} - {wrapWithErrorBoundary(, 'pool-nominations')} - {wrapWithErrorBoundary(, 'pool-unstake')} - {wrapWithErrorBoundary(, 'pool-staking')} - {wrapWithErrorBoundary(, 'pool-staking-fullscreen')} - {wrapWithErrorBoundary(, 'manage-validators-fullscreen')} - {wrapWithErrorBoundary(, 'manage-validators-fullscreen')} - {wrapWithErrorBoundary(, 'rename')} - {wrapWithErrorBoundary(, 'receive')} - {wrapWithErrorBoundary(, 'send')} - {wrapWithErrorBoundary(, 'send')} - {wrapWithErrorBoundary(, 'stake')} - {wrapWithErrorBoundary(, 'social-recovery')} - {wrapWithErrorBoundary(, 'solo-fast-unstake')} - {wrapWithErrorBoundary(, 'solo-nominations')} - {wrapWithErrorBoundary(, 'solo-payout')} - {wrapWithErrorBoundary(, 'solo-restake')} - {wrapWithErrorBoundary(, 'solo-stake')} - {wrapWithErrorBoundary(, 'solo-unstake')} - {wrapWithErrorBoundary(, 'solo-staking')} - {wrapWithErrorBoundary(, 'solo-staking-fullscreen')} - {wrapWithErrorBoundary(, 'tuneup')} - {wrapWithErrorBoundary(, 'phishing-page-redirect')} - {Root} - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + {wrapWithErrorBoundary(, 'add-new-chain')} + {wrapWithErrorBoundary(, 'account')} + {wrapWithErrorBoundary(, 'account-creation')} + {wrapWithErrorBoundary(, 'export-all-address')} + {wrapWithErrorBoundary(, 'import-ledger')} + {wrapWithErrorBoundary(, 'import-seed')} + {wrapWithErrorBoundary(, 'import-raw-seed')} + {wrapWithErrorBoundary(, 'restore-json')} + {wrapWithErrorBoundary(, 'account')} + {wrapWithErrorBoundary(, 'auth-list')} + {wrapWithErrorBoundary(, 'crowdloans')} + {wrapWithErrorBoundary(, 'derived-address-locked')} + {wrapWithErrorBoundary(, 'derive-address')} + {wrapWithErrorBoundary(, 'export-address')} + {wrapWithErrorBoundary(, 'forget-address')} + {wrapWithErrorBoundary(, 'forgot-password')} + {wrapWithErrorBoundary(, 'reset-wallet')} + {wrapWithErrorBoundary(, 'fullscreen-account-derive')} + {wrapWithErrorBoundary(, 'fullscreen-proxy-management')} + {wrapWithErrorBoundary(, 'governance')} + {wrapWithErrorBoundary(, 'governance')} + {wrapWithErrorBoundary(, 'history')} + {wrapWithErrorBoundary(, 'import-add-watch-only')} + {wrapWithErrorBoundary(, 'import-add-watch-only-full-screen')} + {wrapWithErrorBoundary(, 'attach-qr')} + {wrapWithErrorBoundary(, 'attach-qr-full-screen')} + {wrapWithErrorBoundary(, 'import-proxied')} + {wrapWithErrorBoundary(, 'import-add-watch-only-full-screen')} + {wrapWithErrorBoundary(, 'manage-login-password')} + {wrapWithErrorBoundary(, 'manageProxies')} + {wrapWithErrorBoundary(, 'manage-identity')} + {wrapWithErrorBoundary(, 'onboarding')} + {wrapWithErrorBoundary(, 'pool-create')} + {wrapWithErrorBoundary(, 'pool-join')} + {wrapWithErrorBoundary(, 'pool-stake')} + {wrapWithErrorBoundary(, 'pool-poolInfromation')} + {wrapWithErrorBoundary(, 'pool-nominations')} + {wrapWithErrorBoundary(, 'pool-unstake')} + {wrapWithErrorBoundary(, 'pool-staking')} + {wrapWithErrorBoundary(, 'pool-staking-fullscreen')} + {wrapWithErrorBoundary(, 'manage-validators-fullscreen')} + {wrapWithErrorBoundary(, 'manage-validators-fullscreen')} + {wrapWithErrorBoundary(, 'rename')} + {wrapWithErrorBoundary(, 'receive')} + {wrapWithErrorBoundary(, 'send')} + {wrapWithErrorBoundary(, 'send')} + {wrapWithErrorBoundary(, 'stake')} + {wrapWithErrorBoundary(, 'social-recovery')} + {wrapWithErrorBoundary(, 'solo-fast-unstake')} + {wrapWithErrorBoundary(, 'solo-nominations')} + {wrapWithErrorBoundary(, 'solo-payout')} + {wrapWithErrorBoundary(, 'solo-restake')} + {wrapWithErrorBoundary(, 'solo-stake')} + {wrapWithErrorBoundary(, 'solo-unstake')} + {wrapWithErrorBoundary(, 'solo-staking')} + {wrapWithErrorBoundary(, 'solo-staking-fullscreen')} + {wrapWithErrorBoundary(, 'tuneup')} + {wrapWithErrorBoundary(, 'phishing-page-redirect')} + {Root} + + + + + + + + + + + + + + + } diff --git a/packages/extension/public/locales/en/translation.json b/packages/extension/public/locales/en/translation.json index 4877e35c8..c0c1884a9 100644 --- a/packages/extension/public/locales/en/translation.json +++ b/packages/extension/public/locales/en/translation.json @@ -1410,5 +1410,6 @@ "Recoverable": "", "Not recoverable": "", "No proxy": "", - "Switch Theme": "" + "Switch Theme": "", + "Account Icon": "" } From 23ed19de745ae429a22be98ef498f33d64e1466f Mon Sep 17 00:00:00 2001 From: Nick Date: Mon, 28 Oct 2024 21:53:08 +0330 Subject: [PATCH 2/4] refactor: remove unused --- .../src/components/SelectIdenticonTheme.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/extension-polkagate/src/components/SelectIdenticonTheme.tsx b/packages/extension-polkagate/src/components/SelectIdenticonTheme.tsx index 4674272ee..85e663de4 100644 --- a/packages/extension-polkagate/src/components/SelectIdenticonTheme.tsx +++ b/packages/extension-polkagate/src/components/SelectIdenticonTheme.tsx @@ -13,18 +13,17 @@ import Select2 from './Select2'; interface Props { style?: SxProps | undefined; - fullWidthDropdown?: boolean; } +const THEME_OPTIONS = [ + { text: 'Dot', value: 'polkadot' }, + { text: 'Ball', value: 'beachball' }, + { text: 'Cube', value: 'ethereum' } +]; + function SelectIdenticonTheme ({ style = {} }: Props) { const { accountIconTheme, setAccountIconTheme } = useContext(AccountIconThemeContext); - const options = [ - { text: 'Dot', value: 'polkadot' }, - { text: 'Ball', value: 'beachball' }, - { text: 'Cube', value: 'ethereum' } - ]; - const onChangeTheme = useCallback((iconTheme: string | number) => { setStorage('iconTheme', iconTheme).catch(console.error); setAccountIconTheme(iconTheme as IconTheme); @@ -44,7 +43,7 @@ function SelectIdenticonTheme ({ style = {} }: Props) { labelFontSize='14px' labelPaddingLeft='0px' onChange={onChangeTheme} - options={options} + options={THEME_OPTIONS} rounded={false} textFontSize='18px' /> From 06bd336ed4108cb93eb934c69676b56a78b81e7d Mon Sep 17 00:00:00 2001 From: Nick Date: Tue, 29 Oct 2024 08:30:46 +0330 Subject: [PATCH 3/4] fix: update identicon type in FS while change happens in extension --- packages/extension-ui/src/Popup/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/extension-ui/src/Popup/index.tsx b/packages/extension-ui/src/Popup/index.tsx index 5700c28bd..8ef6172ae 100644 --- a/packages/extension-ui/src/Popup/index.tsx +++ b/packages/extension-ui/src/Popup/index.tsx @@ -15,7 +15,7 @@ import { PHISHING_PAGE_REDIRECT } from '@polkadot/extension-base/defaults'; import { canDerive } from '@polkadot/extension-base/utils'; import { ErrorBoundary, Loading } from '@polkadot/extension-polkagate/src/components'; import { AccountContext, AccountIconThemeContext, AccountsAssetsContext, ActionContext, AlertContext, APIContext, AuthorizeReqContext, CurrencyContext, FetchingContext, GenesisHashOptionsContext, MediaContext, MetadataReqContext, ReferendaContext, SettingsContext, SigningReqContext, UserAddedChainContext } from '@polkadot/extension-polkagate/src/components/contexts'; -import { getStorage, type LoginInfo, setStorage, updateStorage } from '@polkadot/extension-polkagate/src/components/Loading'; +import { getStorage, type LoginInfo, setStorage, updateStorage, watchStorage } from '@polkadot/extension-polkagate/src/components/Loading'; import { ExtensionLockProvider } from '@polkadot/extension-polkagate/src/context/ExtensionLockContext'; import AccountFS from '@polkadot/extension-polkagate/src/fullscreen/accountDetails'; import AddNewChain from '@polkadot/extension-polkagate/src/fullscreen/addNewChain'; @@ -163,6 +163,8 @@ export default function Popup (): React.ReactElement { getStorage('iconTheme') .then((maybeTheme) => setAccountIconTheme((maybeTheme as IconTheme | undefined) || DEFAULT_ACCOUNT_ICON_THEME)) .catch(console.error); + + watchStorage('iconTheme', setAccountIconTheme).catch(console.error); }, []); useEffect(() => { From d6b4eab9795e0e332af68308f86172cad25f5336 Mon Sep 17 00:00:00 2001 From: Nick Date: Tue, 29 Oct 2024 09:13:45 +0330 Subject: [PATCH 4/4] chore: init with DEFAULT_ACCOUNT_ICON_THEME --- packages/extension-ui/src/Popup/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/extension-ui/src/Popup/index.tsx b/packages/extension-ui/src/Popup/index.tsx index 8ef6172ae..64beb114b 100644 --- a/packages/extension-ui/src/Popup/index.tsx +++ b/packages/extension-ui/src/Popup/index.tsx @@ -139,7 +139,7 @@ export default function Popup (): React.ReactElement { const [refs, setRefs] = useState({}); const [accountsAssets, setAccountsAssets] = useState(); const [currency, setCurrency] = useState(); - const [accountIconTheme, setAccountIconTheme] = useState(); + const [accountIconTheme, setAccountIconTheme] = useState(DEFAULT_ACCOUNT_ICON_THEME); const [loginInfo, setLoginInfo] = useState(); const [alerts, setAlerts] = useState([]);