Add a button to paste pubkey from clipboard if valid

images/icon-paste.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 7L7 7 7 4 12 5 17 4z"/><path d="M21,3h-6.184C14.403,1.837,13.304,1,12,1S9.597,1.837,9.184,3H3v18h18V3z M19,19H5V5h7c-0.552,0-1-0.448-1-1s0.448-1,1-1s1,0.448,1,1s-0.448,1-1,1h7V19z"/></svg>

js/background.js

@@ -116,6 +116,7 @@
     'warning.svg',
     'x.svg',
     'x_white.svg',
+    'icon-paste.svg',
     'loki/loki_icon_text.png',
     'loki/loki_icon_128.png',
   ]);

js/views/main_header_view.js

@@ -10,8 +10,6 @@
     templateName: 'main-header-placeholder',
     events: {
       'click .main-header-title-wrapper': 'onClick',
-      'click .edit-name': 'onEditProfile',
-      'click .copy-key': 'onCopyKey',
     },
     initialize(options) {
       this.ourNumber = textsecure.storage.user.getNumber();

stylesheets/_modules.scss

@@ -2333,6 +2333,17 @@
   @include color-svg('../images/x-16.svg', $color-gray-60);
 }
 
+.module-main-header__search__copy-from-clipboard {
+  position: absolute;
+  right: 16px;
+  top: 5px;
+  width: 20px;
+  height: 22px;
+  opacity: 0.8;
+  cursor: pointer;
+  @include color-svg('../images/icon-paste.svg', $color-gray-60);
+}
+
 // Module: Image
 
 .module-image {

ts/components/MainHeader.tsx

@@ -13,6 +13,9 @@ import { ContactName } from './conversation/ContactName';
 
 import { cleanSearchTerm } from '../util/cleanSearchTerm';
 import { LocalizerType } from '../types/Util';
+import { clipboard } from 'electron';
+
+import { validateNumber } from '../types/PhoneNumber';
 
 interface MenuItem {
   id: string;
@@ -56,6 +59,7 @@ export class MainHeader extends React.Component<Props, any> {
     event: React.FormEvent<HTMLInputElement>
   ) => void;
   private readonly clearSearchBound: () => void;
+  private readonly copyFromClipboardBound: () => void;
   private readonly handleKeyUpBound: (
     event: React.KeyboardEvent<HTMLInputElement>
   ) => void;
@@ -69,16 +73,23 @@ export class MainHeader extends React.Component<Props, any> {
     this.state = {
       expanded: false,
       hasPass: null,
+      clipboardText: '',
       menuItems: [],
     };
 
     this.updateSearchBound = this.updateSearch.bind(this);
     this.clearSearchBound = this.clearSearch.bind(this);
+    this.copyFromClipboardBound = this.copyFromClipboard.bind(this);
     this.handleKeyUpBound = this.handleKeyUp.bind(this);
     this.setFocusBound = this.setFocus.bind(this);
     this.inputRef = React.createRef();
 
     this.debouncedSearch = debounce(this.search.bind(this), 20);
+
+    setInterval(() => {
+      const clipboardText = clipboard.readText();
+      this.setState({ clipboardText });
+    }, 100);
   }
 
   public componentWillMount() {
@@ -136,6 +147,13 @@ export class MainHeader extends React.Component<Props, any> {
     this.setFocus();
   }
 
+  public copyFromClipboard() {
+    const { clipboardText } = this.state;
+
+    this.props.updateSearchTerm(clipboardText);
+    this.debouncedSearch(clipboardText);
+  }
+
   public handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {
     const { clearSearch } = this.props;
 
@@ -233,6 +251,15 @@ export class MainHeader extends React.Component<Props, any> {
     );
   }
 
+  private shouldShowPaste() {
+    const { searchTerm, i18n } = this.props;
+    const { clipboardText } = this.state;
+
+    const error = validateNumber(clipboardText, i18n);
+
+    return !searchTerm && !error;
+  }
+
   private renderSearch() {
     const { searchTerm, i18n } = this.props;
 
@@ -248,6 +275,13 @@ export class MainHeader extends React.Component<Props, any> {
           value={searchTerm}
           onChange={this.updateSearchBound}
         />
+        {this.shouldShowPaste() ? (
+          <span
+            role="button"
+            className="module-main-header__search__copy-from-clipboard"
+            onClick={this.copyFromClipboardBound}
+          />
+        ) : null}
         <span
           role="button"
           className="module-main-header__search__icon"