Explicit hash copy for preimages (#8620)

* Explicit hash copy for preimages

* Adjust

packages/page-democracy/src/Overview/PreImage.tsx

@@ -8,7 +8,7 @@ import type { HexString } from '@polkadot/util/types';
 import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
-import { Extrinsic, Input, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
+import { Extrinsic, InputAddress, InputBalance, Modal, Static, TxButton } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import { Available } from '@polkadot/react-query';
 import { BN, BN_ZERO, isString } from '@polkadot/util';
@@ -94,12 +94,11 @@ function PreImage ({ className = '', imageHash, isImminent = false, onClose }: P
             label={t<string>('propose')}
             onChange={setProposal}
           />
-          <Input
-            className='disabledLook'
+          <Static
             help={t<string>('The hash of the selected proposal, use it for submitting the proposal')}
-            isDisabledError={!isMatched}
             label={t<string>('preimage hash')}
             value={encodedHash}
+            withCopy
           />
         </Modal.Columns>
         {!isImminent && storageFee && (
@@ -137,13 +136,4 @@ export default React.memo(styled(PreImage)`
     margin: 0.5rem 0;
     text-align: right;
   }
-
-  .disabledLook .ui.input > input {
-    background: transparent;
-    border-style: dashed;
-    &:focus{
-      background: transparent;
-      border-color: #d9d8d7;
-    }
-  }
 `);

packages/page-preimages/src/Preimages/Add.tsx

@@ -4,9 +4,8 @@
 import type { SubmittableExtrinsic } from '@polkadot/api/types';
 
 import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
 
-import { Button, Extrinsic, Input, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
+import { Button, Extrinsic, InputAddress, InputBalance, Modal, Static, TxButton } from '@polkadot/react-components';
 import { useApi, useToggle } from '@polkadot/react-hooks';
 import { Available } from '@polkadot/react-query';
 import { BN, BN_ZERO } from '@polkadot/util';
@@ -93,19 +92,17 @@ function Add ({ className, imageHash }: Props): React.ReactElement<Props> {
                 label={t<string>('propose')}
                 onChange={setProposal}
               />
-              <Input
-                className='disabledLook'
+              <Static
                 help={t<string>('The hash of the selected proposal, use it for submitting the proposal')}
-                isDisabledError={!isMatched}
                 label={t<string>('preimage hash')}
                 value={encodedHash}
+                withCopy
               />
-              <Input
-                className='disabledLook'
+              <Static
                 help={t<string>('The encoded length of the selected proposal, as available on-chain')}
-                isDisabledError={!isMatched}
                 label={t<string>('preimage length')}
                 value={encodedLength.toString()}
+                withCopy
               />
             </Modal.Columns>
             {!storageFee.isZero() && (
@@ -141,13 +138,4 @@ function Add ({ className, imageHash }: Props): React.ReactElement<Props> {
   );
 }
 
-export default React.memo(styled(Add)`
-  .disabledLook .ui.input > input {
-    background: transparent;
-    border-style: dashed;
-    &:focus{
-      background: transparent;
-      border-color: #d9d8d7;
-    }
-  }
-`);
+export default React.memo(Add);

packages/react-components/src/Expander.tsx

@@ -110,14 +110,14 @@ function Expander ({ children, className = '', help, helpIcon, isHeader, isLeft,
         {isLeft && icon}
         <div className='ui--Expander-summary-header'>
           <div className='ui--Expander-summary-title'>
-            {help && (
-              <LabelHelp
-                help={help}
-                icon={helpIcon}
-              />
-            )}
             {summaryHead}
           </div>
+          {help && (
+            <LabelHelp
+              help={help}
+              icon={helpIcon}
+            />
+          )}
           {summary}
           {headerSub && (
             <div className='ui--Expander-summary-header-sub'>{isExpanded ? headerSub : headerSubMini}</div>