Merge branch 'staging' into greenkeeper/cypress-3.3.1

Augmint · May 28, 2019 · ae66805 · ae66805
2 parents 717046a + d197786
commit ae66805
Show file tree

Hide file tree

Showing 37 changed files with 722 additions and 651 deletions.
diff --git a/package.json b/package.json
@@ -9,11 +9,12 @@
     "yarn": "1.15.2"
   },
   "dependencies": {
-    "@augmint/js": "0.3.1",
+    "@augmint/js": "0.3.2",
     "bignumber.js": "5.0.0",
     "bn.js": "4.11.8",
     "chart.js": "2.8.0",
     "ethereumjs-util": "6.1.0",
+    "ethers": "4.0.27",
     "moment": "2.24.0",
     "parse": "2.2.1",
     "react": "16.8.6",

diff --git a/src/components/Table.js b/src/components/Table.js
@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import { default as theme, remCalc } from "styles/theme";
+
+export const Table = styled.table`
+    width: 100%;
+    border-collapse: collapse;
+    border-top: 1px solid ${theme.colors.opacGrey};
+    border-bottom: 1px solid ${theme.colors.opacGrey};
+    font-family: ${theme.typography.fontFamilies.currency};
+    font-size: ${remCalc(14)};
+    white-space: nowrap;
+
+    thead th {
+        padding-top: 20px;
+        padding-bottom: 20px;
+        text-transform: uppercase;
+    }
+
+    tbody tr:first-child > td {
+        padding-top: 20px;
+        border-top: 1px solid ${theme.colors.opacGrey};
+    }
+    tbody tr:last-child > td {
+        padding-bottom: 20px;
+        border-bottom: 1px solid ${theme.colors.opacGrey};
+    }
+
+    td,
+    th {
+        text-align: left;
+        vertical-align: top;
+        padding: 10px 20px;
+    }
+`;
diff --git a/src/components/Table/index.js b/src/components/Table/index.js
diff --git a/src/components/Table/style.js b/src/components/Table/style.js
diff --git a/src/components/augmint-ui/currencies.js b/src/components/augmint-ui/currencies.js
@@ -70,7 +70,7 @@ export class ETH extends React.Component {
 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 amt = isEmpty(amount) ? null : raw || amount instanceof Ratio ? amount / Math.pow(10, 4) : amount * 100;
         const cls = ["Percent", className, signum(amt)].join(" ");
         return (
             <NoWrap className={cls} {...rest}>

diff --git a/src/components/augmint-ui/message/styles.js b/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 {

diff --git a/src/containers/account/components/TransferList.js b/src/containers/account/components/TransferList.js
@@ -4,7 +4,8 @@ import store from "modules/store";
 import { fetchLatestTransfers } from "modules/reducers/userTransfers";
 import { TxDate, TxInfo } from "components/transaction";
 import { ErrorPanel } from "components/MsgPanels";
-import { StyleTitle, StyleTable, StyleThead, StyleTbody, StyleTd, StyleTh, StyleTr } from "components/Table/style";
+import { Table } from "components/Table";
+import Header from "components/augmint-ui/header";
 import Segment from "components/augmint-ui/segment";
 import Button from "components/augmint-ui/button";
 import { calculateTransfersBalance } from "modules/ethereum/transferTransactions";
@@ -43,6 +44,13 @@ const Transfer = styled.span`
     }
 `;
 
+const TransferTable = styled(Table)`
+    tr :nth-child(3),
+    tr :nth-child(4) {
+        text-align: right;
+    }
+`;
+
 class TransferList extends React.Component {
     constructor(props) {
         super(props);
@@ -91,65 +99,51 @@ class TransferList extends React.Component {
             transfers = transfers.slice(0, this.state.page * this.props.limit);
 
             calculateTransfersBalance(transfers, userAccount.tokenBalance * 100);
-
-            transfers = transfers.map(tx => {
-                return {
-                    data: tx,
-                    key: `${tx.blockNumber}-${tx.key}`,
-                    date: <TxDate>{tx.blockTimeStampText}</TxDate>,
-                    info: <TxInfo tx={tx} />,
-                    amount: (
-                        <Transfer>
-                            <AEUR raw amount={tx.amount} className="delta" data-testid="txPrice" />
-                            <AEUR raw amount={tx.fee} className="feeOrBounty" data-testid="txFee" />
-                        </Transfer>
-                    ),
-                    balance: <AEUR raw amount={tx.balance} />
-                };
-            });
         }
 
         return (
             <Segment loading={isLoading && !transfers} style={{ color: "black" }}>
-                {header && <StyleTitle>{header}</StyleTitle>}
+                {header && <Header>{header}</Header>}
                 {error && <ErrorPanel header="Error while fetching transfer list">{error.message}</ErrorPanel>}
                 {!transfers || transfers.length === 0 ? (
                     noItemMessage
                 ) : (
                     <div style={{ overflow: "auto" }}>
-                        <StyleTable>
-                            <StyleThead>
-                                <StyleTr>
-                                    <StyleTh className={"hide-xs"}>Date</StyleTh>
-                                    <StyleTh style={{ textAlign: "right" }}>Transaction</StyleTh>
-                                    <StyleTh style={{ textAlign: "right" }}>Amount</StyleTh>
-                                    <StyleTh style={{ textAlign: "right" }} className={"hide-xs"}>
-                                        Balance
-                                    </StyleTh>
-                                </StyleTr>
-                            </StyleThead>
-                            <StyleTbody>
+                        <TransferTable>
+                            <thead>
+                                <tr>
+                                    <th className={"hide-xs"}>Date</th>
+                                    <th>Transaction</th>
+                                    <th>Amount</th>
+                                    <th className={"hide-xs"}>Balance</th>
+                                </tr>
+                            </thead>
+                            <tbody>
                                 {transfers.map(tx => (
-                                    <StyleTr
-                                        key={`txRow-${tx.key}`}
-                                        data-testid={`transferListItem-${tx.data.transactionHash}`}
-                                    >
-                                        <StyleTd className={"hide-xs"}>{tx.date}</StyleTd>
-                                        <StyleTd>
+                                    <tr key={`txRow-${tx.key}`} data-testid={`transferListItem-${tx.transactionHash}`}>
+                                        <td className={"hide-xs"}>
+                                            <TxDate>{tx.blockTimeStampText}</TxDate>
+                                        </td>
+                                        <td>
                                             <div className={"show-xs"}>{tx.date}</div>
-                                            {tx.info}
-                                        </StyleTd>
-                                        <StyleTd style={{ textAlign: "right" }}>
-                                            {tx.amount}
-                                            <div className={"show-xs"}>= {tx.balance}</div>
-                                        </StyleTd>
-                                        <StyleTd style={{ textAlign: "right" }} className={"hide-xs"}>
-                                            {tx.balance}
-                                        </StyleTd>
-                                    </StyleTr>
+                                            <TxInfo tx={tx} />
+                                        </td>
+                                        <td>
+                                            <Transfer>
+                                                <AEUR raw amount={tx.amount} className="delta" data-testid="txPrice" />
+                                                <AEUR raw amount={tx.fee} className="feeOrBounty" data-testid="txFee" />
+                                            </Transfer>
+                                            <div className={"show-xs"}>
+                                                = <AEUR raw amount={tx.balance} />
+                                            </div>
+                                        </td>
+                                        <td className={"hide-xs"}>
+                                            <AEUR raw amount={tx.balance} />
+                                        </td>
+                                    </tr>
                                 ))}
-                            </StyleTbody>
-                        </StyleTable>
+                            </tbody>
+                        </TransferTable>
                     </div>
                 )}
                 {transfers && !this.isLastPage() && (

diff --git a/src/containers/app/EthereumTxStatus.js b/src/containers/app/EthereumTxStatus.js
@@ -106,7 +106,7 @@ class EthereumTxStatus extends React.Component {
                                     collateral.
                                 </p>
                                 <p>
-                                    You can always check your the status of your loan on{" "}
+                                    You can always check the status of your loan on{" "}
                                     <Link to="/account">My account page</Link>
                                     <br />
                                     or directly on <Link to={"/loan/" + vals.loanId}>this loan's page</Link>
@@ -115,7 +115,8 @@ class EthereumTxStatus extends React.Component {
                                 <p>To be repaid: {repaymentAmount} A-EUR</p>
                                 <p>Collateral in escrow: {collateralEth} ETH</p>
                                 <p>
-                                    Loan id: {vals.loanId} | Product id: {vals.productId} | borrower: {vals.borrower}
+                                    Loan id: {vals.loanId} | Product id: {vals.productId} | borrower:
+                                    <span className="small"> {vals.borrower}</span>
                                 </p>
                             </div>
                         );