diff --git a/package.json b/package.json
index 8d6c79ed..f044185c 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
"invariant": "^2.2.4",
"lodash": "^4.17.5",
"lru-cache": "^4.1.3",
+ "measure-scrollbar": "^1.1.0",
"moment": "^2.22.2",
"qrcode": "^1.2.0",
"qrcode-reader": "^1.0.4",
diff --git a/src/components/GradientBox.js b/src/components/GradientBox.js
new file mode 100644
index 00000000..dc637006
--- /dev/null
+++ b/src/components/GradientBox.js
@@ -0,0 +1,14 @@
+// @flow
+import styled from 'styled-components'
+
+export default styled.div`
+ width: 100%;
+ height: 60px;
+ position: absolute;
+ bottom: 68px;
+ left: 0;
+ right: 0;
+ background: linear-gradient(rgba(255, 255, 255, 0), #ffffff 70%);
+ z-index: 2;
+ pointer-events: none;
+`
diff --git a/src/components/base/Ellipsis.js b/src/components/base/Ellipsis.js
index d811d5ab..5990be5b 100644
--- a/src/components/base/Ellipsis.js
+++ b/src/components/base/Ellipsis.js
@@ -7,10 +7,10 @@ import Text from 'components/base/Text'
const outerStyle = { width: 0 }
const innerStyle = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }
-export default ({ children, ...p }: { children: any }) => (
+export default ({ children, canSelect, ...p }: { children: any, canSelect?: boolean }) => (
- {children}
+ {children}
)
diff --git a/src/components/base/GrowScroll/index.js b/src/components/base/GrowScroll/index.js
index 4b8de481..4abf5370 100644
--- a/src/components/base/GrowScroll/index.js
+++ b/src/components/base/GrowScroll/index.js
@@ -2,6 +2,7 @@
import React, { PureComponent } from 'react'
import Box from 'components/base/Box'
+import measureScrollbar from 'measure-scrollbar/commonjs'
type Props = {
children: any,
@@ -11,6 +12,8 @@ type Props = {
export const GrowScrollContext = React.createContext()
+const scrollbarWidth = measureScrollbar()
+
class GrowScroll extends PureComponent {
static defaultProps = {
full: false,
@@ -47,7 +50,7 @@ class GrowScroll extends PureComponent {
const scrollContainerStyles = {
overflowY: 'scroll',
- marginRight: `-80px`,
+ marginRight: `-${80 + scrollbarWidth}px`,
paddingRight: `80px`,
...(maxHeight
? {
diff --git a/src/components/base/Modal/index.js b/src/components/base/Modal/index.js
index ca2e45e1..6d1f19d6 100644
--- a/src/components/base/Modal/index.js
+++ b/src/components/base/Modal/index.js
@@ -10,6 +10,7 @@ import { connect } from 'react-redux'
import Mortal from 'react-mortal'
import styled from 'styled-components'
import noop from 'lodash/noop'
+import { EXPERIMENTAL_CENTER_MODAL } from 'config/constants'
import { rgba } from 'styles/helpers'
import { radii } from 'styles/theme'
@@ -133,6 +134,18 @@ function stopPropagation(e) {
e.stopPropagation()
}
+const wrap = EXPERIMENTAL_CENTER_MODAL
+ ? children => (
+
+ {children}
+
+ )
+ : children => (
+
+ {children}
+
+ )
+
export class Modal extends Component {
static defaultProps = {
isOpened: false,
@@ -198,7 +211,7 @@ export class Modal extends Component {
-
+ {wrap(
{
width={width}
>
-
-
+ ,
+ )}
)}
diff --git a/src/components/modals/OperationDetails.js b/src/components/modals/OperationDetails.js
index 9e665e08..ff48caa4 100644
--- a/src/components/modals/OperationDetails.js
+++ b/src/components/modals/OperationDetails.js
@@ -1,7 +1,6 @@
// @flow
-import React, { Fragment } from 'react'
-import uniq from 'lodash/uniq'
+import React, { Fragment, Component } from 'react'
import { connect } from 'react-redux'
import { shell } from 'electron'
import { translate } from 'react-i18next'
@@ -17,16 +16,19 @@ 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 GradientBox from 'components/GradientBox'
+import GrowScroll from 'components/base/GrowScroll'
import Button from 'components/base/Button'
import Bar from 'components/base/Bar'
import FormattedVal from 'components/base/FormattedVal'
import Modal, { ModalBody, ModalTitle, ModalFooter, ModalContent } from 'components/base/Modal'
+import Text from 'components/base/Text'
import { createStructuredSelector, createSelector } from 'reselect'
import { accountSelector } from 'reducers/accounts'
import { currencySettingsForAccountSelector, marketIndicatorSelector } from 'reducers/settings'
+import IconChevronRight from 'icons/ChevronRight'
import CounterValue from 'components/CounterValue'
import ConfirmationCheck from 'components/OperationsList/ConfirmationCheck'
import Ellipsis from '../base/Ellipsis'
@@ -102,91 +104,93 @@ const OperationDetails = connect(mapStateToProps)((props: Props) => {
const isConfirmed = confirmations >= currencySettings.confirmationsNb
const url = getAccountOperationExplorer(account, operation)
- const uniqSenders = uniq(senders)
return (
{t('app:operationDetails.title')}
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
- {t('app:operationDetails.account')}
- {name}
-
-
- {t('app:operationDetails.date')}
- {moment(date).format('LLL')}
-
-
-
-
-
- {t('app:operationDetails.fees')}
- {fee ? (
-
-
-
+
+
+ {t('app:operationDetails.account')}
+ {name}
+
+
+ {t('app:operationDetails.date')}
+ {moment(date).format('LLL')}
+
+
+
+
+
+ {t('app:operationDetails.fees')}
+ {fee ? (
+
+
+
+
+
+ ) : null}
+
+
+ {t('app:operationDetails.status')}
+
+
+ {isConfirmed
+ ? t('app:operationDetails.confirmed')
+ : t('app:operationDetails.notConfirmed')}
+
+ {`(${confirmations})`}
-
- ) : null}
-
-
- {t('app:operationDetails.status')}
-
-
- {isConfirmed
- ? t('app:operationDetails.confirmed')
- : t('app:operationDetails.notConfirmed')}
- {`(${confirmations})`}
-
+
+
+
+ {t('app:operationDetails.identifier')}
+
+ {hash}
+
+
+
+
+ {t('app:operationDetails.from')}
+
+
+
+
+ {t('app:operationDetails.to')}
+
+
-
-
-
- {t('app:operationDetails.from')}
- {uniqSenders.map(v => {v})}
-
-
-
- {t('app:operationDetails.to')}
-
-
-
-
- {t('app:operationDetails.identifier')}
-
-
- {hash}
-
-
-
+
+
@@ -194,7 +198,7 @@ const OperationDetails = connect(mapStateToProps)((props: Props) => {
{t('app:common.cancel')}
{url ? (
-