Show a specific icon on external account (#484)

* icon to show external account

* revert renaming

* lint

* use find instead of some

* before the name

* Update packages/extension-ui/src/Popup/Forget.tsx

* Update packages/extension-ui/src/components/Address.tsx

packages/extension-ui/src/Popup/Accounts/Account.tsx

@@ -123,6 +123,7 @@ function Account ({ address, className, genesisHash, isExternal, isHidden, paren
         address={address}
         className='address'
         genesisHash={genesisHash}
+        isExternal={isExternal}
         isHidden={isHidden}
         name={editedName}
         parentName={parentName}

packages/extension-ui/src/Popup/Forget.tsx

@@ -5,7 +5,7 @@ import React, { useCallback, useContext } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
 import styled from 'styled-components';
 
-import { ActionContext, Address, Button, Warning, ActionBar, ActionText } from '../components';
+import { ActionContext, Address, ActionBar, ActionText, Button, Warning } from '../components';
 import useTranslation from '../hooks/useTranslation';
 import { forgetAccount } from '../messaging';
 import { Header } from '../partials';

packages/extension-ui/src/Popup/ImportQr.tsx

@@ -40,6 +40,7 @@ export default function ImportQr (): React.ReactElement {
           <div>
             <Address
               {...account}
+              isExternal={true}
               name={name}
             />
           </div>

packages/extension-ui/src/Popup/Signing/Request.tsx

@@ -152,6 +152,7 @@ export default function Request ({ account: { isExternal }, buttonText, isFirst,
           <Address
             address={json.address}
             genesisHash={json.genesisHash}
+            isExternal={isExternal}
           />
         </div>
         {isExternal
@@ -189,7 +190,10 @@ export default function Request ({ account: { isExternal }, buttonText, isFirst,
     return (
       <>
         <div>
-          <Address address={raw.address} />
+          <Address
+            address={raw.address}
+            isExternal={isExternal}
+          />
         </div>
         <Bytes
           bytes={raw.data}

packages/extension-ui/src/assets/arrowTopRight.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="14"
+   height="14"
+   viewBox="0 0 14 14"
+   fill="none"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="arrowTopRight.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1137"
+     inkscape:window-height="772"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="22.627417"
+     inkscape:cx="12.76945"
+     inkscape:cy="8.9508825"
+     inkscape:window-x="393"
+     inkscape:window-y="259"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg6" />
+  <path
+     d="M 12.654628,1.3598586 1.3442182,12.66615"
+     id="path2"
+     inkscape:connector-curvature="0"
+     style="stroke:#6c6c6c;stroke-width:2.67733049;stroke-linecap:round;stroke-linejoin:round" />
+  <path
+     d="M 1.2846487,1.363854 12.651896,1.3419767 12.673836,12.673441"
+     id="path4"
+     inkscape:connector-curvature="0"
+     style="stroke:#6c6c6c;stroke-width:2.67507029;stroke-linecap:round;stroke-linejoin:round" />
+</svg>

packages/extension-ui/src/components/Address.tsx

@@ -12,6 +12,7 @@ import styled from 'styled-components';
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
 
 import copyIcon from '../assets/copy.svg';
+import externalIcon from '../assets/arrowTopRight.svg';
 import hiddenIcon from '../assets/hidden.svg';
 import details from '../assets/details.svg';
 import parentArrow from '../assets/arrowParentLabel.svg';
@@ -30,6 +31,7 @@ interface Props {
   children?: React.ReactNode;
   className?: string;
   genesisHash?: string | null;
+  isExternal?: boolean | null;
   isHidden?: boolean;
   name?: React.ReactNode | null;
   parentName?: string | null;
@@ -71,7 +73,7 @@ function recodeAddress (address: string, accounts: AccountWithChildren[], chain:
 
 const ACCOUNTS_SCREEN_HEIGHT = 550;
 
-function Address ({ actions, address, children, className, genesisHash, isHidden, name, parentName, suri, toggleActions }: Props): React.ReactElement<Props> {
+function Address ({ actions, address, children, className, genesisHash, isExternal, isHidden, name, parentName, suri, toggleActions }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { accounts } = useContext(AccountContext);
   const settings = useContext(SettingsContext);
@@ -110,7 +112,18 @@ function Address ({ actions, address, children, className, genesisHash, isHidden
   const _onClick = useCallback((): void => setShowActionsMenu(!showActionsMenu), [showActionsMenu]);
   const _onCopy = useCallback((): void => show(t('Copied')), [show, t]);
 
-  const displayedName = name || (account && account.name) || t('<unknown>');
+  const displayedName = (
+    <>
+      {(account?.isExternal || isExternal) && (
+        <Svg
+          className='externalIcon'
+          src={externalIcon}
+          title={t('external account')}
+        />
+      )}
+      {name || account?.name || t('<unknown>')}
+    </>
+  );
 
   return (
     <div className={className}>
@@ -118,6 +131,7 @@ function Address ({ actions, address, children, className, genesisHash, isHidden
         <Identicon
           className='identityIcon'
           iconTheme={theme}
+          isExternal={isExternal}
           onCopy={_onCopy}
           prefix={prefix}
           value={formatted || address}
@@ -310,6 +324,13 @@ export default styled(Address)(({ theme }: ThemeProps) => `
     }
   }
 
+  .externalIcon {
+    height: 10px;
+    width: 10px;
+    margin-right: 0.5rem;
+    background: ${theme.labelColor}
+  }
+
   .identityIcon {
     margin-left: 15px;
     margin-right: 10px;

packages/extension-ui/src/components/Identicon.tsx

@@ -8,11 +8,12 @@ import styled from 'styled-components';
 import Icon from '@polkadot/react-identicon';
 
 interface Props {
-  iconTheme?: 'beachball' | 'empty' | 'jdenticon' | 'polkadot' | 'substrate';
   className?: string;
+  iconTheme?: 'beachball' | 'empty' | 'jdenticon' | 'polkadot' | 'substrate';
+  isExternal?: boolean | null;
+  onCopy?: () => void;
   prefix?: number;
   value?: string | null;
-  onCopy?: () => void;
 }
 
 function Identicon ({ className, iconTheme, onCopy, prefix, value }: Props): React.ReactElement<Props> {