Merge pull request #3877 from Emurgo/ruslan/feature-announcement-modal

feature announcement modal

packages/yoroi-extension/app/api/localStorage/index.js

@@ -20,7 +20,7 @@ const storageKeys = {
   URI_SCHEME_ACCEPTANCE: networkForLocalStorage + '-URI-SCHEME-ACCEPTANCE',
   COMPLEXITY_LEVEL: networkForLocalStorage + '-COMPLEXITY-LEVEL',
   IS_USER_MIGRATED_TO_REVAMP: 'IS_USER_MIGRATED_TO_REVAMP',
-  IS_REVAMP_THEME_ANNOUNCED: 'IS_REVAMP_THEME_ANNOUNCED',
+  LAST_ANNOUNCED_FEATURE_VERSION: 'LAST_ANNOUNCED_FEATURE_VERSION',
   VERSION: networkForLocalStorage + '-LAST-LAUNCH-VER',
   HIDE_BALANCE: networkForLocalStorage + '-HIDE-BALANCE',
   UNIT_OF_ACCOUNT: networkForLocalStorage + '-UNIT-OF-ACCOUNT',
@@ -130,13 +130,13 @@ export default class LocalStorageApi {
   setUserRevampMigrationStatus: boolean => Promise<void> = status =>
     setLocalItem(storageKeys.IS_USER_MIGRATED_TO_REVAMP, status.toString());
 
-  // ========== Revamp Announcement  ========== //
+  // ========== Updates Announcement  ========== //
 
-  getUserRevampAnnouncementStatus: void => Promise<boolean> = async () =>
-    (await getLocalItem(storageKeys.IS_REVAMP_THEME_ANNOUNCED)) === 'true';
+  getLastAnnouncedFeatureVersion: void => Promise<string> = async () =>
+    (await getLocalItem(storageKeys.LAST_ANNOUNCED_FEATURE_VERSION)) ?? '';
 
-  setUserRevampAnnouncementStatus: boolean => Promise<void> = status =>
-    setLocalItem(storageKeys.IS_REVAMP_THEME_ANNOUNCED, status.toString());
+  setLastAnnouncedFeatureVersion: string => Promise<void> = version =>
+    setLocalItem(storageKeys.LAST_ANNOUNCED_FEATURE_VERSION, String(version));
 
   // ========== Select Wallet ========== //
 

packages/yoroi-extension/app/containers/wallet/Wallet.js

@@ -21,19 +21,26 @@ import { RevampAnnouncementDialog } from './dialogs/RevampAnnouncementDialog';
 import { PoolTransitionDialog } from './dialogs/pool-transition/PoolTransitionDialog';
 import { Redirect } from 'react-router';
 import type { StoresProps } from '../../stores';
+import semver from 'semver/preload';
 
 type Props = {|
   +children: Node,
 |};
+
 @observer
 export default class Wallet extends Component<{| ...Props, ...StoresProps |}> {
   static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
 
   componentDidMount() {
-    if (!this.props.stores.profile.isRevampAnnounced)
+    const lastAnnouncedVersion = this.props.stores.profile.lastAnnouncedFeatureVersion;
+    if (lastAnnouncedVersion == null) {
+      return;
+    }
+    if (lastAnnouncedVersion === '' || semver.lt(lastAnnouncedVersion, '5.5.0')) {
       this.props.stores.uiDialogs.open({ dialog: RevampAnnouncementDialog });
+    }
   }
 
   checkRoute(): void | string {
@@ -206,8 +213,9 @@ export default class Wallet extends Component<{| ...Props, ...StoresProps |}> {
     if (isRevampDialogOpen)
       return (
         <RevampAnnouncementDialog
-          onClose={() => {
-            stores.profile.markRevampAsAnnounced();
+          // $FlowIgnore[incompatible-type]
+          onClose={async () => {
+            await stores.profile.setLastAnnouncedFeatureVersion('5.5.0');
             this.props.stores.uiDialogs.closeActiveDialog();
           }}
         />

packages/yoroi-extension/app/containers/wallet/dialogs/RevampAnnouncementDialog.js

@@ -5,49 +5,37 @@ import type { Node } from 'react';
 import Dialog from '../../../components/widgets/Dialog';
 import { defineMessages, intlShape } from 'react-intl';
 import { observer } from 'mobx-react';
-import { ReactComponent as NewThemeIllustration } from '../../../assets/images/new-theme-illustration.inline.svg';
+import bannerPng from '../../../assets/images/banner-yoroi-announcement-modal.png';
 import DialogCloseButton from '../../../components/widgets/DialogCloseButton';
 import styles from './RevampAnnouncementDialog.scss';
 import { Box, Stack, Typography } from '@mui/material';
 import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
 
 const messages = defineMessages({
   title: {
-    id: 'wallet.revampAnnouncement.title',
-    defaultMessage: '!!!Discover a new yoroi',
+    id: 'wallet.revampAnnouncement.titleNew',
+    defaultMessage: '!!!Discover new features in YOROI',
   },
   description: {
     id: 'wallet.revampAnnouncement.description',
     defaultMessage:
       '!!!Yoroi 5.0 is here. Check out our new and improved design enhancements. The latest version enables an even better experience and performance.',
   },
   updatesSectionTitle: {
-    id: 'wallet.revampAnnouncement.updatesSectionTitle',
-    defaultMessage: '!!!What’s In the Update:',
+    id: 'wallet.revampAnnouncement.updatesSectionTitleNew',
+    defaultMessage: '!!!Yoroi wallet just got more powerful new features. Start exploring the updates and take your crypto experience to the next level!',
   },
   update1: {
-    id: 'wallet.revampAnnouncement.updates.1',
-    defaultMessage: '!!!User-friendly intuitive design',
+    id: 'wallet.revampAnnouncement.updates.1new',
+    defaultMessage: '!!!Portfolio management',
   },
   update2: {
-    id: 'wallet.revampAnnouncement.updates.2',
-    defaultMessage: '!!!Multiple Asset Transactions',
+    id: 'wallet.revampAnnouncement.updates.2new',
+    defaultMessage: '!!!Dark mode',
   },
   update3: {
-    id: 'wallet.revampAnnouncement.updates.3',
-    defaultMessage: '!!!NFT Gallery',
-  },
-  update4: {
-    id: 'wallet.revampAnnouncement.updates.4',
-    defaultMessage: '!!!In-app self service Q&As',
-  },
-  update5: {
-    id: 'wallet.revampAnnouncement.updates.5',
-    defaultMessage: '!!!In-app get help ticketing',
-  },
-  update6: {
-    id: 'wallet.revampAnnouncement.updates.6',
-    defaultMessage: '!!!Fiat Pairing',
+    id: 'wallet.revampAnnouncement.updates.3new',
+    defaultMessage: '!!!Trezor Safe 3 and Safe 5 support"',
   },
   goToWalletLabel: {
     id: 'wallet.revampAnnouncement.goToWalletLabel',
@@ -84,17 +72,16 @@ export class RevampAnnouncementDialog extends Component<Props> {
         dialogActions={actions}
       >
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: '24px' }} id="dialogRevampBox">
-          <Typography component="div"
-            variant="body1"
-            sx={{
-              textAlign: 'center',
-              fontWeight: 500,
-            }}
-          >
-            {intl.formatMessage(messages.description)}
-          </Typography>
-
-          <NewThemeIllustration />
+          {/*<Typography component="div"*/}
+          {/*  variant="body1"*/}
+          {/*  sx={{*/}
+          {/*    textAlign: 'center',*/}
+          {/*    fontWeight: 500,*/}
+          {/*  }}*/}
+          {/*>*/}
+          {/*  {intl.formatMessage(messages.description)}*/}
+          {/*</Typography>*/}
+          <Box component="img" src={bannerPng} />
           <Stack gap="16px">
             <Typography component="div" color="grayscale.900" variant="body1" fontWeight={500}>
               {intl.formatMessage(messages.updatesSectionTitle)}
@@ -121,20 +108,6 @@ export class RevampAnnouncementDialog extends Component<Props> {
                   </Typography>
                 ))}
               </Box>
-              <Box
-                component="ul"
-                sx={{
-                  listStyle: 'inside',
-                  color: 'grayscale.900',
-                  width: '100%',
-                }}
-              >
-                {[messages.update4, messages.update5, messages.update6].map(message => (
-                  <Typography component="li" variant="body1" color="grayscale.900">
-                    {intl.formatMessage(message)}
-                  </Typography>
-                ))}
-              </Box>
             </Box>
           </Stack>
         </Box>

packages/yoroi-extension/app/i18n/locales/en-US.json

@@ -843,14 +843,11 @@
   "wallet.revamp.transaction.memo.optional.invalid": "Memo name is too long",
   "wallet.revampAnnouncement.description": "Yoroi 5.0 is here. Check out our new and improved design enhancements. The latest version enables an even better experience and performance.",
   "wallet.revampAnnouncement.goToWalletLabel": "Go to the wallet",
-  "wallet.revampAnnouncement.title": "Discover a new yoroi",
-  "wallet.revampAnnouncement.updates.1": "User-friendly intuitive design",
-  "wallet.revampAnnouncement.updates.2": "Multiple Asset Transactions",
-  "wallet.revampAnnouncement.updates.3": "NFT Gallery",
-  "wallet.revampAnnouncement.updates.4": "In-app self service Q&As",
-  "wallet.revampAnnouncement.updates.5": "In-app get help ticketing",
-  "wallet.revampAnnouncement.updates.6": "Fiat Pairing",
-  "wallet.revampAnnouncement.updatesSectionTitle": "What’s In the Update:",
+  "wallet.revampAnnouncement.titleNew": "Discover new features in YOROI",
+  "wallet.revampAnnouncement.updates.1new": "Portfolio management",
+  "wallet.revampAnnouncement.updates.2new": "Dark mode",
+  "wallet.revampAnnouncement.updates.3new": "Trezor Safe 3 and Safe 5 support",
+  "wallet.revampAnnouncement.updatesSectionTitleNew": "Yoroi wallet just got more powerful new features. Start exploring the updates and take your crypto experience to the next level!",
   "wallet.send.confirmationDialog.addressToLabel": "To",
   "wallet.send.confirmationDialog.amountLabel": "Amount",
   "wallet.send.confirmationDialog.feesLabel": "Fees",

packages/yoroi-extension/app/stores/base/BaseProfileStore.js

@@ -90,16 +90,16 @@ export default class BaseProfileStore
     (boolean) => Promise<void>
   > = new Request<(boolean) => Promise<void>>(this.api.localStorage.setUserRevampMigrationStatus);
 
-  @observable getUserRevampAnnouncementStatusRequest: Request<
-    (void) => Promise<boolean>
-  > = new Request<(void) => Promise<boolean>>(
-    this.api.localStorage.getUserRevampAnnouncementStatus
+  @observable getLastAnnouncedFeatureVersionRequest: Request<
+    (void) => Promise<string | null>
+  > = new Request<(void) => Promise<string | null>>(
+    this.api.localStorage.getLastAnnouncedFeatureVersion
   );
 
-  @observable setUserRevampAnnouncementStatusRequest: Request<
-    (boolean) => Promise<void>
-  > = new Request<(boolean) => Promise<void>>(
-    this.api.localStorage.setUserRevampAnnouncementStatus
+  @observable setLastAnnouncedFeatureVersionRequest: Request<
+    (string) => Promise<void>
+  > = new Request<(string) => Promise<void>>(
+    this.api.localStorage.setLastAnnouncedFeatureVersion
   );
 
   @observable getComplexityLevelRequest: Request<
@@ -153,7 +153,7 @@ export default class BaseProfileStore
       this._updateMomentJsLocaleAfterLocaleChange,
     ]);
     this._getSelectComplexityLevel(); // eagerly cache
-    noop(this.isRevampAnnounced);
+    noop(this.lastAnnouncedFeatureVersion);
     this.stores.loading.registerBlockingLoadingRequest(
       this._loadAcceptedTosVersion(),
       'load-tos-version',
@@ -238,20 +238,18 @@ export default class BaseProfileStore
     );
   }
 
-  @computed get isRevampAnnounced(): boolean {
-    let { result } = this.getUserRevampAnnouncementStatusRequest;
-
-    if (result == null) {
-      result = this.getUserRevampAnnouncementStatusRequest.execute().result;
+  @computed get lastAnnouncedFeatureVersion(): string | null {
+    if (!this.getLastAnnouncedFeatureVersionRequest.wasExecuted
+      && !this.getLastAnnouncedFeatureVersionRequest.isExecuting) {
+      this.getLastAnnouncedFeatureVersionRequest.execute();
     }
-
-    return result === true;
+    return this.getLastAnnouncedFeatureVersionRequest.result ?? null;
   }
 
   @action
-  markRevampAsAnnounced: void => Promise<void> = async () => {
-    await this.setUserRevampAnnouncementStatusRequest.execute(true);
-    await this.getUserRevampAnnouncementStatusRequest.execute();
+  setLastAnnouncedFeatureVersion: string => Promise<void> = async (version) => {
+    await this.setLastAnnouncedFeatureVersionRequest.execute(version);
+    await this.getLastAnnouncedFeatureVersionRequest.execute();
   };
 
   @action