Merge pull request #1439 from zhouyuhe/fix/rfq-mode

Fix/rfq-mode
AdaptiveConsulting · Feb 11, 2020 · c7b128b · c7b128b
2 parents 844b0f7 + cde3e80
commit c7b128b
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 36 deletions.
diff --git a/src/client/src/apps/MainRoute/widgets/spotTile/components/PriceButton/PriceButton.tsx b/src/client/src/apps/MainRoute/widgets/spotTile/components/PriceButton/PriceButton.tsx
@@ -22,6 +22,7 @@ interface PriceButtonProps {
   disabled?: boolean
   expired?: boolean
   currencyPairSymbol: string
+  isAnalyticsView: boolean
 }
 
 const renderPips = (pips: number) => (pips.toString().length === 1 ? `0${pips}` : pips)
@@ -41,6 +42,7 @@ const PriceButtonComp: React.FC<PriceButtonProps> = ({
   disabled = false,
   expired = false,
   currencyPairSymbol,
+  isAnalyticsView,
 }) => {
   const bigFigure = getBigFigureDisplay(big, rawRate)
   const hasPrice = rawRate !== 0
@@ -51,6 +53,7 @@ const PriceButtonComp: React.FC<PriceButtonProps> = ({
       onClick={handleClick}
       priceAnnounced={!!priceAnnounced}
       disabled={isDisabled}
+      isAnalyticsView={isAnalyticsView}
       data-qa="price-button__trade-button"
       data-qa-id={`direction-${direction.toLowerCase()}-${currencyPairSymbol.toLowerCase()}`}
     >

diff --git a/src/client/src/apps/MainRoute/widgets/spotTile/components/PriceButton/styled.tsx b/src/client/src/apps/MainRoute/widgets/spotTile/components/PriceButton/styled.tsx
@@ -31,7 +31,11 @@ const getAnimationCSSProperty = (props: { direction: Direction; theme: Theme })
 const backgroundEffect = ({ priceAnnounced, ...rest }: { priceAnnounced: boolean }) =>
   priceAnnounced ? getAnimationCSSProperty(rest as { direction: Direction; theme: Theme }) : ''
 
-export const TradeButton = styled.button<{ direction: Direction; priceAnnounced: boolean }>`
+export const TradeButton = styled.button<{
+  direction: Direction
+  priceAnnounced: boolean
+  isAnalyticsView: boolean
+}>`
   background-color: ${({ theme }) => theme.core.lightBackground};
   border-radius: 3px;
   color: ${({ theme, priceAnnounced, direction }) =>
@@ -40,10 +44,9 @@ export const TradeButton = styled.button<{ direction: Direction; priceAnnounced:
   cursor: pointer;
   border: none;
   outline: none;
-  min-height: 2rem;
-  max-height: 3.7rem;
+  height: ${({ isAnalyticsView }) => (isAnalyticsView ? '50%' : '59px')}
   min-width: 125px;
-  padding: 0.7rem 1.5rem;
+  padding: 0.6rem 1.5rem 0.7rem 1.5rem;
   margin-bottom: 2px;
   ${backgroundEffect}
 

diff --git a/src/client/src/apps/MainRoute/widgets/spotTile/components/PriceControls/PriceControls.tsx b/src/client/src/apps/MainRoute/widgets/spotTile/components/PriceControls/PriceControls.tsx
@@ -94,6 +94,7 @@ const PriceControls: React.FC<Props> = ({
         disabled={disabled}
         expired={isRfqStateExpired}
         currencyPairSymbol={currencyPair.symbol}
+        isAnalyticsView={isAnalyticsView}
       />
     ) : null
   }

diff --git a/src/client/src/apps/MainRoute/widgets/spotTile/components/PriceControls/styled.tsx b/src/client/src/apps/MainRoute/widgets/spotTile/components/PriceControls/styled.tsx
@@ -1,10 +1,13 @@
 import styled from 'styled-components'
 
-export const PriceControlsStyle = styled('div')<{ isAnalyticsView: boolean, isTradeExecutionInFlight?: boolean }>`
+export const PriceControlsStyle = styled('div')<{
+  isAnalyticsView: boolean
+  isTradeExecutionInFlight?: boolean
+}>`
   display: flex;
   justify-content: space-between;
   ${({ isAnalyticsView }) => (isAnalyticsView ? `` : `align-items: center; margin-top: 15px;`)}
-  ${({isTradeExecutionInFlight}) => (!isTradeExecutionInFlight && 'position: relative')}
+  ${({ isTradeExecutionInFlight }) => !isTradeExecutionInFlight && 'position: relative'}
 `
 
 export const PriceButtonDisabledPlaceholder = styled.div`
@@ -33,5 +36,5 @@ export const Icon = styled.i`
 `
 
 export const AdaptiveLoaderWrapper = styled.div`
-  margin: -5px 0 3px;
+  margin: 0 3px;
 `
diff --git a/...ient/src/apps/MainRoute/widgets/spotTile/components/Tile/__snapshots__/Tile.test.tsx.snap b/...ient/src/apps/MainRoute/widgets/spotTile/components/Tile/__snapshots__/Tile.test.tsx.snap
@@ -49,10 +49,9 @@ exports[`Snapshot, state derived from props, DISCONNECTED 1`] = `
   cursor: pointer;
   border: none;
   outline: none;
-  min-height: 2rem;
-  max-height: 3.7rem;
+  height: 59px;
   min-width: 125px;
-  padding: 0.7rem 1.5rem;
+  padding: 0.6rem 1.5rem 0.7rem 1.5rem;
   margin-bottom: 2px;
   cursor: initial;
   pointer-events: none;
@@ -482,10 +481,9 @@ exports[`Snapshot, state derived from props, RFQ canRequest 1`] = `
   cursor: pointer;
   border: none;
   outline: none;
-  min-height: 2rem;
-  max-height: 3.7rem;
+  height: 59px;
   min-width: 125px;
-  padding: 0.7rem 1.5rem;
+  padding: 0.6rem 1.5rem 0.7rem 1.5rem;
   margin-bottom: 2px;
   cursor: initial;
   pointer-events: none;
@@ -1002,10 +1000,9 @@ exports[`Snapshot, state derived from props, RFQ expired 1`] = `
   cursor: pointer;
   border: none;
   outline: none;
-  min-height: 2rem;
-  max-height: 3.7rem;
+  height: 59px;
   min-width: 125px;
-  padding: 0.7rem 1.5rem;
+  padding: 0.6rem 1.5rem 0.7rem 1.5rem;
   margin-bottom: 2px;
   cursor: initial;
   pointer-events: none;
@@ -1541,10 +1538,9 @@ exports[`Snapshot, state derived from props, RFQ received 1`] = `
   cursor: pointer;
   border: none;
   outline: none;
-  min-height: 2rem;
-  max-height: 3.7rem;
+  height: 59px;
   min-width: 125px;
-  padding: 0.7rem 1.5rem;
+  padding: 0.6rem 1.5rem 0.7rem 1.5rem;
   margin-bottom: 2px;
   -webkit-animation: hlRYgF 5s;
   animation: hlRYgF 5s;
@@ -1568,10 +1564,9 @@ exports[`Snapshot, state derived from props, RFQ received 1`] = `
   cursor: pointer;
   border: none;
   outline: none;
-  min-height: 2rem;
-  max-height: 3.7rem;
+  height: 59px;
   min-width: 125px;
-  padding: 0.7rem 1.5rem;
+  padding: 0.6rem 1.5rem 0.7rem 1.5rem;
   margin-bottom: 2px;
   -webkit-animation: ceeoSx 5s;
   animation: ceeoSx 5s;
@@ -2126,7 +2121,7 @@ exports[`Snapshot, state derived from props, RFQ requested 1`] = `
 }
 
 .c7 {
-  margin: -5px 0 3px;
+  margin: 0 3px;
 }
 
 .c16 {
@@ -2542,10 +2537,9 @@ exports[`Snapshot, state derived from props, defaults, RFQ none, should be able
   cursor: pointer;
   border: none;
   outline: none;
-  min-height: 2rem;
-  max-height: 3.7rem;
+  height: 59px;
   min-width: 125px;
-  padding: 0.7rem 1.5rem;
+  padding: 0.6rem 1.5rem 0.7rem 1.5rem;
   margin-bottom: 2px;
 }
 
@@ -2567,10 +2561,9 @@ exports[`Snapshot, state derived from props, defaults, RFQ none, should be able
   cursor: pointer;
   border: none;
   outline: none;
-  min-height: 2rem;
-  max-height: 3.7rem;
+  height: 59px;
   min-width: 125px;
-  padding: 0.7rem 1.5rem;
+  padding: 0.6rem 1.5rem 0.7rem 1.5rem;
   margin-bottom: 2px;
 }
 
@@ -3007,10 +3000,9 @@ exports[`Snapshot, state derived from props, in trade 1`] = `
   cursor: pointer;
   border: none;
   outline: none;
-  min-height: 2rem;
-  max-height: 3.7rem;
+  height: 59px;
   min-width: 125px;
-  padding: 0.7rem 1.5rem;
+  padding: 0.6rem 1.5rem 0.7rem 1.5rem;
   margin-bottom: 2px;
   cursor: initial;
   pointer-events: none;

diff --git a/src/client/src/apps/MainRoute/widgets/spotTile/components/analyticsTile/styled.tsx b/src/client/src/apps/MainRoute/widgets/spotTile/components/analyticsTile/styled.tsx
@@ -4,17 +4,17 @@ import { Platform } from 'rt-platforms'
 
 export const AnalyticsTileContent = styled.div`
   display: flex;
-  height: 85%;
+  height: 90%;
   justify-content: space-between;
 `
-export const GraphNotionalWrapper = styled.div<{isTimerOn: boolean}>`
+export const GraphNotionalWrapper = styled.div<{ isTimerOn: boolean }>`
   min-width: 0; //fixed bug with recharts resizing
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   z-index: 2;
-  max-height: ${({isTimerOn}) => (isTimerOn && '103px')};
+  max-height: ${({ isTimerOn }) => isTimerOn && '103px'};
 `
 export const PriceControlWrapper = styled.div`
   display: flex;

diff --git a/src/client/src/apps/MainRoute/widgets/spotTile/components/stories/PriceButton.stories.tsx b/src/client/src/apps/MainRoute/widgets/spotTile/components/stories/PriceButton.stories.tsx
@@ -17,6 +17,7 @@ priceStories.add('Price button', () => {
         tenth: 22,
         rawRate: 33.0122,
       }
+  const isAnalyticsView = boolean('isAnalyticsView', false)
 
   return (
     <Story>
@@ -25,12 +26,14 @@ priceStories.add('Price button', () => {
           <PriceButton
             direction={Direction.Buy}
             handleClick={handleClick}
+            isAnalyticsView={isAnalyticsView}
             currencyPairSymbol={'eurusd'}
             {...priceProps}
           />
           <PriceButton
             direction={Direction.Sell}
             handleClick={handleClick}
+            isAnalyticsView={isAnalyticsView}
             currencyPairSymbol={'eurusd'}
             {...priceProps}
           />

diff --git a/src/client/src/apps/MainRoute/widgets/spotTile/epics/rfqEpics.ts b/src/client/src/apps/MainRoute/widgets/spotTile/epics/rfqEpics.ts
@@ -33,6 +33,8 @@ type RfqReceivedTimerCancellableType =
   | RfqExpiredActionType
   | RfqResetActionType
   | RfqCancelActionType
+  | RfqRequestActionType
+  | RfqRequoteActionType
 type RfqRequoteActionType = ReturnType<typeof rfqRequote>
 
 const EXPIRATION_TIMEOUT_MS = 10000
@@ -110,7 +112,8 @@ export const rfqReceivedEpic: ApplicationEpic<{}> = action$ =>
         ofType<Action, RfqReceivedTimerCancellableType>(
           TILE_ACTION_TYPES.RFQ_RESET,
           TILE_ACTION_TYPES.RFQ_CANCEL,
-          TILE_ACTION_TYPES.RFQ_REJECT,
+          TILE_ACTION_TYPES.RFQ_REQUEST,
+          TILE_ACTION_TYPES.RFQ_REQUOTE,
         ),
         filter(cancelAction => cancelAction.payload.currencyPair.symbol === currencyPair.symbol),
       )