Merge remote-tracking branch 'origin/tu/migrate-account-info' into tu…

…/bonsai-all
dydxprotocol · Dec 20, 2024 · dd9f0ef · dd9f0ef
2 parents d8859a2 + 03f1a20
commit dd9f0ef
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 29 deletions.
diff --git 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
@@ -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}
           />
         </>
       ),