Add AddressRow component (#208)

packages/ui-app/src/AddressMini.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 import IdentityIcon from '@polkadot/ui-react/IdentityIcon';
 
 import classes from './util/classes';
+import toShortAddress from './util/toShortAddress';
 import translate from './translate';
 
 type Props = BareProps & {
@@ -23,18 +24,18 @@ class AddressMini extends React.PureComponent<Props> {
       return null;
     }
 
-    const shortValue = `${value.slice(0, 7)}…${value.slice(-7)}`;
+    const shortValue = toShortAddress(value);
 
     return (
       <div
-        className={classes('staking--Account-nominating', className)}
+        className={classes('ui--AddressMini', className)}
         style={style}
       >
         <IdentityIcon
           size={24}
           value={value}
         />
-        {isShort ? shortValue : value}
+        <div>{isShort ? shortValue : value}</div>
       </div>
     );
   }

packages/ui-app/src/AddressRow.tsx

@@ -0,0 +1,40 @@
+// Copyright 2017-2018 @polkadot/ui-app authors & contributors
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+
+import React from 'react';
+
+import IdentityIcon from '@polkadot/ui-react/IdentityIcon';
+
+import classes from './util/classes';
+import { AddressSummary } from './AddressSummary';
+import translate from './translate';
+
+class AddressRow extends AddressSummary {
+  render () {
+    const { className, style } = this.props;
+    const { address, isValid } = this.state;
+
+    return (
+      <div
+        className={classes('ui--AddressRow', !isValid && 'invalid', className)}
+        style={style}
+      >
+        <div className='ui--AddressRow-base'>
+          <IdentityIcon
+            className='ui--AddressRow-icon'
+            size={96}
+            value={address}
+          />
+          <div className='ui--AddressRow-details'>
+            {this.renderAddress()}
+            {this.renderBalance()}
+          </div>
+        </div>
+        {this.renderChildren()}
+      </div>
+    );
+  }
+}
+
+export default translate(AddressRow);

packages/ui-app/src/AddressSummary.tsx

@@ -13,10 +13,11 @@ import addressDecode from '@polkadot/util-keyring/address/decode';
 import addressEncode from '@polkadot/util-keyring/address/encode';
 
 import classes from './util/classes';
+import toShortAddress from './util/toShortAddress';
 import CopyButton from './CopyButton';
 import translate from './translate';
 
-type Props = I18nProps & {
+export type Props = I18nProps & {
   children?: React.ReactNode,
   name?: string,
   value: string,
@@ -24,7 +25,7 @@ type Props = I18nProps & {
   withNonce?: boolean
 };
 
-type State = {
+export type State = {
   address: string,
   isValid: boolean,
   publicKey: Uint8Array | null,
@@ -32,7 +33,7 @@ type State = {
 };
 
 const DEFAULT_ADDR = '5'.padEnd(16, 'x');
-const DEFAULT_SHORT = `${DEFAULT_ADDR.slice(0, 7)}…${DEFAULT_ADDR.slice(-7)}`;
+const DEFAULT_SHORT = toShortAddress(DEFAULT_ADDR);
 
 class AddressSummary extends React.PureComponent<Props, State> {
   state: State = {} as State;
@@ -41,7 +42,7 @@ class AddressSummary extends React.PureComponent<Props, State> {
     try {
       publicKey = addressDecode(value);
       address = addressEncode(publicKey);
-      shortValue = `${address.slice(0, 7)}…${address.slice(-7)}`;
+      shortValue = toShortAddress(address);
     } catch (error) {
       publicKey = null;
     }
@@ -57,8 +58,8 @@ class AddressSummary extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { children, className, name, style } = this.props;
-    const { address, isValid, shortValue } = this.state;
+    const { className, style } = this.props;
+    const { address, isValid } = this.state;
 
     return (
       <div
@@ -71,25 +72,32 @@ class AddressSummary extends React.PureComponent<Props, State> {
             size={96}
             value={address}
           />
-          <div className='ui--AddressSummary-data'>
-            <div className='ui--AddressSummary-name'>
-              {name}
-            </div>
-            <div className='ui--AddressSummary-address'>
-              {shortValue}
-            </div>
-            <CopyButton value={address} />
-          </div>
+          {this.renderAddress()}
           {this.renderBalance()}
         </div>
-        <div className='ui--AddressSummary-children'>
-          {children}
-        </div>
+        {this.renderChildren()}
       </div>
     );
   }
 
-  renderBalance () {
+  protected renderAddress () {
+    const { name } = this.props;
+    const { address, shortValue } = this.state;
+
+    return (
+      <div className='ui--AddressSummary-data'>
+        <div className='ui--AddressSummary-name'>
+          {name}
+        </div>
+        <div className='ui--AddressSummary-address'>
+          {shortValue}
+        </div>
+        <CopyButton value={address} />
+      </div>
+    );
+  }
+
+  protected renderBalance () {
     const { isValid, publicKey } = this.state;
 
     if (!isValid) {
@@ -126,6 +134,26 @@ class AddressSummary extends React.PureComponent<Props, State> {
         : null
     ];
   }
+
+  protected renderChildren () {
+    const { children } = this.props;
+
+    if (!children) {
+      return null;
+    }
+
+    return (
+      <div className='ui--AddressSummary-children'>
+        {children}
+      </div>
+    );
+  }
 }
 
+export {
+  DEFAULT_ADDR,
+  DEFAULT_SHORT,
+  AddressSummary
+};
+
 export default translate(AddressSummary);

packages/ui-app/src/styles/components.css

@@ -31,6 +31,34 @@
   border-radius: .28571429rem !important;
 }
 
+.ui--AddressMini {
+  display: inline-block;
+  padding: 0.25rem;
+}
+
+.ui--AddressMini > div {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.ui--AddressMini > .ui--IdentityIcon {
+  margin-left: 1rem;
+  margin-right: 0.5rem;
+}
+
+.ui--AddressRow {
+  display: flex;
+  width: 100%;
+}
+
+.ui--AddressRow-base {
+  display: flex;
+}
+
+.ui--AddressRow-icon {
+  margin-right: 1em;
+}
+
 .ui--AddressSummary {
   padding: 0 2em;
   text-align: left;
@@ -72,6 +100,7 @@
 
 .ui--AddressSummary-data {
   padding: 0.5em 0;
+  white-space: nowrap;
 }
 
 .ui--AddressSummary-data * {

packages/ui-app/src/util/toShortAddress.ts

@@ -0,0 +1,7 @@
+// Copyright 2017-2018 @polkadot/ui-app authors & contributors
+// This software may be modified and distributed under the terms
+// of the ISC license. See the LICENSE file for details.
+
+export default function toShortAddress (address: string): string {
+  return `${address.slice(0, 7)}…${address.slice(-7)}`;
+}