Merge pull request #648 from Augmint/staging

Release v1.2.0 to production

.yarnrc

@@ -1,2 +1,2 @@
 --install.frozen-lockfile true
-save-prefix ""
+save-prefix ""

cypress.json

@@ -3,5 +3,6 @@
   "chromeWebSecurity": false,
   "defaultCommandTimeout": 20000,
   "projectId": "jvuuf8",
-  "viewport": "macbook-15"
+  "viewport": "macbook-15",
+  "video": false
 }

cypress/integration/loans.js

@@ -35,7 +35,7 @@ describe("Loans", function() {
 
     it("Should get and collect a loan", function() {
         //get a loan which defaults in 1 sec
-        getLoan(8, 50, 50.01, 0.0507).then(res => {
+        getLoan(8, 50, 50.01, 0.05062).then(res => {
             cy.get("[data-testid=EthConfirmationReceivedPanel] > [data-testid=msgPanelClose]")
                 .first()
                 .click({
@@ -65,7 +65,7 @@ describe("Loans", function() {
     });
 
     it("Should repay a loan", function() {
-        getLoan("0", 51, 59.68, 0.1088).then(() => {
+        getLoan("7", 50, 50.01, 0.05114).then(() => {
             // TODO : little differences between amounts caused by rounding and decimals
             // cy.assertUserAEurBalanceOnUI(this.startingAeurBalance + 51);
 
@@ -85,7 +85,7 @@ describe("Loans", function() {
             cy.get("[data-testid=EthConfirmationReceivedPanel]").should("contain", "confirmation");
             cy.get("[data-testid=EthConfirmationReceivedPanel] > [data-testid=msgPanelClose]").click();
 
-            cy.assertUserAEurBalanceOnUI(this.startingAeurBalance - 8.68); // interest
+            cy.assertUserAEurBalanceOnUI(this.startingAeurBalance - 0.01); // interest
 
             // TODO loan removed, status etc.
             //cy.get("[data-testid=myAccountMenuLink]").click();

cypress/integration/locks.js

@@ -40,15 +40,17 @@ describe("Locks", function() {
 
     it("Should release locked A-EUR", function() {
         getLock(9, 50).then(() => {
+            cy.wait(1000); // to make sure the lock is releasable
             cy.get("[data-testid=lockMenuLink]")
                 .click()
                 .then(() => {
                     cy.get("[data-testid=lockCard] [data-testid=releaseLockButton]")
                         .first()
                         .click();
-                    cy.get("[data-testid=EthSubmissionSuccessPanel] > [data-testid=msgPanelOkButton]", {
-                        timeout: 20000
-                    });
+                    cy.get("[data-testid=EthSubmissionSuccessPanel] > [data-testid=msgPanelOkButton]");
+
+                    cy.get("[data-testid=EthConfirmationReceivedPanel]").contains("confirmation");
+                    cy.get("[data-testid=EthConfirmationReceivedPanel] > [data-testid=msgPanelClose]").click();
                 });
         });
     });

cypress/support/commands.js

@@ -156,15 +156,17 @@ Cypress.Commands.add("issueTo", (tokenAmount, to, options = {}) => {
         to = accounts[0];
     }
 
-    monetarySupervisorInstance.methods
-        .issueToReserve(tokenAmount)
-        .send({
-            from: accounts[0],
-            gas: 400000
+    const MONETARY_SUPERVISOR_PERMISSION = web3.utils.asciiToHex("MonetarySupervisor");
+    augmintTokenInstance.methods
+        .grantPermission(accounts[0], MONETARY_SUPERVISOR_PERMISSION)
+        .send({ from: accounts[0] })
+        .then(res => {
+            return augmintTokenInstance.methods.issueTo(to, tokenAmount).send({ from: accounts[0], gas: 500000 });
         })
         .then(res => {
-            augmintReservesInstance.methods
-                .withdraw(augmintTokenInstance._address, to, tokenAmount, 0, "token withdrawal for tests")
-                .send({ from: accounts[0], gas: 200000 });
+            return augmintTokenInstance.methods.revokePermission(
+                accounts[0],
+                web3.utils.asciiToHex("MonetarySupervisor")
+            );
         });
 });

package.json

@@ -9,8 +9,9 @@
     "yarn": "1.15.2"
   },
   "dependencies": {
-    "@augmint/js": "0.0.3",
+    "@augmint/js": "0.3.1",
     "bignumber.js": "5.0.0",
+    "bn.js": "4.11.8",
     "chart.js": "2.8.0",
     "ethereumjs-util": "6.1.0",
     "ethers": "4.0.27",
@@ -22,7 +23,7 @@
     "react-ga": "2.5.7",
     "react-redux": "7.0.2",
     "react-router-dom": "5.0.0",
-    "react-scripts": "3.0.0",
+    "react-scripts": "3.0.1",
     "react-scrollchor": "6.0.0",
     "react-tooltip": "3.10.0",
     "redux": "4.0.1",
@@ -44,17 +45,21 @@
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
     "cypress:runrecord": "$(yarn bin)/cypress run --record --key 42b3c18f-e1cf-4c27-85ed-c223e420bd4a",
-    "ganache:start": "yarn augmint-cli ganache start",
-    "ganache:stop": "yarn augmint-cli ganache stop"
+    "ganache:start": "yarn augmint-cli ganache start --blockTime 1",
+    "ganache:stop": "yarn augmint-cli ganache stop",
+    "ganache:run": "yarn augmint-cli ganache run --blockTime 1"
   },
   "devDependencies": {
     "cypress": "3.2.0",
     "eslint-plugin-cypress": "2.2.1",
-    "husky": "1.3.1",
+    "husky": "2.1.0",
     "prettier": "1.17.0",
     "pretty-quick": "1.10.0",
     "wait-on": "3.2.0"
   },
+  "resolutions": {
+    "sha3": "2.0.2"
+  },
   "greenkeeper": {
     "ignore": [
       "bignumber.js"

src/components/MsgPanels.js

@@ -166,19 +166,20 @@ export function LoadingPanel(props) {
 
 export class EthSubmissionErrorPanel extends React.Component {
     render() {
-        const { children, error, ...other } = this.props;
+        const { children, error, icon = "warning", ...other } = this.props;
         const receipt = error && error.receipt ? error.receipt : null;
         const panel = !error ? null : (
-            <MsgPanel error={!!error} {...other}>
+            <MsgPanel error={!!error} icon={icon} {...other}>
                 {children}
-                {error && error.message}
+                {error && <div style={{ marginLeft: "30px" }}>{error.message}</div>}
                 {receipt && (
                     <div>
-                        <HashURL hash={receipt.transactionHash} type={"tx/"} />
+                        <p>
+                            <HashURL hash={receipt.transactionHash} type={"tx/"} />
+                        </p>
                         <p>Gas used: {receipt.gasUsed}</p>
                     </div>
                 )}
-                {error && <ErrorDetails details={error.details} />}
             </MsgPanel>
         );
         return panel;

src/components/Table/index.js

@@ -59,7 +59,7 @@ export class CustomTable extends React.Component {
                             ))}
                     </StyleTbody>
                 </StyleTable>
-                {data && data.length > 0 && buttonVisible && (
+                {data && data.length >= PAGING && buttonVisible && (
                     <Button
                         size="big"
                         className="ghost"

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

@@ -50,7 +50,7 @@ export const BaseButton = styledComponent => styledComponent`
       background-color: ${theme.colors.secondary};
 
       &.fullwidth {
-        width: 100%; 
+        width: 100%;
         height: 50px;
       }
 
@@ -66,7 +66,7 @@ export const BaseButton = styledComponent => styledComponent`
       text-transform: none;
       background-color: ${theme.colors.primary};
       color: ${theme.colors.white};
-      
+
       ${media.tabletMin`
         padding: 20px 30px;
         font-size: ${remCalc(16)};
@@ -105,13 +105,25 @@ export const BaseButton = styledComponent => styledComponent`
       border: 1px solid ${theme.colors.primary};
       color: ${theme.colors.primary};
 
+      &.orange {
+        color: ${theme.colors.secondary};
+        background: none;
+        border: 1px solid ${theme.colors.secondary};
+      }
+
       &:hover,
       &:focus {
         background: transparent;
         background-color: ${theme.colors.primary};
         color: ${theme.colors.white};
         box-shadow: none;
       }
+
+      &.orange:hover, &.orange:focus {
+        border: 1px solid ${theme.colors.secondaryDark};
+        background-color: transparent;
+        color: ${theme.colors.secondaryDark};
+      }
     }
 
     &.naked {

src/components/augmint-ui/currencies.js

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
-import { DECIMALS } from "utils/constants";
+import { Ratio, Tokens, Wei } from "@augmint/js";
+import { DECIMALS, ETH_DECIMALS } from "utils/constants";
 
 const NoWrap = styled.span`
     white-space: nowrap;
@@ -20,7 +21,7 @@ function format(n, decimals, symbol) {
     return (
         <React.Fragment>
             {fmt.format(n)}
-            <span className="symbol"> {symbol}</span>
+            <span className="symbol">{symbol}</span>
         </React.Fragment>
     );
 }
@@ -33,11 +34,11 @@ function format(n, decimals, symbol) {
 export class AEUR extends React.Component {
     render() {
         const { amount, raw, className, decimals = DECIMALS, ...rest } = this.props;
-        const amt = isEmpty(amount) ? null : raw ? amount / Math.pow(10, DECIMALS) : amount;
+        const amt = isEmpty(amount) ? null : raw || amount instanceof Tokens ? amount / Math.pow(10, DECIMALS) : amount;
         const cls = ["AEUR", className, signum(amt)].join(" ");
         return (
             <NoWrap className={cls} {...rest}>
-                {amt !== null && format(amt, decimals, "A€")}
+                {amt !== null && format(amt, decimals, " A€")}
             </NoWrap>
         );
     }
@@ -46,16 +47,34 @@ export class AEUR extends React.Component {
 /*
     amount: amount to display
     raw: set to true, if amount is an integer in the smallest unit of account (wei)
-    decimals: defaults to 4
+    decimals: defaults to ETH_DECIMALS
  */
 export class ETH extends React.Component {
     render() {
-        const { amount, raw, className, decimals = 4, ...rest } = this.props;
-        const amt = isEmpty(amount) ? null : raw ? amount / Math.pow(10, 18) : amount;
+        const { amount, raw, className, decimals = ETH_DECIMALS, ...rest } = this.props;
+        const amt = isEmpty(amount) ? null : raw || amount instanceof Wei ? amount / Math.pow(10, 18) : amount;
         const cls = ["ETH", className, signum(amt)].join(" ");
         return (
             <NoWrap className={cls} {...rest}>
-                {amt !== null && format(amt, decimals, "ETH")}
+                {amt !== null && format(amt, decimals, " ETH")}
+            </NoWrap>
+        );
+    }
+}
+
+/*
+    amount: amount to display
+    raw: set to true, if amount is an integer in the smallest unit of account (PPM)
+    decimals: defaults to 2
+ */
+export class Percent extends React.Component {
+    render() {
+        const { amount, raw, className, decimals = 2, ...rest } = this.props;
+        const amt = isEmpty(amount) ? null : raw || amount instanceof Ratio ? amount / Math.pow(10, 4) : amount;
+        const cls = ["Percent", className, signum(amt)].join(" ");
+        return (
+            <NoWrap className={cls} {...rest}>
+                {amt !== null && format(amt, decimals, "%")}
             </NoWrap>
         );
     }

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

@@ -50,15 +50,18 @@ const BaseDiv = `
       font-size: ${remCalc(14)};
       line-height: ${remCalc(16)};
       margin: 0;
-
+      & .small {
+        font-size: ${remCalc(10)}
+        line-height: ${remCalc(12)};
+      }
     }
 
     &.notification p.nonce {
       margin-left: 30px;
       padding-bottom: 0.6em;
     }
 
-    &.notification > div > p {
+    &.notification div p {
       margin-left: 30px;
 
       & small {

src/components/navigation/index.js

@@ -5,19 +5,13 @@ import {
     StyleNavLink,
     StyleNavItem,
     StyleNavList,
-    StyledLogoContainer,
     StyledNavContainer,
     StyledNavLeftSide,
     StyledNavRightSide,
-    StyledLogo,
     HamburgerMenu
 } from "./styles";
 
 import { AugmintIcon } from "components/Icons";
-
-import augmintLogo from "assets/images/logo/logo.png";
-import augmintLogo2x from "assets/images/logo/logo@2x.png";
-import augmintLogo3x from "assets/images/logo/logo@3x.png";
 import hamburgerMenu from "assets/images/menu.svg";
 import close from "assets/images/close.svg";
 import { toggleScroll } from "utils/bodyHelper";
@@ -120,15 +114,6 @@ export default class SiteMenu extends React.Component {
 
                     {showConnection && !isConnected && <div>Not connected</div>}
                 </StyledNavContainer>
-                <StyledLogoContainer>
-                    {!showConnection && (
-                        <StyledLogo
-                            src={augmintLogo}
-                            srcSet={`${augmintLogo2x} 2x, ${augmintLogo3x} 3x,`}
-                            alt="Augmint logo"
-                        />
-                    )}
-                </StyledLogoContainer>
             </div>
         );
     }

src/components/navigation/styles.js

@@ -68,6 +68,9 @@ export const StyledLogoContainer = styled.div`
     display: flex;
     justify-content: center;
     min-height: 80px;
+    ${breakpoint`
+      max-height: 200px;
+    `};
 `;
 
 export const StyledNavLeftSide = styled.div`
@@ -97,6 +100,7 @@ export const StyledNavRightSide = styled.div`
 
 export const StyledLogo = styled.img`
     margin-top: 80px;
+    object-fit: contain;
 `;
 
 export const HamburgerMenu = styled.img`

src/components/transaction/index.js

@@ -65,7 +65,7 @@ class TxInfo extends React.Component {
             FROM_TRANSFER: "Incoming transfer",
             TO_TRANSFER: "Outgoing transfer"
         };
-        const type = this.getAddressType(tx.direction > 0 ? tx.args.from : tx.args.to);
+        const type = this.getAddressType(tx.direction > 0 ? tx.from : tx.to);
         return map[`${tx.direction > 0 ? "FROM" : "TO"}_${type}`];
     }
 
@@ -84,13 +84,13 @@ class TxInfo extends React.Component {
                 </div>
                 <TxDetails data-testid="txDetails">
                     <AccountAddress
-                        address={tx.direction < 0 ? tx.args.to : tx.args.from}
+                        address={tx.direction < 0 ? tx.to : tx.from}
                         title={tx.direction < 0 ? "To: " : "From: "}
                         shortAddress={true}
                         showCopyIcon={false}
                     />
                     <br />
-                    {tx.args.narrative}
+                    {tx.narrative}
                 </TxDetails>
             </div>
         );