feat(extension): add midnight pre-launch settings banner [LW-10398]

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

@@ -33,6 +33,7 @@ USE_FOOR_TOPUP=false
 USE_POSTHOG_ANALYTICS_FOR_OPTED_OUT=false
 USE_MULTI_WALLET=true
 USE_SHARED_WALLET=false
+USE_MIDNIGHT_PRELAUNCH_EVENT=false
 
 # In App URLs
 CATALYST_GOOGLE_PLAY_URL=https://play.google.com/store/apps/details?id=io.iohk.vitvoting

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

@@ -29,6 +29,7 @@ USE_MULTI_DELEGATION_STAKING_GRID_VIEW=true
 USE_MULTI_DELEGATION_STAKING_FILTERS=false
 USE_ROS_STAKING_COLUMN=false
 USE_FOOR_TOPUP=false
+USE_MIDNIGHT_PRELAUNCH_EVENT=false
 
 # In App URLs
 CATALYST_GOOGLE_PLAY_URL=https://play.google.com/store/apps/details?id=io.iohk.vitvoting

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

@@ -4,6 +4,9 @@ import { PageTitle } from '@components/Layout';
 import { useTranslation } from 'react-i18next';
 import { Layout, SectionLayout } from '@src/views/browser-view/components/Layout';
 import { SettingsRemoveWallet } from './SettingsRemoveWallet';
