Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: cap input quantity, truncate rfq card qty #2344

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix: cap input quantity, truncate rfq card qty #2344

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CreditRfqCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,21 @@ import { isRfqTerminated } from "../../common"
import { CardFooter } from "./CardFooter"
import { CardHeader } from "./CardHeader"
import { Quote } from "./Quote/CardQuote"
import { CardContainer, DetailsWrapper, QuotesContainer } from "./styled"
import {
CardContainer,
DetailsWrapper,
QuantityTypography,
QuotesContainer,
} from "./styled"

const formatter = customNumberFormatter()
const Details = ({ quantity }: { quantity: number }) => {
return (
<DetailsWrapper>
<Typography variant="Text sm/Regular">RFQ DETAILS</Typography>
<Typography variant="Text sm/Regular">
<QuantityTypography variant="Text sm/Regular">
QTY: {formatter(quantity)}
</Typography>
</QuantityTypography>
</DetailsWrapper>
)
}
Expand Down
9 changes: 9 additions & 0 deletions packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/styled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import styled, { css, DefaultTheme, keyframes } from "styled-components"

import { FlexBox } from "@/client/components/FlexBox"
import { Typography } from "@/client/components/Typography"
import { Direction } from "@/generated/TradingGateway"

const cardFlash = ({ theme }: { theme: DefaultTheme }) => keyframes`
Expand Down Expand Up @@ -51,6 +52,9 @@ export const Row = styled.div`
`

export const DetailsWrapper = styled(Row)`
white-space: nowrap;
display: flex;
gap: ${({ theme }) => theme.newTheme.spacing["4xl"]};
padding: ${({ theme }) => theme.newTheme.spacing.xs};
background: ${({ theme }) =>
theme.newTheme.color["Colors/Background/bg-quaternary"]};
Expand Down Expand Up @@ -126,3 +130,8 @@ export const CloseRfqButton = styled(FooterButton)`
margin-right: ${({ theme }) => theme.newTheme.spacing.md};
}
`

export const QuantityTypography = styled(Typography)`
overflow: hidden;
text-overflow: ellipsis;
`
8 changes: 6 additions & 2 deletions packages/client/src/client/App/Credit/NewRfq/state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,11 @@ import {
} from "rxjs"

import { CREDIT_RFQ_EXPIRY_SECONDS } from "@/client/constants"
import { createApplyCharacterMultiplier, parseQuantity } from "@/client/utils"
import {
applyMaximum,
createApplyCharacterMultiplier,
parseQuantity,
} from "@/client/utils"
import {
ACK_CREATE_RFQ_RESPONSE,
DealerBody,
Expand Down Expand Up @@ -72,7 +76,7 @@ const quantity$ = prepareStream$(_quantity$, "").pipe(
const numValue = Math.trunc(Math.abs(parseQuantity(quantity)))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion(/later): I would put this whole thing in the util function, or create a new one, and could perhaps simplify If parseQuantity() returns NaN, which it can, then we really catch it as early as possible.
Also, a near dup of code in formatNotional, but that has no Math.trunc() ..

const lastChar = quantity.slice(-1).toLowerCase()
const value = applyCharacterMultiplier(numValue, lastChar)
return !Number.isNaN(value) ? value : 0
return !Number.isNaN(value) ? applyMaximum(value) : 0
}),
)
const dealerIds$ = merge(
Expand Down
7 changes: 5 additions & 2 deletions packages/client/src/client/App/Credit/SellSide/sellSideState.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {

import { HIGHLIGHT_ROW_FLASH_TIME } from "@/client/constants"
import {
applyMaximum,
DECIMAL_SEPARATOR,
DECIMAL_SEPARATOR_REGEXP,
invertDirection,
Expand Down Expand Up @@ -216,8 +217,10 @@ export const [usePrice, price$] = bind(

const truncated = formatter(inputQuantityAsNumber)

const value = Number(
truncated.replace(filterRegExp, "").replace(decimalRegExp, "."),
const value = applyMaximum(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion re above: some could be extracted to util module (e.g. decimalRegExp is a dup)

Number(
truncated.replace(filterRegExp, "").replace(decimalRegExp, "."),
),
)

return {
Expand Down
5 changes: 5 additions & 0 deletions packages/client/src/client/utils/formatNumber.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,3 +230,8 @@ export const parseQuantity = (rawValue: string): number =>
Number(rawValue.replace(filterRegExp, "").replace(decimalRegExp, "."))

export const adjustUserCreditQuantity = (value: number): number => value * 1000

const MAX_INPUT_VALUE = 100000000
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minor: 100 mill, but hard to read, I always use underscores ..


export const applyMaximum = (value: number): number =>
Math.min(value, MAX_INPUT_VALUE)
5 changes: 4 additions & 1 deletion packages/client/src/services/credit/creditRfqs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
withLatestFrom,
} from "rxjs/operators"

import { customNumberFormatter } from "@/client/utils"
import {
DealerBody,
Direction,
Expand Down Expand Up @@ -247,6 +248,8 @@ export const creditQuotes$ = creditRfqsById$.pipe(

const INACTIVE_PASSED_QUOTE_STATE = "inactivePassedQuoteState"

const formatter = customNumberFormatter()

export const [useQuoteState] = bind((dealerId, rfqId) =>
creditQuotes$.pipe(
map((quotes) =>
Expand Down Expand Up @@ -274,7 +277,7 @@ export const [useQuoteState] = bind((dealerId, rfqId) =>
default:
return {
type: quote.state.type,
payload: `$${quote.state.payload}`,
payload: `$${formatter(quote.state.payload)}`,
}
}
}),
Expand Down