Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[GSW-2048] Swap issue #601

Merged
merged 7 commits into from
Jan 9, 2025
Merged

[GSW-2048] Swap issue #601

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
14e8dbd
fix: [GSW-2048] Tooltip Text
tfrg Jan 3, 2025
6217e7c
fix: [GSW-2048] UI when in NO_LIQUIDITY state
tfrg Jan 7, 2025
f570ebc
feat: [GSW-2048] When data is refetched, modals are also updated
tfrg Jan 8, 2025
a8c87e1
feat: [GSW-2048] SwapConfirmModal Loading UI
tfrg Jan 8, 2025
3749eef
fix: [GSW-2048] SwapRoute Loading/refetching UI
tfrg Jan 8, 2025
1f0188c
refactor: [GSW-2048] Improved token amount initialization and loading…
tfrg Jan 8, 2025
e5551a1
fix: [GSW-2048] Remove unnecessary code
tfrg Jan 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions packages/web/src/components/common/setting-menu-modal/SettingMenuModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useCallback, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { Trans, useTranslation } from "react-i18next";

import { isAmount } from "@common/utils/data-check-util";
import Button, { ButtonHierarchy } from "@components/common/button/Button";
Expand Down Expand Up @@ -47,11 +47,7 @@ const SettingMenuModal: React.FC<SettingMenuModalProps> = ({ slippage, changeSli
const TooltipFloatingContent = (
<ModalTooltipWrap>
<div className="tooltip-wrap">
<p
dangerouslySetInnerHTML={{
__html: t("common:settingModal.slipTolTooltip"),
}}
></p>
<Trans i18nKey="common:settingModal.slipTolTooltip" components={{ br: <br /> }} />
</div>
</ModalTooltipWrap>
);
Expand Down
87 changes: 3 additions & 84 deletions packages/web/src/components/swap/confirm-swap-modal/ConfirmSwapModal.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,88 +4,6 @@ import { css } from "@emotion/react";
import { action } from "@storybook/addon-actions";

import ConfirmSwapModal from "./ConfirmSwapModal";
import { SwapSummaryInfo } from "@models/swap/swap-summary-info";
import { SwapTokenInfo } from "@models/swap/swap-token-info";

const swapTokenInfo: SwapTokenInfo = {
tokenA: {
type: "grc20",
chainId: "dev.gnoswap",
createdAt: "2023-12-08T03:57:43Z",
name: "Foo",
path: "gno.land/r/foo",
decimals: 4,
symbol: "FOO",
logoURI: "https://raw.githubusercontent.com/onbloc/gno-token-resource/main/grc20/images/gno_land_r_foo.svg",
priceID: "gno.land/r/foo",
address: "",
},
tokenAAmount: "",
tokenABalance: "",
tokenAUSD: 0,
tokenAUSDStr: "0",
tokenB: {
type: "grc20",
chainId: "dev.gnoswap",
createdAt: "2023-12-08T03:57:43Z",
name: "Foo",
path: "gno.land/r/foo",
decimals: 4,
symbol: "FOO",
logoURI: "https://raw.githubusercontent.com/onbloc/gno-token-resource/main/grc20/images/gno_land_r_foo.svg",
priceID: "gno.land/r/foo",
address: "",
},
tokenBAmount: "",
tokenBBalance: "",
tokenBUSD: 0,
tokenBUSDStr: "0",
direction: "EXACT_IN",
slippage: 10,
};

const swapSummaryInfo: SwapSummaryInfo = {
tokenA: {
type: "grc20",
chainId: "dev.gnoswap",
createdAt: "2023-12-08T03:57:43Z",
name: "Foo",
path: "gno.land/r/foo",
decimals: 4,
symbol: "FOO",
logoURI: "https://raw.githubusercontent.com/onbloc/gno-token-resource/main/grc20/images/gno_land_r_foo.svg",
priceID: "gno.land/r/foo",
address: "",
},
tokenB: {
type: "grc20",
chainId: "dev.gnoswap",
createdAt: "2023-12-08T03:57:43Z",
name: "Foo",
path: "gno.land/r/foo",
decimals: 4,
symbol: "FOO",
logoURI: "https://raw.githubusercontent.com/onbloc/gno-token-resource/main/grc20/images/gno_land_r_foo.svg",
priceID: "gno.land/r/foo",
address: "",
},
swapDirection: "EXACT_IN",
swapRate: 1.14,
swapRateUSD: 1.14,
priceImpact: 0.3,
guaranteedAmount: {
amount: 45124,
currency: "GNOT",
},
gasFee: {
amount: 0.000001,
currency: "GNOT",
},
gasFeeUSD: 0.1,
swapRateAction: "ATOB",
swapRate1USD: 1,
protocolFee: "0%",
};

export default {
title: "swap/ConfirmSwapModal",
Expand All @@ -103,8 +21,9 @@ const Template: ComponentStory<typeof ConfirmSwapModal> = args => (
export const Default = Template.bind({});
Default.args = {
submitted: false,
swapTokenInfo,
swapSummaryInfo,
// @dev: add again if necessary
// swapTokenInfo,
// swapSummaryInfo,
swapResult: null,
swap: action("swap"),
close: action("close"),
Expand Down
8 changes: 8 additions & 0 deletions packages/web/src/components/swap/confirm-swap-modal/ConfirmSwapModal.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,9 @@ export const ConfirmModal = styled.div`
${media.mobile} {
${fonts.body5}
}
.loading {
opacity: 0.5;
}
}
.button-wrapper {
${mixins.flexbox("row", "center", "flex-start")};
Expand Down Expand Up @@ -274,6 +277,11 @@ export const ConfirmModal = styled.div`
${media.mobile} {
height: 41px;
}
button {
&:disabled {
background-color: ${({ theme }) => theme.color.background17};
}
}
}

.animation {
Expand Down
86 changes: 53 additions & 33 deletions packages/web/src/components/swap/confirm-swap-modal/ConfirmSwapModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
import React, { useMemo } from "react";
import React, { useCallback, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useAtomValue } from "jotai";
import { useTheme } from "@emotion/react";

import { SwapState } from "@states/index";
import { PriceImpactStatus } from "@hooks/swap/data/use-swap-handler";
import { SwapResultInfo } from "@models/swap/swap-result-info";
import { swapDirectionToGuaranteedType } from "@models/swap/swap-summary-info";
import { SwapTokenInfo } from "@models/swap/swap-token-info";
import { floorNumber, toNumberFormat } from "@utils/number-utils";
import { convertToKMB } from "@utils/stake-position-utils";

import Button, { ButtonHierarchy } from "@components/common/button/Button";
import ExchangeRate from "@components/common/exchange-rate/ExchangeRate";
Expand All @@ -9,16 +19,7 @@ import IconSwapArrowDown from "@components/common/icons/IconSwapArrowDown";
import { IconTriangleWarningOutlined } from "@components/common/icons/IconTriangleWarningOutlined";
import MissingLogo from "@components/common/missing-logo/MissingLogo";
import Tooltip from "@components/common/tooltip/Tooltip";
import { useTheme } from "@emotion/react";
import { PriceImpactStatus } from "@hooks/swap/data/use-swap-handler";
import { SwapResultInfo } from "@models/swap/swap-result-info";
import { swapDirectionToGuaranteedType, SwapSummaryInfo } from "@models/swap/swap-summary-info";
import { SwapTokenInfo } from "@models/swap/swap-token-info";
import { floorNumber, toNumberFormat } from "@utils/number-utils";
import { convertToKMB } from "@utils/stake-position-utils";

import { convertSwapRate } from "../swap-card-content-detail/SwapCardContentDetail";

import {
ConfirmModal,
PriceImpactStatusWrapper,
Expand All @@ -29,32 +30,33 @@ import {

interface ConfirmSwapModalProps {
submitted: boolean;
swapTokenInfo: SwapTokenInfo;
swapSummaryInfo: SwapSummaryInfo;
swapResult: SwapResultInfo | null;
title: string;
isWrapOrUnwrap: boolean;
priceImpactStatus: PriceImpactStatus;

swap: () => void;
swap: (swapTokenInfo: SwapTokenInfo, estimatedAmount: string) => void;
close: () => void;
}

const ConfirmSwapModal: React.FC<ConfirmSwapModalProps> = ({
submitted,
swapTokenInfo,
swapSummaryInfo,
swapResult,
swap,
close,
title,
isWrapOrUnwrap,
priceImpactStatus,
}) => {
const swapConfirmModalState = useAtomValue(SwapState.swapConfirmModalState);
const { swapSummaryInfo, swapTokenInfo, estimatedAmount, isRefetching } = swapConfirmModalState;

const theme = useTheme();
const { t } = useTranslation();

const swapRateDescription = useMemo(() => {
if (!swapSummaryInfo) return;

const { tokenA, tokenB, swapRate, swapRateAction } = swapSummaryInfo;

if (swapRateAction === "ATOB") {
Expand All @@ -77,37 +79,43 @@ const ConfirmSwapModal: React.FC<ConfirmSwapModalProps> = ({
}, [swapSummaryInfo]);

const priceImpactStr = useMemo(() => {
if (!swapSummaryInfo) return;
const priceImpact = swapSummaryInfo.priceImpact;
return `${priceImpact}%`;
}, [swapSummaryInfo.priceImpact]);
}, [swapSummaryInfo?.priceImpact]);

const slippageStr = useMemo(() => {
if (!swapTokenInfo) return;
const slippage = swapTokenInfo.slippage;
return `${slippage}%`;
}, [swapTokenInfo.slippage]);
}, [swapTokenInfo?.slippage]);

const guaranteedTypeStr = useMemo(() => {
if (!swapSummaryInfo) return;
const swapDirection = swapSummaryInfo.swapDirection;
return t(swapDirectionToGuaranteedType(swapDirection));
}, [swapSummaryInfo.swapDirection, t]);
}, [swapSummaryInfo?.swapDirection, t]);

const guaranteedStr = useMemo(() => {
if (!swapSummaryInfo) return;
const { amount, currency } = swapSummaryInfo.guaranteedAmount;
return `${toNumberFormat(amount, 6)} ${currency}`;
}, [swapSummaryInfo.guaranteedAmount]);
}, [swapSummaryInfo?.guaranteedAmount]);

const gasFeeStr = useMemo(() => {
if (!swapSummaryInfo) return;
const { amount, currency } = swapSummaryInfo.gasFee;
return `${toNumberFormat(amount)} ${currency}`;
}, [swapSummaryInfo.gasFee]);
}, [swapSummaryInfo?.gasFee]);

const gasFeeUSDStr = useMemo(() => {
if (!swapSummaryInfo) return;
const gasFeeUSD = swapSummaryInfo.gasFeeUSD;

if (Number(gasFeeUSD) < 0.01) return "<$0.01";

return `$${toNumberFormat(gasFeeUSD)}`;
}, [swapSummaryInfo.gasFeeUSD]);
}, [swapSummaryInfo?.gasFeeUSD]);

