MyCrypto/common/containers/Tabs/ENS/components/UnfinishedBanner/index.tsx

41 lines
938 B
TypeScript

import React from 'react';
import './index.scss';
interface State {
isFading: boolean;
hasAcknowledged: boolean;
}
export default class UnfinishedBanner extends React.Component<{}, State> {
public state = {
isFading: false,
hasAcknowledged: false
};
public render() {
if (this.state.hasAcknowledged) {
return null;
}
const isFading = this.state.isFading ? 'is-fading' : '';
return (
<div className={`UnfinishedBanner ${isFading}`} onClick={this.continue}>
<div className="UnfinishedBanner-content">
<h2>Under Contruction</h2>
<p>The ENS section is still under contruction</p>
<p>Expect unfinished components</p>
<h3>Click to continue</h3>
</div>
</div>
);
}
private continue = () => {
this.setState({ isFading: true });
setTimeout(() => {
this.setState({ hasAcknowledged: true });
}, 1000);
};
}