From 812ef8858458fd00b86a077f865b07e747e6b946 Mon Sep 17 00:00:00 2001 From: Jiro Date: Thu, 27 Feb 2025 20:57:17 -0800 Subject: [PATCH 1/3] Add feat to switch to Market v3 in case no route in paraswap --- public/locales/en.json | 2 + src/components/Swap/SwapBestTrade.tsx | 27 +++++++++ .../NoLiquiditySwapConfirmation.tsx | 58 +++++++++++++++++++ src/pages/SwapPage/SwapMain.tsx | 1 + src/pages/SwapPage/V3/Swap/index.tsx | 1 + 5 files changed, 89 insertions(+) create mode 100644 src/components/Swap/orbs/LiquidityHub/NoLiquiditySwapConfirmation.tsx diff --git a/public/locales/en.json b/public/locales/en.json index 49742c434..f340591ae 100755 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -304,6 +304,8 @@ "poolFound": "Pool Found", "manageThisPool": "Manage this pool", "noLiquidityinPool": "You don’t have liquidity in this pool yet", + "noLiquidityinFound": "No Liquidity is found in the paraswap.", + "useMarketV3": "Would you use the Market V3?", "nopoolFound": "No pool found", "createPool": "Create pool", "invalidPair": "Invalid pair", diff --git a/src/components/Swap/SwapBestTrade.tsx b/src/components/Swap/SwapBestTrade.tsx index 164a4782f..0740d4d40 100644 --- a/src/components/Swap/SwapBestTrade.tsx +++ b/src/components/Swap/SwapBestTrade.tsx @@ -22,6 +22,9 @@ import { useSwapActionHandlers, useSwapState, } from 'state/swap/hooks'; + +import { useDerivedSwapInfo as useV3DerivedSwapInfo } from 'state/swap/v3/hooks'; + import { useExpertModeManager, useUserSlippageTolerance, @@ -100,7 +103,10 @@ import { useLiquidityHubQuote, useGetBetterPrice, } from './orbs/LiquidityHub/hooks'; +import { NoLiquiditySwapConfirmation } from './orbs/LiquidityHub/NoLiquiditySwapConfirmation'; import { LiquidityHubSwapConfirmation } from './orbs/LiquidityHub/LiquidityHubSwapConfirmation'; +import { V3TradeState } from 'hooks/v3/useBestV3Trade'; + import { PoweredByOrbs } from '@orbs-network/swap-ui'; import { LiquidityHubSwapDetails, @@ -119,6 +125,7 @@ const SwapBestTrade: React.FC<{ const [liquidityHubDisabled, setLiquidityHubDisabled] = useState(false); const [swappingLiquidityHub, setSwappingLiquidityHub] = useState(false); const [showLiquidityHubConfirm, setShowLiquidityHubConfirm] = useState(false); + const [showNoLiquidityConfirm, setShowNoLiquidityConfirm] = useState(false); // token warning stuff // const [loadedInputCurrency, loadedOutputCurrency] = [ @@ -169,6 +176,11 @@ const SwapBestTrade: React.FC<{ inputError: swapInputError, autoSlippage, } = useDerivedSwapInfo(); + + const { + v3TradeState: { state: v3TradeState }, + } = useV3DerivedSwapInfo(); + const finalizedTransaction = useTransactionFinalizer(); const [isExpertMode] = useExpertModeManager(); const { @@ -623,6 +635,12 @@ const SwapBestTrade: React.FC<{ } }, [nativeConvertApproval]); + useEffect(() => { + if (optimalRateError) { + setShowNoLiquidityConfirm(true); + } + }, [optimalRateError]); + const userHasSpecifiedInputOutput = Boolean( currencies[Field.INPUT] && currencies[Field.OUTPUT] && @@ -1289,6 +1307,15 @@ const SwapBestTrade: React.FC<{ onConfirm={handleConfirmTokenWarning} onDismiss={handleDismissTokenWarning} /> + {/* optimalRateError */} + + setShowNoLiquidityConfirm(false)} + inputAddress={parsedCurrency0Id} + outputAddress={parsedCurrency1Id} + /> + void; + inputAddress: string; + outputAddress: string; +} +export const NoLiquiditySwapConfirmation: React.FC = ({ + isOpen, + onClose, + inputAddress, + outputAddress, +}) => { + const history = useHistory(); + const { t } = useTranslation(); + + const handleUseV3 = () => { + history.push( + `/swap?swapIndex=2¤cy0=${inputAddress}¤cy1=${outputAddress}`, + ); + }; + return ( + + + + + + +
{t('noLiquidityinFound')}
+ + +

{t('useMarketV3')}

+ + + + + {' '} + + + ); +}; +const StyledNoLiquiditySwapConfirmationModal = styled(CustomModal)({ + '& .customModalBackdrop': { + backgroundColor: 'rgba(0, 0, 0, 0.05)', + }, +}); diff --git a/src/pages/SwapPage/SwapMain.tsx b/src/pages/SwapPage/SwapMain.tsx index 1c8f75d07..85a3cb729 100644 --- a/src/pages/SwapPage/SwapMain.tsx +++ b/src/pages/SwapPage/SwapMain.tsx @@ -216,6 +216,7 @@ const SwapMain: React.FC = () => { updateIsV2(true); updateIsV4(false); } + setSelectedIndex(Number(swapType)); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [swapType]); diff --git a/src/pages/SwapPage/V3/Swap/index.tsx b/src/pages/SwapPage/V3/Swap/index.tsx index 78cc5d5e5..580ea6b68 100644 --- a/src/pages/SwapPage/V3/Swap/index.tsx +++ b/src/pages/SwapPage/V3/Swap/index.tsx @@ -251,6 +251,7 @@ const SwapV3Page: React.FC = () => { ); const routeNotFound = !trade?.route; + console.log('v3TradeState', v3TradeState); const isLoadingRoute = toggledVersion === Version.v3 && V3TradeState.LOADING === v3TradeState; From f6707f7284384e61eb1ee13b961987a45dd59d58 Mon Sep 17 00:00:00 2001 From: Jiro Date: Thu, 27 Feb 2025 20:58:17 -0800 Subject: [PATCH 2/3] Remove logs --- src/pages/SwapPage/V3/Swap/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/SwapPage/V3/Swap/index.tsx b/src/pages/SwapPage/V3/Swap/index.tsx index 580ea6b68..78cc5d5e5 100644 --- a/src/pages/SwapPage/V3/Swap/index.tsx +++ b/src/pages/SwapPage/V3/Swap/index.tsx @@ -251,7 +251,6 @@ const SwapV3Page: React.FC = () => { ); const routeNotFound = !trade?.route; - console.log('v3TradeState', v3TradeState); const isLoadingRoute = toggledVersion === Version.v3 && V3TradeState.LOADING === v3TradeState; From 055669c2a77adeb81f6044d3d34b0068dc450c50 Mon Sep 17 00:00:00 2001 From: Jiro Date: Fri, 28 Feb 2025 09:36:20 -0800 Subject: [PATCH 3/3] Add feature to switch in case no liquidity --- public/locales/en.json | 2 + src/components/Swap/SwapBestTrade.tsx | 20 ++++-- .../NoLiquiditySwapConfirmation.tsx | 64 +++++++++++++++---- 3 files changed, 68 insertions(+), 18 deletions(-) diff --git a/public/locales/en.json b/public/locales/en.json index f340591ae..c56338d6e 100755 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -306,6 +306,8 @@ "noLiquidityinPool": "You don’t have liquidity in this pool yet", "noLiquidityinFound": "No Liquidity is found in the paraswap.", "useMarketV3": "Would you use the Market V3?", + "availableLiquidityInV3": "It's available in Market V3. Would you use it?", + "seekingLiquidityinV3": "Seeking liquidity in V3 Market ...", "nopoolFound": "No pool found", "createPool": "Create pool", "invalidPair": "Invalid pair", diff --git a/src/components/Swap/SwapBestTrade.tsx b/src/components/Swap/SwapBestTrade.tsx index 0740d4d40..b37173134 100644 --- a/src/components/Swap/SwapBestTrade.tsx +++ b/src/components/Swap/SwapBestTrade.tsx @@ -126,6 +126,8 @@ const SwapBestTrade: React.FC<{ const [swappingLiquidityHub, setSwappingLiquidityHub] = useState(false); const [showLiquidityHubConfirm, setShowLiquidityHubConfirm] = useState(false); const [showNoLiquidityConfirm, setShowNoLiquidityConfirm] = useState(false); + const [inputValue, setInputValue] = useState(''); + const [outputValue, setOutputValue] = useState(''); // token warning stuff // const [loadedInputCurrency, loadedOutputCurrency] = [ @@ -866,6 +868,7 @@ const SwapBestTrade: React.FC<{ const handleTypeInput = useCallback( (value: string) => { + setInputValue(value); onUserInput(Field.INPUT, value); setSwapType(SwapSide.SELL); }, @@ -873,6 +876,7 @@ const SwapBestTrade: React.FC<{ ); const handleTypeOutput = useCallback( (value: string) => { + setOutputValue(value); onUserInput(Field.OUTPUT, value); setSwapType(SwapSide.BUY); }, @@ -1308,13 +1312,15 @@ const SwapBestTrade: React.FC<{ onDismiss={handleDismissTokenWarning} /> {/* optimalRateError */} - - setShowNoLiquidityConfirm(false)} - inputAddress={parsedCurrency0Id} - outputAddress={parsedCurrency1Id} - /> + {showNoLiquidityConfirm && ( + setShowNoLiquidityConfirm(false)} + parsedAmount={parsedAmounts} + inputValue={inputValue} + outputValue={outputValue} + /> + )} void; - inputAddress: string; - outputAddress: string; + inputValue: string; + outputValue: string; } export const NoLiquiditySwapConfirmation: React.FC = ({ isOpen, + parsedAmount, onClose, - inputAddress, - outputAddress, + inputValue, + outputValue, }) => { - const history = useHistory(); const { t } = useTranslation(); + const { isV4 } = useIsV4(); + const history = useHistory(); + + const { currencies } = useDerivedSwapInfo(); + const { onUserInput } = useSwapActionHandlers(); + const { independentField } = useSwapState(); + + const inputCurrencyId = currencies[Field.INPUT] as any; + const outputCurrencyId = currencies[Field.OUTPUT] as any; + const inputCurrency = useCurrency(inputCurrencyId.address); + const outputCurrency = useCurrency(outputCurrencyId.address); + + const isExactIn: boolean = independentField === Field.INPUT; - const handleUseV3 = () => { - history.push( - `/swap?swapIndex=2¤cy0=${inputAddress}¤cy1=${outputAddress}`, - ); + const bestV3TradeExactIn = useBestV3TradeExactIn( + isExactIn ? parsedAmount : undefined, + outputCurrency as any, + isV4, + ); + + const bestV3TradeExactOut = useBestV3TradeExactOut( + inputCurrency as any, + !isExactIn ? parsedAmount : undefined, + isV4, + ); + const v3Trade = + (isExactIn ? bestV3TradeExactIn : bestV3TradeExactOut) ?? undefined; + const handleV3Market = () => { + if (inputValue) onUserInput(Field.INPUT, inputValue); + if (outputValue) onUserInput(Field.OUTPUT, outputValue); + const currentPath = history.location.pathname + history.location.search; + let redirectPath = ''; + redirectPath = currentPath.replace(`swapIndex=0`, `swapIndex=2`); + history.push(redirectPath); }; + return ( {t('noLiquidityinFound')} -

{t('useMarketV3')}

+

+ {v3Trade?.state === 0 + ? t('availableLiquidityInV3') + : t('seekingLiquidityinV3')} +

- + {' '}