Skip to content

Commit

Permalink
chore(isolatedMargin): update account info (#910)
Browse files Browse the repository at this point in the history
  • Loading branch information
moo-onthelawn authored Aug 13, 2024
1 parent aa7c083 commit 8e446a9
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 61 deletions.
17 changes: 11 additions & 6 deletions src/pages/portfolio/AccountDetailsAndHistory.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -102,8 +102,13 @@ export const AccountDetailsAndHistory = () => {
const selectedLocale = useAppSelector(getSelectedLocale);
const onboardingState = useAppSelector(getOnboardingState);

const { buyingPower, equity, freeCollateral, leverage, marginUsage } =
useAppSelector(getSubaccount, shallowEqual) ?? {};
const {
buyingPower,
equity,
freeCollateral: availableBalance,
leverage,
marginUsage,
} = useAppSelector(getSubaccount, shallowEqual) ?? {};

const [tooltipContext, setTooltipContext] = useState<TooltipContextType<PnlDatum>>();

Expand All @@ -124,10 +129,10 @@ export const AccountDetailsAndHistory = () => {
value: marginUsage?.current,
},
!isTablet && {
key: 'FreeCollateral',
labelKey: STRING_KEYS.FREE_COLLATERAL,
key: 'AvailableBalance',
labelKey: STRING_KEYS.AVAILABLE_BALANCE,
type: OutputType.Fiat,
value: freeCollateral?.current,
value: availableBalance?.current,
},
{
key: 'Leverage',
Expand Down Expand Up @@ -214,7 +219,7 @@ const $AccountDetailsAndHistory = styled.div<{ isSidebarOpen?: boolean }>`
display: grid;
grid-template:
'PortfolioValue PortfolioValue Chart'
'MarginUsage FreeCollateral Chart'
'MarginUsage AvailableBalance Chart'
'Leverage BuyingPower Chart'
/ 9.375rem 9.375rem 1fr;
Expand Down
119 changes: 64 additions & 55 deletions src/views/AccountInfo/AccountInfoConnectedState.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { useCallback } from 'react';

import { shallowEqual } from 'react-redux';
import styled, { css } from 'styled-components';

Expand Down Expand Up @@ -28,16 +30,15 @@ import { calculateIsAccountLoading } from '@/state/accountCalculators';
import { getSubaccount } from '@/state/accountSelectors';
import { useAppDispatch, useAppSelector } from '@/state/appTypes';
import { openDialog } from '@/state/dialogs';
import { getInputErrors } from '@/state/inputsSelectors';

import { isNumber, MustBigNumber } from '@/lib/numbers';
import { getTradeStateWithDoubleValuesHasDiff } from '@/lib/tradeData';

import { AccountInfoDiffOutput } from './AccountInfoDiffOutput';

enum AccountInfoItem {
BuyingPower = 'buying-power',
MarginUsage = 'margin-usage',
AvailableBalance = 'available-balance',
PortfolioValue = 'portfolio-value',
}

const getUsageValue = (value: Nullable<TradeState<number>>) => {
Expand All @@ -56,21 +57,26 @@ export const AccountInfoConnectedState = () => {

const { dydxAccounts } = useAccounts();

const inputErrors = useAppSelector(getInputErrors, shallowEqual);
const subAccount = useAppSelector(getSubaccount, shallowEqual);
const isLoading = useAppSelector(calculateIsAccountLoading);
const listOfErrors = inputErrors?.map(({ code }: { code: string }) => code);

const { freeCollateral, marginUsage } = subAccount ?? {};
const { freeCollateral: availableBalance, marginUsage } = subAccount ?? {};
const portfolioValue = subAccount?.equity;

const hasDiff =
(!!marginUsage?.postOrder && getTradeStateWithDoubleValuesHasDiff(marginUsage)) ||
(!!freeCollateral?.postOrder && getTradeStateWithDoubleValuesHasDiff(freeCollateral));

const isAccountMarginUsageError = listOfErrors?.[0] === 'INVALID_NEW_ACCOUNT_MARGIN_USAGE';
!!availableBalance?.postOrder && getTradeStateWithDoubleValuesHasDiff(availableBalance);

const showHeader = !hasDiff && !isTablet;

const isPostOrderTradeStateNegative = useCallback(
(tradeStateValue: Nullable<TradeState<number>>) => {
return (
isNumber(tradeStateValue?.postOrder) && MustBigNumber(tradeStateValue?.postOrder).lt(0)
);
},
[]
);

return (
<$ConnectedAccountInfoContainer $showHeader={showHeader}>
{!showHeader ? null : (
Expand Down Expand Up @@ -125,60 +131,52 @@ export const AccountInfoConnectedState = () => {
<$Details
items={[
{
key: AccountInfoItem.MarginUsage,
hasError: isAccountMarginUsageError,
tooltip: 'cross-margin-usage',
isPositive: !MustBigNumber(marginUsage?.postOrder).gt(
MustBigNumber(marginUsage?.current)
key: AccountInfoItem.PortfolioValue,
hideDiff: true,
hasError: false,
isPositive: MustBigNumber(portfolioValue?.postOrder).gt(
MustBigNumber(portfolioValue?.current)
),
label: stringGetter({ key: STRING_KEYS.CROSS_MARGIN_USAGE }),
type: OutputType.Percent,
value: marginUsage,
slotRight: <MarginUsageRing value={getUsageValue(marginUsage)} />,
label: stringGetter({ key: STRING_KEYS.PORTFOLIO_VALUE }),
type: OutputType.Fiat,
value: portfolioValue,
},
{
key: AccountInfoItem.BuyingPower,
hasError:
isNumber(freeCollateral?.postOrder) &&
MustBigNumber(freeCollateral?.postOrder).lt(0),
tooltip: 'cross-free-collateral',
isPositive: MustBigNumber(freeCollateral?.postOrder).gt(
MustBigNumber(freeCollateral?.current)
key: AccountInfoItem.AvailableBalance,
hasError: isPostOrderTradeStateNegative(availableBalance),
isPositive: MustBigNumber(availableBalance?.postOrder).gt(
MustBigNumber(availableBalance?.current)
),
label: stringGetter({ key: STRING_KEYS.CROSS_FREE_COLLATERAL }),
label: stringGetter({ key: STRING_KEYS.AVAILABLE_BALANCE }),
type: OutputType.Fiat,
value:
MustBigNumber(freeCollateral?.current).lt(0) && freeCollateral?.postOrder === null
MustBigNumber(availableBalance?.current).lt(0) &&
availableBalance?.postOrder === null
? undefined
: freeCollateral,
: availableBalance,
slotRight: (
<WithTooltip tooltip="cross-margin-usage">
<MarginUsageRing value={getUsageValue(marginUsage)} />
</WithTooltip>
),
},
].map(
({
key,
hasError,
tooltip = undefined,
isPositive,
label,
type,
value,
slotRight,
}) => ({
({ key, hasError, hideDiff = false, isPositive, label, type, value, slotRight }) => ({
key,
label: (
<WithTooltip tooltip={tooltip}>
<$WithUsage>
{label}
{hasError ? (
<Icon iconName={IconName.CautionCircle} tw="text-color-error" />
) : (
slotRight
)}
</$WithUsage>
</WithTooltip>
<$WithUsage>
{label}
{hasError ? (
<Icon iconName={IconName.CautionCircle} tw="text-color-error" />
) : (
slotRight
)}
</$WithUsage>
),
value: (
<AccountInfoDiffOutput
hasError={hasError}
hideDiff={hideDiff}
isPositive={isPositive}
type={type}
value={value}
Expand Down Expand Up @@ -229,12 +227,23 @@ const $Details = styled(Details)<{ showHeader?: boolean }>`
font: var(--font-mini-book);
> * {
height: ${({ showHeader }) =>
!showHeader
? `calc(var(--account-info-section-height))`
: `calc((var(--account-info-section-height) - var(--tabs-height)))`};
padding: 0.625rem 1rem;
${({ showHeader }) =>
showHeader
? css`
height: calc((var(--account-info-section-height) - var(--tabs-height)));
padding: 0.625rem 1rem;
`
: css`
height: calc(var(--account-info-section-height));
padding: 1.25rem 1rem 0.6rem;
`}
display: flex;
flex-direction: column;
& > :last-child {
flex-grow: 1;
align-items: center;
}
}
@media ${breakpoints.tablet} {
Expand Down

0 comments on commit 8e446a9

Please sign in to comment.