Add Remind Me Later to SAI migration notification

feature/default_network_editable
Whymarrh Whitby 5 years ago
parent 5f9e8867b4
commit ab0600ef0b
  1. 3
      app/_locales/en/messages.json
  2. 7
      app/scripts/controllers/app-state.js
  3. 1
      app/scripts/metamask-controller.js
  4. 44
      ui/app/components/app/dai-migration-component/dai-migration-notification.component.js
  5. 16
      ui/app/components/app/dai-migration-component/dai-migration-notification.container.js
  6. 11
      ui/app/store/actions.js

@ -2,6 +2,9 @@
"migrateSai": { "migrateSai": {
"message": "A message from Maker: The new Multi-Collateral Dai token has been released. Your old tokens are now called Sai. Please upgrade your Sai tokens to the new Dai." "message": "A message from Maker: The new Multi-Collateral Dai token has been released. Your old tokens are now called Sai. Please upgrade your Sai tokens to the new Dai."
}, },
"migrateSaiInfo": {
"message": "To dismiss this notification you can migrate your tokens or hide SAI from the token list."
},
"migrate": { "migrate": {
"message": "Migrate" "message": "Migrate"
}, },

@ -13,6 +13,7 @@ class AppStateController {
this.onInactiveTimeout = onInactiveTimeout || (() => {}) this.onInactiveTimeout = onInactiveTimeout || (() => {})
this.store = new ObservableStore(extend({ this.store = new ObservableStore(extend({
timeoutMinutes: 0, timeoutMinutes: 0,
mkrMigrationReminderTimestamp: null,
}, initState)) }, initState))
this.timer = null this.timer = null
@ -23,6 +24,12 @@ class AppStateController {
this._setInactiveTimeout(preferences.autoLogoutTimeLimit) this._setInactiveTimeout(preferences.autoLogoutTimeLimit)
} }
setMkrMigrationReminderTimestamp (timestamp) {
this.store.updateState({
mkrMigrationReminderTimestamp: timestamp,
})
}
/** /**
* Sets the last active time to the current time * Sets the last active time to the current time
* @return {void} * @return {void}

@ -508,6 +508,7 @@ module.exports = class MetamaskController extends EventEmitter {
// AppStateController // AppStateController
setLastActiveTime: nodeify(this.appStateController.setLastActiveTime, this.appStateController), setLastActiveTime: nodeify(this.appStateController.setLastActiveTime, this.appStateController),
setMkrMigrationReminderTimestamp: nodeify(this.appStateController.setMkrMigrationReminderTimestamp, this.appStateController),
// EnsController // EnsController
tryReverseResolveAddress: nodeify(this.ensController.reverseResolveAddress, this.ensController), tryReverseResolveAddress: nodeify(this.ensController.reverseResolveAddress, this.ensController),

@ -1,3 +1,4 @@
import { DateTime } from 'luxon'
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import HomeNotification from '../home-notification' import HomeNotification from '../home-notification'
@ -8,18 +9,37 @@ export default class DaiV1MigrationNotification extends PureComponent {
} }
static defaultProps = { static defaultProps = {
mkrMigrationReminderTimestamp: null,
string: '', string: '',
symbol: '', symbol: '',
} }
static propTypes = { static propTypes = {
setMkrMigrationReminderTimestamp: PropTypes.func.isRequired,
mkrMigrationReminderTimestamp: PropTypes.string,
string: PropTypes.string, string: PropTypes.string,
symbol: PropTypes.string, symbol: PropTypes.string,
} }
remindMeLater = () => {
const nextWeek = DateTime.utc().plus({
days: 7,
})
this.props.setMkrMigrationReminderTimestamp(nextWeek.toString())
}
render () { render () {
const { t } = this.context const { t } = this.context
const { string: balanceString, symbol } = this.props const { mkrMigrationReminderTimestamp, string: balanceString, symbol } = this.props
if (mkrMigrationReminderTimestamp) {
const reminderDateTime = DateTime.fromISO(mkrMigrationReminderTimestamp, {
zone: 'UTC',
})
if (reminderDateTime > DateTime.utc()) {
return null
}
}
if (!balanceString || !symbol) { if (!balanceString || !symbol) {
return null return null
@ -31,15 +51,27 @@ export default class DaiV1MigrationNotification extends PureComponent {
return ( return (
<HomeNotification <HomeNotification
descriptionText={t('migrateSai')} descriptionText={(
<div>
{t('migrateSai')}
&nbsp;
<a
href="#"
onClick={() => {
window.open('https://blog.makerdao.com/multi-collateral-dai-is-live/', '_blank', 'noopener')
}}
>
{t('learnMore')}.
</a>
</div>
)}
acceptText={t('migrate')} acceptText={t('migrate')}
onAccept={() => { onAccept={() => {
window.open('https://migrate.makerdao.com', '_blank', 'noopener') window.open('https://migrate.makerdao.com', '_blank', 'noopener')
}} }}
ignoreText={t('learnMore')} ignoreText={t('remindMeLater')}
onIgnore={() => { onIgnore={this.remindMeLater}
window.open('https://blog.makerdao.com/multi-collateral-dai-is-live/', '_blank', 'noopener') infoText={t('migrateSaiInfo')}
}}
/> />
) )
} }

@ -3,18 +3,32 @@ import { compose } from 'recompose'
import DaiMigrationNotification from './dai-migration-notification.component' import DaiMigrationNotification from './dai-migration-notification.component'
import withTokenTracker from '../../../helpers/higher-order-components/with-token-tracker' import withTokenTracker from '../../../helpers/higher-order-components/with-token-tracker'
import { getSelectedAddress, getDaiV1Token } from '../../../selectors/selectors' import { getSelectedAddress, getDaiV1Token } from '../../../selectors/selectors'
import { setMkrMigrationReminderTimestamp } from '../../../store/actions'
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
const {
metamask: {
mkrMigrationReminderTimestamp,
},
} = state
const userAddress = getSelectedAddress(state) const userAddress = getSelectedAddress(state)
const oldDai = getDaiV1Token(state) const oldDai = getDaiV1Token(state)
return { return {
mkrMigrationReminderTimestamp,
userAddress, userAddress,
token: oldDai, token: oldDai,
} }
} }
const mapDispatchToProps = (dispatch) => {
return {
setMkrMigrationReminderTimestamp: (t) => dispatch(setMkrMigrationReminderTimestamp(t)),
}
}
export default compose( export default compose(
connect(mapStateToProps), connect(mapStateToProps, mapDispatchToProps),
withTokenTracker, withTokenTracker,
)(DaiMigrationNotification) )(DaiMigrationNotification)

@ -367,6 +367,7 @@ var actions = {
// AppStateController-related actions // AppStateController-related actions
SET_LAST_ACTIVE_TIME: 'SET_LAST_ACTIVE_TIME', SET_LAST_ACTIVE_TIME: 'SET_LAST_ACTIVE_TIME',
setLastActiveTime, setLastActiveTime,
setMkrMigrationReminderTimestamp,
getContractMethodData, getContractMethodData,
loadingMethoDataStarted, loadingMethoDataStarted,
@ -2755,6 +2756,16 @@ function setLastActiveTime () {
} }
} }
function setMkrMigrationReminderTimestamp (timestamp) {
return (dispatch) => {
background.setMkrMigrationReminderTimestamp(timestamp, (err) => {
if (err) {
return dispatch(actions.displayWarning(err.message))
}
})
}
}
function loadingMethoDataStarted () { function loadingMethoDataStarted () {
return { return {
type: actions.LOADING_METHOD_DATA_STARTED, type: actions.LOADING_METHOD_DATA_STARTED,

Loading…
Cancel
Save