[GSW-2049] DrySwap, SwapRoute func(Exact_in, Exact_out)

packages/web/src/common/clients/gno-provider/methods/dry-swap.ts

@@ -0,0 +1,35 @@
+import { GnoProvider } from "@gnolang/gno-js-client";
+
+import { evaluateExpressionToNumber, makeABCIParams } from "@utils/rpc-utils";
+import { DrySwapRequest } from "@repositories/swap/request/swap-route-request";
+import { makeRawTokenAmount } from "@utils/token-utils";
+import { makeRoutesQuery } from "@utils/swap-route-utils";
+import { checkGnotPath } from "@utils/common";
+
+export async function drySwap(gnoProvider: GnoProvider, packagePath: string, request: DrySwapRequest): Promise<number> {
+  const { inputToken, outputToken, tokenAmount, exactType, estimatedRoutes, tokenAmountLimit } = request;
+
+  const targetToken = exactType === "EXACT_IN" ? inputToken : outputToken;
+  const resultToken = exactType === "EXACT_IN" ? outputToken : inputToken;
+  const tokenAmountRaw = makeRawTokenAmount(targetToken, tokenAmount) || "0";
+  const tokenAmountLimitRaw = makeRawTokenAmount(resultToken, tokenAmountLimit) || "0";
+  const routesQuery = makeRoutesQuery(estimatedRoutes, checkGnotPath(inputToken.path));
+  const quotes = estimatedRoutes.map(route => route.quote).join(",");
+
+  const abciQueryParams = makeABCIParams("DrySwap", [
+    inputToken.path,
+    outputToken.path,
+    tokenAmountRaw,
+    exactType,
+    routesQuery,
+    quotes,
+    tokenAmountLimitRaw,
+  ]);
+  try {
+    const abciResponse = await gnoProvider.evaluateExpression(packagePath, abciQueryParams);
+    return evaluateExpressionToNumber(abciResponse);
+  } catch (e) {
+    console.log(e);
+  }
+  return -1;
+}

packages/web/src/components/common/divider/divider.tsx

@@ -3,4 +3,5 @@ import styled from "@emotion/styled";
 export const Divider = styled.div`
   width: 100%;
   border-top: 1px solid ${({ theme }) => theme.color.border02};
+  margin: 16px 0 6px;
 `;

packages/web/src/components/common/line-graph/LineGraph.styles.ts

@@ -2,27 +2,27 @@ import { fonts } from "@constants/font.constant";
 import styled from "@emotion/styled";
 import { media } from "@styles/media";
 
