done

dydxprotocol · Sep 27, 2024 · df0c75d · df0c75d
1 parent f843f99
commit df0c75d
Show file tree

Hide file tree

Showing 9 changed files with 162 additions and 70 deletions.
diff --git a/package.json b/package.json
@@ -58,7 +58,7 @@
     "@datadog/browser-logs": "^5.23.3",
     "@dydxprotocol/v4-abacus": "1.11.13",
     "@dydxprotocol/v4-client-js": "1.5.0",
-    "@dydxprotocol/v4-localization": "^1.1.203",
+    "@dydxprotocol/v4-localization": "^1.1.205",
     "@dydxprotocol/v4-proto": "^6.0.1",
     "@emotion/is-prop-valid": "^1.3.0",
     "@ethersproject/providers": "^5.7.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/tradingview/colors.css b/public/tradingview/colors.css
@@ -20,9 +20,9 @@
 
   --color-accent: #6966FF; /* ColorToken.Purple1; */
 }
-
-/* Theme: Light */
-:root.theme-light {
+  
+  /* Theme: Light */
+  :root.theme-light {
   --color-layer-0: #E9ECEE; /* ColorToken.LightGray7; */
   --color-layer-1: #ECEFF1; /* ColorToken.LightGray5; */
   --color-layer-2: #FFFFFF; /* ColorToken.White; */
@@ -41,9 +41,9 @@
 
   --color-accent: #7774FF; /* ColorToken.Purple0; */
 }
-
-/* Theme: Dark */
-:root.theme-dark {
+  
+  /* Theme: Dark */
+  :root.theme-dark {
   --color-layer-0: #000000; /* ColorToken.Black; */
   --color-layer-1: #1B1B1D; /* ColorToken.DarkGray14; */
   --color-layer-2: #212124; /* ColorToken.DarkGray11; */
@@ -62,3 +62,4 @@
 
   --color-accent: #7774FF; /* ColorToken.Purple0; */
 }
+
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
@@ -54,7 +54,7 @@ const $Search = styled.div`
   color: ${({ theme }) => theme.textTertiary};
   border-radius: 2.5rem;
   border: solid var(--border-width) var(--color-layer-6);
-  padding: 0 1rem;
+  padding: 0 0.75rem;
   gap: 0.375rem;
   justify-content: end;
 `;

diff --git a/src/components/Separator.tsx b/src/components/Separator.tsx
@@ -1,9 +1,9 @@
 import { Fragment } from 'react';
 
 import { Separator } from '@radix-ui/react-separator';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-const StyledSeparator = styled(Separator)`
+const StyledSeparator = styled(Separator)<{ fullHeight: boolean }>`
   flex: 0 !important;
   z-index: -1;
 
@@ -17,7 +17,9 @@ const StyledSeparator = styled(Separator)`
   &[data-orientation='vertical'] {
     align-self: center;
     width: 0;
-    height: calc(100% - 1.5rem);
+    height: ${({ fullHeight }) => css`
+      ${fullHeight ? css`100%;` : css`calc(100% - 1.5rem);`}
+    `}
     margin: 0 !important;
 
     border-right: solid var(--border-width) var(--color-border);
@@ -27,10 +29,19 @@ const StyledSeparator = styled(Separator)`
 export const VerticalSeparator = ({
   className,
   decorative = false,
+  fullHeight = false,
 }: {
   className?: string;
   decorative?: boolean;
-}) => <StyledSeparator className={className} orientation="vertical" decorative={decorative} />;
+  fullHeight?: boolean;
+}) => (
+  <StyledSeparator
+    className={className}
+    orientation="vertical"
+    decorative={decorative}
+    fullHeight={fullHeight}
+  />
+);
 
 export const WithSeparators = ({
   layout,

diff --git a/src/pages/trade/MarketSelectorAndStats.tsx b/src/pages/trade/MarketSelectorAndStats.tsx
@@ -13,6 +13,7 @@ import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
 import { getCurrentMarketDisplayId } from '@/state/perpetualsSelectors';
 
 import { getDisplayableTickerFromMarket } from '@/lib/assetUtils';
+import { testFlags } from '@/lib/testFlags';
 
 export const MarketSelectorAndStats = ({
   className,
@@ -24,6 +25,8 @@ export const MarketSelectorAndStats = ({
   const { id = '' } = useAppSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
   const currentMarketId = useAppSelector(getCurrentMarketDisplayId) ?? '';
 
+  const { uiRefresh } = testFlags;
+
   const displayableId = launchableMarketId
     ? getDisplayableTickerFromMarket(launchableMarketId)
     : launchableMarketId;
@@ -36,7 +39,9 @@ export const MarketSelectorAndStats = ({
         symbol={id}
       />
 
-      <VerticalSeparator />
+      <VerticalSeparator fullHeight={!!uiRefresh} />
+
+      {/* // xcxc check unlunached markets */}
 
       {launchableMarketId ? (
         <UnlaunchedMarketStatsDetails launchableMarketId={launchableMarketId} />

diff --git a/src/views/MarketFilter.tsx b/src/views/MarketFilter.tsx
@@ -1,9 +1,10 @@
 import { useNavigate } from 'react-router-dom';
 import styled, { css } from 'styled-components';
 
-import { ButtonSize } from '@/constants/buttons';
+import { ButtonAction, ButtonShape, ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
 import { MARKET_FILTER_OPTIONS, MarketFilters } from '@/constants/markets';
+import { MenuItem } from '@/constants/menus';
 import { AppRoute, MarketsRoute } from '@/constants/routes';
 
 import { usePotentialMarkets } from '@/hooks/usePotentialMarkets';
@@ -17,6 +18,8 @@ import { SearchInput } from '@/components/SearchInput';
 import { NewTag } from '@/components/Tag';
 import { ToggleGroup } from '@/components/ToggleGroup';
 
+import { testFlags } from '@/lib/testFlags';
+
 export const MarketFilter = ({
   selectedFilter,
   filters,
@@ -37,50 +40,85 @@ export const MarketFilter = ({
   const stringGetter = useStringGetter();
   const navigate = useNavigate();
   const { hasPotentialMarketsData } = usePotentialMarkets();
-  const showProposeButton = hasPotentialMarketsData && !hideNewMarketButton;
+  const { uiRefresh, pml: showLaunchMarkets } = testFlags;
+  const showProposeButton = hasPotentialMarketsData && !hideNewMarketButton && showLaunchMarkets;
+
+  const filterToggles = (
+    <$ToggleGroup
+      items={
+        Object.values(filters).map((value) => ({
+          label: stringGetter({ key: MARKET_FILTER_OPTIONS[value].label, fallback: value }),
+          slotAfter: MARKET_FILTER_OPTIONS[value]?.isNew && (
+            <NewTag>{stringGetter({ key: STRING_KEYS.NEW })}</NewTag>
+          ),
+          value,
+        })) as MenuItem<MarketFilters>[]
+      }
+      value={selectedFilter}
+      onValueChange={onChangeFilter}
+      uiRefreshEnabled={uiRefresh}
+    />
+  );
+
+  const launchMarketButton = uiRefresh ? (
+    <Button
+      onClick={() => navigate(`${AppRoute.Markets}/${MarketsRoute.New}`)}
+      size={ButtonSize.XSmall}
+      shape={ButtonShape.Pill}
+      action={ButtonAction.Primary}
+    >
+      {stringGetter({ key: STRING_KEYS.LAUNCH_MARKET_WITH_PLUS })}
+    </Button>
+  ) : (
+    <Button
+      onClick={() => navigate(`${AppRoute.Markets}/${MarketsRoute.New}`)}
+      size={ButtonSize.Small}
+    >
+      {stringGetter({ key: STRING_KEYS.PROPOSE_NEW_MARKET })}
+    </Button>
+  );
 
   return (
-    <$MarketFilter $compactLayout={compactLayout}>
-      <$SearchInput
-        placeholder={stringGetter({ key: searchPlaceholderKey })}
-        onTextChange={onSearchTextChange}
-      />
-
-      <div tw="row overflow-x-scroll">
-        <$ToggleGroupContainer $compactLayout={compactLayout}>
-          <$ToggleGroup
-            items={Object.values(filters).map((value) => ({
-              label: stringGetter({ key: MARKET_FILTER_OPTIONS[value].label, fallback: value }),
-              slotAfter: MARKET_FILTER_OPTIONS[value]?.isNew && (
-                <NewTag>{stringGetter({ key: STRING_KEYS.NEW })}</NewTag>
-              ),
-              value,
-            }))}
-            value={selectedFilter}
-            onValueChange={onChangeFilter}
-          />
-        </$ToggleGroupContainer>
-
-        {showProposeButton && (
-          <Button
-            onClick={() => navigate(`${AppRoute.Markets}/${MarketsRoute.New}`)}
-            size={ButtonSize.Small}
-          >
-            {stringGetter({ key: STRING_KEYS.PROPOSE_NEW_MARKET })}
-          </Button>
-        )}
+    <$MarketFilter $compactLayout={compactLayout} uiRefreshEnabled={uiRefresh}>
+      <div tw="flex items-center gap-0.5">
+        <$SearchInput
+          placeholder={stringGetter({ key: searchPlaceholderKey })}
+          onTextChange={onSearchTextChange}
+        />
+        {uiRefresh && showProposeButton && launchMarketButton}
       </div>
+
+      {uiRefresh ? (
+        filterToggles
+      ) : (
+        <div tw="row overflow-x-scroll">
+          <$ToggleGroupContainer $compactLayout={compactLayout}>
+            {filterToggles}
+          </$ToggleGroupContainer>
+
+          {showProposeButton && launchMarketButton}
+        </div>
+      )}
     </$MarketFilter>
   );
 };
-const $MarketFilter = styled.div<{ $compactLayout: boolean }>`
+const $MarketFilter = styled.div<{ $compactLayout: boolean; uiRefreshEnabled: boolean }>`
   display: flex;
-  flex-direction: ${({ $compactLayout }) => ($compactLayout ? 'row-reverse' : 'column')};
+  flex-direction: column;
   justify-content: space-between;
   gap: 0.75rem;
   flex: 1;
   overflow: hidden;
 
+  ${({ uiRefreshEnabled }) =>
+    uiRefreshEnabled &&
+    css`
+      button {
+        --button-toggle-off-border: none;
+        --button-toggle-off-backgroundColor: transparent;
+      }
+    `}
+
   ${({ $compactLayout }) =>
     $compactLayout &&
     css`
@@ -121,11 +159,24 @@ const $ToggleGroupContainer = styled.div<{ $compactLayout: boolean }>`
     `}
 `;
 
-const $ToggleGroup = styled(ToggleGroup)`
-  overflow-x: auto;
+const $ToggleGroup = styled(ToggleGroup)<{ uiRefreshEnabled: boolean }>`
+  --button-toggle-off-border: none;
+  --button-border: none;
+
+  ${({ uiRefreshEnabled }) => css`
+    ${uiRefreshEnabled
+      ? css`
+          display: flex;
+          flex-wrap: wrap;
+        `
+      : css`
+          overflow-x: auto;
+        `}
+  `}
   padding-right: var(--toggle-group-paddingRight);
-` as typeof ToggleGroup;
+`;
 
 const $SearchInput = styled(SearchInput)`
   min-width: 12rem;
+  flex-grow: 1;
 `;
diff --git a/src/views/MarketStatsDetails.tsx b/src/views/MarketStatsDetails.tsx
@@ -29,6 +29,7 @@ import {
 } from '@/state/perpetualsSelectors';
 
 import { BIG_NUMBERS, MustBigNumber } from '@/lib/numbers';
+import { testFlags } from '@/lib/testFlags';
 
 import { MidMarketPrice } from './MidMarketPrice';
 
@@ -39,15 +40,24 @@ type ElementProps = {
 enum MarketStats {
   OraclePrice = 'OraclePrice',
   PriceChange24H = 'PriceChange24H',
-  OpenInterest = 'OpenInterest',
-  Funding1H = 'Funding1H',
   Volume24H = 'Volume24H',
   Trades24H = 'Trades24H',
+  OpenInterest = 'OpenInterest',
+  Funding1H = 'Funding1H',
   NextFunding = 'NextFunding',
   MaxLeverage = 'MaxLeverage',
 }
 
-const defaultMarketStatistics = Object.values(MarketStats);
+const defaultMarketStatistics = [
+  MarketStats.OraclePrice,
+  MarketStats.PriceChange24H,
+  MarketStats.OpenInterest,
+  MarketStats.Funding1H,
+  MarketStats.Volume24H,
+  MarketStats.Trades24H,
+  MarketStats.NextFunding,
+  MarketStats.MaxLeverage,
+];
 
 export const MarketStatsDetails = ({ showMidMarketPrice = true }: ElementProps) => {
   const stringGetter = useStringGetter();
@@ -60,6 +70,8 @@ export const MarketStatsDetails = ({ showMidMarketPrice = true }: ElementProps)
   const currentMarketData = useAppSelector(getCurrentMarketData, shallowEqual);
   const isLoading = currentMarketData === undefined;
 
+  const { uiRefresh } = testFlags;
+
   const { oraclePrice, perpetual, priceChange24H, priceChange24HPercent } = currentMarketData ?? {};
 
   useEffect(() => {
@@ -104,7 +116,7 @@ export const MarketStatsDetails = ({ showMidMarketPrice = true }: ElementProps)
       )}
 
       <$Details
-        items={defaultMarketStatistics.map((stat) => ({
+        items={(uiRefresh ? Object.values(MarketStats) : defaultMarketStatistics).map((stat) => ({
           key: stat,
           label: labelMap[stat],
           tooltip: stat,