Replace `ReadOnlyInput` (#14330)

Replace the last two uses of the `ReadOnlyInput` with a div. The idea
of using an input for read-only data is silly. We can just put it in
the DOM directly instead.

ui/components/app/modals/export-private-key-modal/export-private-key-modal.component.js

@@ -4,7 +4,6 @@ import React, { Component } from 'react';
 
 import { stripHexPrefix } from 'ethereumjs-util';
 import copyToClipboard from 'copy-to-clipboard';
-import ReadOnlyInput from '../../../ui/readonly-input';
 import Button from '../../../ui/button';
 import AccountModalContainer from '../account-modal-container';
 import { toChecksumHexAddress } from '../../../../../shared/modules/hexstring-utils';
@@ -78,13 +77,12 @@ export default class ExportPrivateKeyModal extends Component {
     }
 
     return (
-      <ReadOnlyInput
+      <div
-        wrapperClass="export-private-key-modal__password-display-wrapper"
+        className="export-private-key-modal__private-key-display"
-        inputClass="export-private-key-modal__password-display-textarea"
-        textarea
-        value={plainKey}
         onClick={() => copyToClipboard(plainKey)}
-      />
+      >
+        {plainKey}
+      </div>
     );
   }
 
@@ -147,10 +145,9 @@ export default class ExportPrivateKeyModal extends Component {
         backButtonAction={() => showAccountDetailModal()}
       >
         <span className="export-private-key-modal__account-name">{name}</span>
-        <ReadOnlyInput
+        <div className="ellip-address-wrapper">
-          wrapperClass="ellip-address-wrapper"
+          {toChecksumHexAddress(address)}
-          value={toChecksumHexAddress(address)}
+        </div>
-        />
         <div className="export-private-key-modal__divider" />
         <span className="export-private-key-modal__body-title">
           {this.context.t('showPrivateKeys')}

ui/components/app/modals/export-private-key-modal/index.scss

@@ -65,24 +65,17 @@
     margin-top: 18px;
   }
 
-  &__password-display-wrapper {
+  &__private-key-display {
+    @include Paragraph;
+
     height: 80px;
     width: 291px;
     border: 1px solid var(--color-border-default);
     border-radius: 2px;
-  }
-
-  &__password-display-textarea {
-    @include Paragraph;
-
     color: var(--color-error-default);
-    background-color: var(--color-background-default);
-    border: none;
-    height: 75px;
-    width: 100%;
-    overflow: hidden;
-    resize: none;
     padding: 9px 13px 8px;
+    overflow: hidden;
+    overflow-wrap: break-word;
   }
 
   &__buttons {
@@ -104,18 +97,13 @@
   }
 
   .ellip-address-wrapper {
-    display: flex;
-    justify-content: center;
     border: 1px solid var(--color-border-default);
     padding: 5px 10px;
     margin-top: 7px;
-    width: 286px;
+    max-width: 286px;
-
+    direction: ltr;
-    input {
+    overflow: hidden;
-      background: var(--color-background-default);
+    text-overflow: ellipsis;
-      color: var(--color-text-default);
-      border: 0;
-    }
   }
 }
 

ui/components/ui/readonly-input/index.js

@@ -1 +0,0 @@
-export { default } from './readonly-input';

ui/components/ui/readonly-input/index.scss

@@ -1,8 +0,0 @@
-.readonly-input {
-  &__input {
-    direction: ltr;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 100%;
-  }
-}

ui/components/ui/readonly-input/readonly-input.js

@@ -1,38 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import classnames from 'classnames';
-
-export default function ReadOnlyInput(props) {
-  const {
-    wrapperClass = '',
-    inputClass = '',
-    value,
-    textarea,
-    onClick,
-    autoFocus = false,
-  } = props;
-
-  const InputType = textarea ? 'textarea' : 'input';
-
-  return (
-    <div className={classnames('readonly-input', wrapperClass)}>
-      <InputType
-        className={classnames('readonly-input__input', inputClass)}
-        value={value}
-        readOnly
-        onFocus={(event) => event.target.select()}
-        onClick={onClick}
-        autoFocus={autoFocus}
-      />
-    </div>
-  );
-}
-
-ReadOnlyInput.propTypes = {
-  wrapperClass: PropTypes.string,
-  inputClass: PropTypes.string,
-  value: PropTypes.string,
-  textarea: PropTypes.bool,
-  onClick: PropTypes.func,
-  autoFocus: PropTypes.bool,
-};

ui/components/ui/ui-components.scss

@@ -40,7 +40,6 @@
 @import 'pulse-loader/index';
 @import 'qr-code/index';
 @import 'radio-group/index';
-@import 'readonly-input/index';
 @import 'sender-to-recipient/index';
 @import 'show-hide-toggle/index.scss';
 @import 'snackbar/index';