From c41321e30a5877418ddf4fb2fb6423a57f65f1f5 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Mon, 27 May 2019 12:40:22 +0200
Subject: [PATCH] Swap AddressSummary for AddressRow (#1212)

* Swap AddressSummary for AddressRow

* Update name/address on change

* Move AddressRow to right
---
 packages/app-accounts/src/Creator.tsx     | 14 +++++------
 packages/app-accounts/src/Restore.tsx     | 27 ++++++++++-----------
 packages/app-address-book/src/Creator.tsx | 16 ++++++-------
 packages/app-address-book/src/Editor.tsx  | 13 +++++-----
 packages/app-transfer/src/Transfer.tsx    |  7 ++++--
 packages/ui-app/src/AddressInfo.tsx       |  1 -
 packages/ui-app/src/AddressSummary.tsx    | 29 ++++++++++++++++-------
 packages/ui-app/src/styles/components.css |  5 ++++
 8 files changed, 65 insertions(+), 47 deletions(-)

diff --git a/packages/app-accounts/src/Creator.tsx b/packages/app-accounts/src/Creator.tsx
index a31013b7cc..e29d2687d7 100644
--- a/packages/app-accounts/src/Creator.tsx
+++ b/packages/app-accounts/src/Creator.tsx
@@ -12,7 +12,7 @@ import FileSaver from 'file-saver';
 import React from 'react';
 import { DEV_PHRASE } from '@polkadot/keyring/defaults';
 import { withApi, withMulti } from '@polkadot/ui-api';
-import { AddressSummary, AddressRow, Button, Dropdown, Input, InputTags, Labelled, Modal, Password, TxComponent } from '@polkadot/ui-app';
+import { AddressRow, Button, Dropdown, Input, InputTags, Labelled, Modal, Password, TxComponent } from '@polkadot/ui-app';
 import { InputAddress } from '@polkadot/ui-app/InputAddress';
 import keyring from '@polkadot/ui-keyring';
 import uiSettings from '@polkadot/ui-settings';
@@ -113,23 +113,23 @@ class Creator extends TxComponent<Props, State> {
   }
 
   render () {
-    const { address, isSeedValid } = this.state;
+    const { address, name, isSeedValid } = this.state;
 
     return (
       <div className='accounts--Creator'>
+        {this.renderModal()}
         <div className='ui--grid'>
-          <AddressSummary
+          {this.renderInput()}
+          <AddressRow
             className='shrink'
+            defaultName={name}
             value={
               isSeedValid
                 ? address
                 : ''
             }
-            withBonded
           />
-          {this.renderInput()}
         </div>
-        {this.renderButtons()}
       </div>
     );
   }
@@ -255,7 +255,7 @@ class Creator extends TxComponent<Props, State> {
             }
           </div>
         </details>
-        {this.renderModal()}
+        {this.renderButtons()}
       </div>
     );
   }
diff --git a/packages/app-accounts/src/Restore.tsx b/packages/app-accounts/src/Restore.tsx
index 7c0f1dd103..aefaca7a3b 100644
--- a/packages/app-accounts/src/Restore.tsx
+++ b/packages/app-accounts/src/Restore.tsx
@@ -8,7 +8,7 @@ import { ActionStatus } from '@polkadot/ui-app/Status/types';
 import { ComponentProps } from './types';
 
 import React from 'react';
-import { AddressSummary, Button, InputFile, Password, TxComponent } from '@polkadot/ui-app';
+import { AddressRow, Button, InputFile, Password, TxComponent } from '@polkadot/ui-app';
 import { InputAddress } from '@polkadot/ui-app/InputAddress';
 import { isHex, isObject, u8aToString } from '@polkadot/util';
 import keyring from '@polkadot/ui-keyring';
@@ -35,13 +35,13 @@ class Restore extends TxComponent<Props, State> {
   };
 
   render () {
-    const { t } = this.props;
-    const { address, isFileValid, isPassValid } = this.state;
+    const { address, isFileValid } = this.state;
 
     return (
       <div className='accounts--Restore'>
         <div className='ui--grid'>
-          <AddressSummary
+          {this.renderInput()}
+          <AddressRow
             className='shrink'
             value={
               isFileValid && address
@@ -49,17 +49,7 @@ class Restore extends TxComponent<Props, State> {
                 : null
               }
           />
-          {this.renderInput()}
         </div>
-        <Button.Group>
-        <Button
-          isDisabled={!isFileValid || !isPassValid}
-          isPrimary
-          onClick={this.onSave}
-          label={t('Restore')}
-          ref={this.button}
-        />
-      </Button.Group>
       </div>
     );
   }
@@ -94,6 +84,15 @@ class Restore extends TxComponent<Props, State> {
             value={password}
           />
         </div>
+        <Button.Group>
+          <Button
+            isDisabled={!isFileValid || !isPassValid}
+            isPrimary
+            onClick={this.onSave}
+            label={t('Restore')}
+            ref={this.button}
+          />
+      </Button.Group>
       </div>
     );
   }
