Skip to content

Commit

Permalink
Merge pull request #2381 from LiskHQ/2253-fix-recent-transactions-on-…
Browse files Browse the repository at this point in the history
…dashboard

Fix recent transactions on dashboard - Closes #2253
  • Loading branch information
slaweet committed Aug 22, 2019
2 parents ebb7982 + 42dcae8 commit a7467c9
Show file tree
Hide file tree
Showing 6 changed files with 65 additions and 55 deletions.
Expand Up @@ -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;
Expand All @@ -50,6 +50,11 @@
& > span:last-child {
margin-left: auto;
}

& .avatarAndAddress {
display: flex;
flex-direction: row;
}
}
}

Expand Down
Expand Up @@ -33,6 +33,7 @@ describe('Recent Transactions', () => {
{
id: 0,
recipientId: '123456L',
senderId: '123456L',
amount: '0.001',
token: 'LSK',
type: 0,
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -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');
Expand All @@ -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');
Expand Down
32 changes: 14 additions & 18 deletions src/components/dashboard/recentTransactions/transactionList.js
Expand Up @@ -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';

Expand All @@ -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>
))
Expand Down
8 changes: 4 additions & 4 deletions src/components/liskAmount/index.js
Expand Up @@ -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 />
);

Expand Down
58 changes: 31 additions & 27 deletions 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;
4 changes: 2 additions & 2 deletions src/components/transactions/amount/transactionAmount.css
Expand Up @@ -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;
}
}

0 comments on commit a7467c9

Please sign in to comment.