Allow CopyButton on all Hash* fields (#4065)

packages/react-components/src/Call.tsx

@@ -78,6 +78,7 @@ function Call ({ children, className = '', labelHash, mortality, onError, tip, v
           <Static
             className='hash'
             label={labelHash || t<string>('extrinsic hash')}
+            withCopy
           >
             {hash.toHex()}
           </Static>
@@ -117,8 +118,8 @@ export default React.memo(styled(Call)`
     .ui--Labelled {
       padding-left: 0;
 
-      label {
-        left: 1.55rem;
+      > label {
+        left: 1.55rem !important;
       }
     }
   }

packages/react-components/src/CopyButton.tsx

@@ -22,7 +22,7 @@ interface Props {
 
 const NOOP = () => undefined;
 
-function CopyButton ({ children, className, icon = 'copy', type, value }: Props): React.ReactElement<Props> {
+function CopyButton ({ children, className = '', icon = 'copy', type, value }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { queueAction } = useContext(StatusContext);
 
@@ -39,7 +39,7 @@ function CopyButton ({ children, className, icon = 'copy', type, value }: Props)
   );
 
   return (
-    <div className={className}>
+    <div className={`ui--CopyButton ${className}`}>
       <CopyToClipboard
         onCopy={_onCopy}
         text={value}

packages/react-components/src/Labelled.tsx

@@ -50,6 +50,12 @@ export default React.memo(styled(Labelled)`
     display: block;
     position: relative;
 
+    .ui--CopyButton {
+      position: absolute;
+      top: 0.9rem;
+      right: 0.5rem;
+    }
+
     .withEllipsis {
       display: inline;
       overflow: hidden;

packages/react-components/src/Output.tsx

@@ -43,16 +43,10 @@ function Output ({ children, className = '', help, isError, isFull, isHidden, is
           : value
         }
         {children}
-        {withCopy
-          ? (
-            <CopyButton
-              className='ui--output-button'
-              value={value}
-            />
-          )
-          : null
-        }
       </div>
+      {withCopy && (
+        <CopyButton value={value} />
+      )}
     </Labelled>
   );
 }

packages/react-components/src/Static.tsx

@@ -3,6 +3,7 @@
 
 import React from 'react';
 
+import CopyButton from './CopyButton';
 import Labelled from './Labelled';
 
 interface Props {
@@ -17,10 +18,11 @@ interface Props {
   isSmall?: boolean;
   label?: React.ReactNode;
   value?: React.ReactNode;
+  withCopy?: boolean;
   withLabel?: boolean;
 }
 
-function Static ({ children, className = '', defaultValue, help, isFull, isHidden, isSmall, label, value, withLabel }: Props): React.ReactElement<Props> {
+function Static ({ children, className = '', defaultValue, help, isFull, isHidden, isSmall, label, value, withCopy, withLabel }: Props): React.ReactElement<Props> {
   return (
     <Labelled
       className={className}
@@ -35,6 +37,9 @@ function Static ({ children, className = '', defaultValue, help, isFull, isHidde
         {value || defaultValue}
         {children}
       </div>
+      {withCopy && (
+        <CopyButton value={value} />
+      )}
     </Labelled>
   );
 }

packages/react-components/src/styles/components.ts

@@ -24,12 +24,6 @@ export default (theme: ThemeDef): string => `
     &.monospace {
       font-family: monospace;
     }
-
-    .ui--output-button {
-      position: absolute;
-      top: 0.25rem;
-      right: 0.25rem;
-    }
   }
 
   header .ui--Button-Group {

packages/react-params/src/Param/BaseBytes.tsx

@@ -5,7 +5,7 @@ import type { TypeDef } from '@polkadot/types/types';
 import type { RawParam, RawParamOnChange, RawParamOnEnter, RawParamOnEscape, Size } from '../types';
 
 import React, { useCallback, useState } from 'react';
-import { Input } from '@polkadot/react-components';
+import { CopyButton, Input } from '@polkadot/react-components';
 import { compactAddLength, hexToU8a, isAscii, isHex, isU8a, stringToU8a, u8aToHex, u8aToString } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
@@ -28,6 +28,7 @@ interface Props {
   size?: Size;
   type: TypeDef & { withOptionActive?: boolean };
   validate?: (u8a: Uint8Array) => boolean;
+  withCopy?: boolean;
   withLabel?: boolean;
   withLength?: boolean;
 }
@@ -58,7 +59,7 @@ function convertInput (value: string): [boolean, Uint8Array] {
     : [value === '0x', new Uint8Array([])];
 }
 
-function BaseBytes ({ asHex, children, className = '', defaultValue: { value }, isDisabled, isError, label, length = -1, onChange, onEnter, onEscape, size = 'full', validate = defaultValidate, withLabel, withLength }: Props): React.ReactElement<Props> {
+function BaseBytes ({ asHex, children, className = '', defaultValue: { value }, isDisabled, isError, label, length = -1, onChange, onEnter, onEscape, size = 'full', validate = defaultValidate, withCopy, withLabel, withLength }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [defaultValue] = useState(
     value
@@ -115,6 +116,9 @@ function BaseBytes ({ asHex, children, className = '', defaultValue: { value },
         withLabel={withLabel}
       >
         {children}
+        {withCopy && (
+          <CopyButton value={defaultValue} />
+        )}
       </Input>
     </Bare>
   );

packages/react-params/src/Param/Hash160.tsx

@@ -21,6 +21,7 @@ function Hash160 ({ className = '', defaultValue, isDisabled, isError, label, na
       onEnter={onEnter}
       onEscape={onEscape}
       type={type}
+      withCopy={isDisabled}
       withLabel={withLabel}
     />
   );

packages/react-params/src/Param/Hash256.tsx

@@ -21,6 +21,7 @@ function Hash256 ({ className = '', defaultValue, isDisabled, isError, label, na
       onEnter={onEnter}
       onEscape={onEscape}
       type={type}
+      withCopy={isDisabled}
       withLabel={withLabel}
     />
   );

packages/react-params/src/Param/Hash512.tsx

@@ -21,6 +21,7 @@ function Hash512 ({ className = '', defaultValue, isDisabled, isError, label, na
       onEnter={onEnter}
       onEscape={onEscape}
       type={type}
+      withCopy={isDisabled}
       withLabel={withLabel}
     />
   );