FEDEV-57: Tradebox UX upgrade

package.json

@@ -11,7 +11,7 @@
     "build:analyze": "VITE_APP_VERSION=$(git rev-parse HEAD) vite build --mode analyze",
     "build-home": "VITE_APP_VERSION=$(git rev-parse HEAD) env-cmd -e production-home vite build --config vite.landing.config.ts",
     "build-home:analyze": "VITE_APP_VERSION=$(git rev-parse HEAD) env-cmd -e production-home vite build --config vite.landing.config.ts --mode analyze",
-    "build-app": "VITE_APP_VERSION=$(git rev-parse HEAD) env-cmd -e production-app vite build",
+    "build-app": "NODE_OPTIONS=\"--max-old-space-size=8192\" VITE_APP_VERSION=$(git rev-parse HEAD) env-cmd -e production-app vite build",
     "test": "vitest",
     "test:ci": "vitest run",
     "lint": "node node_modules/.bin/eslint src",

src/components/BlockField/BlockField.tsx

@@ -0,0 +1,19 @@
+import cx from "classnames";
+import { ReactNode } from "react";
+
+type Props = {
+  label: ReactNode;
+  content: ReactNode;
+  className?: string;
+  labelClassName?: string;
+  contentClassName?: string;
+};
+
+export function BlockField({ label, content, className, labelClassName, contentClassName }: Props) {
+  return (
+    <div className={cx("flex items-center justify-between gap-10 rounded-4 bg-slate-800 px-8 py-[3.5px]", className)}>
+      <div className={cx("text-13 text-typography-secondary", labelClassName)}>{label}</div>
+      <div className={cx("flex min-w-0 flex-1 justify-end", contentClassName)}>{content}</div>
+    </div>
+  );
+}

src/components/CollateralSelector/CollateralSelector.tsx

@@ -39,7 +39,13 @@ export function CollateralSelector(props: Props) {
   const isMobile = useMedia(`(max-width: ${SELECTOR_BASE_MOBILE_THRESHOLD}px)`);
 
   return (
-    <SelectorBase label={props.selectedTokenSymbol} modalLabel={t`Collateral In`} qa="collateral-in-selector">
+    <SelectorBase
+      label={props.selectedTokenSymbol}
+      modalLabel={t`Collateral In`}
+      qa="collateral-in-selector"
+      chevronClassName="w-12 text-typography-secondary max-lg:ml-4"
+      handleClassName="text-12"
+    >
       {isMobile ? <CollateralSelectorMobile {...props} /> : <CollateralSelectorDesktop {...props} />}
     </SelectorBase>
   );

src/components/ExpandableRow.tsx

@@ -66,6 +66,7 @@ interface Props {
   withToggleSwitch?: boolean;
   handleClassName?: string;
   chevronClassName?: string;
+  wrapped?: boolean;
 }
 
 export function ExpandableRow({
@@ -83,6 +84,7 @@ export function ExpandableRow({
   withToggleSwitch = false,
   handleClassName,
   chevronClassName,
+  wrapped = false,
 }: Props) {
   const previousHasError = usePrevious(hasError);
   const contentRef = useRef<HTMLDivElement>(null);
@@ -135,9 +137,18 @@ export function ExpandableRow({
   );
 
   return (
-    <div className={cx("min-h-16", className)}>
+    <div
+      className={cx("min-h-16", className, {
+        "rounded-8 border-1/2 border-slate-600 bg-slate-950/50 px-12 py-10": wrapped,
+      })}
+    >
       <AnimatePresence initial={false}>
-        <div key="handle" className={cx({ "mb-14": open })}>
+        <div
+          key="handle"
+          className={cx({
+            "mb-14": open,
+          })}
+        >
           <SyntheticsInfoRow
             className={cx("group relative !items-center gmx-hover:text-blue-300", {
               "cursor-not-allowed": disabled,

src/components/LeverageField/LeverageField.tsx

@@ -0,0 +1,96 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import SuggestionInput from "components/SuggestionInput/SuggestionInput";
+
+const defaultMarks = [0.1, 25, 50];
+const DEFAULT_LEVERAGE = 20;
+
+type Props = {
+  value: number | null;
+  onChange: (value: number) => void;
+  marks: number[];
+};
+
+function clampLeverage(value: number, min: number, max: number) {
+  const safeMin = min > 0 ? min : DEFAULT_LEVERAGE;
+  return Math.min(Math.max(value, safeMin), max);
+}
+
+function formatLeverage(value: number) {
+  return parseFloat(value.toFixed(2)).toString();
+}
+
+export function LeverageField({ value, onChange, marks }: Props) {
+  const finalMarks = useMemo(() => (marks?.length ? marks : defaultMarks), [marks]);
+  const minMark = finalMarks[0] ?? DEFAULT_LEVERAGE;
+  const maxMark = finalMarks.at(-1) ?? DEFAULT_LEVERAGE;
+
+  const [inputValue, setInputValue] = useState<string>(() => {
+    if (value !== null) {
+      return formatLeverage(clampLeverage(value, minMark, maxMark));
+    }
+
+    return formatLeverage(minMark);
+  });
+
+  useEffect(() => {
+    if (value !== null) {
+      setInputValue(formatLeverage(clampLeverage(value, minMark, maxMark)));
+    }
+  }, [value, minMark, maxMark]);
+
+  const parseAndClampValue = useCallback(
+    (rawValue: string) => {
+      const numericValue = parseFloat(rawValue);
+
+      if (Number.isNaN(numericValue) || numericValue <= 0) {
+        return undefined;
+      }
+
+      return clampLeverage(numericValue, minMark, maxMark);
+    },
+    [maxMark, minMark]
+  );
+
+  const commitValue = useCallback(
+    (rawValue?: string) => {
+      const nextValue = rawValue ?? inputValue;
+      const parsed = parseAndClampValue(nextValue);
+      const fallback = clampLeverage(value ?? minMark, minMark, maxMark);
+      const finalValue = parsed ?? fallback;
+      const formatted = formatLeverage(finalValue);
+
+      setInputValue(formatted);
+      onChange(finalValue);
+    },
+    [inputValue, maxMark, minMark, onChange, value, parseAndClampValue]
+  );
+
+  const handleInputChange = useCallback(
+    (nextValue: string) => {
+      setInputValue(nextValue);
+
+      const parsed = parseAndClampValue(nextValue);
+      if (parsed !== undefined) {
+        onChange(parsed);
+      }
+    },
+    [parseAndClampValue, onChange]
+  );
+
+  return (
+    <div data-qa="leverage-slider">
+      <SuggestionInput
+        suggestionsPlacement="bottom-start"
+        value={inputValue ?? "N/A"}
+        setValue={handleInputChange}
+        onBlur={commitValue}
+        suggestionList={finalMarks}
+        suggestionWithSuffix
+        suffix="x"
+        inputClassName="w-full text-right"
+        className="leading-none !rounded-4 px-0 py-[1.5px]"
+      />
+    </div>
+  );
+}