Merge pull request #2344 from AdaptiveConsulting/max-quantity

fix: cap input quantity, truncate rfq card qty
AdaptiveConsulting · Feb 4, 2025 · c79b469 · c79b469
2 parents d8a024f + 0a9ffab
commit c79b469
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 8 deletions.
diff --git a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CreditRfqCard.tsx b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/CreditRfqCard.tsx
@@ -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>
   )
 }

diff --git a/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/styled.tsx b/packages/client/src/client/App/Credit/CreditRfqs/CreditRfqCards/styled.tsx
@@ -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`
@@ -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"]};
@@ -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;
+`
diff --git a/packages/client/src/client/App/Credit/NewRfq/state.ts b/packages/client/src/client/App/Credit/NewRfq/state.ts
@@ -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,
@@ -72,7 +76,7 @@ const quantity$ = prepareStream$(_quantity$, "").pipe(
     const numValue = Math.trunc(Math.abs(parseQuantity(quantity)))
     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(

diff --git a/packages/client/src/client/App/Credit/SellSide/sellSideState.ts b/packages/client/src/client/App/Credit/SellSide/sellSideState.ts
@@ -11,6 +11,7 @@ import {
 
 import { HIGHLIGHT_ROW_FLASH_TIME } from "@/client/constants"
 import {
+  applyMaximum,
   DECIMAL_SEPARATOR,
   DECIMAL_SEPARATOR_REGEXP,
   invertDirection,
@@ -216,8 +217,10 @@ export const [usePrice, price$] = bind(
 
         const truncated = formatter(inputQuantityAsNumber)
 
-        const value = Number(
-          truncated.replace(filterRegExp, "").replace(decimalRegExp, "."),
+        const value = applyMaximum(
+          Number(
+            truncated.replace(filterRegExp, "").replace(decimalRegExp, "."),
+          ),
         )
 
         return {

diff --git a/packages/client/src/client/utils/formatNumber.ts b/packages/client/src/client/utils/formatNumber.ts
@@ -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
+
+export const applyMaximum = (value: number): number =>
+  Math.min(value, MAX_INPUT_VALUE)
diff --git a/packages/client/src/services/credit/creditRfqs.ts b/packages/client/src/services/credit/creditRfqs.ts
@@ -11,6 +11,7 @@ import {
   withLatestFrom,
 } from "rxjs/operators"
 
+import { customNumberFormatter } from "@/client/utils"
 import {
   DealerBody,
   Direction,
@@ -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) =>
@@ -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)}`,
           }
       }
     }),