+import { MidnightPreLaunchSettingsBanner } from '@lace/core';
+import { Box } from '@lace/ui';
+import MidnightPreLaunchBannerImage from '../../../../../../../../packages/core/src/ui/assets/images/midnight-launch-event-sidebar-banner.png';
 
 export interface SettingsLayoutProps {
   defaultPassphraseVisible?: boolean;
@@ -16,9 +19,20 @@ export const SettingsLayout = ({
 }: SettingsLayoutProps): React.ReactElement => {
   const { t } = useTranslation();
 
+  const sidePanelContent = (
+    <div>
+      {process.env.USE_MIDNIGHT_PRELAUNCH_EVENT === 'true' ? (
+        <Box mb="$32">
+          <MidnightPreLaunchSettingsBanner bannerImageUrl={MidnightPreLaunchBannerImage} />
+        </Box>
+      ) : undefined}
+      <SettingsAbout data-testid="about-container" />
+    </div>
+  );
+
   return (
     <Layout>
-      <SectionLayout sidePanelContent={<SettingsAbout data-testid="about-container" />}>
+      <SectionLayout sidePanelContent={sidePanelContent}>
         <PageTitle data-testid="settings-page-title">{t('browserView.settings.heading')}</PageTitle>
         <SettingsWallet />
         {process.env.USE_MULTI_CURRENCY === 'true' && <SettingsPreferences />}

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

@@ -171,6 +171,14 @@ 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_MIDNIGHT_PRELAUNCH_EVENT === 'true' ? (
+          <SettingsLink
+            description={t('browserView.settings.wallet.midnight.prelaunch.description')}
+            data-testid="settings-wallet-midnight-prelaunch-link"
+          >
+            {t('browserView.settings.wallet.midnight.prelaunch.title')}
+          </SettingsLink>
+        ) : undefined}
         {popupView && (
           <>
             <AboutDrawer visible={activeDrawer === SettingsDrawer.about} onClose={closeDrawer} popupView={popupView} />

packages/core/src/index.ts

@@ -42,3 +42,4 @@ export * from '@ui/components/SharedWallet';
 export * from '@ui/components/Account';
 export * from '@ui/components/WalletSetupRevamp';
 export * from '@ui/components/ListEmptyState';
+export * from '@ui/components/MidnightPreLaunchSettingsBanner';

packages/core/src/ui/components/MidnightPreLaunchSettingsBanner/MidnightPreLaunchSettingsBanner.module.scss

@@ -0,0 +1,22 @@
+.card {
+  background-image: var(--midnight-pre-launch-banner-image);
+  background-size: cover;
+  background-position: center right;
+  padding: 30px 20px 30px 20px;
+}
+
+.heading {
+  color: white;
+  font-size: 18px;
+  line-height: 24px;
+  margin-bottom: 10px;
+  font-weight: 700;
+}
+
+.description {
+  color: #A9A9A9;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+  margin-bottom: 30px;
+}

packages/core/src/ui/components/MidnightPreLaunchSettingsBanner/MidnightPreLaunchSettingsBanner.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { Box } from '@lace/ui';
+
+import { MidnightPreLaunchSettingsBanner } from './index';
+import MidnightPreLaunchBannerImage from '../../assets/images/midnight-launch-event-sidebar-banner.png';
+
+export default {
+  title: 'Midnight/MidnightPreLaunchSettingsBanner'
+} as Meta<typeof MidnightPreLaunchSettingsBanner>;
+
+export const Overview = (): JSX.Element => (
+  <>
+    <Box w="$312">
+      <MidnightPreLaunchSettingsBanner
+        bannerImageUrl={MidnightPreLaunchBannerImage}
+        onCtaButtonClick={action('onCtaButtonClick')}
+      />
+    </Box>
+    <Box w="$342">
+      <MidnightPreLaunchSettingsBanner
+        bannerImageUrl={MidnightPreLaunchBannerImage}
+        onCtaButtonClick={action('onCtaButtonClick')}
+      />
+    </Box>
+    <Box w="$420">
+      <MidnightPreLaunchSettingsBanner
+        bannerImageUrl={MidnightPreLaunchBannerImage}
+        onCtaButtonClick={action('onCtaButtonClick')}
+      />
+    </Box>
+  </>
+);

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Button, Card } from '@lace/ui';
+import { useTranslation } from 'react-i18next';
+import styles from './MidnightPreLaunchSettingsBanner.module.scss';
+
+export const MidnightPreLaunchSettingsBanner = ({
+  bannerImageUrl,
+  onCtaButtonClick
+}: {
+  bannerImageUrl: string;
+  onCtaButtonClick?: () => void;
+}): React.ReactElement => {
+  const { t } = useTranslation();
+  return (
+    <Card.Outlined
+      className={styles.card}
+      style={{ '--midnight-pre-launch-banner-image': `url(${bannerImageUrl})` } as React.CSSProperties}
+    >
+      <div className={styles.heading}>{t('core.MidnightPreLaunchSettingsBanner.heading')}</div>
+      <div className={styles.description}>{t('core.MidnightPreLaunchSettingsBanner.description')}</div>
+      <Button.CallToAction
+        label={t('core.MidnightPreLaunchSettingsBanner.ctaButtonLabel')}
+        onClick={onCtaButtonClick}
+        w="$fill"
+      />
+    </Card.Outlined>
+  );
+};

packages/core/src/ui/components/MidnightPreLaunchSettingsBanner/index.ts

@@ -0,0 +1 @@
+export { MidnightPreLaunchSettingsBanner } from './MidnightPreLaunchSettingsBanner';

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

@@ -337,6 +337,8 @@
   "browserView.settings.wallet.general.showPubKeyAction": "Show public key",
   "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.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",

packages/translation/src/lib/translations/core/en.json

@@ -251,6 +251,9 @@
   "core.infoWallet.addressCopied": "Address copied",
   "core.infoWallet.copy": "Copy",
   "core.infoWallet.handleCopied": "Handle copied",
+  "core.MidnightPreLaunchSettingsBanner.heading": "Midnight Pre-Launch Event",
+  "core.MidnightPreLaunchSettingsBanner.description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna",
+  "core.MidnightPreLaunchSettingsBanner.ctaButtonLabel": "More details",
   "core.Mint.title": "Confirm transaction",
   "core.mnemonicVideoPopupContent.closeButton": "Got it",
   "core.mnemonicVideoPopupContent.description": "Learn about what is a recovery phrase, and how to keep it safe from the video below.",