feat: unlimited intro dialog (#1226)

Co-authored-by: Tyler <[email protected]>

src/App.tsx

@@ -45,6 +45,7 @@ import { config, privyConfig } from '@/lib/wagmi';
 
 import { RestrictionWarning } from './components/RestrictionWarning';
 import { ComplianceStates } from './constants/compliance';
+import { DialogTypes } from './constants/dialogs';
 import { funkitConfig, funkitTheme } from './constants/funkit';
 import { LocalStorageKey } from './constants/localStorage';
 import { useAnalytics } from './hooks/useAnalytics';
@@ -62,10 +63,13 @@ import { testFlags } from './lib/testFlags';
 import LaunchMarket from './pages/LaunchMarket';
 import { AffiliatesPage } from './pages/affiliates/AffiliatesPage';
 import { persistor } from './state/_store';
+import { getIsAccountConnected } from './state/accountSelectors';
 import { appQueryClient } from './state/appQueryClient';
 import { useAppDispatch, useAppSelector } from './state/appTypes';
 import { AppTheme, setAppThemeSetting } from './state/appUiConfigs';
 import { getAppThemeSetting } from './state/appUiConfigsSelectors';
+import { openDialog } from './state/dialogs';
+import { getHasSeenUnlimitedAnnouncement } from './state/dismissableSelectors';
 import breakpoints from './styles/breakpoints';
 import { CommunityChartContainer } from './views/Affiliates/community-chart/ProgramChartContainer';
 
@@ -87,6 +91,8 @@ const Content = () => {
   useCommandMenu();
   usePrefetchedQueries();
   useReferralCode();
+  useUnlimitedLaunchDialog();
+  useUiRefreshMigrations();
 
   const { isTablet, isNotTablet } = useBreakpoints();
   const { chainTokenLabel } = useTokenConfigs();
@@ -106,7 +112,6 @@ const Content = () => {
   }, [location.hash]);
 
   const { dialogAreaRef } = useDialogArea() ?? {};
-  useUiRefreshMigrations();
 
   return (
     <>
@@ -209,6 +214,19 @@ const wrapProvider = (Component: React.ComponentType<any>, props?: any) => {
   );
 };
 
+function useUnlimitedLaunchDialog() {
+  const showUnlimitedAnnouncement = testFlags.pml && testFlags.enableVaults;
+  const hasSeenUnlimitedAnnouncement = useAppSelector(getHasSeenUnlimitedAnnouncement);
+  const isAccountConnected = useAppSelector(getIsAccountConnected);
+
+  const dispatch = useAppDispatch();
+  useEffect(() => {
+    if (isAccountConnected && showUnlimitedAnnouncement && !hasSeenUnlimitedAnnouncement) {
+      dispatch(openDialog(DialogTypes.UnlimitedAnnouncement({})));
+    }
+  }, [dispatch, showUnlimitedAnnouncement, hasSeenUnlimitedAnnouncement, isAccountConnected]);
+}
+
 const providers = [
   wrapProvider(PrivyProvider, {
     appId: import.meta.env.VITE_PRIVY_APP_ID ?? 'dummyappiddummyappiddummy',

src/components/Button.tsx

@@ -107,7 +107,7 @@ const buttonActionVariants = {
     [ButtonStyle.Default]: css`
       --button-textColor: var(--color-text-button);
       --button-backgroundColor: var(--color-accent);
-      --button-border: solid var(--border-width) var(--color-border-white);
+      --button-border: solid var(--border-width) var(--color-accent);
       --button-hover-filter: brightness(var(--hover-filter-variant));
     `,
     [ButtonStyle.WithoutBackground]: css`

src/components/Dialog.tsx

@@ -39,6 +39,7 @@ type ElementProps = {
   preventClose?: boolean;
   slotTrigger?: React.ReactNode;
   slotHeaderAbove?: React.ReactNode;
+  slotHeader?: React.ReactNode;
   slotHeaderInner?: React.ReactNode;
   slotFooter?: React.ReactNode;
   withClose?: boolean;
@@ -83,6 +84,7 @@ export const Dialog = ({
   preventClose,
   slotTrigger,
   slotHeaderAbove,
+  slotHeader,
   slotHeaderInner,
   slotFooter,
   stacked,
@@ -137,6 +139,15 @@ export const Dialog = ({
 
               {slotHeaderInner}
             </$StackedHeaderTopRow>
+          ) : slotHeader ? (
+            <div>
+              {!preventClose && withClose && (
+                <$Close ref={closeButtonRef} $absolute>
+                  <Icon iconName={IconName.Close} />
+                </$Close>
+              )}
+              {slotHeader}
+            </div>
           ) : (
             <$Header $withBorder={hasHeaderBorder} $withBlur={hasHeaderBlur}>
               <div tw="row gap-[--dialog-title-gap]">

src/constants/dialogs.ts

@@ -89,6 +89,7 @@ export type TriggersDialogProps = {
   navigateToMarketOrders: (market: string) => void;
 };
 export type TransferDialogProps = { selectedAsset?: DydxChainAsset };
+export type UnlimitedAnnouncementDialogProps = {};
 export type UnstakeDialogProps = {};
 export type VaultDepositWithdrawDialogProps = { initialType?: 'DEPOSIT' | 'WITHDRAW' };
 export type WithdrawDialogProps = {};
@@ -147,6 +148,7 @@ export const DialogTypes = unionize(
     Trade: ofType<TradeDialogProps>(),
     Transfer: ofType<TransferDialogProps>(),
     Triggers: ofType<TriggersDialogProps>(),
+    UnlimitedAnnouncement: ofType<UnlimitedAnnouncementDialogProps>(),
     Unstake: ofType<UnstakeDialogProps>(),
     VaultDepositWithdraw: ofType<VaultDepositWithdrawDialogProps>(),
     Withdraw: ofType<WithdrawDialogProps>(),

src/constants/unlimitedAnnouncement.ts

@@ -0,0 +1,15 @@
+export enum UnlimitedAnnouncementDialogSteps {
+  Announcement = 'Announcement',
+  MarketListings = 'MarketListings',
+  MegaVault = 'MegaVault',
+  AffiliatesProgram = 'Affiliates',
+  Incentives = 'Incentives',
+}
+
+export const unlimitedAnnouncementStepOrder = [
+  UnlimitedAnnouncementDialogSteps.Announcement,
+  UnlimitedAnnouncementDialogSteps.MarketListings,
+  UnlimitedAnnouncementDialogSteps.MegaVault,
+  UnlimitedAnnouncementDialogSteps.AffiliatesProgram,
+  UnlimitedAnnouncementDialogSteps.Incentives,
+] as const;

src/hooks/useAppThemeAndColorMode.tsx

@@ -19,10 +19,8 @@ export const AppThemeAndColorModeProvider = ({ ...props }) => {
   return <ThemeProvider theme={useAppThemeAndColorModeContext()} {...props} />;
 };
 
-export const useAppThemeAndColorModeContext = () => {
+export const useCurrentAppThemeSetting = () => {
   const themeSetting: AppThemeSetting = useAppSelector(getAppThemeSetting);
-  const colorMode: AppColorMode = useAppSelector(getAppColorMode);
-
   const darkModePref = globalThis.matchMedia('(prefers-color-scheme: dark)');
 
   const [systemPreference, setSystemPreference] = useState(
@@ -54,6 +52,11 @@ export const useAppThemeAndColorModeContext = () => {
         return systemPreference;
     }
   };
+  return getThemeFromSetting();
+};
 
-  return Themes[getThemeFromSetting()][colorMode];
+export const useAppThemeAndColorModeContext = () => {
+  const colorMode: AppColorMode = useAppSelector(getAppColorMode);
+  const theme = useCurrentAppThemeSetting();
+  return Themes[theme][colorMode];
 };

src/layout/DialogManager.tsx

@@ -44,6 +44,7 @@ import { StakingRewardDialog } from '@/views/dialogs/StakingRewardDialog';
 import { TradeDialog } from '@/views/dialogs/TradeDialog';
 import { TransferDialog } from '@/views/dialogs/TransferDialog';
 import { TriggersDialog } from '@/views/dialogs/TriggersDialog';
+import { UnlimitedAnnouncementDialog } from '@/views/dialogs/UnlimitedAnnouncementDialog/UnlimitedAnnouncementDialog';
 import { UnstakeDialog } from '@/views/dialogs/UnstakeDialog';
 import { VaultDepositWithdrawDialog } from '@/views/dialogs/VaultDepositWithdrawDialog';
 import { WithdrawDialog } from '@/views/dialogs/WithdrawDialog';
@@ -112,6 +113,7 @@ export const DialogManager = () => {
     Trade: (args) => <TradeDialog {...args} {...modalProps} />,
     Triggers: (args) => <TriggersDialog {...args} {...modalProps} />,
     Transfer: (args) => <TransferDialog {...args} {...modalProps} />,
+    UnlimitedAnnouncement: (args) => <UnlimitedAnnouncementDialog {...args} {...modalProps} />,
     Unstake: (args) => <UnstakeDialog {...args} {...modalProps} />,
     VaultDepositWithdraw: (args) => <VaultDepositWithdrawDialog {...args} {...modalProps} />,
     Withdraw: (args) => <WithdrawDialog {...args} {...modalProps} />,

src/layout/Header/HeaderDesktop.tsx

@@ -212,7 +212,7 @@ export const HeaderDesktop = () => {
               shape={ButtonShape.Pill}
               size={ButtonSize.XSmall}
               action={
-                MustBigNumber(availableBalance?.current).gt(0)
+                !availableBalance || MustBigNumber(availableBalance.current).gt(0)
                   ? ButtonAction.Secondary
                   : ButtonAction.Primary
               }

src/state/affiliates.ts

@@ -1,6 +1,7 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 
+// NOTE: This app slice is persisted via redux-persist. Changes to this type may require migrations.
 export interface AffiliatesState {
   latestReferrer: string | undefined;
 }

src/state/appUiConfigs.ts

@@ -29,6 +29,7 @@ export enum OtherPreference {
   ReverseLayout = 'ReverseLayout',
 }
 
+// NOTE: This app slice is persisted via redux-persist. Changes to this type may require migrations.
 export interface AppUIConfigsState {
   appThemeSetting: AppThemeSetting;
   appColorMode: AppColorMode;

src/state/dismissable.ts

@@ -1,15 +1,18 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 
+// NOTE: This app slice is persisted via redux-persist. Changes to this type may require migrations.
 export interface DismissableState {
   hasSeenPredictionMarketIntroDialog: boolean;
   dismissedAffiliateBanner: boolean;
+  hasSeenUnlimitedAnnouncement: boolean;
   hasDismissedPmlBanner: boolean;
 }
 
 const initialState: DismissableState = {
   hasSeenPredictionMarketIntroDialog: false,
   dismissedAffiliateBanner: false,
+  hasSeenUnlimitedAnnouncement: false,
   hasDismissedPmlBanner: false,
 };
 
@@ -23,6 +26,9 @@ export const dismissableSlice = createSlice({
     setDismissedAffiliateBanner: (state, action: PayloadAction<boolean>) => {
       state.dismissedAffiliateBanner = action.payload;
     },
+    markUnlimitedAnnouncementSeen: (state) => {
+      state.hasSeenUnlimitedAnnouncement = true;
+    },
     setHasDismissedPmlBanner: (state, action: PayloadAction<boolean>) => {
       state.hasDismissedPmlBanner = action.payload;
     },
@@ -32,5 +38,6 @@ export const dismissableSlice = createSlice({
 export const {
   setHasSeenPredictionMarketIntroDialog,
   setDismissedAffiliateBanner,
+  markUnlimitedAnnouncementSeen,
   setHasDismissedPmlBanner,
 } = dismissableSlice.actions;

src/state/dismissableSelectors.ts

@@ -6,5 +6,8 @@ export const getHasSeenPredictionMarketIntroDialog = (state: RootState) =>
 export const getDismissedAffiliateBanner = (state: RootState) =>
   state.dismissable.dismissedAffiliateBanner;
 
+export const getHasSeenUnlimitedAnnouncement = (state: RootState) =>
+  state.dismissable.hasSeenUnlimitedAnnouncement;
+
 export const getHasDismissedPmlBanner = (state: RootState) =>
   state.dismissable.hasDismissedPmlBanner;

src/state/funkitDeposits.ts

@@ -3,6 +3,7 @@ import { createSlice } from '@reduxjs/toolkit';
 
 import { FunkitDeposit } from '@/constants/funkit';
 
+// NOTE: This app slice is persisted via redux-persist. Changes to this type may require migrations.
 export interface FunkitDepositsState {
   deposits: Record<string, FunkitDeposit>;
 }

src/state/tradingView.ts

@@ -1,6 +1,7 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 
+// NOTE: This app slice is persisted via redux-persist. Changes to this type may require migrations.
 export interface TradingViewState {
   chartConfig?: object;
   launchableMarketsChartConfig?: object;

src/state/wallet.ts

@@ -3,6 +3,7 @@ import { createSlice } from '@reduxjs/toolkit';
 
 import { WalletInfo, WalletNetworkType } from '@/constants/wallets';
 
+// NOTE: This app slice is persisted via redux-persist. Changes to this type may require migrations.
 export interface WalletState {
   sourceAccount: {
     address?: string;

src/styles/text.css

@@ -46,6 +46,7 @@
   --font-medium-regular: var(--fontWeight-regular) var(--fontSize-medium) var(--fontFamily-base);
   --font-medium-book: var(--fontWeight-book) var(--fontSize-medium) var(--fontFamily-base);
   --font-medium-medium: var(--fontWeight-medium) var(--fontSize-medium) var(--fontFamily-base);
+  --font-medium-bold: var(--fontWeight-bold) var(--fontSize-medium) var(--fontFamily-base);
 
   --font-large-regular: var(--fontWeight-regular) var(--fontSize-large) var(--fontFamily-base);
   --font-large-book: var(--fontWeight-book) var(--fontSize-large) var(--fontFamily-base);

src/views/dialogs/UnlimitedAnnouncementDialog/CurrentStepDots.tsx

@@ -0,0 +1,28 @@
+import styled, { css } from 'styled-components';
+
+import {
+  UnlimitedAnnouncementDialogSteps,
+  unlimitedAnnouncementStepOrder,
+} from '@/constants/unlimitedAnnouncement';
+
+export const CurrentStepDots = ({
+  currentStep,
+}: {
+  currentStep: UnlimitedAnnouncementDialogSteps;
+}) => (
+  <div tw="flex justify-center gap-0.5">
+    {unlimitedAnnouncementStepOrder.map((step) =>
+      step !== UnlimitedAnnouncementDialogSteps.Announcement ? (
+        <$Dot key={step} $highlight={step === currentStep} />
+      ) : undefined
+    )}
+  </div>
+);
+
+const $Dot = styled.div<{ $highlight: boolean }>`
+  border-radius: 50%;
+  height: 0.4rem;
+  width: 0.4rem;
+  background-color: ${({ $highlight }) =>
+    $highlight ? css`var(--color-text-2);` : css`var(--color-text-0);`};
+`;