Remove previous <Select /> for recent addresses

common/components/WalletDecrypt/components/ViewOnly.scss

@@ -2,32 +2,24 @@
 @import 'common/sass/mixins';
 
 .ViewOnly {
-  & .AddressInput {
+  &-fields {
-    margin-top: 15px;
+    display: flex;
+    flex-direction: column;
 
-    & .input-group-input {
+    &-field {
-      margin-top: 1rem;
+      display: flex;
-    }
+      flex-direction: column;
-  }
+      align-items: center;
+      justify-content: center;
+      flex: 1;
 
-  &-recent {
+      &:nth-of-type(2) {
-    text-align: left;
+        margin-bottom: calc(1rem + 15px);
-
+        font-size: 1.2rem;
-    &-separator {
-      display: block;
-      margin: $space-sm 0;
-      text-align: center;
-      color: shade-dark(0.3);
-    }
-
-    .Select {
-      &-option {
-        @include ellipsis;
       }
 
-      .Identicon {
+      & .AddressField {
-        display: inline-block;
+        width: 100%;
-        margin-right: $space-sm;
       }
     }
   }

common/components/WalletDecrypt/components/ViewOnly.tsx

@@ -1,13 +1,11 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
-import Select, { Option } from 'react-select';
 
 import translate, { translateRaw } from 'translations';
 import { AddressOnlyWallet } from 'libs/wallet';
 import { AppState } from 'features/reducers';
 import { getIsValidAddressFn } from 'features/config';
-import { walletSelectors } from 'features/wallet';
+import { Input } from 'components/ui';
-import { Input, Identicon } from 'components/ui';
 import { AddressField } from 'components';
 import './ViewOnly.scss';
 
@@ -16,7 +14,6 @@ interface OwnProps {
 }
 
 interface StateProps {
-  recentAddresses: ReturnType<typeof walletSelectors.getRecentAddresses>;
   isValidAddress: ReturnType<typeof getIsValidAddressFn>;
 }
 
@@ -34,57 +31,40 @@ class ViewOnlyDecryptClass extends PureComponent<Props, State> {
   };
 
   public render() {
-    const { recentAddresses, isValidAddress } = this.props;
+    const { isValidAddress } = this.props;
     const { address, addressFromBook } = this.state;
     const isValid = isValidAddress(address);
-    const or = <em className="ViewOnly-recent-separator">{translate('OR')}</em>;
-
-    const recentOptions = (recentAddresses.map(addr => ({
-      label: (
-        <React.Fragment>
-          <Identicon address={addr} />
-          {addr}
-        </React.Fragment>
-      ),
-      value: addr
-      // I hate this assertion, but React elements definitely work as labels
-    })) as any) as Option[];
 
     return (
       <div className="ViewOnly">
         <form className="form-group" onSubmit={this.openWalletWithAddress}>
-          {!!recentOptions.length && (
+          <section className="ViewOnly-fields">
-            <div className="ViewOnly-recent">
+            <section className="ViewOnly-fields-field">
-              <Select
+              <AddressField
-                value={address}
+                value={addressFromBook}
-                onChange={this.handleSelectAddress}
+                showInputLabel={false}
-                options={recentOptions}
+                showIdenticon={false}
-                placeholder={translateRaw('VIEW_ONLY_RECENT')}
+                placeholder={translateRaw('SELECT_FROM_ADDRESS_BOOK')}
+                onChangeOverride={this.handleSelectAddressFromBook}
+                dropdownThreshold={0}
               />
-              {or}
+            </section>
-            </div>
+            <section className="ViewOnly-fields-field">
-          )}
+              <em>{translate('OR')}</em>
-          <div className="ViewOnly-book">
+            </section>
-            <AddressField
+            <section className="ViewOnly-fields-field">
-              value={addressFromBook}
+              <Input
-              showInputLabel={false}
+                isValid={isValid}
-              showIdenticon={false}
+                className="ViewOnly-input"
-              placeholder={translateRaw('SELECT_FROM_ADDRESS_BOOK')}
+                value={address}
-              onChangeOverride={this.handleSelectAddressFromBook}
+                onChange={this.changeAddress}
-              dropdownThreshold={0}
+                placeholder={translateRaw('VIEW_ONLY_ENTER')}
-            />
+              />
-            {or}
+              <button className="ViewOnly-submit btn btn-primary btn-block" disabled={!isValid}>
-          </div>
+                {translate('VIEW_ADDR')}
-          <Input
+              </button>
-            isValid={isValid}
+            </section>
-            className="ViewOnly-input"
+          </section>
-            value={address}
-            onChange={this.changeAddress}
-            placeholder={translateRaw('VIEW_ONLY_ENTER')}
-          />
-          <button className="ViewOnly-submit btn btn-primary btn-block" disabled={!isValid}>
-            {translate('VIEW_ADDR')}
-          </button>
         </form>
       </div>
     );
@@ -94,11 +74,6 @@ class ViewOnlyDecryptClass extends PureComponent<Props, State> {
     this.setState({ address: ev.currentTarget.value });
   };
 
-  private handleSelectAddress = (option: Option) => {
-    const address = option && option.value ? option.value.toString() : '';
-    this.setState({ address }, this.openWalletWithAddress);
-  };
-
   private handleSelectAddressFromBook = (ev: React.FormEvent<HTMLInputElement>) => {
     const { currentTarget: { value: addressFromBook } } = ev;
     this.setState({ addressFromBook }, this.openWalletWithAddressBook);
@@ -131,6 +106,5 @@ class ViewOnlyDecryptClass extends PureComponent<Props, State> {
 }
 
 export const ViewOnlyDecrypt = connect((state: AppState): StateProps => ({
-  recentAddresses: walletSelectors.getRecentAddresses(state),
   isValidAddress: getIsValidAddressFn(state)
 }))(ViewOnlyDecryptClass);