const showPriceImpact = useMemo(() => !!swapSummaryInfo?.priceImpact, [swapSummaryInfo?.priceImpact]);

Expand All @@ -128,6 +136,8 @@ const ConfirmSwapModal: React.FC<ConfirmSwapModalProps> = ({
}, [priceImpactStatus, t]);

const unitSwapPrice = useMemo(() => {
if (!swapSummaryInfo || !swapTokenInfo) return "-";

const { swapRateAction, swapRate } = swapSummaryInfo;
const { tokenAUSD, tokenBUSD, tokenAAmount, tokenBAmount } = swapTokenInfo;
if (swapRateAction === "ATOB") {
Expand All @@ -143,6 +153,11 @@ const ConfirmSwapModal: React.FC<ConfirmSwapModalProps> = ({
}
}, [swapSummaryInfo, swapTokenInfo]);

const handleSwap = useCallback(() => {
if (!swapTokenInfo || !estimatedAmount) return;
swap(swapTokenInfo, estimatedAmount);
}, [swapTokenInfo, swap]);

return (
<ConfirmModal>
<div
Expand All @@ -161,20 +176,22 @@ const ConfirmSwapModal: React.FC<ConfirmSwapModalProps> = ({
<div className="input-group">
<div className="first-section">
<div className="amount-container">
<span>{swapTokenInfo.tokenAAmount}</span>
<span className={swapSummaryInfo?.swapDirection === "EXACT_OUT" && isRefetching ? "loading" : ""}>
{swapTokenInfo?.tokenAAmount}
</span>
<div className="button-wrapper">
<MissingLogo
symbol={swapSummaryInfo.tokenA.symbol}
url={swapSummaryInfo.tokenA.logoURI}
symbol={swapSummaryInfo?.tokenA.symbol || ""}
url={swapSummaryInfo?.tokenA.logoURI}
className="coin-logo"
width={24}
mobileWidth={24}
/>
<span>{swapSummaryInfo.tokenA.symbol}</span>
<span>{swapSummaryInfo?.tokenA.symbol}</span>
</div>
</div>
<div className="amount-info">
<span className="price-text">{swapTokenInfo.tokenAUSDStr}</span>
<span className="price-text">{swapTokenInfo?.tokenAUSDStr}</span>
</div>
<div className="arrow">
<div className="shape">
Expand All @@ -184,20 +201,22 @@ const ConfirmSwapModal: React.FC<ConfirmSwapModalProps> = ({
</div>
<div className="second-section">
<div className="amount-container">
<span>{swapTokenInfo.tokenBAmount}</span>
<span className={swapSummaryInfo?.swapDirection === "EXACT_IN" && isRefetching ? "loading" : ""}>
{swapTokenInfo?.tokenBAmount}
</span>
<div className="button-wrapper">
<MissingLogo
symbol={swapSummaryInfo.tokenB.symbol}
url={swapSummaryInfo.tokenB.logoURI}
symbol={swapSummaryInfo?.tokenB.symbol || ""}
url={swapSummaryInfo?.tokenB.logoURI}
className="coin-logo"
width={24}
mobileWidth={24}
/>
<span>{swapSummaryInfo.tokenB.symbol}</span>
<span>{swapSummaryInfo?.tokenB.symbol}</span>
</div>
</div>
<div className="amount-info">
<span className="price-text">{swapTokenInfo.tokenBUSDStr}</span>
<span className="price-text">{swapTokenInfo?.tokenBUSDStr}</span>
{showPriceImpact && (
<PriceImpactWrapper priceImpact={priceImpactStatus}>
{priceImpactStatus === "HIGH" && <IconTriangleWarningOutlined stroke={theme.color.red01} />}
Expand Down Expand Up @@ -254,7 +273,7 @@ const ConfirmSwapModal: React.FC<ConfirmSwapModalProps> = ({
<IconInfo />
</Tooltip>
</div>
<span className="white-text">{swapSummaryInfo.protocolFee}</span>
<span className="white-text">{swapSummaryInfo?.protocolFee}</span>
</div>
</div>
</>
Expand All @@ -278,7 +297,8 @@ const ConfirmSwapModal: React.FC<ConfirmSwapModalProps> = ({
fontType: "body7",
hierarchy: ButtonHierarchy.Primary,
}}
onClick={swap}
onClick={handleSwap}
disabled={isRefetching}
/>
</div>
</div>
Expand Down
Loading
Loading