m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 19:26:13 +02:00
Code

Move home notifications upwards in DOM (#8138)

Browse Source 
The notifications displayed on the home screen were being passed
through the `TransactionView` and `TransactionList` components before
being rendered. This was unnecessary because the notifications are
absolutely positioned.

They are now rendered directly in the home component where they're
defined. A helper function has been written to improve readability.
This commit is contained in:
Mark Stacey 2020-02-28 16:27:58 -04:00 committed by GitHub
parent f4c279e6ff
commit fa3497e39b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 62 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/app/components/app/transaction-list/transaction-list.component.js
View File

@ -10,13 +10,11 @@ export default class TransactionList extends PureComponent {
} }
static defaultProps = { static defaultProps = {
children: null,
pendingTransactions: [], pendingTransactions: [],
completedTransactions: [], completedTransactions: [],
} }
static propTypes = { static propTypes = {
children: PropTypes.node,
pendingTransactions: PropTypes.array, pendingTransactions: PropTypes.array,
completedTransactions: PropTypes.array, completedTransactions: PropTypes.array,
selectedToken: PropTypes.object, selectedToken: PropTypes.object,
@ -155,7 +153,6 @@ export default class TransactionList extends PureComponent {
return ( return (
<div className="transaction-list"> <div className="transaction-list">
{ this.renderTransactions() } { this.renderTransactions() }
{ this.props.children }
</div> </div>
) )
} }

12
ui/app/components/app/transaction-view/transaction-view.component.js
View File

@ -10,14 +10,6 @@ export default class TransactionView extends PureComponent {
t: PropTypes.func, t: PropTypes.func,
} }
static propTypes = {
children: PropTypes.node,
}
static defaultProps = {
children: null,
}
render () { render () {
return ( return (
<div className="transaction-view"> <div className="transaction-view">
@ -28,9 +20,7 @@ export default class TransactionView extends PureComponent {
<div className="transaction-view__balance-wrapper"> <div className="transaction-view__balance-wrapper">
<TransactionViewBalance /> <TransactionViewBalance />
</div> </div>
<TransactionList> <TransactionList />
{ this.props.children }
</TransactionList>
</div> </div>
) )
} }

113
ui/app/pages/home/home.component.js
View File

@ -85,10 +85,9 @@ export default class Home extends PureComponent {
} }
} }
render () { renderNotifications () {
const { t } = this.context const { t } = this.context
const { const {
forgottenPassword,
history, history,
hasDaiV1Token, hasDaiV1Token,
shouldShowSeedPhraseReminder, shouldShowSeedPhraseReminder,
@ -101,6 +100,64 @@ export default class Home extends PureComponent {
threeBoxLastUpdated, threeBoxLastUpdated,
} = this.props } = this.props
return (
<MultipleNotifications>
{
shouldShowSeedPhraseReminder
? (
<HomeNotification
descriptionText={t('backupApprovalNotice')}
acceptText={t('backupNow')}
onAccept={() => {
if (isPopup) {
global.platform.openExtensionInBrowser(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE)
} else {
history.push(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE)
}
}}
infoText={t('backupApprovalInfo')}
key="home-backupApprovalNotice"
/>
)
: null
}
{
threeBoxLastUpdated && showRestorePrompt
? (
<HomeNotification
descriptionText={t('restoreWalletPreferences', [ formatDate(threeBoxLastUpdated, 'M/d/y') ])}
acceptText={t('restore')}
ignoreText={t('noThanks')}
infoText={t('dataBackupFoundInfo')}
onAccept={() => {
restoreFromThreeBox(selectedAddress)
.then(() => {
turnThreeBoxSyncingOn()
})
}}
onIgnore={() => {
setShowRestorePromptToFalse()
}}
key="home-privacyModeDefault"
/>
)
: null
}
{
hasDaiV1Token
? <DaiMigrationNotification />
: null
}
</MultipleNotifications>
)
}
render () {
const {
forgottenPassword,
history,
} = this.props
if (forgottenPassword) { if (forgottenPassword) {
return <Redirect to={{ pathname: RESTORE_VAULT_ROUTE }} /> return <Redirect to={{ pathname: RESTORE_VAULT_ROUTE }} />
} }
@ -114,58 +171,10 @@ export default class Home extends PureComponent {
/> />
{ !history.location.pathname.match(/^\/confirm-transaction/) { !history.location.pathname.match(/^\/confirm-transaction/)
? ( ? (
<TransactionView> <TransactionView />
<MultipleNotifications>
{
shouldShowSeedPhraseReminder
? (
<HomeNotification
descriptionText={t('backupApprovalNotice')}
acceptText={t('backupNow')}
onAccept={() => {
if (isPopup) {
global.platform.openExtensionInBrowser(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE)
} else {
history.push(INITIALIZE_BACKUP_SEED_PHRASE_ROUTE)
}
}}
infoText={t('backupApprovalInfo')}
key="home-backupApprovalNotice"
/>
)
: null
}
{
threeBoxLastUpdated && showRestorePrompt
? (
<HomeNotification
descriptionText={t('restoreWalletPreferences', [ formatDate(threeBoxLastUpdated, 'M/d/y') ])}
acceptText={t('restore')}
ignoreText={t('noThanks')}
infoText={t('dataBackupFoundInfo')}
onAccept={() => {
restoreFromThreeBox(selectedAddress)
.then(() => {
turnThreeBoxSyncingOn()
})
}}
onIgnore={() => {
setShowRestorePromptToFalse()
}}
key="home-privacyModeDefault"
/>
)
: null
}
{
hasDaiV1Token
? <DaiMigrationNotification />
: null
}
</MultipleNotifications>
</TransactionView>
) )
: null } : null }
{ this.renderNotifications() }
</div> </div>
</div> </div>
) )