feat(uirefresh): component refresh - positions table (#1146)

dydxprotocol · Oct 16, 2024 · 32586d8 · 32586d8
1 parent 44282c2
commit 32586d8
Show file tree

Hide file tree

Showing 11 changed files with 850 additions and 249 deletions.
diff --git a/src/components/Output.tsx b/src/components/Output.tsx
@@ -469,7 +469,7 @@ const $Text = styled.output<{ withParentheses?: boolean }>`
     opacity: 0.5;
 
     &:after {
-      content: '-' var(--output-afterString);
+      content: '—' var(--output-afterString);
     }
   }
 

diff --git a/src/components/Table.tsx b/src/components/Table.tsx
@@ -91,6 +91,7 @@ export type ColumnDef<TableRowData extends BaseTableRowData | CustomRowConfig> =
   isActionable?: boolean;
   hideOnBreakpoint?: MediaQueryKeys;
   width?: ColumnSize;
+  align?: 'start' | 'center' | 'end';
 } & (SortableColumnDef<TableRowData> | NonSortableColumnDef);
 
 export type TableElementProps<TableRowData extends BaseTableRowData | CustomRowConfig> = {
@@ -406,17 +407,14 @@ const TableRoot = <TableRowData extends BaseTableRowData | CustomRowConfig>(prop
             state={state}
             withScrollSnapRows={withScrollSnapRows}
           >
-            {[...headerRow.childNodes].map(
-              (column) => (
-                <TableColumnHeader
-                  key={column.key}
-                  column={column}
-                  state={state}
-                  withScrollSnapColumns={withScrollSnapColumns}
-                />
-              )
-              // )
-            )}
+            {[...headerRow.childNodes].map((column) => (
+              <TableColumnHeader
+                key={column.key}
+                column={column}
+                state={state}
+                withScrollSnapColumns={withScrollSnapColumns}
+              />
+            ))}
           </TableHeaderRow>
         ))}
       </TableHeadRowGroup>
@@ -568,7 +566,10 @@ const TableColumnHeader = <TableRowData extends BaseTableRowData>({
     <$Th
       {...mergeProps(columnHeaderProps, focusProps)}
       // data-focused={isFocusVisible || undefined}
-      style={{ width: column.props?.width }}
+      style={{
+        width: column.props?.width,
+        textAlign: (column?.value as any)?.align,
+      }}
       ref={ref}
       allowSorting={column.props?.allowsSorting ?? true}
       withScrollSnapColumns={withScrollSnapColumns}

diff --git a/src/components/Table/ActionsTableCell.tsx b/src/components/Table/ActionsTableCell.tsx
@@ -8,9 +8,15 @@ type ElementProps = {
   children: React.ReactNode;
 };
 
-export const ActionsTableCell = ({ children }: ElementProps) => (
+type StyleProps = {
+  className?: string;
+};
+
+export const ActionsTableCell = ({ children, className }: ElementProps & StyleProps) => (
   <div tw="flex justify-end">
-    <$Toolbar $numChildren={React.Children.toArray(children).length}>{children}</$Toolbar>
+    <$Toolbar className={className} $numChildren={React.Children.toArray(children).length}>
+      {children}
+    </$Toolbar>
   </div>
 );
 const $Toolbar = styled(Toolbar)<{ $numChildren: number }>`
@@ -20,11 +26,13 @@ const $Toolbar = styled(Toolbar)<{ $numChildren: number }>`
       width: calc(${$numChildren} * 2rem + (${$numChildren} - 1) * 0.5rem);
     `}
 
+  --toolbar-margin: 0.5rem;
+
   display: flex;
   justify-content: flex-end;
   padding: 0;
 
   > *:not(:last-child) {
-    margin-right: 0.5rem;
+    margin-right: var(--toolbar-margin);
   }
 `;
diff --git a/src/icons/share.svg b/src/icons/share.svg
diff --git a/src/pages/trade/HorizontalPanel.tsx b/src/pages/trade/HorizontalPanel.tsx
@@ -144,18 +144,41 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
                   PositionsTableColumnKey.IndexEntry,
                   PositionsTableColumnKey.PnL,
                 ]
-              : [
-                  PositionsTableColumnKey.Market,
-                  PositionsTableColumnKey.Size,
-                  PositionsTableColumnKey.Margin,
-                  PositionsTableColumnKey.UnrealizedPnl,
-                  !isDesktopSmall && PositionsTableColumnKey.RealizedPnl,
-                  PositionsTableColumnKey.NetFunding,
-                  PositionsTableColumnKey.AverageOpenAndClose,
-                  PositionsTableColumnKey.LiquidationAndOraclePrice,
-                  shouldRenderTriggers && PositionsTableColumnKey.Triggers,
-                  shouldRenderActions && PositionsTableColumnKey.Actions,
-                ].filter(isTruthy)
+              : uiRefresh
+                ? [
+                    PositionsTableColumnKey.Market,
+                    PositionsTableColumnKey.Leverage,
+                    PositionsTableColumnKey.Type,
+                    PositionsTableColumnKey.Size,
+                    PositionsTableColumnKey.Value,
+                    PositionsTableColumnKey.PnL,
+                    PositionsTableColumnKey.Margin,
+                    PositionsTableColumnKey.AverageOpen,
+                    PositionsTableColumnKey.Oracle,
+                    PositionsTableColumnKey.Liquidation,
+                    shouldRenderTriggers && PositionsTableColumnKey.Triggers,
+                    PositionsTableColumnKey.NetFunding,
+                    shouldRenderActions && PositionsTableColumnKey.Actions,
+                  ].filter(isTruthy)
+                : [
+                    PositionsTableColumnKey.Market,
+                    PositionsTableColumnKey.Size,
+                    PositionsTableColumnKey.Margin,
+                    PositionsTableColumnKey.UnrealizedPnl,
+                    !isDesktopSmall && PositionsTableColumnKey.RealizedPnl,
+                    PositionsTableColumnKey.NetFunding,
+                    PositionsTableColumnKey.AverageOpenAndClose,
+                    PositionsTableColumnKey.LiquidationAndOraclePrice,
+                    shouldRenderTriggers && PositionsTableColumnKey.Triggers,
+                    shouldRenderActions && PositionsTableColumnKey.Actions,
+                  ].filter(isTruthy)
+          }
+          columnWidths={
+            uiRefresh
+              ? {
+                  [PositionsTableColumnKey.Actions]: 100,
+                }
+              : undefined
           }
           showClosePositionAction={shouldRenderActions}
           initialPageSize={initialPageSize}
@@ -174,6 +197,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
       shouldRenderTriggers,
       numTotalPositions,
       onViewOrders,
+      uiRefresh,
     ]
   );