feat(uirefresh): component refresh - trade box [2/2]

src/components/ToggleGroup.tsx

@@ -23,6 +23,7 @@ type ElementProps<MenuItemValue extends string> = {
   onValueChange: (value: MenuItemValue) => void;
   onInteraction?: () => void;
   ensureSelected?: boolean;
+  disabled?: boolean;
 };
 
 type StyleProps = {
@@ -39,6 +40,7 @@ export const ToggleGroup = forwardRefFn(
       items,
       value,
       ensureSelected = true,
+      disabled = false,
       onValueChange,
       onInteraction,
 
@@ -69,7 +71,8 @@ export const ToggleGroup = forwardRefFn(
         <$ToggleButton
           size={size ?? (isTablet ? ButtonSize.Small : ButtonSize.XSmall)}
           shape={shape}
-          disabled={item.disabled}
+          // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+          disabled={item.disabled || disabled}
           $withSeparators={withSeparators}
           {...buttonProps}
         >
@@ -96,6 +99,7 @@ export const ToggleGroup = forwardRefFn(
         overflow={overflow}
         tw="row gap-[0.33em]"
         $withSeparators={withSeparators}
+        disabled={disabled}
       >
         {slotBefore}
         {withSeparators ? (
@@ -117,6 +121,7 @@ const $Root = styled(Root)<{
   ${({ $withSeparators }) =>
     $withSeparators &&
     css`
+      --separator-padding: 0.5rem;
       align-self: stretch;
     `}
   ${({ overflow }) =>
@@ -136,10 +141,21 @@ const $Label = styled.div`
 `;
 
 const $WithSeparators = styled(WithSeparators)`
-  --separatorHeight-padding: 0.5rem;
+  --separatorHeight-padding: var(--separator-padding);
 `;
 
 const $ToggleButton = styled(ToggleButton)<{ $withSeparators: boolean }>`
+  &[data-disabled] {
+    > * {
+      cursor: not-allowed;
+    }
+  }
+  &:not([data-disabled]) {
+    > * {
+      cursor: pointer;
+    }
+  }
+
   ${({ $withSeparators }) =>
     $withSeparators &&
     css`
@@ -150,5 +166,6 @@ const $ToggleButton = styled(ToggleButton)<{ $withSeparators: boolean }>`
       --button-padding: 0 0.25rem;
 
       width: min-content;
+      max-width: max-content;
     `}
 `;

src/constants/trade.ts

@@ -154,6 +154,7 @@ export const CLEARED_SIZE_INPUTS = {
   amountInput: '',
   usdAmountInput: '',
   leverageInput: '',
+  targetLeverageInput: '',
   balancePercentInput: '',
 };
 

src/lib/abacus/index.ts

@@ -60,7 +60,7 @@ import {
   setTradeFormInputs,
   setTriggerFormInputs,
 } from '@/state/inputs';
-import { getInputTradeOptions, getTransferInputs } from '@/state/inputsSelectors';
+import { getTransferInputs } from '@/state/inputsSelectors';
 
 import { LocaleSeparators } from '../numbers';
 import { testFlags } from '../testFlags';
@@ -165,21 +165,9 @@ class AbacusStateManager {
 
   // ------ Input Values ------ //
   clearTradeInputValues = ({ shouldResetSize }: { shouldResetSize?: boolean } = {}) => {
-    const state = this.store?.getState();
-
-    const { needsTriggerPrice, needsTrailingPercent, needsLimitPrice } =
-      (state && getInputTradeOptions(state)) ?? {};
-
-    if (needsTrailingPercent) {
-      this.setTradeValue({ value: null, field: TradeInputField.trailingPercent });
-    }
-    if (needsTriggerPrice) {
-      this.setTradeValue({ value: null, field: TradeInputField.triggerPrice });
-    }
-
-    if (needsLimitPrice) {
-      this.setTradeValue({ value: null, field: TradeInputField.limitPrice });
-    }
+    this.setTradeValue({ value: null, field: TradeInputField.trailingPercent });
+    this.setTradeValue({ value: null, field: TradeInputField.triggerPrice });
+    this.setTradeValue({ value: null, field: TradeInputField.limitPrice });
 
     this.store?.dispatch(setTradeFormInputs(CLEARED_TRADE_INPUTS));
 
@@ -189,15 +177,12 @@ class AbacusStateManager {
   };
 
   clearTradeInputSizeValues = () => {
-    const state = this.store?.getState();
-    const { needsLeverage } = (state && getInputTradeOptions(state)) ?? {};
     this.setTradeValue({ value: null, field: TradeInputField.size });
     this.setTradeValue({ value: null, field: TradeInputField.usdcSize });
     this.setTradeValue({ value: null, field: TradeInputField.balancePercent });
 
-    if (needsLeverage) {
-      this.setTradeValue({ value: null, field: TradeInputField.leverage });
-    }
+    this.setTradeValue({ value: null, field: TradeInputField.leverage });
+    this.setTradeValue({ value: null, field: TradeInputField.targetLeverage });
 
     this.store?.dispatch(setTradeFormInputs(CLEARED_SIZE_INPUTS));
   };

src/pages/trade/TradeTableSettings.tsx

@@ -105,14 +105,14 @@ export const TradeTableSettings = ({
                 value: MarketTypeFilter.AllMarkets,
                 label: stringGetter({ key: STRING_KEYS.ALL }),
               },
-              {
-                value: MarketTypeFilter.Isolated,
-                label: stringGetter({ key: STRING_KEYS.ISOLATED }),
-              },
               {
                 value: MarketTypeFilter.Cross,
                 label: stringGetter({ key: STRING_KEYS.CROSS }),
               },
+              {
+                value: MarketTypeFilter.Isolated,
+                label: stringGetter({ key: STRING_KEYS.ISOLATED }),
+              },
             ]}
             value={marketTypeFilter}
             onValueChange={(newMarketTypeFilter: string) => {

src/views/TradeBoxOrderView.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { TradeInputField } from '@/constants/abacus';
 import { OnboardingState } from '@/constants/account';
@@ -14,6 +14,7 @@ import { getOnboardingState } from '@/state/accountSelectors';
 import { useAppSelector } from '@/state/appTypes';
 
 import abacusStateManager from '@/lib/abacus';
+import { testFlags } from '@/lib/testFlags';
 
 import { TradeSideTabs } from './TradeSideTabs';
 import { TradeForm } from './forms/TradeForm';
@@ -33,11 +34,13 @@ export const TradeBoxOrderView = () => {
   const onboardingState = useAppSelector(getOnboardingState);
   const allowChangingOrderType = onboardingState === OnboardingState.AccountConnected;
 
+  const { uiRefresh } = testFlags;
+
   return (
     <TradeSideTabs
       sharedContent={
         <div tw="flex min-h-full flex-col">
-          <$MarginAndLeverageButtons openInTradeBox />
+          <$MarginAndLeverageButtons openInTradeBox $uiRefreshEnabled={uiRefresh} />
           <$OrderTypeTabs
             value={selectedTradeType}
             items={tradeTypeItems}
@@ -60,8 +63,15 @@ const $Container = styled.div`
   ${layoutMixins.scrollArea}
 `;
 
-const $MarginAndLeverageButtons = styled(MarginAndLeverageButtons)`
-  padding: 0.75rem 1rem;
+const $MarginAndLeverageButtons = styled(MarginAndLeverageButtons)<{ $uiRefreshEnabled: boolean }>`
+  ${({ $uiRefreshEnabled }) =>
+    $uiRefreshEnabled
+      ? css`
+          padding: 0 1rem;
+        `
+      : css`
+          padding: 0.75rem 1rem;
+        `};
   box-shadow: inset 0 calc(-1 * var(--border-width)) var(--border-color);
 `;
 

src/views/forms/TradeForm/MarginAndLeverageButtons.tsx

@@ -5,6 +5,8 @@ import { layoutMixins } from '@/styles/layoutMixins';
 import { MarginModeSelector } from '@/views/forms/TradeForm/MarginModeSelector';
 import { TargetLeverageButton } from '@/views/forms/TradeForm/TargetLeverageButton';
 
+import { testFlags } from '@/lib/testFlags';
+
 type ElementProps = {
   openInTradeBox: boolean;
 };
@@ -16,12 +18,16 @@ type StyleProps = {
 export const MarginAndLeverageButtons = ({
   openInTradeBox,
   className,
-}: ElementProps & StyleProps) => (
-  <$MarginAndLeverageButtons className={className}>
-    <MarginModeSelector openInTradeBox={openInTradeBox} />
-    <TargetLeverageButton />
-  </$MarginAndLeverageButtons>
-);
+}: ElementProps & StyleProps) => {
+  const { uiRefresh } = testFlags;
+
+  return (
+    <$MarginAndLeverageButtons className={className}>
+      <MarginModeSelector openInTradeBox={openInTradeBox} />
+      {!uiRefresh && <TargetLeverageButton />}
+    </$MarginAndLeverageButtons>
+  );
+};
 
 const $MarginAndLeverageButtons = styled.div`
   display: flex;