fix: Fix selection behavior in pool selection chart

packages/web/src/components/common/pool-selection-graph/PoolSelectionGraph.tsx

@@ -257,10 +257,10 @@ const PoolSelectionGraph: React.FC<PoolSelectionGraphProps> = ({
 
     return resolvedBins().map((bin) => {
       const x = bin.x + 1;
-      const y = scaleY(bin.y);
+      const y = bin.y > 0 ? scaleY(bin.y) : 0;
       const fill = fillByBin(bin);
       const width = bin.width - 1;
-      const height = boundsHeight - y;
+      const height = bin.y > 0 ? boundsHeight - y : 0;
 
       return {
         x,

packages/web/src/components/common/select-price-range-cutom-controller/SelectPriceRangeCutomController.tsx

@@ -36,7 +36,7 @@ const SelectPriceRangeCutomController: React.FC<SelectPriceRangeCutomControllerP
   const [changed, setChanged] = useState(false);
 
   const tokenInfo = useMemo(() => {
-    return `${token0Symbol} per ${token1Symbol}`;
+    return `${token1Symbol} per ${token0Symbol}`;
   }, [token0Symbol, token1Symbol]);
 
   const disabledController = useMemo(() => {

packages/web/src/components/earn-add/earn-add-liquidity/EarnAddLiquidity.tsx

@@ -77,7 +77,6 @@ const EarnAddLiquidity: React.FC<EarnAddLiquidityProps> = ({
   connected,
   slippage,
   changeSlippage,
-  handleClickOneStaking,
   openModal,
   selectPool,
   changeStartingPrice
@@ -164,7 +163,6 @@ const EarnAddLiquidity: React.FC<EarnAddLiquidityProps> = ({
     if (tokenA && tokenA.symbol !== token.symbol) {
       setOpenedFeeTier(true);
       setOpenedPriceRange(true);
-      handleClickOneStaking?.();
     }
     changeTokenB(token);
   }, [changeTokenB, tokenA, tokenB]);
@@ -173,7 +171,6 @@ const EarnAddLiquidity: React.FC<EarnAddLiquidityProps> = ({
     if (tokenB && tokenB.symbol !== token.symbol) {
       setOpenedFeeTier(true);
       setOpenedPriceRange(true);
-      handleClickOneStaking?.();
     }
     changeTokenA(token);
   }, [changeTokenA, tokenA, tokenB]);

packages/web/src/containers/earn-add-liquidity-container/EarnAddLiquidityContainer.tsx

@@ -75,7 +75,7 @@ const EarnAddLiquidityContainer: React.FC = () => {
     });
     setIsEarnAdd(false);
   }, []);
-  
+
   const {
     connected: connectedWallet,
     account,
@@ -200,19 +200,37 @@ const EarnAddLiquidityContainer: React.FC = () => {
   }, []);
 
   const changeTokenA = useCallback((token: TokenModel) => {
-    setSwapValue((prev) => ({
-      tokenA: prev.tokenB?.symbol === token.symbol ? prev.tokenB : token,
-      tokenB: prev.tokenB?.symbol === token.symbol ? prev.tokenA : prev.tokenB,
-      type: type,
-    }));
+    setSwapValue((prev) => {
+      if (token.wrappedPath === prev.tokenB?.wrappedPath) {
+        return {
+          tokenA: token,
+          tokenB: null,
+          type: type,
+        };
+      }
+      return {
+        tokenA: prev.tokenB?.symbol === token.symbol ? prev.tokenB : token,
+        tokenB: prev.tokenB?.symbol === token.symbol ? prev.tokenA : prev.tokenB,
+        type: type,
+      };
+    });
   }, [type]);
 
   const changeTokenB = useCallback((token: TokenModel) => {
-    setSwapValue((prev) => ({
-      tokenB: prev.tokenA?.symbol === token.symbol ? prev.tokenA : token,
-      tokenA: prev.tokenA?.symbol === token.symbol ? prev.tokenB : prev.tokenA,
-      type: type,
-    }));
+    setSwapValue((prev) => {
+      if (token.wrappedPath === prev.tokenA?.wrappedPath) {
+        return {
+          tokenA: null,
+          tokenB: token,
+          type: type,
+        };
+      }
+      return {
+        tokenB: prev.tokenA?.symbol === token.symbol ? prev.tokenA : token,
+        tokenA: prev.tokenA?.symbol === token.symbol ? prev.tokenB : prev.tokenA,
+        type: type,
+      };
+    });
   }, [type]);
 
   const changeStartingPrice = useCallback((price: string) => {
@@ -375,6 +393,11 @@ const EarnAddLiquidityContainer: React.FC = () => {
     }
   }, [selectPool.feeTier]);
 
+  useEffect(() => {
+    const isEarnAdd = swapValue.tokenA !== null && swapValue.tokenB !== null;
+    setIsEarnAdd(isEarnAdd);
+  }, [setIsEarnAdd, swapValue]);
+
   return (
     <EarnAddLiquidity
       mode={"POOL"}

packages/web/src/containers/swap-container/SwapContainer.tsx

@@ -50,7 +50,7 @@ const SwapContainer: React.FC = () => {
 
   const { openModal } = useConnectWalletModal();
 
-  const { estimatedRoutes, tokenAmountLimit, swap, estimateSwapRoute, unwrapToken } = useSwap({
+  const { estimatedRoutes, tokenAmountLimit, swapState, swap, estimateSwapRoute, unwrapToken } = useSwap({
     tokenA,
     tokenB,
     direction: type,
@@ -129,6 +129,9 @@ const SwapContainer: React.FC = () => {
     ) {
       return "Amount Too Low";
     }
+    if (swapState === "NO_LIQUIDITY") {
+      return "Insufficient Liquidity";
+    }
 
     if (type === "EXACT_IN") {
       if (

packages/web/src/containers/token-swap-container/TokenSwapContainer.tsx

@@ -80,7 +80,7 @@ const TokenSwapContainer: React.FC = () => {
     switchNetwork,
   } = useWallet();
 
-  const { swap, estimateSwapRoute, estimatedRoutes, tokenAmountLimit } = useSwap({
+  const { swap, estimateSwapRoute, swapState, estimatedRoutes, tokenAmountLimit } = useSwap({
     tokenA,
     tokenB,
     direction: type,
@@ -381,6 +381,9 @@ const TokenSwapContainer: React.FC = () => {
     ) {
       return "Amount Too Low";
     }
+    if (swapState === "NO_LIQUIDITY") {
+      return "Insufficient Liquidity";
+    }
 
     if (type === "EXACT_IN") {
       if (

packages/web/src/hooks/swap/use-swap.tsx

@@ -23,6 +23,7 @@ export const useSwap = ({
   const { poolRepository, swapRouterRepository } = useGnoswapContext();
   const [estimatedRoutes, setEstimatedRoutes] = useState<EstimatedRoute[]>([]);
   const [estimatedAmount, setEstimatedAmount] = useState<string | null>(null);
+  const [swapState, setSwapState] = useState<"NONE" | "LOADING" | "NO_LIQUIDITY" | "SUCCESS">("NONE");
   const { slippage } = useSlippage();
 
   const selectedTokenPair = tokenA !== null && tokenB !== null;
@@ -41,12 +42,16 @@ export const useSwap = ({
 
   const estimateSwapRoute = async (amount: string) => {
     if (!selectedTokenPair) {
+      setSwapState("NONE");
       return null;
     }
     if (Number.isNaN(amount)) {
+      setSwapState("NONE");
       return null;
     }
-    const pools = await poolRepository.getRPCPools();
+
+    setSwapState("LOADING");
+    const pools = await poolRepository.getRPCPools().catch(() => []);
     swapRouterRepository.updatePools(pools);
 
     return swapRouterRepository.estimateSwapRoute({
@@ -56,13 +61,19 @@ export const useSwap = ({
       tokenAmount: Number(amount)
     }).then(response => {
       console.log("response", response);
+      if (response.amount === "0" || response.amount === "") {
+        setSwapState("NO_LIQUIDITY");
+      } else {
+        setSwapState("SUCCESS");
+      }
       setEstimatedRoutes(response.estimatedRoutes);
       setEstimatedAmount(response.amount);
       return response;
     }).catch(e => {
       console.error(e);
       setEstimatedRoutes([]);
       setEstimatedAmount(null);
+      setSwapState("NONE");
       return null;
     });
   };
@@ -117,6 +128,7 @@ export const useSwap = ({
   return {
     tokenAmountLimit,
     estimatedRoutes,
+    swapState,
     swap,
     wrapToken,
     unwrapToken,

packages/web/src/layouts/earn-add-layout/EarnAddLayout.styles.ts

@@ -53,7 +53,7 @@ export const wrapper = (theme: Theme) => css`
       padding: 0 40px;
       ${mixins.flexbox("column", "flex-start", "center")};
     }
-    .wrapper-sub-content { {
+    .wrapper-sub-content {
       ${mixins.flexbox("column", "flex-start", "center")};
       width: 100%;
     }

packages/web/src/layouts/pool-add-layout/PoolAddLayout.styles.ts

@@ -53,7 +53,7 @@ export const wrapper = (theme: Theme) => css`
       padding: 0 40px;
       ${mixins.flexbox("column", "flex-start", "center")};
     }
-    .wrapper-sub-content { {
+    .wrapper-sub-content {
       ${mixins.flexbox("column", "flex-start", "center")};
       width: 100%;
     }

packages/web/src/repositories/swap/swap-router-repository-impl.ts

@@ -176,8 +176,8 @@ export class SwapRouterRepositoryImpl implements SwapRouterRepository {
       pkg_path: ROUTER_PACKAGE_PATH,
       func: "SwapRoute",
       args: [
-        inputToken.path,
-        outputToken.path,
+        inputTokenPath,
+        outputTokenPath,
         `${tokenAmountRaw || 0}`,
         exactType,
         `${routesQuery}`,