Add AddressCard (#1269)

* Add AddressCard

* Simplify AddressCard rendering

packages/app-accounts/src/Account.tsx

@@ -6,7 +6,7 @@ import { ActionStatus } from '@polkadot/ui-app/Status/types';
 import { I18nProps } from '@polkadot/ui-app/types';
 
 import React from 'react';
-import { AddressInfo, AddressRow, Button, Card, Icon } from '@polkadot/ui-app';
+import { AddressCard, AddressInfo, Button, Icon } from '@polkadot/ui-app';
 import keyring from '@polkadot/ui-keyring';
 
 import Backup from './modals/Backup';
@@ -50,23 +50,21 @@ class Account extends React.PureComponent<Props> {
     // FIXME It is a bit heavy-handled switching of being editable here completely
     // (and removing the tags, however the keyring cannot save these)
     return (
-      <Card>
+      <AddressCard
+        buttons={this.renderButtons()}
+        isEditable={isEditable}
+        value={address}
+        withExplorer
+        withIndex
+        withTags
+      >
         {this.renderModals()}
-        <AddressRow
-          buttons={this.renderButtons()}
-          isEditable={isEditable}
+        <AddressInfo
+          withBalance
+          withExtended
           value={address}
-          withExplorer
-          withIndex
-          withTags
-        >
-          <AddressInfo
-            withBalance
-            withExtended
-            value={address}
-          />
-        </AddressRow>
-      </Card>
+        />
+      </AddressCard>
     );
   }
 

packages/app-address-book/src/Address.tsx

@@ -7,7 +7,7 @@ import { ActionStatus } from '@polkadot/ui-app/Status/types';
 import { I18nProps } from '@polkadot/ui-app/types';
 
 import React from 'react';
-import { AddressInfo, AddressRow, Button, Card, Icon } from '@polkadot/ui-app';
+import { AddressCard, AddressInfo, Button, Icon } from '@polkadot/ui-app';
 import keyring from '@polkadot/ui-keyring';
 
 import Transfer from '@polkadot/app-accounts/modals/Transfer';
@@ -47,23 +47,21 @@ class Address extends React.PureComponent<Props, State> {
     const { isEditable } = this.state;
 
     return (
-      <Card>
+      <AddressCard
+        buttons={this.renderButtons()}
+        isEditable={isEditable}
+        value={address}
+        withExplorer
+        withIndex
+        withTags
+      >
         {this.renderModals()}
-        <AddressRow
-          buttons={this.renderButtons()}
-          isEditable={isEditable}
+        <AddressInfo
+          withBalance={{ available: true, free: true, total: true }}
+          withExtended={{ nonce: true }}
           value={address}
-          withExplorer
-          withIndex
-          withTags
-        >
-          <AddressInfo
-            withBalance={{ available: true, free: true, total: true }}
-            withExtended={{ nonce: true }}
-            value={address}
-          />
-        </AddressRow>
-      </Card>
+        />
+      </AddressCard>
     );
   }
 

packages/app-council/src/Overview/Candidate.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React from 'react';
-import { AddressRow, Card } from '@polkadot/ui-app';
+import { AddressCard } from '@polkadot/ui-app';
 
 type Props = {
   address: string
@@ -14,12 +14,10 @@ export default class Candidate extends React.PureComponent<Props> {
     const { address } = this.props;
 
     return (
-      <Card>
-        <AddressRow
-          defaultName='candidate'
-          value={address}
-        />
-      </Card>
+      <AddressCard
+        defaultName='candidate'
+        value={address}
+      />
     );
   }
 }

packages/app-council/src/Overview/Member.tsx

@@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 
 import BN from 'bn.js';
 import React from 'react';
-import { AddressRow, Card } from '@polkadot/ui-app';
+import { AddressCard } from '@polkadot/ui-app';
 import { formatNumber } from '@polkadot/util';
 
 import translate from '../translate';
@@ -21,13 +21,11 @@ class Member extends React.PureComponent<Props> {
     const { address, block, t } = this.props;
 
     return (
-      <Card>
-        <AddressRow
-          buttons={<div><label>{t('active until')}</label>#{formatNumber(block)}</div>}
-          defaultName='council member'
-          value={address}
-        />
-      </Card>
+      <AddressCard
+        buttons={<div><label>{t('active until')}</label>#{formatNumber(block)}</div>}
+        defaultName='council member'
+        value={address}
+      />
     );
   }
 }

packages/app-staking/src/Account/index.tsx

@@ -10,7 +10,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import { KeyringSectionOption } from '@polkadot/ui-keyring/options/types';
 
 import React from 'react';
-import { AddressInfo, AddressMini, AddressRow, Button, Card, TxButton } from '@polkadot/ui-app';
+import { AddressCard, AddressInfo, AddressMini, Button, TxButton } from '@polkadot/ui-app';
 import { withCalls } from '@polkadot/ui-api';
 
 import Bond from './Bond';
@@ -107,30 +107,28 @@ class Account extends React.PureComponent<Props, State> {
     // This is deliberate in order to display the Component modals in a performant matter later on
     // because their state will already be loaded.
     return (
-      <Card>
+      <AddressCard
+        buttons={this.renderButtons()}
+        value={accountId}
+      >
         {this.renderBond()}
         {this.renderBondExtra()}
         {this.renderNominating()}
         {this.renderSessionKey()}
         {this.renderUnbond()}
         {this.renderValidating()}
-        <AddressRow
-          buttons={this.renderButtons()}
+        <AddressInfo
+          withBalance
           value={accountId}
         >
-          <AddressInfo
-            withBalance
-            value={accountId}
-          >
-            <div className='staking--Account-links'>
-              {this.renderControllerId()}
-              {this.renderStashId()}
-              {this.renderSessionId()}
-              {this.renderNominee()}
-            </div>
-          </AddressInfo>
-        </AddressRow>
-      </Card>
+          <div className='staking--Account-links'>
+            {this.renderControllerId()}
+            {this.renderStashId()}
+            {this.renderSessionId()}
+            {this.renderNominee()}
+          </div>
+        </AddressInfo>
+      </AddressCard>
     );
   }
 

packages/app-staking/src/Overview/Address.tsx

@@ -10,7 +10,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { AccountId, Balance, Exposure } from '@polkadot/types';
 import { withCalls, withMulti } from '@polkadot/ui-api/with';
-import { AddressMini, AddressRow, Card, RecentlyOffline } from '@polkadot/ui-app';
+import { AddressCard, AddressMini, RecentlyOffline } from '@polkadot/ui-app';
 import keyring from '@polkadot/ui-keyring';
 import { formatBalance } from '@polkadot/util';
 
@@ -92,25 +92,22 @@ class Address extends React.PureComponent<Props, State> {
     }
 
     return (
-      <Card
+      <AddressCard
+        buttons={this.renderKeys()}
         className={className}
+        defaultName={defaultName}
         key={stashId || controllerId}
+        value={stashId}
+        withBalance={{ bonded }}
       >
-        <AddressRow
-          buttons={this.renderKeys()}
-          defaultName={defaultName}
-          value={stashId}
-          withBalance={{ bonded }}
-        >
-          {this.renderNominators()}
-        </AddressRow>
+        {this.renderNominators()}
         {this.renderOffline()}
         {
           isAuthor && stashId
             ? <div className='blockNumber'>#{lastBlock}</div>
             : null
         }
-      </Card>
+      </AddressCard>
     );
   }
 

packages/ui-app/src/AddressCard.tsx

@@ -0,0 +1,53 @@
+// Copyright 2017-2019 @polkadot/ui-app authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React from 'react';
+import styled from 'styled-components';
+
+import AddressRow, { RowProps } from './AddressRow';
+import Card from './Card';
+import LinkPolkascan from './LinkPolkascan';
+
+type Props = RowProps & {
+  withExplorer?: boolean
+};
+
+class AddressCard extends React.PureComponent<Props> {
+  render () {
+    const { className, value, withExplorer } = this.props;
+
+    return (
+      <Card className={className}>
+        <AddressRow
+          {...this.props}
+          className='ui--AddressCard-AddressRow'
+        />
+        {withExplorer && (
+          <div className='ui--AddressCard-explorer'>
+            <LinkPolkascan
+              className='ui--AddressCard-exporer-link'
+              data={value}
+              type='address'
+            />
+          </div>
+        )}
+      </Card>
+    );
+  }
+}
+
+export default styled(AddressCard)`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .ui--AddressCard-explorer {
+    margin: 0 -0.25rem -0.5rem 0;
+    text-align: right;
+
+    .ui--AddressCard-exporer-link {
+      display: inline-block;
+    }
+  }
+`;

packages/ui-app/src/AddressRow.tsx

@@ -17,27 +17,29 @@ import keyring from '@polkadot/ui-keyring';
 import AddressInfo, { BalanceActiveType } from './AddressInfo';
 import CopyButton from './CopyButton';
 import IdentityIcon from './IdentityIcon';
-import LinkPolkascan from './LinkPolkascan';
 import translate from './translate';
 import { classes, getAddrName, getAddrTags, toShortAddress } from './util';
 
-export type Props = I18nProps & {
-  accounts_idAndIndex?: [AccountId?, AccountIndex?],
+export type RowProps = {
   bonded?: BN | Array<BN>,
   buttons?: React.ReactNode,
   children?: React.ReactNode,
+  className?: string,
   defaultName?: string,
   extraInfo?: React.ReactNode,
   isEditable?: boolean,
   isInline?: boolean,
   value: AccountId | AccountIndex | Address | string | null,
   withBalance?: boolean | BalanceActiveType,
-  withExplorer?: boolean,
   withIcon?: boolean,
   withIndex?: boolean,
   withTags?: boolean
 };
 
+type Props = I18nProps & RowProps & {
+  accounts_idAndIndex?: [AccountId?, AccountIndex?]
+};
+
 type State = {
   address: string,
   isEditingName: boolean,
@@ -112,7 +114,6 @@ class AddressRow extends React.PureComponent<Props, State> {
           </div>
         </div>
         {this.renderChildren()}
-        {this.renderExplorer()}
       </div>
     );
   }
@@ -159,24 +160,6 @@ class AddressRow extends React.PureComponent<Props, State> {
       : null;
   }
 
-  protected renderExplorer () {
-    const { value, withExplorer } = this.props;
-
-    if (!withExplorer) {
-      return null;
-    }
-
-    return (
-      <div className='ui--AddressRow-explorer'>
-        <LinkPolkascan
-          className='polkascan'
-          data={value}
-          type='address'
-        />
-      </div>
-    );
-  }
-
   protected renderName () {
     const { isEditable } = this.props;
     const { isEditingName, name } = this.state;
@@ -497,17 +480,6 @@ export default withMulti(
       white-space: nowrap;
     }
 
-    .ui--AddressRow-explorer {
-      content: ' ';
-      margin-top: 1rem;
-
-      .polkascan {
-        position: absolute;
-        bottom: 0.75rem;
-        right: 1rem;
-      }
-    }
-
     .ui--AddressRow-icon {
       margin-right: 1em;
     }

packages/ui-app/src/index.tsx

@@ -2,6 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+export { default as AddressCard } from './AddressCard';
 export { default as AddressInfo } from './AddressInfo';
 export { default as AddressMini } from './AddressMini';
 export { default as AddressRow } from './AddressRow';