fix: move glacier drop learn more url to posthog feature flag payload (#1912)

Author: greatertomi

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

@@ -60,7 +60,6 @@ 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

@@ -58,7 +58,6 @@ 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

@@ -57,7 +57,6 @@ 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/lib/scripts/types/feature-flags.ts

@@ -2,7 +2,7 @@ import { Cardano } from '@cardano-sdk/core';
 import { z } from 'zod';
 import { DeepRequired } from 'utility-types';
 import { JsonType } from 'posthog-js';
-import { commonSchema, dappExplorerSchema } from '@providers/PostHogClientProvider/schema';
+import { commonSchema, dappExplorerSchema, glacierDropSchema } from '@providers/PostHogClientProvider/schema';
 
 export enum ExperimentName {
   CREATE_PAPER_WALLET = 'create-paper-wallet',
@@ -29,6 +29,7 @@ export type FeatureFlagsByNetwork = Record<Cardano.NetworkMagics, FeatureFlags>;
 // so we use extra types with DeepRequired, these types can be removed after Lace uses strict null checks
 export type FeatureFlagCommonSchema = DeepRequired<z.infer<typeof commonSchema>>;
 export type FeatureFlagDappExplorerSchema = DeepRequired<z.infer<typeof dappExplorerSchema>>;
+export type FeatureFlagGlacierDropSchema = DeepRequired<z.infer<typeof glacierDropSchema>>;
 
 // Using `false` as a fallback type for the payload, as it can be optional, and we (sadly) don't have
 // strict null checks enabled so `false` is a replacement for `undefined` in this case
@@ -37,6 +38,7 @@ type FeatureFlagPayload<T extends Record<string, unknown> = {}> = (FeatureFlagCo
 
 type FeatureFlagCustomPayloads = {
   [ExperimentName.DAPP_EXPLORER]: FeatureFlagPayload<FeatureFlagDappExplorerSchema>;
+  [ExperimentName.GLACIER_DROP]: FeatureFlagPayload<FeatureFlagGlacierDropSchema>;
 };
 
 export type FeatureFlagPayloads = {

apps/browser-extension-wallet/src/providers/PostHogClientProvider/client/PostHogClient.ts

@@ -32,7 +32,8 @@ import {
   FeatureFlagPayloads,
   FeatureFlagsByNetwork,
   FeatureFlags,
-  RawFeatureFlagPayloads
+  RawFeatureFlagPayloads,
+  FeatureFlagGlacierDropSchema
 } from '@lib/scripts/types/feature-flags';
 import { config } from '@src/config';
 import { featureFlagSchema, networksEnumSchema, NetworksEnumSchema } from '../schema';
@@ -313,6 +314,11 @@ export class PostHogClient<Action extends string = string> {
           continue;
         }
 
+        if (featureFlag === ExperimentName.GLACIER_DROP) {
+          payloadsByFeature[featureFlag] = featureFlagSchema.glacierDrop.parse(payload) as FeatureFlagGlacierDropSchema;
+          continue;
+        }
+
         // type-casting can be removed after Lace uses strict null checks
         payloadsByFeature[featureFlag] = featureFlagSchema.common.parse(payload) as FeatureFlagCommonSchema;
       } catch (error) {

apps/browser-extension-wallet/src/providers/PostHogClientProvider/schema.ts

@@ -41,7 +41,14 @@ export const dappExplorerSchema = commonSchema.merge(
   })
 );
 
+export const glacierDropSchema = commonSchema.merge(
+  z.object({
+    learnMoreUrl: z.string().url()
+  })
+);
+
 export const featureFlagSchema = {
   common: z.preprocess(parseJsonPreprocessor, commonSchema),
-  dappExplorer: z.preprocess(parseJsonPreprocessor, dappExplorerSchema)
+  dappExplorer: z.preprocess(parseJsonPreprocessor, dappExplorerSchema),
+  glacierDrop: z.preprocess(parseJsonPreprocessor, glacierDropSchema)
 };

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

@@ -27,6 +27,7 @@ export const MidnightEventBanner = (): JSX.Element => {
   const posthog = usePostHogClientContext();
 
   const isGlacierDropEnabled = posthog?.isFeatureFlagEnabled('glacier-drop');
+  const glacierDropPayload = posthog.getFeatureFlagPayload('glacier-drop');
 
   useEffect(() => {
     const loadStorage = async () => {
@@ -140,7 +141,7 @@ export const MidnightEventBanner = (): JSX.Element => {
             reminder: t('midnightEventBanner.reminder')
           }}
           onReminder={handleReminder}
-          onLearnMore={() => openExternalLink(process.env.MIDNIGHT_LEARN_MORE_URL)}
+          onLearnMore={() => glacierDropPayload && openExternalLink(glacierDropPayload?.learnMoreUrl)}
           onClose={() => handleDialog(true)}
         />
       </Box>

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

@@ -24,14 +24,15 @@ export const SettingsLayout = ({
   const posthog = usePostHogClientContext();
 
   const isGlacierDropEnabled = posthog?.isFeatureFlagEnabled('glacier-drop');
+  const glacierDropPayload = posthog?.getFeatureFlagPayload('glacier-drop');
 
   const sidePanelContent = (
     <div>
       {isGlacierDropEnabled ? (
         <Box mb="$32">
           <MidnightPreLaunchSettingsBanner
             bannerImageUrl={MidnightPreLaunchBannerImage}
-            onCtaButtonClick={() => openExternalLink(process.env.MIDNIGHT_LEARN_MORE_URL)}
+            onCtaButtonClick={() => glacierDropPayload && openExternalLink(glacierDropPayload?.learnMoreUrl)}
           />
         </Box>
       ) : undefined}

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

@@ -83,6 +83,7 @@ export const SettingsWalletBase = <AdditionalDrawers extends string>({
   const isNetworkChoiceEnabled = AVAILABLE_CHAINS.length > 1;
   const authorizedAppsEnabled = process.env.USE_DAPP_CONNECTOR === 'true' && !isSharedWallet;
   const isGlacierDropEnabled = posthog?.isFeatureFlagEnabled('glacier-drop');
+  const glacierDropPayload = posthog?.getFeatureFlagPayload('glacier-drop');
 
   useEffect(() => {
     const openCollateralDrawer = async () => {
@@ -184,7 +185,7 @@ export const SettingsWalletBase = <AdditionalDrawers extends string>({
           <SettingsLink
             description={t('browserView.settings.wallet.midnight.prelaunch.description')}
             data-testid="settings-wallet-midnight-prelaunch-link"
-            onClick={() => openExternalLink(process.env.MIDNIGHT_LEARN_MORE_URL)}
+            onClick={() => glacierDropPayload && openExternalLink(glacierDropPayload?.learnMoreUrl)}
           >
             {t('browserView.settings.wallet.midnight.prelaunch.title')}
           </SettingsLink>

packages/common/src/ui/components/Button/styles.module.scss

@@ -312,7 +312,7 @@ $btn-gap: var(--btn-gap, size_unit(1));
 }
 
 .btn[data-color='gradient-secondary'] {
-  @extend .btn[data-color='gradient'];
+  @extend .btn, [data-color='gradient'];
   background: linear-gradient($btn-gradient2-bg, $btn-gradient2-bg) padding-box, var(--lace-gradient) border-box;
 
   &:hover:not(.loading) {