Add feat to switch to Market v3 in case no route in paraswap

public/locales/en.json

@@ -304,6 +304,10 @@
   "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?",
+  "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",

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,9 @@ const SwapBestTrade: React.FC<{
   const [liquidityHubDisabled, setLiquidityHubDisabled] = useState(false);
   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] = [
@@ -169,6 +178,11 @@ const SwapBestTrade: React.FC<{
     inputError: swapInputError,
     autoSlippage,
   } = useDerivedSwapInfo();
+
+  const {
+    v3TradeState: { state: v3TradeState },
+  } = useV3DerivedSwapInfo();
+
   const finalizedTransaction = useTransactionFinalizer();
   const [isExpertMode] = useExpertModeManager();
   const {
@@ -623,6 +637,12 @@ const SwapBestTrade: React.FC<{
     }
   }, [nativeConvertApproval]);
 
+  useEffect(() => {
+    if (optimalRateError) {
+      setShowNoLiquidityConfirm(true);
+    }
+  }, [optimalRateError]);
+
   const userHasSpecifiedInputOutput = Boolean(
     currencies[Field.INPUT] &&
       currencies[Field.OUTPUT] &&
@@ -848,13 +868,15 @@ const SwapBestTrade: React.FC<{
 
   const handleTypeInput = useCallback(
     (value: string) => {
+      setInputValue(value);
       onUserInput(Field.INPUT, value);
       setSwapType(SwapSide.SELL);
     },
     [onUserInput],
   );
   const handleTypeOutput = useCallback(
     (value: string) => {
+      setOutputValue(value);
       onUserInput(Field.OUTPUT, value);
       setSwapType(SwapSide.BUY);
     },
@@ -1289,6 +1311,17 @@ const SwapBestTrade: React.FC<{
         onConfirm={handleConfirmTokenWarning}
         onDismiss={handleDismissTokenWarning}
       />
+      {/* optimalRateError */}
+      {showNoLiquidityConfirm && (
+        <NoLiquiditySwapConfirmation
+          isOpen={showNoLiquidityConfirm}
+          onClose={() => setShowNoLiquidityConfirm(false)}
+          parsedAmount={parsedAmounts}
+          inputValue={inputValue}
+          outputValue={outputValue}
+        />
+      )}
+
       <LiquidityHubSwapConfirmation
         inAmount={parsedAmount?.raw.toString()}
         inCurrency={inputCurrency}

src/components/Swap/orbs/LiquidityHub/NoLiquiditySwapConfirmation.tsx

@@ -0,0 +1,100 @@
+import React, { useCallback } from 'react';
+import { CustomModal } from 'components';
+import { ReportProblemOutlined } from '@material-ui/icons';
+import { Currency, currencyEquals, Trade } from '@uniswap/sdk';
+import { styled } from '@material-ui/styles';
+import { Box, Button } from '@material-ui/core';
+import { _TypedDataEncoder } from 'ethers/lib/utils';
+import { useHistory } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { useIsV4 } from 'state/application/hooks';
+import { useDerivedSwapInfo, useSwapState } from 'state/swap/hooks';
+import { Field, SwapDelay } from 'state/swap/actions';
+import { useCurrency } from 'hooks/Tokens';
+import { useBestV3TradeExactOut } from 'hooks/v3/useBestV3Trade';
+import { useBestV3TradeExactIn } from 'hooks/v3/useBestV3Trade';
+import { useSwapActionHandlers } from 'state/swap/v3/hooks';
+
+interface NoLiquiditySwapConfirmationProps {
+  isOpen: boolean;
+  parsedAmount: any;
+  onClose: () => void;
+  inputValue: string;
+  outputValue: string;
+}
+export const NoLiquiditySwapConfirmation: React.FC<NoLiquiditySwapConfirmationProps> = ({
+  isOpen,
+  parsedAmount,
+  onClose,
+  inputValue,
+  outputValue,
+}) => {
+  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 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 (
+    <StyledNoLiquiditySwapConfirmationModal
+      open={isOpen}
+      modalWrapper='txModalWrapper'
+    >
+      <Box paddingX={3} paddingY={4}>
+        <Box className='flex items-center justify-center'>
+          <Box className='flex' mr={1}>
+            <ReportProblemOutlined />
+          </Box>
+          <h5 className='text-center'>{t('noLiquidityinFound')}</h5>
+        </Box>
+        <Box mt={2}>
+          <p className='text-center'>
+            {v3Trade?.state === 0
+              ? t('availableLiquidityInV3')
+              : t('seekingLiquidityinV3')}
+          </p>
+        </Box>
+        <Box mt={3} className='flex items-center justify-between'>
+          <Button onClick={() => handleV3Market()}>Yes</Button>
+          <Button onClick={() => onClose()}>No</Button>
+        </Box>{' '}
+      </Box>
+    </StyledNoLiquiditySwapConfirmationModal>
+  );
+};
+const StyledNoLiquiditySwapConfirmationModal = styled(CustomModal)({
+  '& .customModalBackdrop': {
+    backgroundColor: 'rgba(0, 0, 0, 0.05)',
+  },
+});

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]);