Add "deposit" button to address (transfer to) (#1233)

* Add "deposit" button to address (transfer to)

* Add keys for modal & buttons

packages/app-accounts/src/Account.tsx

@@ -113,9 +113,9 @@ class Account extends React.PureComponent<Props> {
     if (isTransferOpen) {
       modals.push(
         <Transfer
-          address={address}
           key='modal-transfer'
           onClose={this.toggleTransfer}
+          senderId={address}
         />
       );
     }

packages/app-accounts/src/modals/Transfer.tsx

@@ -20,10 +20,11 @@ import { ZERO_FEES } from '@polkadot/ui-signer/Checks/constants';
 import translate from '../translate';
 
 type Props = ApiProps & I18nProps & {
-  address?: string,
   balances_fees?: DerivedFees,
   balances_votingBalance?: DerivedBalances,
   onClose: () => void,
+  recipientId?: string,
+  senderId?: string,
   system_accountNonce?: BN
 };
 
@@ -76,8 +77,8 @@ class Transfer extends React.PureComponent<Props> {
       extrinsic: null,
       hasAvailable: true,
       maxBalance: ZERO,
-      recipientId: null,
-      senderId: props.address || null
+      recipientId: props.recipientId || null,
+      senderId: props.senderId || null
     };
   }
 
@@ -158,7 +159,7 @@ class Transfer extends React.PureComponent<Props> {
   }
 
   private renderContent () {
-    const { address, t } = this.props;
+    const { recipientId: propRecipientId, senderId: propSenderId, t } = this.props;
     const { extrinsic, hasAvailable, maxBalance, recipientId, senderId } = this.state;
     const available = <span className='label'>{t('available ')}</span>;
 
@@ -166,16 +167,18 @@ class Transfer extends React.PureComponent<Props> {
       <Modal.Content>
         <Wrapper>
           <InputAddress
-            defaultValue={address}
+            defaultValue={propSenderId}
             help={t('The account you will send funds from.')}
-            isDisabled={!!address}
+            isDisabled={!!propSenderId}
             label={t('send from account')}
             onChange={this.onChangeFrom}
             type='account'
           />
           <div className='balance'><Available label={available} params={senderId} /></div>
           <InputAddress
+            defaultValue={propRecipientId}
             help={t('Select a contact or paste the address you want to send funds to.')}
+            isDisabled={!!propRecipientId}
             label={t('send to address')}
             onChange={this.onChangeTo}
             type='all'

packages/app-address-book/src/Address.tsx

@@ -7,9 +7,10 @@ import { ActionStatus } from '@polkadot/ui-app/Status/types';
 import { I18nProps } from '@polkadot/ui-app/types';
 
 import React from 'react';
-import { AddressInfo, AddressRow, Button, Card } from '@polkadot/ui-app';
+import { AddressInfo, AddressRow, Button, Card, Icon } from '@polkadot/ui-app';
 import keyring from '@polkadot/ui-keyring';
 
+import Transfer from '@polkadot/app-accounts/modals/Transfer';
 import Forgetting from './modals/Forgetting';
 
 import translate from './translate';
@@ -21,10 +22,11 @@ type Props = I18nProps & {
 type State = {
   current: KeyringAddress,
   isEditable: boolean,
-  isForgetOpen: boolean
+  isForgetOpen: boolean,
+  isTransferOpen: boolean
 };
 
-class Address extends React.PureComponent<Props> {
+class Address extends React.PureComponent<Props, State> {
   state: State;
 
   constructor (props: Props) {
@@ -35,7 +37,8 @@ class Address extends React.PureComponent<Props> {
     this.state = {
       current: keyring.getAddress(address),
       isEditable: true,
-      isForgetOpen: false
+      isForgetOpen: false,
+      isTransferOpen: false
     };
   }
 
@@ -65,7 +68,7 @@ class Address extends React.PureComponent<Props> {
 
   private renderModals () {
     const { address } = this.props;
-    const { isForgetOpen, current } = this.state;
+    const { isForgetOpen, isTransferOpen, current } = this.state;
 
     if (!address) {
       return null;
@@ -78,21 +81,35 @@ class Address extends React.PureComponent<Props> {
         <Forgetting
           currentAddress={current}
           doForget={this.onForget}
-          key='modal-forget-account'
+          key='modal-forget'
           onClose={this.toggleForget}
         />
       );
     }
 
+    if (isTransferOpen) {
+      modals.push(
+        <Transfer
+          key='modal-transfer'
+          onClose={this.toggleTransfer}
+          recipientId={address}
+        />
+      );
+    }
+
     return modals;
   }
 
   private toggleForget = (): void => {
-    const { isForgetOpen } = this.state;
-
-    this.setState({
+    this.setState(({ isForgetOpen }) => ({
       isForgetOpen: !isForgetOpen
-    });
+    }));
+  }
+
+  private toggleTransfer = (): void => {
+    this.setState(({ isTransferOpen }) => ({
+      isTransferOpen: !isTransferOpen
+    }));
   }
 
   private onForget = (): void => {
@@ -129,11 +146,20 @@ class Address extends React.PureComponent<Props> {
               isNegative
               onClick={this.toggleForget}
               icon='trash'
+              key='forget'
               size='small'
               tooltip={t('Forget this account')}
             />
           </>
         )}
+        <Button
+          isPrimary
+          key='deposit'
+          label={<><Icon name='paper plane' /> {t('deposit')}</>}
+          onClick={this.toggleTransfer}
+          size='small'
+          tooltip={t('Send funds to this address')}
+        />
       </div>
     );
   }