diff options
Diffstat (limited to 'ui/app')
| -rw-r--r-- | ui/app/components/app/signature-request.js | 25 | ||||
| -rw-r--r-- | ui/app/components/app/transaction-list/index.scss | 33 | ||||
| -rw-r--r-- | ui/app/pages/settings/security-tab/security-tab.component.js | 29 | ||||
| -rw-r--r-- | ui/app/pages/settings/security-tab/security-tab.container.js | 6 | ||||
| -rw-r--r-- | ui/app/selectors/transactions.js | 10 |
5 files changed, 64 insertions, 39 deletions
diff --git a/ui/app/components/app/signature-request.js b/ui/app/components/app/signature-request.js index 9c0f53f57..16073d5d3 100644 --- a/ui/app/components/app/signature-request.js +++ b/ui/app/components/app/signature-request.js @@ -215,7 +215,7 @@ SignatureRequest.prototype.msgHexToText = function (hex) { } // eslint-disable-next-line react/display-name -SignatureRequest.prototype.renderTypedDataV3 = function (data) { +SignatureRequest.prototype.renderTypedData = function (data) { const { domain, message } = JSON.parse(data) return [ h('div.request-signature__typed-container', [ @@ -267,17 +267,18 @@ SignatureRequest.prototype.renderBody = function () { }), }, [notice]), - h('div.request-signature__rows', type === 'eth_signTypedData' && version === 'V3' ? - this.renderTypedDataV3(data) : - rows.map(({ name, value }) => { - if (typeof value === 'boolean') { - value = value.toString() - } - return h('div.request-signature__row', [ - h('div.request-signature__row-title', [`${name}:`]), - h('div.request-signature__row-value', value), - ]) - }), + h('div.request-signature__rows', + type === 'eth_signTypedData' && (version === 'V3' || version === 'V4') ? + this.renderTypedData(data) : + rows.map(({ name, value }) => { + if (typeof value === 'boolean') { + value = value.toString() + } + return h('div.request-signature__row', [ + h('div.request-signature__row-title', [`${name}:`]), + h('div.request-signature__row-value', value), + ]) + }), ), ]) } diff --git a/ui/app/components/app/transaction-list/index.scss b/ui/app/components/app/transaction-list/index.scss index 7535137e2..42eddd31e 100644 --- a/ui/app/components/app/transaction-list/index.scss +++ b/ui/app/components/app/transaction-list/index.scss @@ -11,34 +11,15 @@ } &__header { + flex: 0 0 auto; + font-size: 14px; + line-height: 20px; + color: $Grey-400; border-bottom: 1px solid $Grey-100; + padding: 8px 0 8px 20px; - &__tabs { - display: flex; - } - - &__tab, - &__tab--selected { - flex: 0 0 auto; - font-size: 14px; - line-height: 20px; - color: $Grey-400; - padding: 8px 0 8px 20px; - cursor: pointer; - - &:hover { - font-weight: bold; - } - - @media screen and (max-width: $break-small) { - padding: 8px 0 8px 16px; - } - } - - &__tab--selected { - font-weight: bold; - color: $Blue-400; - cursor: auto; + @media screen and (max-width: $break-small) { + padding: 8px 0 8px 16px; } } diff --git a/ui/app/pages/settings/security-tab/security-tab.component.js b/ui/app/pages/settings/security-tab/security-tab.component.js index 600ec7069..117010d0f 100644 --- a/ui/app/pages/settings/security-tab/security-tab.component.js +++ b/ui/app/pages/settings/security-tab/security-tab.component.js @@ -18,6 +18,8 @@ export default class SecurityTab extends PureComponent { mobileSync: PropTypes.bool, participateInMetaMetrics: PropTypes.bool, setParticipateInMetaMetrics: PropTypes.func, + showIncomingTransactions: PropTypes.bool, + setShowIncomingTransactionsFeatureFlag: PropTypes.func, } renderSeedWords () { @@ -80,6 +82,32 @@ export default class SecurityTab extends PureComponent { ) } + renderIncomingTransactionsOptIn () { + const { t } = this.context + const { showIncomingTransactions, setShowIncomingTransactionsFeatureFlag } = this.props + + return ( + <div className="settings-page__content-row"> + <div className="settings-page__content-item"> + <span>{ t('showIncomingTransactions') }</span> + <div className="settings-page__content-description"> + { t('showIncomingTransactionsDescription') } + </div> + </div> + <div className="settings-page__content-item"> + <div className="settings-page__content-item-col"> + <ToggleButton + value={showIncomingTransactions} + onToggle={value => setShowIncomingTransactionsFeatureFlag(!value)} + offLabel={t('off')} + onLabel={t('on')} + /> + </div> + </div> + </div> + ) + } + renderContent () { const { warning } = this.props @@ -87,6 +115,7 @@ export default class SecurityTab extends PureComponent { <div className="settings-page__body"> { warning && <div className="settings-tab__error">{ warning }</div> } { this.renderSeedWords() } + { this.renderIncomingTransactionsOptIn() } { this.renderMetaMetricsOptIn() } </div> ) diff --git a/ui/app/pages/settings/security-tab/security-tab.container.js b/ui/app/pages/settings/security-tab/security-tab.container.js index fe79d86af..35375ebf5 100644 --- a/ui/app/pages/settings/security-tab/security-tab.container.js +++ b/ui/app/pages/settings/security-tab/security-tab.container.js @@ -5,17 +5,22 @@ import { withRouter } from 'react-router-dom' import { displayWarning, revealSeedConfirmation, + setFeatureFlag, setParticipateInMetaMetrics, } from '../../../store/actions' const mapStateToProps = state => { const { appState: { warning }, metamask } = state const { + featureFlags: { + showIncomingTransactions, + } = {}, participateInMetaMetrics, } = metamask return { warning, + showIncomingTransactions, participateInMetaMetrics, } } @@ -25,6 +30,7 @@ const mapDispatchToProps = dispatch => { displayWarning: warning => dispatch(displayWarning(warning)), revealSeedConfirmation: () => dispatch(revealSeedConfirmation()), setParticipateInMetaMetrics: (val) => dispatch(setParticipateInMetaMetrics(val)), + setShowIncomingTransactionsFeatureFlag: shouldShow => dispatch(setFeatureFlag('showIncomingTransactions', shouldShow)), } } diff --git a/ui/app/selectors/transactions.js b/ui/app/selectors/transactions.js index 5450978a6..2a6a92ddf 100644 --- a/ui/app/selectors/transactions.js +++ b/ui/app/selectors/transactions.js @@ -16,9 +16,17 @@ import txHelper from '../../lib/tx-helper' export const shapeShiftTxListSelector = state => state.metamask.shapeShiftTxList export const incomingTxListSelector = state => { + const { showIncomingTransactions } = state.metamask.featureFlags + if (!showIncomingTransactions) { + return [] + } + + const network = state.metamask.network const selectedAddress = state.metamask.selectedAddress return Object.values(state.metamask.incomingTransactions) - .filter(({ txParams }) => txParams.to === selectedAddress) + .filter(({ metamaskNetworkId, txParams }) => ( + txParams.to === selectedAddress && metamaskNetworkId === network + )) } export const unapprovedMsgsSelector = state => state.metamask.unapprovedMsgs export const selectedAddressTxListSelector = state => state.metamask.selectedAddressTxList |