-export const LineGraphWrapper = styled.div`
+export const LineGraphWrapper = styled.div<{ forcedHeight?: number }>`
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 321px;
+  height: ${({ forcedHeight }) => (forcedHeight ? `${forcedHeight}px` : "321px")};
   overflow: visible;
   ${media.mobile} {
-    height: 252px;
+    height: ${({ forcedHeight }) => (forcedHeight ? `${forcedHeight}px` : "252px")};
   }
   & svg {
     display: flex;
     flex-direction: column;
     width: 100%;
-    height: 321px;
+    height: ${({ forcedHeight }) => (forcedHeight ? `${forcedHeight}px` : "321px")};
     overflow: visible;
     .center-line {
       transform: translateY(50%) !important;
     }
     ${media.mobile} {
-      height: 252px;
+      height: ${({ forcedHeight }) => (forcedHeight ? `${forcedHeight}px` : "252px")};
     }
     .y-axis-number {
       ${fonts.p6}

packages/web/src/components/common/line-graph/LineGraph.tsx

@@ -82,16 +82,18 @@ export interface LineGraphProps {
   smooth?: boolean;
   width?: number;
   height?: number;
+  forcedHeight?: number;
   point?: boolean;
   firstPointColor?: string;
   typeOfChart?: string;
   customData?: { height: number; locationTooltip: number };
   centerLineColor?: string;
   showBaseLine?: boolean;
   showBaseLineLabels?: boolean;
+  showPriceRangeLine?: boolean;
   renderBottom?: (baseLineNumberWidth: number) => React.ReactElement;
   isShowTooltip?: boolean;
-  onMouseMove?: (LineGraphData?: LineGraphData) => void;
+  onMouseMove?: (LineGraphData?: LineGraphData, dateDisplay?: { date: string; time: string; value?: string }) => void;
   onMouseOut?: (active: boolean) => void;
   baseLineMap?: [boolean, boolean, boolean, boolean];
   baseLineLabelsPosition?: "left" | "right";
@@ -100,6 +102,7 @@ export interface LineGraphProps {
   baseLineLabelsStyle?: React.CSSProperties;
   displayLastDayAsNow?: boolean;
   popupYValueFormatter?: (value: string) => string;
+  hasNoLabel?: boolean;
 }
 
 export interface LineGraphRef {
@@ -148,6 +151,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
   smooth,
   width = VIEWPORT_DEFAULT_WIDTH,
   height = VIEWPORT_DEFAULT_HEIGHT,
+  forcedHeight,
   point,
   customData = { height: 0, locationTooltip: 0 },
   showBaseLine = false,
@@ -156,13 +160,15 @@ const LineGraph: React.FC<LineGraphProps> = ({
   onMouseMove: onLineGraphMouseMove,
   onMouseOut: onLineGraphMouseOut,
   showBaseLineLabels = false,
+  showPriceRangeLine = true,
   baseLineMap = [true, true, true, true],
   baseLineLabelsPosition = "left",
   baseLineLabelsTransform,
   baseLineLabelsStyle,
   firstPointColor,
   displayLastDayAsNow = false,
   popupYValueFormatter,
+  hasNoLabel = false,
 }: LineGraphProps) => {
   const COMPONENT_ID = (Math.random() * 100000).toString();
   const [activated, setActivated] = useState(false);
@@ -509,6 +515,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
     }
     return points[0];
   }, [points]);
+
   const locationTooltipPosition = useMemo(() => {
     if ((chartPoint?.y || 0) > customHeight + height - 25) {
       if (width < (currentPoint?.x || 0) + locationTooltip) {
@@ -532,28 +539,31 @@ const LineGraph: React.FC<LineGraphProps> = ({
 
   const areaPath = useMemo(() => {
     if (!points || points.length === 0 || points.some(point => point === undefined)) {
-      return undefined; // Or render some fallback UI
+      return undefined;
     }
 
-    // Start at the first point of the line chart
-    let path = `M ${points[0].x},${points[0].y}`;
+    // Start at the first point's x coordinate at firstPoint.y level
+    let path = `M ${points[0].x},${firstPoint.y}`;
 
-    // Draw the line chart path
-    for (let i = 1; i < points.length; i++) {
-      path += smooth ? bezierCommand(points[i], i, points) : ` L ${points[i].x},${points[i].y}`;
+    // Draw the main line chart path
+    for (let i = 0; i < points.length; i++) {
+      const point = points[i];
+      // Plots the actual curve only when the current point is above firstPoint.y
+      if (point.y <= firstPoint.y) {
+        path +=
+          i === 0 ? ` L ${point.x},${point.y}` : smooth ? bezierCommand(point, i, points) : ` L ${point.x},${point.y}`;
+      } else {
+        // Move at the level of firstPoint.y if it is below firstPoint.y
+        path += ` L ${point.x},${firstPoint.y}`;
+      }
     }
 
-    // Draw a line straight down to the bottom of the chart
-    path += ` L ${points[points.length - 1].x},${height}`;
-
-    // Draw a line straight across to the bottom left corner
-    path += ` L ${points[0].x},${height}`;
-
-    // Close the path by connecting back to the start point
-    path += "Z";
+    // Close the path by drawing back to firstPoint.y level
+    path += ` L ${points[points.length - 1].x},${firstPoint.y}`;
+    path += " Z";
 
     return path;
-  }, [height, points, smooth]);
+  }, [points, smooth, firstPoint.y]);
 
   const isLightTheme = theme.themeKey === "light";
 
@@ -571,6 +581,25 @@ const LineGraph: React.FC<LineGraphProps> = ({
     return parseTimeTVL(datas[currentPointIndex]?.time);
   }, [currentPointIndex, datas, displayLastDayAsNow]);
 
+  useEffect(() => {
+    if (currentPointIndex >= 0) {
+      const currentDate =
+        displayLastDayAsNow && datas.length - 1 === currentPointIndex
+          ? parseTimeTVL(getLocalizeTime(new Date().toString()))
+          : parseTimeTVL(datas[currentPointIndex]?.time);
+
+      const formattedValue = popupYValueFormatter
+        ? popupYValueFormatter(datas[currentPointIndex]?.value)
+        : formatPrice(datas[currentPointIndex]?.value);
+      onLineGraphMouseMove?.(datas[currentPointIndex], {
+        ...currentDate,
+        value: formattedValue,
+      });
+    } else {
+      onLineGraphMouseMove?.(undefined, undefined);
+    }
+  }, [currentPointIndex, datas, displayLastDayAsNow, popupYValueFormatter]);
+
   return (
     <LineGraphWrapper
       className={className}
@@ -581,6 +610,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
       }}
       onTouchMove={onTouchMove}
       onTouchStart={onTouchStart}
+      forcedHeight={forcedHeight}
     >
       <FloatingTooltip
         className="chart-tooltip"
@@ -679,7 +709,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
                   className="first-line"
                 />
               )}
-              {isFocus() && currentPoint && (
+              {isFocus() && currentPoint && showPriceRangeLine && (
                 <line
                   stroke={color}
                   strokeWidth={1}
@@ -691,7 +721,13 @@ const LineGraph: React.FC<LineGraphProps> = ({
                 />
               )}
               {isFocus() && currentPoint && (
-                <circle cx={currentPoint.x} cy={currentPoint.y + 24} r={3} stroke={color} fill={color} />
+                <circle
+                  cx={currentPoint.x}
+                  cy={hasNoLabel ? currentPoint.y : currentPoint.y + 24}
+                  r={3}
+                  stroke={color}
+                  fill={color}
+                />
               )}
             </g>
           }

packages/web/src/constants/graph.constant.ts

@@ -1 +1,8 @@
 export const ZOOL_VALUES = [40, 80, 160, 320, 640, 1280, 2560, 5120] as const;
+
+export const SWAP_TOKEN_CHART_COLORS = {
+  GRADIENT: {
+    START: "rgba(25, 46, 162, 0.5)",
+    END: "rgba(25, 46, 162, 0.02)",
+  },
+};

packages/web/src/constants/skeleton.constant.ts

@@ -252,6 +252,10 @@ export const TOKEN_SEARCH_WIDTH = [400];
 export const TOKEN_TD_WIDTH = [56, 199, 105, 85, 85, 85, 140, 140, 138, 201, 124];
 export const MOBILE_TOKEN_TD_WIDTH = [160, 160];
 
+export const TRANSACTION_TD_WIDTH = [96, 120, 198];
+export const MOBILE_TRANSACTION_TD_WIDTH = [80, 216];
+export const TABLET_TRANSACTION_TD_WIDTH = [80, 150, 238];
+
 export const LEADERBOARD_TD_WIDTH = [120, 400, 200, 200, 200, 240];
 export const MOBILE_LEADERBOARD_TD_WIDTH = [50, 150, 128];
 export const TABLET_LEADERBOARD_TD_WIDTH = [120, 300, 170, 170, 170, 170];

packages/web/src/hooks/pool/data/use-reposition-handle.tsx

@@ -427,14 +427,28 @@ export const useRepositionHandle = () => {
       ? BigNumber(estimatedRepositionAmounts?.amountB || 0).minus(BigNumber(currentAmounts?.amountB || 0))
       : BigNumber(estimatedRepositionAmounts?.amountA || 0).minus(BigNumber(currentAmounts?.amountA || 0));
 
-    return swapRouterRepository
-      .sendSwapRoute({
-        ...estimateSwapRequest,
+    const deadline = Math.floor(Date.now() / 1000) + 300; // 5분
+
+    // estimateSwapRequest.exactType에 따라 분기
+    if (estimateSwapRequest.exactType === "EXACT_IN") {
+      return swapRouterRepository.sendExactInSwapRoute({
+        inputToken: estimateSwapRequest.inputToken,
+        outputToken: estimateSwapRequest.outputToken,
         estimatedRoutes: estimatedSwapResult.estimatedRoutes,
         tokenAmount: inputAmount.toNumber(),
         tokenAmountLimit: outputAmount.toNumber() * ((100 - DEFAULT_SLIPPAGE) / 100),
-      })
-      .catch(() => null);
+        deadline,
+      });
+    } else {
+      return swapRouterRepository.sendExactOutSwapRoute({
+        inputToken: estimateSwapRequest.inputToken,
+        outputToken: estimateSwapRequest.outputToken,
+        estimatedRoutes: estimatedSwapResult.estimatedRoutes,
+        tokenAmount: outputAmount.toNumber(),
+        tokenAmountLimit: inputAmount.toNumber() * ((100 + DEFAULT_SLIPPAGE) / 100),
+        deadline,
+      });
+    }
   }, [
     address,
     currentAmounts,