Fix recent transactions on dashboard - Closes #2253

src/components/dashboard/recentTransactions/recentTransactions.css

@@ -37,10 +37,10 @@
       @mixin contentLargest bold;
 
       width: 100%;
-      height: 75px;
+      padding: 16px 0;
       box-sizing: border-box;
       display: flex;
-      justify-content: flex-start;
+      justify-content: space-between;
       align-items: center;
       border-bottom: 1px solid var(--color-mystic);
       cursor: pointer;
@@ -50,6 +50,11 @@
       & > span:last-child {
         margin-left: auto;
       }
+
+      & .avatarAndAddress {
+        display: flex;
+        flex-direction: row;
+      }
     }
   }
 

src/components/dashboard/recentTransactions/recentTransactions.test.js

@@ -33,6 +33,7 @@ describe('Recent Transactions', () => {
       {
         id: 0,
         recipientId: '123456L',
+        senderId: '123456L',
         amount: '0.001',
         token: 'LSK',
         type: 0,
@@ -47,20 +48,23 @@ describe('Recent Transactions', () => {
       {
         id: 2,
         recipientId: '123456L',
+        senderId: '123456L',
         amount: '0.008',
         token: 'LSK',
         type: 1,
       },
       {
         id: 3,
         recipientId: '234234234L',
+        senderId: '123456L',
         amount: '0.0009',
         token: 'LSK',
         type: 2,
       },
       {
         id: 4,
         recipientId: '4564346346L',
+        senderId: '123456L',
         amount: '25',
         token: 'LSK',
         type: 3,
@@ -96,13 +100,15 @@ describe('Recent Transactions', () => {
       {
         id: 0,
         recipientId: 'mkakDp2f31btaXdATtAogoqwXcdx1PqqFo',
+        senderId: 'mkakDp2f31btaXdATtAogoqwXcdx1PqqFo',
         amount: '0.001',
         token: 'BTC',
         type: 0,
       },
       {
         id: 1,
         recipientId: 'mkakDp2f31b3eXdATtAggoqwXcdx1PqqFo',
+        senderId: 'mkakDp2f31btaXdATtAogoqwXcdx1PqqFo',
         amount: '0.0003',
         token: 'BTC',
         type: 0,
@@ -116,7 +122,7 @@ describe('Recent Transactions', () => {
 
   it('Should render Recent Transactions properly with LSK active token', () => {
     expect(wrapper).toContainMatchingElement('TransactionList');
-    expect(wrapper).toContainMatchingElement('TransactionTypeFigure');
+    expect(wrapper).toContainMatchingElement('.transaction-image');
     expect(wrapper).toContainMatchingElement('TransactionAddress');
     expect(wrapper).toContainMatchingElement('TransactionAmount');
     expect(wrapper).toContainMatchingElements(1, 'AccountVisual');
@@ -133,7 +139,6 @@ describe('Recent Transactions', () => {
 
     wrapper.update();
     expect(wrapper).toContainMatchingElement('TransactionList');
-    expect(wrapper).not.toContainMatchingElement('TransactionTypeFigure');
     expect(wrapper).toContainMatchingElement('TransactionAddress');
     expect(wrapper).toContainMatchingElement('TransactionAmount');
     expect(wrapper).not.toContainMatchingElement('AccountVisual');

src/components/dashboard/recentTransactions/transactionList.js

@@ -4,7 +4,6 @@ import TransactionTypeFigure from '../../transactions/typeFigure/TransactionType
 import TransactionAddress from '../../transactions/address/TransactionAddress';
 import TransactionAmount from '../../transactions/amount/TransactionAmount';
 import { SecondaryButton } from '../../toolbox/buttons/button';
-import { tokenMap } from '../../../constants/tokens';
 import routes from '../../../constants/routes';
 import styles from './recentTransactions.css';
 
@@ -28,27 +27,24 @@ const TransactionList = ({
           to={`${routes.transactions.pathPrefix}${routes.transactions.path}/${tx.id}`}
           className={`${styles.listRow} transactions-row`}
         >
-          {
-            activeToken === tokenMap.LSK.key
-              ? (
-                <TransactionTypeFigure
-                  address={tx.recipientId}
-                  transactionType={tx.type}
-                />
-              )
-              : null
-          }
-          <TransactionAddress
-            address={tx.recipientId}
-            bookmarks={bookmarks}
-            t={t}
-            token={activeToken}
-            transactionType={tx.type}
-          />
+          <div className={styles.avatarAndAddress}>
+            <TransactionTypeFigure
+              address={account.address === tx.recipientId ? tx.senderId : tx.recipientId}
+              transactionType={tx.type}
+            />
+            <TransactionAddress
+              address={account.address === tx.recipientId ? tx.senderId : tx.recipientId}
+              bookmarks={bookmarks}
+              t={t}
+              token={activeToken}
+              transactionType={tx.type}
+            />
+          </div>
           <TransactionAmount
             address={account.address}
             token={activeToken}
             transaction={tx}
+            roundTo={2}
           />
         </Link>
       ))

src/components/liskAmount/index.js

@@ -2,17 +2,17 @@ import React from 'react';
 import { fromRawLsk } from '../../utils/lsk';
 import FormattedNumber from '../formattedNumber';
 
-const roundTo = (value, places) => {
+const roundToPlaces = (value, places) => {
   if (!places) {
     return value;
   }
   const x = 10 ** places;
   return Math.round(value * x) / x;
 };
 
-const LiskAmount = props => (
-  props.val !== undefined
-    ? <FormattedNumber val={roundTo(parseFloat(fromRawLsk(props.val)), props.roundTo)} />
+const LiskAmount = ({ val, roundTo }) => (
+  val !== undefined
+    ? <FormattedNumber val={roundToPlaces(parseFloat(fromRawLsk(val)), roundTo)} />
     : <span />
 );
 

src/components/transactions/amount/TransactionAmount.js

@@ -1,39 +1,43 @@
+import PropTypes from 'prop-types';
 import React from 'react';
-import transactionTypes from '../../../constants/transactionTypes';
 import LiskAmount from '../../liskAmount';
 import styles from './transactionAmount.css';
+import transactionTypes from '../../../constants/transactionTypes';
 
-const TransactionAmount = ({ address, transaction, token }) => {
-  const getTransactionType = () => {
-    if (address === transaction.recipientId) {
-      return (
-        <span className={styles.recieve}>
-          <LiskAmount val={transaction.amount} />
-          {' '}
-          {token}
-        </span>
-      );
-    }
-
-    return (
-      <span>
-        {'- '}
-        <LiskAmount val={transaction.amount} />
-        {' '}
-        {token}
-      </span>
-    );
-  };
-
+const TransactionAmount = ({
+  address, transaction, token, roundTo,
+}) => {
+  const isRecieve = address === transaction.recipientId;
   return (
     <div className={`${styles.wrapper} transaction-amount`}>
-      {
-      transaction.type === transactionTypes.send
-        ? getTransactionType()
+      { transaction.type === transactionTypes.send
+        ? (
+          <span className={isRecieve ? styles.recieve : ''}>
+            {isRecieve ? '' : '- '}
+            <LiskAmount val={transaction.amount} roundTo={roundTo} />
+            {' '}
+            {token}
+          </span>
+        )
         : '-'
-    }
+      }
     </div>
   );
 };
 
+TransactionAmount.propTypes = {
+  address: PropTypes.string.isRequired,
+  token: PropTypes.string.isRequired,
+  transaction: PropTypes.shape({
+    type: PropTypes.number.isRequired,
+    amount: PropTypes.string.isRequired,
+    recipientId: PropTypes.string.isRequired,
+  }),
+  roundTo: PropTypes.number,
+};
+
+TransactionAmount.defaultProps = {
+  roundTo: 8,
+};
+
 export default TransactionAmount;

src/components/transactions/amount/transactionAmount.css

@@ -6,17 +6,17 @@
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  margin-left: auto;
+  margin-left: 8px;
   font-weight: var(--font-weight-bold);
 
   & .recieve {
     border-radius: var(--border-radius-standard);
     display: inline-block;
-    height: 29px;
     padding: 6px 12px;
     background-color: rgba(43, 214, 123, 0.15);
     color: var(--color-deep-green);
     box-sizing: border-box;
     line-height: initial;
+    text-align: right;
   }
 }