Merge branch 'staging' into greenkeeper/react-router-dom-5.0.0

cypress/support/index.js

@@ -10,8 +10,9 @@ before(function() {
     cy.issueTo(100000); // to make tests independent. issue to accounts[0] by default (amount with token decimals)
 
     cy.visit("/");
-    cy.get("[data-testid=useAEurButton]").click();
+    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();
 });
 

package.json

@@ -6,7 +6,7 @@
   "private": true,
   "engines": {
     "node": "10.15.3",
-    "yarn": "1.13.0"
+    "yarn": "^1.13.0"
   },
   "dependencies": {
     "bignumber.js": "5.0.0",

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 htmlFor="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/accountInfo/index.js

@@ -5,6 +5,7 @@ import { ConnectionStatus } from "components/MsgPanels";
 import AccountAddress from "components/accountAddress";
 import { StyledAccountInfo, StyledAccountDiv, StyledAccInfoLink } from "./styles";
 import Icon from "components/augmint-ui/icon";
+import WatchAssetButton from "components/watchAssetButton.js";
 
 export class AccountInfo extends React.Component {
     render() {
@@ -18,6 +19,7 @@ export class AccountInfo extends React.Component {
             className,
             toggleAccInfo
         } = this.props;
+
         return (
             <StyledAccountInfo
                 data-testid={!hideTestId && "accountInfoBlock"}
@@ -60,6 +62,9 @@ export class AccountInfo extends React.Component {
                     <Icon name="connect" />
                     {data.web3Connect.network.name}
                 </StyledAccInfoLink>
+
+                <WatchAssetButton />
+
                 {showMyAccountLink && <Link to="/account">More details</Link>}
             </StyledAccountInfo>
         );

src/components/augmint-ui/icon/index.js

@@ -73,6 +73,9 @@ export default function Icon(props) {
         case "empty":
             className += " empty";
             break;
+        case "plus":
+            className += " fa fa-plus";
+            break;
         default:
             break;
     }

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,23 @@ const BaseModal = `
 export const StyledModal = styled.div`
     ${BaseModal};
     ${media.desktop`
-          width: 680px;
+        width: 680px;
     `};
     ${media.tablet`
         width: 75%;
     `};
     ${media.mobile`
         width: 85%;
     `};
+
+    &.disclaimer-modal {
+        display: flex;
+        flex-direction: column;
+
+        ${media.tablet`
+            max-height: 80%;
+        `};
+    }
 `;
 
 export const StyledOverlay = styled.div`
@@ -42,6 +51,12 @@ export const StyledModalContent = styled.div`
     font-size: ${remCalc(14)};
     line-height: 1.4;
     padding: ${remCalc(21)};
+
+    &.disclaimer-modal {
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+    }
 `;
 
 export const StyledModalActions = styled.div`
@@ -58,5 +73,4 @@ export const StyledCloseButton = styled.button`
     position: absolute;
     top: -25px;
     right: -25px;
-}
 `;

src/components/dashboard/containers/topNav/styles.js

@@ -163,7 +163,7 @@ export const StyledPrice = styled.span`
     flex-direction: column;
     align-items: flex-end;
     color: ${theme.colors.primary};
-    padding: 0 12px;
+    margin: 0 11px;
     font-size: ${remCalc(14)};
 
     &.accountInfoContainer {

src/components/navigation/index.js

@@ -96,13 +96,13 @@ export default class SiteMenu extends React.Component {
                     </StyledNavLeftSide>
 
                     <StyledNavRightSide>
-                        <Button type="a" to="/tryit" color="primary" className="try-now">
+                        <Button type="a" to="/tryit" color="primary" className="try-now" data-testid="tryItButton">
                             Try now
                         </Button>
                         <Button
                             type="a"
-                            data-testid="useAEurButton"
-                            to={!showConnection && isConnected ? "/account" : "/tryit"}
+                            data-testid="myAccountButton"
+                            to="/account"
                             color="primary"
                             style={{ marginLeft: "15px" }}
                             onClick={e => toggleScroll(false)}