Delete unused to-autocomplete (#7533)

ui/app/css/itcss/components/send.scss

@@ -749,66 +749,6 @@
     }
   }
 
-  &__to-autocomplete {
-    position: relative;
-
-    &__qr-code {
-      z-index: 1026;
-      top: 13px;
-      right: 33px;
-      cursor: pointer;
-      padding: 8px 5px 5px;
-      border-radius: 4px;
-    }
-
-    &__qr-code:hover {
-      background: #f1f1f1;
-    }
-  }
-
-  &__to-autocomplete {
-    display: flex;
-    flex-direction: row;
-    z-index: 1025;
-    position: relative;
-    height: 54px;
-    width: 100%;
-    border: 1px solid $Grey-100;
-    border-radius: 8px;
-    background-color: $white;
-    color: $tundora;
-    padding: 0 10px;
-    font-family: Roboto;
-    line-height: 21px;
-    align-items: center;
-
-    &__input {
-      font-size: 16px;
-      height: 100%;
-      border: none;
-      flex: 1 1 auto;
-      width: 0;
-
-      &::placeholder {
-        color: #A1A5B3;
-      }
-    }
-
-    &__resolved {
-      font-size: 12px;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      height: 30px;
-      cursor: pointer;
-
-      + .send-v2__to-autocomplete__qr-code {
-        top: 2px;
-        right: 0;
-      }
-    }
-  }
-
   &__memo-text-area, &__hex-data {
     &__input {
       z-index: 1025;

ui/app/pages/send/to-autocomplete.component.js

@@ -1,141 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import AccountListItem from './account-list-item/account-list-item.component'
-
-
-export default class ToAutoComplete extends Component {
-
-  static propTypes = {
-    dropdownOpen: PropTypes.bool,
-    openDropdown: PropTypes.func,
-    closeDropdown: PropTypes.func,
-    onChange: PropTypes.func,
-    to: PropTypes.string,
-    accounts: PropTypes.array,
-    inError: PropTypes.bool,
-  }
-
-  static contextTypes = {
-    t: PropTypes.func,
-  }
-
-  state = {
-    accountsToRender: [],
-  }
-
-  getListItemIcon (listItemAddress, toAddress) {
-    return toAddress && listItemAddress === toAddress
-      ? <i className="fa fa-check fa-lg"
-        style={{
-          color: '#02c9b1',
-        }}
-      />
-      : null
-  }
-
-  renderDropdown () {
-    const {
-      closeDropdown,
-      onChange,
-      to,
-    } = this.props
-    const {accountsToRender} = this.state
-
-    if (!accountsToRender.length) {
-      return null
-    }
-
-    return (
-      <div>
-        <div className="send-v2__from-dropdown__close-area" onClick={closeDropdown} />
-        <div className="send-v2__from-dropdown__list">
-          {accountsToRender.map((account, i) => (
-            <AccountListItem
-              key={i}
-              account={account}
-              className="account-list-item__dropdown"
-              handleClick={() => {
-                onChange(account.address)
-                closeDropdown()
-              }}
-              icon={this.getListItemIcon(account.address, to)}
-              displayBalance={false}
-              displayAddress
-            />
-          ))}
-        </div>
-      </div>
-    )
-  }
-
-  handleInputEvent (event = {}, cb) {
-    const {
-      to,
-      accounts,
-      closeDropdown,
-      openDropdown,
-    } = this.props
-
-    const matchingAccounts = accounts.filter(({address}) => address.match(to || ''))
-    const matches = matchingAccounts.length
-
-    if (!matches || matchingAccounts[0].address === to) {
-      this.setState({accountsToRender: []})
-      event.target && event.target.select()
-      closeDropdown()
-    } else {
-      this.setState({accountsToRender: matchingAccounts})
-      openDropdown()
-    }
-    cb && cb(event.target.value)
-  }
-
-  componentDidUpdate (nextProps) {
-    if (this.props.to !== nextProps.to) {
-      this.handleInputEvent()
-    }
-  }
-
-  render () {
-    const {
-      to,
-      dropdownOpen,
-      onChange,
-      inError,
-    } = this.props
-
-    return (
-      <div className="send-v2__to-autocomplete">
-        <input
-          className={classnames('send-v2__to-autocomplete__input', {
-            'send-v2__error-border': inError,
-          })}
-          placeholder={this.context.t('recipientAddress')}
-          value={to}
-          onChange={event => onChange(event.target.value)}
-          onFocus={event => this.handleInputEvent(event)}
-          style={{
-            borderColor: inError ? 'red' : null,
-          }}
-        />
-        {
-          to
-            ? null
-            : <i className="fa fa-caret-down fa-lg send-v2__to-autocomplete__down-caret"
-              onClick={() => this.handleInputEvent()}
-              style={{
-                style: {color: '#dedede'},
-              }}
-            />
-        }
-        {
-          dropdownOpen
-            ? this.renderDropdown()
-            : null
-        }
-      </div>
-    )
-  }
-
-}

ui/app/pages/send/to-autocomplete/index.js

@@ -1 +0,0 @@
-export { default } from './to-autocomplete.js'

ui/app/pages/send/to-autocomplete/to-autocomplete.js

@@ -1,121 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const AccountListItem = require('../account-list-item/account-list-item.component').default
-const connect = require('react-redux').connect
-const Tooltip = require('../../../components/ui/tooltip')
-const checksumAddress = require('../../../helpers/utils/util').checksumAddress
-
-ToAutoComplete.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect()(ToAutoComplete)
-
-
-inherits(ToAutoComplete, Component)
-function ToAutoComplete () {
-  Component.call(this)
-
-  this.state = { accountsToRender: [] }
-}
-
-ToAutoComplete.prototype.getListItemIcon = function (listItemAddress, toAddress) {
-  const listItemIcon = h(`i.fa.fa-check.fa-lg`, { style: { color: '#02c9b1' } })
-
-  return toAddress && listItemAddress === toAddress
-    ? listItemIcon
-    : null
-}
-
-ToAutoComplete.prototype.renderDropdown = function () {
-  const {
-    closeDropdown,
-    onChange,
-    to,
-  } = this.props
-  const { accountsToRender } = this.state
-
-  return !!accountsToRender.length && h('div', {}, [
-
-    h('div.send-v2__from-dropdown__list', {}, [
-
-      ...accountsToRender.map(account => h(AccountListItem, {
-        account,
-        className: 'account-list-item__dropdown',
-        handleClick: () => {
-          onChange(checksumAddress(account.address))
-          closeDropdown()
-        },
-        icon: this.getListItemIcon(account.address, to),
-        displayBalance: false,
-        displayAddress: true,
-      })),
-
-    ]),
-
-  ])
-}
-
-ToAutoComplete.prototype.handleInputEvent = function (event = {}, cb) {
-  const {
-    to,
-    accounts,
-    closeDropdown,
-    openDropdown,
-  } = this.props
-
-  const matchingAccounts = accounts.filter(({ address }) => address.match(to || ''))
-  const matches = matchingAccounts.length
-
-  if (!matches || matchingAccounts[0].address === to) {
-    this.setState({ accountsToRender: [] })
-    event.target && event.target.select()
-    closeDropdown()
-  } else {
-    this.setState({ accountsToRender: matchingAccounts })
-    openDropdown()
-  }
-  cb && cb(event.target.value)
-}
-
-ToAutoComplete.prototype.componentDidUpdate = function (nextProps) {
-  if (this.props.to !== nextProps.to) {
-    this.handleInputEvent()
-  }
-}
-
-ToAutoComplete.prototype.render = function () {
-  const {
-    to,
-    onChange,
-    inError,
-    qrScanner,
-  } = this.props
-
-  return h('div.send-v2__to-autocomplete', {}, [
-
-    h(`input.send-v2__to-autocomplete__input${qrScanner ? '.with-qr' : ''}`, {
-      placeholder: this.context.t('recipientAddress'),
-      className: inError ? `send-v2__error-border` : '',
-      dir: 'auto',
-      value: to,
-      onChange: event => onChange(event.target.value),
-      onFocus: event => this.handleInputEvent(event),
-      style: {
-        borderColor: inError ? 'red' : null,
-      },
-    }),
-    qrScanner && h(Tooltip, {
-      title: this.context.t('scanQrCode'),
-      position: 'bottom',
-    }, h(`i.fa.fa-qrcode.fa-lg.send-v2__to-autocomplete__qr-code`, {
-      style: { color: '#33333' },
-      onClick: () => this.props.scanQrCode(),
-    })),
-
-    this.renderDropdown(),
-
-  ])
-}