FEDEV-57: Tradebox UX upgrade

sdk/src/utils/numbers.ts

@@ -105,7 +105,7 @@ export const trimZeroDecimals = (amount: string) => {
 export function bigintToNumber(value: bigint, decimals: number) {
   const negative = value < 0;
   if (negative) value *= -1n;
-  const precision = 10n ** BigInt(decimals);
+  const precision = expandDecimals(1, decimals);
   const int = value / precision;
   const frac = value % precision;
 

src/components/BlockField/BlockField.tsx

@@ -0,0 +1,108 @@
+import cx from "classnames";
+import {
+  ReactNode,
+  useCallback,
+  useRef,
+  type MouseEvent,
+  type PointerEvent,
+  type Ref,
+  type MutableRefObject,
+} from "react";
+
+type Props = {
+  label: ReactNode;
+  content: ReactNode;
+  className?: string;
+  labelClassName?: string;
+  contentClassName?: string;
+  containerRef?: Ref<HTMLDivElement>;
+  forwardClickToSelector?: boolean;
+};
+
+export function BlockField({
+  label,
+  content,
+  className,
+  labelClassName,
+  contentClassName,
+  containerRef,
+  forwardClickToSelector,
+}: Props) {
+  const localRef = useRef<HTMLDivElement | null>(null);
+  const wasOpenOnPointerDown = useRef(false);
+
+  const setContainerRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      localRef.current = node;
+      if (!containerRef) {
+        return;
+      }
+      if (typeof containerRef === "function") {
+        containerRef(node);
+      } else {
+        (containerRef as MutableRefObject<HTMLDivElement | null>).current = node;
+      }
+    },
+    [containerRef]
+  );
+
+  const handlePointerDown = useCallback(
+    (event: PointerEvent<HTMLDivElement>) => {
+      if (!forwardClickToSelector) {
+        return;
+      }
+      const button = localRef.current?.querySelector<HTMLElement>(".SelectorBase-button");
+      const target = event.target as Node | null;
+
+      if (!button || (target && button.contains(target))) {
+        wasOpenOnPointerDown.current = false;
+        return;
+      }
+
+      const rootState = button.closest("[data-headlessui-state]")?.getAttribute("data-headlessui-state") ?? "";
+      const buttonState = button.getAttribute("data-headlessui-state") ?? "";
+      wasOpenOnPointerDown.current =
+        button.getAttribute("aria-expanded") === "true" || rootState.includes("open") || buttonState.includes("open");
+    },
+    [forwardClickToSelector]
+  );
+
+  const handleClick = useCallback(
+    (event: MouseEvent<HTMLDivElement>) => {
+      if (!forwardClickToSelector) {
+        return;
+      }
+      const button = localRef.current?.querySelector<HTMLElement>(".SelectorBase-button");
+      const target = event.target as Node | null;
+
+      if (!button || button.classList.contains("SelectorBase-button-disabled") || (target && button.contains(target))) {
+        wasOpenOnPointerDown.current = false;
+        return;
+      }
+
+      if (wasOpenOnPointerDown.current) {
+        wasOpenOnPointerDown.current = false;
+        return;
+      }
+
+      button.click();
+      wasOpenOnPointerDown.current = false;
+    },
+    [forwardClickToSelector]
+  );
+
+  return (
+    <div
+      ref={setContainerRef}
+      className={cx(
+        "flex cursor-pointer items-center justify-between gap-10 rounded-4 bg-slate-800 px-8 py-[3.5px]",
+        className
+      )}
+      onPointerDown={handlePointerDown}
+      onClick={handleClick}
+    >
+      <div className={cx("select-none 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

@@ -33,13 +33,22 @@ type Props = {
   options: TokenData[] | undefined;
   disabledOptions?: TokenData[];
   onSelect: (tokenAddress: string) => void;
+  // eslint-disable-next-line react/no-unused-prop-types
+  popoverReferenceRef?: React.RefObject<HTMLElement | null>;
 };
 
 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 group-gmx-hover/selector-field:text-blue-300"
+      handleClassName="text-12 group-gmx-hover/selector-field:text-blue-300"
+      popoverReferenceRef={props.popoverReferenceRef}
+    >
       {isMobile ? <CollateralSelectorMobile {...props} /> : <CollateralSelectorDesktop {...props} />}
     </SelectorBase>
   );

src/components/ExitPriceRow/ExitPriceRow.tsx

@@ -34,7 +34,7 @@ export function ExitPriceRow({
     <SyntheticsInfoRow
       label={
         <TooltipWithPortal
-          variant="icon"
+          variant="iconStroke"
           handle={t`Exit Price`}
           content={t`Expected exit price for the order, including the current capped net price impact.`}
         />

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>
+  );
+}