Render AddressRow balances from AddressInfo (#1259)

* Render AddressRow balances from AddressInfo * Extract BalanceActiveType * Filtering around AddressSummary children
2019-06-01 08:36:28 +02:00 · 2019-06-01 08:36:28 +02:00 · 6ef01c0024
commit 6ef01c0024
parent 7251ece4b0
7 changed files with 92 additions and 110 deletions
--- 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>
--- 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;
--- 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')
        })
--- 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
--- 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>
--- 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
--- 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;
 }