Merge branch 'staging' into transfer

cypress/support/index.js

@@ -12,6 +12,7 @@ before(function() {
     cy.visit("/");
     cy.get("[data-testid=tryItButton]").click();
     cy.get("[data-testid=TryItConnectedPanel]").should("contain", "You are connected");
+    cy.get("[data-testid=disclaimer-chcekbox").click();
     cy.get("[data-testid=disclaimerCloseButton").click();
 });
 

src/components/Disclaimer.js

@@ -1,44 +1,167 @@
 import React from "react";
 
-import { Link } from "react-router-dom";
 import { default as Modal, ModalActions, ModalContent, ModalHeader } from "./augmint-ui/modal";
 import Button from "./augmint-ui/button";
+import styled from "styled-components";
+import theme from "styles/theme";
 
-const dismissedCookie = 'disclaimerDismissed=true';
+const dismissedCookie = "disclaimerDismissed=true";
+
+const StyledDiv = styled.div`
+    overflow: scroll;
+
+    > p {
+        font-size: 0.9rem;
+        line-height: 1.1rem;
+    }
+
+    p:first-of-type {
+        margin-top: 0;
+    }
+
+    p:last-of-type {
+        margin-bottom: 0;
+    }
+`;
+
+const StyledSection = styled.div`
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    border-radius: 4px;
+    background-color: ${theme.colors.secondaryLight};
+    margin-bottom: 5px;
+    text-align: left;
+
+    &.error {
+        background-color: ${theme.colors.mediumRed};
+    }
+
+    > div {
+        display: flex;
+    }
+
+    > p {
+        display: none;
+        margin: 10px 25px 0;
+
+        &.error {
+            display: inline;
+            color: ${theme.colors.darkRed};
+        }
+    }
+`;
+
+const StyledInput = styled.input`
+    margin-right: 10px;
+    margin-top: 5px;
+`;
+
+const Styledlabel = styled.label`
+    display: inline-block;
+`;
+
+let _className = "";
 
 export default class Disclaimer extends React.Component {
     constructor(props) {
         super(props);
 
         const dismissed = document.cookie
-          .split(";")
-          .map(cookie => cookie.trim())
-          .includes(dismissedCookie);
+            .split(";")
+            .map(cookie => cookie.trim())
+            .includes(dismissedCookie);
 
-        this.state = { dismissed };
+        this.state = {
+            dismissed,
+            checkbox: ""
+        };
+        this.validate = this.validate.bind(this);
         this.close = this.close.bind(this);
+        this.handleClick = this.handleClick.bind(this);
+    }
+
+    validate() {
+        console.log("FUT");
+        const checkbox = document.getElementById("disclaimer-chcekbox");
+        console.log(checkbox.checked);
+        if (checkbox.checked) {
+            this.setState({ checkbox: "checked" });
+            return true;
+        } else {
+            this.setState({ checkbox: "unchecked" });
+            _className = "error";
+            return false;
+        }
     }
 
     close() {
         document.cookie = dismissedCookie;
         this.setState({ dismissed: true });
     }
 
+    handleClick() {
+        if (this.validate() === true) {
+            this.close();
+        }
+    }
+
     render() {
         return (
             !this.state.dismissed && (
-                <Modal onCloseRequest={this.close}>
-                    <ModalContent>
+                <Modal onCloseRequest={this.close} noEsc={true} className="disclaimer-modal">
+                    {/* <ModalContent style={{ height: "calc(100% - 112px)" }}> */}
+                    <ModalContent className="disclaimer-modal">
                         <ModalHeader>
-                            <h3 style={{marginTop: 0}}>
-                                Augmint beta test
-                            </h3>
+                            <h3 style={{ marginTop: 0, marginBottom: "20px" }}>Augmint Disclaimer</h3>
                         </ModalHeader>
-                        Augmint is in beta test. The tokens issued by Augmint contracts are not legal tender. Use them at your own risk. Do not participate unless you have read the <Link to="/disclaimer">disclaimer</Link>.
+                        <StyledDiv>
+                            <p>
+                                The tokens issued by Augmint contracts are not legal tender. Use them at your own risk.
+                                To be used to replace, substitute or imitate any existing fiat currency might be subject
+                                to regulatory regimes. Augmint tokens are not to be issued to entities residing under
+                                regulatory regimes prohibiting ownership or usage. Use of Augmint contracts is at the
+                                owner's risk.
+                            </p>
+                            <p>
+                                Augmint project or any party who is contributing to the project cannot be held
+                                responsible for any damages, costs, expenses, anticipated savings, losses, errors,
+                                taxes, third party transactions, fees or delays encountered when interacting with
+                                Augmint contracts. Augmint Project is not responsible for any problems that may result
+                                from the use of your internet connection, our website, the Ethereum platform, any
+                                contributors website, or any problems arising from the Ethereum code. Dissatisfaction
+                                with any goods or services purchased from, or sold to, a third party must be resolved
+                                directly with that third party. The Augmint contracts are provided as is and without any
+                                representation of warranty, whether express, implied, or statutory. The limitations of
+                                liability of these contracts are agreed by the parties on the basis that the user is
+                                aware of the volatility of the foreign currency and Cryptocurrency markets.
+                            </p>
+                            <p>
+                                Augmint Project reserves the right to amend, change, add, remove, or alter parts of the
+                                above text.
+                            </p>
+                        </StyledDiv>
                     </ModalContent>
                     <ModalActions>
-                        <Button onClick={this.close} data-testid="disclaimerCloseButton">
-                            Got it
+                        <StyledSection className={_className}>
+                            <div>
+                                <StyledInput
+                                    type="checkbox"
+                                    id="disclaimer-chcekbox"
+                                    name="disclaimer"
+                                    data-testid="disclaimer-chcekbox"
+                                    className={_className}
+                                />
+                                <Styledlabel for="disclaimer-chcekbox" className={_className}>
+                                    I have read and accept Augmint's Disclaimer.
+                                </Styledlabel>
+                            </div>
+                            <p className={_className}>
+                                Please indicate that you have read and accepted Augmint's Disclaimer.
+                            </p>
+                        </StyledSection>
+                        <Button onClick={this.handleClick} data-testid="disclaimerCloseButton">
+                            Continue
                         </Button>
                     </ModalActions>
                 </Modal>

src/components/augmint-ui/modal/index.jsx

@@ -22,13 +22,15 @@ export default class Modal extends React.Component {
     }
 
     handleKeyUp(e) {
-        const { onCloseRequest } = this.props;
+        const { onCloseRequest, noEsc } = this.props;
         const keys = {
             27: () => {
                 e.preventDefault();
-                onCloseRequest();
-                window.removeEventListener("keyup", this.handleKeyUp, false);
-                this.body.classList.remove("noScroll");
+                if (!noEsc) {
+                    onCloseRequest();
+                    window.removeEventListener("keyup", this.handleKeyUp, false);
+                    this.body.classList.remove("noScroll");
+                }
             }
         };
 
@@ -40,9 +42,11 @@ export default class Modal extends React.Component {
     render() {
         const { onCloseRequest, children, showClose } = this.props;
 
+        const _className = this.props.className;
+
         return (
             <StyledOverlay className="overlay">
-                <StyledModal className="modal">
+                <StyledModal className={_className + " modal"}>
                     {children}
                     {showClose && (
                         <StyledCloseButton type="button" className="close" onClick={onCloseRequest}>

src/components/augmint-ui/modal/styles.js

@@ -17,14 +17,24 @@ const BaseModal = `
 export const StyledModal = styled.div`
     ${BaseModal};
     ${media.desktop`
-          width: 680px;
+        width: 680px;
     `};
     ${media.tablet`
         width: 75%;
     `};
     ${media.mobile`
         width: 85%;
+        height: 60%;
     `};
+
+    &.disclaimer-modal {
+        display: flex;
+        flex-direction: column;
+
+        ${media.tablet`
+            max-height: 70  %;
+        `};
+    }
 `;
 
 export const StyledOverlay = styled.div`
@@ -42,6 +52,11 @@ export const StyledModalContent = styled.div`
     font-size: ${remCalc(14)};
     line-height: 1.4;
     padding: ${remCalc(21)};
+
+    &.disclaimer-modal {
+        display: flex;
+        flex-direction: column;
+    }
 `;
 
 export const StyledModalActions = styled.div`
@@ -58,5 +73,4 @@ export const StyledCloseButton = styled.button`
     position: absolute;
     top: -25px;
     right: -25px;
-}
 `;

src/styles/theme.js

@@ -14,13 +14,16 @@ const theme = {
         opacLightWhite: "rgba(255, 255, 255, 0.1)",
         primary: "#051d2d",
         primaryLight: "#2e3438",
+        secondaryLight: "#f9db9c",
         secondary: "#ffad00",
         // secondaryDark: "#d99300",
         secondaryDark: "#e29a00",
         lightCyan: "#f8ffff",
         darkCyan: "#276f86",
         red: "#eb5757",
         lightRed: "#fff6f6",
+        mediumRed: "#ffa9a9",
+        // ffbbbb
         darkRed: "#9f3a38",
         green: "green",
         lightGreen: "#fcfff5",