Skip to content

Commit

Permalink
[GSW-450] feat: Implement Swap Expected Result Details (#235)
Browse files Browse the repository at this point in the history
* [GSW-450] feat: Implement Swap Expected Result Details

* chore: Update environments

* dev: Add local network configure

* fix: Remove dummy

* chore: Remove local network
  • Loading branch information
jinoosss authored Dec 1, 2023
1 parent cb97f64 commit a9b2dde
Show file tree
Hide file tree
Showing 31 changed files with 344 additions and 292 deletions.
2 changes: 1 addition & 1 deletion packages/swap-router/.ultra.cache.json
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"files":{"build":"1701307968994.8171","node_modules":"1701307913545.335",".eslintignore":"7de3bd702df2dee92c033c49abbedd0b0f7452e6",".eslintrc.js":"ca4815a5cf5cffa1d3fb4a014c8c602f852b002a",".gitignore":"c87c9b392c0200d9c9dafc444386ad3e15a85c64",".prettierignore":"47bb4656eb55860a075be7799cba7fa955b68141",".prettierrc":"fe5f744c7a08b128c935d1e1aed3e8a577e74507","jest.config.json":"2e496ee6bd64eb237161dcd69a6957eff2df584d","package.json":"4dda70ca76fb6022f6cb20852ecd8d2d95d638d2","src/common/array.util.ts":"9482ab121d34cc7e08a0cd33b49173b0b85823d8","src/common/bigint.util.ts":"343f4c85ca1f6c840ade68c259ed82bf5b159fb0","src/common/index.ts":"861a3167cddfc93e9eb1b6a4ae8229bb9dc2f8fd","src/common/mapper.ts":"f7d7b491dff443911a978b34e4cb378bee46c2b7","src/common/queue.ts":"ad096fefbe1c5a7339b536b0b8d39dba661b520e","src/common/test.util.ts":"3e500df6ec27ba98606acbfcaec9243e22862e43","src/constants/index.ts":"9605b149deb525c25f6e93420bbc433ff1c75cd0","src/constants/math.constant.ts":"b617851527cabcc9c3bce2c8e39208001d379ad6","src/constants/swap.constant.ts":"53e280147c68acfba490bc1f9a0b7bb1580e7280","src/index.ts":"691efb21a28bd3f0e6437edcb16192789dbbb7f6","src/swap-router/index.ts":"effaf28a826bdf1441437643e8343e7fbd8026b1","src/swap-router/swap-router-default.spec.ts":"f980bc94753df130c950eb80d8709b62ec3276fa","src/swap-router/swap-router-multi-higher-range-position-pool.spec.ts":"683ce3a82d73e915018e772723700905c3ff7c92","src/swap-router/swap-router-multi-lower-range-position-pool.spec.ts":"93bfd18d0a297f3c66743cddcf2fe10c3764e250","src/swap-router/swap-router-multi-pair-pools.spec.ts":"5fbd55be39012d46adbdc91a1111dca2aafd314d","src/swap-router/swap-router-multi-route.spec.ts":"771df497876b6bc027dc7b65d03e53209538bf2e","src/swap-router/swap-router-single-pair-pools.spec.ts":"3954e9057ef9534a3724dc960c291281d1a4ef52","src/swap-router/swap-router.ts":"606de3d518665d58f5cbafb55f45d92c30dab77d","src/swap-router/swap-router.types.ts":"2a48987217df238256a0721d227952142a37ce08","src/swap-router/utility/index.ts":"4973874904dd9d77d037d72b1ec8aed397716a38","src/swap-router/utility/route.util.ts":"d492418c9184e42d3ef29d7760eb18fa013f54c6","src/swap-simulator/index.ts":"ef493c5977bdf1123d1197b804f2344ee463870c","src/swap-simulator/swap-simulator-default.spec.ts":"867788b12ccc70abe676010aeed5d6b2b58e8036","src/swap-simulator/swap-simulator.ts":"48cc4c90a2622d806659fa2f8c4f48d600a2b2db","src/swap-simulator/swap-simulator.types.ts":"2b03d7e389ab8875852330c8fddf5a9bfe96f1c6","src/swap-simulator/utility/cache.util.ts":"c5af86d350610a80a6690846657a35635bbc752a","src/swap-simulator/utility/index.ts":"7272f5d23dfa7af2895fca9bb0b17985234ab6e1","src/swap-simulator/utility/math.util.ts":"96fbe38cbabe344f6f58220f46c20103e6df4225","src/swap-simulator/utility/swap-util.spec.ts":"b7fe082f3fef7e5a912959925924f56f8c36e020","src/swap-simulator/utility/swap.util.ts":"f49236f0d22f72b9283244e870d34401d42fe009","src/swap-simulator/utility/tick.util.ts":"4d9bf8ed782f07587c71009ad13cd249b5e3a840","tsconfig.json":"55467bd5c5eb1b501abe50b952d5f2d9fa0a0d69"},"deps":{}}
{"files":{".vscode":"1700971955685.2515","build":"1701256570289.2512","node_modules":"1700891704503.8325",".eslintignore":"7de3bd702df2dee92c033c49abbedd0b0f7452e6",".eslintrc.js":"ca4815a5cf5cffa1d3fb4a014c8c602f852b002a",".gitignore":"c87c9b392c0200d9c9dafc444386ad3e15a85c64",".prettierignore":"47bb4656eb55860a075be7799cba7fa955b68141",".prettierrc":"fe5f744c7a08b128c935d1e1aed3e8a577e74507","jest.config.json":"2e496ee6bd64eb237161dcd69a6957eff2df584d","package.json":"4dda70ca76fb6022f6cb20852ecd8d2d95d638d2","src/common/array.util.ts":"9482ab121d34cc7e08a0cd33b49173b0b85823d8","src/common/bigint.util.ts":"343f4c85ca1f6c840ade68c259ed82bf5b159fb0","src/common/index.ts":"861a3167cddfc93e9eb1b6a4ae8229bb9dc2f8fd","src/common/mapper.ts":"f7d7b491dff443911a978b34e4cb378bee46c2b7","src/common/queue.ts":"ad096fefbe1c5a7339b536b0b8d39dba661b520e","src/common/test.util.ts":"3e500df6ec27ba98606acbfcaec9243e22862e43","src/constants/index.ts":"9605b149deb525c25f6e93420bbc433ff1c75cd0","src/constants/math.constant.ts":"b617851527cabcc9c3bce2c8e39208001d379ad6","src/constants/swap.constant.ts":"53e280147c68acfba490bc1f9a0b7bb1580e7280","src/index.ts":"691efb21a28bd3f0e6437edcb16192789dbbb7f6","src/swap-router/index.ts":"effaf28a826bdf1441437643e8343e7fbd8026b1","src/swap-router/swap-router-default.spec.ts":"f980bc94753df130c950eb80d8709b62ec3276fa","src/swap-router/swap-router-multi-higher-range-position-pool.spec.ts":"683ce3a82d73e915018e772723700905c3ff7c92","src/swap-router/swap-router-multi-lower-range-position-pool.spec.ts":"93bfd18d0a297f3c66743cddcf2fe10c3764e250","src/swap-router/swap-router-multi-pair-pools.spec.ts":"5fbd55be39012d46adbdc91a1111dca2aafd314d","src/swap-router/swap-router-multi-route.spec.ts":"771df497876b6bc027dc7b65d03e53209538bf2e","src/swap-router/swap-router-single-pair-pools.spec.ts":"3954e9057ef9534a3724dc960c291281d1a4ef52","src/swap-router/swap-router.ts":"606de3d518665d58f5cbafb55f45d92c30dab77d","src/swap-router/swap-router.types.ts":"2a48987217df238256a0721d227952142a37ce08","src/swap-router/utility/index.ts":"4973874904dd9d77d037d72b1ec8aed397716a38","src/swap-router/utility/route.util.ts":"d492418c9184e42d3ef29d7760eb18fa013f54c6","src/swap-simulator/index.ts":"ef493c5977bdf1123d1197b804f2344ee463870c","src/swap-simulator/swap-simulator-default.spec.ts":"867788b12ccc70abe676010aeed5d6b2b58e8036","src/swap-simulator/swap-simulator.ts":"48cc4c90a2622d806659fa2f8c4f48d600a2b2db","src/swap-simulator/swap-simulator.types.ts":"2b03d7e389ab8875852330c8fddf5a9bfe96f1c6","src/swap-simulator/utility/cache.util.ts":"c5af86d350610a80a6690846657a35635bbc752a","src/swap-simulator/utility/index.ts":"7272f5d23dfa7af2895fca9bb0b17985234ab6e1","src/swap-simulator/utility/math.util.ts":"96fbe38cbabe344f6f58220f46c20103e6df4225","src/swap-simulator/utility/swap-util.spec.ts":"b7fe082f3fef7e5a912959925924f56f8c36e020","src/swap-simulator/utility/swap.util.ts":"f49236f0d22f72b9283244e870d34401d42fe009","src/swap-simulator/utility/tick.util.ts":"4d9bf8ed782f07587c71009ad13cd249b5e3a840","tsconfig.json":"55467bd5c5eb1b501abe50b952d5f2d9fa0a0d69"},"deps":{}}
2 changes: 2 additions & 0 deletions packages/web/jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ const customJestConfig = {
}),
setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
testEnvironment: "jest-environment-jsdom",
testMatch: ["<rootDir>/**/*.spec.(js|jsx|ts|tsx)"],
transformIgnorePatterns: ["<rootDir>/node_modules/"],
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -35,7 +32,7 @@ const swapRouteInfos: SwapRouteInfo[] = [{
currency: "GNOT"
},
gasFeeUSD: 0.1,
pools,
pools: [],
version: "V1",
weight: 100,
}];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand All @@ -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}`;
Expand All @@ -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" />
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -74,7 +71,7 @@ const swapRouteInfos: SwapRouteInfo[] = [{
currency: "GNOT"
},
gasFeeUSD: 0.1,
pools,
pools: [],
version: "V1",
weight: 100,
}];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -74,7 +72,7 @@ export const swapRouteInfos: SwapRouteInfo[] = [{
currency: "GNOT"
},
gasFeeUSD: 0.1,
pools,
pools: [],
version: "V1",
weight: 100,
}];
Expand Down
Loading

0 comments on commit a9b2dde

Please sign in to comment.