diff --git a/packages/extension-ui/src/Popup/Accounts/Account.tsx b/packages/extension-ui/src/Popup/Accounts/Account.tsx
index 689644c6..19122638 100644
--- a/packages/extension-ui/src/Popup/Accounts/Account.tsx
+++ b/packages/extension-ui/src/Popup/Accounts/Account.tsx
@@ -7,9 +7,9 @@ import React, { useCallback, useContext, useMemo, useState } from 'react';
import styled from 'styled-components';
import genesisOptions from '@polkadot/extension-chains/genesisHashes';
-import { ActionContext, Address, Checkbox, Dropdown, Link, MenuDivider } from '../../components';
+import { ActionContext, Address, Dropdown, Link, MenuDivider } from '../../components';
import useTranslation from '../../hooks/useTranslation';
-import { editAccount, showAccount, tieAccount } from '../../messaging';
+import { editAccount, tieAccount } from '../../messaging';
import { Name } from '../../partials';
interface Props extends AccountJson {
@@ -54,14 +54,6 @@ function Account ({ address, className, genesisHash, isExternal, isHidden, paren
[editedName, address, _toggleEdit, onAction]
);
- const _toggleVisibility = useCallback(
- (): void => {
- showAccount(address, isHidden || false)
- .catch(console.error);
- },
- [address, isHidden]
- );
-
const _actions = useMemo(() => (
<>
('Forget Account')}
-
- ('Visible (always inject)')}
- onClick={_toggleVisibility}
- />
-
>
- ), [_onChangeGenesis, _toggleEdit, _toggleVisibility, address, genesisHash, isExternal, isHidden, t]);
+ ), [_onChangeGenesis, _toggleEdit, address, genesisHash, isExternal, t]);
return (
diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx
index dd9a93fe..e52d0122 100644
--- a/packages/extension-ui/src/components/Address.tsx
+++ b/packages/extension-ui/src/components/Address.tsx
@@ -7,7 +7,7 @@ import { SettingsStruct } from '@polkadot/ui-settings/types';
import { ThemeProps } from '../types';
import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
-import { faCopy, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
+import { faCopy, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
@@ -23,6 +23,7 @@ import useTranslation from '../hooks/useTranslation';
import useToast from '../hooks/useToast';
import Identicon from './Identicon';
import Menu from './Menu';
+import { showAccount } from '../messaging';
import Svg from './Svg';
interface Props {
@@ -111,6 +112,13 @@ function Address ({ actions, address, children, className, genesisHash, isExtern
const theme = ((chain && chain.icon) || 'polkadot') as 'polkadot';
const _onClick = useCallback((): void => setShowActionsMenu(!showActionsMenu), [showActionsMenu]);
const _onCopy = useCallback((): void => show(t('Copied')), [show, t]);
+ const _toggleVisibility = useCallback(
+ (): void => {
+ address && showAccount(address, isHidden || false)
+ .catch(console.error);
+ },
+ [address, isHidden]
+ );
const displayedName = (
<>
@@ -190,15 +198,16 @@ function Address ({ actions, address, children, className, genesisHash, isExtern
icon={faCopy}
onClick={_onCopy}
size='sm'
+ title={t('copy address')}
/>
- {isHidden && (
-
- )}
+
{actions && (
@@ -268,11 +277,18 @@ export default styled(Address)(({ theme }: ThemeProps) => `
}
}
- .hiddenIcon {
+ .hiddenIcon, .visibleIcon {
position: absolute;
right: 2px;
top: -18px;
}
+
+ .hiddenIcon {
+ color: ${theme.errorColor};
+ &:hover {
+ color: ${theme.accountDotsIconColor};
+ }
+ }
}
.externalIcon {
diff --git a/packages/extension-ui/src/components/Menu.tsx b/packages/extension-ui/src/components/Menu.tsx
index b1d3ac83..e60c7169 100644
--- a/packages/extension-ui/src/components/Menu.tsx
+++ b/packages/extension-ui/src/components/Menu.tsx
@@ -28,7 +28,6 @@ export default styled(Menu)(({ theme }: ThemeProps) => `
border-radius: 4px;
border: 1px solid ${theme.boxBorderColor};
box-sizing: border-box;
- // box-shadow: 0 0 32px ${theme.boxShadow};
box-shadow: 0 0 10px ${theme.boxShadow};
margin-top: 90px;
padding: 16px 0;