Ability to set account visibility from main screen (#523)

* set in/visibility on main screen

* change title

Co-authored-by: Github Actions <action@github.com>

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(() => (
     <>
       <Link
@@ -96,14 +88,6 @@ function Account ({ address, className, genesisHash, isExternal, isHidden, paren
         {t<string>('Forget Account')}
       </Link>
       <MenuDivider />
-      <div className='menuItem'>
-        <Checkbox
-          checked={!isHidden}
-          className='inputItem'
-          label={t<string>('Visible (always inject)')}
-          onClick={_toggleVisibility}
-        />
-      </div>
       <div className='menuItem'>
         <Dropdown
           className='inputItem'
@@ -114,7 +98,7 @@ function Account ({ address, className, genesisHash, isExternal, isHidden, paren
         />
       </div>
     </>
-  ), [_onChangeGenesis, _toggleEdit, _toggleVisibility, address, genesisHash, isExternal, isHidden, t]);
+  ), [_onChangeGenesis, _toggleEdit, address, genesisHash, isExternal, t]);
 
   return (
     <div className={className}>

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')}
               />
             </CopyToClipboard>
-            {isHidden && (
-              <FontAwesomeIcon
-                className='hiddenIcon'
-                icon={faEyeSlash}
-                size='sm'
-              />
-            )}
+            <FontAwesomeIcon
+              className={ isHidden ? 'hiddenIcon' : 'visibleIcon'}
+              icon={isHidden ? faEyeSlash : faEye}
+              onClick={_toggleVisibility}
+              size='sm'
+              title={t('account visibility')}
+            />
           </div>
         </div>
         {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 {

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;