diff --git a/packages/app-address-book/src/Creator.tsx b/packages/app-address-book/src/Creator.tsx
index f19d4c8a63..f078ae6301 100644
--- a/packages/app-address-book/src/Creator.tsx
+++ b/packages/app-address-book/src/Creator.tsx
@@ -7,7 +7,7 @@ import { ComponentProps } from './types';
 
 import React from 'react';
 
-import { AddressSummary, Button, Input, InputTags, TxComponent } from '@polkadot/ui-app';
+import { AddressRow, Button, Input, InputTags, TxComponent } from '@polkadot/ui-app';
 import { ActionStatus } from '@polkadot/ui-app/Status/types';
 import { InputAddress } from '@polkadot/ui-app/InputAddress';
 import keyring from '@polkadot/ui-keyring';
@@ -36,19 +36,18 @@ class Creator extends TxComponent<Props, State> {
   }
 
   render () {
-    const { address } = this.state;
+    const { address, name } = this.state;
 
     return (
       <div className='address-book--Creator'>
         <div className='ui--grid'>
-          <AddressSummary
-            className='shrink'
-            value={address}
-            withBonded
-          />
           {this.renderInput()}
+          <AddressRow
+            className='shrink'
+            defaultName={name}
+            value={address}
+          />
         </div>
-        {this.renderButtons()}
       </div>
     );
   }
@@ -112,6 +111,7 @@ class Creator extends TxComponent<Props, State> {
             value={tags}
           />
         </div>
+        {this.renderButtons()}
       </div>
     );
   }
diff --git a/packages/app-address-book/src/Editor.tsx b/packages/app-address-book/src/Editor.tsx
index bdeefb4588..7f3e955279 100644
--- a/packages/app-address-book/src/Editor.tsx
+++ b/packages/app-address-book/src/Editor.tsx
@@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import { ComponentProps } from './types';
 
 import React from 'react';
-import { AddressSummary, Button, Input, InputAddress, InputTags, TxComponent } from '@polkadot/ui-app';
+import { AddressRow, Button, Input, InputAddress, InputTags, TxComponent } from '@polkadot/ui-app';
 import { ActionStatus } from '@polkadot/ui-app/Status/types';
 import keyring from '@polkadot/ui-keyring';
 
@@ -44,7 +44,6 @@ class Editor extends TxComponent<Props, State> {
           currentAddress={current}
         />
         {this.renderData()}
-        {this.renderButtons()}
       </div>
     );
   }
