Swap AddressSummary for AddressRow (#1212)

* Swap AddressSummary for AddressRow * Update name/address on change * Move AddressRow to right
2019-05-27 12:40:22 +02:00 · 2019-05-27 12:40:22 +02:00 · c41321e30a
commit c41321e30a
parent 4cd8ab2e94
8 changed files with 65 additions and 47 deletions
--- 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>
    );
  }
--- 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>
    );
  }
--- 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>
    );
  }
--- 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>
    );
  }
--- 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>
    );
--- 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;
--- 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) {
--- 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 {