fix: update midnight event copy (#1905)

Author: greatertomi

apps/browser-extension-wallet/.env.defaults

@@ -61,6 +61,7 @@ TEMPO_VOTE_URL_MAINNET=https://tempo.vote
 TEMPO_VOTE_URL_PREPROD=https://preprod.tempo.vote
 TEMPO_VOTE_URL_PREVIEW=https://preview.tempo.vote
 TEMPO_VOTE_URL_SANCHONET=https://sanchonet.tempo.vote
+MIDNIGHT_LEARN_MORE_URL=http://midnighttge.io
 
 # events tracking
 POSTHOG_HOST=https://e.lw.iog.io

apps/browser-extension-wallet/.env.developerpreview

@@ -59,6 +59,7 @@ TEMPO_VOTE_URL_MAINNET=https://tempo.vote
 TEMPO_VOTE_URL_PREPROD=https://preprod.tempo.vote
 TEMPO_VOTE_URL_PREVIEW=https://preview.tempo.vote
 TEMPO_VOTE_URL_SANCHONET=https://sanchonet.tempo.vote
+MIDNIGHT_LEARN_MORE_URL=http://midnighttge.io
 
 # events tracking
 POSTHOG_HOST=https://e.lw.iog.io

apps/browser-extension-wallet/.env.example

@@ -58,6 +58,7 @@ TEMPO_VOTE_URL_MAINNET=https://tempo.vote
 TEMPO_VOTE_URL_PREPROD=https://preprod.tempo.vote
 TEMPO_VOTE_URL_PREVIEW=https://preview.tempo.vote
 TEMPO_VOTE_URL_SANCHONET=https://sanchonet.tempo.vote
+MIDNIGHT_LEARN_MORE_URL=http://midnighttge.io
 
 # events tracking
 POSTHOG_HOST=https://e.lw.iog.io

apps/browser-extension-wallet/src/views/browser-view/features/assets/components/MidnightEventBanner.tsx

@@ -1,11 +1,10 @@
 import React, { Fragment, useEffect, useState } from 'react';
 import { MidnightEventBanner as View } from '@lace/core';
-import { useWalletStore } from '@src/stores';
-import { APP_MODE_POPUP } from '@src/utils/constants';
 import { Box, Dialog, sx } from '@input-output-hk/lace-ui-toolkit';
 import { storage } from 'webextension-polyfill';
 import { MIDNIGHT_EVENT_BANNER_KEY, MidnightEventBannerStorage } from '@lib/scripts/types';
 import { useTranslation } from 'react-i18next';
+import { useExternalLinkOpener } from '@providers';
 
 interface State {
   isLoading: boolean;
@@ -18,15 +17,12 @@ const REMINDER_TIME = Number.parseInt(process.env.MIDNIGHT_EVENT_BANNER_REMINDER
 
 export const MidnightEventBanner = (): JSX.Element => {
   const { t } = useTranslation();
-  const {
-    walletUI: { appMode }
-  } = useWalletStore();
-  const popupView = appMode === APP_MODE_POPUP;
   const [state, setState] = useState<State>({
     isLoading: true,
     isDialogOpen: false,
     data: undefined
   });
+  const openExternalLink = useExternalLinkOpener();
 
   useEffect(() => {
     const loadStorage = async () => {
@@ -134,14 +130,13 @@ export const MidnightEventBanner = (): JSX.Element => {
       >
         <View
           translations={{
-            title: popupView ? t('midnightEventBanner.popup.title') : t('midnightEventBanner.desktop.title'),
-            description: popupView
-              ? t('midnightEventBanner.popup.description')
-              : t('midnightEventBanner.desktop.description'),
-            moreDetails: t('midnightEventBanner.moreDetails'),
+            title: t('midnightEventBanner.title'),
+            description: t('midnightEventBanner.description'),
+            learnMore: t('midnightEventBanner.learnMore'),
             reminder: t('midnightEventBanner.reminder')
           }}
           onReminder={handleReminder}
+          onLearnMore={() => openExternalLink(process.env.MIDNIGHT_LEARN_MORE_URL)}
           onClose={() => handleDialog(true)}
         />
       </Box>

apps/browser-extension-wallet/src/views/browser-view/features/settings/components/SettingsLayout.tsx

@@ -7,6 +7,7 @@ import { SettingsRemoveWallet } from './SettingsRemoveWallet';
 import { MidnightPreLaunchSettingsBanner } from '@lace/core';
 import { Box } from '@input-output-hk/lace-ui-toolkit';
 import MidnightPreLaunchBannerImage from '../../../../../../../../packages/core/src/ui/assets/images/midnight-launch-event-sidebar-banner.png';
+import { useExternalLinkOpener } from '@providers';
 
 export interface SettingsLayoutProps {
   defaultPassphraseVisible?: boolean;
@@ -18,12 +19,16 @@ export const SettingsLayout = ({
   defaultMnemonic
 }: SettingsLayoutProps): React.ReactElement => {
   const { t } = useTranslation();
+  const openExternalLink = useExternalLinkOpener();
 
   const sidePanelContent = (
     <div>
       {process.env.USE_GLACIER_DROP === 'true' ? (
         <Box mb="$32">
-          <MidnightPreLaunchSettingsBanner bannerImageUrl={MidnightPreLaunchBannerImage} />
+          <MidnightPreLaunchSettingsBanner
+            bannerImageUrl={MidnightPreLaunchBannerImage}
+            onCtaButtonClick={() => openExternalLink(process.env.MIDNIGHT_LEARN_MORE_URL)}
+          />
         </Box>
       ) : undefined}
       <SettingsAbout data-testid="about-container" />

apps/browser-extension-wallet/src/views/browser-view/features/settings/components/SettingsWalletBase.tsx

@@ -11,7 +11,7 @@ import { AboutDrawer } from './AboutDrawer';
 import { config } from '@src/config';
 import { useCustomSubmitApi, useRedirection } from '@hooks';
 import { BrowserViewSections, MessageTypes } from '@lib/scripts/types';
-import { useAnalyticsContext, useBackgroundServiceAPIContext } from '@providers';
+import { useAnalyticsContext, useBackgroundServiceAPIContext, useExternalLinkOpener } from '@providers';
 import { useSearchParams, useObservable, Button } from '@lace/common';
 import { walletRoutePaths } from '@routes/wallet-paths';
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
@@ -49,7 +49,7 @@ export interface SettingsWalletProps<AdditionalDrawers extends string = never> {
   popupView?: boolean;
 }
 
-// eslint-disable-next-line complexity
+// eslint-disable-next-line complexity,max-statements
 export const SettingsWalletBase = <AdditionalDrawers extends string>({
   renderLocalNodeSlot,
   popupView = false
@@ -76,6 +76,7 @@ export const SettingsWalletBase = <AdditionalDrawers extends string>({
   const backgroundServices = useBackgroundServiceAPIContext();
   const analytics = useAnalyticsContext();
   const { getCustomSubmitApiForNetwork } = useCustomSubmitApi();
+  const openExternalLink = useExternalLinkOpener();
 
   const isNetworkChoiceEnabled = AVAILABLE_CHAINS.length > 1;
   const authorizedAppsEnabled = process.env.USE_DAPP_CONNECTOR === 'true' && !isSharedWallet;
@@ -176,14 +177,15 @@ export const SettingsWalletBase = <AdditionalDrawers extends string>({
         <Title level={5} className={styles.heading5} data-testid="wallet-settings-heading">
           {t('browserView.settings.wallet.title')}
         </Title>
-        {process.env.USE_GLACIER_DROP === 'true' ? (
+        {process.env.USE_GLACIER_DROP === 'true' && (
           <SettingsLink
             description={t('browserView.settings.wallet.midnight.prelaunch.description')}
             data-testid="settings-wallet-midnight-prelaunch-link"
+            onClick={() => openExternalLink(process.env.MIDNIGHT_LEARN_MORE_URL)}
           >
             {t('browserView.settings.wallet.midnight.prelaunch.title')}
           </SettingsLink>
-        ) : undefined}
+        )}
         {popupView && (
           <>
             <AboutDrawer visible={activeDrawer === SettingsDrawer.about} onClose={closeDrawer} popupView={popupView} />

apps/browser-extension-wallet/src/views/browser-view/features/settings/components/__tests__/SettingsWallet.test.tsx

@@ -21,7 +21,8 @@ import {
   BackgroundServiceAPIProvider,
   BackgroundServiceAPIProviderProps,
   CurrencyStoreProvider,
-  DatabaseProvider
+  DatabaseProvider,
+  ExternalLinkOpenerProvider
 } from '@providers';
 import { BehaviorSubject } from 'rxjs';
 import { act } from 'react-dom/test-utils';
@@ -130,7 +131,9 @@ const getWrapper =
             <I18nextProvider i18n={i18n}>
               <AnalyticsProvider analyticsDisabled tracker={mockAnalyticsTracker as any}>
                 <CurrencyStoreProvider>
-                  <BackgroundServiceAPIProvider value={backgroundService}>{children}</BackgroundServiceAPIProvider>
+                  <ExternalLinkOpenerProvider>
+                    <BackgroundServiceAPIProvider value={backgroundService}>{children}</BackgroundServiceAPIProvider>
+                  </ExternalLinkOpenerProvider>
                 </CurrencyStoreProvider>
               </AnalyticsProvider>
             </I18nextProvider>

packages/core/src/ui/components/MidnightEventBanner/MidnightEventBanner.stories.ts

@@ -17,10 +17,10 @@ type Story = StoryObj<typeof MidnightEventBanner>;
 const data: ComponentProps<typeof MidnightEventBanner> = {
   translations: {
     description:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna',
-    title: 'Participate in the\nMidnight Pre-Launch Event',
+      'The free, multi-phase distribution of NIGHT tokens aimed at empowering a broad, diverse community to build the future of the Midnight network',
+    title: 'Discover the Midnight Token Distribution',
     reminder: 'Remind me later',
-    moreDetails: 'More details'
+    learnMore: 'Learn more'
   }
 };
 

packages/core/src/ui/components/MidnightEventBanner/MidnightEventBanner.tsx

@@ -9,15 +9,15 @@ interface Props {
   translations: {
     title: string;
     description: string;
-    moreDetails: string;
+    learnMore: string;
     reminder: string;
   };
   onClose?: () => void;
-  onMoreDetails?: () => void;
+  onLearnMore?: () => void;
   onReminder?: () => void;
 }
 
-const PopupButtons = ({ translations, onMoreDetails, onReminder }: Props): JSX.Element => (
+const PopupButtons = ({ translations, onLearnMore, onReminder }: Props): JSX.Element => (
   <Box
     w="$fill"
     className={sx({
@@ -29,15 +29,15 @@ const PopupButtons = ({ translations, onMoreDetails, onReminder }: Props): JSX.E
     })}
   >
     <Box mb="$10" w="$fill">
-      <Button.CallToAction label={translations.moreDetails} w="$fill" onClick={onMoreDetails} />
+      <Button.CallToAction label={translations.learnMore} w="$fill" onClick={onLearnMore} />
     </Box>
     <Box w="$fill">
       <Button.Secondary label={translations.reminder} w="$fill" onClick={onReminder} />
     </Box>
   </Box>
 );
 
-const FullScreenButtons = ({ translations, onMoreDetails, onReminder }: Props): JSX.Element => (
+const FullScreenButtons = ({ translations, onLearnMore, onReminder }: Props): JSX.Element => (
   <Box
     w="$fill"
     className={sx({
@@ -49,7 +49,7 @@ const FullScreenButtons = ({ translations, onMoreDetails, onReminder }: Props):
     })}
   >
     <Box mr={'$20'}>
-      <Button.CallToAction label={translations.moreDetails} onClick={onMoreDetails} />
+      <Button.CallToAction label={translations.learnMore} onClick={onLearnMore} />
     </Box>
     <Box>
       <Button.Secondary label={translations.reminder} onClick={onReminder} />
@@ -90,7 +90,7 @@ const Title = ({ translations }: Props): JSX.Element => (
   </>
 );
 
-export const MidnightEventBanner = ({ translations, onClose, onMoreDetails, onReminder }: Props): JSX.Element => (
+export const MidnightEventBanner = ({ translations, onClose, onLearnMore, onReminder }: Props): JSX.Element => (
   <Flex
     style={{ backgroundImage: `url(${banner})` }}
     className={cx(
@@ -123,7 +123,7 @@ export const MidnightEventBanner = ({ translations, onClose, onMoreDetails, onRe
         </Text.Body.Normal>
       </Box>
     </Flex>
-    <PopupButtons translations={translations} onMoreDetails={onMoreDetails} onReminder={onReminder} />
-    <FullScreenButtons translations={translations} onMoreDetails={onMoreDetails} onReminder={onReminder} />
+    <PopupButtons translations={translations} onLearnMore={onLearnMore} onReminder={onReminder} />
+    <FullScreenButtons translations={translations} onLearnMore={onLearnMore} onReminder={onReminder} />
   </Flex>
 );

packages/translation/src/lib/translations/browser-extension-wallet/en.json

@@ -367,7 +367,7 @@
   "browserView.settings.wallet.general.showPubKeyDescription": "This lets you import your wallet to other browsers and devices, or to restore it at a later date",
   "browserView.settings.wallet.general.title": "Your keys",
   "browserView.settings.wallet.midnight.prelaunch.description": "Check how to claim and FAQ",
-  "browserView.settings.wallet.midnight.prelaunch.title": "Midnight Pre-Launch Event",
+  "browserView.settings.wallet.midnight.prelaunch.title": "Midnight Token Distribution",
   "browserView.settings.wallet.network.description": "Switch from mainnet to testnet",
   "browserView.settings.wallet.network.drawerDescription": "Select the network you would like your wallet to operate on.",
   "browserView.settings.wallet.network.networkSwitched": "Switched network",
@@ -888,14 +888,12 @@
   "walletSetup.setupOptions.restoreWallet": "Restore wallet",
   "walletSetup.walletName.pleaseNameYourWallet": "Please name your wallet",
   "walletSetup.walletName.walletNameDescription": "Lorem ipsum dolor sit amet",
-  "midnightEventBanner.popup.title": "Participate in the\nMidnight Pre-Launch Event",
-  "midnightEventBanner.desktop.title": "Participate in the Midnight Pre-Launch Event",
-  "midnightEventBanner.desktop.description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed\ndo eiusmod tempor incididunt ut labore et dolore magna",
-  "midnightEventBanner.popup.description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna",
-  "midnightEventBanner.moreDetails": "More details",
+  "midnightEventBanner.title": "Discover the Midnight Token Distribution",
+  "midnightEventBanner.description": "The free, multi-phase distribution of NIGHT tokens aimed at empowering a broad, diverse community to build the future of the Midnight network",
+  "midnightEventBanner.learnMore": "Learn more",
   "midnightEventBanner.reminder": "Remind me later",
   "midnightEventBanner.dialog.title": "Heads up",
-  "midnightEventBanner.dialog.description": "You can check the Midnight Pre-Launch Event details anytime from settings",
+  "midnightEventBanner.dialog.description": "You can check the Midnight Token Distribution details anytime from settings",
   "midnightEventBanner.dialog.confirm": "I understand",
   "midnightEventBanner.dialog.cancel": "Cancel",
   "paperWallet.savePaperWallet.title": "Save your paper wallet",