[GSW-450] feat: Implement Swap Expected Result Details

packages/web/src/components/swap/swap-button-tooltip/SwapButtonTooltip.tsx

@@ -45,7 +45,7 @@ const SwapButtonTooltip: React.FC<WalletBalanceDetailInfoProps> = ({
         </div>
         <div className="tooltip-list">
           <span>Gas Fee</span>
-          <span>{gasFeeStr} GNOT</span>
+          <span>{gasFeeStr}</span>
         </div>
       </SwapButtonTooltipWrap>
     );

packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.stories.tsx

@@ -3,9 +3,6 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 import SwapCardAutoRouter from "./SwapCardAutoRouter";
 import { css } from "@emotion/react";
 import { SwapRouteInfo } from "@models/swap/swap-route-info";
-import PoolData from "@repositories/pool/mock/pools.json";
-
-const pools = PoolData.pools;
 
 const swapRouteInfos: SwapRouteInfo[] = [{
   from: {
@@ -35,7 +32,7 @@ const swapRouteInfos: SwapRouteInfo[] = [{
     currency: "GNOT"
   },
   gasFeeUSD: 0.1,
-  pools,
+  pools: [],
   version: "V1",
   weight: 100,
 }];

packages/web/src/components/swap/swap-card-auto-router/SwapCardAutoRouter.tsx

@@ -3,6 +3,7 @@ import { AutoRouterWrapper, DotLine } from "./SwapCardAutoRouter.styles";
 import { SwapRouteInfo } from "@models/swap/swap-route-info";
 import DoubleLogo from "@components/common/double-logo/DoubleLogo";
 import { SwapSummaryInfo } from "@models/swap/swap-summary-info";
+import { useTokenImage } from "@hooks/token/use-token-image";
 
 interface ContentProps {
   swapRouteInfos: SwapRouteInfo[];
@@ -13,6 +14,7 @@ const SwapCardAutoRouter: React.FC<ContentProps> = ({
   swapRouteInfos,
   swapSummaryInfo,
 }) => {
+
   const bestGasFee = useMemo(() => {
     const totalGasFee = swapRouteInfos.reduce((prev, current) => prev + current.gasFeeUSD, 0);
     return `$${totalGasFee}`;
@@ -39,10 +41,27 @@ const SwapCardAutoRouterItem: React.FC<SwapCardAutoRouterItemProps> = ({
   swapRouteInfo,
   swapSummaryInfo,
 }) => {
+  const { getTokenImage } = useTokenImage();
+
   const weightStr = useMemo(() => {
     return `${swapRouteInfo.weight}%`;
   }, [swapRouteInfo.weight]);
 
+  const routeInfos = useMemo(() => {
+    let currentFromToken = swapSummaryInfo.tokenA.path;
+    return swapRouteInfo.pools.map((pool) => {
+      const ordered = currentFromToken === pool.tokenAPath;
+      const fromToken = ordered ? pool.tokenAPath : pool.tokenBPath;
+      const toToken = ordered ? pool.tokenBPath : pool.tokenAPath;
+      currentFromToken = toToken;
+      return {
+        fee: `${(pool.fee / 10000).toFixed(2)}%`,
+        fromToken,
+        toToken
+      };
+    });
+  }, [swapRouteInfo.pools, swapSummaryInfo.tokenA.path]);
+
   return (
     <div className="row">
       <img src={swapSummaryInfo.tokenA.logoURI} alt="token logo" className="token-logo" />
@@ -51,14 +70,14 @@ const SwapCardAutoRouterItem: React.FC<SwapCardAutoRouterItemProps> = ({
         <span>{weightStr}</span>
       </div>
       <DotLine />
-      {swapRouteInfo.pools.map((pool, index) => (
-        <>
-          <div key={`pool-${index}`} className="pair-fee">
-            <DoubleLogo left={pool.tokenA.logoURI} right={pool.tokenB.logoURI} size={16} />
-            <h1>{pool.fee}</h1>
+      {routeInfos.map((routeInfo, index) => (
+        <React.Fragment key={`pool-${index}`}>
+          <div className="pair-fee">
+            <DoubleLogo left={getTokenImage(routeInfo.fromToken) || ""} right={getTokenImage(routeInfo.toToken) || ""} size={16} />
+            <h1>{routeInfo.fee}</h1>
           </div>
-          <DotLine key={`line-${index}`} />
-        </>
+          <DotLine />
+        </React.Fragment>
       ))}
       <img src={swapSummaryInfo.tokenB.logoURI} alt="token logo" className="token-logo" />
     </div>

packages/web/src/components/swap/swap-card-content-detail/SwapCardContentDetail.stories.tsx

@@ -3,11 +3,8 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 import SwapCardContentDetail from "./SwapCardContentDetail";
 import { css } from "@emotion/react";
 import { SwapRouteInfo } from "@models/swap/swap-route-info";
-import PoolData from "@repositories/pool/mock/pools.json";
 import { SwapSummaryInfo } from "@models/swap/swap-summary-info";
 
-const pools = PoolData.pools;
-
 const swapSummaryInfo: SwapSummaryInfo = {
   tokenA: {
     chainId: "test3",
@@ -74,7 +71,7 @@ const swapRouteInfos: SwapRouteInfo[] = [{
     currency: "GNOT"
   },
   gasFeeUSD: 0.1,
-  pools,
+  pools: [],
   version: "V1",
   weight: 100,
 }];

packages/web/src/components/swap/swap-card-fee-info/SwapCardFeeInfo.tsx

@@ -57,7 +57,7 @@ const SwapCardFeeInfo: React.FC<ContentProps> = ({
       <div className="gas-fee">
         <span className="gray-text">Gas Fee</span>
         <span className="white-text">
-          {gasFeeStr} GNOT
+          {gasFeeStr}
           <span className="gray-text">{`(${gasFeeUSDStr})`}</span>
         </span>
       </div>

packages/web/src/components/swap/swap-card/SwapCard.stories.tsx

@@ -3,10 +3,8 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 import SwapCard from "./SwapCard";
 import { css } from "@emotion/react";
 import { SwapSummaryInfo } from "@models/swap/swap-summary-info";
-import PoolData from "@repositories/pool/mock/pools.json";
 import { SwapRouteInfo } from "@models/swap/swap-route-info";
 
-const pools = PoolData.pools;
 
 const swapSummaryInfo: SwapSummaryInfo = {
   tokenA: {
@@ -74,7 +72,7 @@ export const swapRouteInfos: SwapRouteInfo[] = [{
     currency: "GNOT"
   },
   gasFeeUSD: 0.1,
-  pools,
+  pools: [],
   version: "V1",
   weight: 100,
 }];