fix: sync up table rendering across the app (#1264)

dydxprotocol · Nov 7, 2024 · ef07bf6 · ef07bf6
1 parent f6a5012
commit ef07bf6
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 68 deletions.
diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
     "@cosmjs/stargate": "^0.32.1",
     "@cosmjs/tendermint-rpc": "^0.32.1",
     "@datadog/browser-logs": "^5.23.3",
-    "@dydxprotocol/v4-abacus": "1.13.16",
+    "@dydxprotocol/v4-abacus": "1.13.18",
     "@dydxprotocol/v4-client-js": "1.12.2",
     "@dydxprotocol/v4-localization": "^1.1.240",
     "@dydxprotocol/v4-proto": "^7.0.0-dev.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
@@ -38,6 +38,7 @@ import { useAppDispatch, useAppSelector } from '@/state/appTypes';
 import { openDialog } from '@/state/dialogs';
 
 import { isTruthy } from '@/lib/isTruthy';
+import { testFlags } from '@/lib/testFlags';
 import { truncateAddress } from '@/lib/wallet';
 
 import { GovernancePanel } from './token/GovernancePanel';
@@ -70,6 +71,7 @@ const Profile = () => {
   const { sourceAccount, dydxAddress } = useAccounts();
   const { chainTokenImage, chainTokenLabel } = useTokenConfigs();
   const { disableConnectButton } = useComplianceState();
+  const { uiRefresh } = testFlags;
 
   const { data: ensName } = useEnsName({
     address:
@@ -259,12 +261,20 @@ const Profile = () => {
         hasSeparator
       >
         <FillsTable
-          columnKeys={[
-            FillsTableColumnKey.Action,
-            FillsTableColumnKey.SideLongShort,
-            FillsTableColumnKey.Type,
-            FillsTableColumnKey.AmountTag,
-          ]}
+          columnKeys={
+            uiRefresh
+              ? [
+                  FillsTableColumnKey.Time,
+                  FillsTableColumnKey.Action,
+                  FillsTableColumnKey.Type,
+                  FillsTableColumnKey.Total,
+                ]
+              : [
+                  FillsTableColumnKey.Action,
+                  FillsTableColumnKey.Type,
+                  FillsTableColumnKey.AmountTag,
+                ]
+          }
           withInnerBorders={false}
           initialPageSize={5}
         />

diff --git a/src/pages/portfolio/Orders.tsx b/src/pages/portfolio/Orders.tsx
@@ -28,18 +28,31 @@ export const Orders = () => {
         columnKeys={
           isTablet
             ? [OrdersTableColumnKey.StatusFill, OrdersTableColumnKey.PriceType]
-            : [
-                OrdersTableColumnKey.Market,
-                OrdersTableColumnKey.Status,
-                OrdersTableColumnKey.Side,
-                OrdersTableColumnKey.AmountFill,
-                uiRefresh && OrdersTableColumnKey.OrderValue,
-                OrdersTableColumnKey.Price,
-                OrdersTableColumnKey.Trigger,
-                OrdersTableColumnKey.MarginType,
-                OrdersTableColumnKey.GoodTil,
-                !isAccountViewOnly && OrdersTableColumnKey.Actions,
-              ].filter(isTruthy)
+            : uiRefresh
+              ? [
+                  OrdersTableColumnKey.Market,
+                  OrdersTableColumnKey.Status,
+                  OrdersTableColumnKey.Side,
+                  OrdersTableColumnKey.Amount,
+                  OrdersTableColumnKey.Filled,
+                  OrdersTableColumnKey.OrderValue,
+                  OrdersTableColumnKey.Price,
+                  OrdersTableColumnKey.Trigger,
+                  OrdersTableColumnKey.MarginType,
+                  OrdersTableColumnKey.GoodTil,
+                  !isAccountViewOnly && OrdersTableColumnKey.Actions,
+                ].filter(isTruthy)
+              : [
+                  OrdersTableColumnKey.Market,
+                  OrdersTableColumnKey.Status,
+                  OrdersTableColumnKey.Side,
+                  OrdersTableColumnKey.AmountFill,
+                  OrdersTableColumnKey.Price,
+                  OrdersTableColumnKey.Trigger,
+                  OrdersTableColumnKey.MarginType,
+                  OrdersTableColumnKey.GoodTil,
+                  !isAccountViewOnly && OrdersTableColumnKey.Actions,
+                ].filter(isTruthy)
         }
         withOuterBorder={isNotTablet}
       />

diff --git a/src/pages/portfolio/Overview.tsx b/src/pages/portfolio/Overview.tsx
@@ -25,6 +25,7 @@ import { useAppSelector } from '@/state/appTypes';
 import { getDismissedAffiliateBanner } from '@/state/dismissableSelectors';
 
 import { isTruthy } from '@/lib/isTruthy';
+import { testFlags } from '@/lib/testFlags';
 
 import { MaybeUnopenedIsolatedPositionsPanel } from '../trade/UnopenedIsolatedPositions';
 import { AccountDetailsAndHistory } from './AccountDetailsAndHistory';
@@ -54,6 +55,7 @@ export const Overview = () => {
   const shouldRenderActions = useParameterizedSelector(
     calculateShouldRenderActionsInPositionsTable
   );
+  const { uiRefresh } = testFlags;
 
   return (
     <div>
@@ -94,17 +96,33 @@ export const Overview = () => {
                   PositionsTableColumnKey.IndexEntry,
                   PositionsTableColumnKey.PnL,
                 ]
-              : [
-                  PositionsTableColumnKey.Market,
-                  PositionsTableColumnKey.Size,
-                  PositionsTableColumnKey.Margin,
-                  PositionsTableColumnKey.UnrealizedPnl,
-                  PositionsTableColumnKey.RealizedPnl,
-                  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,
+                    PositionsTableColumnKey.NetFunding,
+                    shouldRenderTriggers && PositionsTableColumnKey.Triggers,
+                    shouldRenderActions && PositionsTableColumnKey.Actions,
+                  ].filter(isTruthy)
+                : [
+                    PositionsTableColumnKey.Market,
+                    PositionsTableColumnKey.Size,
+                    PositionsTableColumnKey.Margin,
+                    PositionsTableColumnKey.UnrealizedPnl,
+                    PositionsTableColumnKey.RealizedPnl,
+                    PositionsTableColumnKey.AverageOpenAndClose,
+                    PositionsTableColumnKey.LiquidationAndOraclePrice,
+                    shouldRenderTriggers && PositionsTableColumnKey.Triggers,
+                    shouldRenderActions && PositionsTableColumnKey.Actions,
+                  ].filter(isTruthy)
           }
           currentRoute={AppRoute.Portfolio}
           navigateToOrders={() =>

diff --git a/src/pages/portfolio/Portfolio.tsx b/src/pages/portfolio/Portfolio.tsx
@@ -33,6 +33,7 @@ import { useAppDispatch, useAppSelector } from '@/state/appTypes';
 import { openDialog } from '@/state/dialogs';
 
 import { shortenNumberForDisplay } from '@/lib/numbers';
+import { testFlags } from '@/lib/testFlags';
 
 import { VaultTransactionsTable } from '../vaults/VaultTransactions';
 import { PortfolioNavMobile } from './PortfolioNavMobile';
@@ -69,6 +70,7 @@ const PortfolioPage = () => {
   const usdcBalance = freeCollateral?.current ?? 0;
 
   useDocumentTitle(stringGetter({ key: STRING_KEYS.PORTFOLIO }));
+  const { uiRefresh } = testFlags;
 
   const routesComponent = (
     <Suspense fallback={<LoadingSpace id="portfolio" />}>
@@ -92,15 +94,27 @@ const PortfolioPage = () => {
                         FillsTableColumnKey.TypeAmount,
                         FillsTableColumnKey.PriceFee,
                       ]
-                    : [
-                        FillsTableColumnKey.Time,
-                        FillsTableColumnKey.Market,
-                        FillsTableColumnKey.Side,
-                        FillsTableColumnKey.AmountPrice,
-                        FillsTableColumnKey.TotalFee,
-                        FillsTableColumnKey.Type,
-                        FillsTableColumnKey.Liquidity,
-                      ]
+                    : uiRefresh
+                      ? [
+                          FillsTableColumnKey.Market,
+                          FillsTableColumnKey.Time,
+                          FillsTableColumnKey.Type,
+                          FillsTableColumnKey.Side,
+                          FillsTableColumnKey.AmountTag,
+                          FillsTableColumnKey.Price,
+                          FillsTableColumnKey.Total,
+                          FillsTableColumnKey.Fee,
+                          FillsTableColumnKey.Liquidity,
+                        ]
+                      : [
+                          FillsTableColumnKey.Time,
+                          FillsTableColumnKey.Market,
+                          FillsTableColumnKey.Side,
+                          FillsTableColumnKey.AmountPrice,
+                          FillsTableColumnKey.TotalFee,
+                          FillsTableColumnKey.Type,
+                          FillsTableColumnKey.Liquidity,
+                        ]
                 }
                 withOuterBorder={isNotTablet}
               />

diff --git a/src/pages/portfolio/Positions.tsx b/src/pages/portfolio/Positions.tsx
@@ -22,6 +22,7 @@ import { calculateShouldRenderActionsInPositionsTable } from '@/state/accountCal
 
 import { track } from '@/lib/analytics/analytics';
 import { isTruthy } from '@/lib/isTruthy';
+import { testFlags } from '@/lib/testFlags';
 
 import { MaybeUnopenedIsolatedPositionsPanel } from '../trade/UnopenedIsolatedPositions';
 import { MaybeVaultPositionsPanel } from '../vaults/VaultPositions';
@@ -48,6 +49,7 @@ export const Positions = () => {
       state: { from: AppRoute.Portfolio },
     });
   }, [navigate]);
+  const { uiRefresh } = testFlags;
 
   return (
     <>
@@ -64,18 +66,34 @@ export const Positions = () => {
                   PositionsTableColumnKey.IndexEntry,
                   PositionsTableColumnKey.PnL,
                 ]
-              : [
-                  PositionsTableColumnKey.Market,
-                  PositionsTableColumnKey.Size,
-                  PositionsTableColumnKey.Margin,
-                  PositionsTableColumnKey.UnrealizedPnl,
-                  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,
+                    PositionsTableColumnKey.NetFunding,
+                    shouldRenderTriggers && PositionsTableColumnKey.Triggers,
+                    shouldRenderActions && PositionsTableColumnKey.Actions,
+                  ].filter(isTruthy)
+                : [
+                    PositionsTableColumnKey.Market,
+                    PositionsTableColumnKey.Size,
+                    PositionsTableColumnKey.Margin,
+                    PositionsTableColumnKey.UnrealizedPnl,
+                    PositionsTableColumnKey.RealizedPnl,
+                    PositionsTableColumnKey.NetFunding,
+                    PositionsTableColumnKey.AverageOpenAndClose,
+                    PositionsTableColumnKey.LiquidationAndOraclePrice,
+                    shouldRenderTriggers && PositionsTableColumnKey.Triggers,
+                    shouldRenderActions && PositionsTableColumnKey.Actions,
+                  ].filter(isTruthy)
           }
           currentRoute={`${AppRoute.Portfolio}/${PortfolioRoute.Positions}`}
           withOuterBorder={isNotTablet}