Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migrate transaction detail page to final UI - Closes #1841 #1883

Merged
merged 5 commits into from
Apr 4, 2019
Merged

Migrate transaction detail page to final UI - Closes #1841 #1883

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a842bb8
:recycle: Replace tx-icons
massao Apr 3, 2019
5b6f535
:recycle: Adjust transaction detail header to final UI
massao Apr 3, 2019
60687c0
:recycle: Migrate tx detail page to final UI
massao Apr 3, 2019
9b657d9
:white_check_mark: Adjust transaction details page unit tests
massao Apr 3, 2019
f5e1e0b
:nail_care: Fix missing import on css file
massao Apr 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions i18n/locales/en/common.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,8 @@
"Confirm vote on Ledger Nano S": "Confirm vote on Ledger Nano S",
"Confirm your name": "Confirm your name",
"Confirm your passphrase": "Confirm your passphrase",
"Confirmation": "Confirmation",
"Confirmation in the next step": "Confirmation in the next step",
"Confirmations": "Confirmations",
"Connected to ": "Connected to ",
"Connected to:": "Connected to:",
"Connecting to network": "Connecting to network",
Expand All @@ -107,9 +107,9 @@
"Copy": "Copy",
"Copy Link": "Copy Link",
"Copy Transaction ID to clipboard": "Copy Transaction ID to clipboard",
"Copy link": "Copy link",
"Copy passphrase": "Copy passphrase",
"Copy to Clipboard": "Copy to Clipboard",
"Copy transaction link": "Copy transaction link",
"Could not reach the network. Please try again.": "Could not reach the network. Please try again.",
"Create": "Create",
"Create First Transaction": "Create First Transaction",
Expand Down
9 changes: 6 additions & 3 deletions src/assets/images/icons-v2/link.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 8 additions & 4 deletions src/assets/images/icons-v2/tx-2nd-passphrase.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 12 additions & 3 deletions src/assets/images/icons-v2/tx-default.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 8 additions & 4 deletions src/assets/images/icons-v2/tx-delegate.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 2 additions & 5 deletions src/assets/images/icons-v2/tx-send-arrow.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 9 additions & 4 deletions src/assets/images/icons-v2/tx-vote.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
92 changes: 49 additions & 43 deletions src/components/singleTransactionV2/singleTransactionV2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
@import '../app/variablesV2.css';
@import '../app/mixins.css';

