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 = {
children: null,
pendingTransactions: [],
completedTransactions: [],
}
static propTypes = {
children: PropTypes.node,
pendingTransactions: PropTypes.array,
completedTransactions: PropTypes.array,
selectedToken: PropTypes.object,
@ -155,7 +153,6 @@ export default class TransactionList extends PureComponent {
return (
<div className="transaction-list">
{ this.renderTransactions() }
{ this.props.children }
</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,
}
static propTypes = {
children: PropTypes.node,
}
static defaultProps = {
children: null,
}
render () {
return (
<div className="transaction-view">
@ -28,9 +20,7 @@ export default class TransactionView extends PureComponent {
<div className="transaction-view__balance-wrapper">
<TransactionViewBalance />
</div>
<TransactionList>
{ this.props.children }
</TransactionList>
<TransactionList />
</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 {
forgottenPassword,
history,
hasDaiV1Token,
shouldShowSeedPhraseReminder,
@ -101,6 +100,64 @@ export default class Home extends PureComponent {
threeBoxLastUpdated,
} = 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) {
return <Redirect to={{ pathname: RESTORE_VAULT_ROUTE }} />
}
@ -114,58 +171,10 @@ export default class Home extends PureComponent {
/>
{ !history.location.pathname.match(/^\/confirm-transaction/)
? (
<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>
<TransactionView />
)
: null }
{ this.renderNotifications() }
</div>
</div>
)