Adjust extrinsic selection display, UI alignment (#1878)

packages/app-extrinsics/src/Selection.tsx

@@ -8,13 +8,11 @@ import { QueueTxExtrinsicAdd } from '@polkadot/react-components/Status/types';
 import { ApiProps } from '@polkadot/react-api/types';
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 
-import BN from 'bn.js';
 import React from 'react';
-import { Button, Extrinsic, InputAddress, Labelled, TxButton, TxComponent } from '@polkadot/react-components';
+import { Button, Extrinsic, InputAddress, TxButton, TxComponent } from '@polkadot/react-components';
 import { withApi, withMulti } from '@polkadot/react-api';
-import { Nonce } from '@polkadot/react-query';
+import { BalanceFree } from '@polkadot/react-query';
 
-import Balance from './Balance';
 import translate from './translate';
 
 interface Props extends ApiProps, I18nProps {
@@ -25,7 +23,6 @@ interface State {
   isValid: boolean;
   isValidUnsigned: boolean;
   method: Call | null;
-  accountNonce?: BN;
   accountId?: string | null;
 }
 
@@ -45,34 +42,16 @@ class Selection extends TxComponent<Props, State> {
       <div className='extrinsics--Selection'>
         <InputAddress
           label={t('using the selected account')}
+          labelExtra={<BalanceFree label={<label>{t('free balance')}</label>} params={accountId} />}
           onChange={this.onChangeSender}
           type='account'
         />
-        <div className='ui--row'>
-          <Balance
-            className='medium'
-            label={t('with an account balance')}
-            params={accountId}
-          />
-          <Labelled
-            className='medium'
-            label={t('with a transaction nonce')}
-          >
-            <Nonce
-              className='ui disabled dropdown selection'
-              callOnResult={this.onChangeNonce}
-              params={accountId}
-            />
-          </Labelled>
-        </div>
-        <br></br>
         <Extrinsic
           defaultValue={apiDefaultTxSudo}
           label={t('submit the following extrinsic')}
           onChange={this.onChangeExtrinsic}
           onEnter={this.sendTx}
         />
-        <br></br>
         <Button.Group>
           <TxButton
             isBasic
@@ -100,7 +79,7 @@ class Selection extends TxComponent<Props, State> {
   private nextState (newState: Partial<State>): void {
     this.setState(
       (prevState: State): State => {
-        const { method = prevState.method, accountNonce = prevState.accountNonce, accountId = prevState.accountId } = newState;
+        const { method = prevState.method, accountId = prevState.accountId } = newState;
         const isValid = !!(
           accountId &&
           accountId.length &&
@@ -111,7 +90,6 @@ class Selection extends TxComponent<Props, State> {
           method,
           isValid,
           isValidUnsigned: !!method,
-          accountNonce,
           accountId
         };
       }
@@ -122,12 +100,8 @@ class Selection extends TxComponent<Props, State> {
     this.nextState({ method });
   }
 
-  private onChangeNonce = (accountNonce: BN = new BN(0)): void => {
-    this.nextState({ accountNonce });
-  }
-
   private onChangeSender = (accountId: string | null): void => {
-    this.nextState({ accountId, accountNonce: new BN(0) });
+    this.nextState({ accountId });
   }
 
   private getExtrinsic (): SubmittableExtrinsic | null {

packages/react-query/src/BalanceFree.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/camelcase */
+// Copyright 2017-2019 @polkadot/react-query 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 { BareProps, CallProps } from '@polkadot/react-api/types';
+import { DerivedBalances } from '@polkadot/api-derive/types';
+import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
+
+import React from 'react';
+import { withCalls } from '@polkadot/react-api';
+
+import FormatBalance from './FormatBalance';
+
+interface Props extends BareProps, CallProps {
+  balances_all?: DerivedBalances;
+  children?: React.ReactNode;
+  label?: React.ReactNode;
+  params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
+}
+
+function BalanceFree ({ balances_all, children, className, label }: Props): React.ReactElement<Props> {
+  return (
+    <FormatBalance
+      className={className}
+      label={label}
+      value={balances_all?.freeBalance}
+    >
+      {children}
+    </FormatBalance>
+  );
+}
+
+export default withCalls<Props>(
+  ['derive.balances.all', { paramName: 'params' }]
+)(BalanceFree);

packages/react-query/src/BalanceVoting.tsx

@@ -24,7 +24,7 @@ function BalanceVoting ({ balances_all, children, className, label }: Props): Re
     <FormatBalance
       className={className}
       label={label}
-      value={balances_all && balances_all.votingBalance}
+      value={balances_all?.votingBalance}
     >
       {children}
     </FormatBalance>

packages/react-query/src/FormatBalance.tsx

@@ -41,11 +41,13 @@ export default styled(FormatBalance)`
   vertical-align: middle;
 
   * {
-    vertical-align: middle;
+    vertical-align: baseline;
   }
 
   > label,
   > .label {
+    display: inline;
     margin-right: 0.25rem;
+    vertical-align: baseline;
   }
 `;

packages/react-query/src/index.ts

@@ -6,7 +6,7 @@ export { default as AccountIndex } from './AccountIndex';
 export { default as AccountName } from './AccountName';
 export { default as Available } from './Available';
 export { default as Balance } from './Balance';
-export { default as FormatBalance } from './FormatBalance';
+export { default as BalanceFree } from './BalanceFree';
 export { default as BalanceVoting } from './BalanceVoting';
 export { BlockAuthors, BlockAuthorsContext } from './BlockAuthors';
 export { default as Bonded } from './Bonded';
@@ -15,6 +15,7 @@ export { default as BestNumber } from './BestNumber';
 export { default as Chain } from './Chain';
 export { default as Elapsed } from './Elapsed';
 export { Events, EventsContext } from './Events';
+export { default as FormatBalance } from './FormatBalance';
 export { default as LockedVote } from './LockedVote';
 export { default as NodeName } from './NodeName';
 export { default as NodeVersion } from './NodeVersion';