diff --git a/src/constants/dialogs.ts b/src/constants/dialogs.ts index 28c3018af..15b8c5f44 100644 --- a/src/constants/dialogs.ts +++ b/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(), Criteria: ofType(), Deposit: ofType(), + /* TODO: rename Deposit2 to Deposit once old deposit flow is deprecated */ + Deposit2: ofType(), DisconnectWallet: ofType(), DisplaySettings: ofType(), ExchangeOffline: ofType(), diff --git a/src/layout/DialogManager.tsx b/src/layout/DialogManager.tsx index d9dd3c5bd..ce4d7bbe8 100644 --- a/src/layout/DialogManager.tsx +++ b/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) => , ConfirmPendingDeposit: (args) => , Deposit: (args) => , + Deposit2: (args) => , DisconnectWallet: (args) => , DisplaySettings: (args) => , ExchangeOffline: (args) => , diff --git a/src/layout/Header/HeaderDesktop.tsx b/src/layout/Header/HeaderDesktop.tsx index b8ca7b5ba..bed64d4f6 100644 --- a/src/layout/Header/HeaderDesktop.tsx +++ b/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 })} diff --git a/src/lib/testFlags.ts b/src/lib/testFlags.ts index d7972c798..d1ff4d26c 100644 --- a/src/lib/testFlags.ts +++ b/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(); diff --git a/src/views/dialogs/DepositDialog2/DepositDialog2.tsx b/src/views/dialogs/DepositDialog2/DepositDialog2.tsx new file mode 100644 index 000000000..95280c5e1 --- /dev/null +++ b/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) => { + const { isMobile } = useBreakpoints(); + const stringGetter = useStringGetter(); + + return ( + + New deposit flow goes here! + + ); +};