change textarea for div to show the mnemonic seed (#1147)

packages/extension-ui/src/Popup/CreateAccount/CreateAccount.spec.tsx

@@ -72,8 +72,8 @@ describe('Create Account', () => {
   });
 
   describe('Phase 1', () => {
-    it('shows seed phrase in textarea', () => {
+    it('shows seed phrase in a span inside a div', () => {
-      expect(wrapper.find('textarea').text()).toBe(exampleAccount.seed);
+      expect(wrapper.find('.seedBox span').text()).toBe(exampleAccount.seed);
     });
 
     it('next step button is disabled when checkbox is not checked', () => {

packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx

@@ -12,26 +12,12 @@ interface Props {
   seed: string;
 }
 
-const onCopy = (): void => {
-  const mnemonicSeedTextElement = document.querySelector('textarea');
-
-  if (!mnemonicSeedTextElement) {
-    return;
-  }
-
-  mnemonicSeedTextElement.select();
-
-  // eslint-disable-next-line deprecation/deprecation
-  document.execCommand('copy');
-};
-
 function Mnemonic ({ onNextStep, seed }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [isMnemonicSaved, setIsMnemonicSaved] = useState(false);
   const { show } = useToast();
 
   const _onCopy = useCallback((): void => {
-    onCopy();
     show(t<string>('Copied'));
   }, [show, t]);
 

packages/extension-ui/src/components/BoxWithLabel.tsx

@@ -0,0 +1,44 @@
+// Copyright 2019-2023 @polkadot/extension-ui authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ThemeProps } from '../types.js';
+
+import React from 'react';
+import styled from 'styled-components';
+
+import Label from './Label.js';
+
+interface Props {
+  className?: string;
+  label: string;
+  value?: string;
+}
+
+function BoxWithLabel ({ className, label, value }: Props): React.ReactElement<Props> {
+  return (
+    <Label
+      className={className}
+      label={label}
+    >
+      <div className='seedBox'>
+        <span>{value}</span>
+      </div>
+    </Label>
+  );
+}
+
+export default styled(BoxWithLabel)(({ theme }: ThemeProps) => `
+  .seedBox {
+    background: ${theme.readonlyInputBackground};
+    box-shadow: none;
+    border-radius: ${theme.borderRadius};
+    border: 1px solid ${theme.inputBorderColor};
+    border-color: ${theme.inputBorderColor};
+    box-sizing: border-box;
+    display: block;
+    font-family: ${theme.fontFamily};
+    outline: none;
+    resize: none;
+    width: 100%;
+  }
+`);

packages/extension-ui/src/components/MnemonicSeed.tsx

@@ -5,11 +5,12 @@ import type { ThemeProps } from '../types.js';
 
 import { faCopy } from '@fortawesome/free-regular-svg-icons';
 import React, { MouseEventHandler } from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
 
 import useTranslation from '../hooks/useTranslation.js';
 import { styled } from '../styled.js';
 import ActionText from './ActionText.js';
-import TextAreaWithLabel from './TextAreaWithLabel.js';
+import BoxWithLabel from './BoxWithLabel.js';
 
 interface Props {
   seed: string;
@@ -22,20 +23,21 @@ function MnemonicSeed ({ className, onCopy, seed }: Props): React.ReactElement<P
 
   return (
     <div className={className}>
-      <TextAreaWithLabel
+      <BoxWithLabel
         className='mnemonicDisplay'
-        isReadOnly
         label={t<string>('Generated 12-word mnemonic seed:')}
         value={seed}
       />
       <div className='buttonsRow'>
-        <ActionText
+        <CopyToClipboard text={seed}>
-          className='copyBtn'
+          <ActionText
-          data-seed-action='copy'
+            className='copyBtn'
-          icon={faCopy}
+            data-seed-action='copy'
-          onClick={onCopy}
+            icon={faCopy}
-          text={t<string>('Copy to clipboard')}
+            onClick={onCopy}
-        />
+            text={t<string>('Copy to clipboard')}
+          />
+        </CopyToClipboard>
       </div>
     </div>
   );
@@ -54,7 +56,7 @@ export default styled(MnemonicSeed)(({ theme }: ThemeProps) => `
   }
 
   .mnemonicDisplay {
-    textarea {
+    .seedBox {
       color: ${theme.primaryColor};
       font-size: ${theme.fontSize};
       height: unset;