add placeholder for new deposit flow

src/constants/dialogs.ts

@@ -85,6 +85,7 @@ export type UnlimitedAnnouncementDialogProps = {};
 export type UnstakeDialogProps = {};
 export type VaultDepositWithdrawDialogProps = { initialType?: 'DEPOSIT' | 'WITHDRAW' };
 export type WithdrawDialogProps = {};
+export type DepositDialog2Props = {};
 export type WithdrawalGatedDialogProps = {
   transferType: 'withdrawal' | 'transfer';
   estimatedUnblockTime?: string | null;
@@ -108,6 +109,8 @@ export const DialogTypes = unionize(
     ConfirmPendingDeposit: ofType<ConfirmPendingDepositDialogProps>(),
     Criteria: ofType<CriteriaDialogProps>(),
     Deposit: ofType<DepositDialogProps>(),
+    /* TODO: rename Deposit2 to Deposit once old deposit flow is deprecated */
+    Deposit2: ofType<DepositDialog2Props>(),
     DisconnectWallet: ofType<DisconnectWalletDialogProps>(),
     DisplaySettings: ofType<DisplaySettingsDialogProps>(),
     ExchangeOffline: ofType<ExchangeOfflineDialogProps>(),

src/layout/DialogManager.tsx

@@ -14,6 +14,7 @@ import { ClosePositionDialog } from '@/views/dialogs/ClosePositionDialog';
 import { ComplianceConfigDialog } from '@/views/dialogs/ComplianceConfigDialog';
 import { ConfirmPendingDepositDialog } from '@/views/dialogs/ConfirmPendingDepositDialog';
 import { DepositDialog } from '@/views/dialogs/DepositDialog';
+import { DepositDialog2 } from '@/views/dialogs/DepositDialog2/DepositDialog2';
 import { FillDetailsDialog } from '@/views/dialogs/DetailsDialog/FillDetailsDialog';
 import { OrderDetailsDialog } from '@/views/dialogs/DetailsDialog/OrderDetailsDialog';
 import { DisconnectDialog } from '@/views/dialogs/DisconnectDialog';
@@ -81,6 +82,7 @@ export const DialogManager = React.memo(() => {
     ComplianceConfig: (args) => <ComplianceConfigDialog {...args} {...modalProps} />,
     ConfirmPendingDeposit: (args) => <ConfirmPendingDepositDialog {...args} {...modalProps} />,
     Deposit: (args) => <DepositDialog {...args} {...modalProps} />,
+    Deposit2: (args) => <DepositDialog2 {...args} {...modalProps} />,
     DisconnectWallet: (args) => <DisconnectDialog {...args} {...modalProps} />,
     DisplaySettings: (args) => <DisplaySettingsDialog {...args} {...modalProps} />,
     ExchangeOffline: (args) => <ExchangeOfflineDialog {...args} {...modalProps} />,

src/layout/Header/HeaderDesktop.tsx

@@ -40,6 +40,7 @@ import { openDialog } from '@/state/dialogs';
 
 import { isTruthy } from '@/lib/isTruthy';
 import { MustBigNumber } from '@/lib/numbers';
+import { testFlags } from '@/lib/testFlags';
 
 export const HeaderDesktop = () => {
   const stringGetter = useStringGetter();
@@ -195,7 +196,15 @@ export const HeaderDesktop = () => {
                   ? ButtonAction.Secondary
                   : ButtonAction.Primary
               }
-              onClick={() => dispatch(openDialog(DialogTypes.Deposit({})))}
+              onClick={() => {
+                dispatch(
+                  openDialog(
+                    testFlags.showNewDepositFlow
+                      ? DialogTypes.Deposit2({})
+                      : DialogTypes.Deposit({})
+                  )
+                );
+              }}
               state={{ isDisabled: !dydxAccounts }}
             >
               {stringGetter({ key: STRING_KEYS.DEPOSIT })}

src/lib/testFlags.ts

@@ -52,13 +52,13 @@ class TestFlags {
     return this.queryParams.ref;
   }
 
-  get onboardingRewrite() {
-    return !!this.queryParams.onboarding_rewrite;
-  }
-
   get showInstantDepositToggle() {
     return !!this.queryParams.funkit_toggle;
   }
+
+  get showNewDepositFlow() {
+    return !!this.queryParams.deposit_rewrite;
+  }
 }
 
 export const testFlags = new TestFlags();

src/views/dialogs/DepositDialog2/DepositDialog2.tsx

@@ -0,0 +1,24 @@
+import { DepositDialog2Props, DialogProps } from '@/constants/dialogs';
+import { STRING_KEYS } from '@/constants/localization';
+
+import { useBreakpoints } from '@/hooks/useBreakpoints';
+import { useStringGetter } from '@/hooks/useStringGetter';
+
+import { Dialog, DialogPlacement } from '@/components/Dialog';
+
+export const DepositDialog2 = ({ setIsOpen }: DialogProps<DepositDialog2Props>) => {
+  const { isMobile } = useBreakpoints();
+  const stringGetter = useStringGetter();
+
+  return (
+    <Dialog
+      isOpen
+      hasHeaderBorder
+      setIsOpen={setIsOpen}
+      title={stringGetter({ key: STRING_KEYS.DEPOSIT })}
+      placement={isMobile ? DialogPlacement.FullScreen : DialogPlacement.Default}
+    >
+      New deposit flow goes here!
+    </Dialog>
+  );
+};