Merge branch 'main' into tina/disconnected-state-affiliates-page

package.json

@@ -57,7 +57,7 @@
     "@cosmjs/stargate": "^0.32.1",
     "@cosmjs/tendermint-rpc": "^0.32.1",
     "@datadog/browser-logs": "^5.23.3",
-    "@dydxprotocol/v4-abacus": "1.13.16",
+    "@dydxprotocol/v4-abacus": "1.13.21",
     "@dydxprotocol/v4-client-js": "1.12.2",
     "@dydxprotocol/v4-localization": "^1.1.240",
     "@dydxprotocol/v4-proto": "^7.0.0-dev.0",

public/smartbanner.html

@@ -10,6 +10,7 @@
     <meta name="smartbanner:button" content="VIEW">
     <meta name="smartbanner:close-label" content="Close">
     <meta name="smartbanner:exclude-user-agent-regex" content="^.*(Windows NT|Intel Mac OS X).*$">
+    <meta name="smartbanner:disable-positioning" content="true" />
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/smartbanner.min.js"></script>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/smartbanner.min.css" rel="stylesheet">
     <!-- Smartbanner: End configuration -->

src/App.tsx

@@ -1,4 +1,4 @@
-import { lazy, Suspense, useMemo } from 'react';
+import { lazy, Suspense, useEffect, useMemo } from 'react';
 
 import isPropValid from '@emotion/is-prop-valid';
 import { FunkitProvider } from '@funkit/connect';
@@ -46,11 +46,13 @@ import { config, privyConfig } from '@/lib/wagmi';
 import { RestrictionWarning } from './components/RestrictionWarning';
 import { ComplianceStates } from './constants/compliance';
 import { funkitConfig, funkitTheme } from './constants/funkit';
+import { LocalStorageKey } from './constants/localStorage';
 import { useAnalytics } from './hooks/useAnalytics';
 import { useBreakpoints } from './hooks/useBreakpoints';
 import { useCommandMenu } from './hooks/useCommandMenu';
 import { useComplianceState } from './hooks/useComplianceState';
 import { useInitializePage } from './hooks/useInitializePage';
+import { useLocalStorage } from './hooks/useLocalStorage';
 import { usePrefetchedQueries } from './hooks/usePrefetchedQueries';
 import { useReferralCode } from './hooks/useReferralCode';
 import { useShouldShowFooter } from './hooks/useShouldShowFooter';
@@ -61,6 +63,9 @@ import LaunchMarket from './pages/LaunchMarket';
 import { AffiliatesPage } from './pages/affiliates/AffiliatesPage';
 import { persistor } from './state/_store';
 import { appQueryClient } from './state/appQueryClient';
+import { useAppDispatch, useAppSelector } from './state/appTypes';
+import { AppTheme, setAppThemeSetting } from './state/appUiConfigs';
+import { getAppThemeSetting } from './state/appUiConfigsSelectors';
 import breakpoints from './styles/breakpoints';
 import { CommunityChartContainer } from './views/Affiliates/community-chart/ProgramChartContainer';
 
@@ -101,6 +106,7 @@ const Content = () => {
   }, [location.hash]);
 
   const { dialogAreaRef } = useDialogArea() ?? {};
