96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
import React, { Component } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { AppState } from 'reducers';
|
|
import { resolveDomainRequested, TResolveDomainRequested } from 'actions/ens';
|
|
import { isValidENSName } from 'libs/validators';
|
|
import './NameInput.scss';
|
|
import { Input } from 'components/ui';
|
|
import translate from 'translations';
|
|
|
|
interface State {
|
|
domainToCheck: string;
|
|
isValidDomain: boolean;
|
|
isFocused: boolean;
|
|
}
|
|
|
|
interface Props {
|
|
domainRequests: AppState['ens']['domainRequests'];
|
|
resolveDomainRequested: TResolveDomainRequested;
|
|
}
|
|
|
|
class NameInput extends Component<Props, State> {
|
|
public state = {
|
|
isFocused: false,
|
|
isValidDomain: false,
|
|
domainToCheck: ''
|
|
};
|
|
|
|
public render() {
|
|
const { domainRequests } = this.props;
|
|
const { isValidDomain, domainToCheck } = this.state;
|
|
const req = domainRequests[domainToCheck];
|
|
const isLoading = req && !req.data && !req.error;
|
|
|
|
return (
|
|
<form className="ENSInput" onSubmit={this.onSubmit}>
|
|
<div className="input-group-wrapper">
|
|
<label className="input-group input-group-inline ENSInput-name">
|
|
<Input
|
|
value={domainToCheck}
|
|
className={`${
|
|
!domainToCheck ? '' : isValidDomain ? '' : 'invalid'
|
|
} border-rad-right-0`}
|
|
type="text"
|
|
placeholder="mycrypto"
|
|
onChange={this.onChange}
|
|
onFocus={this.onFocus}
|
|
onBlur={this.onBlur}
|
|
disabled={isLoading}
|
|
/>
|
|
<span className="input-group-addon">.eth</span>
|
|
</label>
|
|
{domainToCheck &&
|
|
!isValidDomain && (
|
|
<p className="help-block is-invalid">{translate('ENS_INVALID_INPUT')}</p>
|
|
)}
|
|
</div>
|
|
<button
|
|
className="ENSInput-button btn btn-primary btn-block"
|
|
disabled={!isValidDomain || isLoading}
|
|
>
|
|
{translate('ACTION_9')}
|
|
</button>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
// add delay to namehash computation / getting the availability
|
|
private onChange = (event: React.FormEvent<HTMLButtonElement>) => {
|
|
const domainToCheck = event.currentTarget.value.toLowerCase().trim();
|
|
const isValidDomain = isValidENSName(domainToCheck);
|
|
this.setState({
|
|
domainToCheck,
|
|
isValidDomain
|
|
});
|
|
};
|
|
|
|
private onSubmit = (ev: React.FormEvent<HTMLElement>) => {
|
|
ev.preventDefault();
|
|
const { isValidDomain, domainToCheck } = this.state;
|
|
return isValidDomain && this.props.resolveDomainRequested(domainToCheck);
|
|
};
|
|
|
|
private onFocus = () => this.setState({ isFocused: true });
|
|
private onBlur = () => this.setState({ isFocused: false });
|
|
}
|
|
|
|
function mapStateToProps(state: AppState) {
|
|
return {
|
|
domainRequests: state.ens.domainRequests
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps, {
|
|
resolveDomainRequested
|
|
})(NameInput);
|