diff options
Diffstat (limited to 'ui/app/components/pages/first-time-flow/end-of-flow')
3 files changed, 55 insertions, 12 deletions
diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js index 2ca5fd8ec..c0e2f59d9 100644 --- a/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js +++ b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.component.js @@ -6,16 +6,18 @@ import { DEFAULT_ROUTE } from '../../../../routes' export default class EndOfFlowScreen extends PureComponent { static contextTypes = { t: PropTypes.func, + metricsEvent: PropTypes.func, } static propTypes = { history: PropTypes.object, completeOnboarding: PropTypes.func, + completionMetaMetricsName: PropTypes.string, } render () { const { t } = this.context - const { history, completeOnboarding } = this.props + const { history, completeOnboarding, completionMetaMetricsName } = this.props return ( <div className="end-of-flow"> @@ -42,23 +44,44 @@ export default class EndOfFlowScreen extends PureComponent { <div className="first-time-flow__text-block end-of-flow__text-2"> { t('endOfFlowMessage2') } </div> - <div className="first-time-flow__text-block end-of-flow__text-3"> + <div className="end-of-flow__text-3"> { '• ' + t('endOfFlowMessage3') } </div> - <div className="first-time-flow__text-block end-of-flow__text-4"> + <div className="end-of-flow__text-3"> { '• ' + t('endOfFlowMessage4') } </div> - <div className="first-time-flow__text-block end-of-flow__text-3"> - { t('endOfFlowMessage5') } + <div className="end-of-flow__text-3"> + { '• ' + t('endOfFlowMessage5') } + </div> + <div className="end-of-flow__text-3"> + { '• ' + t('endOfFlowMessage6') } </div> - <div className="first-time-flow__text-block end-of-flow__text-3"> - { '*' + t('endOfFlowMessage6') } + <div className="end-of-flow__text-3"> + { '• ' + t('endOfFlowMessage7') } + </div> + <div className="first-time-flow__text-block end-of-flow__text-4"> + *MetaMask cannot recover your seedphrase. <a + href="https://metamask.zendesk.com/hc/en-us/articles/360015489591-Basic-Safety-Tips" + target="_blank" + rel="noopener noreferrer" + > + <span className="first-time-flow__link-text"> + Learn More + </span> + </a>. </div> <Button type="confirm" className="first-time-flow__button" onClick={async () => { await completeOnboarding() + this.context.metricsEvent({ + eventOpts: { + category: 'Onboarding', + action: 'Onboarding Complete', + name: completionMetaMetricsName, + }, + }) history.push(DEFAULT_ROUTE) }} > diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js index ffe2c0efb..91ae5a941 100644 --- a/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js +++ b/ui/app/components/pages/first-time-flow/end-of-flow/end-of-flow.container.js @@ -2,10 +2,24 @@ import { connect } from 'react-redux' import EndOfFlow from './end-of-flow.component' import { setCompletedOnboarding } from '../../../../actions' +const firstTimeFlowTypeNameMap = { + create: 'New Wallet Created', + 'import': 'New Wallet Imported', +} + +const mapStateToProps = ({ metamask }) => { + const { firstTimeFlowType } = metamask + + return { + completionMetaMetricsName: firstTimeFlowTypeNameMap[firstTimeFlowType], + } +} + + const mapDispatchToProps = dispatch => { return { completeOnboarding: () => dispatch(setCompletedOnboarding()), } } -export default connect(null, mapDispatchToProps)(EndOfFlow) +export default connect(mapStateToProps, mapDispatchToProps)(EndOfFlow) diff --git a/ui/app/components/pages/first-time-flow/end-of-flow/index.scss b/ui/app/components/pages/first-time-flow/end-of-flow/index.scss index 5f5cc5991..d7eb4513b 100644 --- a/ui/app/components/pages/first-time-flow/end-of-flow/index.scss +++ b/ui/app/components/pages/first-time-flow/end-of-flow/index.scss @@ -24,12 +24,18 @@ margin-top: 26px; } - &__text-3 { - margin-top: 26px; + &__text-3 { + margin-top: 2px; + margin-bottom: 2px; + + @media screen and (max-width: $break-small) { + margin-bottom: 16px; + font-size: .875rem; + } } - &__text-3 { - margin-top: 2px; + &__text-4 { + margin-top: 26px; } button { |