+  useUiRefreshMigrations();
 
   return (
     <>
@@ -110,7 +116,7 @@ const Content = () => {
         isShowingFooter={isShowingFooter}
         showRestrictionWarning={showRestrictionWarning}
       >
-        {isNotTablet && <HeaderDesktop />}
+        {isShowingHeader && <HeaderDesktop />}
         {showRestrictionWarning && <RestrictionWarning />}
         <$Main>
           <Suspense fallback={<LoadingSpace id="main" />}>
@@ -178,6 +184,24 @@ const Content = () => {
   );
 };
 
+function useUiRefreshMigrations() {
+  const themeSetting = useAppSelector(getAppThemeSetting);
+  const dispatch = useAppDispatch();
+  const { uiRefresh } = testFlags;
+  const [seenUiRefresh, setSeenUiRefresh] = useLocalStorage({
+    key: LocalStorageKey.HasSeenUiRefresh,
+    defaultValue: false,
+  });
+  useEffect(() => {
+    if (uiRefresh && !seenUiRefresh) {
+      setSeenUiRefresh(true);
+      if (themeSetting === AppTheme.Classic) {
+        dispatch(setAppThemeSetting(AppTheme.Dark));
+      }
+    }
+  }, [themeSetting, seenUiRefresh, uiRefresh, dispatch, setSeenUiRefresh]);
+}
+
 const wrapProvider = (Component: React.ComponentType<any>, props?: any) => {
   // eslint-disable-next-line react/display-name
   return ({ children }: { children: React.ReactNode }) => (
@@ -286,9 +310,9 @@ const $Content = styled.div<{
 
   ${layoutMixins.withOuterAndInnerBorders}
   display: grid;
-  ${({ showRestrictionWarning }) => css`
+  ${({ showRestrictionWarning, isShowingHeader }) => css`
     grid-template:
-      'Header' var(--page-currentHeaderHeight)
+      ${isShowingHeader ? css`'Header' var(--page-currentHeaderHeight)` : ''}
       ${showRestrictionWarning ? css`'RestrictionWarning' min-content` : ''}
       'Main' minmax(min-content, 1fr)
       'Footer' var(--page-currentFooterHeight)

src/components/AlertMessage.tsx

@@ -74,6 +74,7 @@ const AlertContainer = styled.div<StyleProps>`
 
   overflow: auto;
   position: relative;
+  min-height: 2rem;
   max-height: 12.5rem;
   gap: 0.25em;
 

src/constants/dialogs.ts

@@ -44,7 +44,6 @@ export type GeoComplianceDialogProps = {};
 export type GlobalCommandDialogProps = {};
 export type HelpDialogProps = {};
 export type ExternalNavKeplrDialogProps = {};
-export type LaunchMarketDialogProps = { defaultLaunchableMarketId?: string };
 export type ManageFundsDialogProps = { selectedTransferType?: string };
 export type MnemonicExportDialogProps = {};
 export type MobileDownloadDialogProps = { mobileAppUrl: string };
@@ -126,7 +125,6 @@ export const DialogTypes = unionize(
     GeoCompliance: ofType<GeoComplianceDialogProps>(),
     GlobalCommand: ofType<GlobalCommandDialogProps>(),
     Help: ofType<HelpDialogProps>(),
-    LaunchMarket: ofType<LaunchMarketDialogProps>(),
     ManageFunds: ofType<ManageFundsDialogProps>(),
     MnemonicExport: ofType<MnemonicExportDialogProps>(),
     MobileDownload: ofType<MobileDownloadDialogProps>(),

src/constants/launchableMarkets.ts

@@ -0,0 +1,9 @@
+import { timeUnits } from './time';
+
+export enum LaunchMarketStatus {
+  PENDING,
+  FAILURE,
+  SUCCESS,
+}
+
+export const ESTIMATED_LAUNCH_TIMEOUT = timeUnits.second * 30;

src/constants/localStorage.ts

@@ -26,6 +26,7 @@ export enum LocalStorageKey {
   SelectedNetwork = 'dydx.SelectedNetwork',
   SelectedTradeLayout = 'dydx.SelectedTradeLayout',
 
+  HasSeenUiRefresh = 'dydx.HasSeenUiRefresh',
   // Discoverability
   HasSeenElectionBannerTRUMPWIN = 'dydx.HasSeenElectionBannerTRUMPWIN',
   HasSeenTradeFormMessageTRUMPWIN = 'dydx.HasSeenTradeFormMessageTRUMPWIN',

src/hooks/useCurrentMarketId.ts

@@ -19,7 +19,11 @@ import { closeDialogInTradeBox, openDialog } from '@/state/dialogs';
 import { getActiveTradeBoxDialog } from '@/state/dialogsSelectors';
 import { getHasSeenPredictionMarketIntroDialog } from '@/state/dismissableSelectors';
 import { setCurrentMarketId } from '@/state/perpetuals';
-import { getMarketIds, getMarketOraclePrice } from '@/state/perpetualsSelectors';
+import {
+  getLaunchedMarketIds,
+  getMarketIds,
+  getMarketOraclePrice,
+} from '@/state/perpetualsSelectors';
 
 import abacusStateManager from '@/lib/abacus';
 import { testFlags } from '@/lib/testFlags';
@@ -41,6 +45,8 @@ export const useCurrentMarketId = () => {
   const activeTradeBoxDialog = useAppSelector(getActiveTradeBoxDialog);
   const hasLoadedLaunchableMarkets = launchableMarkets.data.length > 0;
   const hasSeenPredictionMarketIntroDialog = useAppSelector(getHasSeenPredictionMarketIntroDialog);
+  const launchedMarketIds = useAppSelector(getLaunchedMarketIds, shallowEqual);
+
   const { filteredMarkets: predictionMarkets } = useMarketsData({
     filter: MarketFilters.PREDICTION_MARKET,
     hideUnlaunchedMarkets: true,
@@ -66,10 +72,21 @@ export const useCurrentMarketId = () => {
   const isViewingUnlaunchedMarket = useMemo(() => {
     if (!hasMarketIds || !hasLoadedLaunchableMarkets || !testFlags.pml) return false;
 
+    // Continue displaying unlaunched market view if marketId is in launchedMarketIds state
+    if (marketId && launchedMarketIds.includes(marketId)) {
+      return true;
+    }
+
     return launchableMarkets.data.some((market) => {
       return market.id === marketId;
     });
-  }, [hasLoadedLaunchableMarkets, hasMarketIds, marketId, launchableMarkets.data]);
+  }, [
+    hasLoadedLaunchableMarkets,
+    hasMarketIds,
+    launchedMarketIds,
+    launchableMarkets.data,
+    marketId,
+  ]);
 
   const isViewingPredictionMarket = useMemo(() => {
     return predictionMarkets.some((market) => market.id === marketId);

src/hooks/useCustomNotification.ts

@@ -5,17 +5,25 @@ import { DEFAULT_TOAST_AUTO_CLOSE_MS, NotificationDisplayData } from '@/constant
 import { useAppDispatch } from '@/state/appTypes';
 import { addCustomNotification } from '@/state/notifications';
 
+type CustomNoticationOptions = {
+  id: string;
+  toastDuration?: number;
+};
+
 export const useCustomNotification = () => {
   const dispatch = useAppDispatch();
 
   const notify = useCallback(
-    (customNotification: Omit<NotificationDisplayData, 'groupKey'>) => {
-      const id = Date.now().toString();
+    (
+      customNotification: Omit<NotificationDisplayData, 'groupKey'>,
+      options?: CustomNoticationOptions
+    ) => {
+      const id = options?.id ?? Date.now().toString();
       dispatch(
         addCustomNotification({
           id,
           displayData: {
-            toastDuration: DEFAULT_TOAST_AUTO_CLOSE_MS,
+            toastDuration: options?.toastDuration ?? DEFAULT_TOAST_AUTO_CLOSE_MS,
             groupKey: id,
             ...customNotification,
           },

src/hooks/useLaunchableMarkets.ts

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 
 import { useQueries, useQuery } from '@tanstack/react-query';
-import { shallowEqual } from 'react-redux';
 
 import {
   MetadataServiceAsset,
@@ -11,14 +10,13 @@ import {
 } from '@/constants/assetMetadata';
 import { timeUnits } from '@/constants/time';
 
-import { useAppSelector } from '@/state/appTypes';
-import { getMarketIds } from '@/state/perpetualsSelectors';
-
 import metadataClient from '@/clients/metadataService';
 import { getAssetFromMarketId } from '@/lib/assetUtils';
 import { getTickSizeDecimalsFromPrice } from '@/lib/numbers';
 import { mapMetadataServiceCandles } from '@/lib/tradingView/utils';
 
+import { useDydxClient } from './useDydxClient';
+
 const ASSETS_TO_REMOVE = ['USDC', 'USDT'];
 
 export const useMetadataService = () => {
@@ -102,7 +100,18 @@ export const useMetadataServiceAssetFromId = (marketId?: string) => {
 };
 
 export const useLaunchableMarkets = () => {
-  const marketIds = useAppSelector(getMarketIds, shallowEqual);
+  const { requestAllPerpetualMarkets } = useDydxClient();
+
+  const perpetualMarketsFetch = useQuery({
+    queryKey: ['requestAllPerpetualMarkets'],
+    queryFn: requestAllPerpetualMarkets,
+    refetchInterval: timeUnits.minute,
+    staleTime: timeUnits.minute,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  });
+
   const metadataServiceData = useMetadataService();
 
   const filteredPotentialMarkets: { id: string; asset: string }[] = useMemo(() => {
@@ -114,9 +123,9 @@ export const useLaunchableMarkets = () => {
     });
 
     return assets.filter(({ id }) => {
-      return !marketIds.includes(id);
+      return !perpetualMarketsFetch.data?.[id];
     });
-  }, [marketIds, metadataServiceData.data]);
+  }, [perpetualMarketsFetch.data, metadataServiceData.data]);
 
   return {
     ...metadataServiceData,