chore: add logo to modals initiated by accounts menu (#1536)

* chore: add logo to modals initiated by accounts menu

* chore: Add hover effect (#1538)

---------

Co-authored-by: Amir Ekbatanifard <[email protected]>

Author: Nick-1979

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

@@ -17,18 +17,18 @@ import { BN } from '@polkadot/util';
 import { AccountContext, ActionContext, Warning } from '../../components';
 import { useAccountAssets, useBalances, useCurrency, useFullscreen, useInfo, usePrices, useTranslation } from '../../hooks';
 import { getValue } from '../../popup/account/util';
-import ExportAccountModal from '../../popup/export/ExportAccountModal';
-import ForgetAccountModal from '../../popup/forgetAccount/ForgetAccountModal';
 import HistoryModal from '../../popup/history/modal/HistoryModal';
 import { AccountLabel } from '../../popup/home/AccountLabel';
-import DeriveAccountModal from '../../popup/newAccount/deriveAccount/modal/DeriveAccountModal';
 import ReceiveModal from '../../popup/receive/ReceiveModal';
-import RenameModal from '../../popup/rename/RenameModal';
 import { ASSET_HUBS, GOVERNANCE_CHAINS, STAKING_CHAINS } from '../../util/constants';
 import getParentNameSuri from '../../util/getParentNameSuri';
 import { getPriceIdByChainName } from '../../util/utils';
 import { FullScreenHeader } from '../governance/FullScreenHeader';
 import Bread from '../partials/Bread';
+import DeriveAccountModal from '../partials/DeriveAccountModal';
+import ExportAccountModal from '../partials/ExportAccountModal';
+import ForgetAccountModal from '../partials/ForgetAccountModal';
+import RenameModal from '../partials/RenameAccountModal';
 import { Title } from '../sendFund/InputPage';
 import { openOrFocusTab } from './components/CommonTasks';
 import ReservedDisplayBalance from './components/ReservedDisplayBalance';
@@ -62,7 +62,7 @@ export default function AccountDetails (): React.ReactElement {
   const onAction = useContext(ActionContext);
   const accountAssets = useAccountAssets(address);
   const pricesInCurrency = usePrices();
-  
+
   const [refreshNeeded, setRefreshNeeded] = useState<boolean>(false);
   const [assetIdOnAssetHub, setAssetIdOnAssetHub] = useState<number>();
   const [selectedAsset, setSelectedAsset] = useState<FetchedBalance>();

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

@@ -20,15 +20,15 @@ import { ActionContext, Identicon, Identity, OptionalCopyButton, ShortAddress2 }
 import { nFormatter } from '../../../components/FormatPrice';
 import { useCurrency, useIdentity, useInfo, usePrices, useTranslation } from '../../../hooks';
 import { showAccount, tieAccount } from '../../../messaging';
-import ExportAccountModal from '../../../popup/export/ExportAccountModal';
-import ForgetAccountModal from '../../../popup/forgetAccount/ForgetAccountModal';
-import DeriveAccountModal from '../../../popup/newAccount/deriveAccount/modal/DeriveAccountModal';
-import RenameModal from '../../../popup/rename/RenameModal';
 import { amountToHuman } from '../../../util/utils';
 import AccountIconsFs from '../../accountDetails/components/AccountIconsFs';
 import { EyeIconFullScreen } from '../../accountDetails/components/AccountInformationForDetails';
 import AOC from '../../accountDetails/components/AOC';
 import { openOrFocusTab } from '../../accountDetails/components/CommonTasks';
+import DeriveAccountModal from '../../partials/DeriveAccountModal';
+import ExportAccountModal from '../../partials/ExportAccountModal';
+import ForgetAccountModal from '../../partials/ForgetAccountModal';
+import RenameModal from '../../partials/RenameAccountModal';
 import FullScreenAccountMenu from './FullScreenAccountMenu';
 
 interface AddressDetailsProps {
@@ -65,7 +65,7 @@ const AccountButton = ({ icon, onClick, text }: AccountButtonType) => {
   );
 };
 
-const AccountTotal = ({ currencySign, hideNumbers, totalBalance }: {currencySign: string | undefined, hideNumbers: boolean|undefined, totalBalance: number | undefined}) => {
+const AccountTotal = ({ currencySign, hideNumbers, totalBalance }: { currencySign: string | undefined, hideNumbers: boolean | undefined, totalBalance: number | undefined }) => {
   const theme = useTheme();
   const { t } = useTranslation();
 

packages/extension-polkagate/src/popup/newAccount/deriveAccount/modal/DeriveAccountModal.tsx renamed to packages/extension-polkagate/src/fullscreen/partials/DeriveAccountModal.tsx

@@ -1,19 +1,18 @@
 // 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 { Close as CloseIcon } from '@mui/icons-material';
-import { Grid, Typography, useTheme } from '@mui/material';
+import { Typography } from '@mui/material';
 import React, { useCallback, useContext, useState } from 'react';
 
-import { ActionContext } from '../../../../components';
-import { useAccount, useTranslation } from '../../../../hooks';
-import { deriveAccount } from '../../../../messaging';
-import { DraggableModal } from '../../../../fullscreen/governance/components/DraggableModal';
-import CreateNewDerivedAccount from './CreateNewDerivedAccount';
-import SelectParent from './SelectParent';
+import { ActionContext } from '../../components';
+import { useAccount, useTranslation } from '../../hooks';
+import { deriveAccount } from '../../messaging';
+import CreateNewDerivedAccount from '../../popup/newAccount/deriveAccount/modal/CreateNewDerivedAccount';
+import SelectParent from '../../popup/newAccount/deriveAccount/modal/SelectParent';
+import { DraggableModal } from '../governance/components/DraggableModal';
+import SimpleModalTitle from './SimpleModalTitle';
 
 interface Props {
   parentAddress?: string | undefined;
@@ -33,10 +32,9 @@ interface ConfirmState {
   parentPassword: string;
 }
 
-function DeriveModal({ parentAddress, setDisplayPopup }: Props): React.ReactElement<Props> {
+function DeriveModal ({ parentAddress, setDisplayPopup }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const onAction = useContext(ActionContext);
-  const theme = useTheme();
 
   const [isBusy, setIsBusy] = useState(false);
   const [account, setAccount] = useState<null | PathState>(null);
@@ -96,16 +94,11 @@ function DeriveModal({ parentAddress, setDisplayPopup }: Props): React.ReactElem
   return (
     <DraggableModal onClose={onClose} open>
       <>
-        <Grid alignItems='center' container justifyContent='space-between' pt='5px'>
-          <Grid item>
-            <Typography fontSize='22px' fontWeight={700}>
-              {t<string>('Derive Account')}
-            </Typography>
-          </Grid>
-          <Grid item>
-            <CloseIcon onClick={onClose} sx={{ color: 'primary.main', cursor: 'pointer', stroke: theme.palette.primary.main, strokeWidth: 1.5 }} />
-          </Grid>
-        </Grid>
+        <SimpleModalTitle
+          onClose={onClose}
+          title={t('Derive Account')}
+          vaadinIcon='road-branch'
+        />
         <Typography fontSize='14px' fontWeight={300} m='25px auto' textAlign='left'>
           {t<string>('A derived account inherits the recovery phrase from its parent, but has a unique derivation path.')}
         </Typography>

packages/extension-polkagate/src/popup/export/ExportAccountModal.tsx renamed to packages/extension-polkagate/src/fullscreen/partials/ExportAccountModal.tsx

@@ -3,15 +3,15 @@
 
 /* eslint-disable react/jsx-max-props-per-line */
 
-import { Close as CloseIcon } from '@mui/icons-material';
-import { Grid, Typography, useTheme } from '@mui/material';
+import { Grid, useTheme } from '@mui/material';
 import { saveAs } from 'file-saver';
 import React, { useCallback, useState } from 'react';
 
 import { ButtonWithCancel, NewAddress, Password, Warning, WrongPasswordAlert } from '../../components';
-import { DraggableModal } from '../../fullscreen/governance/components/DraggableModal';
 import useTranslation from '../../hooks/useTranslation';
 import { exportAccount } from '../../messaging';
+import { DraggableModal } from '../governance/components/DraggableModal';
+import SimpleModalTitle from './SimpleModalTitle';
 
 interface Props {
   address: string;
@@ -53,16 +53,11 @@ export default function ExportAccountModal ({ address, setDisplayPopup }: Props)
   return (
     <DraggableModal onClose={backToAccount} open>
       <>
-        <Grid alignItems='center' container justifyContent='space-between' pt='5px'>
-          <Grid item>
-            <Typography fontSize='22px' fontWeight={700}>
-              {t<string>('Export Account')}
-            </Typography>
-          </Grid>
-          <Grid item>
-            <CloseIcon onClick={backToAccount} sx={{ color: 'primary.main', cursor: 'pointer', stroke: theme.palette.primary.main, strokeWidth: 1.5 }} />
-          </Grid>
-        </Grid>
+        <SimpleModalTitle
+          onClose={backToAccount}
+          title={t('Export Account')}
+          vaadinIcon='download-alt'
+        />
         {isPasswordError &&
           <WrongPasswordAlert />
         }
@@ -82,7 +77,7 @@ export default function ExportAccountModal ({ address, setDisplayPopup }: Props)
         <Grid container item sx={{ '> div': { width: '87.5%' }, bottom: '75px', position: 'absolute' }}>
           <Password
             isError={isPasswordError}
-            label={t<string>('Password for this account')}
+            label={t('Password for this account')}
             onChange={onPassChange}
             onEnter={_onExportButtonClick}
           />
@@ -93,7 +88,7 @@ export default function ExportAccountModal ({ address, setDisplayPopup }: Props)
             _onClick={_onExportButtonClick}
             _onClickCancel={backToAccount}
             disabled={pass.length === 0 || !!isPasswordError}
-            text={t<string>('Export')}
+            text={t('Export')}
           />
         </Grid>
       </>

packages/extension-polkagate/src/popup/forgetAccount/ForgetAccountModal.tsx renamed to packages/extension-polkagate/src/fullscreen/partials/ForgetAccountModal.tsx

@@ -5,18 +5,18 @@
 
 import type { AccountJson } from '@polkadot/extension-base/background/types';
 
-import { Close as CloseIcon } from '@mui/icons-material';
-import { Grid, Typography, useTheme } from '@mui/material';
+import { Grid, useTheme } from '@mui/material';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 
 import { AccountsStore } from '@polkadot/extension-base/stores';
 import keyring from '@polkadot/ui-keyring';
 import { cryptoWaitReady } from '@polkadot/util-crypto';
 
 import { ActionContext, ButtonWithCancel, Checkbox2 as Checkbox, NewAddress, Password, Warning, WrongPasswordAlert } from '../../components';
-import { DraggableModal } from '../../fullscreen/governance/components/DraggableModal';
 import { useAlerts, useTranslation } from '../../hooks';
 import { forgetAccount, getAuthList, removeAuthorization, updateAuthorization } from '../../messaging';
+import { DraggableModal } from '../governance/components/DraggableModal';
+import SimpleModalTitle from './SimpleModalTitle';
 
 interface Props {
   account: AccountJson;
@@ -103,16 +103,11 @@ export default function ForgetAccountModal ({ account, setDisplayPopup }: Props)
   return (
     <DraggableModal onClose={backToAccount} open>
       <>
-        <Grid alignItems='center' container justifyContent='space-between' pt='5px'>
-          <Grid item>
-            <Typography fontSize='22px' fontWeight={700}>
-              {t('Forget Account')}
-            </Typography>
-          </Grid>
-          <Grid item>
-            <CloseIcon onClick={backToAccount} sx={{ color: 'primary.main', cursor: 'pointer', stroke: theme.palette.primary.main, strokeWidth: 1.5 }} />
-          </Grid>
-        </Grid>
+        <SimpleModalTitle
+          onClose={backToAccount}
+          title={t('Forget Account')}
+          vaadinIcon='file-remove'
+        />
         {isPasswordError &&
           <WrongPasswordAlert />
         }

packages/extension-polkagate/src/popup/rename/RenameModal.tsx renamed to packages/extension-polkagate/src/fullscreen/partials/RenameAccountModal.tsx

@@ -1,27 +1,25 @@
 // 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 { Close as CloseIcon } from '@mui/icons-material';
-import { Grid, Typography, useTheme } from '@mui/material';
+import { Grid } from '@mui/material';
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { ButtonWithCancel, NewAddress } from '../../components';
 import { useAccountName, useTranslation } from '../../hooks';
 import { editAccount } from '../../messaging';
 import { Name } from '../../partials';
-import { DraggableModal } from '../../fullscreen/governance/components/DraggableModal';
+import { DraggableModal } from '../governance/components/DraggableModal';
+import SimpleModalTitle from './SimpleModalTitle';
 
 interface Props {
   address: string;
   setDisplayPopup: React.Dispatch<React.SetStateAction<number | undefined>>;
 }
 
-export default function RenameModal({ address, setDisplayPopup }: Props): React.ReactElement {
+export default function RenameModal ({ address, setDisplayPopup }: Props): React.ReactElement {
   const { t } = useTranslation();
-  const theme = useTheme();
   const accountName = useAccountName(address);
 
   const [newName, setNewName] = useState<string | undefined>();
@@ -50,16 +48,11 @@ export default function RenameModal({ address, setDisplayPopup }: Props): React.
   return (
     <DraggableModal onClose={backToAccount} open>
       <>
-        <Grid alignItems='center' container justifyContent='space-between' pt='5px'>
-          <Grid item>
-            <Typography fontSize='22px' fontWeight={700}>
-              {t<string>('Rename Account')}
-            </Typography>
-          </Grid>
-          <Grid item>
-            <CloseIcon onClick={backToAccount} sx={{ color: 'primary.main', cursor: 'pointer', stroke: theme.palette.primary.main, strokeWidth: 1.5 }} />
-          </Grid>
-        </Grid>
+        <SimpleModalTitle
+          onClose={backToAccount}
+          title={t('Rename Account')}
+          vaadinIcon='edit'
+        />
         <NewAddress
           address={address}
           name={changedName}

packages/extension-polkagate/src/fullscreen/partials/SimpleModalTitle.tsx

@@ -0,0 +1,37 @@
+// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/* eslint-disable react/jsx-max-props-per-line */
+
+import { Close as CloseIcon } from '@mui/icons-material';
+import { Divider, Grid, IconButton, Typography, useTheme } from '@mui/material';
+import React from 'react';
+
+import { VaadinIcon } from '../../components';
+
+interface Props {
+  onClose: () => void;
+  title: string;
+  vaadinIcon: string;
+}
+
+export default function SimpleModalTitle ({ onClose, title, vaadinIcon }: Props): React.ReactElement {
+  const theme = useTheme();
+
+  return (
+    <Grid alignItems='center' container justifyContent='space-between' pt='5px'>
+      <Grid alignItems='center' container item justifyContent='flex-start' width='fit-content'>
+        <VaadinIcon icon={`vaadin:${vaadinIcon}`} style={{ color: `${theme.palette.text.primary}`, height: '22px', marginRight: '10px' }} />
+        <Typography display='contents' fontSize='22px' fontWeight={700}>
+          {title}
+        </Typography>
+      </Grid>
+      <Grid item>
+        <IconButton onClick={onClose}>
+          <CloseIcon sx={{ color: 'primary.main', cursor: 'pointer', stroke: theme.palette.primary.main, strokeWidth: 1.5 }} />
+        </IconButton>
+      </Grid>
+      <Divider sx={{ mt: '5px', width: '100%' }} />
+    </Grid>
+  );
+}