Allow accounts to be hidden, i.e. not injected (polkadot-js#354)

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Add the ability to import JSON keystore files (Thanks to https://github.com/shawntabrizi)
 - updated to derivation documentation (Thanks to https://github.com/EthWorks)
+- Allow accounts to be hidden, i.e. not injected (per account setting)
 - Adjust allowed mnemonic seed strengths, 12, 15, 18, 21 & 24 all allowed
 - Remove duplication with Default/Substrate prefixes in dropdown (equivalent, only generic displayed)
 - Display child accounts when no parent has been found (orphans)

packages/extension-base/src/background/handlers/Extension.ts

@@ -4,7 +4,7 @@
 
 import { MetadataDef } from '@polkadot/extension-inject/types';
 import { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-import { AccountJson, AuthorizeRequest, MessageTypes, MetadataRequest, RequestAccountCreateExternal, RequestAccountCreateSuri, RequestAccountEdit, RequestAccountExport, RequestAccountValidate, RequestAuthorizeApprove, RequestAuthorizeReject, RequestDeriveCreate, ResponseDeriveValidate, RequestMetadataApprove, RequestMetadataReject, RequestSigningApprovePassword, RequestSigningApproveSignature, RequestSigningCancel, RequestSeedCreate, RequestTypes, ResponseAccountExport, RequestAccountForget, ResponseSeedCreate, RequestSeedValidate, RequestDeriveValidate, ResponseSeedValidate, ResponseType, SigningRequest, RequestJsonRestore, ResponseJsonRestore } from '../types';
+import { AccountJson, AuthorizeRequest, MessageTypes, MetadataRequest, RequestAccountCreateExternal, RequestAccountCreateSuri, RequestAccountEdit, RequestAccountExport, RequestAccountShow, RequestAccountValidate, RequestAuthorizeApprove, RequestAuthorizeReject, RequestDeriveCreate, ResponseDeriveValidate, RequestMetadataApprove, RequestMetadataReject, RequestSigningApprovePassword, RequestSigningApproveSignature, RequestSigningCancel, RequestSeedCreate, RequestTypes, ResponseAccountExport, RequestAccountForget, ResponseSeedCreate, RequestSeedValidate, RequestDeriveValidate, ResponseSeedValidate, ResponseType, SigningRequest, RequestJsonRestore, ResponseJsonRestore } from '../types';
 
 import chrome from '@polkadot/extension-inject/chrome';
 import keyring from '@polkadot/ui-keyring';
@@ -63,6 +63,22 @@ export default class Extension {
     return { exportedJson: JSON.stringify(keyring.backupAccount(keyring.getPair(address), password)) };
   }
 
+  private accountsForget ({ address }: RequestAccountForget): boolean {
+    keyring.forgetAccount(address);
+
+    return true;
+  }
+
+  private accountsShow ({ address, isShowing }: RequestAccountShow): boolean {
+    const pair = keyring.getPair(address);
+
+    assert(pair, 'Unable to find pair');
+
+    keyring.saveAccountMeta(pair, { ...pair.meta, isHidden: !isShowing });
+
+    return true;
+  }
+
   private accountsValidate ({ address, password }: RequestAccountValidate): boolean {
     try {
       keyring.backupAccount(keyring.getPair(address), password);
@@ -73,12 +89,6 @@ export default class Extension {
     }
   }
 
-  private accountsForget ({ address }: RequestAccountForget): boolean {
-    keyring.forgetAccount(address);
-
-    return true;
-  }
-
   // FIXME This looks very much like what we have in Tabs
   private accountsSubscribe (id: string, port: chrome.runtime.Port): boolean {
     const cb = createSubscription<'pri(accounts.subscribe)'>(id, port);
@@ -381,6 +391,9 @@ export default class Extension {
       case 'pri(accounts.forget)':
         return this.accountsForget(request as RequestAccountForget);
 
+      case 'pri(accounts.show)':
+        return this.accountsShow(request as RequestAccountShow);
+
       case 'pri(accounts.validate)':
         return this.accountsValidate(request as RequestAccountValidate);
 

packages/extension-base/src/background/handlers/Tabs.ts

@@ -19,9 +19,12 @@ import State from './State';
 import { createSubscription, unsubscribe } from './subscriptions';
 
 function transformAccounts (accounts: SubjectInfo): InjectedAccount[] {
-  return Object.values(accounts).map(({ json: { address, meta: { genesisHash, name } } }): InjectedAccount => ({
-    address, genesisHash, name
-  }));
+  return Object
+    .values(accounts)
+    .filter(({ json: { meta: { isHidden } } }) => !isHidden)
+    .map(({ json: { address, meta: { genesisHash, name } } }): InjectedAccount => ({
+      address, genesisHash, name
+    }));
 }
 
 export default class Tabs {

packages/extension-base/src/background/types.ts

@@ -27,6 +27,7 @@ export interface AccountJson extends KeyringPair$Meta {
   address: string;
   genesisHash?: string | null;
   isExternal?: boolean;
+  isHidden?: boolean;
   name?: string;
   parentAddress?: string;
   suri?: string;
@@ -70,8 +71,9 @@ export interface RequestSignatures {
   'pri(accounts.edit)': [RequestAccountEdit, boolean];
   'pri(accounts.export)': [RequestAccountExport, ResponseAccountExport];
   'pri(accounts.forget)': [RequestAccountForget, boolean];
-  'pri(accounts.validate)': [RequestAccountValidate, boolean];
+  'pri(accounts.show)': [RequestAccountShow, boolean];
   'pri(accounts.subscribe)': [RequestAccountSubscribe, boolean, AccountJson[]];
+  'pri(accounts.validate)': [RequestAccountValidate, boolean];
   'pri(authorize.approve)': [RequestAuthorizeApprove, boolean];
   'pri(authorize.reject)': [RequestAuthorizeReject, boolean];
   'pri(authorize.requests)': [RequestAuthorizeSubscribe, boolean, AuthorizeRequest[]];
@@ -173,6 +175,11 @@ export interface RequestAccountForget {
   address: string;
 }
 
+export interface RequestAccountShow {
+  address: string;
+  isShowing: boolean;
+}
+
 export interface RequestAccountValidate {
   address: string;
   password: string;

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

@@ -8,30 +8,44 @@ import { ThemeProps } from '../../types';
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
-import { ActionContext, Address, Link } from '../../components';
-import { editAccount } from '../../messaging';
+import { ActionContext, Address, Checkbox, Link } from '../../components';
+import { editAccount, showAccount } from '../../messaging';
 import { Name } from '../../partials';
 
 interface Props extends AccountJson {
   className?: string;
   parentName?: string;
 }
 
-function Account ({ address, className, isExternal, parentName, suri }: Props): React.ReactElement<Props> {
+function Account ({ address, className, isExternal, isHidden, parentName, suri }: Props): React.ReactElement<Props> {
   const onAction = useContext(ActionContext);
   const [isEditing, setEditing] = useState(false);
   const [editedName, setName] = useState<string | null>(null);
 
-  const _toggleEdit = useCallback((): void => setEditing(!isEditing), [isEditing]);
-  const _saveChanges = useCallback((): void => {
-    if (editedName && editedName !== name) {
-      editAccount(address, editedName)
-        .then(() => onAction())
-        .catch(console.error);
-    }
+  const _toggleEdit = useCallback(
+    (): void => setEditing(!isEditing),
+    [isEditing]
+  );
 
-    _toggleEdit();
-  }, [editedName, address, _toggleEdit, onAction]);
+  const _saveChanges = useCallback(
+    (): void => {
+      if (editedName && editedName !== name) {
+        editAccount(address, editedName)
+          .then(() => onAction())
+          .catch(console.error);
+      }
+
+      _toggleEdit();
+    },
+    [editedName, address, _toggleEdit, onAction]
+  );
+  const _toggleVisibility = useCallback(
+    (): void => {
+      showAccount(address, isHidden || false)
+        .catch(console.error);
+    },
+    [address, isHidden]
+  );
 
   const _actions = useMemo(() => (
     <>
@@ -66,8 +80,15 @@ function Account ({ address, className, isExternal, parentName, suri }: Props):
       >
         Forget Account
       </Link>
+      <div className='divider' />
+      <Checkbox
+        checked={!isHidden}
+        className='menuItem'
+        label='Visible (always inject)'
+        onClick={_toggleVisibility}
+      />
     </>
-  ), [_toggleEdit, address, isExternal]);
+  ), [_toggleEdit, _toggleVisibility, address, isExternal, isHidden]);
 
   return (
     <div className={className}>
@@ -119,6 +140,7 @@ export default styled(Account)(({ theme }: ThemeProps) => `
     font-weight: 600;
     font-size: 15px;
     line-height: 20px;
+    margin: 0;
     padding: 4px 16px;
   }
 `);

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

@@ -4,25 +4,38 @@
 
 import { ThemeProps } from '../types';
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import styled from 'styled-components';
+
 import Checkmark from '../assets/checkmark.svg';
 
 interface Props {
   checked: boolean;
-  onChange: (checked: boolean) => void;
+  onChange?: (checked: boolean) => void;
+  onClick?: () => void;
   label: string;
   className?: string;
 }
 
-function Checkbox ({ checked, className, label, onChange }: Props): React.ReactElement<Props> {
+function Checkbox ({ checked, className, label, onChange, onClick }: Props): React.ReactElement<Props> {
+  const _onChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => onChange && onChange(event.target.checked),
+    [onChange]
+  );
+
+  const _onClick = useCallback(
+    () => onClick && onClick(),
+    [onClick]
+  );
+
   return (
     <div className={className}>
       <label>
         {label}
         <input
           checked={checked}
-          onChange={((event): void => onChange(event.target.checked))}
+          onChange={_onChange}
+          onClick={_onClick}
           type='checkbox'
         />
         <span />

packages/extension-ui/src/messaging.ts

@@ -67,6 +67,10 @@ export async function editAccount (address: string, name: string): Promise<boole
   return sendMessage('pri(accounts.edit)', { address, name });
 }
 
+export async function showAccount (address: string, isShowing: boolean): Promise<boolean> {
+  return sendMessage('pri(accounts.show)', { address, isShowing });
+}
+
 export async function exportAccount (address: string, password: string): Promise<{ exportedJson: string }> {
   return sendMessage('pri(accounts.export)', { address, password });
 }