From 9c198d00f163c9e6a57f5458bb1ff161b2d5eeda Mon Sep 17 00:00:00 2001 From: George Lima Date: Wed, 19 Dec 2018 10:48:26 -0300 Subject: [PATCH 01/15] hotfix: use Fragment in TransactionDaily --- app/components/transaction-daily.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/transaction-daily.js b/app/components/transaction-daily.js index 68a3cd7..db37d7f 100644 --- a/app/components/transaction-daily.js +++ b/app/components/transaction-daily.js @@ -1,5 +1,5 @@ // @flow -import React from 'react'; +import React, { Fragment } from 'react'; import styled from 'styled-components'; import { TransactionItemComponent, type Transaction } from './transaction-item'; import { TextComponent } from './text'; @@ -49,7 +49,7 @@ export const TransactionDailyComponent = ({ {transactions.map(({ date, type, address, amount, }, idx) => ( -
+ {idx < transactions.length - 1 && } -
+ ))} From 93860eaa936bfebe6b9ea496961680c25af42af0 Mon Sep 17 00:00:00 2001 From: George Lima Date: Wed, 19 Dec 2018 10:49:30 -0300 Subject: [PATCH 02/15] hotfix: add keys in Dropdown map --- app/components/dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/dropdown.js b/app/components/dropdown.js index 59c9101..a2f17d1 100644 --- a/app/components/dropdown.js +++ b/app/components/dropdown.js @@ -90,7 +90,7 @@ export class DropdownComponent extends Component { )} {options.map(({ label: optionLabel, onClick }) => ( - + ))} From bdb4680057c2b9c1c819133862336eef7f0348bc Mon Sep 17 00:00:00 2001 From: George Lima Date: Wed, 19 Dec 2018 10:50:08 -0300 Subject: [PATCH 03/15] feature: add Modal component --- app/components/modal.js | 98 +++++++++++++++++++++++++++++++++++++++++ public/index.html | 3 +- 2 files changed, 99 insertions(+), 2 deletions(-) create mode 100644 app/components/modal.js diff --git a/app/components/modal.js b/app/components/modal.js new file mode 100644 index 0000000..63493ef --- /dev/null +++ b/app/components/modal.js @@ -0,0 +1,98 @@ +// @flow +import React, { PureComponent, Fragment, type Element } from 'react'; +import { createPortal } from 'react-dom'; +import styled from 'styled-components'; + +const ModalWrapper = styled.div` + width: 100vw; + height: 100vh; + position: fixed; + display: flex; + align-items: center; + justify-content: center; + top: 0; + left: 0; + z-index: 10; + background-color: rgba(0, 0, 0, 0.4); +`; + +const ChildrenWrapper = styled.div` + z-index: 90; +`; + +type Props = { + renderTrigger: (() => void) => Element<*>, + children: Element<*>, +}; + +type State = { + isVisible: boolean, +}; + +const modalRoot = document.getElementById('modal-root'); + +export class ModalComponent extends PureComponent { + element = document.createElement('div'); + + state = { + isVisible: false, + }; + + componentDidMount() { + window.addEventListener('keydown', this.handleEscPress); + } + + componentWillUnmount() { + window.removeEventListener('keydown', this.handleEscPress); + } + + handleEscPress = (event: Object) => { + const { isVisible } = this.state; + + if (event.key === 'Escape' && isVisible) { + this.close(); + } + }; + + open = () => { + this.setState( + () => ({ isVisible: true }), + () => { + if (modalRoot) modalRoot.appendChild(this.element); + }, + ); + }; + + close = () => { + this.setState( + () => ({ isVisible: false }), + () => { + if (modalRoot) modalRoot.removeChild(this.element); + }, + ); + }; + + render() { + const { renderTrigger, children } = this.props; + const { isVisible } = this.state; + + return ( + + {renderTrigger(isVisible ? this.close : this.open)} + {isVisible + ? createPortal( + { + if (event.target.id === 'modal-portal-wrapper') this.close(); + }} + > + {children} + , + this.element, + ) + : null} + + ); + } +} diff --git a/public/index.html b/public/index.html index 676487b..311e933 100644 --- a/public/index.html +++ b/public/index.html @@ -13,8 +13,7 @@ -
- + From 61f2ce132a2bd63887019067f81a3c2774d3efd9 Mon Sep 17 00:00:00 2001 From: George Lima Date: Wed, 19 Dec 2018 13:57:37 -0300 Subject: [PATCH 04/15] 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 05/15] 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 06/15] 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 07/15] 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 08/15] 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 09/15] 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 10/15] 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 11/15] 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 17a254ee5e20aa24797368f4eda1c21ec6b107aa Mon Sep 17 00:00:00 2001 From: George Lima Date: Wed, 19 Dec 2018 15:35:39 -0300 Subject: [PATCH 12/15] feature: add closeOnBackdropClick and closeOnEsc props in modal --- app/components/modal.js | 33 ++++++++++++++++++++++++++------- 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/app/components/modal.js b/app/components/modal.js index 63493ef..c110779 100644 --- a/app/components/modal.js +++ b/app/components/modal.js @@ -22,7 +22,9 @@ const ChildrenWrapper = styled.div` type Props = { renderTrigger: (() => void) => Element<*>, - children: Element<*>, + children: (() => void) => Element<*>, + closeOnBackdropClick?: boolean, + closeOnEsc?: boolean, }; type State = { @@ -34,16 +36,29 @@ const modalRoot = document.getElementById('modal-root'); export class ModalComponent extends PureComponent { element = document.createElement('div'); + static defaultProps = { + closeOnBackdropClick: true, + closeOnEsc: true, + }; + state = { isVisible: false, }; componentDidMount() { - window.addEventListener('keydown', this.handleEscPress); + const { closeOnEsc } = this.props; + + if (closeOnEsc) { + window.addEventListener('keydown', this.handleEscPress); + } } componentWillUnmount() { - window.removeEventListener('keydown', this.handleEscPress); + const { closeOnEsc } = this.props; + + if (closeOnEsc) { + window.removeEventListener('keydown', this.handleEscPress); + } } handleEscPress = (event: Object) => { @@ -73,21 +88,25 @@ export class ModalComponent extends PureComponent { }; render() { - const { renderTrigger, children } = this.props; + const { renderTrigger, children, closeOnBackdropClick } = this.props; const { isVisible } = this.state; + const toggleVisibility = isVisible ? this.close : this.open; return ( - {renderTrigger(isVisible ? this.close : this.open)} + {renderTrigger(toggleVisibility)} {isVisible ? createPortal( { - if (event.target.id === 'modal-portal-wrapper') this.close(); + if ( + closeOnBackdropClick + && event.target.id === 'modal-portal-wrapper' + ) this.close(); }} > - {children} + {children(toggleVisibility)} , this.element, ) From 3fb10e3dfe91ac7232f42252756017cbbcbd406d Mon Sep 17 00:00:00 2001 From: George Lima Date: Wed, 19 Dec 2018 15:40:53 -0300 Subject: [PATCH 13/15] 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 14/15] 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 = ({ From b14954de9ac03735290fb34dc07dbf5493c54cc6 Mon Sep 17 00:00:00 2001 From: George Lima Date: Thu, 20 Dec 2018 12:03:23 -0300 Subject: [PATCH 15/15] feature: add modal docz tests --- app/components/modal.mdx | 57 ++++++++++++++++++++++++++++++++++++++++ doczrc.js | 3 +++ 2 files changed, 60 insertions(+) create mode 100644 app/components/modal.mdx diff --git a/app/components/modal.mdx b/app/components/modal.mdx new file mode 100644 index 0000000..83b9f74 --- /dev/null +++ b/app/components/modal.mdx @@ -0,0 +1,57 @@ +--- +name: Modal +--- + +import { Playground, PropsTable } from 'docz' + +import { ModalComponent } from './modal.js' + +# Modal + +## Properties + + + +## Basic usage + + + ( + + )} + > + {toggleVisibility => ( +
+ Modal Content + +
+ )} + + + +## Don't close with ESC or backdrop click + + + ( + + )} + > + {toggleVisibility => ( +
+ Modal Content + +
+ )} + + diff --git a/doczrc.js b/doczrc.js index 6a61d60..fbc6e48 100644 --- a/doczrc.js +++ b/doczrc.js @@ -14,5 +14,8 @@ export default { }, ], }, + body: { + raw: '