From dc943d7cd65e2e9450c0597186f4c98b24c76f31 Mon Sep 17 00:00:00 2001
From: kwingram25 <kwingram25@gmail.com>
Date: Wed, 22 May 2019 18:08:58 +0200
Subject: [PATCH] Button/TxButton submit on enter (#1170)

* Button/TxButton submit on enter

* promise linting

* testing ref approach

* Add TxComponent to handle submit on enter

* remove accountNonce

* remove input ref

* remove TxButton constructor

* remove comment

* empty constructor

* linting

* bug with null ref

* linting
---
 packages/app-123code/src/Transfer.tsx         |  7 ++-
 packages/app-accounts/src/Creator.tsx         | 11 +++--
 packages/app-accounts/src/Restore.tsx         |  6 ++-
 packages/app-accounts/src/Vanity/index.tsx    |  6 ++-
 packages/app-accounts/src/modals/Backup.tsx   |  6 ++-
 .../app-accounts/src/modals/ChangePass.tsx    |  6 ++-
 packages/app-address-book/src/Creator.tsx     |  9 ++--
 packages/app-address-book/src/Editor.tsx      |  6 ++-
 packages/app-contracts/src/Call.tsx           |  7 ++-
 packages/app-contracts/src/Code.tsx           | 11 +++--
 packages/app-contracts/src/Instantiate.tsx    | 13 +++--
 packages/app-contracts/src/Params.tsx         |  5 +-
 packages/app-democracy/src/Propose.tsx        |  7 ++-
 packages/app-explorer/src/Query.tsx           |  7 +--
 packages/app-extrinsics/src/Selection.tsx     |  6 ++-
 packages/app-js/src/ActionButtons.tsx         |  6 ++-
 packages/app-staking/src/Account/Bond.tsx     |  6 ++-
 .../app-staking/src/Account/BondExtra.tsx     |  6 ++-
 packages/app-staking/src/Account/Unbond.tsx   |  6 ++-
 .../app-staking/src/Account/Validating.tsx    |  7 ++-
 packages/app-storage/src/Query.tsx            |  2 +-
 .../app-storage/src/Selection/Modules.tsx     |  6 ++-
 packages/app-storage/src/Selection/Raw.tsx    |  6 ++-
 packages/app-sudo/src/Sudo.tsx                |  6 ++-
 packages/app-toolbox/src/Rpc/Selection.tsx    |  6 ++-
 packages/app-toolbox/src/Unlock.tsx           |  8 ++--
 packages/app-transfer/src/Submit.tsx          | 47 -------------------
 packages/app-transfer/src/Transfer.tsx        | 24 ++++++----
 packages/ui-api/src/with/api.tsx              |  3 ++
 packages/ui-app/src/Button/Button.tsx         |  7 +++
 packages/ui-app/src/Button/index.tsx          |  8 ++--
 packages/ui-app/src/Button/types.ts           |  1 +
 packages/ui-app/src/Extrinsic.tsx             |  4 +-
 packages/ui-app/src/Input.tsx                 |  1 +
 packages/ui-app/src/InputBalance.tsx          |  4 +-
 packages/ui-app/src/InputNumber.tsx           |  4 +-
 packages/ui-app/src/Params/Call.tsx           |  3 +-
 packages/ui-app/src/Params/Extrinsic.tsx      |  6 ++-
 packages/ui-app/src/Params/Proposal.tsx       |  3 +-
 packages/ui-app/src/Password.tsx              |  6 +--
 packages/ui-app/src/TxButton.tsx              |  9 +++-
 packages/ui-app/src/TxComponent.tsx           | 27 +++++++++++
 packages/ui-app/src/index.tsx                 |  1 +
 packages/ui-params/src/Param/Amount.tsx       |  3 +-
 packages/ui-params/src/Param/Balance.tsx      |  3 +-
 packages/ui-params/src/Param/BaseBytes.tsx    |  5 +-
 packages/ui-params/src/Param/Bytes.tsx        |  3 +-
 packages/ui-params/src/Param/Code.tsx         |  3 +-
 packages/ui-params/src/Param/Hash.tsx         |  3 +-
 packages/ui-params/src/Param/KeyValue.tsx     |  3 +-
 .../ui-params/src/Param/KeyValueArray.tsx     |  3 +-
 packages/ui-params/src/Param/Moment.tsx       |  3 +-
 packages/ui-params/src/Param/Text.tsx         |  3 +-
 packages/ui-params/src/Param/Tuple.tsx        |  3 +-
 packages/ui-params/src/Param/Unknown.tsx      |  3 +-
 packages/ui-params/src/Param/Vector.tsx       |  3 +-
 packages/ui-params/src/Param/index.tsx        |  3 +-
 packages/ui-params/src/index.tsx              |  8 ++--
 packages/ui-params/src/types.ts               |  2 +
 packages/ui-signer/src/Modal.tsx              |  7 ---
 packages/ui-signer/src/Unlock.tsx             |  6 +--
 packages/ui-signer/src/util.ts                |  0
 62 files changed, 247 insertions(+), 156 deletions(-)
 delete mode 100644 packages/app-transfer/src/Submit.tsx
 create mode 100644 packages/ui-app/src/TxComponent.tsx
 delete mode 100644 packages/ui-signer/src/util.ts

diff --git a/packages/app-123code/src/Transfer.tsx b/packages/app-123code/src/Transfer.tsx
index e5a0d5dd29..c618e1c776 100644
--- a/packages/app-123code/src/Transfer.tsx
+++ b/packages/app-123code/src/Transfer.tsx
@@ -4,7 +4,7 @@
 
 import BN from 'bn.js';
 import React from 'react';
-import { Button, InputAddress, InputBalance, TxButton } from '@polkadot/ui-app';
+import { Button, InputAddress, InputBalance, TxButton, TxComponent } from '@polkadot/ui-app';
 
 import Summary from './Summary';
 
@@ -16,7 +16,7 @@ type State = {
   recipientId?: string;
 };
 
-export default class Transfer extends React.PureComponent<Props> {
+export default class Transfer extends TxComponent<Props, State> {
   state: State = {};
 
   render () {
@@ -31,11 +31,13 @@ export default class Transfer extends React.PureComponent<Props> {
             <InputAddress
               label='recipient address for this transfer'
               onChange={this.onChangeRecipient}
+              onEnter={this.sendTx}
               type='all'
             />
             <InputBalance
               label='amount to transfer'
               onChange={this.onChangeAmount}
+              onEnter={this.sendTx}
             />
             <Button.Group>
               <TxButton
@@ -43,6 +45,7 @@ export default class Transfer extends React.PureComponent<Props> {
                 label='make transfer'
                 params={[recipientId, amount]}
                 tx='balances.transfer'
+                ref={this.button}
               />
             </Button.Group>
           </div>
diff --git a/packages/app-accounts/src/Creator.tsx b/packages/app-accounts/src/Creator.tsx
index 08b8920e4f..a31013b7cc 100644
--- a/packages/app-accounts/src/Creator.tsx
+++ b/packages/app-accounts/src/Creator.tsx
@@ -12,7 +12,7 @@ import FileSaver from 'file-saver';
 import React from 'react';
 import { DEV_PHRASE } from '@polkadot/keyring/defaults';
 import { withApi, withMulti } from '@polkadot/ui-api';
-import { AddressSummary, AddressRow, Button, Dropdown, Input, InputTags, Labelled, Modal, Password } from '@polkadot/ui-app';
+import { AddressSummary, AddressRow, Button, Dropdown, Input, InputTags, Labelled, Modal, Password, TxComponent } from '@polkadot/ui-app';
 import { InputAddress } from '@polkadot/ui-app/InputAddress';
 import keyring from '@polkadot/ui-keyring';
 import uiSettings from '@polkadot/ui-settings';
@@ -90,7 +90,7 @@ function addressFromSeed (phrase: string, derivePath: string, pairType: KeypairT
     .address();
 }
 
-class Creator extends React.PureComponent<Props, State> {
+class Creator extends TxComponent<Props, State> {
   state: State = { seedType: 'bip' } as State;
 
   constructor (props: Props) {
@@ -150,6 +150,7 @@ class Creator extends React.PureComponent<Props, State> {
           isPrimary
           label={t('Save')}
           onClick={this.onShowWarning}
+          ref={this.button}
         />
       </Button.Group>
     );
@@ -179,6 +180,7 @@ class Creator extends React.PureComponent<Props, State> {
             isError={!isNameValid}
             label={t('name')}
             onChange={this.onChangeName}
+            onEnter={this.submit}
             value={name}
           />
         </div>
@@ -190,6 +192,7 @@ class Creator extends React.PureComponent<Props, State> {
             isError={!isSeedValid}
             label={seedLabel}
             onChange={this.onChangeSeed}
+            onEnter={this.submit}
             value={seed}
           >
             <Dropdown
@@ -207,6 +210,7 @@ class Creator extends React.PureComponent<Props, State> {
             isError={!isPassValid}
             label={t('password')}
             onChange={this.onChangePass}
+            onEnter={this.submit}
             value={password}
           />
         </div>
@@ -240,6 +244,7 @@ class Creator extends React.PureComponent<Props, State> {
                 isError={!!deriveError}
                 label={t('secret derivation path')}
                 onChange={this.onChangeDerive}
+                onEnter={this.submit}
                 value={derivePath}
               />
             </div>
@@ -340,7 +345,7 @@ class Creator extends React.PureComponent<Props, State> {
 
   private nextState (newState: State): void {
     this.setState(
-      (prevState: State, props: Props): State => {
+      (prevState: State): State => {
         const { derivePath = prevState.derivePath, name = prevState.name, pairType = prevState.pairType, password = prevState.password, seed = prevState.seed, seedOptions = prevState.seedOptions, seedType = prevState.seedType, showWarning = prevState.showWarning, tags = prevState.tags } = newState;
         let address = prevState.address;
         const deriveError = deriveValidate(derivePath, pairType);
diff --git a/packages/app-accounts/src/Restore.tsx b/packages/app-accounts/src/Restore.tsx
index b920b25891..7c0f1dd103 100644
--- a/packages/app-accounts/src/Restore.tsx
+++ b/packages/app-accounts/src/Restore.tsx
@@ -8,7 +8,7 @@ import { ActionStatus } from '@polkadot/ui-app/Status/types';
 import { ComponentProps } from './types';
 
 import React from 'react';
-import { AddressSummary, Button, InputFile, Password } from '@polkadot/ui-app';
+import { AddressSummary, Button, InputFile, Password, TxComponent } from '@polkadot/ui-app';
 import { InputAddress } from '@polkadot/ui-app/InputAddress';
 import { isHex, isObject, u8aToString } from '@polkadot/util';
 import keyring from '@polkadot/ui-keyring';
@@ -25,7 +25,7 @@ type State = {
   password: string
 };
 
-class Restore extends React.PureComponent<Props, State> {
+class Restore extends TxComponent<Props, State> {
   state: State = {
     address: null,
     isFileValid: false,
@@ -57,6 +57,7 @@ class Restore extends React.PureComponent<Props, State> {
           isPrimary
           onClick={this.onSave}
           label={t('Restore')}
+          ref={this.button}
         />
       </Button.Group>
       </div>
@@ -89,6 +90,7 @@ class Restore extends React.PureComponent<Props, State> {
             isError={!isPassValid}
             label={t('password')}
             onChange={this.onChangePass}
+            onEnter={this.submit}
             value={password}
           />
         </div>
diff --git a/packages/app-accounts/src/Vanity/index.tsx b/packages/app-accounts/src/Vanity/index.tsx
index 1d353b3572..329254f89b 100644
--- a/packages/app-accounts/src/Vanity/index.tsx
+++ b/packages/app-accounts/src/Vanity/index.tsx
@@ -9,7 +9,7 @@ import { ComponentProps } from '../types';
 
 import React from 'react';
 import styled from 'styled-components';
-import { Button, Dropdown, Input } from '@polkadot/ui-app';
+import { Button, Dropdown, Input, TxComponent } from '@polkadot/ui-app';
 import uiSettings from '@polkadot/ui-settings';
 
 import generator from '../vanitygen';
@@ -51,7 +51,7 @@ const Wrapper = styled.div`
   }
 `;
 
-class VanityApp extends React.PureComponent<Props, State> {
+class VanityApp extends TxComponent<Props, State> {
   results: Array<Generator$Result> = [];
   state: State = {
     elapsed: 0,
@@ -98,6 +98,7 @@ class VanityApp extends React.PureComponent<Props, State> {
               ? t('Stop generation')
               : t('Start generation')
           }
+          ref={this.button}
         />
       </Button.Group>
     );
@@ -135,6 +136,7 @@ class VanityApp extends React.PureComponent<Props, State> {
             isError={!isMatchValid}
             label={t('Search for')}
             onChange={this.onChangeMatch}
+            onEnter={this.submit}
             value={match}
           />
           <Dropdown
diff --git a/packages/app-accounts/src/modals/Backup.tsx b/packages/app-accounts/src/modals/Backup.tsx
index 99e1b16857..6bc55bff3b 100644
--- a/packages/app-accounts/src/modals/Backup.tsx
+++ b/packages/app-accounts/src/modals/Backup.tsx
@@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 
 import FileSaver from 'file-saver';
 import React from 'react';
-import { AddressRow, Button, Modal, Password } from '@polkadot/ui-app';
+import { AddressRow, Button, Modal, Password, TxComponent } from '@polkadot/ui-app';
 import { ActionStatus } from '@polkadot/ui-app/Status/types';
 import keyring from '@polkadot/ui-keyring';
 
@@ -22,7 +22,7 @@ type State = {
   password: string
 };
 
-class Backup extends React.PureComponent<Props, State> {
+class Backup extends TxComponent<Props, State> {
   state: State = {
     isPassValid: false,
     password: ''
@@ -59,6 +59,7 @@ class Backup extends React.PureComponent<Props, State> {
             isPrimary
             label={t('Download')}
             onClick={this.doBackup}
+            ref={this.button}
           />
         </Button.Group>
       </Modal.Actions>
@@ -87,6 +88,7 @@ class Backup extends React.PureComponent<Props, State> {
                 isError={!isPassValid}
                 label={t('password')}
                 onChange={this.onChangePass}
+                onEnter={this.submit}
                 tabIndex={0}
                 value={password}
               />
diff --git a/packages/app-accounts/src/modals/ChangePass.tsx b/packages/app-accounts/src/modals/ChangePass.tsx
index fe30667a94..5285a41421 100644
--- a/packages/app-accounts/src/modals/ChangePass.tsx
+++ b/packages/app-accounts/src/modals/ChangePass.tsx
@@ -5,7 +5,7 @@
 import { I18nProps } from '@polkadot/ui-app/types';
 
 import React from 'react';
-import { AddressRow, Button, Modal, Password } from '@polkadot/ui-app';
+import { AddressRow, Button, Modal, Password, TxComponent } from '@polkadot/ui-app';
 import { ActionStatus } from '@polkadot/ui-app/Status/types';
 import keyring from '@polkadot/ui-keyring';
 
@@ -23,7 +23,7 @@ type State = {
   oldPass: string
 };
 
-class ChangePass extends React.PureComponent<Props, State> {
+class ChangePass extends TxComponent<Props, State> {
   state: State = {
     isNewValid: false,
     isOldValid: false,
@@ -62,6 +62,7 @@ class ChangePass extends React.PureComponent<Props, State> {
             isPrimary
             label={t('Change')}
             onClick={this.doChange}
+            ref={this.button}
           />
         </Button.Group>
       </Modal.Actions>
@@ -98,6 +99,7 @@ class ChangePass extends React.PureComponent<Props, State> {
                 isError={!isNewValid}
                 label={t('your new password')}
                 onChange={this.onChangeNew}
+                onEnter={this.submit}
                 tabIndex={2}
                 value={newPass}
               />
diff --git a/packages/app-address-book/src/Creator.tsx b/packages/app-address-book/src/Creator.tsx
index 9fb1c1b4c3..f19d4c8a63 100644
--- a/packages/app-address-book/src/Creator.tsx
+++ b/packages/app-address-book/src/Creator.tsx
@@ -7,7 +7,7 @@ import { ComponentProps } from './types';
 
 import React from 'react';
 
-import { AddressSummary, Button, Input, InputTags } from '@polkadot/ui-app';
+import { AddressSummary, Button, Input, InputTags, TxComponent } from '@polkadot/ui-app';
 import { ActionStatus } from '@polkadot/ui-app/Status/types';
 import { InputAddress } from '@polkadot/ui-app/InputAddress';
 import keyring from '@polkadot/ui-keyring';
@@ -26,7 +26,7 @@ type State = {
   tags: Array<string>
 };
 
-class Creator extends React.PureComponent<Props, State> {
+class Creator extends TxComponent<Props, State> {
   state: State;
 
   constructor (props: Props) {
@@ -69,6 +69,7 @@ class Creator extends React.PureComponent<Props, State> {
           isPrimary
           onClick={this.onCommit}
           label={t('Save')}
+          ref={this.button}
         />
       </Button.Group>
     );
@@ -88,6 +89,7 @@ class Creator extends React.PureComponent<Props, State> {
             isError={!isAddressValid}
             label={t('address')}
             onChange={this.onChangeAddress}
+            onEnter={this.submit}
             value={address}
           />
         </div>
@@ -98,6 +100,7 @@ class Creator extends React.PureComponent<Props, State> {
             isError={!isNameValid}
             label={t('name')}
             onChange={this.onChangeName}
+            onEnter={this.submit}
             value={name}
           />
         </div>
@@ -127,7 +130,7 @@ class Creator extends React.PureComponent<Props, State> {
 
   nextState (newState: State, allowEdit: boolean = false): void {
     this.setState(
-      (prevState: State, props: Props): State => {
+      (prevState: State): State => {
         let { address = prevState.address, name = prevState.name, tags = prevState.tags } = newState;
         let isAddressValid = true;
         let isAddressExisting = false;
diff --git a/packages/app-address-book/src/Editor.tsx b/packages/app-address-book/src/Editor.tsx
index 1d4a1ed298..bdeefb4588 100644
--- a/packages/app-address-book/src/Editor.tsx
+++ b/packages/app-address-book/src/Editor.tsx
@@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import { ComponentProps } from './types';
 
 import React from 'react';
-import { AddressSummary, Button, Input, InputAddress, InputTags } from '@polkadot/ui-app';
+import { AddressSummary, Button, Input, InputAddress, InputTags, TxComponent } from '@polkadot/ui-app';
 import { ActionStatus } from '@polkadot/ui-app/Status/types';
 import keyring from '@polkadot/ui-keyring';
 
@@ -24,7 +24,7 @@ type State = {
   tags: Array<string>
 };
 
-class Editor extends React.PureComponent<Props, State> {
+class Editor extends TxComponent<Props, State> {
   state: State;
 
   constructor (props: Props) {
@@ -76,6 +76,7 @@ class Editor extends React.PureComponent<Props, State> {
           isPrimary
           onClick={this.onCommit}
           label={t('Save')}
+          ref={this.button}
         />
       </Button.Group>
     );
@@ -115,6 +116,7 @@ class Editor extends React.PureComponent<Props, State> {
               help={t('Name associated with the selected contact. You can change it here. This name will be changed across all the apps.')}
               label={t('name')}
               onChange={this.onChangeName}
+              onEnter={this.submit}
               value={editedName}
             />
           </div>
diff --git a/packages/app-contracts/src/Call.tsx b/packages/app-contracts/src/Call.tsx
index 4f003de48e..99ed135693 100644
--- a/packages/app-contracts/src/Call.tsx
+++ b/packages/app-contracts/src/Call.tsx
@@ -7,7 +7,7 @@ import { ComponentProps } from './types';
 
 import BN from 'bn.js';
 import React from 'react';
-import { Button, Dropdown, InputAddress, InputBalance, InputNumber, TxButton } from '@polkadot/ui-app';
+import { Button, Dropdown, InputAddress, InputBalance, InputNumber, TxButton, TxComponent } from '@polkadot/ui-app';
 import { ContractAbi } from '@polkadot/types';
 
 import store from './store';
@@ -28,7 +28,7 @@ type State = {
   params: Array<any>
 };
 
-class Call extends React.PureComponent<Props, State> {
+class Call extends TxComponent<Props, State> {
   state: State = {
     accountId: null,
     endowment: new BN(0),
@@ -94,6 +94,7 @@ class Call extends React.PureComponent<Props, State> {
         />
         <Params
           onChange={this.onChangeParams}
+          onEnter={this.sendTx}
           params={
             method && contractAbi && contractAbi.messages[method]
               ? contractAbi.messages[method].args
@@ -111,6 +112,7 @@ class Call extends React.PureComponent<Props, State> {
           isError={!isGasValid}
           label={t('maximum gas allowed')}
           onChange={this.onChangeGas}
+          onEnter={this.sendTx}
         />
         <Button.Group>
           <TxButton
@@ -123,6 +125,7 @@ class Call extends React.PureComponent<Props, State> {
             onSuccess={this.toggleBusy}
             params={this.constructCall}
             tx='contract.call'
+            ref={this.button}
           />
         </Button.Group>
       </div>
diff --git a/packages/app-contracts/src/Code.tsx b/packages/app-contracts/src/Code.tsx
index 6d5c34c0ee..f18e93b434 100644
--- a/packages/app-contracts/src/Code.tsx
+++ b/packages/app-contracts/src/Code.tsx
@@ -8,7 +8,7 @@ import { ComponentProps } from './types';
 
 import BN from 'bn.js';
 import React from 'react';
-import { Button, Input, InputAddress, InputFile, InputNumber, TxButton } from '@polkadot/ui-app';
+import { Button, Input, InputAddress, InputFile, InputNumber, TxButton, TxComponent } from '@polkadot/ui-app';
 import { compactAddLength } from '@polkadot/util';
 import { Hash } from '@polkadot/types';
 
@@ -34,7 +34,7 @@ type State = {
   wasm?: Uint8Array | null
 };
 
-class Deploy extends React.PureComponent<Props, State> {
+class Deploy extends TxComponent<Props, State> {
   state: State = {
     accountId: null,
     gasLimit: new BN(0),
@@ -105,6 +105,7 @@ class Deploy extends React.PureComponent<Props, State> {
           help={t('The maximum amount of gas that can be used by this deployment, if the code requires more, the deployment will fail.')}
           label={t('maximum gas allowed')}
           onChange={this.onChangeGas}
+          onEnter={this.sendTx}
         />
         <Button.Group>
           <TxButton
@@ -117,6 +118,7 @@ class Deploy extends React.PureComponent<Props, State> {
             onSuccess={this.onSuccess}
             params={[gasLimit, wasm]}
             tx='contract.putCode'
+            ref={this.button}
           />
         </Button.Group>
       </>
@@ -136,6 +138,7 @@ class Deploy extends React.PureComponent<Props, State> {
           isError={!isCodeValid}
           label={t('code hash')}
           onChange={this.onChangeHash}
+          onEnter={this.submit}
           value={codeHash}
         />
         <ValidateCode
@@ -150,6 +153,7 @@ class Deploy extends React.PureComponent<Props, State> {
             isPrimary
             label={t('Save')}
             onClick={this.onSave}
+            ref={this.button}
           />
         </Button.Group>
       </>
@@ -172,7 +176,7 @@ class Deploy extends React.PureComponent<Props, State> {
 
   private renderInputName () {
     const { t } = this.props;
-    const { isNameValid, name } = this.state;
+    const { isNameValid, isNew, name } = this.state;
 
     return (
       <Input
@@ -180,6 +184,7 @@ class Deploy extends React.PureComponent<Props, State> {
         isError={!isNameValid}
         label={t('code bundle name')}
         onChange={this.onChangeName}
+        onEnter={this[isNew ? 'sendTx' : 'submit']}
         value={name}
       />
     );
diff --git a/packages/app-contracts/src/Instantiate.tsx b/packages/app-contracts/src/Instantiate.tsx
index 9a925a0e43..4eabe3f8da 100644
--- a/packages/app-contracts/src/Instantiate.tsx
+++ b/packages/app-contracts/src/Instantiate.tsx
@@ -8,7 +8,7 @@ import { ComponentProps } from './types';
 
 import BN from 'bn.js';
 import React from 'react';
-import { Button, Dropdown, Input, InputAddress, InputBalance, InputNumber, TxButton } from '@polkadot/ui-app';
+import { Button, Dropdown, Input, InputAddress, InputBalance, InputNumber, TxButton, TxComponent } from '@polkadot/ui-app';
 import { AccountId, ContractAbi } from '@polkadot/types';
 
 import ABI from './ABI';
@@ -38,7 +38,7 @@ type State = {
   params: Array<any>
 };
 
-class Create extends React.PureComponent<Props, State> {
+class Create extends TxComponent<Props, State> {
   state: State = {
     accountId: null,
     endowment: new BN(0),
@@ -147,6 +147,7 @@ class Create extends React.PureComponent<Props, State> {
         }
         <Params
           onChange={this.onChangeParams}
+          onEnter={this.sendTx}
           params={
             contractAbi
               ? contractAbi.deploy.args
@@ -158,12 +159,14 @@ class Create extends React.PureComponent<Props, State> {
           isError={!isEndowValid}
           label={t('endowment')}
           onChange={this.onChangeEndowment}
+          onEnter={this.sendTx}
         />
         <InputNumber
           help={t('The maximum amount of gas that can be used by this deployment, if the code requires more, the deployment will fail.')}
           isError={!isGasValid}
           label={t('maximum gas allowed')}
           onChange={this.onChangeGas}
+          onEnter={this.sendTx}
         />
         <Button.Group>
           <TxButton
@@ -176,6 +179,7 @@ class Create extends React.PureComponent<Props, State> {
             onSuccess={this.onSuccess}
             params={this.constructCall}
             tx='contract.create'
+            ref={this.button}
           />
         </Button.Group>
       </>
@@ -195,6 +199,7 @@ class Create extends React.PureComponent<Props, State> {
           isError={!isAddressValid}
           label={t('contract address')}
           onChange={this.onChangeAddress}
+          onEnter={this.submit}
           value={address}
         />
         <ValidateAddr
@@ -209,6 +214,7 @@ class Create extends React.PureComponent<Props, State> {
             isPrimary
             label={t('Save')}
             onClick={this.onSave}
+            ref={this.button}
           />
         </Button.Group>
       </>
@@ -231,7 +237,7 @@ class Create extends React.PureComponent<Props, State> {
 
   private renderInputName () {
     const { t } = this.props;
-    const { isNameValid, name } = this.state;
+    const { isNameValid, isNew, name } = this.state;
 
     return (
       <Input
@@ -239,6 +245,7 @@ class Create extends React.PureComponent<Props, State> {
         isError={!isNameValid}
         label={t('contract name')}
         onChange={this.onChangeName}
+        onEnter={this[isNew ? 'sendTx' : 'submit']}
         value={name}
       />
     );
diff --git a/packages/app-contracts/src/Params.tsx b/packages/app-contracts/src/Params.tsx
index 252fc74ba3..7191a3e131 100644
--- a/packages/app-contracts/src/Params.tsx
+++ b/packages/app-contracts/src/Params.tsx
@@ -11,7 +11,8 @@ import { getTypeDef, TypeDef } from '@polkadot/types';
 
 type Props = {
   params?: ContractABIArgs,
-  onChange: (values: Array<any>) => void
+  onChange: (values: Array<any>) => void,
+  onEnter?: () => void
 };
 
 type State = {
@@ -35,6 +36,7 @@ export default class Params extends React.PureComponent<Props, State> {
   }
 
   render () {
+    const { onEnter } = this.props;
     const { params } = this.state;
 
     if (!params.length) {
@@ -44,6 +46,7 @@ export default class Params extends React.PureComponent<Props, State> {
     return (
       <UIParams
         onChange={this.onChange}
+        onEnter={onEnter}
         params={params}
       />
     );
diff --git a/packages/app-democracy/src/Propose.tsx b/packages/app-democracy/src/Propose.tsx
index a08fa78ea9..8bbfb00df0 100644
--- a/packages/app-democracy/src/Propose.tsx
+++ b/packages/app-democracy/src/Propose.tsx
@@ -11,7 +11,7 @@ import { RouteComponentProps } from 'react-router';
 import { withRouter } from 'react-router-dom';
 import { Method, Proposal } from '@polkadot/types';
 
-import { Button, Extrinsic, InputAddress, InputBalance, TxButton } from '@polkadot/ui-app';
+import { Button, Extrinsic, InputAddress, InputBalance, TxButton, TxComponent } from '@polkadot/ui-app';
 import { withApi, withMulti } from '@polkadot/ui-api';
 
 import translate from './translate';
@@ -27,7 +27,7 @@ type State = {
   isValid: boolean
 };
 
-class Propose extends React.PureComponent<Props, State> {
+class Propose extends TxComponent<Props, State> {
   state: State = {
     method: null,
     value: new BN(0),
@@ -60,6 +60,7 @@ class Propose extends React.PureComponent<Props, State> {
           defaultValue={defaultExtrinsic}
           label={t('propose')}
           onChange={this.onChangeExtrinsic}
+          onEnter={this.sendTx}
         />
         <InputBalance
           className='medium'
@@ -67,6 +68,7 @@ class Propose extends React.PureComponent<Props, State> {
           help={t('The amount that will be bonded to submit the proposal')}
           label={t('value')}
           onChange={this.onChangeValue}
+          onEnter={this.sendTx}
         />
         <Button.Group>
           <TxButton
@@ -79,6 +81,7 @@ class Propose extends React.PureComponent<Props, State> {
               ...(hasValue ? [value] : [])
             ]}
             onSuccess={this.onSubmitProposal}
+            ref={this.button}
           />
         </Button.Group>
       </section>
diff --git a/packages/app-explorer/src/Query.tsx b/packages/app-explorer/src/Query.tsx
index e98b73bac6..a5cccdfee2 100644
--- a/packages/app-explorer/src/Query.tsx
+++ b/packages/app-explorer/src/Query.tsx
@@ -5,7 +5,7 @@
 import { I18nProps } from '@polkadot/ui-app/types';
 
 import React from 'react';
-import { Button, FilterOverlay, Input } from '@polkadot/ui-app';
+import { Button, FilterOverlay, Input, TxComponent } from '@polkadot/ui-app';
 import { isHex } from '@polkadot/util';
 
 import translate from './translate';
@@ -20,7 +20,7 @@ type State = {
   isValid: boolean
 };
 
-class Query extends React.PureComponent<Props, State> {
+class Query extends TxComponent<Props, State> {
   constructor (props: Props) {
     super(props);
 
@@ -41,13 +41,14 @@ class Query extends React.PureComponent<Props, State> {
           isError={!isValid && value.length !== 0}
           placeholder={t('block hash or number to query')}
           onChange={this.setHash}
-          onEnter={this.onQuery}
+          onEnter={this.submit}
           withLabel={false}
         >
           <Button
             icon='play'
             isPrimary
             onClick={this.onQuery}
+            ref={this.button}
           />
         </Input>
       </FilterOverlay>
diff --git a/packages/app-extrinsics/src/Selection.tsx b/packages/app-extrinsics/src/Selection.tsx
index 01ab453233..9ac53600e7 100644
--- a/packages/app-extrinsics/src/Selection.tsx
+++ b/packages/app-extrinsics/src/Selection.tsx
@@ -10,7 +10,7 @@ import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 
 import React from 'react';
 import { Method } from '@polkadot/types';
-import { Button, Extrinsic, InputAddress, Labelled, TxButton } from '@polkadot/ui-app';
+import { Button, Extrinsic, InputAddress, Labelled, TxButton, TxComponent } from '@polkadot/ui-app';
 import { withApi, withMulti } from '@polkadot/ui-api';
 import { Nonce } from '@polkadot/ui-reactive';
 
@@ -29,7 +29,7 @@ type State = {
   accountId: string
 };
 
-class Selection extends React.PureComponent<Props, State> {
+class Selection extends TxComponent<Props, State> {
   state: State = {
     isValid: false,
     isValidUnsigned: false
@@ -76,6 +76,7 @@ class Selection extends React.PureComponent<Props, State> {
           defaultValue={defaultExtrinsic}
           label={t('submit the following extrinsic')}
           onChange={this.onChangeExtrinsic}
+          onEnter={this.sendTx}
         />
         <br></br>
         <Button.Group>
@@ -92,6 +93,7 @@ class Selection extends React.PureComponent<Props, State> {
             isPrimary
             label={t('Submit Transaction')}
             extrinsic={extrinsic}
+            ref={this.button}
           />
         </Button.Group>
       </div>
diff --git a/packages/app-js/src/ActionButtons.tsx b/packages/app-js/src/ActionButtons.tsx
index 352e082401..19d7e195a7 100644
--- a/packages/app-js/src/ActionButtons.tsx
+++ b/packages/app-js/src/ActionButtons.tsx
@@ -6,7 +6,7 @@ import { BareProps, I18nProps } from '@polkadot/ui-app/types';
 
 import React from 'react';
 import { Button as SUIB, Popup } from 'semantic-ui-react';
-import { Button, Input } from '@polkadot/ui-app';
+import { Button, Input, TxComponent } from '@polkadot/ui-app';
 
 import translate from './translate';
 
@@ -27,7 +27,7 @@ type State = {
   snippetName: string
 };
 
-class ActionButtons extends React.PureComponent<Props, State> {
+class ActionButtons extends TxComponent<Props, State> {
   state: State = {
     isOpen: false,
     shareText: this.props.t('Generate link to share code example'),
@@ -91,6 +91,7 @@ class ActionButtons extends React.PureComponent<Props, State> {
               autoFocus={true}
               onBlur={this.onPopupClose}
               onChange={this.onChangeName}
+              onEnter={this.submit}
               maxLength={50}
               min={1}
               placeholder={t('Name your example')}
@@ -111,6 +112,7 @@ class ActionButtons extends React.PureComponent<Props, State> {
           isCircular
           isPositive
           onClick={runJs}
+          ref={this.button}
         />
         <Button
           icon='close'
diff --git a/packages/app-staking/src/Account/Bond.tsx b/packages/app-staking/src/Account/Bond.tsx
index 6361410ade..6c79311182 100644
--- a/packages/app-staking/src/Account/Bond.tsx
+++ b/packages/app-staking/src/Account/Bond.tsx
@@ -9,7 +9,7 @@ import { CalculateBalanceProps } from '../types';
 import BN from 'bn.js';
 import React from 'react';
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-import { Button, InputAddress, InputBalance, Modal, TxButton, Dropdown } from '@polkadot/ui-app';
+import { Button, Dropdown, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/ui-app';
 import { withCalls, withApi, withMulti } from '@polkadot/ui-api';
 import { calcSignatureLength } from '@polkadot/ui-signer/Checks';
 import { ZERO_BALANCE, ZERO_FEES } from '@polkadot/ui-signer/Checks/constants';
@@ -41,7 +41,7 @@ const stashOptions = [
 
 const ZERO = new BN(0);
 
-class Bond extends React.PureComponent<Props, State> {
+class Bond extends TxComponent<Props, State> {
   state: State;
 
   constructor (props: Props) {
@@ -105,6 +105,7 @@ class Bond extends React.PureComponent<Props, State> {
               label={t('Bond')}
               onClick={onClose}
               extrinsic={extrinsic}
+              ref={this.button}
             />
           </Button.Group>
         </Modal.Actions>
@@ -151,6 +152,7 @@ class Bond extends React.PureComponent<Props, State> {
             label={t('value bonded')}
             maxValue={maxBalance}
             onChange={this.onChangeValue}
+            onEnter={this.sendTx}
             withMax
           />
           <Dropdown
diff --git a/packages/app-staking/src/Account/BondExtra.tsx b/packages/app-staking/src/Account/BondExtra.tsx
index 855c16617d..3ec831b644 100644
--- a/packages/app-staking/src/Account/BondExtra.tsx
+++ b/packages/app-staking/src/Account/BondExtra.tsx
@@ -8,7 +8,7 @@ import { CalculateBalanceProps } from '../types';
 
 import BN from 'bn.js';
 import React from 'react';
-import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/ui-app';
+import { Button, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/ui-app';
 import { Option, StakingLedger } from '@polkadot/types';
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 import { withCalls, withApi, withMulti } from '@polkadot/ui-api';
@@ -33,7 +33,7 @@ type State = {
 
 const ZERO = new BN(0);
 
-class BondExtra extends React.PureComponent<Props, State> {
+class BondExtra extends TxComponent<Props, State> {
   state: State = {
     extrinsic: null
   };
@@ -83,6 +83,7 @@ class BondExtra extends React.PureComponent<Props, State> {
               label={t('Bond')}
               onClick={onClose}
               extrinsic={extrinsic}
+              ref={this.button}
             />
           </Button.Group>
         </Modal.Actions>
@@ -113,6 +114,7 @@ class BondExtra extends React.PureComponent<Props, State> {
             label={t('max additional value')}
             maxValue={maxBalance}
             onChange={this.onChangeValue}
+            onEnter={this.sendTx}
             withMax
           />
         </Modal.Content>
diff --git a/packages/app-staking/src/Account/Unbond.tsx b/packages/app-staking/src/Account/Unbond.tsx
index b57215c4a3..2cb1bf93c4 100644
--- a/packages/app-staking/src/Account/Unbond.tsx
+++ b/packages/app-staking/src/Account/Unbond.tsx
@@ -8,7 +8,7 @@ import { ApiProps } from '@polkadot/ui-api/types';
 import BN from 'bn.js';
 import React from 'react';
 import { AccountId, Option, StakingLedger } from '@polkadot/types';
-import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/ui-app';
+import { Button, InputAddress, InputBalance, Modal, TxButton, TxComponent } from '@polkadot/ui-app';
 import { withCalls, withApi, withMulti } from '@polkadot/ui-api';
 
 import translate from '../translate';
@@ -25,7 +25,7 @@ type State = {
   maxUnbond?: BN
 };
 
-class Unbond extends React.PureComponent<Props, State> {
+class Unbond extends TxComponent<Props, State> {
   state: State = {};
 
   componentDidUpdate (prevProps: Props) {
@@ -69,6 +69,7 @@ class Unbond extends React.PureComponent<Props, State> {
               onClick={onClose}
               params={[maxUnbond]}
               tx='staking.unbond'
+              ref={this.button}
             />
           </Button.Group>
         </Modal.Actions>
@@ -99,6 +100,7 @@ class Unbond extends React.PureComponent<Props, State> {
             label={t('unbond amount')}
             maxValue={maxBalance}
             onChange={this.onChangeValue}
+            onEnter={this.sendTx}
             withMax
           />
         </Modal.Content>
diff --git a/packages/app-staking/src/Account/Validating.tsx b/packages/app-staking/src/Account/Validating.tsx
index fbdf821571..b6b6ea18cb 100644
--- a/packages/app-staking/src/Account/Validating.tsx
+++ b/packages/app-staking/src/Account/Validating.tsx
@@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import BN from 'bn.js';
 import React from 'react';
 import { ValidatorPrefs } from '@polkadot/types';
-import { Button, InputAddress, InputBalance, InputNumber, Modal, TxButton } from '@polkadot/ui-app';
+import { Button, InputAddress, InputBalance, InputNumber, Modal, TxButton, TxComponent } from '@polkadot/ui-app';
 
 import translate from '../translate';
 
@@ -24,7 +24,7 @@ type State = {
   validatorPayment?: BN
 };
 
-class Staking extends React.PureComponent<Props, State> {
+class Staking extends TxComponent<Props, State> {
   state: State = {
     unstakeThreshold: new BN(3),
     validatorPayment: new BN(0)
@@ -88,6 +88,7 @@ class Staking extends React.PureComponent<Props, State> {
               validatorPayment
             }]}
             tx='staking.validate'
+            ref={this.button}
           />
         </Button.Group>
       </Modal.Actions>
@@ -123,6 +124,7 @@ class Staking extends React.PureComponent<Props, State> {
             help={t('The number of allowed slashes for this validator before being automatically unstaked (maximum of 10 allowed)')}
             label={t('unstake threshold')}
             onChange={this.onChangeThreshold}
+            onEnter={this.sendTx}
             value={
               unstakeThreshold
                 ? unstakeThreshold.toString()
@@ -134,6 +136,7 @@ class Staking extends React.PureComponent<Props, State> {
             help={t('Reward that validator takes up-front, the remainder is split between themselves and nominators')}
             label={t('payment preferences')}
             onChange={this.onChangePayment}
+            onEnter={this.sendTx}
             value={
               validatorPayment
                 ? validatorPayment.toString()
diff --git a/packages/app-storage/src/Query.tsx b/packages/app-storage/src/Query.tsx
index 284c4f2b2a..805b6af709 100644
--- a/packages/app-storage/src/Query.tsx
+++ b/packages/app-storage/src/Query.tsx
@@ -84,7 +84,7 @@ class Query extends React.PureComponent<Props, State> {
     };
   }
 
-  static getDerivedStateFromProps ({ value }: Props, prevState: State): State | null {
+  static getDerivedStateFromProps ({ value }: Props): State | null {
     const Component = Query.getCachedComponent(value).Component;
     const inputs: Array<React.ReactNode> = isU8a(value.key)
       ? []
diff --git a/packages/app-storage/src/Selection/Modules.tsx b/packages/app-storage/src/Selection/Modules.tsx
index c3c5873186..bbcd8b8061 100644
--- a/packages/app-storage/src/Selection/Modules.tsx
+++ b/packages/app-storage/src/Selection/Modules.tsx
@@ -10,7 +10,7 @@ import { ApiProps } from '@polkadot/ui-api/types';
 import { ComponentProps } from '../types';
 
 import React from 'react';
-import { Button, InputStorage } from '@polkadot/ui-app';
+import { Button, InputStorage, TxComponent } from '@polkadot/ui-app';
 import Params from '@polkadot/ui-params';
 import { withApi, withMulti } from '@polkadot/ui-api';
 import { isUndefined } from '@polkadot/util';
@@ -26,7 +26,7 @@ type State = {
   params: Array<{ type: TypeDef }>
 };
 
-class Modules extends React.PureComponent<Props, State> {
+class Modules extends TxComponent<Props, State> {
   private defaultValue: any;
   state: State;
 
@@ -59,6 +59,7 @@ class Modules extends React.PureComponent<Props, State> {
           <Params
             key={`${section}.${method}:params` /* force re-render on change */}
             onChange={this.onChangeParams}
+            onEnter={this.submit}
             params={params}
           />
         </div>
@@ -68,6 +69,7 @@ class Modules extends React.PureComponent<Props, State> {
             isDisabled={!isValid}
             isPrimary
             onClick={this.onAdd}
+            ref={this.button}
           />
         </div>
       </section>
diff --git a/packages/app-storage/src/Selection/Raw.tsx b/packages/app-storage/src/Selection/Raw.tsx
index f9775b69be..81ccab538e 100644
--- a/packages/app-storage/src/Selection/Raw.tsx
+++ b/packages/app-storage/src/Selection/Raw.tsx
@@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import { ComponentProps } from '../types';
 
 import React from 'react';
-import { Button, Input } from '@polkadot/ui-app';
+import { Button, Input, TxComponent } from '@polkadot/ui-app';
 
 import translate from '../translate';
 import { u8aToU8a } from '@polkadot/util';
@@ -19,7 +19,7 @@ type State = {
   key: Uint8Array
 };
 
-class Raw extends React.PureComponent<Props, State> {
+class Raw extends TxComponent<Props, State> {
   state: State = {
     isValid: false,
     key: new Uint8Array([])
@@ -36,6 +36,7 @@ class Raw extends React.PureComponent<Props, State> {
             autoFocus
             label={t('hex-encoded storage key')}
             onChange={this.onChangeKey}
+            onEnter={this.submit}
           />
         </div>
         <div className='storage--actionrow-buttons'>
@@ -44,6 +45,7 @@ class Raw extends React.PureComponent<Props, State> {
             isDisabled={!isValid}
             isPrimary
             onClick={this.onAdd}
+            ref={this.button}
           />
         </div>
       </section>
diff --git a/packages/app-sudo/src/Sudo.tsx b/packages/app-sudo/src/Sudo.tsx
index 1aa58b341a..cdb2ffd5f1 100644
--- a/packages/app-sudo/src/Sudo.tsx
+++ b/packages/app-sudo/src/Sudo.tsx
@@ -8,7 +8,7 @@ import { ComponentProps } from './types';
 
 import React from 'react';
 import { Method, Proposal } from '@polkadot/types';
-import { Button, Icon, Extrinsic, TxButton } from '@polkadot/ui-app';
+import { Button, Icon, Extrinsic, TxButton, TxComponent } from '@polkadot/ui-app';
 import { withApi, withMulti } from '@polkadot/ui-api';
 
 import translate from './translate';
@@ -22,7 +22,7 @@ type State = {
   isValid: boolean
 };
 
-class Propose extends React.PureComponent<Props> {
+class Propose extends TxComponent<Props, State> {
   state: State = {
     method: null,
     isValid: false
@@ -46,6 +46,7 @@ class Propose extends React.PureComponent<Props> {
             defaultValue={defaultExtrinsic}
             label={t('submit the following change')}
             onChange={this.onChangeExtrinsic}
+            onEnter={this.sendTx}
           />
           <br />
           <Button.Group>
@@ -55,6 +56,7 @@ class Propose extends React.PureComponent<Props> {
               tx='sudo.sudo'
               isDisabled={!method || !isValid}
               params={method ? [new Proposal(method)] : []}
+              ref={this.button}
             />
           </Button.Group>
         </section>
diff --git a/packages/app-toolbox/src/Rpc/Selection.tsx b/packages/app-toolbox/src/Rpc/Selection.tsx
index eee7ac40b5..bca145abc2 100644
--- a/packages/app-toolbox/src/Rpc/Selection.tsx
+++ b/packages/app-toolbox/src/Rpc/Selection.tsx
@@ -10,7 +10,7 @@ import { QueueTx$RpcAdd } from '@polkadot/ui-app/Status/types';
 import React from 'react';
 import rpc from '@polkadot/jsonrpc';
 import { getTypeDef } from '@polkadot/types';
-import { Button, InputRpc } from '@polkadot/ui-app';
+import { Button, InputRpc, TxComponent } from '@polkadot/ui-app';
 import Params from '@polkadot/ui-params';
 
 import translate from './translate';
@@ -28,7 +28,7 @@ type State = {
 
 const defaultMethod = rpc.author.methods.submitExtrinsic;
 
-class Selection extends React.PureComponent<Props, State> {
+class Selection extends TxComponent<Props, State> {
   state: State = {
     isValid: false,
     accountId: null,
@@ -55,6 +55,7 @@ class Selection extends React.PureComponent<Props, State> {
         <Params
           key={`${rpc.section}.${rpc.method}:params` /* force re-render on change */}
           onChange={this.onChangeValues}
+          onEnter={this.submit}
           params={params}
         />
         <Button.Group>
@@ -63,6 +64,7 @@ class Selection extends React.PureComponent<Props, State> {
             isPrimary
             onClick={this.onSubmit}
             label={t('Submit RPC call')}
+            ref={this.button}
           />
         </Button.Group>
       </section>
diff --git a/packages/app-toolbox/src/Unlock.tsx b/packages/app-toolbox/src/Unlock.tsx
index 1ab57271a8..6350a8db30 100644
--- a/packages/app-toolbox/src/Unlock.tsx
+++ b/packages/app-toolbox/src/Unlock.tsx
@@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import { KeyringPair } from '@polkadot/keyring/types';
 
 import React from 'react';
-import { AddressRow, Button, Modal, Password } from '@polkadot/ui-app';
+import { AddressRow, Button, Modal, Password, TxComponent } from '@polkadot/ui-app';
 
 import translate from './translate';
 
@@ -21,14 +21,14 @@ type State = {
   unlockError: string | null
 };
 
-class Unlock extends React.PureComponent<Props, State> {
+class Unlock extends TxComponent<Props, State> {
   state: State = {
     address: '',
     password: '',
     unlockError: null
   };
 
-  static getDerivedStateFromProps ({ pair }: Props, prevState: State): State {
+  static getDerivedStateFromProps ({ pair }: Props): State {
     return {
       address: pair
         ? pair.address()
@@ -74,6 +74,7 @@ class Unlock extends React.PureComponent<Props, State> {
             isPrimary
             onClick={this.onUnlock}
             label={t('Unlock')}
+            ref={this.button}
           />
         </Button.Group>
       </Modal.Actions>
@@ -98,6 +99,7 @@ class Unlock extends React.PureComponent<Props, State> {
               help={t('The account\'s password specified at the creation of this account.')}
               label={t('password')}
               onChange={this.onChangePassword}
+              onEnter={this.submit}
               value={password}
             />
           </div>
diff --git a/packages/app-transfer/src/Submit.tsx b/packages/app-transfer/src/Submit.tsx
deleted file mode 100644
index 8b343aac2b..0000000000
--- a/packages/app-transfer/src/Submit.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-// Copyright 2017-2019 @polkadot/app-transfer 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 { IExtrinsic } from '@polkadot/types/types';
-import { I18nProps } from '@polkadot/ui-app/types';
-
-import React from 'react';
-import { Index } from '@polkadot/types';
-import { Button, TxButton } from '@polkadot/ui-app';
-import { withCalls, withMulti } from '@polkadot/ui-api';
-
-import translate from './translate';
-
-type Props = I18nProps & {
-  isDisabled: boolean,
-  accountId?: string,
-  system_accountNonce?: Index,
-  extrinsic: IExtrinsic | null
-};
-
-class Submit extends React.PureComponent<Props> {
-  render () {
-    const { accountId, system_accountNonce, extrinsic, isDisabled, t } = this.props;
-
-    return (
-      <Button.Group>
-        <TxButton
-          accountId={accountId}
-          accountNonce={system_accountNonce}
-          isDisabled={isDisabled}
-          isPrimary
-          label={t('Make Transfer')}
-          extrinsic={extrinsic}
-        />
-      </Button.Group>
-    );
-  }
-}
-
-export default withMulti(
-  Submit,
-  translate,
-  withCalls<Props>(
-    ['query.system.accountNonce', { paramName: 'accountId' }]
-  )
-);
diff --git a/packages/app-transfer/src/Transfer.tsx b/packages/app-transfer/src/Transfer.tsx
index c408821d52..70ee01e93d 100644
--- a/packages/app-transfer/src/Transfer.tsx
+++ b/packages/app-transfer/src/Transfer.tsx
@@ -10,19 +10,17 @@ import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-import { AddressSummary, InputAddress, InputBalance } from '@polkadot/ui-app';
+import { AddressSummary, Button, InputAddress, InputBalance, TxButton, TxComponent } from '@polkadot/ui-app';
 import { withApi, withCalls, withMulti } from '@polkadot/ui-api';
 import keyring from '@polkadot/ui-keyring';
 import Checks, { calcSignatureLength } from '@polkadot/ui-signer/Checks';
 import { ZERO_FEES } from '@polkadot/ui-signer/Checks/constants';
 
-import Submit from './Submit';
 import translate from './translate';
 
 type Props = I18nProps & ApiProps & {
   balances_fees?: DerivedFees,
-  balances_votingBalance?: DerivedBalances,
-  system_accountNonce?: BN
+  balances_votingBalance?: DerivedBalances
 };
 
 type State = {
@@ -56,7 +54,7 @@ const Wrapper = styled.div`
   }
 `;
 
-class Transfer extends React.PureComponent<Props, State> {
+class Transfer extends TxComponent<Props, State> {
   state: State = {
     accountId: null,
     amount: ZERO,
@@ -109,6 +107,7 @@ class Transfer extends React.PureComponent<Props, State> {
               label={t('amount')}
               maxValue={maxBalance}
               onChange={this.onChangeAmount}
+              onEnter={this.sendTx}
               withMax
             />
             <Checks
@@ -117,11 +116,16 @@ class Transfer extends React.PureComponent<Props, State> {
               isSendable
               onChange={this.onChangeFees}
             />
-            <Submit
-              accountId={accountId}
-              isDisabled={!hasAvailable}
-              extrinsic={extrinsic}
-            />
+            <Button.Group>
+              <TxButton
+                accountId={accountId}
+                isDisabled={!hasAvailable}
+                isPrimary
+                label={t('Make Transfer')}
+                extrinsic={extrinsic}
+                ref={this.button}
+              />
+            </Button.Group>
           </div>
           {this.renderAddress(recipientId, 'large')}
         </div>
diff --git a/packages/ui-api/src/with/api.tsx b/packages/ui-api/src/with/api.tsx
index f65b02320f..07ccf2fba6 100644
--- a/packages/ui-api/src/with/api.tsx
+++ b/packages/ui-api/src/with/api.tsx
@@ -12,6 +12,8 @@ import { ApiConsumer } from '../ApiContext';
 
 export default function withApi <P extends ApiProps> (Inner: React.ComponentType<P>, defaultProps: DefaultProps = {}): React.ComponentType<any> {
   return class WithApi extends React.PureComponent<Subtract<P, ApiProps>> {
+    component: any = React.createRef();
+
     render () {
       return (
         <ApiConsumer>
@@ -24,6 +26,7 @@ export default function withApi <P extends ApiProps> (Inner: React.ComponentType
                 {...defaultProps}
                 {...apiProps}
                 {...this.props}
+                ref={this.component}
               />
             );
           }}
diff --git a/packages/ui-app/src/Button/Button.tsx b/packages/ui-app/src/Button/Button.tsx
index c053b2fa30..0f73f6bd5c 100644
--- a/packages/ui-app/src/Button/Button.tsx
+++ b/packages/ui-app/src/Button/Button.tsx
@@ -41,4 +41,11 @@ export default class Button extends React.PureComponent<ButtonProps> {
         </SUIButton>
       );
   }
+
+  click = () => {
+    const { onClick } = this.props;
+    if (onClick) {
+      onClick();
+    }
+  }
 }
diff --git a/packages/ui-app/src/Button/index.tsx b/packages/ui-app/src/Button/index.tsx
index 53692b9bd0..68d8b08e2c 100644
--- a/packages/ui-app/src/Button/index.tsx
+++ b/packages/ui-app/src/Button/index.tsx
@@ -11,8 +11,8 @@ import Divider from './Divider';
 import Group from './Group';
 import Or from './Or';
 
-(Button as ButtonType).Divider = Divider;
-(Button as ButtonType).Group = Group;
-(Button as ButtonType).Or = Or;
+(Button as any as ButtonType).Divider = Divider;
+(Button as any as ButtonType).Group = Group;
+(Button as any as ButtonType).Or = Or;
 
-export default (Button as ButtonType);
+export default (Button as any as ButtonType);
diff --git a/packages/ui-app/src/Button/types.ts b/packages/ui-app/src/Button/types.ts
index 4d380a6c12..ce6bbbe709 100644
--- a/packages/ui-app/src/Button/types.ts
+++ b/packages/ui-app/src/Button/types.ts
@@ -19,6 +19,7 @@ export type ButtonProps = BareProps & {
   isPrimary?: boolean,
   label?: React.ReactNode,
   onClick?: () => void | Promise<void>,
+  ref?: any,
   size?: Button$Sizes,
   tabIndex?: number
 };
diff --git a/packages/ui-app/src/Extrinsic.tsx b/packages/ui-app/src/Extrinsic.tsx
index 885cded2ea..f0fdf00628 100644
--- a/packages/ui-app/src/Extrinsic.tsx
+++ b/packages/ui-app/src/Extrinsic.tsx
@@ -24,6 +24,7 @@ type Props = BareProps & ApiProps & {
   isPrivate?: boolean,
   label?: React.ReactNode,
   onChange: (method?: Method) => void,
+  onEnter: () => void,
   withLabel?: boolean
 };
 
@@ -47,7 +48,7 @@ class ExtrinsicDisplay extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { defaultValue, isDisabled, isError, isPrivate, label, withLabel } = this.props;
+    const { defaultValue, isDisabled, isError, isPrivate, label, onEnter, withLabel } = this.props;
     const { methodfn: { method, section }, params } = this.state;
 
     return (
@@ -64,6 +65,7 @@ class ExtrinsicDisplay extends React.PureComponent<Props, State> {
         <Params
           key={`${section}.${method}:params` /* force re-render on change */}
           onChange={this.onChangeValues}
+          onEnter={onEnter}
           overrides={paramComponents}
           params={params}
         />
diff --git a/packages/ui-app/src/Input.tsx b/packages/ui-app/src/Input.tsx
index b209940003..5439820ad9 100644
--- a/packages/ui-app/src/Input.tsx
+++ b/packages/ui-app/src/Input.tsx
@@ -191,6 +191,7 @@ export default class Input extends React.PureComponent<Props, State> {
     }
 
     if (onEnter && event.keyCode === 13) {
+      (event.target as any).blur();
       onEnter();
     }
   }
diff --git a/packages/ui-app/src/InputBalance.tsx b/packages/ui-app/src/InputBalance.tsx
index 53ed1bd262..c7da253056 100644
--- a/packages/ui-app/src/InputBalance.tsx
+++ b/packages/ui-app/src/InputBalance.tsx
@@ -18,6 +18,7 @@ type Props = BareProps & {
   label?: any,
   maxValue?: BN,
   onChange?: (value?: BN) => void,
+  onEnter?: () => void,
   placeholder?: string,
   value?: BN | string,
   withEllipsis?: boolean,
@@ -29,7 +30,7 @@ const DEFAULT_BITLENGTH = BitLengthOption.CHAIN_SPEC as BitLength;
 
 export default class InputBalance extends React.PureComponent<Props> {
   render () {
-    const { autoFocus, className, defaultValue, help, isDisabled, isError, label, maxValue, onChange, placeholder, style, value, withEllipsis, withLabel, withMax } = this.props;
+    const { autoFocus, className, defaultValue, help, isDisabled, isError, label, maxValue, onChange, onEnter, placeholder, style, value, withEllipsis, withLabel, withMax } = this.props;
 
     return (
       <InputNumber
@@ -44,6 +45,7 @@ export default class InputBalance extends React.PureComponent<Props> {
         label={label}
         maxValue={maxValue}
         onChange={onChange}
+        onEnter={onEnter}
         placeholder={placeholder}
         style={style}
         value={value}
diff --git a/packages/ui-app/src/InputNumber.tsx b/packages/ui-app/src/InputNumber.tsx
index 5a796d375a..051d3ac77c 100644
--- a/packages/ui-app/src/InputNumber.tsx
+++ b/packages/ui-app/src/InputNumber.tsx
@@ -28,6 +28,7 @@ type Props = BareProps & I18nProps & {
   maxLength?: number,
   maxValue?: BN,
   onChange?: (value?: BN) => void,
+  onEnter?: () => void,
   placeholder?: string,
   value?: BN | string,
   withEllipsis?: boolean,
@@ -90,7 +91,7 @@ class InputNumber extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { bitLength = DEFAULT_BITLENGTH, className, help, isSi, isDisabled, isError = false, maxLength, maxValue, style, withMax, t } = this.props;
+    const { bitLength = DEFAULT_BITLENGTH, className, help, isSi, isDisabled, isError = false, maxLength, maxValue, onEnter, style, withMax, t } = this.props;
     const { isValid, value } = this.state;
     const maxValueLength = this.maxValue(bitLength).toString().length - 1;
 
@@ -104,6 +105,7 @@ class InputNumber extends React.PureComponent<Props, State> {
         isError={!isValid || isError}
         maxLength={maxLength || maxValueLength}
         onChange={this.onChange}
+        onEnter={onEnter}
         onKeyDown={this.onKeyDown}
         onKeyUp={this.onKeyUp}
         onPaste={this.onPaste}
diff --git a/packages/ui-app/src/Params/Call.tsx b/packages/ui-app/src/Params/Call.tsx
index f886f3f539..5a5b673f21 100644
--- a/packages/ui-app/src/Params/Call.tsx
+++ b/packages/ui-app/src/Params/Call.tsx
@@ -14,7 +14,7 @@ type Props = ApiProps & BaseProps;
 
 class Call extends React.PureComponent<Props> {
   render () {
-    const { apiDefaultTx, api, className, isDisabled, isError, label, onChange, style, withLabel } = this.props;
+    const { apiDefaultTx, api, className, isDisabled, isError, label, onChange, onEnter, style, withLabel } = this.props;
     const defaultValue = (() => {
       try {
         return api.tx.balances.transfer;
@@ -32,6 +32,7 @@ class Call extends React.PureComponent<Props> {
         isPrivate={false}
         label={label}
         onChange={onChange}
+        onEnter={onEnter}
         style={style}
         withLabel={withLabel}
       />
diff --git a/packages/ui-app/src/Params/Extrinsic.tsx b/packages/ui-app/src/Params/Extrinsic.tsx
index f80ed7a381..5f37815d0a 100644
--- a/packages/ui-app/src/Params/Extrinsic.tsx
+++ b/packages/ui-app/src/Params/Extrinsic.tsx
@@ -4,7 +4,7 @@
 
 import { MethodFunction } from '@polkadot/types/primitive/Method';
 import { I18nProps } from '@polkadot/ui-app/types';
-import { RawParam$OnChange } from '@polkadot/ui-params/types';
+import { RawParam$OnChange, RawParam$OnEnter } from '@polkadot/ui-params/types';
 
 import React from 'react';
 import { Method } from '@polkadot/types';
@@ -19,12 +19,13 @@ type Props = I18nProps & {
   isPrivate: boolean,
   label: string,
   onChange?: RawParam$OnChange,
+  onEnter?: RawParam$OnEnter,
   withLabel?: boolean
 };
 
 class ExtrinsicDisplay extends React.PureComponent<Props> {
   render () {
-    const { className, defaultValue, isDisabled, isError, isPrivate, label, style, t, withLabel } = this.props;
+    const { className, defaultValue, isDisabled, isError, isPrivate, label, onEnter, style, t, withLabel } = this.props;
 
     return (
       <BaseExtrinsic
@@ -39,6 +40,7 @@ class ExtrinsicDisplay extends React.PureComponent<Props> {
           }
         })}
         onChange={this.onChange}
+        onEnter={onEnter}
         style={style}
         withLabel={withLabel}
       />
diff --git a/packages/ui-app/src/Params/Proposal.tsx b/packages/ui-app/src/Params/Proposal.tsx
index a842ea101b..19655be386 100644
--- a/packages/ui-app/src/Params/Proposal.tsx
+++ b/packages/ui-app/src/Params/Proposal.tsx
@@ -15,7 +15,7 @@ type Props = ApiProps & BaseProps;
 
 class ProposalDisplay extends React.PureComponent<Props> {
   render () {
-    const { apiDefaultTx, api, className, isDisabled, isError, label, style, withLabel } = this.props;
+    const { apiDefaultTx, api, className, isDisabled, isError, label, onEnter, style, withLabel } = this.props;
     const defaultValue = (() => {
       try {
         return api.tx.consensus.setCode;
@@ -33,6 +33,7 @@ class ProposalDisplay extends React.PureComponent<Props> {
         isPrivate
         label={label}
         onChange={this.onChange}
+        onEnter={onEnter}
         style={style}
         withLabel={withLabel}
       />
diff --git a/packages/ui-app/src/Password.tsx b/packages/ui-app/src/Password.tsx
index 5d44482f96..68b1461d3d 100644
--- a/packages/ui-app/src/Password.tsx
+++ b/packages/ui-app/src/Password.tsx
@@ -21,7 +21,7 @@ type Props = BareProps & {
   label?: string,
   name?: string,
   onChange: (value: string) => void,
-  onKeyDown?: (event: React.KeyboardEvent<Element>) => void,
+  onEnter?: () => void,
   tabIndex?: number,
   value: any,
   withLabel?: boolean
@@ -37,7 +37,7 @@ export default class Password extends React.PureComponent<Props, State> {
   };
 
   render () {
-    const { autoFocus, children, className, defaultValue, help, isDisabled, isError, label, name, onChange, onKeyDown, style, tabIndex, value, withLabel } = this.props;
+    const { autoFocus, children, className, defaultValue, help, isDisabled, isError, label, name, onChange, onEnter, style, tabIndex, value, withLabel } = this.props;
     const { isVisible } = this.state;
 
     return (
@@ -53,7 +53,7 @@ export default class Password extends React.PureComponent<Props, State> {
         maxLength={MAX_PASS_LEN}
         name={name}
         onChange={onChange}
-        onKeyDown={onKeyDown}
+        onEnter={onEnter}
         style={style}
         tabIndex={tabIndex}
         type={
diff --git a/packages/ui-app/src/TxButton.tsx b/packages/ui-app/src/TxButton.tsx
index 2b7168b9a1..ad8bd09786 100644
--- a/packages/ui-app/src/TxButton.tsx
+++ b/packages/ui-app/src/TxButton.tsx
@@ -78,7 +78,7 @@ class TxButtonInner extends React.PureComponent<InnerProps> {
     );
   }
 
-  private send = (): void => {
+  send = (): void => {
     const { accountId, api, isUnsigned, onClick, onUpdate, params = [], queueExtrinsic, tx = '', extrinsic: propsExtrinsic } = this.props;
     let extrinsic: any;
 
@@ -130,6 +130,8 @@ class TxButtonInner extends React.PureComponent<InnerProps> {
 }
 
 class TxButton extends React.PureComponent<Props> {
+  button: any = React.createRef();
+
   render () {
     return (
       <QueueConsumer>
@@ -138,11 +140,16 @@ class TxButton extends React.PureComponent<Props> {
             {...this.props}
             queueExtrinsic={queueExtrinsic}
             txqueue={txqueue}
+            ref={this.button}
           />
         )}
       </QueueConsumer>
     );
   }
+
+  send = () => {
+    this.button.current.send();
+  }
 }
 
 export default withApi(TxButton);
diff --git a/packages/ui-app/src/TxComponent.tsx b/packages/ui-app/src/TxComponent.tsx
new file mode 100644
index 0000000000..c95c984c7c
--- /dev/null
+++ b/packages/ui-app/src/TxComponent.tsx
@@ -0,0 +1,27 @@
+// Copyright 2017-2019 @polkadot/app-transfer 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';
+
+export default class TxComponent<P, S> extends React.PureComponent<P, S> {
+  button: any;
+
+  constructor (props: P) {
+    super(props);
+    this.button = React.createRef();
+  }
+
+  sendTx = (): void => {
+    const { component } = this.button.current;
+    if (component) {
+      component.current.send();
+    }
+  }
+
+  submit = (): void => {
+    if (this.button && this.button.current && this.button.current.click) {
+      this.button.current.click();
+    }
+  }
+}
diff --git a/packages/ui-app/src/index.tsx b/packages/ui-app/src/index.tsx
index f6e6436f0f..fff3a7954c 100644
--- a/packages/ui-app/src/index.tsx
+++ b/packages/ui-app/src/index.tsx
@@ -49,5 +49,6 @@ export { default as Tabs } from './Tabs';
 export { default as Tooltip } from './Tooltip';
 export { default as TxButton } from './TxButton';
 export { default as Unlocking } from './Unlocking';
+export { default as TxComponent } from './TxComponent';
 
 export { default as media } from './media';
diff --git a/packages/ui-params/src/Param/Amount.tsx b/packages/ui-params/src/Param/Amount.tsx
index c22a1e6266..4a5605f692 100644
--- a/packages/ui-params/src/Param/Amount.tsx
+++ b/packages/ui-params/src/Param/Amount.tsx
@@ -14,7 +14,7 @@ import Bare from './Bare';
 
 export default class Amount extends React.PureComponent<Props> {
   render () {
-    const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = this.props;
+    const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = this.props;
     const defaultValue = isDisabled
       ? (
         value instanceof AccountIndex
@@ -36,6 +36,7 @@ export default class Amount extends React.PureComponent<Props> {
           label={label}
           min={0}
           onChange={this.onChange}
+          onEnter={onEnter}
           type={
             isDisabled
               ? 'text'
diff --git a/packages/ui-params/src/Param/Balance.tsx b/packages/ui-params/src/Param/Balance.tsx
index fc7db3981a..f97a7ebfe5 100644
--- a/packages/ui-params/src/Param/Balance.tsx
+++ b/packages/ui-params/src/Param/Balance.tsx
@@ -14,7 +14,7 @@ type Props = BareProps;
 
 class Balance extends React.PureComponent<Props> {
   render () {
-    const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = this.props;
+    const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = this.props;
     const defaultValue = new BN((value as BN || '0').toString()).toString(10);
 
     return (
@@ -30,6 +30,7 @@ class Balance extends React.PureComponent<Props> {
           label={label}
           onChange={this.onChange}
           withEllipsis
+          onEnter={onEnter}
           withLabel={withLabel}
         />
       </Bare>
diff --git a/packages/ui-params/src/Param/BaseBytes.tsx b/packages/ui-params/src/Param/BaseBytes.tsx
index 5b39b0713f..c3ca1de2f7 100644
--- a/packages/ui-params/src/Param/BaseBytes.tsx
+++ b/packages/ui-params/src/Param/BaseBytes.tsx
@@ -19,12 +19,12 @@ type Props = BaseProps & {
   withLength?: boolean
 };
 
-const defaultValidate = (u8a: Uint8Array): boolean =>
+const defaultValidate = (): boolean =>
   true;
 
 export default class BaseBytes extends React.PureComponent<Props> {
   render () {
-    const { children, className, defaultValue: { value }, isDisabled, isError, label, size = 'full', style, withLabel } = this.props;
+    const { children, className, defaultValue: { value }, isDisabled, isError, label, onEnter, size = 'full', style, withLabel } = this.props;
     const defaultValue = value
       ? (
         isHex(value)
@@ -46,6 +46,7 @@ export default class BaseBytes extends React.PureComponent<Props> {
           isError={isError}
           label={label}
           onChange={this.onChange}
+          onEnter={onEnter}
           placeholder='0x...'
           type='text'
           withEllipsis
diff --git a/packages/ui-params/src/Param/Bytes.tsx b/packages/ui-params/src/Param/Bytes.tsx
index fd80f2d20f..be73b7e529 100644
--- a/packages/ui-params/src/Param/Bytes.tsx
+++ b/packages/ui-params/src/Param/Bytes.tsx
@@ -30,7 +30,7 @@ export default class Bytes extends React.PureComponent<Props, State> {
   }
 
   private renderInput () {
-    const { className, defaultValue, isDisabled, isError, label, name, onChange, style, type, withLabel } = this.props;
+    const { className, defaultValue, isDisabled, isError, label, name, onChange, onEnter, style, type, withLabel } = this.props;
 
     return (
       <BaseBytes
@@ -42,6 +42,7 @@ export default class Bytes extends React.PureComponent<Props, State> {
         length={-1}
         name={name}
         onChange={onChange}
+        onEnter={onEnter}
         size='full'
         style={style}
         type={type}
diff --git a/packages/ui-params/src/Param/Code.tsx b/packages/ui-params/src/Param/Code.tsx
index 5de11280cd..28f65e0a64 100644
--- a/packages/ui-params/src/Param/Code.tsx
+++ b/packages/ui-params/src/Param/Code.tsx
@@ -31,7 +31,7 @@ export default class Code extends React.PureComponent<Props> {
   }
 
   private renderDisabled () {
-    const { className, defaultValue, isError, label, style, type, withLabel } = this.props;
+    const { className, defaultValue, isError, label, onEnter, style, type, withLabel } = this.props;
 
     return (
       <Bytes
@@ -39,6 +39,7 @@ export default class Code extends React.PureComponent<Props> {
         defaultValue={defaultValue}
         isError={isError}
         label={label}
+        onEnter={onEnter}
         style={style}
         type={type}
         withLabel={withLabel}
diff --git a/packages/ui-params/src/Param/Hash.tsx b/packages/ui-params/src/Param/Hash.tsx
index b08242c438..3049d9aab0 100644
--- a/packages/ui-params/src/Param/Hash.tsx
+++ b/packages/ui-params/src/Param/Hash.tsx
@@ -10,7 +10,7 @@ import BaseBytes from './BaseBytes';
 
 export default class Hash extends React.PureComponent<Props> {
   render () {
-    const { className, defaultValue, isDisabled, isError, label, name, onChange, style, type, withLabel } = this.props;
+    const { className, defaultValue, isDisabled, isError, label, name, onChange, onEnter, style, type, withLabel } = this.props;
 
     return (
       <BaseBytes
@@ -22,6 +22,7 @@ export default class Hash extends React.PureComponent<Props> {
         length={32}
         name={name}
         onChange={onChange}
+        onEnter={onEnter}
         size={isDisabled ? 'full' : 'large'}
         style={style}
         type={type}
diff --git a/packages/ui-params/src/Param/KeyValue.tsx b/packages/ui-params/src/Param/KeyValue.tsx
index 09df60a5a6..7613427723 100644
--- a/packages/ui-params/src/Param/KeyValue.tsx
+++ b/packages/ui-params/src/Param/KeyValue.tsx
@@ -34,7 +34,7 @@ export default class KeyValue extends React.PureComponent<Props, State> {
   };
 
   render () {
-    const { className, isDisabled, label, style, withLabel } = this.props;
+    const { className, isDisabled, label, onEnter, style, withLabel } = this.props;
     const { key, value } = this.state;
 
     return (
@@ -57,6 +57,7 @@ export default class KeyValue extends React.PureComponent<Props, State> {
           isDisabled={isDisabled}
           isError={!value.isValid}
           onChange={this.onChangeValue}
+          onEnter={onEnter}
           placeholder='0x...'
           type='text'
           withLabel={withLabel}
diff --git a/packages/ui-params/src/Param/KeyValueArray.tsx b/packages/ui-params/src/Param/KeyValueArray.tsx
index ebfd700d5d..7572703d4b 100644
--- a/packages/ui-params/src/Param/KeyValueArray.tsx
+++ b/packages/ui-params/src/Param/KeyValueArray.tsx
@@ -69,7 +69,7 @@ class KeyValueArray extends React.PureComponent<Props, State> {
   }
 
   private renderReadOnly () {
-    const { className, defaultValue: { value }, label, style } = this.props;
+    const { className, defaultValue: { value }, label, onEnter, style } = this.props;
     const pairs = value as Vector<Pair>;
 
     return (
@@ -93,6 +93,7 @@ class KeyValueArray extends React.PureComponent<Props, State> {
                 key={keyHex}
                 label={keyHex}
                 name={keyHex}
+                onEnter={onEnter}
                 type={BYTES_TYPE}
               />
             );
diff --git a/packages/ui-params/src/Param/Moment.tsx b/packages/ui-params/src/Param/Moment.tsx
index 72b5582c31..6d86cba574 100644
--- a/packages/ui-params/src/Param/Moment.tsx
+++ b/packages/ui-params/src/Param/Moment.tsx
@@ -11,7 +11,7 @@ import Amount from './Amount';
 
 export default class Code extends React.PureComponent<Props> {
   render () {
-    const { className, defaultValue, isDisabled, isError, label, style, type, withLabel } = this.props;
+    const { className, defaultValue, isDisabled, isError, label, onEnter, style, type, withLabel } = this.props;
 
     if (isDisabled) {
       return this.renderDisabled();
@@ -25,6 +25,7 @@ export default class Code extends React.PureComponent<Props> {
         isError={isError}
         label={label}
         onChange={this.onChange}
+        onEnter={onEnter}
         style={style}
         type={type}
         withLabel={withLabel}
diff --git a/packages/ui-params/src/Param/Text.tsx b/packages/ui-params/src/Param/Text.tsx
index e64fa8b7f3..f87deff946 100644
--- a/packages/ui-params/src/Param/Text.tsx
+++ b/packages/ui-params/src/Param/Text.tsx
@@ -11,7 +11,7 @@ import Bare from './Bare';
 
 export default class Text extends React.PureComponent<Props> {
   render () {
-    const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = this.props;
+    const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = this.props;
     const defaultValue = (value || '').toString();
 
     return (
@@ -26,6 +26,7 @@ export default class Text extends React.PureComponent<Props> {
           isError={isError}
           label={label}
           onChange={this.onChange}
+          onEnter={onEnter}
           placeholder='<any string>'
           type='text'
           withLabel={withLabel}
diff --git a/packages/ui-params/src/Param/Tuple.tsx b/packages/ui-params/src/Param/Tuple.tsx
index 0d931774b2..77e37d2169 100644
--- a/packages/ui-params/src/Param/Tuple.tsx
+++ b/packages/ui-params/src/Param/Tuple.tsx
@@ -54,7 +54,7 @@ export default class Tuple extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, isDisabled, style, withLabel } = this.props;
+    const { className, isDisabled, onEnter, style, withLabel } = this.props;
     const { Components, sub, subTypes, values } = this.state;
 
     return (
@@ -69,6 +69,7 @@ export default class Tuple extends React.PureComponent<Props, State> {
             key={index}
             label={sub[index]}
             onChange={this.onChange(index)}
+            onEnter={onEnter}
             type={subTypes[index]}
             withLabel={withLabel}
           />
diff --git a/packages/ui-params/src/Param/Unknown.tsx b/packages/ui-params/src/Param/Unknown.tsx
index 36722cafab..409c55d962 100644
--- a/packages/ui-params/src/Param/Unknown.tsx
+++ b/packages/ui-params/src/Param/Unknown.tsx
@@ -19,7 +19,7 @@ type Props = BareProps & WithTranslation & {
 
 class Unknown extends React.PureComponent<Props> {
   render () {
-    const { className, defaultValue, isDisabled, isError, label, name, onChange, style, t, type } = this.props;
+    const { className, defaultValue, isDisabled, isError, label, name, onChange, onEnter, style, t, type } = this.props;
 
     if (isDisabled) {
       const value = defaultValue && defaultValue.value && defaultValue.value.toString();
@@ -48,6 +48,7 @@ class Unknown extends React.PureComponent<Props> {
         length={-1}
         name={name}
         onChange={onChange}
+        onEnter={onEnter}
         size='full'
         style={style}
         type={type}
diff --git a/packages/ui-params/src/Param/Vector.tsx b/packages/ui-params/src/Param/Vector.tsx
index 78418556d7..7921d1df0b 100644
--- a/packages/ui-params/src/Param/Vector.tsx
+++ b/packages/ui-params/src/Param/Vector.tsx
@@ -53,7 +53,7 @@ class Vector extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, isDisabled, style, type, withLabel } = this.props;
+    const { className, isDisabled, onEnter, style, type, withLabel } = this.props;
     const { Component, values } = this.state;
     const subType = type.sub as TypeDef;
 
@@ -73,6 +73,7 @@ class Vector extends React.PureComponent<Props, State> {
             key={index}
             label={`${index}: ${subType.type}`}
             onChange={this.onChange(index)}
+            onEnter={onEnter}
             type={subType}
             withLabel={withLabel}
           />
diff --git a/packages/ui-params/src/Param/index.tsx b/packages/ui-params/src/Param/index.tsx
index 759ee73ff5..45b309b291 100644
--- a/packages/ui-params/src/Param/index.tsx
+++ b/packages/ui-params/src/Param/index.tsx
@@ -41,7 +41,7 @@ class ParamComponent extends React.PureComponent<Props, State> {
       return null;
     }
 
-    const { className, defaultValue, isDisabled, name, onChange, style, type } = this.props;
+    const { className, defaultValue, isDisabled, name, onChange, onEnter, style, type } = this.props;
 
     return (
       <Component
@@ -56,6 +56,7 @@ class ParamComponent extends React.PureComponent<Props, State> {
         }
         name={name}
         onChange={onChange}
+        onEnter={onEnter}
         style={style}
         type={type}
       />
diff --git a/packages/ui-params/src/index.tsx b/packages/ui-params/src/index.tsx
index 6a41fc9609..9a4d014dd9 100644
--- a/packages/ui-params/src/index.tsx
+++ b/packages/ui-params/src/index.tsx
@@ -23,6 +23,7 @@ type Param = {
 type Props = I18nProps & {
   isDisabled?: boolean,
   onChange?: (value: RawParams) => void,
+  onEnter?: () => void,
   overrides?: ComponentMap,
   params: Array<Param>,
   values?: RawParams
@@ -55,7 +56,7 @@ class Params extends React.PureComponent<Props, State> {
 
     const values = createValues(props.params);
     const handlers = values.map(
-      (value, index): RawParam$OnChange =>
+      (_, index): RawParam$OnChange =>
         (value: RawParam$OnChange$Value): void =>
           onChangeParam(index, value)
     );
@@ -74,7 +75,7 @@ class Params extends React.PureComponent<Props, State> {
 
    // This is needed in the case where the item changes, i.e. the values get
    // initialised and we need to alert the parent that we have new values
-  componentDidUpdate (prevProps: Props, prevState: State) {
+  componentDidUpdate (_: Props, prevState: State) {
     const { onChange, isDisabled } = this.props;
     const { values } = this.state;
 
@@ -84,7 +85,7 @@ class Params extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { className, isDisabled, overrides, params, style } = this.props;
+    const { className, isDisabled, onEnter, overrides, params, style } = this.props;
     const { handlers = [], values = this.props.values } = this.state;
 
     if (!params || params.length === 0 || !values || values.length === 0) {
@@ -104,6 +105,7 @@ class Params extends React.PureComponent<Props, State> {
               key={`${name}:${name}:${index}`}
               name={name}
               onChange={handlers[index]}
+              onEnter={onEnter}
               overrides={overrides}
               type={type}
             />
diff --git a/packages/ui-params/src/types.ts b/packages/ui-params/src/types.ts
index 43cb44f142..76b43a3ce3 100644
--- a/packages/ui-params/src/types.ts
+++ b/packages/ui-params/src/types.ts
@@ -20,6 +20,7 @@ export type RawParam = {
 
 export type RawParam$OnChange$Value = { isValid: boolean, value: RawParam$Values };
 export type RawParam$OnChange = (value: RawParam$OnChange$Value) => void;
+export type RawParam$OnEnter = () => void;
 
 export type RawParams = Array<RawParam>;
 
@@ -27,6 +28,7 @@ export type BaseProps = BareProps & {
   defaultValue: RawParam,
   name?: string,
   onChange?: RawParam$OnChange,
+  onEnter?: RawParam$OnEnter,
   type: TypeDef
 };
 
diff --git a/packages/ui-signer/src/Modal.tsx b/packages/ui-signer/src/Modal.tsx
index e28db8e49b..150d085260 100644
--- a/packages/ui-signer/src/Modal.tsx
+++ b/packages/ui-signer/src/Modal.tsx
@@ -180,7 +180,6 @@ class Signer extends React.PureComponent<Props, State> {
         autoFocus
         error={unlockError || undefined}
         onChange={this.onChangePassword}
-        onKeyDown={this.onKeyDown}
         password={password}
         value={currentItem.accountId}
         tabIndex={1}
@@ -223,12 +222,6 @@ class Signer extends React.PureComponent<Props, State> {
     });
   }
 
-  private onKeyDown = async (event: React.KeyboardEvent<Element>) => {
-    if (event.key === 'Enter') {
-      await this.onSend();
-    }
-  }
-
   private onCancel = (): void => {
     const { queueSetTxStatus } = this.props;
     const { currentItem } = this.state;
diff --git a/packages/ui-signer/src/Unlock.tsx b/packages/ui-signer/src/Unlock.tsx
index b9b408ffc9..b5afd93b0a 100644
--- a/packages/ui-signer/src/Unlock.tsx
+++ b/packages/ui-signer/src/Unlock.tsx
@@ -15,7 +15,7 @@ type Props = I18nProps & {
   autoFocus?: boolean,
   error?: string,
   onChange: (password: string) => void,
-  onKeyDown?: (event: React.KeyboardEvent<Element>) => void,
+  onEnter?: () => void,
   password: string,
   tabIndex?: number,
   value?: string | null
@@ -52,7 +52,7 @@ class Unlock extends React.PureComponent<Props, State> {
   }
 
   render () {
-    const { autoFocus, onChange, onKeyDown, password, t, tabIndex } = this.props;
+    const { autoFocus, onChange, onEnter, password, t, tabIndex } = this.props;
     const { isError, isInjected, isLocked } = this.state;
 
     if (isInjected || !isLocked) {
@@ -66,7 +66,7 @@ class Unlock extends React.PureComponent<Props, State> {
           isError={isError}
           label={t('unlock account with password')}
           onChange={onChange}
-          onKeyDown={onKeyDown}
+          onEnter={onEnter}
           tabIndex={tabIndex}
           value={password}
         />
diff --git a/packages/ui-signer/src/util.ts b/packages/ui-signer/src/util.ts
deleted file mode 100644
index e69de29bb2..0000000000