Transfer dialog enhancements (#1196)

* 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 * [CI Skip] 0.33.0-beta.74 * Redirect correctly when user has no account (#1191) * right link and hide tabs plus buttons primary * fix comments * create highlight * [CI Skip] 0.33.0-beta.75 * Mark ExtrinsicFailed as error (#1190) * Hide edit on injected accounts, Button w/ tooltip (#1192) * Hide edit on injected accounts, Button w/ tooltip * Don't display "add tags" when not isEditable * Indentation * [CI Skip] 0.33.0-beta.76 * Make enable() call to extensions (#1194) * Make enable() call to extensions * It works * Add overlay for injected (prompt) * Use signer from injectedPromise * [CI Skip] 0.33.0-beta.77 * withInjected -> PureComponent (fix new refs) (#1195) * withInjected -> PureComponent (fix new refs) * Consume data from context * Expand injected * Close modal on tx start
polkadot-js · May 23, 2019 · dc5da58 · dc5da58
1 parent a8e8008
commit dc5da58
Show file tree

Hide file tree

Showing 103 changed files with 597 additions and 405 deletions.
diff --git a/lerna.json b/lerna.json
@@ -10,5 +10,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.33.0-beta.73"
+  "version": "0.33.0-beta.77"
 }
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.33.0-beta.73",
+  "version": "0.33.0-beta.77",
   "private": true,
   "engines": {
     "node": ">=10.13.0",

diff --git a/packages/app-123code/package.json b/packages/app-123code/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-123code",
-  "version": "0.33.0-beta.73",
+  "version": "0.33.0-beta.77",
   "description": "A basic app that shows the ropes on customisation",
   "main": "index.js",
   "scripts": {},
@@ -11,6 +11,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.4.5",
-    "@polkadot/ui-app": "^0.33.0-beta.73"
+    "@polkadot/ui-app": "^0.33.0-beta.77"
   }
 }
diff --git 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,18 +31,21 @@ 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
                 accountId={accountId}
                 label='make transfer'
                 params={[recipientId, amount]}
                 tx='balances.transfer'
+                ref={this.button}
               />
             </Button.Group>
           </div>

diff --git a/packages/app-accounts/package.json b/packages/app-accounts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/app-accounts",
-  "version": "0.33.0-beta.73",
+  "version": "0.33.0-beta.77",
   "main": "index.js",
   "repository": "https://github.com/polkadot-js/apps.git",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -11,7 +11,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.4.5",
-    "@polkadot/ui-app": "^0.33.0-beta.73",
+    "@polkadot/ui-app": "^0.33.0-beta.77",
     "@types/file-saver": "^2.0.0",
     "@types/yargs": "^13.0.0",
     "babel-plugin-module-resolver": "^3.1.1",

diff --git a/packages/app-accounts/src/Account.tsx b/packages/app-accounts/src/Account.tsx
@@ -3,12 +3,11 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { ActionStatus } from '@polkadot/ui-app/Status/types';
-import { I18nProps } from './types';
+import { I18nProps } from '@polkadot/ui-app/types';
 
-import { Button as SUIB, Popup } from 'semantic-ui-react';
 import React from 'react';
 import styled from 'styled-components';
-import { AddressSummary, Available, Balance, Bonded, CryptoType, Nonce, Unlocking } from '@polkadot/ui-app';
+import { AddressSummary, Available, Balance, Bonded, Button, CryptoType, Icon, Nonce, Unlocking } from '@polkadot/ui-app';
 import keyring from '@polkadot/ui-keyring';
 
 import Backup from './modals/Backup';
@@ -24,6 +23,7 @@ type Props = I18nProps & {
 
 type State = {
   isBackupOpen: boolean,
+  isEditable: boolean,
   isForgetOpen: boolean,
   isPasswordOpen: boolean,
   isTransferOpen: boolean
@@ -112,6 +112,7 @@ class Account extends React.PureComponent<Props> {
 
     this.state = {
       isBackupOpen: false,
+      isEditable: !(keyring.getAccount(props.address).getMeta().isInjected),
       isForgetOpen: false,
       isPasswordOpen: false,
       isTransferOpen: false
@@ -120,14 +121,17 @@ class Account extends React.PureComponent<Props> {
 
   render () {
     const { address } = this.props;
+    const { isEditable } = this.state;
 
+    // FIXME It is a bit heavy-handled switching of being editable here completely
+    // (and removing the tags, however the keyring cannot save these)
     return (
       <Wrapper className='overview--Account'>
         {this.renderModals()}
         <AddressSummary
           value={address}
           identIconSize={96}
-          isEditable
+          isEditable={isEditable}
           withBalance={false}
           withNonce={false}
           withTags
@@ -329,52 +333,42 @@ class Account extends React.PureComponent<Props> {
   }
 
   private renderButtons () {
+    const { t } = this.props;
+    const { isEditable } = this.state;
 
-    // FIXME: The <Popup /> event trigger on='hover' does not work together with the ui-app'
-    // <Button /> component. That's why the original Semantic UI component is being used here.
     return (
       <div className='accounts--Account-buttons'>
-        <Popup
-          content='Delete this account'
-          trigger={
-            <SUIB
-              negative
+        {isEditable && (
+          <>
+            <Button
+              isNegative
               onClick={this.toggleForget}
               icon='trash'
               size='small'
+              tooltip={t('Forget this account')}
             />
-          }
-          wide='very'
-        />
-        <Popup
-          content='Create a backup file for this account'
-          trigger={
-            <SUIB
+            <Button
               icon='cloud download'
+              isPrimary
               onClick={this.toggleBackup}
               size='small'
+              tooltip={t('Create a backup file for this account')}
             />
-          }
-        />
-        <Popup
-          content="Change this account's password"
-          trigger={
-            <SUIB
+            <Button
               icon='key'
+              isPrimary
               onClick={this.togglePass}
               size='small'
+              tooltip={t("Change this account's password")}
             />
-          }
-        />
-        <Popup
-          content='Send funds from this account'
-          trigger={
-            <SUIB
-              icon='paper plane'
-              onClick={this.toggleTransfer}
-              size='small'
-            />
-          }
+          </>
+        )}
+        <Button
+          isPrimary
+          label={<><Icon name='paper plane' /> {t('send')}</>}
+          onClick={this.toggleTransfer}
+          size='small'
+          tooltip={t('Send funds from this account')}
         />
       </div>
     );

diff --git 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
@@ -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
@@ -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