Add trailing blocks to NetworkStatus analytics event

src/constants/analytics.ts

@@ -96,6 +96,7 @@ export type AnalyticsEventData<T extends AnalyticsEvent> =
         elapsedTime?: number;
         blockHeight?: number;
         indexerBlockHeight?: number;
+        trailingBlocks?: number;
       }
     : // Navigation
     T extends AnalyticsEvent.NavigatePage

src/hooks/useAnalytics.ts

@@ -97,7 +97,7 @@ export const useAnalytics = () => {
   }, []);
 
   // AnalyticsEvent.NetworkStatus
-  const { height, indexerHeight, status } = useApiState();
+  const { height, indexerHeight, status, trailingBlocks} = useApiState();
 
   useEffect(() => {
     if (status) {
@@ -114,6 +114,7 @@ export const useAnalytics = () => {
         elapsedTime: lastSuccessfulIndexerRpcQuery && Date.now() - lastSuccessfulIndexerRpcQuery,
         blockHeight: height ?? undefined,
         indexerBlockHeight: indexerHeight ?? undefined,
+        trailingBlocks: trailingBlocks ?? undefined
       });
     }
   }, [status]);

src/hooks/useApiState.ts

@@ -71,7 +71,7 @@ export const getIndexerHeight = (apiState: Nullable<AbacusApiState>) => {
 export const useApiState = () => {
   const stringGetter = useStringGetter();
   const apiState = useSelector(getApiState, shallowEqual);
-  const { haltedBlock, height, status, trailingBlocks } = apiState ?? {};
+  const { haltedBlock, height, status, trailingBlocks} = apiState ?? {};
   const statusErrorMessage = getStatusErrorMessage({ apiState, stringGetter });
   const indexerHeight = getIndexerHeight(apiState);
 

src/pages/portfolio/Portfolio.tsx

@@ -17,14 +17,11 @@ import { TransferHistoryTable } from '@/views/tables/TransferHistoryTable';
 import { Button } from '@/components/Button';
 import { Icon, IconName } from '@/components/Icon';
 import { NavigationMenu } from '@/components/NavigationMenu';
-import { Tag, TagType } from '@/components/Tag';
 import { WithSidebar } from '@/components/WithSidebar';
 
-import { getOnboardingState, getSubaccount, getTradeInfoNumbers } from '@/state/accountSelectors';
+import { getOnboardingState, getSubaccount } from '@/state/accountSelectors';
 import { openDialog } from '@/state/dialogs';
 
-import { shortenNumberForDisplay } from '@/lib/numbers';
-
 import { PortfolioNavMobile } from './PortfolioNavMobile';
 import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
 
@@ -45,10 +42,6 @@ export default () => {
   const { freeCollateral } = useSelector(getSubaccount, shallowEqual) || {};
   const { nativeTokenBalance } = useAccountBalance();
 
-  const { numTotalPositions, numTotalOpenOrders } = useSelector(getTradeInfoNumbers, shallowEqual) || {};
-  const numPositions = shortenNumberForDisplay(numTotalPositions);
-  const numOrders = shortenNumberForDisplay(numTotalOpenOrders);
-
   const usdcBalance = freeCollateral?.current || 0;
 
   useDocumentTitle(stringGetter({ key: STRING_KEYS.PORTFOLIO }));
@@ -126,27 +119,13 @@ export default () => {
                     {
                       value: PortfolioRoute.Positions,
                       slotBefore: <Styled.Icon iconName={IconName.Positions} />,
-                      label: (
+                      label: stringGetter({ key: STRING_KEYS.POSITIONS }),
-                        <>
-                          {stringGetter({ key: STRING_KEYS.POSITIONS })}
-                          {numPositions > 0 && (
-                            <Tag type={TagType.Number}> {numPositions} </Tag>
-                          )}
-                        </>
-                      ),
                       href: PortfolioRoute.Positions,
                     },
                     {
                       value: PortfolioRoute.Orders,
                       slotBefore: <Styled.Icon iconName={IconName.OrderPending} />,
-                      label: (
+                      label: stringGetter({ key: STRING_KEYS.ORDERS }),
-                        <>
-                          {stringGetter({ key: STRING_KEYS.ORDERS })}
-                          {numOrders > 0 && (
-                            <Tag type={TagType.Number}> {numOrders} </Tag>
-                          )}
-                        </>
-                      ),
                       href: PortfolioRoute.Orders,
                     },
                     {

src/state/accountCalculators.ts

@@ -1,8 +1,10 @@
 import { createSelector } from 'reselect';
 
+import { SubaccountPosition } from '@/constants/abacus';
 import { OnboardingState, OnboardingSteps } from '@/constants/account';
 
 import {
+  getExistingOpenPositions,
   getOnboardingGuards,
   getOnboardingState,
   getSubaccountId,
@@ -58,8 +60,13 @@ export const calculateIsAccountViewOnly = createSelector(
 );
 
 /**
- * @description calculate whether the subaccount has uncommitted positions
+ * @description calculate whether the subaccount has open positions
  */
+export const calculateHasOpenPositions = createSelector(
+  [getExistingOpenPositions],
+  (openPositions?: SubaccountPosition[]) => (openPositions?.length || 0) > 0
+);
+
 export const calculateHasUncommittedOrders = createSelector(
   [getUncommittedOrderClientIds],
   (uncommittedOrderClientIds: number[]) => uncommittedOrderClientIds.length > 0

src/state/accountSelectors.ts

@@ -2,7 +2,6 @@ import { OrderSide } from '@dydxprotocol/v4-client-js';
 import { createSelector } from 'reselect';
 
 import {
-  type AbacusOrderStatuses,
   type SubaccountOrder,
   type SubaccountFill,
   type SubaccountFundingPayment,
@@ -44,6 +43,7 @@ export const getSubaccountBuyingPower = (state: RootState) => state.account.suba
 export const getSubaccountEquity = (state: RootState) => state.account.subaccount?.equity;
 
 export const getSubaccountHistoricalPnl = (state: RootState) => state.account?.historicalPnl;
+
 /**
  * @param state
  * @returns list of a subaccount's open positions. Each item in the list is an open position in a different market.
@@ -258,14 +258,6 @@ export const getCurrentMarketFundingPayments = createSelector(
     !currentMarketId ? [] : marketFundingPayments[currentMarketId]
 );
 
-/**
- * @param state
- * @returns boolean on whether an order status is considered open
- */
-const isOpenOrderStatus = (status: AbacusOrderStatuses) => {
-  return status !== AbacusOrderStatus.filled && status !== AbacusOrderStatus.cancelled;
-};
-
 /**
  * @param state
  * @returns Total numbers of the subaccount's open positions, open orders and fills
@@ -274,7 +266,8 @@ export const getTradeInfoNumbers = createSelector(
   [getExistingOpenPositions, getSubaccountOrders, getSubaccountFills, getSubaccountFundingPayments],
   (positions, orders, fills, fundingPayments) => ({
     numTotalPositions: positions?.length,
-    numTotalOpenOrders: orders?.filter((order) => isOpenOrderStatus(order.status)).length,
+    numTotalOpenOrders: orders?.filter((order) => order.status !== AbacusOrderStatus.cancelled)
+      .length,
     numTotalFills: fills?.length,
     numTotalFundingPayments: fundingPayments?.length,
   })
@@ -288,7 +281,8 @@ export const getCurrentMarketTradeInfoNumbers = createSelector(
   [getCurrentMarketOrders, getCurrentMarketFills, getCurrentMarketFundingPayments],
   (marketOrders, marketFills, marketFundingPayments) => {
     return {
-      numOpenOrders: marketOrders?.filter((order) => isOpenOrderStatus(order.status)).length,
+      numOpenOrders: marketOrders?.filter((order) => order.status !== AbacusOrderStatus.cancelled)
+        .length,
       numFills: marketFills?.length,
       numFundingPayments: marketFundingPayments?.length,
     };

src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx

@@ -55,7 +55,7 @@ export const WithdrawButtonAndReceipt = ({
   const stringGetter = useStringGetter();
 
   const { leverage } = useSelector(getSubaccount, shallowEqual) || {};
-  const { summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
+  const { isCctp, summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
   const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual);
   const { usdcLabel } = useTokenConfigs();
 
@@ -85,6 +85,26 @@ export const WithdrawButtonAndReceipt = ({
 
   const totalFees = (summary?.bridgeFee || 0) + (summary?.gasFee || 0);
 
+  const { toAmount, toAmountMin } = useMemo(() => {
+    if (isCctp) {
+      return {
+        toAmount: summary?.toAmount,
+        toAmountMin: summary?.toAmountMin,
+      };
+    } else {
+      return {
+        toAmount:
+          summary?.toAmount &&
+          withdrawToken?.decimals &&
+          formatUnits(BigInt(summary.toAmount), withdrawToken.decimals),
+        toAmountMin:
+          summary?.toAmountMin &&
+          withdrawToken?.decimals &&
+          formatUnits(BigInt(summary.toAmountMin), withdrawToken.decimals),
+      };
+    }
+  }, [isCctp, summary, withdrawToken]);
+
   const submitButtonReceipt = [
     {
       key: 'total-fees',
@@ -133,7 +153,7 @@ export const WithdrawButtonAndReceipt = ({
           {withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
         </span>
       ),
-      value: <Output type={OutputType.Asset} value={summary?.toAmount} fractionDigits={TOKEN_DECIMALS} />,
+      value: <Output type={OutputType.Asset} value={toAmount} fractionDigits={TOKEN_DECIMALS} />,
       subitems: [
         {
           key: 'minimum-amount-received',
@@ -144,7 +164,7 @@ export const WithdrawButtonAndReceipt = ({
             </span>
           ),
           value: (
-            <Output type={OutputType.Asset} value={summary?.toAmountMin} fractionDigits={TOKEN_DECIMALS} />
+            <Output type={OutputType.Asset} value={toAmountMin} fractionDigits={TOKEN_DECIMALS} />
           ),
           tooltip: 'minimum-amount-received',
         },