Optimize Transfer dialog (no useEffect) (#2567)

packages/page-accounts/src/Accounts/modals/Transfer.tsx

@@ -2,13 +2,10 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-
 import BN from 'bn.js';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
-import { useApi } from '@polkadot/react-hooks';
 import { Available } from '@polkadot/react-query';
 
 import { useTranslation } from '../../translate';
@@ -20,24 +17,14 @@ interface Props {
   senderId?: string;
 }
 
-const ZERO = new BN(0);
-
 function Transfer ({ className, onClose, recipientId: propRecipientId, senderId: propSenderId }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { api } = useApi();
   const [amount, setAmount] = useState<BN | undefined>(new BN(0));
-  const [extrinsic, setExtrinsic] = useState<SubmittableExtrinsic | null>(null);
   const [hasAvailable] = useState(true);
   const [maxBalance] = useState(new BN(0));
   const [recipientId, setRecipientId] = useState<string | null>(propRecipientId || null);
   const [senderId, setSenderId] = useState<string | null>(propSenderId || null);
 
-  useEffect((): void => {
-    senderId && recipientId && setExtrinsic(
-      () => api.tx.balances.transfer(recipientId, amount || ZERO)
-    );
-  }, [api, amount, recipientId, senderId]);
-
   const transferrable = <span className='label'>{t('transferrable')}</span>;
 
   return (
@@ -90,12 +77,13 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
       <Modal.Actions onCancel={onClose}>
         <TxButton
           accountId={senderId}
-          extrinsic={extrinsic}
           icon='send'
-          isDisabled={!hasAvailable}
+          isDisabled={!hasAvailable || !recipientId || !amount}
           isPrimary
           label={t('Make Transfer')}
           onStart={onClose}
+          params={[recipientId, amount]}
+          tx='balances.transfer'
         />
       </Modal.Actions>
     </Modal>
@@ -103,11 +91,6 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
 }
 
 export default React.memo(styled(Transfer)`
-  article.padded {
-    box-shadow: none;
-    margin-left: 2rem;
-  }
-
   .balance {
     margin-bottom: 0.5rem;
     text-align: right;

packages/page-staking/src/Overview/Summary.tsx

@@ -72,6 +72,7 @@ function Summary ({ className, isVisible, next, nominators, stakingOverview, sty
 
 export default React.memo(styled(Summary)`
   .validator--Account-block-icon {
+    display: inline-block;
     margin-right: 0.75rem;
     margin-top: -0.25rem;
     vertical-align: middle;

packages/react-components/src/IdentityIcon.tsx

@@ -6,6 +6,7 @@ import { DeriveAccountInfo } from '@polkadot/api-derive/types';
 import { IdentityProps as Props } from '@polkadot/react-identicon/types';
 
 import React, { useCallback, useContext, useEffect, useState } from 'react';
+import styled from 'styled-components';
 import { getSystemIcon } from '@polkadot/apps-config/ui';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import BaseIdentityIcon from '@polkadot/react-identicon';
@@ -68,4 +69,8 @@ function IdentityIcon ({ className, onCopy, prefix, size, theme, value }: Props)
   );
 }
 
-export default React.memo(IdentityIcon);
+export default React.memo(styled(IdentityIcon)`
+  .ui--IdentityIcon {
+    display: block;
+  }
+`);