diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 47e00fb41..7bbfe7a09 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/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;
diff --git a/ui/app/pages/send/to-autocomplete.component.js b/ui/app/pages/send/to-autocomplete.component.js
deleted file mode 100644
index bb27537db..000000000
--- a/ui/app/pages/send/to-autocomplete.component.js
+++ /dev/null
@@ -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
- ?
- : null
- }
-
- renderDropdown () {
- const {
- closeDropdown,
- onChange,
- to,
- } = this.props
- const {accountsToRender} = this.state
-
- if (!accountsToRender.length) {
- return null
- }
-
- return (
-
-
-
- {accountsToRender.map((account, i) => (
-
{
- onChange(account.address)
- closeDropdown()
- }}
- icon={this.getListItemIcon(account.address, to)}
- displayBalance={false}
- displayAddress
- />
- ))}
-
-
- onChange(event.target.value)}
- onFocus={event => this.handleInputEvent(event)}
- style={{
- borderColor: inError ? 'red' : null,
- }}
- />
- {
- to
- ? null
- : this.handleInputEvent()}
- style={{
- style: {color: '#dedede'},
- }}
- />
- }
- {
- dropdownOpen
- ? this.renderDropdown()
- : null
- }
-
- )
- }
-
-}
diff --git a/ui/app/pages/send/to-autocomplete/index.js b/ui/app/pages/send/to-autocomplete/index.js
deleted file mode 100644
index 244d301d1..000000000
--- a/ui/app/pages/send/to-autocomplete/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './to-autocomplete.js'
diff --git a/ui/app/pages/send/to-autocomplete/to-autocomplete.js b/ui/app/pages/send/to-autocomplete/to-autocomplete.js
deleted file mode 100644
index 71c69b5fb..000000000
--- a/ui/app/pages/send/to-autocomplete/to-autocomplete.js
+++ /dev/null
@@ -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(),
-
- ])
-}