Revert "Revert "Dev2""

package.json

@@ -18,7 +18,7 @@
     "@typescript-eslint/eslint-plugin": "^5.3.1",
     "@typescript-eslint/parser": "^5.3.1",
     "@uniswap/liquidity-staker": "^1.0.2",
-    "@uniswap/sdk": "npm:quickswap-sdk@3.0.35",
+    "@uniswap/sdk": "npm:quickswap-sdk@3.0.37",
     "@uniswap/sdk-core": "^3.2.2",
     "@uniswap/token-lists": "npm:quickswap-token-lists@^1.0.2",
     "@uniswap/v2-core": "1.0.0",

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/CurrencySearchModal/CommonBases.tsx

@@ -61,7 +61,9 @@ const CommonBases: React.FC<CommonBasesProps> = ({
         </Box>
 
         {(chainId ? SUGGESTED_BASES[chainId] ?? [] : [])
-          .filter((item) => !currencies.some((c) => c.symbol === item.symbol))
+          .filter(
+            (item) => item && !currencies.some((c) => c.symbol === item.symbol),
+          )
           .map((token: Token) => {
             const selected = Boolean(
               selectedCurrency && currencyEquals(selectedCurrency, token),

src/components/CurrencySearchModal/CurrencySearch.tsx

@@ -56,28 +56,41 @@ const CurrencySearch: React.FC<CurrencySearchProps> = ({
   onDismiss,
   isOpen,
 }) => {
-  const userAddedTokens = useUserAddedTokens();
+  const { account, chainId } = useActiveWeb3React();
+  const chainIdToUse = chainId ? chainId : ChainId.MATIC;
+  const [favoriteCurrenciesRaw, setFavoriteCurrencies] = useLocalStorage<{
+    [chainId: number]: Currency[];
+  }>('favoriteCurrencies', {});
 
-  const [favoriteCurrencies, setFavoriteCurrencies] = useLocalStorage<
-    Currency[]
-  >('favoriteCurrencies', []);
+  const favoriteCurrencies = useMemo(() => {
+    return favoriteCurrenciesRaw[chainIdToUse] || [];
+  }, [favoriteCurrenciesRaw, chainIdToUse]);
 
-  // const [favoriteCurrencies, setFavoriteCurrencies] = useState<Currency[]>([]);
   const handleChangeFavorite = (currency: Currency, checked: boolean) => {
+    const newChainIdFavoriteCurrenciesRaw =
+      favoriteCurrenciesRaw[chainId] ?? [];
     if (checked) {
-      setFavoriteCurrencies([...favoriteCurrencies, currency]);
+      const newFavoriteCurrenciesRaw = {
+        ...favoriteCurrenciesRaw,
+        [chainId]: [...newChainIdFavoriteCurrenciesRaw, currency],
+      };
+      setFavoriteCurrencies(newFavoriteCurrenciesRaw);
     } else {
-      setFavoriteCurrencies(
-        favoriteCurrencies.filter(
-          (item: Currency) => item.symbol !== currency.symbol,
-        ),
-      );
+      const newFavoriteCurrenciesRaw = {
+        ...favoriteCurrenciesRaw,
+        [chainId]: [
+          ...newChainIdFavoriteCurrenciesRaw.filter(
+            (item: Currency) => item.symbol !== currency.symbol,
+          ),
+        ],
+      };
+      setFavoriteCurrencies(newFavoriteCurrenciesRaw);
     }
   };
   const { t } = useTranslation();
-  const { account, chainId } = useActiveWeb3React();
+
   const dispatch = useDispatch<AppDispatch>();
-  const chainIdToUse = chainId ? chainId : ChainId.MATIC;
+
   const nativeCurrency = ETHER[chainIdToUse];
 
   const handleInput = useCallback((input: string) => {

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/config/index.ts

@@ -13,6 +13,7 @@ import astarZkevm from './astarzkevm.json';
 import layerX from './layerx.json';
 import minato from './minato.json';
 import soneium from './soneium.json';
+import somnia from './somnia.json';
 import orderlyFeeTiers from './orderlyFeeTiers.json';
 import { ChainId } from '@uniswap/sdk';
 
@@ -31,6 +32,7 @@ const configs: any = {
   [ChainId.LAYERX]: layerX,
   [ChainId.MINATO]: minato,
   [ChainId.SONEIUM]: soneium,
+  [ChainId.SOMNIA]: somnia,
 };
 
 export const getConfig = (network: ChainId | undefined) => {