@@ -92,11 +91,6 @@ class Editor extends TxComponent<Props, State> {
 
     return (
       <div className='ui--grid'>
-        <AddressSummary
-          className='shrink'
-          value={address || ''}
-          withBonded
-        />
         <div className='grow'>
           <div className='ui--row'>
             <InputAddress
@@ -128,7 +122,12 @@ class Editor extends TxComponent<Props, State> {
               value={tags}
             />
           </div>
+          {this.renderButtons()}
         </div>
+        <AddressRow
+          className='shrink'
+          value={address || ''}
+        />
       </div>
     );
   }
diff --git a/packages/app-transfer/src/Transfer.tsx b/packages/app-transfer/src/Transfer.tsx
index 6e391623c2..055066e30f 100644
--- a/packages/app-transfer/src/Transfer.tsx
+++ b/packages/app-transfer/src/Transfer.tsx
@@ -11,7 +11,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 import { Index } from '@polkadot/types';
-import { AddressSummary, Button, InputAddress, InputBalance, TxButton, TxComponent } from '@polkadot/ui-app';
+import { AddressRow, Button, InputAddress, InputBalance, TxButton, TxComponent } from '@polkadot/ui-app';
 import { withApi, withCalls, withMulti } from '@polkadot/ui-api';
 import keyring from '@polkadot/ui-keyring';
 import Checks, { calcSignatureLength } from '@polkadot/ui-signer/Checks';
@@ -38,6 +38,7 @@ const ZERO = new BN(0);
 const Wrapper = styled.div`
   .transfer--Transfer-address {
     flex: 0 1;
+    padding: 1.5rem 0;
 
     .ui--AddressSummary {
       text-align: center;
@@ -47,6 +48,7 @@ const Wrapper = styled.div`
   .transfer--Transfer-data {
     flex: 1 1;
     min-width: 0;
+    padding: 0 1rem;
   }
 
   .transfer--Transfer-info {
@@ -147,8 +149,9 @@ class Transfer extends TxComponent<Props, State> {
 
     return (
       <div className={`transfer--Transfer-address ui--media-${media}`}>
-        <AddressSummary
+        <AddressRow
           value={accountId}
+          withAvailable
         />
       </div>
     );
diff --git a/packages/ui-app/src/AddressInfo.tsx b/packages/ui-app/src/AddressInfo.tsx
index ac5501a160..0e732d2c4f 100644
--- a/packages/ui-app/src/AddressInfo.tsx
+++ b/packages/ui-app/src/AddressInfo.tsx
@@ -82,7 +82,6 @@ export default translate(styled(AddressInfo)`
   display: flex;
   flex: 1;
   justify-content: center;
-  padding-top: 1rem;
 
   .column {
     flex: 1;
diff --git a/packages/ui-app/src/AddressSummary.tsx b/packages/ui-app/src/AddressSummary.tsx
index faaebaf57e..bee2671866 100644
--- a/packages/ui-app/src/AddressSummary.tsx
+++ b/packages/ui-app/src/AddressSummary.tsx
@@ -32,7 +32,6 @@ export type Props = I18nProps & {
   defaultName?: string,
   extraInfo?: React.ReactNode,
   identIconSize?: number,
-  isChildrenAbs?: boolean,
   isEditable?: boolean,
   isInline?: boolean,
   isShort?: boolean,
@@ -68,6 +67,10 @@ class AddressSummary extends React.PureComponent<Props, State> {
     this.state = this.createState();
   }
 
+  static defaultProps = {
+    defaultName: '<unknown>'
+  };
+
   static getDerivedStateFromProps ({ accounts_idAndIndex = [], defaultName, value }: Props, prevState: State): State | null {
     const [_accountId] = accounts_idAndIndex;
     const accountId = _accountId || value;
@@ -76,12 +79,22 @@ class AddressSummary extends React.PureComponent<Props, State> {
       : DEFAULT_ADDR;
     const name = getAddrName(address, false, defaultName) || '';
     const tags = getAddrTags(address);
+    const state = { tags } as State;
+    let hasChanged = false;
 
-    if (address === prevState.address) {
-      return null;
+    if (address !== prevState.address) {
+      state.address = address;
+      hasChanged = true;
     }
 
-    return { address, name, tags } as State;
+    if (name !== prevState.name) {
+      state.name = name;
+      hasChanged = true;
+    }
+
+    return hasChanged
+      ? state
+      : null;
   }
 
   render () {
@@ -237,7 +250,7 @@ class AddressSummary extends React.PureComponent<Props, State> {
   }
 
   protected renderBalance () {
-    const { balance, t, withBalance = true } = this.props;
+    const { balance, t, withBalance } = this.props;
     const { address } = this.state;
 
     if (!withBalance || !address) {
@@ -273,14 +286,14 @@ class AddressSummary extends React.PureComponent<Props, State> {
   }
 
   protected renderChildren () {
-    const { children, isChildrenAbs } = this.props;
+    const { children } = this.props;
 
     if (!children || (Array.isArray(children) && children.length === 0)) {
       return null;
     }
 
     return (
-      <div className={`ui--AddressSummary-children ${isChildrenAbs ? 'abs' : ''}`}>
+      <div className='ui--AddressSummary-children'>
         {children}
       </div>
     );
@@ -322,7 +335,7 @@ class AddressSummary extends React.PureComponent<Props, State> {
   }
 
   protected renderNonce () {
-    const { t, withNonce = true } = this.props;
+    const { t, withNonce } = this.props;
     const { address } = this.state;
 
     if (!withNonce || !address) {
diff --git a/packages/ui-app/src/styles/components.css b/packages/ui-app/src/styles/components.css
index 72a0bda1a3..0d1e3d45ea 100644
--- a/packages/ui-app/src/styles/components.css
+++ b/packages/ui-app/src/styles/components.css
@@ -188,6 +188,10 @@ button.ui.icon.iconButton {
   vertical-align: top;
 }
 
+.grow+.ui--AddressRow {
+  padding: 1rem 0 0 1rem;
+}
+
 .ui--AddressRow {
   position: relative;
 
@@ -201,6 +205,7 @@ button.ui.icon.iconButton {
 
   .ui--AddressSummary-children {
     display: block;
+    padding-top: 1rem;
   }
 
   .ui--AddressRow-details {