MyCrypto/common/components/CurrentCustomMessage.tsx

123 lines
3.2 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { AppState } from 'reducers';
import { getCurrentTo, ICurrentTo } from 'selectors/transaction';
import { getAllTokens } from 'selectors/config';
import { getWalletInst } from 'selectors/wallet';
import { getAddressMessage } from 'config';
import { Address } from 'components/ui';
import { Token } from 'types/network';
interface ReduxProps {
currentTo: ICurrentTo;
tokens: Token[];
wallet: AppState['wallet']['inst'];
}
type Props = ReduxProps;
interface State {
walletAddress: string | null;
}
class CurrentCustomMessageClass extends PureComponent<Props, State> {
public state: State = {
walletAddress: null
};
public async componentDidMount() {
this.setAddressState(this.props);
}
public componentWillReceiveProps(nextProps: Props) {
if (this.props.wallet !== nextProps.wallet) {
this.setAddressState(nextProps);
}
}
public render() {
const message = this.getMessage();
if (message) {
return (
<div className="clearfix form-group">
<div className={`alert alert-${message.severity} col-xs-12`}>{message.message}</div>
</div>
);
} else {
return null;
}
}
private setAddressState(props: Props) {
if (props.wallet) {
const walletAddress = props.wallet.getAddressString();
this.setState({ walletAddress });
} else {
this.setState({ walletAddress: '' });
}
}
private getMessage() {
const { currentTo, tokens } = this.props;
const { walletAddress } = this.state;
// Make sure all comparisons are lower-cased.
const address = currentTo.raw.toLowerCase();
let message;
let severity;
// First check against our hard-coded messages
const msg = getAddressMessage(address);
if (msg) {
message = (
<React.Fragment>
<p>
<small>
A message regarding{' '}
<strong>
<Address address={address} />
</strong>:
</small>
</p>
<p>{msg.msg}</p>
</React.Fragment>
);
severity = msg.severity || 'info';
}
// Otherwise check if any of our tokens match the address
if (!message) {
const token = tokens.find(tk => tk.address.toLowerCase() === address);
if (token) {
message = `
Youre currently sending to the ${token.symbol} contract. If you
wanted to send ${token.symbol} to an address, change the To Address to
where you want it to go, make sure you have a positive ${token.symbol}
balance in your wallet, and select it from the dropdown next to the
Amount field.
`;
severity = 'warning';
}
}
// Finally check if they're sending to themselves (lol)
if (walletAddress === address) {
message = 'Youre sending to yourself. Are you sure you want to do that?';
severity = 'warning';
}
if (message) {
return {
message,
severity
};
}
}
}
export const CurrentCustomMessage = connect((state: AppState): ReduxProps => ({
currentTo: getCurrentTo(state),
tokens: getAllTokens(state),
wallet: getWalletInst(state)
}))(CurrentCustomMessageClass);