1  import React, { PureComponent } from 'react';
  2  import { connect } from 'react-redux';
  3  
  4  import { getAddressMessage } from 'config';
  5  import { Token } from 'types/network';
  6  import { ICurrentTo } from 'features/types';
  7  import { AppState } from 'features/reducers';
  8  import * as derivedSelectors from 'features/selectors';
  9  import { getAllTokens } from 'features/config';
 10  import { walletSelectors } from 'features/wallet';
 11  import { Address } from 'components/ui';
 12  
 13  interface ReduxProps {
 14    currentTo: ICurrentTo;
 15    tokens: Token[];
 16    wallet: AppState['wallet']['inst'];
 17  }
 18  
 19  type Props = ReduxProps;
 20  
 21  interface State {
 22    walletAddress: string | null;
 23  }
 24  
 25  class CurrentCustomMessageClass extends PureComponent<Props, State> {
 26    public state: State = {
 27      walletAddress: null
 28    };
 29  
 30    public async componentDidMount() {
 31      this.setAddressState(this.props);
 32    }
 33  
 34    public UNSAFE_componentWillReceiveProps(nextProps: Props) {
 35      if (this.props.wallet !== nextProps.wallet) {
 36        this.setAddressState(nextProps);
 37      }
 38    }
 39  
 40    public render() {
 41      const message = this.getMessage();
 42      if (message) {
 43        return (
 44          <div className="clearfix form-group">
 45            <div className={`alert alert-${message.severity} col-xs-12`}>{message.message}</div>
 46          </div>
 47        );
 48      } else {
 49        return null;
 50      }
 51    }
 52  
 53    private setAddressState(props: Props) {
 54      if (props.wallet) {
 55        const walletAddress = props.wallet.getAddressString();
 56        this.setState({ walletAddress });
 57      } else {
 58        this.setState({ walletAddress: '' });
 59      }
 60    }
 61  
 62    private getMessage() {
 63      const { currentTo, tokens } = this.props;
 64      const { walletAddress } = this.state;
 65      // Make sure all comparisons are lower-cased.
 66      const address = currentTo.raw.toLowerCase();
 67  
 68      let message;
 69      let severity;
 70  
 71      // First check against our hard-coded messages
 72      const msg = getAddressMessage(address);
 73      if (msg) {
 74        message = (
 75          <React.Fragment>
 76            <p>
 77              <small>
 78                A message regarding{' '}
 79                <strong>
 80                  <Address address={address} />
 81                </strong>:
 82              </small>
 83            </p>
 84            <p>{msg.msg}</p>
 85          </React.Fragment>
 86        );
 87        severity = msg.severity || 'info';
 88      }
 89  
 90      // Otherwise check if any of our tokens match the address
 91      if (!message) {
 92        const token = tokens.find(tk => tk.address.toLowerCase() === address);
 93        if (token) {
 94          message = `
 95            You’re currently sending to the ${token.symbol} contract. If you
 96            wanted to send ${token.symbol} to an address, change the To Address to
 97            where you want it to go, make sure you have a positive ${token.symbol}
 98            balance in your wallet, and select it from the dropdown next to the
 99            Amount field.
100          `;
101          severity = 'warning';
102        }
103      }
104  
105      // Finally check if they're sending to themselves (lol)
106      if (walletAddress === address) {
107        message = 'You’re sending to yourself. Are you sure you want to do that?';
108        severity = 'warning';
109      }
110  
111      if (message) {
112        return {
113          message,
114          severity
115        };
116      }
117    }
118  }
119  
120  export const CurrentCustomMessage = connect((state: AppState): ReduxProps => ({
121    currentTo: derivedSelectors.getCurrentTo(state),
122    tokens: getAllTokens(state),
123    wallet: walletSelectors.getWalletInst(state)
124  }))(CurrentCustomMessageClass);