Skip to content

Commit

Permalink
Merge pull request #1013 from CAFECA-IO/fix/abnormal-tpsl
Browse files Browse the repository at this point in the history 
feat: 🎸 dont change tpsl when typing & fix init tp #1012 #1011
  • Loading branch information
@Luphia
Luphia authored Jul 14, 2023
2 parents 322a53f + 84ee2ac commit 2330bfd
Show file tree
Hide file tree
Showing 5 changed files with 170 additions and 12 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "src",
"version": "0.8.0+22.2",
"version": "0.8.0+23.3",
"private": true,
"scripts": {
"dev": "next dev",
Expand Down
67 changes: 64 additions & 3 deletions src/components/trade_tab/trade_tab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,13 @@ const TradeTab = () => {
const [shortTpSuggestion, setShortTpSuggestion, shortTpSuggestionRef] = useStateRef(0);
const [shortSlSuggestion, setShortSlSuggestion, shortSlSuggestionRef] = useStateRef(0);

const [isTyping, setIsTyping, isTypingRef] = useStateRef({
longTp: false,
longSl: false,
shortTp: false,
shortSl: false,
});

// Info: Fetch quotation the first time (20230327 - Shirley)
useEffect(() => {
if (!userCtx.enableServiceTerm) return;
Expand All @@ -214,10 +221,21 @@ const TradeTab = () => {
useEffect(() => {
setPrice();
setTpSlBounds();
checkTpSlWithinBounds();

if (
!isTypingRef.current.longSl &&
!isTypingRef.current.shortSl &&
!isTypingRef.current.longTp &&
!isTypingRef.current.shortTp
) {
checkTpSlWithinBounds();
}

renewPosition();
// eslint-disable-next-line no-console
}, [marketCtx.selectedTicker?.price]);

// TODO: FIXME: [To be optimized] May run more than 10 times in a second (20230714 - Shirley)
if (!longTpToggle && !shortTpToggle) setSuggestions();
}, [marketCtx.selectedTicker?.price, isTypingRef.current]);

// Info: Fetch quotation when ticker changed (20230327 - Shirley)
useEffect(() => {
Expand All @@ -242,6 +260,45 @@ const TradeTab = () => {
shortSlValueRef.current,
]);

const handleTypingStatusChangeRouter = (typingStatus: boolean) => {
const longTp = (typingStatus: boolean) => {
setIsTyping(prev => ({
...prev,
longTp: typingStatus,
}));
};

const longSl = (typingStatus: boolean) => {
setIsTyping(prev => ({
...prev,
longSl: typingStatus,
}));
};

const shortTp = (typingStatus: boolean) => {
setIsTyping(prev => ({
...prev,
shortTp: typingStatus,
}));
};

const shortSl = (typingStatus: boolean) => {
setIsTyping(prev => ({
...prev,
shortSl: typingStatus,
}));
};

return {
longTp,
longSl,
shortTp,
shortSl,
};
};

const handleTypingStatusChange = handleTypingStatusChangeRouter(false);

const setPrice = () => {
if (marketCtx.selectedTicker?.instId) {
const buyPrice = roundToDecimalPlaces(
Expand Down Expand Up @@ -802,6 +859,7 @@ const TradeTab = () => {
inputSize="h-25px w-70px text-sm"
decrementBtnSize="25"
incrementBtnSize="25"
onTypingStatusChange={handleTypingStatusChange.longTp}
/>
</div>
);
Expand Down Expand Up @@ -838,6 +896,7 @@ const TradeTab = () => {
inputSize="h-25px w-70px text-sm"
decrementBtnSize="25"
incrementBtnSize="25"
onTypingStatusChange={handleTypingStatusChange.longSl}
/>
</div>
);
Expand Down Expand Up @@ -944,6 +1003,7 @@ const TradeTab = () => {
inputSize="h-25px w-70px text-sm"
decrementBtnSize="25"
incrementBtnSize="25"
onTypingStatusChange={handleTypingStatusChange.shortTp}
/>
</div>
);
Expand Down Expand Up @@ -980,6 +1040,7 @@ const TradeTab = () => {
inputSize="h-25px w-70px text-sm"
decrementBtnSize="25"
incrementBtnSize="25"
onTypingStatusChange={handleTypingStatusChange.shortSl}
/>
</div>
);
Expand Down
68 changes: 63 additions & 5 deletions src/components/trade_tab_mobile/trade_tab_mobile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,12 +196,19 @@ const TradeTabMobile = () => {
const [shortTpSuggestion, setShortTpSuggestion, shortTpSuggestionRef] = useStateRef(0);
const [shortSlSuggestion, setShortSlSuggestion, shortSlSuggestionRef] = useStateRef(0);

const [isTyping, setIsTyping, isTypingRef] = useStateRef({
longTp: false,
longSl: false,
shortTp: false,
shortSl: false,
});

// Info: Fetch quotation the first time (20230327 - Shirley)
useEffect(() => {
if (!userCtx.enableServiceTerm) return;

(async () => {
setQuotation();
setPrice();

setTpSlBounds();
setSuggestions();
Expand All @@ -218,16 +225,24 @@ const TradeTabMobile = () => {

// Info: Calculate quotation when market price changes (20230427 - Shirley)
useEffect(() => {
setQuotation();
setPrice();
setTpSlBounds();
checkTpSlWithinBounds();
if (
!isTypingRef.current.longSl &&
!isTypingRef.current.shortSl &&
!isTypingRef.current.longTp &&
!isTypingRef.current.shortTp
) {
checkTpSlWithinBounds();
}

renewPosition();
}, [marketCtx.selectedTicker?.price]);

// Info: Fetch quotation when ticker changed (20230327 - Shirley)
useEffect(() => {
notificationCtx.emitter.once(ClickEvent.TICKER_CHANGED, async () => {
setQuotation();
setPrice();
setTpSlBounds();
setSuggestions();
renewPosition();
Expand All @@ -247,7 +262,46 @@ const TradeTabMobile = () => {
shortSlValueRef.current,
]);

const setQuotation = () => {
const handleTypingStatusChangeRouter = (typingStatus: boolean) => {
const longTp = (typingStatus: boolean) => {
setIsTyping(prev => ({
...prev,
longTp: typingStatus,
}));
};

const longSl = (typingStatus: boolean) => {
setIsTyping(prev => ({
...prev,
longSl: typingStatus,
}));
};

const shortTp = (typingStatus: boolean) => {
setIsTyping(prev => ({
...prev,
shortTp: typingStatus,
}));
};

const shortSl = (typingStatus: boolean) => {
setIsTyping(prev => ({
...prev,
shortSl: typingStatus,
}));
};

return {
longTp,
longSl,
shortTp,
shortSl,
};
};

const handleTypingStatusChange = handleTypingStatusChangeRouter(false);

const setPrice = () => {
if (marketCtx.selectedTicker?.instId) {
const buyPrice = roundToDecimalPlaces(
marketCtx.predictCFDClosePrice(marketCtx.selectedTicker?.instId, TypeOfPosition.SELL),
Expand Down Expand Up @@ -818,6 +872,7 @@ const TradeTabMobile = () => {
inputSize="h-25px w-70px text-sm"
decrementBtnSize="25"
incrementBtnSize="25"
onTypingStatusChange={handleTypingStatusChange.longTp}
/>
</div>
);
Expand Down Expand Up @@ -849,6 +904,7 @@ const TradeTabMobile = () => {
inputSize="h-25px w-70px text-sm"
decrementBtnSize="25"
incrementBtnSize="25"
onTypingStatusChange={handleTypingStatusChange.longSl}
/>
</div>
);
Expand Down Expand Up @@ -982,6 +1038,7 @@ const TradeTabMobile = () => {
inputSize="h-25px w-70px text-sm"
decrementBtnSize="25"
incrementBtnSize="25"
onTypingStatusChange={handleTypingStatusChange.shortTp}
/>
</div>
);
Expand Down Expand Up @@ -1015,6 +1072,7 @@ const TradeTabMobile = () => {
inputSize="h-25px w-70px text-sm"
decrementBtnSize="25"
incrementBtnSize="25"
onTypingStatusChange={handleTypingStatusChange.shortSl}
/>
</div>
);
Expand Down
44 changes: 41 additions & 3 deletions src/components/trading_input/trading_input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@ import {
DELAYED_HIDDEN_SECONDS,
INPUT_VALIDATION_DELAY,
TRADING_INPUT_STEP,
TYPING_KEYUP_DELAY,
} from '../../constants/display';
import useStateRef from 'react-usestateref';

interface ITradingInputProps {
inputInitialValue: number;
getInputValue?: (props: number) => void;
onTypingStatusChange?: (props: boolean) => void;

inputValueFromParent?: number;
setInputValueFromParent?: Dispatch<SetStateAction<number>>;
Expand Down Expand Up @@ -50,6 +52,7 @@ const TradingInput = ({

reachOppositeLimit,
disabled,
onTypingStatusChange,

...otherProps
}: ITradingInputProps) => {
Expand All @@ -60,6 +63,11 @@ const TradingInput = ({
typeof setTimeout
> | null>(null);

const [typingTimeout, setTypingTimeout, typingTimeoutRef] = useStateRef<ReturnType<
typeof setTimeout
> | null>(null);
const [isTyping, setIsTyping, isTypingRef] = useStateRef<boolean>(false);

const regex = /^\d*\.?\d{0,2}$/;

const passValueHandler = useCallback(
Expand Down Expand Up @@ -107,6 +115,26 @@ const TradingInput = ({
setValidationTimeout(newTimeout);
};

const onKeyDown = () => {
if (typingTimeout) {
clearTimeout(typingTimeout);
}

setIsTyping(true);
};

const onKeyUp = () => {
if (typingTimeout) {
clearTimeout(typingTimeout);
}

const newTimeout = setTimeout(() => {
setIsTyping(false);
}, TYPING_KEYUP_DELAY);

setTypingTimeout(newTimeout);
};

const inputChangeHandler: React.ChangeEventHandler<HTMLInputElement> = event => {
const value = event.target.value;

Expand Down Expand Up @@ -143,7 +171,7 @@ const TradingInput = ({
const change = inputValue - TRADING_INPUT_STEP;
const changeRounded = Math.round(change * 100) / 100;

// minimum margin is 0.01
// Info: minimum margin is 0.01 (20230714 - Shirley)
if (inputValue <= 0 || changeRounded < 0.01 || changeRounded < lowerLimit) {
return;
}
Expand All @@ -160,13 +188,21 @@ const TradingInput = ({
}, [inputValueFromParent, setInputValueFromParent, disabled]);

useEffect(() => {
// Info: Clean up validation timeout on unmount (20230424 - Shirley)
// Info: Clean up validation timeout when unmount (20230424 - Shirley)
return () => {
if (validationTimeout) {
clearTimeout(validationTimeout);
}

if (typingTimeout) {
clearTimeout(typingTimeout);
}
};
}, [validationTimeout]);
}, [validationTimeout, typingTimeout]);

useEffect(() => {
onTypingStatusChange && onTypingStatusChange(isTypingRef.current);
}, [isTypingRef.current]);

return (
<>
Expand Down Expand Up @@ -215,6 +251,8 @@ const TradingInput = ({
name={inputName}
onChange={inputChangeHandler}
placeholder={inputPlaceholder}
onKeyDown={onKeyDown}
onKeyUp={onKeyUp}
/>
</div>

Expand Down
1 change: 1 addition & 0 deletions src/constants/display.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,3 +286,4 @@ export const NEWS_IMG_WIDTH = 1440;
export const NEWS_IMG_HEIGHT = 753;
export const NEWS_INTRODUCTION_IN_TRADE_MAX_LENGTH = 200;
export const NEWS_INTRODUCTION_IN_GENERAL_MAX_LENGTH = 400;
export const TYPING_KEYUP_DELAY = 5000;

0 comments on commit 2330bfd

Please sign in to comment.