From 6ef01c0024a2e314e08a4e00a309c09cdff101af Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sat, 1 Jun 2019 08:36:28 +0200
Subject: [PATCH] Render AddressRow balances from AddressInfo (#1259)

* Render AddressRow balances from AddressInfo

* Extract BalanceActiveType

* Filtering around AddressSummary children
---
 packages/app-staking/src/Overview/Address.tsx |  7 +-
 packages/apps/src/Apps.tsx                    |  7 +-
 packages/apps/webpack.config.js               |  3 +
 packages/ui-app/src/AddressInfo.tsx           | 53 ++++++++--
 packages/ui-app/src/AddressRow.tsx            | 11 +--
 packages/ui-app/src/AddressSummary.tsx        | 96 ++++---------------
 packages/ui-app/src/styles/components.css     | 25 ++---
 7 files changed, 92 insertions(+), 110 deletions(-)

diff --git a/packages/app-staking/src/Overview/Address.tsx b/packages/app-staking/src/Overview/Address.tsx
index 01f353003c..021737897a 100644
--- a/packages/app-staking/src/Overview/Address.tsx
+++ b/packages/app-staking/src/Overview/Address.tsx
@@ -79,7 +79,7 @@ class Address extends React.PureComponent<Props, State> {
     const isAuthor = [address, controllerId, stashId].includes(lastAuthor);
     const bonded = stakers && !stakers.own.isZero()
       ? [stakers.own, stakers.total.sub(stakers.own)]
-      : undefined;
+      : true;
 
     if ((filter === 'hasNominators' && !this.hasNominators())
         || (filter === 'noNominators' && this.hasNominators())
@@ -92,15 +92,14 @@ class Address extends React.PureComponent<Props, State> {
     return (
       <article key={stashId || controllerId}>
         <AddressRow
-          bonded={bonded}
           buttons={this.renderKeys()}
           defaultName={defaultName}
           value={stashId}
-          withBonded
+          withBalance={{ bonded }}
         >
           {this.renderNominators()}
-          {this.renderOffline()}
         </AddressRow>
+        {this.renderOffline()}
         {
           isAuthor && stashId
             ? <div className='blockNumber'>#{lastBlock}</div>
diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx
index 11b4ae8c51..e37b515960 100644
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@@ -5,8 +5,11 @@
 import { BareProps } from '@polkadot/ui-app/types';
 import { SideBarTransition, SIDEBAR_TRANSITION_DURATION, SIDEBAR_MENU_THRESHOLD } from './constants';
 
-import React from 'react';
+// this is disabled, Chrome + WASM memory leak makes it slow & laggy. If enabled
+// we also need to export the default as hot(Apps) (last line)
 // import { hot } from 'react-hot-loader/root';
+
+import React from 'react';
 import store from 'store';
 import { ThemeProvider } from 'styled-components';
 import Signer from '@polkadot/ui-signer';
@@ -176,4 +179,4 @@ class Apps extends React.Component<Props, State> {
   }
 }
 
-export default Apps; // hot(Apps);
+export default Apps;
diff --git a/packages/apps/webpack.config.js b/packages/apps/webpack.config.js
index 2d76acd48d..26a199708d 100644
--- a/packages/apps/webpack.config.js
+++ b/packages/apps/webpack.config.js
@@ -187,6 +187,9 @@ function createWebpack ({ alias = {}, context, name = 'index' }) {
       isProd
         ? null
         : new WebpackPluginServe({
+          hmr: false, // switch off, Chrome WASM memory leak
+          liveReload: false, // explict off, overrides hmr
+          progress: false, // since we have hmr off, disable
           port: 3000,
           static: path.join(process.cwd(), '/build')
         })
diff --git a/packages/ui-app/src/AddressInfo.tsx b/packages/ui-app/src/AddressInfo.tsx
index 78f6649d6c..a01864b1bb 100644
--- a/packages/ui-app/src/AddressInfo.tsx
+++ b/packages/ui-app/src/AddressInfo.tsx
@@ -5,6 +5,7 @@
 import { DerivedBalances, DerivedStaking } from '@polkadot/api-derive/types';
 import { BareProps, I18nProps } from './types';
 
+import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
 import { formatBalance, formatNumber } from '@polkadot/util';
@@ -15,13 +16,27 @@ import translate from './translate';
 import CryptoType from './CryptoType';
 import Label from './Label';
 
+// true to display, or (for bonded) provided values [own, ...all extras]
+export type BalanceActiveType = {
+  available?: boolean,
+  bonded?: boolean | Array<BN>,
+  free?: boolean,
+  redeemable?: boolean,
+  unlocking?: boolean
+};
+
+export type CryptoActiveType = {
+  crypto?: boolean,
+  nonce?: boolean
+};
+
 type Props = BareProps & I18nProps & {
   balances_all?: DerivedBalances,
   children?: React.ReactNode,
   staking_info?: DerivedStaking,
   value: string,
-  withBalance?: boolean | { available?: boolean, bonded?: boolean, free?: boolean, redeemable?: boolean, unlocking?: boolean },
-  withExtended?: boolean | { crypto?: boolean, nonce?: boolean }
+  withBalance?: boolean | BalanceActiveType,
+  withExtended?: boolean | CryptoActiveType
 };
 
 // <AddressInfo
@@ -76,12 +91,7 @@ class AddressInfo extends React.PureComponent<Props> {
             <div className='result'>{formatBalance(balances_all.availableBalance)}</div>
           </>
         )}
-        {balanceDisplay.bonded && staking_info && staking_info.stakingLedger && staking_info.accountId.eq(staking_info.stashId) && (
-          <>
-            <Label label={t('bonded')} />
-            <div className='result'>{formatBalance(staking_info.stakingLedger.active)}</div>
-          </>
-        )}
+        {balanceDisplay.bonded && this.renderBonded(balanceDisplay.bonded)}
         {balanceDisplay.redeemable && staking_info && staking_info.redeemable && staking_info.redeemable.gtn(0) && (
           <>
             <Label label={t('redeemable')} />
@@ -103,6 +113,33 @@ class AddressInfo extends React.PureComponent<Props> {
     );
   }
 
+  // either true (filtered above already) or [own, ...all extras]
+  private renderBonded (bonded: true | Array<BN>) {
+    const { staking_info, t } = this.props;
+    let value = undefined;
+
+    if (Array.isArray(bonded)) {
+      // Get the sum of all extra values (if available)
+      const extras = bonded.filter((value, index) => index !== 0);
+      const extra = extras.reduce((total, value) => total.add(value), new BN(0)).gtn(0)
+        ? `(+${extras.map((bonded) => formatBalance(bonded)).join(', ')})`
+        : '';
+
+      value = `${formatBalance(bonded[0])} ${extra}`;
+    } else if (staking_info && staking_info.stakingLedger && staking_info.accountId.eq(staking_info.stashId)) {
+      value = formatBalance(staking_info.stakingLedger.active);
+    }
+
+    return value
+      ? (
+        <>
+          <Label label={t('bonded')} />
+          <div className='result'>{value}</div>
+        </>
+      )
+      : undefined;
+  }
+
   private renderExtended () {
     const { balances_all, t, value, withExtended } = this.props;
     const extendedDisplay = withExtended === true
diff --git a/packages/ui-app/src/AddressRow.tsx b/packages/ui-app/src/AddressRow.tsx
index a1b0e3412f..b4685d7d16 100644
--- a/packages/ui-app/src/AddressRow.tsx
+++ b/packages/ui-app/src/AddressRow.tsx
@@ -9,9 +9,11 @@ import { classes } from './util';
 import { AddressSummary, Props } from './AddressSummary';
 import translate from './translate';
 
+const DEFAULT_ICON_SIZE = 64;
+
 class AddressRow extends AddressSummary {
   render () {
-    const { className, style, identIconSize = 64, isInline, value, withIndex } = this.props;
+    const { className, style, identIconSize = DEFAULT_ICON_SIZE, isInline, value, withIndex } = this.props;
 
     return (
       <div
@@ -27,12 +29,7 @@ class AddressRow extends AddressSummary {
               {this.renderAddress()}
               {this.renderAccountIndex(withIndex)}
             </div>
-            <div className='ui--AddressSummary-balances'>
-              {this.renderAvailable()}
-              {this.renderBalance()}
-              {this.renderBonded()}
-              {this.renderNonce()}
-            </div>
+            {this.renderBalances()}
             {this.renderTags()}
           </div>
         </div>
diff --git a/packages/ui-app/src/AddressSummary.tsx b/packages/ui-app/src/AddressSummary.tsx
index 193b4d5437..fd4a87c5ae 100644
--- a/packages/ui-app/src/AddressSummary.tsx
+++ b/packages/ui-app/src/AddressSummary.tsx
@@ -13,19 +13,15 @@ import { Button, Input, InputTags } from '@polkadot/ui-app';
 import BaseIdentityIcon from '@polkadot/ui-identicon';
 import keyring from '@polkadot/ui-keyring';
 
-import AvailableDisplay from './Available';
-import BalanceDisplay from './Balance';
-import BondedDisplay from './Bonded';
-import { classes, getAddrName, getAddrTags, toShortAddress } from './util';
+import AddressInfo, { BalanceActiveType } from './AddressInfo';
 import CopyButton from './CopyButton';
 import IdentityIcon from './IdentityIcon';
 import LinkPolkascan from './LinkPolkascan';
-import NonceDisplay from './Nonce';
 import translate from './translate';
+import { classes, getAddrName, getAddrTags, toShortAddress } from './util';
 
 export type Props = I18nProps & {
   accounts_idAndIndex?: [AccountId?, AccountIndex?],
-  balance?: BN | Array<BN>,
   bonded?: BN | Array<BN>,
   buttons?: React.ReactNode,
   children?: React.ReactNode,
@@ -37,13 +33,10 @@ export type Props = I18nProps & {
   isShort?: boolean,
   session_validators?: Array<AccountId>,
   value: AccountId | AccountIndex | Address | string | null,
-  withAvailable?: boolean,
-  withBalance?: boolean,
-  withBonded?: boolean,
+  withBalance?: boolean | BalanceActiveType,
   withExplorer?: boolean,
   withIcon?: boolean,
   withIndex?: boolean,
-  withNonce?: boolean,
   withTags?: boolean
 };
 
@@ -115,12 +108,7 @@ class AddressSummary extends React.PureComponent<Props, State> {
             {this.renderAddress()}
             {this.renderAccountIndex(withIndex)}
           </div>
-          <div className='ui--AddressSummary-balances'>
-            {this.renderAvailable()}
-            {this.renderBalance()}
-            {this.renderBonded()}
-            {this.renderNonce()}
-          </div>
+          {this.renderBalances()}
           {this.renderTags()}
         </div>
         {this.renderChildren()}
@@ -234,23 +222,6 @@ class AddressSummary extends React.PureComponent<Props, State> {
     this.setState({ tags });
   }
 
-  protected renderAvailable () {
-    const { accounts_idAndIndex = [], t, withAvailable } = this.props;
-    const [accountId] = accounts_idAndIndex;
-
-    if (!withAvailable || !accountId) {
-      return null;
-    }
-
-    return (
-      <AvailableDisplay
-        className='ui--AddressSummary-available'
-        label={<label>{t('available')}</label>}
-        params={accountId}
-      />
-    );
-  }
-
   protected renderAccountIndex (withIndex?: boolean) {
     const { accounts_idAndIndex = [] } = this.props;
     const [, accountIndex] = accounts_idAndIndex;
@@ -266,8 +237,8 @@ class AddressSummary extends React.PureComponent<Props, State> {
     );
   }
 
-  protected renderBalance () {
-    const { accounts_idAndIndex = [], balance, t, withBalance } = this.props;
+  protected renderBalances () {
+    const { accounts_idAndIndex = [], withBalance } = this.props;
     const [accountId] = accounts_idAndIndex;
 
     if (!withBalance || !accountId) {
@@ -275,37 +246,25 @@ class AddressSummary extends React.PureComponent<Props, State> {
     }
 
     return (
-      <BalanceDisplay
-        balance={balance}
-        className='ui--AddressSummary-balance'
-        label={<label>{t('total')}</label>}
-        params={accountId}
-      />
-    );
-  }
-
-  protected renderBonded () {
-    const { accounts_idAndIndex = [], bonded, t, withBonded } = this.props;
-    const [accountId] = accounts_idAndIndex;
-
-    if (!withBonded || !accountId) {
-      return null;
-    }
-
-    return (
-      <BondedDisplay
-        bonded={bonded}
-        className='ui--AddressSummary-bonded'
-        label={<label>{t('bonded')}</label>}
-        params={accountId}
-      />
+      <div className='ui--AddressSummary-balances'>
+        <AddressInfo
+          value={accountId}
+          withBalance={withBalance}
+        />
+      </div>
     );
   }
 
   protected renderChildren () {
     const { children } = this.props;
+    // we need children, or when an array, at least 1 non-empty value
+    const hasChildren = !children
+      ? false
+      : Array.isArray(children)
+        ? children.filter((child) => child).length !== 0
+        : true;
 
-    if (!children || (Array.isArray(children) && children.length === 0)) {
+    if (!hasChildren) {
       return null;
     }
 
@@ -352,23 +311,6 @@ class AddressSummary extends React.PureComponent<Props, State> {
     );
   }
 
-  protected renderNonce () {
-    const { t, withNonce } = this.props;
-    const { address } = this.state;
-
-    if (!withNonce || !address) {
-      return null;
-    }
-
-    return (
-      <NonceDisplay
-        className='ui--AddressSummary-nonce'
-        label={<label>{t('transactions')}</label>}
-        params={address}
-      />
-    );
-  }
-
   protected renderSaveIcon (callback: () => void) {
     return (
       <Button
diff --git a/packages/ui-app/src/styles/components.css b/packages/ui-app/src/styles/components.css
index 82bf53bd13..bc45e4e958 100644
--- a/packages/ui-app/src/styles/components.css
+++ b/packages/ui-app/src/styles/components.css
@@ -187,8 +187,19 @@ button.ui.icon.iconButton {
     }
   }
 
-  .ui--AddressSummary-balances>span {
-    text-align: left;
+  .ui--AddressSummary-balances {
+    .column {
+      display: block;
+
+      label,
+      .result {
+        display: inline-block;
+      }
+    }
+
+    > span {
+      text-align: left;
+    }
   }
 
   .ui--AddressSummary-tags.editable {
@@ -232,16 +243,6 @@ button.ui.icon.iconButton {
   padding-top: 0.5em;
 }
 
-.ui--AddressSummary-balances {
-  display: grid;
-  grid-column-gap: 1em;
-
-  label {
-    display: inline-block;
-    margin-right: 0.5rem;
-  }
-}
-
 .ui--AddressMini-balances {
   display: grid;
 }