From 03f1a201a52fd5be5a613e9c929472985ae67d59 Mon Sep 17 00:00:00 2001
From: Tyler <tyler@dydx.exchange>
Date: Thu, 19 Dec 2024 19:53:44 -0500
Subject: [PATCH] migrate-account-info

---
 .../AccountInfo/AccountInfoDiffOutput.tsx     | 19 ++++--
 src/views/AccountInfo/AccountInfoSection.tsx  | 62 ++++++++++++-------
 2 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/src/views/AccountInfo/AccountInfoDiffOutput.tsx b/src/views/AccountInfo/AccountInfoDiffOutput.tsx
index 1d556d8a0..ce2d5ced2 100644
--- a/src/views/AccountInfo/AccountInfoDiffOutput.tsx
+++ b/src/views/AccountInfo/AccountInfoDiffOutput.tsx
@@ -1,19 +1,21 @@
+import BigNumber from 'bignumber.js';
 import styled from 'styled-components';
 
-import type { Nullable, TradeState } from '@/constants/abacus';
+import type { Nullable } from '@/constants/abacus';
 import { NumberSign } from '@/constants/numbers';
 
 import { DiffOutput } from '@/components/DiffOutput';
 import { type OutputType } from '@/components/Output';
 
-import { isNumber } from '@/lib/numbers';
+import { MaybeBigNumber } from '@/lib/numbers';
 
 type ElementProps = {
   hasError?: boolean | null;
   hideDiff?: boolean;
   isPositive: boolean;
   type: OutputType;
-  value: Nullable<TradeState<number>>;
+  value: Nullable<BigNumber>;
+  valuePost: Nullable<number>;
 };
 
 export const AccountInfoDiffOutput = ({
@@ -22,10 +24,15 @@ export const AccountInfoDiffOutput = ({
   isPositive,
   type,
   value,
+  valuePost,
 }: ElementProps) => {
-  const currentValue = value?.current;
-  const postOrderValue = value?.postOrder;
-  const hasDiffPostOrder = isNumber(postOrderValue) && currentValue !== postOrderValue && !hideDiff;
+  const currentValue = MaybeBigNumber(value);
+  const postOrderValue = MaybeBigNumber(valuePost);
+  const hasDiffPostOrder =
+    postOrderValue != null &&
+    postOrderValue.isFinite() &&
+    !currentValue?.eq(postOrderValue) &&
+    !hideDiff;
 
   return (
     <$DiffOutput
diff --git a/src/views/AccountInfo/AccountInfoSection.tsx b/src/views/AccountInfo/AccountInfoSection.tsx
index cf8962d3e..375568db5 100644
--- a/src/views/AccountInfo/AccountInfoSection.tsx
+++ b/src/views/AccountInfo/AccountInfoSection.tsx
@@ -1,7 +1,12 @@
+import {
+  selectParentSubaccountSummary,
+  selectParentSubaccountSummaryLoading,
+} from '@/abacus-ts/selectors/account';
+import BigNumber from 'bignumber.js';
 import { shallowEqual } from 'react-redux';
 import styled, { css } from 'styled-components';
 
-import type { Nullable, TradeState } from '@/constants/abacus';
+import type { Nullable } from '@/constants/abacus';
 import { ButtonAction, ButtonShape, ButtonSize, ButtonStyle } from '@/constants/buttons';
 import { ComplianceStates } from '@/constants/compliance';
 import { DialogTypes } from '@/constants/dialogs';
@@ -34,16 +39,14 @@ import { AccountInfoDiffOutput } from './AccountInfoDiffOutput';
 enum AccountInfoItem {
   PortfolioValue = 'portfolio-value',
   MarginUsed = 'margin-used',
-
-  // TODO: CT-1292 remove deprecated fields
   AvailableBalance = 'available-balance',
 }
 
-const getUsageValue = (value: Nullable<TradeState<number>>) => {
-  const currentValue = value?.current;
-  const postOrderValue = value?.postOrder;
-  const hasDiffPostOrder = postOrderValue !== null && currentValue !== postOrderValue;
-  return (hasDiffPostOrder ? postOrderValue : currentValue) ?? 0;
+const getUsageValue = (value: Nullable<BigNumber>, valuePost: Nullable<number>) => {
+  const currentValue = value;
+  const postOrderValue = valuePost;
+  const hasDiffPostOrder = postOrderValue != null && !currentValue?.eq(postOrderValue);
+  return (hasDiffPostOrder ? postOrderValue : currentValue?.toNumber()) ?? 0;
 };
 
 export const AccountInfoSection = () => {
@@ -54,14 +57,26 @@ export const AccountInfoSection = () => {
   const { complianceState } = useComplianceState();
   const { dydxAccounts } = useAccounts();
 
-  const subAccount = useAppSelector(getSubaccount, shallowEqual);
-  const isLoading = useAppSelector(calculateIsAccountLoading);
-
-  const { freeCollateral: availableBalance, marginUsage } = subAccount ?? {};
-  const portfolioValue = subAccount?.equity;
+  const subAccountAbacus = useAppSelector(getSubaccount, shallowEqual);
+  const subAccount = useAppSelector(selectParentSubaccountSummary);
+  const isLoadingGuards = useAppSelector(calculateIsAccountLoading);
+  const isLoadingData = useAppSelector(selectParentSubaccountSummaryLoading) === 'pending';
+  const isLoading = !!isLoadingGuards || isLoadingData;
+
+  const {
+    freeCollateral: availableBalance,
+    marginUsage,
+    equity: portfolioValue,
+  } = subAccount ?? {};
+  const {
+    freeCollateral: availableBalancePost,
+    marginUsage: marginUsagePost,
+    equity: portfolioValuePost,
+  } = subAccountAbacus ?? {};
 
   const isPostOrderBalanceNegative =
-    isNumber(availableBalance?.postOrder) && MustBigNumber(availableBalance.postOrder).lt(0);
+    isNumber(availableBalancePost?.postOrder) &&
+    MustBigNumber(availableBalancePost.postOrder).lt(0);
 
   const withdrawButton = (
     <$Button
@@ -110,11 +125,12 @@ export const AccountInfoSection = () => {
         <AccountInfoDiffOutput
           hasError={false}
           hideDiff
-          isPositive={MustBigNumber(portfolioValue?.postOrder).gt(
-            MustBigNumber(portfolioValue?.current)
+          isPositive={MustBigNumber(portfolioValuePost?.postOrder).gt(
+            MustBigNumber(portfolioValue)
           )}
           type={OutputType.Fiat}
           value={portfolioValue}
+          valuePost={portfolioValuePost?.postOrder}
         />
       ),
     },
@@ -129,15 +145,16 @@ export const AccountInfoSection = () => {
         <AccountInfoDiffOutput
           hasError={isPostOrderBalanceNegative}
           hideDiff={isPostOrderBalanceNegative}
-          isPositive={MustBigNumber(availableBalance?.postOrder).gt(
-            MustBigNumber(availableBalance?.current)
+          isPositive={MustBigNumber(availableBalancePost?.postOrder).gt(
+            MustBigNumber(availableBalance)
           )}
           type={OutputType.Fiat}
           value={
-            MustBigNumber(availableBalance?.current).lt(0) && availableBalance?.postOrder === null
+            MustBigNumber(availableBalance).lt(0) && availableBalancePost?.postOrder === null
               ? undefined
               : availableBalance
           }
+          valuePost={availableBalancePost?.postOrder}
         />
       ),
     },
@@ -151,15 +168,14 @@ export const AccountInfoSection = () => {
       value: (
         <>
           <WithTooltip tooltip="margin-used" side="left">
-            <MarginUsageRing value={getUsageValue(marginUsage)} />
+            <MarginUsageRing value={getUsageValue(marginUsage, marginUsagePost?.postOrder)} />
           </WithTooltip>
           <AccountInfoDiffOutput
             hasError={false}
-            isPositive={MustBigNumber(marginUsage?.postOrder).gt(
-              MustBigNumber(marginUsage?.current)
-            )}
+            isPositive={MustBigNumber(marginUsagePost?.postOrder).gt(MustBigNumber(marginUsage))}
             type={OutputType.Percent}
             value={marginUsage}
+            valuePost={marginUsagePost?.postOrder}
           />
         </>
       ),