1  import React, { PureComponent } from 'react';
  2  import { connect } from 'react-redux';
  3  
  4  import translate, { translateRaw } from 'translations';
  5  import { AddressOnlyWallet } from 'libs/wallet';
  6  import { AppState } from 'features/reducers';
  7  import { getIsValidAddressFn } from 'features/config';
  8  import { Input } from 'components/ui';
  9  import { AddressField } from 'components';
 10  import './ViewOnly.scss';
 11  
 12  interface OwnProps {
 13    onUnlock(param: any): void;
 14  }
 15  
 16  interface StateProps {
 17    isValidAddress: ReturnType<typeof getIsValidAddressFn>;
 18  }
 19  
 20  type Props = OwnProps & StateProps;
 21  
 22  interface State {
 23    address: string;
 24    addressFromBook: string;
 25  }
 26  
 27  class ViewOnlyDecryptClass extends PureComponent<Props, State> {
 28    public state = {
 29      address: '',
 30      addressFromBook: ''
 31    };
 32  
 33    public render() {
 34      const { isValidAddress } = this.props;
 35      const { address, addressFromBook } = this.state;
 36      const isValid = isValidAddress(address);
 37  
 38      return (
 39        <div className="ViewOnly">
 40          <form className="form-group" onSubmit={this.openWalletWithAddress}>
 41            <section className="ViewOnly-fields">
 42              <section className="ViewOnly-fields-field">
 43                <AddressField
 44                  value={addressFromBook}
 45                  showInputLabel={false}
 46                  showIdenticon={false}
 47                  placeholder={translateRaw('SELECT_FROM_ADDRESS_BOOK')}
 48                  onChangeOverride={this.handleSelectAddressFromBook}
 49                  dropdownThreshold={0}
 50                />
 51              </section>
 52              <section className="ViewOnly-fields-field">
 53                <em>{translate('OR')}</em>
 54              </section>
 55              <section className="ViewOnly-fields-field">
 56                <Input
 57                  isValid={isValid}
 58                  className="ViewOnly-input"
 59                  value={address}
 60                  onChange={this.changeAddress}
 61                  placeholder={translateRaw('VIEW_ONLY_ENTER')}
 62                />
 63                <button className="ViewOnly-submit btn btn-primary btn-block" disabled={!isValid}>
 64                  {translate('VIEW_ADDR')}
 65                </button>
 66              </section>
 67            </section>
 68          </form>
 69        </div>
 70      );
 71    }
 72  
 73    private changeAddress = (ev: React.FormEvent<HTMLInputElement>) => {
 74      this.setState({ address: ev.currentTarget.value });
 75    };
 76  
 77    private handleSelectAddressFromBook = (ev: React.FormEvent<HTMLInputElement>) => {
 78      const { currentTarget: { value: addressFromBook } } = ev;
 79      this.setState({ addressFromBook }, this.openWalletWithAddressBook);
 80    };
 81  
 82    private openWalletWithAddress = (ev?: React.FormEvent<HTMLElement>) => {
 83      const { address } = this.state;
 84  
 85      if (ev) {
 86        ev.preventDefault();
 87      }
 88  
 89      this.openWallet(address);
 90    };
 91  
 92    private openWalletWithAddressBook = () => {
 93      const { addressFromBook } = this.state;
 94  
 95      this.openWallet(addressFromBook);
 96    };
 97  
 98    private openWallet = (address: string) => {
 99      const { isValidAddress } = this.props;
100  
101      if (isValidAddress(address)) {
102        const wallet = new AddressOnlyWallet(address);
103        this.props.onUnlock(wallet);
104      }
105    };
106  }
107  
108  export const ViewOnlyDecrypt = connect((state: AppState): StateProps => ({
109    isValidAddress: getIsValidAddressFn(state)
110  }))(ViewOnlyDecryptClass);