![]()
div {
+ position: relative;
+ margin-top: 8px;
+ }
+
+ .fa-sm {
+ margin-bottom: 8px;
+ }
+
+}
+
+.home-notification-wrapper--show-first {
+ > div {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ visibility: hidden;
+ }
+
+ > div:first-of-type {
+ visibility: visible;
+
+ }
+
+ .fa-sm {
+ position: relative;
+ display: initial;
+ }
+}
+
+.flipped {
+ transform: rotate(180deg);
+}
diff --git a/ui/app/components/app/multiple-notifications/multiple-notifications.component.js b/ui/app/components/app/multiple-notifications/multiple-notifications.component.js
new file mode 100644
index 000000000..95dbb5c9a
--- /dev/null
+++ b/ui/app/components/app/multiple-notifications/multiple-notifications.component.js
@@ -0,0 +1,39 @@
+import React, { PureComponent } from 'react'
+import classnames from 'classnames'
+import PropTypes from 'prop-types'
+
+export default class MultipleNotifications extends PureComponent {
+ static propTypes = {
+ notifications: PropTypes.array,
+ classNames: PropTypes.array,
+ }
+
+ state = {
+ showAll: false,
+ }
+
+ render () {
+ const { showAll } = this.state
+ const { notifications, classNames = [] } = this.props
+
+ return (
+ {notifications
+ .filter(notificationConfig => notificationConfig.shouldBeRendered)
+ .map(notificationConfig => notificationConfig.component)
+ }
+
this.setState({ showAll: !showAll })}
+ >
+ {notifications.length > 1 ? : null}
+
+
)
+ }
+}
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 771008205..aaf6c7c0e 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -130,3 +130,14 @@ input.form-control {
overflow: hidden;
text-overflow: ellipsis;
}
+
+.pinned-to-bottom {
+ position: absolute;
+ bottom: 0px;
+}
+
+.pinned-to-bottom-right {
+ position: absolute;
+ bottom: 0px;
+ right: 0;
+}
diff --git a/ui/app/pages/home/home.component.js b/ui/app/pages/home/home.component.js
index e59106537..dca4c8540 100644
--- a/ui/app/pages/home/home.component.js
+++ b/ui/app/pages/home/home.component.js
@@ -3,15 +3,16 @@ import PropTypes from 'prop-types'
import Media from 'react-media'
import { Redirect } from 'react-router-dom'
import HomeNotification from '../../components/app/home-notification'
+import MultipleNotifications from '../../components/app/multiple-notifications'
import WalletView from '../../components/app/wallet-view'
import TransactionView from '../../components/app/transaction-view'
import ProviderApproval from '../provider-approval'
-import BackupNotification from '../../components/app/backup-notification'
import {
RESTORE_VAULT_ROUTE,
CONFIRM_TRANSACTION_ROUTE,
CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE,
+ INITIALIZE_SEED_PHRASE_ROUTE,
} from '../../helpers/constants/routes'
export default class Home extends PureComponent {
@@ -20,15 +21,17 @@ export default class Home extends PureComponent {
}
static defaultProps = {
- activeTab: null,
+ activeTab: {},
unsetMigratedPrivacyMode: null,
forceApproveProviderRequestByOrigin: null,
}
static propTypes = {
activeTab: PropTypes.shape({
- title: PropTypes.string.isRequired,
- url: PropTypes.string.isRequired,
+ origin: PropTypes.string,
+ protocol: PropTypes.string,
+ title: PropTypes.string,
+ url: PropTypes.string,
}),
history: PropTypes.object,
forgottenPassword: PropTypes.bool,
@@ -40,6 +43,8 @@ export default class Home extends PureComponent {
viewingUnconnectedDapp: PropTypes.bool.isRequired,
forceApproveProviderRequestByOrigin: PropTypes.func,
shouldShowSeedPhraseReminder: PropTypes.bool,
+ showSeedPhraseBackupAfterOnboarding: PropTypes.bool,
+ rejectProviderRequestByOrigin: PropTypes.func,
}
componentWillMount () {
@@ -77,6 +82,8 @@ export default class Home extends PureComponent {
viewingUnconnectedDapp,
forceApproveProviderRequestByOrigin,
shouldShowSeedPhraseReminder,
+ showSeedPhraseBackupAfterOnboarding,
+ rejectProviderRequestByOrigin,
} = this.props
if (forgottenPassword) {
@@ -98,39 +105,49 @@ export default class Home extends PureComponent {
{ !history.location.pathname.match(/^\/confirm-transaction/)
? (
- {
- showPrivacyModeNotification
- ? (
- {
window.open('https://medium.com/metamask/42549d4870fa', '_blank', 'noopener')
unsetMigratedPrivacyMode()
}}
- />
- )
- : null
- }
- {
- viewingUnconnectedDapp
- ? (
- ,
+ },
+ {
+ shouldBeRendered: viewingUnconnectedDapp,
+ component: {
forceApproveProviderRequestByOrigin(activeTab.origin)
}}
+ ignoreText={t('dismiss')}
+ onIgnore={() => rejectProviderRequestByOrigin(activeTab.origin)}
infoText={t('shareAddressInfo', [activeTab.origin])}
- />
- )
- : null
- }
- {
- shouldShowSeedPhraseReminder
- ? ()
- : null
- }
+ key="home-shareAddressToConnect"
+ />,
+ },
+ {
+ shouldBeRendered: shouldShowSeedPhraseReminder,
+ component: {
+ showSeedPhraseBackupAfterOnboarding()
+ history.push(INITIALIZE_SEED_PHRASE_ROUTE)
+ }}
+ infoText={t('backupApprovalInfo')}
+ key="home-backupApprovalNotice"
+ />,
+ },
+ ]}/>
)
: null }
diff --git a/ui/app/pages/home/home.container.js b/ui/app/pages/home/home.container.js
index 064c914cd..434d4b7e3 100644
--- a/ui/app/pages/home/home.container.js
+++ b/ui/app/pages/home/home.container.js
@@ -7,6 +7,8 @@ import { getCurrentEthBalance } from '../../selectors/selectors'
import {
forceApproveProviderRequestByOrigin,
unsetMigratedPrivacyMode,
+ showSeedPhraseBackupAfterOnboarding,
+ rejectProviderRequestByOrigin,
} from '../../store/actions'
import { getEnvironmentType } from '../../../../app/scripts/lib/util'
import { ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums'
@@ -17,6 +19,7 @@ const mapStateToProps = state => {
const { activeTab, metamask, appState } = state
const {
approvedOrigins,
+ dismissedOrigins,
lostAccounts,
suggestedTokens,
providerRequests,
@@ -34,7 +37,8 @@ const mapStateToProps = state => {
activeTab &&
activeTabDappProtocols.includes(activeTab.protocol) &&
privacyMode &&
- !approvedOrigins[activeTab.origin]
+ !approvedOrigins[activeTab.origin] &&
+ !dismissedOrigins[activeTab.origin]
)
const isPopup = getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP
@@ -48,12 +52,15 @@ const mapStateToProps = state => {
activeTab,
viewingUnconnectedDapp: isUnconnected && isPopup,
shouldShowSeedPhraseReminder: !seedPhraseBackedUp && (parseInt(accountBalance, 16) > 0 || tokens.length > 0),
+ isPopup,
}
}
const mapDispatchToProps = (dispatch) => ({
unsetMigratedPrivacyMode: () => dispatch(unsetMigratedPrivacyMode()),
forceApproveProviderRequestByOrigin: (origin) => dispatch(forceApproveProviderRequestByOrigin(origin)),
+ rejectProviderRequestByOrigin: origin => dispatch(rejectProviderRequestByOrigin(origin)),
+ showSeedPhraseBackupAfterOnboarding: () => dispatch(showSeedPhraseBackupAfterOnboarding()),
})
export default compose(
-