feat(uirefresh): component refresh - market selector (#1073)

src/components/Icon.tsx

@@ -73,6 +73,7 @@ import {
   QrIcon,
   RewardStarIcon,
   RocketIcon,
+  RoundedArrowIcon,
   SearchIcon,
   SendIcon,
   ShareIcon,
@@ -171,6 +172,7 @@ export enum IconName {
   Qr = 'Qr',
   RewardStar = 'RewardStar',
   Rocket = 'Rocket',
+  RoundedArrow = 'RoundedArrow',
   Search = 'Search',
   Send = 'Send',
   Share = 'Share',
@@ -266,6 +268,7 @@ const icons = {
   [IconName.Qr]: QrIcon,
   [IconName.RewardStar]: RewardStarIcon,
   [IconName.Rocket]: RocketIcon,
+  [IconName.RoundedArrow]: RoundedArrowIcon,
   [IconName.Search]: SearchIcon,
   [IconName.Send]: SendIcon,
   [IconName.Share]: ShareIcon,

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;
 `;

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,7 @@ const StyledSeparator = styled(Separator)`
   &[data-orientation='vertical'] {
     align-self: center;
     width: 0;
-    height: calc(100% - 1.5rem);
+    height: ${({ fullHeight }) => (fullHeight ? css`100%;` : css`calc(100% - 1.5rem);`)}
     margin: 0 !important;
 
     border-right: solid var(--border-width) var(--color-border);
@@ -27,19 +27,30 @@ 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,
   children,
   withSeparators = true,
+  fullHeight = false,
 }: {
   layout: 'column' | 'row';
   children: React.ReactNode;
   withSeparators?: boolean;
+  fullHeight?: boolean;
 }) =>
   withSeparators
     ? [children].flat().map((child, i, { length }) => (
@@ -48,6 +59,7 @@ export const WithSeparators = ({
           {child}
           {i < length - 1 && (
             <StyledSeparator
+              fullHeight={fullHeight}
               orientation={
                 (
                   {

src/components/SortIcon.tsx

@@ -0,0 +1,68 @@
+import { SortDirection } from 'react-stately';
+import styled, { css } from 'styled-components';
+
+import { Icon, IconName } from '@/components/Icon';
+
+type ElementProps = {
+  sortDirection: SortDirection | 'none';
+};
+
+type StyleProps = {
+  className?: string;
+};
+
+export const SortIcon = ({ sortDirection, className }: ElementProps & StyleProps) => {
+  return (
+    <$SortIcon aria-hidden="true" hidden={sortDirection === 'none'} className={className}>
+      <$Icon
+        iconName={IconName.RoundedArrow}
+        aria-hidden="true"
+        direction="up"
+        highlighted={sortDirection === 'ascending'}
+        size="0.75em"
+        tw="relative right-[-2px] top-[-3px]"
+      />
+      <$Icon
+        iconName={IconName.RoundedArrow}
+        aria-hidden="true"
+        direction="down"
+        highlighted={sortDirection === 'descending'}
+        size="0.75em"
+        tw="relative bottom-[-3px] left-[-2px]"
+      />
+    </$SortIcon>
+  );
+};
+
+const $SortIcon = styled.div<{ hidden: boolean }>`
+  display: inline-flex;
+  position: relative;
+  transition: opacity 0.3s var(--ease-out-expo);
+
+  ${({ hidden }) =>
+    hidden
+      ? css`
+          opacity: 0;
+        `
+      : css`
+          opacity: 1;
+        `}
+`;
+
+const $Icon = styled(Icon)<{ direction: 'up' | 'down'; highlighted: boolean }>`
+  ${({ highlighted }) =>
+    highlighted
+      ? css`
+          color: var(--color-text-2);
+        `
+      : css`
+          color: var(--color-text-0);
+        `}
+  ${({ direction }) =>
+    ({
+      up: css``,
+      down: css`
+        transform: rotate(180deg);
+      `,
+    })[direction]}
+`;

src/components/Table.tsx

@@ -34,8 +34,10 @@ import breakpoints from '@/styles/breakpoints';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { MustBigNumber } from '@/lib/numbers';
+import { testFlags } from '@/lib/testFlags';
 
 import { Icon, IconName } from './Icon';
+import { SortIcon } from './SortIcon';
 import { PAGE_SIZES, PageSize, TablePaginationRow } from './Table/TablePaginationRow';
 import { Tag } from './Tag';
 
@@ -559,6 +561,8 @@ const TableColumnHeader = <TableRowData extends BaseTableRowData>({
   const { columnHeaderProps } = useTableColumnHeader({ node: column }, state, ref);
   const { focusProps } = useFocusRing();
 
+  const { uiRefresh } = testFlags;
+
   return (
     <$Th
       {...mergeProps(columnHeaderProps, focusProps)}
@@ -568,20 +572,29 @@ const TableColumnHeader = <TableRowData extends BaseTableRowData>({
       allowSorting={column.props?.allowsSorting ?? true}
       withScrollSnapColumns={withScrollSnapColumns}
     >
-      <$Row>
+      <$Row uiRefreshEnabled={uiRefresh}>
         {column.rendered}
-        {(column.props.allowsSorting ?? true) && (
-          <$SortArrow
-            aria-hidden="true"
-            sortDirection={
-              state.sortDescriptor?.column === column.key
-                ? state.sortDescriptor?.direction ?? 'none'
-                : 'none'
-            }
-          >
-            <Icon iconName={IconName.Triangle} aria-hidden="true" />
-          </$SortArrow>
-        )}
+        {(column.props.allowsSorting ?? true) &&
+          (uiRefresh ? (
+            <SortIcon
+              sortDirection={
+                state.sortDescriptor?.column === column.key
+                  ? state.sortDescriptor?.direction ?? 'none'
+                  : 'none'
+              }
+            />
+          ) : (
+            <$SortArrow
+              aria-hidden="true"
+              sortDirection={
+                state.sortDescriptor?.column === column.key
+                  ? state.sortDescriptor?.direction ?? 'none'
+                  : 'none'
+              }
+            >
+              <Icon iconName={IconName.Triangle} aria-hidden="true" />
+            </$SortArrow>
+          ))}
       </$Row>
     </$Th>
   );
@@ -1016,7 +1029,9 @@ const $Tbody = styled.tbody<TableStyleProps>`
     `}
 `;
 
-const $Row = styled.div`
+const $Row = styled.div<{ uiRefreshEnabled: boolean }>`
   ${layoutMixins.inlineRow}
   padding: var(--tableCell-padding);
+
+  gap: ${({ uiRefreshEnabled }) => (uiRefreshEnabled ? css`0.25ch;` : css`0.5ch`)};
 `;

src/components/ToggleGroup.tsx

@@ -1,7 +1,7 @@
 import { type Ref } from 'react';
 
 import { Item, Root } from '@radix-ui/react-toggle-group';
-import styled from 'styled-components';
+import { css, styled } from 'styled-components';
 
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
 import { type MenuItem } from '@/constants/menus';
@@ -25,6 +25,7 @@ type ElementProps<MenuItemValue extends string> = {
 
 type StyleProps = {
   className?: string;
+  overflow?: 'scroll' | 'wrap';
 };
 
 export const ToggleGroup = forwardRefFn(
@@ -37,6 +38,7 @@ export const ToggleGroup = forwardRefFn(
       onInteraction,
 
       className,
+      overflow = 'scroll',
       size,
       shape = ButtonShape.Pill,
 
@@ -47,7 +49,7 @@ export const ToggleGroup = forwardRefFn(
     const { isTablet } = useBreakpoints();
 
     return (
-      <Root
+      <$Root
         ref={ref}
         type="single"
         value={value}
@@ -59,6 +61,7 @@ export const ToggleGroup = forwardRefFn(
         }}
         className={className}
         loop
+        overflow={overflow}
         tw="row gap-[0.33em]"
       >
         {items.map((item) => (
@@ -75,11 +78,24 @@ export const ToggleGroup = forwardRefFn(
             </ToggleButton>
           </Item>
         ))}
-      </Root>
+      </$Root>
     );
   }
 );
 
+const $Root = styled(Root)<{ overflow: 'scroll' | 'wrap' }>`
+  ${({ overflow }) =>
+    ({
+      scroll: css`
+        overflow-x: auto;
+      `,
+      wrap: css`
+        display: flex;
+        flex-wrap: wrap;
+      `,
+    })[overflow]}
+`;
+
 const $Label = styled.div`
   ${layoutMixins.textTruncate}
 `;

src/icons/index.ts

@@ -62,6 +62,7 @@ export { default as ProfileIcon } from './profile.svg';
 export { default as QrIcon } from './qr.svg';
 export { default as RewardStarIcon } from './reward-star.svg';
 export { default as RocketIcon } from './rocket.svg';
+export { default as RoundedArrowIcon } from './rounded-arrow.svg';
 export { default as SearchIcon } from './search.svg';
 export { default as SendIcon } from './send.svg';
 export { default as ShareIcon } from './share.svg';

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,7 @@ export const MarketSelectorAndStats = ({
         symbol={id}
       />
 
-      <VerticalSeparator />
+      <VerticalSeparator fullHeight={!!uiRefresh} />
 
       {launchableMarketId ? (
         <UnlaunchedMarketStatsDetails launchableMarketId={launchableMarketId} />