.wrapper {
min-width: 580px;
margin: 20px 0 40px;
padding: 0;
width: auto;

& .txLink {
align-items: center;
display: flex !important;
justify-content: center;
}

& .detailsHeader {
display: flex;
justify-content: space-between;
Expand All @@ -25,89 +32,88 @@
}

& .txIcon {
background: var(--color-white);
border: 4px solid var(--color-white);
border-radius: 10px;
box-sizing: border-box;
height: 46px;
transform: translateY(50%);
width: 46px;
height: 24px;
margin-top: 20px;
width: 24px;
}

& .mainContent {
padding: 40px 24px;
padding: 0 20px;
}

& .detailsFooter {
display: flex;
flex-wrap: nowrap;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 40px;
margin: 0;
padding: 0;

& > div {
align-items: flex-start;
border-top: 1px solid var(--color-platinum);
display: flex;
flex-direction: column;
padding: 20px 0;
width: 100%;

&:last-child {
align-items: flex-end;
}
}

& .label {
color: var(--color-dark-gray);
font-family: var(--content-font);
font-size: var(--paragraph-font-size-s);
font-weight: var(--font-weight-bold);
letter-spacing: 0.05px;
line-height: 17px;
margin-right: 5px;
@mixin contentSmall;

align-items: center;
color: var(--color-slate-gray);
display: flex;
margin-bottom: 10px;
}

& .value {
color: var(--color-content-light);
font-family: var(--content-font);
font-size: var(--paragraph-font-size-l);
font-weight: var(--font-weight-bold);
letter-spacing: 0.05px;
line-height: 18px;
@mixin contentLargest;

align-items: flex-start;
color: var(--color-maastricht-blue);
display: flex;
flex-direction: column;
justify-content: center;
margin: 0;
padding-left: 20px;
width: 100%;

& img {
display: inline-block;
height: 16px;
height: 14px;
margin-left: 5px;
vertical-align: middle;
width: 16px;
width: 14px;
}

&:last-child {
margin-top: 16px;
&:first-child {
padding-left: 0;
padding-right: 20px;
position: relative;

&::after {
background-color: var(--color-platinum);
content: '';
height: calc(100% - 13px);
position: absolute;
right: 0;
width: 1px;
}
}
}

& .clickable {
cursor: pointer;
}

& .link {
color: var(--color-link);
cursor: pointer;
font-family: var(--heading-font);
font-size: var(--paragraph-font-size-l);
font-weight: var(--font-weight-bold);
text-decoration: underline;
}

& .copied {
cursor: initial;
opacity: 0.6;
text-decoration: none;
}
}
}

@media (--small-viewport) {
.wrapper {
min-width: 0;
}
}
91 changes: 51 additions & 40 deletions src/components/singleTransactionV2/singleTransactionV2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import LiskAmount from '../liskAmount';
import EmptyState from '../emptyState';
import svg from '../../utils/svgIcons';
import BoxV2 from '../boxV2';
import { SecondaryButtonV2 } from '../toolbox/buttons/button';
import TransactionDetailViewV2 from '../transactionsV2/transactionDetailViewV2/transactionDetailViewV2';
import styles from './singleTransactionV2.css';

Expand Down Expand Up @@ -39,7 +40,7 @@ class SingleTransactionV2 extends React.Component {
return true;
}

// istanbul skip next
// istanbul ignore next
componentWillUnmount() {
clearTimeout(this.idTimeout);
clearTimeout(this.linkTimeout);
Expand Down Expand Up @@ -78,65 +79,75 @@ class SingleTransactionV2 extends React.Component {
return (
<div className={`${grid.row} ${grid['center-xs']}`}>
{ this.props.transaction.id && !this.props.transaction.error ? (
<BoxV2 className={`${grid['col-sm-7']} ${styles.wrapper}`}>
<BoxV2 className={`${grid['col-sm-8']} ${grid['col-md-4']} ${styles.wrapper}`}>
<header className={`${styles.detailsHeader} tx-header`}>
<h1>{title}</h1>
<img className={styles.txIcon} src={icon} />
<span className={`${styles.date} tx-date`}>
<DateTimeFromTimestamp
fulltime={true}
className={'date'}
time={transaction.timestamp}
showSeconds={true} />
</span>
<CopyToClipboard
text={`lisk:/${this.props.match.url}`}
onCopy={() => this.handleCopy('link')}>
<SecondaryButtonV2 className={'extra-small'} disabled={this.state.linkCopied}>
{this.state.linkCopied
? <span className={`${styles.txLink} tx-link`}>{t('Copied!')}</span>
: (<span className={`${styles.txLink} tx-link`}>
{t('Copy link')}
<img className={'button-icon'} src={svg.icoLink} />
</span>)
}
</SecondaryButtonV2>
</CopyToClipboard>
</header>
<main className={styles.mainContent}>
<img className={styles.txIcon} src={icon} />
<TransactionDetailViewV2 address={this.props.address} transaction={transaction} />
<footer className={styles.detailsFooter}>
<div>
<p className={styles.value}>
<span className={styles.label}>{t('Fee')} </span>
<span className={'tx-fee'}>
<LiskAmount val={transaction.fee} /> {t('LSK')}
<span className={styles.label}>{t('Date')}</span>
<span className={`${styles.date} tx-date`}>
<DateTimeFromTimestamp
fulltime={true}
className={'date'}
time={transaction.timestamp}
showSeconds={true} />
</span>
</p>
<p className={`${styles.value} tx-id`}>
<span className={styles.label}>{t('Transaction ID')} </span>
<CopyToClipboard
className={`${styles.clickable} ${this.state.idCopied ? styles.copied : ''} transaction-id`}
text={transaction.id}
onCopy={() => this.handleCopy('id')}>
<span>
{this.state.idCopied
? t('Copied!')
: <React.Fragment><span className={'copy-title'}>{transaction.id}</span> <img src={svg.copy}/></React.Fragment>}
</span>
</CopyToClipboard>
</p>
</div>
<div>
<p className={`${styles.value}`}>
<span className={styles.label}>{t('Confirmation')} </span>
<span className={styles.label}>{t('Confirmations')} </span>
<span className={'tx-confirmation'}>
{transaction.confirmations || 0}
</span>
</p>
<p className={`${styles.value} ${styles.link} ${this.state.linkCopied ? styles.copied : ''}`}>
<CopyToClipboard
className={'tx-link'}
text={`lisk:/${this.props.match.url}`}
onCopy={() => this.handleCopy('link')}>
{this.state.linkCopied
? <span>{t('Copied!')}</span>
: <span>{t('Copy transaction link')} <img src={svg.icoLink} /></span>}
</CopyToClipboard>
</p>
</div>
<div>
<p className={styles.value}>
<span className={styles.label}>{t('Fee')} </span>
<span className={'tx-fee'}>
<LiskAmount val={transaction.fee} /> {t('LSK')}
</span>
</p>
<CopyToClipboard
className={`${styles.clickable} ${styles.value} tx-id`}
text={transaction.id}
onCopy={() => this.handleCopy('id')}>
<p>
<span className={styles.label}>
{t('Transaction ID')}
<img src={svg.icoLink} />
</span>
<span className={'transaction-id'}>
{this.state.idCopied
? t('Copied!')
: <span className={'copy-title'}>{transaction.id}</span>
}
</span>
</p>
</CopyToClipboard>
</div>
</footer>
</main>
</BoxV2>
) : (
<BoxV2>
<BoxV2 className={`${grid['col-sm-8']} ${grid['col-md-4']}`}>
<EmptyState title={this.props.t('No results')}
message={this.props.t('Search for Lisk ID, Delegate or Transaction ID')} />
</BoxV2>
Expand Down