Improve top nav and account overview layout

cypress/integration/augmintbasic.js

@@ -1,5 +1,6 @@
 describe("Augmint base", function() {
     it("Under the hood", function() {
+        cy.get("[data-testid=reservesMenuLink]").click();
         cy.get("[data-testid=underTheHoodLink]").click();
 
         cy.get("[data-testid=baseInfoLink]").click();

cypress/support/commands.js

@@ -132,22 +132,22 @@ Cypress.Commands.add("getUserEthBalance", (account, options = {}) => {
 Cypress.Commands.add("assertUserAEurBalanceOnUI", (balance, options = {}) => {
     cy.get("[data-testid=accountInfoBlock]").should("not.have.class", "loading");
 
+    const decimals = 2;
+    const fmt = new Intl.NumberFormat("en", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
+
     cy.get("[data-testid=userAEurBalance]")
         .invoke("text")
-        .should("equal", balance.toFixed(2));
+        .should("equal", fmt.format(balance) + " A€");
 });
 
 // assert user balance on UI.
-Cypress.Commands.add("assertUserEthBalanceOnUI", (_expectedEth, decimals = 12, options = {}) => {
-    const expectedEth = Number(_expectedEth.toFixed(decimals));
+Cypress.Commands.add("assertUserEthBalanceOnUI", (_expectedEth, decimals = 13, options = {}) => {
+    const fmt = new Intl.NumberFormat("en", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
     cy.get("[data-testid=accountInfoBlock]").should("not.have.class", "loading");
 
     cy.get("[data-testid=userEthBalance]")
         .invoke("text")
-        .should(val => {
-            // TODO: this throws a lot of console warnings
-            expect(Number(val)).to.be.approximately(expectedEth, 1 / 10 ** decimals);
-        });
+        .should("contain", fmt.format(_expectedEth));
 });
 
 // issue AEUR to account

src/components/accountAddress/index.js

@@ -1,21 +1,39 @@
 import React from "react";
 import Icon from "components/augmint-ui/icon";
+import Button from "components/augmint-ui/button";
 
 import { shortAccountAddresConverter } from "utils/converter";
-import { StyledContainer, StyledClicked, StyledHint } from "./styles";
-
-export default function AccountAddress(props) {
-    const { address, showCopyIcon, title, shortAddress } = props;
-    const _title = title !== undefined ? title : "Account: ";
-
-    function copyAddress(e) {
-        let element = e.target;
-        if (element.attributes.name && element.attributes.name.nodeValue === "copy") {
-            element = element.parentElement;
-        }
-        element.classList.add("clicked");
+import { StyledContainer, StyledClicked, StyledHint, StyledHintBtn } from "./styles";
+
+export default class AccountAddress extends React.Component {
+    constructor(props) {
+        super(props);
+        this.showHint = this.showHint.bind(this);
+        this.hideHint = this.hideHint.bind(this);
+        this.copyAddress = this.copyAddress.bind(this);
+        this.state = {
+            showHint: false
+        };
+    }
+
+    showHint(timeout) {
+        this.setState({ showHint: true });
+        this.copyAddress();
+        timeout &&
+            setTimeout(() => {
+                this.hideHint();
+            }, 2000);
+    }
+
+    hideHint() {
+        this.setState({
+            showHint: false
+        });
+    }
+
+    copyAddress(e) {
         const el = document.createElement("textarea");
-        el.value = address;
+        el.value = this.props.address;
         el.setAttribute("readonly", "");
         el.style.position = "absolute";
         el.style.left = "-9999px";
@@ -25,25 +43,77 @@ export default function AccountAddress(props) {
         document.body.removeChild(el);
     }
 
-    function removeClicked(e) {
-        let element = e.target;
-        if (element.attributes.name && element.attributes.name.nodeValue === "copy") {
-            element = element.parentElement;
-        }
-        element.classList.remove("clicked");
-    }
+    render() {
+        const { address, showCopyIcon, title, shortAddress, className, showCopyLink } = this.props;
+        const _title = title !== undefined ? title : "Account: ";
+        const _className = this.state.showHint ? className + " showHint" : className;
+        const ShortAddress = () => _title + (shortAddress === true ? shortAccountAddresConverter(address) : address);
+
+        const ContainerWBtn = () => {
+            return (
+                <StyledContainer className={className + " container"}>
+                    <ShortAddress />
+                    {showCopyIcon && (
+                        <Icon
+                            name="copy"
+                            style={{ paddingLeft: 5 }}
+                            onClick={e => this.showHint(true)}
+                            onMouseLeave={e => this.hideHint()}
+                        />
+                    )}
+                    <Button
+                        content="Copy"
+                        data-testid="loansToCollectButton"
+                        onClick={e => this.showHint(true)}
+                        icon="copy"
+                        labelposition="left"
+                        iconsize="small"
+                        style={{ marginTop: "10px", marginBottom: "20px" }}
+                        className="ghost naked icon left"
+                    />
+                    <Button
+                        content="Copy"
+                        data-testid="loansToCollectButton"
+                        onClick={e => this.showHint(true)}
+                        icon="copy"
+                        labelposition="left"
+                        style={{ marginBottom: "20px" }}
+                        className="grey icon left"
+                    />
+                    <StyledHintBtn className={_className} id="StyledHinBtn">
+                        <Icon name="check" style={{ marginRight: "5px", color: "green" }} />
+                        Copied!
+                    </StyledHintBtn>
+                </StyledContainer>
+            );
+        };
 
-    return (
-        <StyledContainer onClick={copyAddress} onMouseLeave={removeClicked}>
-            {_title + (shortAddress === true ? shortAccountAddresConverter(address) : address)}
-            {showCopyIcon && (
-                <Icon name="copy" style={{ paddingLeft: 5 }} onClick={copyAddress} onMouseLeave={removeClicked} />
-            )}
-            <StyledHint>
-                <StyledClicked>
-                    <Icon name="check" />
-                </StyledClicked>
-            </StyledHint>
-        </StyledContainer>
-    );
+        const ContainerWHint = () => {
+            return (
+                <StyledContainer
+                    onClick={e => this.showHint(true)}
+                    onMouseLeave={e => this.hideHint()}
+                    className={_className}
+                    id="StyledContainer"
+                >
+                    <ShortAddress />
+                    {showCopyIcon && (
+                        <Icon
+                            name="copy"
+                            style={{ paddingLeft: 5 }}
+                            onClick={e => this.showHint(true)}
+                            onMouseLeave={e => this.hideHint()}
+                        />
+                    )}
+                    <StyledHint>
+                        <StyledClicked>
+                            <Icon name="check" />
+                        </StyledClicked>
+                    </StyledHint>
+                </StyledContainer>
+            );
+        };
+
+        return <div>{showCopyLink ? <ContainerWBtn /> : <ContainerWHint />}</div>;
+    }
 }

src/components/accountAddress/styles.js

@@ -19,13 +19,26 @@ export const StyledHint = styled.span`
     &::after {
         content: "Click to copy!";
     }
+
+    &.noHint {
+        display: none;
+    }
 `;
 
 export const StyledContainer = styled.div`
     cursor: pointer;
     display: inline-block;
+    font-weight: 400;
+
+    &.container {
+        position: relative;
+    }
+
+    &.noClick {
+        cursor: default;
+    }
 
-    &.clicked ${StyledClicked} {
+    &.showHint ${StyledClicked} {
         display: inline-block;
         padding-right: 5px;
     }
@@ -34,12 +47,49 @@ export const StyledContainer = styled.div`
         display: block;
     }
 
-    &.clicked:hover ${StyledHint} {
+    &.showHint:hover ${StyledHint} {
         display: block;
 
         &::after {
-            color: ${theme.colors.darkGreen};
+            color: ${theme.colors.lightGreen};
             content: "Copied!";
         }
     }
+
+    &.breakToLines {
+        &.onMobile {
+            @media (max-width: 600px) {
+                display: block;
+                max-width: 260px;
+            }
+        }
+        &.always {
+            display: block;
+            max-width: 210px;
+            margin: auto;
+        }
+    }
+
+    &.bold {
+        font-weight: 700;
+    }
+
+    &.font {
+        font-family: ${theme.typography.fontFamilies.currency};
+    }
+`;
+
+export const StyledHintBtn = styled.div`
+    font-family: ${theme.typography.fontFamilies.default};
+    display: none;
+
+    &.showHint {
+        display: block;
+        background-color: white;
+        border-radius: 3px;
+        padding: 10px 20px;
+        position: absolute;
+        left: 45px;
+        top: 42px;
+    }
 `;

src/components/accountInfo/index.js

@@ -4,8 +4,11 @@ import { Link } from "react-router-dom";
 import { ConnectionStatus } from "components/MsgPanels";
 import AccountAddress from "components/accountAddress";
 import { StyledAccountInfo, StyledAccountDiv, StyledAccInfoLink } from "./styles";
+import { AEUR, ETH } from "components/augmint-ui/currencies";
+import { ETHEUR } from "utils/constants";
 import Icon from "components/augmint-ui/icon";
-import WatchAssetButton from "components/watchAssetButton.js";
+import WatchAssetButton from "components/watchAssetButton";
+import { default as theme } from "styles/theme";
 
 export class AccountInfo extends React.Component {
     render() {
@@ -33,27 +36,47 @@ export class AccountInfo extends React.Component {
             >
                 <ConnectionStatus contract={augmintToken} />
                 <StyledAccountDiv>
-                    Account address:
-                    <div style={{ margin: "0px" }}>
+                    <span style={{ fontWeight: "normal" }}>Account address:</span>
+                    <div
+                        style={{
+                            margin: "0px",
+                            fontFamily: theme.typography.fontFamilies.currency,
+                            overflowWrap: "break-word"
+                        }}
+                    >
                         <AccountAddress
                             address={data.account.address}
                             showCopyIcon="true"
                             title=""
-                            style={{ fontWeight: "lighter" }}
+                            className={"breakToLines onMobile bold"}
                         />
                     </div>
                 </StyledAccountDiv>
                 <br />
                 <StyledAccountDiv>
-                    Balance:
-                    <div style={{ margin: "0px" }}>
-                        ETH: <span data-testid={!hideTestId && "userEthBalance"}>{data.account.ethBalance}</span>
+                    <span style={{ fontWeight: "normal" }}>Balance:</span>
+                    <div>
+                        <AEUR
+                            amount={data.account.tokenBalance}
+                            data-testid={!hideTestId && "userAEurBalance"}
+                            style={{ fontFamily: theme.typography.fontFamilies.currency }}
+                        />
                     </div>
                     <div>
-                        A-EUR: <span data-testid={!hideTestId && "userAEurBalance"}>{data.account.tokenBalance}</span>
+                        <ETH
+                            amount={data.account.ethBalance}
+                            data-testid={!hideTestId && "userEthBalance"}
+                            decimals={15}
+                            style={{ fontFamily: theme.typography.fontFamilies.currency }}
+                        />
                     </div>
                 </StyledAccountDiv>
-                <StyledAccountDiv className="accInfoDetail">€/ETH {data.rates.info.ethFiatRate}</StyledAccountDiv>
+                <StyledAccountDiv className="accInfoDetail">
+                    <span style={{ fontWeight: "normal" }}>{ETHEUR}: </span>
+                    <span style={{ fontFamily: theme.typography.fontFamilies.currency, fontWeight: "700" }}>
+                        {data.rates.info.ethFiatRate}
+                    </span>
+                </StyledAccountDiv>
                 <StyledAccInfoLink
                     title="Under the hood"
                     to="/under-the-hood"
@@ -63,7 +86,7 @@ export class AccountInfo extends React.Component {
                     {data.web3Connect.network.name}
                 </StyledAccInfoLink>
 
-                <WatchAssetButton />
+                <WatchAssetButton className={"accInfo"} />
 
                 {showMyAccountLink && <Link to="/account">More details</Link>}
             </StyledAccountInfo>