Merge remote-tracking branch 'origin/main' into tu/overview-vault-cha…

…nges

src/components/AssetIcon.tsx

@@ -793,20 +793,31 @@ export const AssetIcon = ({
       tw="h-[1em] w-auto rounded-[50%]"
     />
   ) : isAssetSymbol(symbol) ? (
-    <img
-      src={assetIcons[symbol]}
-      className={className}
-      alt={symbol}
-      tw="h-[1em] w-auto rounded-[50%]"
-    />
+    <$AssetIcon src={assetIcons[symbol]} className={className} alt={symbol} />
   ) : (
     <Placeholder className={className} symbol={symbol ?? ''} />
   );
 
+const $AssetIcon = styled.img`
+  --asset-icon-size: 1em;
+
+  height: var(--asset-icon-size);
+  min-height: var(--asset-icon-size);
+  width: var(--asset-icon-size);
+  min-width: var(--asset-icon-size);
+
+  border-radius: 50%;
+`;
+
 const $Placeholder = styled.div`
+  --asset-icon-size: 1em;
+
+  height: var(--asset-icon-size);
+  min-height: var(--asset-icon-size);
+  width: var(--asset-icon-size);
+  min-width: var(--asset-icon-size);
+
   background-color: var(--color-layer-5);
-  width: 1em;
-  height: 1em;
   border-radius: 50%;
   overflow: hidden;
 

src/components/CollapsibleTabs.tsx

@@ -68,7 +68,7 @@ export const CollapsibleTabs = <TabItemsValue extends string>({
       defaultValue={defaultTab}
       value={tab}
       onValueChange={(v) => setTab?.(v as TabItemsValue)}
-      uiRefreshEnabled={uiRefresh}
+      $uiRefreshEnabled={uiRefresh}
       asChild
     >
       <$CollapsibleRoot
@@ -112,15 +112,15 @@ export const CollapsibleTabs = <TabItemsValue extends string>({
     </$TabsRoot>
   );
 };
-const $TabsRoot = styled(TabsRoot)<{ uiRefreshEnabled: boolean }>`
+const $TabsRoot = styled(TabsRoot)<{ $uiRefreshEnabled: boolean }>`
   /* Overrides */
   --trigger-backgroundColor: var(--color-layer-2);
   --trigger-textColor: var(--color-text-0);
 
   --trigger-active-backgroundColor: var(--color-layer-1);
   --trigger-active-textColor: var(--color-text-2);
-  --trigger-active-underlineColor: ${({ uiRefreshEnabled }) => css`
-    ${uiRefreshEnabled ? css`var(--color-accent);` : css`var(--color-text-2);`}
+  --trigger-active-underlineColor: ${({ $uiRefreshEnabled }) => css`
+    ${$uiRefreshEnabled ? css`var(--color-accent);` : css`var(--color-text-2);`}
   `};
   --trigger-active-underline-size: 2px;
   --trigger-underline-size: 0px;

src/components/Separator.tsx

@@ -3,7 +3,7 @@ import { Fragment } from 'react';
 import { Separator } from '@radix-ui/react-separator';
 import styled, { css } from 'styled-components';
 
-const StyledSeparator = styled(Separator)<{ fullHeight: boolean }>`
+const StyledSeparator = styled(Separator)<{ $fullHeight: boolean }>`
   flex: 0 !important;
   z-index: -1;
 
@@ -17,10 +17,17 @@ const StyledSeparator = styled(Separator)<{ fullHeight: boolean }>`
   &[data-orientation='vertical'] {
     align-self: center;
     width: 0;
-    height: ${({ fullHeight }) => (fullHeight ? css`100%;` : css`calc(100% - 1.5rem);`)}
     margin: 0 !important;
-
     border-right: solid var(--border-width) var(--color-border);
+
+    ${({ $fullHeight }) =>
+      $fullHeight
+        ? css`
+            height: 100%;
+          `
+        : css`
+            height: calc(100% - 1.5rem);
+          `}
   }
 `;
 
@@ -37,7 +44,7 @@ export const VerticalSeparator = ({
     className={className}
     orientation="vertical"
     decorative={decorative}
-    fullHeight={fullHeight}
+    $fullHeight={fullHeight}
   />
 );
 
@@ -59,7 +66,7 @@ export const WithSeparators = ({
           {child}
           {i < length - 1 && (
             <StyledSeparator
-              fullHeight={fullHeight}
+              $fullHeight={fullHeight}
               orientation={
                 (
                   {

src/components/Tabs.tsx

@@ -126,7 +126,7 @@ export const Tabs = <TabItemsValue extends string>({
       onWheel={onWheel}
       $side={side}
       $withInnerBorder={withBorders || withUnderline}
-      uiRefreshEnabled={uiRefresh}
+      $uiRefreshEnabled={uiRefresh}
     >
       <$Header $side={side}>{triggers}</$Header>
 
@@ -154,7 +154,7 @@ export const Tabs = <TabItemsValue extends string>({
 const $Root = styled(Root)<{
   $side: 'top' | 'bottom';
   $withInnerBorder?: boolean;
-  uiRefreshEnabled: boolean;
+  $uiRefreshEnabled: boolean;
 }>`
   /* Overrides */
   --trigger-backgroundColor: var(--color-layer-2);
@@ -163,8 +163,8 @@ const $Root = styled(Root)<{
   --trigger-active-backgroundColor: var(--color-layer-1);
   --trigger-active-textColor: var(--color-text-2);
   --trigger-hover-textColor: var(--trigger-active-textColor);
-  --trigger-active-underlineColor: ${({ uiRefreshEnabled }) => css`
-    ${uiRefreshEnabled ? css`var(--color-accent);` : css`var(--color-text-2);`}
+  --trigger-active-underlineColor: ${({ $uiRefreshEnabled }) => css`
+    ${$uiRefreshEnabled ? css`var(--color-accent);` : css`var(--color-text-2);`}
   `};
   --trigger-active-underline-backgroundColor: transparent;
   --trigger-active-underline-size: 2px;

src/components/ToggleGroup.tsx

@@ -1,7 +1,7 @@
 import { type Ref } from 'react';
 
 import { Item, Root } from '@radix-ui/react-toggle-group';
-import { css, styled } from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
 import { type MenuItem } from '@/constants/menus';

src/hooks/tradingView/useTradingView.ts

@@ -18,7 +18,7 @@ import type { TvWidget } from '@/constants/tvchart';
 import { store } from '@/state/_store';
 import { getSelectedNetwork } from '@/state/appSelectors';
 import { useAppDispatch, useAppSelector } from '@/state/appTypes';
-import { getAppColorMode, getAppTheme, getSelectedDisplayUnit } from '@/state/configsSelectors';
+import { getAppColorMode, getAppTheme } from '@/state/configsSelectors';
 import { getSelectedLocale } from '@/state/localizationSelectors';
 import { getCurrentMarketConfig, getCurrentMarketId } from '@/state/perpetualsSelectors';
 import { updateChartConfig } from '@/state/tradingView';
@@ -260,14 +260,5 @@ export const useTradingView = ({
     tvWidgetRef,
   ]);
 
-  const displayUnit = useAppSelector(getSelectedDisplayUnit);
-  useEffect(() => {
-    // when display unit is toggled, update bars volume to be the correct unit
-    if (tvWidgetRef.current) {
-      const chart = tvWidgetRef.current.activeChart?.();
-      chart.resetData();
-    }
-  }, [displayUnit]);
-
   return { savedResolution };
 };

src/hooks/usePrevious.ts

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Tracks previous state of a value.
+ *
+ * @param value Props, state or any other calculated value.
+ * @returns Value from the previous render of the enclosing component.
+ *
+ * @example
+ * function Component() {
+ *   const [count, setCount] = useState(0);
+ *   const prevCount = usePrevious(count);
+ *   // ...
+ *   return `Now: ${count}, before: ${prevCount}`;
+ * }
+ */
+export default function usePrevious<T>(value: T): T | undefined {
+  // Source: https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+  const ref = useRef<T>();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}

src/lib/testFlags.ts

@@ -1,3 +1,5 @@
+import { isDev } from '@/constants/networks';
+
 class TestFlags {
   public queryParams: { [key: string]: string };
 
@@ -32,28 +34,20 @@ class TestFlags {
     return this.queryParams.address;
   }
 
-  get isolatedMargin() {
-    return !!this.queryParams.isolatedmargin;
-  }
-
-  get enableComplianceApi() {
-    return !!this.queryParams.complianceapi;
-  }
-
   get enableVaults() {
-    return !!this.queryParams.vaults || import.meta.env.MODE === 'staging';
+    return !!this.queryParams.vaults || isDev;
   }
 
   get referrer() {
     return this.queryParams.utm_source;
   }
 
   get enablePredictionMarketPerp() {
-    return !!this.queryParams.prediction || import.meta.env.MODE === 'staging';
+    return !!this.queryParams.prediction || isDev;
   }
 
   get pml() {
-    return !!this.queryParams.pml;
+    return !!this.queryParams.pml || isDev;
   }
 
   get showLimitClose() {
@@ -69,7 +63,7 @@ class TestFlags {
   }
 
   get uiRefresh() {
-    return !!this.queryParams.uirefresh;
+    return !!this.queryParams.uirefresh || isDev;
   }
 }
 

src/pages/trade/MarketSelectorAndStats.tsx

@@ -51,6 +51,7 @@ export const MarketSelectorAndStats = ({
 };
 const $Container = styled.div`
   ${layoutMixins.container}
+  ${layoutMixins.scrollAreaFadeEnd}
 
   display: grid;
 

src/styles/constants.css

@@ -42,7 +42,8 @@
   --dialog-header-height: 4rem;
 
   /* Market Selector constants */
-  --marketsDropdown-openWidth: 45rem;
+  --marketsDropdown-openWidth-deprecated: 45rem;
+  --marketsDropdown-openWidth: 40rem;
 
   /* Form constants */
   --form-input-gap: 0.625rem;

src/styles/layoutMixins.ts

@@ -37,8 +37,8 @@ const scrollSnapItem = css`
   scroll-margin-right: var(--stickyArea-totalInsetRight);
 `;
 
-// Applies a fade to a scrollable container. Apply to the parent of layoutMixins.scrollArea
-const scrollAreaFade = css`
+// Applies a fade to beginning of a scrollable container. Apply to the parent of layoutMixins.scrollArea
+const scrollAreaFadeStart = css`
   /* Params */
   --scrollArea-fadeWidth: 1.5rem;
 
@@ -55,6 +55,15 @@ const scrollAreaFade = css`
     background: linear-gradient(to left, transparent 10%, var(--color-layer-2));
     z-index: 1;
   }
+`;
+
+// Applies a fade to end of a scrollable container. Apply to the parent of layoutMixins.scrollArea
+const scrollAreaFadeEnd = css`
+  /* Params */
+  --scrollArea-fadeWidth: 1.5rem;
+
+  /* Rules */
+  position: relative;
 
   &:after {
     content: '';
@@ -68,6 +77,12 @@ const scrollAreaFade = css`
   }
 `;
 
+// Applies a fade to a scrollable container. Apply to the parent of layoutMixins.scrollArea
+const scrollAreaFade = css`
+  ${scrollAreaFadeStart}
+  ${scrollAreaFadeEnd}
+`;
+
 // Creates a scrollable container that can contain sticky and/or scroll-snapped descendants.
 const scrollArea = css`
   /* Params */
@@ -505,6 +520,8 @@ export const layoutMixins = {
     transition: right 0.3s var(--ease-out-expo);
   `,
 
+  scrollAreaFadeStart,
+  scrollAreaFadeEnd,
   scrollAreaFade,
 
   scrollArea,

src/views/MarketLinks.tsx

@@ -1,4 +1,5 @@
 import { shallowEqual } from 'react-redux';
+import styled from 'styled-components';
 
 import { ButtonType } from '@/constants/buttons';
 
@@ -10,6 +11,7 @@ import { IconButton } from '@/components/IconButton';
 import { useAppSelector } from '@/state/appTypes';
 import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
 
+import { testFlags } from '@/lib/testFlags';
 import { orEmptyObj } from '@/lib/typeUtils';
 
 export const MarketLinks = ({ launchableMarketId }: { launchableMarketId?: string }) => {
@@ -18,6 +20,8 @@ export const MarketLinks = ({ launchableMarketId }: { launchableMarketId?: strin
   const launchableAsset = useMetadataServiceAssetFromId(launchableMarketId);
   const { urls } = orEmptyObj(launchableAsset);
 
+  const { uiRefresh } = testFlags;
+
   const linkItems = [
     {
       key: 'coinmarketcap',
@@ -40,8 +44,20 @@ export const MarketLinks = ({ launchableMarketId }: { launchableMarketId?: strin
     <div tw="row ml-auto gap-0.5">
       {linkItems.map(
         ({ key, href, icon }) =>
-          href && <IconButton key={key} href={href} iconName={icon} type={ButtonType.Link} />
+          href &&
+          (uiRefresh ? (
+            <$IconButton key={key} href={href} iconName={icon} type={ButtonType.Link} />
+          ) : (
+            <IconButton key={key} href={href} iconName={icon} type={ButtonType.Link} />
+          ))
       )}
     </div>
   );
 };
+
+const $IconButton = styled(IconButton)`
+  --button-icon-size: 1.3em;
+  --button-textColor: var(--color-text-0);
+  --button-backgroundColor: transparent;
+  --button-border: none;
+`;