diff --git a/src/components/base/Spoiler/index.js b/src/components/base/Spoiler/index.js index 4cb21c01..1810223f 100644 --- a/src/components/base/Spoiler/index.js +++ b/src/components/base/Spoiler/index.js @@ -17,12 +17,12 @@ type State = { } const Title = styled(Text).attrs({ - ff: 'Museo Sans|Bold', - fontSize: 2, - color: 'dark', + ff: p => (p.ff ? p.ff : 'Museo Sans|Bold'), + fontSize: p => (p.fontSize ? p.fontSize : 2), + color: p => (p.color ? p.color : 'dark'), tabIndex: 0, })` - text-transform: uppercase; + text-transform: ${p => (!p.textTransform ? 'auto' : 'uppercase')}; letter-spacing: 1px; cursor: pointer; outline: none; @@ -41,15 +41,17 @@ class Spoiler extends PureComponent { toggle = () => this.setState({ isOpened: !this.state.isOpened }) render() { - const { title, children } = this.props + const { title, children, ...p } = this.props const { isOpened } = this.state return ( - + - {title} + + {title} + {isOpened && children} diff --git a/src/components/modals/OperationDetails.js b/src/components/modals/OperationDetails.js index 6f0b23c1..9e665e08 100644 --- a/src/components/modals/OperationDetails.js +++ b/src/components/modals/OperationDetails.js @@ -17,6 +17,7 @@ import { MODAL_OPERATION_DETAILS } from 'config/constants' import { getMarketColor } from 'styles/helpers' import Box from 'components/base/Box' +import Spoiler from 'components/base/Spoiler' import Button from 'components/base/Button' import Bar from 'components/base/Bar' import FormattedVal from 'components/base/FormattedVal' @@ -28,26 +29,23 @@ import { currencySettingsForAccountSelector, marketIndicatorSelector } from 'red import CounterValue from 'components/CounterValue' import ConfirmationCheck from 'components/OperationsList/ConfirmationCheck' - -const Line = styled(Box).attrs({ - horizontal: true, -})`` - -const ColLeft = styled(Box).attrs({ - color: 'smoke', - ff: 'Open Sans', - fontSize: 4, +import Ellipsis from '../base/Ellipsis' + +const OpDetailsTitle = styled(Box).attrs({ + ff: 'Museo Sans|ExtraBold', + fontSize: 2, + color: 'black', + textTransform: 'uppercase', + mb: 1, })` - width: 95px; + letter-spacing: 2px; ` -const ColRight = styled(Box).attrs({ - fontSize: 4, + +const OpDetailsData = styled(Box).attrs({ ff: 'Open Sans', - color: 'dark', - shrink: true, -})` - word-break: break-all; -` + color: 'smoke', + fontSize: 4, +})`` const CanSelect = styled.div` user-select: text; @@ -91,7 +89,8 @@ type Props = { const OperationDetails = connect(mapStateToProps)((props: Props) => { const { t, onClose, operation, account, currencySettings, marketIndicator } = props if (!operation || !account || !currencySettings) return null - const { hash, date, senders, recipients, type, fee } = operation + const { hash, date, senders, type, fee, recipients } = operation + const { name, unit, currency } = account const amount = getOperationAmountNumber(operation) const isNegative = operation.type === 'OUT' @@ -108,21 +107,21 @@ const OperationDetails = connect(mapStateToProps)((props: Props) => { return ( {t('app:operationDetails.title')} - - + + - + - + { - - {t('app:operationDetails.account')} - {name} - - - - {t('app:operationDetails.date')} - {moment(date).format('LLL')} - + + + {t('app:operationDetails.account')} + {name} + + + {t('app:operationDetails.date')} + {moment(date).format('LLL')} + + - - {t('app:operationDetails.status')} - - - {isConfirmed - ? t('app:operationDetails.confirmed') - : t('app:operationDetails.notConfirmed')} - - {`(${confirmations})`} - - + + + {t('app:operationDetails.fees')} + {fee ? ( + + + + + + ) : null} + + + {t('app:operationDetails.status')} + + + {isConfirmed + ? t('app:operationDetails.confirmed') + : t('app:operationDetails.notConfirmed')} + + {`(${confirmations})`} + + + - {fee ? ( - - - {t('app:operationDetails.fees')} - - - - - - - ) : null} - - {t('app:operationDetails.from')} - {uniqSenders.map(v => {v})} - + + {t('app:operationDetails.from')} + {uniqSenders.map(v => {v})} + - - {t('app:operationDetails.to')} - {recipients.map(v => {v} )} - + + {t('app:operationDetails.to')} + + - - {t('app:operationDetails.identifier')} - - {hash} - - + + {t('app:operationDetails.identifier')} + + + {hash} + + + + - + {url ? ( - ) : null} @@ -216,3 +222,32 @@ const OperationDetailsWrapper = ({ t }: { t: T }) => ( ) export default translate()(OperationDetailsWrapper) + +export function RenderRecipients({ recipients, t }: { recipients: *, t: T }) { + // Hardcoded for now + const numToShow = 2 + return ( + + + {recipients + .slice(0, numToShow) + .map(recipient => {recipient})} + + {recipients.length > numToShow && ( + + + {recipients + .slice(numToShow) + .map(recipient => {recipient})} + + + )} + + ) +} diff --git a/static/i18n/en/app.yml b/static/i18n/en/app.yml index 293005ae..f2288758 100644 --- a/static/i18n/en/app.yml +++ b/static/i18n/en/app.yml @@ -158,8 +158,9 @@ operationDetails: fees: Fees from: From to: To - identifier: Identifier + identifier: Hash viewOperation: View operation + showMore: See {{recipients}} more operationList: noMoreOperations: No more operations manager: