diff --git a/hooks/useEstimateSwap.ts b/hooks/useEstimateSwap.ts index ab2bf1cc..ff9bafbf 100644 --- a/hooks/useEstimateSwap.ts +++ b/hooks/useEstimateSwap.ts @@ -37,17 +37,18 @@ export const useEstimateSwap = ({ forceUpdate, }); useEffect(() => { - if (dclEstimateResult?.tag && v1EstimateResult?.tag && validator()) { + if ( + dclEstimateResult?.tag && + v1EstimateResult?.tag && + validator() && + !v1Loading && + !dclLoading + ) { getBestEstimateResult(); setEstimateLoading(false); } - if (tokenIn_amount == "0" || !tokenIn_amount) { - setEstimateResult((prev: any) => { - if (prev?.amount_out !== "0" || !prev?.loadingComplete) { - return { ...prev, amount_out: "0", loadingComplete: true }; - } - return prev; - }); + if (!Number(tokenIn_amount || 0)) { + setEstimateLoading(false); } }, [ dclEstimateResult?.tag, @@ -55,9 +56,13 @@ export const useEstimateSwap = ({ dclEstimateResult?.amount_out, v1EstimateResult?.amount_out, tokenIn_amount, + v1Loading, + dclLoading, ]); useEffect(() => { - setEstimateLoading(v1Loading || dclLoading); + if (v1Loading || dclLoading) { + setEstimateLoading(true); + } }, [v1Loading, dclLoading]); function getBestEstimateResult() { const { amount_out: dcl_amount_out } = dclEstimateResult!; @@ -65,10 +70,10 @@ export const useEstimateSwap = ({ console.log(dcl_amount_out, v1_amount_out, "dcl_amount_out, v1_amount_out"); // best is v1 if (new Decimal(v1_amount_out || 0).gt(dcl_amount_out || 0)) { - setEstimateResult({ ...v1EstimateResult, loadingComplete: true }); + setEstimateResult(v1EstimateResult); } else if (new Decimal(dcl_amount_out || 0).gt(v1_amount_out || 0)) { // best is dcl - setEstimateResult({ ...dclEstimateResult, loadingComplete: true }); + setEstimateResult(dclEstimateResult); } } function validator() { diff --git a/interfaces/margin.ts b/interfaces/margin.ts index ae1be4d8..d19c7b8b 100644 --- a/interfaces/margin.ts +++ b/interfaces/margin.ts @@ -42,7 +42,6 @@ export interface IEstimateResult { fee: number; tag: string; from: "v1" | "dcl"; - loadingComplete?: boolean; } export interface IPool { amount_in?: string; diff --git a/screens/Trading/components/TradingOperate.tsx b/screens/Trading/components/TradingOperate.tsx index 98f0998f..8ef90fcb 100644 --- a/screens/Trading/components/TradingOperate.tsx +++ b/screens/Trading/components/TradingOperate.tsx @@ -71,7 +71,6 @@ const TradingOperate: React.FC = ({ onMobileClose, id }) => const [warnTip, setWarnTip] = useState(""); const [LiqPrice, setLiqPrice] = useState(""); const [forceUpdate, setForceUpdate] = useState(0); - const [lastTokenInAmount, setLastTokenInAmount] = useState(0); const customInputRef = useRef(null); const accountId = useAppSelector(getAccountId); const { filteredTokenTypeMap } = useRegisterTokenType(); @@ -129,14 +128,17 @@ const TradingOperate: React.FC = ({ onMobileClose, id }) => /** * longInput shortInput deal start * */ + // TODOXX useEffect(() => { const inputUsdCharcate1 = getAssetPrice(ReduxcategoryAssets1); const inputUsdCharcate2 = getAssetPrice(ReduxcategoryAssets2); if (inputUsdCharcate1 && estimateData) { + // out put input updateOutput(activeTab, inputUsdCharcate1); } if (inputUsdCharcate2) { + // swap token in amount updateInputAmounts(activeTab, inputUsdCharcate2, inputUsdCharcate1); } }, [ @@ -145,10 +147,9 @@ const TradingOperate: React.FC = ({ onMobileClose, id }) => rangeMount, estimateData, slippageTolerance, - forceUpdate, tokenInAmount, - activeTab, // Add activeTab to dependencies if needed ReduxcategoryAssets1, + ReduxcategoryAssets2, ]); // update liq price for long useDebounce( @@ -176,7 +177,7 @@ const TradingOperate: React.FC = ({ onMobileClose, id }) => } }, 200, - [activeTab, longOutput, longInput], + [activeTab, estimateData], ); // update liq price for short useDebounce( @@ -213,31 +214,29 @@ const TradingOperate: React.FC = ({ onMobileClose, id }) => setLiqPrice(liq_price || "0"); } } - setForceUpdateLoading(!estimateData?.loadingComplete); }, 200, [estimateData, activeTab], ); - // update price and make refresh icon spin + // force estimating useEffect(() => { const interval = setInterval(() => { - if (tokenInAmount === lastTokenInAmount && longInput) { - setTokenInAmount((prev) => prev); + // TODOXX + if (tokenInAmount) { setForceUpdate((prev) => prev + 1); setForceUpdateLoading(true); - } else { - setLastTokenInAmount(tokenInAmount); } }, 20_000); return () => clearInterval(interval); - }, [tokenInAmount, lastTokenInAmount]); + }, [tokenInAmount]); + // TODOXX // for same input, forceUpdateLoading is true useEffect(() => { if (forceUpdateLoading) { const timer = setTimeout(() => { setForceUpdateLoading(false); - }, 4000); + }, 1000); return () => clearTimeout(timer); } @@ -384,7 +383,6 @@ const TradingOperate: React.FC = ({ onMobileClose, id }) => dispatch(setReduxActiveTab(tabString)); setActiveTab(tabString); initCateState(tabString); - setForceUpdate((prev) => prev + 1); }; const getTabClassName = (tabName: string) => { return activeTab === tabName @@ -479,6 +477,7 @@ const TradingOperate: React.FC = ({ onMobileClose, id }) => function getAssetPrice(categoryId) { return categoryId ? combinedAssetsData[categoryId["token_id"]]?.price?.usd : 0; } + // TODOXX function updateOutput(tab: string, inputUsdCharcate: number) { /** * @param inputUsdCharcate category1 current price @@ -502,6 +501,7 @@ const TradingOperate: React.FC = ({ onMobileClose, id }) => outputUsdSetter(inputUsdCharcate * tokenInAmount); } } + // TODOXX function updateInputAmounts(tab, inputUsdCharcate2, inputUsdCharcate1) { /** * @param inputUsdCharcate2 category2 current price @@ -596,6 +596,7 @@ const TradingOperate: React.FC = ({ onMobileClose, id }) => if (!tokenInAmount || forceUpdateLoading) { return; } + // TODOXX setForceUpdate((prev) => prev + 1); setForceUpdateLoading(true); }} @@ -674,7 +675,6 @@ const TradingOperate: React.FC = ({ onMobileClose, id }) => tokenList={isMainStream ? categoryAssets2 : categoryAssets2MEME} type="cate2" isMemeCategory={!isMainStream} - setForceUpdate={() => setForceUpdate((prev) => prev + 1)} />

${longInputUsd.toFixed(2)}

@@ -812,7 +812,6 @@ const TradingOperate: React.FC = ({ onMobileClose, id }) => tokenList={isMainStream ? categoryAssets2 : categoryAssets2MEME} type="cate2" isMemeCategory={!isMainStream} - setForceUpdate={() => setForceUpdate((prev) => prev + 1)} />

${shortInputUsd.toFixed(2)}

diff --git a/screens/Trading/components/tokenbox.tsx b/screens/Trading/components/tokenbox.tsx index 8e56b74e..fc666082 100644 --- a/screens/Trading/components/tokenbox.tsx +++ b/screens/Trading/components/tokenbox.tsx @@ -22,14 +22,12 @@ interface TradingTokenInter { tokenList: Array; type: string; setMaxInputBanlance?: (key: string) => void; - setForceUpdate?: () => void; isMemeCategory?: boolean; } const TradingToken: React.FC = ({ tokenList, type, setMaxInputBanlance, - setForceUpdate, isMemeCategory, }) => { let timer: NodeJS.Timeout; @@ -86,7 +84,6 @@ const TradingToken: React.FC = ({ } else { console.warn(`Unsupported type: ${type}`); } - setForceUpdate && setForceUpdate(); setShowModal(false); };