From 3aa54a081c0ea46b29b7987c5eed408356c15bac Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
Date: Fri, 30 Oct 2020 21:18:07 -1000
Subject: [PATCH] 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>
---
 .../src/Popup/Accounts/Account.tsx            | 22 ++----------
 .../extension-ui/src/components/Address.tsx   | 34 ++++++++++++++-----
 packages/extension-ui/src/components/Menu.tsx |  1 -
 3 files changed, 28 insertions(+), 29 deletions(-)

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(() => (
     <>
       <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}>
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')}
               />
             </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 {
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;