chore: sync/upstream main 12 15 2025 (#15)

* feat: add Liquidation Rebates banner and update No Fee December string (dydxprotocol#2002)

* fix: update liq competition to be monthly (dydxprotocol#2004)

* feat: funding comparison link in menu (dydxprotocol#2005)

* feat: use new fee rebate leaderboard (dydxprotocol#2006)

* fix: initial state of leaderboard doesn't have price (dydxprotocol#2008)

* fix: modify swap venues and add options (dydxprotocol#2003)

Co-authored-by: Sam Newby <[email protected]>

* feat: spot (dydxprotocol#1933)

Co-authored-by: Kefan Cao <[email protected]>
Co-authored-by: Kefan Cao <[email protected]>

* fix: spot tv price formatting (dydxprotocol#2012)

* feat: add dollar rewards (dydxprotocol#2010)

* feat: spot feedback & missing features (dydxprotocol#2014)

* fix: deposit dialog styling (dydxprotocol#2016)

* fix: use instant deposit text when depositing from near instant chains (dydxprotocol#2015)

* fix: update set leverage button styling (dydxprotocol#2013)

* fix: Add cosmos wallet support to transaction supervisor (dydxprotocol#2017)

* fix: remove gated spot route and handle spot index route to default to last viewed token (dydxprotocol#2018)

* fix: make spot search input controlled and hide deposit button if not connected (dydxprotocol#2019)

---------

Co-authored-by: fionn223 <[email protected]>
Co-authored-by: Luka Buzaladze <[email protected]>
Co-authored-by: Kefan Cao <[email protected]>
Co-authored-by: Sam Newby <[email protected]>
Co-authored-by: Paata Kardava <[email protected]>
Co-authored-by: Kefan Cao <[email protected]>
Co-authored-by: Jared Vu <[email protected]>
Co-authored-by: pp346 <[email protected]>

Author: 8 people

public/configs/v1/env.json

@@ -53,7 +53,6 @@ import { useAnalytics } from './hooks/useAnalytics';
 import { useBreakpoints } from './hooks/useBreakpoints';
 import { useCommandMenu } from './hooks/useCommandMenu';
 import { useComplianceState } from './hooks/useComplianceState';
-import { useEnableSpot } from './hooks/useEnableSpot';
 import { useInitializePage } from './hooks/useInitializePage';
 import { useLocalStorage } from './hooks/useLocalStorage';
 import { useReferralCode } from './hooks/useReferralCode';
@@ -112,7 +111,11 @@ const Content = () => {
   const isSimpleUi = useSimpleUiEnabled();
   const { showComplianceBanner } = useComplianceState();
   const isSimpleUiUserMenuOpen = useAppSelector(getIsUserMenuOpen);
-  const isSpotEnabled = useEnableSpot();
+
+  // Track current path in Redux for conditional polling
+  useEffect(() => {
+    dispatch(setCurrentPath(location.pathname));
+  }, [location.pathname, dispatch]);
 
   // Track current path in Redux for conditional polling
   useEffect(() => {
@@ -213,9 +216,10 @@ const Content = () => {
                   <Route path={AppRoute.Trade} element={<TradePage />} />
                 </Route>
 
-                {isSpotEnabled && (
-                  <Route path={`${AppRoute.Spot}/:tokenMint`} element={<SpotPage />} />
-                )}
+                <Route path={AppRoute.Spot}>
+                  <Route path=":tokenMint" element={<SpotPage />} />
+                  <Route index element={<SpotPage />} />
+                </Route>
 
                 <Route path={AppRoute.Markets}>
                   <Route path={AppRoute.Markets} element={<MarketsPage />} />

src/App.tsx

@@ -43,7 +43,7 @@ import {
 import type { RootStore } from '@/state/_store';
 import { store as reduxStore } from '@/state/_store';
 import { getSubaccountId, getUserWalletAddress } from '@/state/accountInfoSelectors';
-import { getSelectedNetwork } from '@/state/appSelectors';
+import { getSelectedDydxChainId, getSelectedNetwork } from '@/state/appSelectors';
 import { createAppSelector } from '@/state/appTypes';
 import {
   cancelAllSubmitted,
@@ -54,7 +54,7 @@ import {
   placeOrderSubmitted,
   placeOrderTimeout,
 } from '@/state/localOrders';
-import { getLocalWalletNonce } from '@/state/walletSelectors';
+import { getLocalWalletNonce, selectIsKeplrConnected } from '@/state/walletSelectors';
 
 import { track } from '@/lib/analytics/analytics';
 import { calc } from '@/lib/do';
@@ -79,13 +79,15 @@ import { StateConditionNotifier, Tracker } from './StateConditionNotifier';
 import { getSimpleOrderStatus } from './calculators/orders';
 import { TradeFormPayload } from './forms/trade/types';
 import { PlaceOrderMarketInfo, PlaceOrderPayload } from './forms/triggers/types';
+import { getLazyLocalWallet } from './lib/lazyDynamicLibs';
 import { CompositeClientManager } from './rest/lib/compositeClientManager';
 import { estimateLiveValidatorHeight } from './selectors/apiStatus';
 
 interface TransactionSupervisorShared {
   store: RootStore;
   compositeClientManager: typeof CompositeClientManager;
   stateNotifier: StateConditionNotifier;
+  maybeDydxLocalWallet?: LocalWallet | null;
 }
 
 const selectOrdersAndFills = createAppSelector(
@@ -111,10 +113,13 @@ export const SHORT_TERM_ORDER_DURATION_SAFETY_MARGIN = 5;
 export class AccountTransactionSupervisor {
   private store: RootStore;
 
+  private cachedDydxLocalWallet: LocalWallet | null;
+
   private shared: TransactionSupervisorShared;
 
   constructor(store: RootStore, compositeClientManager: typeof CompositeClientManager) {
     this.store = store;
+    this.cachedDydxLocalWallet = null;
 
     this.shared = {
       compositeClientManager,
@@ -130,9 +135,11 @@ export class AccountTransactionSupervisor {
     tracking?: Tracker<P, Q>
   ) {
     return async () => {
+      const maybeDydxLocalWallet = await this.getCosmosLocalWallet();
+
       const result = await taskBuilder({ payload: basePayload })
         .with<AddSharedContextMiddlewareProps>(
-          addSharedContextMiddleware(nameForLogging, this.shared)
+          addSharedContextMiddleware(nameForLogging, { ...this.shared, maybeDydxLocalWallet })
         )
         .with<ValidateLocalWalletMiddlewareProps>(validateLocalWalletMiddleware())
         .with<StateTrackingProps<Q>>(stateTrackingMiddleware(tracking))
@@ -153,6 +160,28 @@ export class AccountTransactionSupervisor {
     };
   }
 
+  private async getCosmosLocalWallet() {
+    const state = this.store.getState();
+    const isKeplrConnected = selectIsKeplrConnected(state);
+
+    if (isKeplrConnected && window.keplr) {
+      if (this.cachedDydxLocalWallet) {
+        return this.cachedDydxLocalWallet;
+      }
+
+      const chainId = getSelectedDydxChainId(state);
+      const dydxOfflineSigner = await window.keplr.getOfflineSigner(chainId);
+      const dydxLocalWallet = await (
+        await getLazyLocalWallet()
+      ).fromOfflineSigner(dydxOfflineSigner);
+
+      this.cachedDydxLocalWallet = dydxLocalWallet;
+      return dydxLocalWallet;
+    }
+
+    return undefined;
+  }
+
   private createCancelOrderPayload(orderId: string): CancelOrderPayload | undefined {
     const state = this.store.getState();
     const orders = BonsaiCore.account.allOrders.data(state);
@@ -570,10 +599,15 @@ export class AccountTransactionSupervisor {
     payloadArg: PlaceOrderPayload,
     source: TradeMetadataSource
   ): Promise<OperationResult<any>> {
+    const maybeDydxLocalWallet = await this.getCosmosLocalWallet();
+
     return (
       taskBuilder({ payload: payloadArg })
         .with<AddSharedContextMiddlewareProps>(
-          addSharedContextMiddleware('AccountTransactionSupervisor/placeOrderWrapper', this.shared)
+          addSharedContextMiddleware('AccountTransactionSupervisor/placeOrderWrapper', {
+            ...this.shared,
+            maybeDydxLocalWallet,
+          })
         )
         .with<ValidateLocalWalletMiddlewareProps>(validateLocalWalletMiddleware())
         // fully prepare/augment the trade payload
@@ -780,10 +814,14 @@ export class AccountTransactionSupervisor {
 
   public async closeAllPositions() {
     track(AnalyticsEvents.TradeCloseAllPositionsClick({}));
+    const maybeDydxLocalWallet = await this.getCosmosLocalWallet();
 
     return taskBuilder({ payload: {} })
       .with<AddSharedContextMiddlewareProps>(
-        addSharedContextMiddleware('AccountTransactionSupervisor/closeAllPositions', this.shared)
+        addSharedContextMiddleware('AccountTransactionSupervisor/closeAllPositions', {
+          ...this.shared,
+          maybeDydxLocalWallet,
+        })
       )
       .with<ValidateLocalWalletMiddlewareProps>(validateLocalWalletMiddleware())
       .with<{ closePayloads: PlaceOrderPayload[] }>(async (context, next) => {
@@ -846,10 +884,15 @@ export class AccountTransactionSupervisor {
     orderId: string;
     withNotification?: boolean;
   }) {
+    const maybeDydxLocalWallet = await this.getCosmosLocalWallet();
+
     return (
       taskBuilder({ payload: { orderId, withNotification } })
         .with<AddSharedContextMiddlewareProps>(
-          addSharedContextMiddleware('AccountTransactionSupervisor/cancelOrder', this.shared)
+          addSharedContextMiddleware('AccountTransactionSupervisor/cancelOrder', {
+            ...this.shared,
+            maybeDydxLocalWallet,
+          })
         )
         .with<ValidateLocalWalletMiddlewareProps>(validateLocalWalletMiddleware())
         // populate order details
@@ -944,10 +987,14 @@ export class AccountTransactionSupervisor {
 
   public async cancelAllOrders({ marketId }: { marketId?: string }) {
     track(AnalyticsEvents.TradeCancelAllOrdersClick({ marketId }));
+    const maybeDydxLocalWallet = await this.getCosmosLocalWallet();
 
     return taskBuilder({ payload: { marketId } })
       .with<AddSharedContextMiddlewareProps>(
-        addSharedContextMiddleware('AccountTransactionSupervisor/cancelAllOrders', this.shared)
+        addSharedContextMiddleware('AccountTransactionSupervisor/cancelAllOrders', {
+          ...this.shared,
+          maybeDydxLocalWallet,
+        })
       )
       .with<ValidateLocalWalletMiddlewareProps>(validateLocalWalletMiddleware())
       .with<{ ordersWithUuids: Array<{ order: SubaccountOrder; uuid: string }> }>(
@@ -1038,6 +1085,8 @@ export class AccountTransactionSupervisor {
     const hasStatefulOperations = isMainOrderStateful || (order.triggersPayloads?.length ?? 0) > 0;
 
     if (hasStatefulOperations) {
+      const maybeDydxLocalWallet = await this.getCosmosLocalWallet();
+
       return (
         taskBuilder({
           payload: {
@@ -1047,10 +1096,10 @@ export class AccountTransactionSupervisor {
           },
         })
           .with<AddSharedContextMiddlewareProps>(
-            addSharedContextMiddleware(
-              'AccountTransactionSupervisor/executeBulkStatefulOrders',
-              this.shared
-            )
+            addSharedContextMiddleware('AccountTransactionSupervisor/executeBulkStatefulOrders', {
+              ...this.shared,
+              maybeDydxLocalWallet,
+            })
           )
           .with<ValidateLocalWalletMiddlewareProps>(validateLocalWalletMiddleware())
           // Prepare payloads with current height and collect cancel/place operations
@@ -1396,6 +1445,10 @@ function validateLocalWalletMiddleware() {
     const state = context.shared.store.getState();
     const localWalletNonce = getLocalWalletNonce(state);
 
+    if (context.shared.maybeDydxLocalWallet) {
+      return next(context);
+    }
+
     if (localWalletNonce == null) {
       const errorMsg = 'No valid local wallet available';
       const errSource = context.fnName;
@@ -1420,14 +1473,16 @@ function addClientAndWalletMiddleware(store: RootStore) {
 
   return createMiddleware<AddClientAndWalletMiddlewareProps, AddSharedContextMiddlewareProps>(
     async (context, next) => {
-      const network = getSelectedNetwork(context.shared.store.getState());
-      const localWalletNonce = getLocalWalletNonce(context.shared.store.getState());
+      const state = context.shared.store.getState();
+      const network = getSelectedNetwork(state);
+      const localWalletNonce = getLocalWalletNonce(state);
 
       const clientConfig = {
         network,
         dispatch: context.shared.store.dispatch,
       };
       const clientWrapper = context.shared.compositeClientManager.use(clientConfig);
+      const maybeDydxLocalWallet = context.shared.maybeDydxLocalWallet;
 
       try {
         if (network !== networkBefore) {
@@ -1436,11 +1491,18 @@ function addClientAndWalletMiddleware(store: RootStore) {
         if (localWalletNonce !== nonceBefore) {
           throw new Error('Local wallet changed before operation execution');
         }
-        if (localWalletNonce == null) {
-          throw new Error('No valid local wallet nonce found');
-        }
 
-        const localWallet = localWalletManager.getLocalWallet(localWalletNonce);
+        const localWallet = calc(() => {
+          if (maybeDydxLocalWallet) {
+            return maybeDydxLocalWallet;
+          }
+
+          if (localWalletNonce == null) {
+            throw new Error('No valid local wallet nonce found');
+          }
+
+          return localWalletManager.getLocalWallet(localWalletNonce);
+        });
 
         if (localWallet == null) {
           throw new Error('Local wallet not initialized or nonce was incorrect.');

src/bonsai/AccountTransactionSupervisor.ts

@@ -10,37 +10,43 @@ import { Icon, IconName } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
 import { Input, InputType, type InputProps } from '@/components/Input';
 
+import { isPresent } from '@/lib/typeUtils';
+
 type ElementProps = {
   onTextChange?: (value: string) => void;
   className?: string;
 };
 
 export type SearchInputProps = ElementProps & InputProps;
 
-export const SearchInput = ({ placeholder, onTextChange, className }: SearchInputProps) => {
-  const [value, setValue] = useState('');
+export const SearchInput = ({ value, placeholder, onTextChange, className }: SearchInputProps) => {
+  const [internalValue, setInternalValue] = useState('');
   const inputRef = useRef<HTMLInputElement | null>(null);
 
+  const isControlled = isPresent(value);
+  const displayValue = isControlled ? String(value) : internalValue;
+
   return (
     <$Search className={className}>
       <$Icon iconName={IconName.Search} />
       <Input
         autoFocus
         ref={inputRef}
-        value={value}
+        value={displayValue}
         type={InputType.Search}
         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-          setValue(e.target.value);
-          onTextChange?.(e.target.value);
+          const newValue = e.target.value;
+          setInternalValue(newValue);
+          onTextChange?.(newValue);
         }}
         placeholder={placeholder}
         tw="max-w-full rounded-0"
       />
-      {value.length > 0 && (
+      {displayValue.length > 0 && (
         <$IconButton
           iconName={IconName.Close}
           onClick={() => {
-            setValue('');
+            setInternalValue('');
             onTextChange?.('');
           }}
           buttonStyle={ButtonStyle.WithoutBackground}

src/components/SearchInput.tsx

@@ -23,6 +23,7 @@ export enum LocalStorageKey {
 
   // UI State
   LastViewedMarket = 'dydx.LastViewedMarket',
+  LastViewedSpotToken = 'dydx.LastViewedSpotToken',
   SelectedLocale = 'dydx.SelectedLocale',
   SelectedNetwork = 'dydx.SelectedNetwork',
   SelectedTradeLayout = 'dydx.SelectedTradeLayout',

src/constants/localStorage.ts

@@ -1,20 +1,37 @@
 import { useEffect } from 'react';
 
-import { useMatch } from 'react-router-dom';
+import { useMatch, useNavigate } from 'react-router-dom';
 
+import { LocalStorageKey } from '@/constants/localStorage';
 import { AppRoute } from '@/constants/routes';
+import { SPOT_DEFAULT_TOKEN_MINT } from '@/constants/spot';
+
+import { useLocalStorage } from '@/hooks/useLocalStorage';
 
 import { useAppDispatch } from '@/state/appTypes';
 import { setCurrentSpotToken } from '@/state/spot';
 
 export const useCurrentSpotToken = () => {
-  const match = useMatch(`/${AppRoute.Spot}/:symbol`);
-  const { symbol } = match?.params ?? {};
+  const navigate = useNavigate();
+  const match = useMatch(`/${AppRoute.Spot}/:tokenMint`);
+  const { tokenMint } = match?.params ?? {};
   const dispatch = useAppDispatch();
 
+  const [lastViewedToken, setLastViewedToken] = useLocalStorage({
+    key: LocalStorageKey.LastViewedSpotToken,
+    defaultValue: SPOT_DEFAULT_TOKEN_MINT,
+  });
+
+  const validTokenMint = tokenMint ?? lastViewedToken;
+
   useEffect(() => {
-    dispatch(setCurrentSpotToken(symbol));
-  }, [symbol, dispatch]);
+    if (!tokenMint) {
+      navigate(`${AppRoute.Spot}/${validTokenMint}`, { replace: true });
+    } else {
+      setLastViewedToken(tokenMint);
+      dispatch(setCurrentSpotToken(tokenMint));
+    }
+  }, [tokenMint, validTokenMint, navigate, dispatch, setLastViewedToken]);
 
-  return { currentSpotToken: symbol };
+  return { currentSpotToken: validTokenMint };
 };

src/hooks/useCurrentSpotToken.ts

@@ -1,12 +1,5 @@
-import { StatsigFlags } from '@/constants/statsig';
-
-import { testFlags } from '@/lib/testFlags';
-
-import { useStatsigGateValue } from './useStatsig';
-
 export const useEnableSpot = () => {
-  const forcedSpot = testFlags.spot;
-  const spotFF = useStatsigGateValue(StatsigFlags.ffSpot);
-
-  return forcedSpot || spotFF;
+  // const forcedSpot = testFlags.spot;
+  // const spotFF = useStatsigGateValue(StatsigFlags.ffSpot);
+  return true;
 };