src/modules/modal/components/modal-disclaimer.jsx
import React, { Component } from "react";
import PropTypes from "prop-types";
import Styles from "modules/modal/components/common/common.styles";
import ModalActions from "modules/modal/components/common/modal-actions";
import Checkbox from "src/modules/common/components/checkbox/checkbox";
const EST_HEIGHT_PERCENT = 0.98;
export default class ModalDisclaimer extends Component {
static propTypes = {
closeModal: PropTypes.func.isRequired
};
constructor(props) {
super(props);
this.state = {
didScroll: false,
didCheck: false
};
this.checkScroll = this.checkScroll.bind(this);
this.checkCheckbox = this.checkCheckbox.bind(this);
}
checkScroll(e) {
this.setState({
didScroll:
this.refs.containerText.scrollTop +
this.refs.containerText.clientHeight >=
this.refs.containerText.scrollHeight * EST_HEIGHT_PERCENT
});
}
checkCheckbox(didCheck) {
setTimeout(() => {
if (this.state.didScroll) this.setState({ didCheck });
});
}
render() {
const { closeModal } = this.props;
const { didScroll, didCheck } = this.state;
return (
<section className={Styles.ModalDisclaimer}>
<h1>Attention</h1>
<div
ref="containerText"
className={Styles.ModalDisclaimer__TextBox}
onScroll={e => this.checkScroll(e)}
>
<p>
Augur is a decentralized oracle and peer to peer protocol for
prediction markets. Augur is free, public, open source software and
a set of smart contracts written in Solidity that can be deployed to
the Ethereum blockchain (the “<b>Augur Protocol</b>
”). Before using the Augur Protocol, please review the{" "}
<a
href="https://augur.net/faq"
target="_blank"
rel="noopener noreferrer"
>
FAQs
</a>{" "}
and{" "}
<a
href="https://docs.augur.net/"
target="_blank"
rel="noopener noreferrer"
>
documentation
</a>{" "}
(the “<b>Documentation</b>
”) for a detailed explanation on how the Augur Protocol works.
</p>
<p>
The Forecast Foundation OU (the “<b>Foundation</b>
”) is a not-for-profit entity. It does not own or lead Augur, but
rather supports and develops the free, open-source protocol that is
Augur. Portions of the Augur Protocol are made available under the
GNU General Public License and portions under the MIT license -- and
the disclaimers contained therein apply including that the Augur
Protocol is provided “AS IS”, “WITH ALL FAULTS” and “AT YOUR OWN
RISK”. The Foundation will not be liable for any liability or
damages whatsoever associated with your use, inability to use, or
your interaction with other users of, the Augur Protocol, including
any direct, indirect, incidental, special, exemplary or
consequential damages, loss of profits, Reputation (REP) tokens,
Ether (ETH) tokens, any other cryptocurrencies or data.
</p>
<p>
You acknowledge that the current version of the Augur Protocol is a
beta version and as such has not been fully-tested and may not
perform as designed. On the Augur Protocol, Reputation (REP) and
Ether (ETH) may be used respectively for staking on outcomes and
trading, and in the future, other tokens or cryptocurrencies may be
used. While you should always be thoughtful about the REP, ETH or
other tokens/cryptocurrencies you stake and trade (and can lose)
through the Augur Protocol, the concerns regarding loss of these
tokens or cryptocurrencies is particularly acute with beta software
that may not perform as designed, including that the beta version of
the Augur Protocol may not accurately reflect the intent of the
smart contracts, the FAQs or the Documentation. Your use of the
Augur Protocol involves various risks, including, but not limited to
losing tokens/cryptocurrencies due to invalidation. Careful due
diligence should be undertaken as to the amount of REP, ETH or other
tokens/cryptocurrencies you stake and trade using the Augur Protocol
in beta format with full understanding that any staking and trading
of these tokens/cryptocurrencies could be subject to total loss. You
assume any and all risk associated with your use of the Augur
Protocol.
</p>
<p>
Although the Foundation has not sought to list REP on cryptocurrency
exchanges, it is aware that REP has been listed on certain exchanges
and in the future it may be delisted on these exchanges and/or
listed on others. The Foundation disavows any obligation with
respect to the listing of REP on exchanges and it disavows any
responsibility with respect to the value or trading of REP on
exchanges. Persons trading REP or otherwise engaged in activities
involving REP on exchanges assume any and all risk, including that
of total loss, associated with such activities.
</p>
<p>
You are solely responsible for compliance with all laws that may
apply to your particular use of the Augur Protocol. Cryptocurrencies
and blockchain technologies have been the subject of scrutiny by
various regulatory bodies around the world. The Foundation makes no
representation regarding the application of any laws, including but
by no means limited to those relating to gaming, options,
derivatives or securities, to your use of the Augur Protocol.
Indeed, depending on the jurisdiction and the contemplated use of
the Augur Protocol (whether yours or another’s), that use may be
considered illegal. You agree that the Foundation is not responsible
for determining whether or which laws may apply to your use of the
Augur Protocol. You may modify the Augur Protocol under the terms of
the applicable open source license to effectuate your compliance
with any applicable laws.
</p>
</div>
<div className={Styles.ModalDisclaimer__helperText}>
<label>
Read the full disclaimer above. When you've scrolled to the
bottom, click the checkbox below to mark that you understand and
agree.
</label>
</div>
<div className={Styles.ModalDisclaimer__checkbox}>
<label htmlFor="i_have_read_disclaimer">
<Checkbox
id="i_have_read_disclaimer"
type="checkbox"
value={didCheck && didScroll}
isChecked={didCheck && didScroll}
disabled={!didScroll}
onClick={e => {
e.preventDefault();
this.checkCheckbox(!didCheck);
}}
/>
I have read and understood the above.
</label>
</div>
<ModalActions
buttons={[
{
label: "I Agree and Accept the above",
type: "purple",
isDisabled: !didScroll || !didCheck,
action: closeModal
}
]}
/>
</section>
);
}
}