marni-WIP-284-added account meta to forget modal (#287)

* added account meta to forget modal

* added modal size (tiny) and styling to center account summary info

* removed article - not needed

* Bump dependencies

* FIXME around RxJs (with types) upgrade

* fix: Fixes #290. Toggles Address Add/Edit menu correctly (#292)

* fix: Fixes #290. Toggles Address Add/Edit menu correctly

* fix: Rename to hasNoAddresses

* fixed modal title and added blank line

packages/app-accounts/src/Editor.tsx

@@ -40,13 +40,15 @@ class Editor extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { isForgetOpen } = this.state;
+    const { isForgetOpen, current } = this.state;
+
     return (
       <div className='accounts--Editor'>
         <Forgetting
           isOpen={isForgetOpen}
           onClose={this.toggleForget}
           doForget={this.onForget}
+          currentAddress={current}
         />
         {this.renderData()}
         {this.renderButtons()}

packages/app-accounts/src/Forgetting.tsx

@@ -1,18 +1,23 @@
 // Copyright 2017-2018 @polkadot/app-accounts authors & contributors
 // This software may be modified and distributed under the terms
 // of the ISC license. See the LICENSE file for details.
+
+import { KeyringPair } from '@polkadot/util-keyring/types';
 import { I18nProps } from '@polkadot/ui-app/types';
 
 import React from 'react';
 
 import Button from '@polkadot/ui-app/Button';
 import Modal from '@polkadot/ui-app/Modal';
+import AddressSummary from '@polkadot/ui-app/AddressSummary';
+
 import translate from './translate';
 
 type Props = I18nProps & {
   isOpen: boolean,
   onClose: () => void,
-  doForget: () => void
+  doForget: () => void,
+  currentAddress: KeyringPair | null
 };
 
 class Forgetting extends React.PureComponent<Props> {
@@ -29,7 +34,7 @@ class Forgetting extends React.PureComponent<Props> {
 
     return (
       <Modal
-        className='staking--Nominating'
+        size='tiny'
         dimmer='inverted'
         open
         style={style}
@@ -57,7 +62,9 @@ class Forgetting extends React.PureComponent<Props> {
           <Button
             isPrimary
             onClick={doForget}
-            text='Delete'
+            text={t('forget.forget', {
+              defaultValue: 'Forget'
+            })}
           />
         </Button.Group>
       </Modal.Actions>
@@ -65,13 +72,24 @@ class Forgetting extends React.PureComponent<Props> {
   }
 
   renderContent () {
-    const { t } = this.props;
+    const { t, currentAddress } = this.props;
+
+    const address = currentAddress
+      ? currentAddress.address()
+      : undefined;
+
     return [
       <Modal.Header key='header'>
         {t('forget.header', {
-          defaultValue: 'Are you sure you want to delete this account?'
+          defaultValue: 'Confirm account removal'
         })}
-      </Modal.Header>
+      </Modal.Header>,
+      <Modal.Content className='forgetting--Account' key='content'>
+        <AddressSummary
+          className='ui--AddressSummary-base'
+          value={address || ''}
+        />
+      </Modal.Content>
     ];
   }
 }

packages/app-accounts/src/index.css

@@ -1,3 +1,7 @@
 /* Copyright 2017-2018 @polkadot/app-accounts authors & contributors
 /* This software may be modified and distributed under the terms
 /* of the ISC license. See the LICENSE file for details. */
+
+.forgetting--Account {
+  text-align: center;
+}