m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Adding "What's New" notification for Ledger Support Update (#11188)

Browse Source 
* Adding "What's New" notification for Ledger Support Update

* Using Typography component
This commit is contained in:
ryanml 2021-05-26 14:29:19 -07:00 committed by GitHub
parent 3b68fc4c58
commit 629da90d72
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 91 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/_locales/en/messages.json
View File

@ -1295,6 +1295,22 @@
"message": "Your \"Seed Phrase\" is now called your \"Secret Recovery Phrase.\"",
"description": "Description of a notification in the 'See What's New' popup. Describes the seed phrase wording update."
},
"notifications6DescriptionOne": {
"message": "As of Chrome version 91, the API that enabled our Ledger support (U2F) no longer supports hardware wallets. MetaMask has implemented a new Ledger Live support that allows you to continue to connect to your Ledger device via the Ledger Live desktop app.",
"description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
},
"notifications6DescriptionThree": {
"message": "When interacting with your Ledger account in MetaMask, a new tab will open and you will be asked to open the Ledger Live app. Once the app opens, you'll be asked to allow a WebSocket connection to your MetaMask account. That's all!",
"description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
},
"notifications6DescriptionTwo": {
"message": "You can enable Ledger Live support by clicking Settings > Advanced > Use Ledger Live.",
"description": "Description of a notification in the 'See What's New' popup. Describes the Ledger support update."
},
"notifications6Title": {
"message": "Ledger Support Update for Chrome Users",
"description": "Title for a notification in the 'See What's New' popup. Lets users know about the Ledger support update"
},
"ofTextNofM": {
"message": "of"
},

16
shared/notifications/index.js
View File

@ -26,6 +26,10 @@ export const UI_NOTIFICATIONS = {
id: 5,
date: '2021-05-18',
},
6: {
id: 6,
date: '2021-05-26',
},
};
export const getTranslatedUINoficiations = (t, locale) => {
@ -66,5 +70,17 @@ export const getTranslatedUINoficiations = (t, locale) => {
new Date(UI_NOTIFICATIONS[5].date),
),
},
6: {
...UI_NOTIFICATIONS[6],
title: t('notifications6Title'),
description: [
t('notifications6DescriptionOne'),
t('notifications6DescriptionTwo'),
t('notifications6DescriptionThree'),
],
date: new Intl.DateTimeFormat(locale).format(
new Date(UI_NOTIFICATIONS[6].date),
),
},
};
};

3
test/e2e/fixtures/address-entry/state.json
View File

@ -60,6 +60,9 @@
},
"5": {
"isShown": true
},
"6": {
"isShown": true
}
}
},

3
test/e2e/fixtures/connected-state/state.json
View File

@ -50,6 +50,9 @@
},
"5": {
"isShown": true
},
"6": {
"isShown": true
}
}
},

3
test/e2e/fixtures/custom-rpc/state.json
View File

@ -46,6 +46,9 @@
},
"5": {
"isShown": true
},
"6": {
"isShown": true
}
}
},

3
test/e2e/fixtures/import-ui/state.json
View File

@ -101,6 +101,9 @@
},
"5": {
"isShown": true
},
"6": {
"isShown": true
}
}
},

3
test/e2e/fixtures/imported-account/state.json
View File

@ -46,6 +46,9 @@
},
"5": {
"isShown": true
},
"6": {
"isShown": true
}
}
},

3
test/e2e/fixtures/localization/state.json
View File

@ -46,6 +46,9 @@
},
"5": {
"isShown": true
},
"6": {
"isShown": true
}
}
},

3
test/e2e/fixtures/metrics-enabled/state.json
View File

@ -50,6 +50,9 @@
},
"5": {
"isShown": true
},
"6": {
"isShown": true
}
}
},

3
test/e2e/fixtures/send-edit/state.json
View File

@ -47,6 +47,9 @@
},
"5": {
"isShown": true
},
"6": {
"isShown": true
}
}
},

3
test/e2e/fixtures/threebox-enabled/state.json
View File

@ -57,6 +57,9 @@
},
"5": {
"isShown": true
},
"6": {
"isShown": true
}
}
},

35
ui/components/app/whats-new-popup/whats-new-popup.js
View File

@ -8,10 +8,12 @@ import { I18nContext } from '../../../contexts/i18n';
import { useEqualityCheck } from '../../../hooks/useEqualityCheck';
import Button from '../../ui/button';
import Popover from '../../ui/popover';
import Typography from '../../ui/typography';
import { updateViewedNotifications } from '../../../store/actions';
import { getTranslatedUINoficiations } from '../../../../shared/notifications';
import { getSortedNotificationsToShow } from '../../../selectors';
import { BUILD_QUOTE_ROUTE } from '../../../helpers/constants/routes';
import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
function getActionFunctionById(id, history) {
const actionFunctions = {
@ -41,6 +43,31 @@ function getActionFunctionById(id, history) {
return actionFunctions[id];
}
const renderDescription = (description) => {
if (!Array.isArray(description)) {
return (
<Typography variant={TYPOGRAPHY.Paragraph}>{description}</Typography>
);
}
return (
<>
{description.map((piece, index) => {
const isLast = index === description.length - 1;
return (
<Typography
key={`item-${index}`}
variant={TYPOGRAPHY.Paragraph}
boxProps={{ marginBottom: isLast ? 0 : 2 }}
>
{piece}
</Typography>
);
})}
</>
);
};
const renderFirstNotification = (notification, idRefMap, history) => {
const { id, date, title, description, image, actionText } = notification;
const actionFunction = getActionFunctionById(id, history);
@ -58,14 +85,14 @@ const renderFirstNotification = (notification, idRefMap, history) => {
className={classnames(
'whats-new-popup__notification whats-new-popup__first-notification',
)}
key={`whats-new-popop-notificatiion-${id}`}
key={`whats-new-popop-notification-${id}`}
ref={idRefMap[id]}
>
{!placeImageBelowDescription && imageComponent}
<div className="whats-new-popup__notification-title">{title}</div>
<div className="whats-new-popup__description-and-date">
<div className="whats-new-popup__notification-description">
{description}
{renderDescription(description)}
</div>
<div className="whats-new-popup__notification-date">{date}</div>
</div>
@ -91,13 +118,13 @@ const renderSubsequentNotification = (notification, idRefMap, history) => {
return (
<div
className={classnames('whats-new-popup__notification')}
key={`whats-new-popop-notificatiion-${id}`}
key={`whats-new-popop-notification-${id}`}
ref={idRefMap[id]}
>
<div className="whats-new-popup__notification-title">{title}</div>
<div className="whats-new-popup__description-and-date">
<div className="whats-new-popup__notification-description">
{description}
{renderDescription(description)}
</div>
<div className="whats-new-popup__notification-date">{date}</div>
</div>

1
ui/selectors/selectors.js
View File

@ -529,6 +529,7 @@ function getAllowedNotificationIds(state) {
3: true,
4: getCurrentChainId(state) === BSC_CHAIN_ID,
5: true,
6: true,
};
}