Re-add CopyButton on AddressSummary (#1180)

packages/ui-app/src/AddressSummary.tsx

@@ -15,6 +15,7 @@ import AvailableDisplay from './Available';
 import { classes, getAddrName, toShortAddress } from './util';
 import BalanceDisplay from './Balance';
 import BondedDisplay from './Bonded';
+import CopyButton from './CopyButton';
 import IdentityIcon from './IdentityIcon';
 import translate from './translate';
 import UnlockingDisplay from './Unlocking';
@@ -108,6 +109,16 @@ class AddressSummary extends React.PureComponent<Props> {
       ? accountId.toString()
       : DEFAULT_ADDR;
     const name = getAddrName(address, false, defaultName);
+    const addrElem = isShort
+      ? (
+          <CopyButton
+            isAddress
+            value={address}
+          >
+            <span>{toShortAddress(address)}</span>
+          </CopyButton>
+      )
+      : address;
 
     return (
       <div className='ui--AddressSummary-data'>
@@ -115,11 +126,7 @@ class AddressSummary extends React.PureComponent<Props> {
           {name}
         </div>
         <div className='ui--AddressSummary-accountId'>
-          {
-            isShort
-              ? toShortAddress(address)
-              : address
-          }
+          {addrElem}
         </div>
       </div>
     );

packages/ui-app/src/CopyButton.tsx

@@ -3,37 +3,81 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { Button$Sizes } from './Button/types';
-import { BareProps } from './types';
+import { QueueAction$Add } from './Status/types';
+import { BareProps, I18nProps } from './types';
 
 import React from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
-import { classes } from './util';
+import { QueueConsumer } from './Status/Context';
 import Button from './Button';
+import translate from './translate';
 
 type Props = BareProps & {
+  children?: React.ReactNode,
   icon?: string,
+  isAddress?: boolean,
   isCircular?: boolean,
   isPrimary?: boolean,
   size?: Button$Sizes,
   value?: any
 };
 
-export default class CopyButton extends React.PureComponent<Props> {
+type InnerProps = Props & I18nProps & {
+  queueAction: QueueAction$Add
+};
+
+class CopyButtonInner extends React.PureComponent<InnerProps> {
   render () {
-    const { className, icon = 'copy', isCircular = true, isPrimary = true, size = 'tiny', style, value } = this.props;
+    const { children, className, icon = 'copy', isCircular = true, isPrimary = true, size = 'tiny', style, value } = this.props;
 
     return (
-      <CopyToClipboard text={value}>
-        <Button
-          className={classes('ui--CopyButton', className)}
-          icon={icon}
-          isCircular={isCircular}
-          isPrimary={isPrimary}
-          size={size}
-          style={style}
-        />
-      </CopyToClipboard>
+      <div className={className}>
+        <CopyToClipboard
+          onCopy={this.onCopy}
+          text={value}
+        >
+          <Button
+            className='ui--CopyButton'
+            icon={icon}
+            isCircular={isCircular}
+            isPrimary={isPrimary}
+            size={size}
+            style={style}
+          />
+        </CopyToClipboard>
+        {children}
+      </div>
+    );
+  }
+
+  private onCopy = (): void => {
+    const { isAddress = false, queueAction, t, value } = this.props;
+
+    if (isAddress && queueAction) {
+      queueAction({
+        account: value,
+        action: t('clipboard'),
+        status: 'queued',
+        message: t('address copied')
+      });
+    }
+  }
+}
+
+const CopyButtonI18n = translate(CopyButtonInner);
+
+export default class CopyButton extends React.PureComponent<Props> {
+  render () {
+    return (
+      <QueueConsumer>
+        {({ queueAction }) => (
+          <CopyButtonI18n
+            {...this.props}
+            queueAction={queueAction}
+          />
+        )}
+      </QueueConsumer>
     );
   }
 }

packages/ui-app/src/IdentityIcon.tsx

@@ -4,7 +4,7 @@
 
 import { ApiProps } from '@polkadot/ui-api/types';
 import { IdentityProps } from '@polkadot/ui-identicon/types';
-import { QueueProps, QueueAction$Add } from './Status/types';
+import { QueueAction$Add } from './Status/types';
 import { I18nProps } from './types';
 
 import React from 'react';
@@ -86,7 +86,7 @@ class IdentityIcon extends React.PureComponent<Props, State> {
 
     return (
       <QueueConsumer>
-        {({ queueAction }: QueueProps) =>
+        {({ queueAction }) =>
           <CopyIconI18N
             isHighlight={isValidator}
             {...this.props}

packages/ui-app/src/styles/components.css

@@ -239,6 +239,7 @@ header .ui--Button-Group {
 .ui--CopyButton {
   cursor: copy !important;
   margin-left: 0.25rem !important;
+  margin-right: 0.25rem !important;
 }
 
 .ui--DropdownLinked.ui--row {