From 61f2ce132a2bd63887019067f81a3c2774d3efd9 Mon Sep 17 00:00:00 2001 From: George Lima Date: Wed, 19 Dec 2018 13:57:37 -0300 Subject: [PATCH 01/10] feature: add close_icon asset --- app/assets/images/close_icon.svg | 1 + 1 file changed, 1 insertion(+) create mode 100644 app/assets/images/close_icon.svg diff --git a/app/assets/images/close_icon.svg b/app/assets/images/close_icon.svg new file mode 100644 index 0000000..7b218da --- /dev/null +++ b/app/assets/images/close_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file From 894df1d783e6324b8342628735562527a21bdf23 Mon Sep 17 00:00:00 2001 From: George Lima Date: Wed, 19 Dec 2018 13:58:09 -0300 Subject: [PATCH 02/10] feature: add transactionsDetailsLabel color --- app/theme.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/theme.js b/app/theme.js index f6c816a..2a096ed 100644 --- a/app/theme.js +++ b/app/theme.js @@ -23,6 +23,7 @@ const transactionSent = '#FF6C6C'; const transactionReceived = '#6AEAC0'; const transactionsDate = '#777777'; const transactionsItemHovered = '#222222'; +const transactionsDetailsLabel = transactionsDate; const appTheme = { mode: DARK, @@ -61,6 +62,7 @@ const appTheme = { transactionReceived, transactionsDate, transactionsItemHovered, + transactionsDetailsLabel, }, sidebarWidth: '200px', headerHeight: '60px', From 4f2d05d37eafb437386e67291a57da5e3cd804f1 Mon Sep 17 00:00:00 2001 From: George Lima Date: Wed, 19 Dec 2018 14:20:56 -0300 Subject: [PATCH 03/10] feature: add TransactionDetails component --- app/components/transaction-details.js | 173 +++++++++++++++++++++++++ app/components/transaction-details.mdx | 32 +++++ 2 files changed, 205 insertions(+) create mode 100644 app/components/transaction-details.js create mode 100644 app/components/transaction-details.mdx diff --git a/app/components/transaction-details.js b/app/components/transaction-details.js new file mode 100644 index 0000000..f18e41b --- /dev/null +++ b/app/components/transaction-details.js @@ -0,0 +1,173 @@ +// @flow +import React from 'react'; +import styled from 'styled-components'; +import dateFns from 'date-fns'; + +import SentIcon from '../assets/images/transaction_sent_icon.svg'; +import ReceivedIcon from '../assets/images/transaction_received_icon.svg'; +import CloseIcon from '../assets/images/close_icon.svg'; + +import { TextComponent } from './text'; +import { RowComponent } from './row'; +import { ColumnComponent } from './column'; + +import theme from '../theme'; + +import formatNumber from '../utils/formatNumber'; +import truncateAddress from '../utils/truncateAddress'; + +const Wrapper = styled.div` + width: 100%; + background-color: ${props => props.theme.colors.background}; + display: flex; + flex-direction: column; + align-items: center; + border-radius: 6px; +`; + +const TitleWrapper = styled.div` + margin-top: 20px; +`; + +const Icon = styled.img` + width: 40px; + height: 40px; + margin: 20px 0; +`; + +const CloseIconWrapper = styled.div` + display: flex; + width: 100%; + align-items: flex-end; + justify-content: flex-end; +`; + +const CloseIconImg = styled.img` + width: 12.5px; + height: 12.5px; + margin-top: 10px; + margin-right: 10px; + cursor: pointer; +`; + +const InfoRow = styled(RowComponent)` + justify-content: space-between; + width: 100%; + padding: 15px 30px; +`; + +const Divider = styled.div` + width: 100%; + background-color: ${props => props.theme.colors.transactionsDetailsLabel}; + height: 2px; + opacity: 0.5; +`; + +type Props = { + amount: number, + type: 'send' | 'receive', + zecPrice: number, + date: string, + transactionId: string, + from: string, + to: string, +}; + +export const TransactionDetails = ({ + amount, + type, + zecPrice, + date, + transactionId, + from, + to, +}: Props) => { + const isReceived = type === 'receive'; + return ( + + + alert('Close')} /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/app/components/transaction-details.mdx b/app/components/transaction-details.mdx new file mode 100644 index 0000000..75840b1 --- /dev/null +++ b/app/components/transaction-details.mdx @@ -0,0 +1,32 @@ +--- +name: Transaction Details +--- + +import { Playground, PropsTable } from 'docz' + +import { TransactionDetails } from './transaction-details.js' +import { DoczWrapper } from '../theme.js' + +# Transaction Details + +## Properties + + + +## Basic Usage + + + + {() => ( + + )} + + From 7a394a48bbb4abb67c29525d0d752e4c5837ed84 Mon Sep 17 00:00:00 2001 From: George Lima Date: Wed, 19 Dec 2018 14:21:42 -0300 Subject: [PATCH 04/10] feature: add handleClose prop in TransactionDetails --- app/components/transaction-details.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/components/transaction-details.js b/app/components/transaction-details.js index f18e41b..077c751 100644 --- a/app/components/transaction-details.js +++ b/app/components/transaction-details.js @@ -71,6 +71,7 @@ type Props = { transactionId: string, from: string, to: string, + handleClose: () => void, }; export const TransactionDetails = ({ @@ -81,12 +82,13 @@ export const TransactionDetails = ({ transactionId, from, to, + handleClose, }: Props) => { const isReceived = type === 'receive'; return ( - alert('Close')} /> + From c3f43c9e8503f644ce54d15eedd5a4e26c61cadc Mon Sep 17 00:00:00 2001 From: George Lima Date: Wed, 19 Dec 2018 15:29:45 -0300 Subject: [PATCH 05/10] feature: add transactionId in get transactions query --- app/components/transaction-daily.js | 31 ++++++++++++++++------------- app/containers/dashboard.js | 5 ++--- app/containers/transactions.js | 1 + 3 files changed, 20 insertions(+), 17 deletions(-) diff --git a/app/components/transaction-daily.js b/app/components/transaction-daily.js index db37d7f..244c77f 100644 --- a/app/components/transaction-daily.js +++ b/app/components/transaction-daily.js @@ -46,20 +46,23 @@ export const TransactionDailyComponent = ({ - {transactions.map(({ - date, type, address, amount, - }, idx) => ( - - - {idx < transactions.length - 1 && } - - ))} + {transactions.map( + ({ + date, type, address, amount, transactionId, + }, idx) => ( + + + {idx < transactions.length - 1 && } + + ), + )} ); diff --git a/app/containers/dashboard.js b/app/containers/dashboard.js index 6b94c6f..c55f943 100644 --- a/app/containers/dashboard.js +++ b/app/containers/dashboard.js @@ -41,9 +41,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({ // eslint-disable-next-line if (addressesErr) return dispatch(loadWalletSummaryError({ error: addressesErr.message })); - const [transactionsErr, transactions = []] = await eres( - rpc.listtransactions(), - ); + const [transactionsErr, transactions] = await eres(rpc.listtransactions()); if (transactionsErr) { return dispatch( @@ -59,6 +57,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({ addresses, transactions: flow([ arr => arr.map(transaction => ({ + transactionId: transaction.txid, type: transaction.category, date: new Date(transaction.time * 1000).toISOString(), address: transaction.address, diff --git a/app/containers/transactions.js b/app/containers/transactions.js index 6789a0f..2877779 100644 --- a/app/containers/transactions.js +++ b/app/containers/transactions.js @@ -42,6 +42,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({ loadTransactionsSuccess({ list: flow([ arr => arr.map(transaction => ({ + transactionId: transaction.txid, type: transaction.category, date: new Date(transaction.time * 1000).toISOString(), address: transaction.address, From a9e5678e5e0ec7a5455b53e9c186854055135f96 Mon Sep 17 00:00:00 2001 From: George Lima Date: Wed, 19 Dec 2018 15:30:01 -0300 Subject: [PATCH 06/10] hotfix: remove locale from formatNumber --- app/utils/formatNumber.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/utils/formatNumber.js b/app/utils/formatNumber.js index 5d96753..943e4a4 100644 --- a/app/utils/formatNumber.js +++ b/app/utils/formatNumber.js @@ -1,3 +1,3 @@ // @flow -export default ({ value, append = '' }: { value: number, append?: string }) => `${append}${(value || 0).toLocaleString('de-DE')}`; +export default ({ value, append = '' }: { value: number, append?: string }) => `${append}${(value || 0).toLocaleString()}`; From ed0622c22fb796abe6ef4877d6664e821f3d9fe9 Mon Sep 17 00:00:00 2001 From: George Lima Date: Wed, 19 Dec 2018 15:30:38 -0300 Subject: [PATCH 07/10] hotfix: TransactionsDetails dimensions --- app/components/transaction-details.js | 52 +++++++++++++-------------- 1 file changed, 24 insertions(+), 28 deletions(-) diff --git a/app/components/transaction-details.js b/app/components/transaction-details.js index 077c751..c3fdea5 100644 --- a/app/components/transaction-details.js +++ b/app/components/transaction-details.js @@ -17,7 +17,7 @@ import formatNumber from '../utils/formatNumber'; import truncateAddress from '../utils/truncateAddress'; const Wrapper = styled.div` - width: 100%; + width: 30vw; background-color: ${props => props.theme.colors.background}; display: flex; flex-direction: column; @@ -52,17 +52,28 @@ const CloseIconImg = styled.img` const InfoRow = styled(RowComponent)` justify-content: space-between; - width: 100%; - padding: 15px 30px; + align-items: center; + width: 30vw; + height: 80px; + padding: 0 30px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; `; const Divider = styled.div` width: 100%; background-color: ${props => props.theme.colors.transactionsDetailsLabel}; - height: 2px; + height: 1px; opacity: 0.5; `; +const Label = styled(TextComponent)` + font-weight: ${props => props.theme.fontWeight.bold}; + color: ${props => props.theme.colors.transactionsDetailsLabel}; + margin-bottom: 5px; +`; + type Props = { amount: number, type: 'send' | 'receive', @@ -74,7 +85,7 @@ type Props = { handleClose: () => void, }; -export const TransactionDetails = ({ +export const TransactionDetailsComponent = ({ amount, type, zecPrice, @@ -91,7 +102,7 @@ export const TransactionDetails = ({ - + - + @@ -133,43 +140,32 @@ export const TransactionDetails = ({ isBold color={theme.colors.transactionsDetailsLabel} /> - + - + - + - + - ); }; From a9e89a275cc512423a23ca68e976d0359c12adb4 Mon Sep 17 00:00:00 2001 From: George Lima Date: Wed, 19 Dec 2018 15:31:01 -0300 Subject: [PATCH 08/10] feature: add TransactionDetails modal in TransactionItem --- app/components/transaction-item.js | 81 +++++++++++++++++++----------- 1 file changed, 53 insertions(+), 28 deletions(-) diff --git a/app/components/transaction-item.js b/app/components/transaction-item.js index 5f73a77..6c0a31e 100644 --- a/app/components/transaction-item.js +++ b/app/components/transaction-item.js @@ -9,6 +9,8 @@ import ReceivedIcon from '../assets/images/transaction_received_icon.svg'; import { RowComponent } from './row'; import { ColumnComponent } from './column'; import { TextComponent } from './text'; +import { ModalComponent } from './modal'; +import { TransactionDetailsComponent } from './transaction-details'; import theme from '../theme'; @@ -53,6 +55,7 @@ export type Transaction = { address: string, amount: number, zecPrice: number, + transactionId: string, }; export const TransactionItemComponent = ({ @@ -61,6 +64,7 @@ export const TransactionItemComponent = ({ address, amount, zecPrice, + transactionId, }: Transaction) => { const isReceived = type === 'receive'; const transactionTime = dateFns.format(new Date(date), 'HH:mm A'); @@ -75,34 +79,55 @@ export const TransactionItemComponent = ({ const transactionAddress = truncateAddress(address); return ( - - - - - - - - - - - - - ( + + + + + + + + + + + + + + + + + )} + > + {toggleVisibility => ( + - - - + )} + ); }; From 3fb10e3dfe91ac7232f42252756017cbbcbd406d Mon Sep 17 00:00:00 2001 From: George Lima Date: Wed, 19 Dec 2018 15:40:53 -0300 Subject: [PATCH 09/10] hotfix: add box-shadown in TransactionDetails wrapper --- app/components/transaction-details.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/components/transaction-details.js b/app/components/transaction-details.js index c3fdea5..36b57d3 100644 --- a/app/components/transaction-details.js +++ b/app/components/transaction-details.js @@ -23,6 +23,7 @@ const Wrapper = styled.div` flex-direction: column; align-items: center; border-radius: 6px; + box-shadow: 0px 0px 30px 0px black; `; const TitleWrapper = styled.div` From b28c87e5b3652ac5d1ede2c59c86abb61174d966 Mon Sep 17 00:00:00 2001 From: George Lima Date: Wed, 19 Dec 2018 16:06:19 -0300 Subject: [PATCH 10/10] hotfix: add TextEllipsis in TransactionDetails --- app/components/transaction-details.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/app/components/transaction-details.js b/app/components/transaction-details.js index 36b57d3..67615b2 100644 --- a/app/components/transaction-details.js +++ b/app/components/transaction-details.js @@ -54,12 +54,9 @@ const CloseIconImg = styled.img` const InfoRow = styled(RowComponent)` justify-content: space-between; align-items: center; - width: 30vw; + width: 100%; height: 80px; padding: 0 30px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; `; const Divider = styled.div` @@ -75,6 +72,13 @@ const Label = styled(TextComponent)` margin-bottom: 5px; `; +const Ellipsis = styled(TextComponent)` + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: calc(30vw - 60px); +`; + type Props = { amount: number, type: 'send' | 'receive', @@ -150,7 +154,7 @@ export const TransactionDetailsComponent = ({