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

fix: initial swap token A amount #277

Merged
merged 1 commit into from
Dec 19, 2023
Merged

fix: initial swap token A amount #277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
59 changes: 47 additions & 12 deletions packages/web/src/components/home/home-swap/HomeSwap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import IconSwapArrowDown from "@components/common/icons/IconSwapArrowDown";
import { SwapTokenInfo } from "@models/swap/swap-token-info";
import { useWindowSize } from "@hooks/common/use-window-size";
import BigNumber from "bignumber.js";
import { SwapValue } from "@states/swap";

interface HomeSwapProps {
changeTokenAAmount: (value: string) => void;
Expand All @@ -14,22 +15,30 @@ interface HomeSwapProps {
swapNow: () => void;
onSubmitSwapValue: () => void;
connected: boolean;
swapValue: SwapValue;
}

function isAmount(str: string) {
const regex = /^\d+(\.\d*)?$/;
return regex.test(str);
}

const HomeSwap: React.FC<HomeSwapProps> = ({ swapTokenInfo, swapNow, onSubmitSwapValue, changeTokenAAmount, connected, changeTokenBAmount}) => {
const HomeSwap: React.FC<HomeSwapProps> = ({
swapTokenInfo,
swapNow,
onSubmitSwapValue,
changeTokenAAmount,
connected,
changeTokenBAmount,
swapValue,
}) => {
const { breakpoint } = useWindowSize();
const [fromAmount, setFromAmount] = useState("0");
const [fromAmount, setFromAmount] = useState(swapValue?.tokenAAmount ?? "0");
const [toAmount, setToAmount] = useState("0");

const onChangeFromAmount = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;

if (value !== "" && !isAmount(value)) return;
const temp = value.replace(/^0+(?=\d)|(\.\d*)$/g, "$1");
setFromAmount(temp);
Expand Down Expand Up @@ -62,33 +71,41 @@ const HomeSwap: React.FC<HomeSwapProps> = ({ swapTokenInfo, swapNow, onSubmitSwa

const handleAutoFillTokenA = useCallback(() => {
if (connected) {
const formatValue = parseFloat(swapTokenInfo.tokenABalance.replace(/,/g, "")).toString();
const formatValue = parseFloat(
swapTokenInfo.tokenABalance.replace(/,/g, ""),
).toString();
setFromAmount(formatValue);
}
}, [swapTokenInfo.tokenABalance, connected, setFromAmount]);

const handleAutoFillTokenB = useCallback(() => {
if (connected) {
const formatValue = parseFloat(swapTokenInfo.tokenBBalance.replace(/,/g, "")).toString();
const formatValue = parseFloat(
swapTokenInfo.tokenBBalance.replace(/,/g, ""),
).toString();
setToAmount(formatValue);
changeTokenBAmount(formatValue);
}
}, [swapTokenInfo.tokenBBalance, connected, setToAmount, changeTokenBAmount]);

const balanceADisplay = useMemo(() => {
if (connected && swapTokenInfo.tokenABalance !== "-") {
return BigNumber(swapTokenInfo.tokenABalance.replace(/,/g, "")).toFormat(2);
return BigNumber(swapTokenInfo.tokenABalance.replace(/,/g, "")).toFormat(
2,
);
}
return "-";
}, [swapTokenInfo.tokenABalance, connected]);

const balanceBDisplay = useMemo(() => {
if (connected && swapTokenInfo.tokenBBalance !== "-") {
return BigNumber(swapTokenInfo.tokenBBalance.replace(/,/g, "")).toFormat(2);
return BigNumber(swapTokenInfo.tokenBBalance.replace(/,/g, "")).toFormat(
2,
);
}
return "-";
}, [swapTokenInfo.tokenBBalance, connected]);

return breakpoint === "tablet" || breakpoint === "web" ? (
<div css={wrapper}>
<div className="header">
Expand All @@ -104,12 +121,21 @@ const HomeSwap: React.FC<HomeSwapProps> = ({ swapTokenInfo, swapNow, onSubmitSwa
placeholder="0"
/>
<div className="token">
<SelectPairButton token={swapTokenInfo.tokenA} hiddenModal isHiddenArrow />
<SelectPairButton
token={swapTokenInfo.tokenA}
hiddenModal
isHiddenArrow
/>
</div>
</div>
<div className="info">
<span className="price-text">{swapTokenInfo.tokenAUSDStr}</span>
<span className={`balance-text ${connected ? "balance-text-disabled" : ""}`} onClick={handleAutoFillTokenA}>
<span
className={`balance-text ${
connected ? "balance-text-disabled" : ""
}`}
onClick={handleAutoFillTokenA}
>
{`Balance: ${balanceADisplay}`}
</span>
</div>
Expand All @@ -123,12 +149,21 @@ const HomeSwap: React.FC<HomeSwapProps> = ({ swapTokenInfo, swapNow, onSubmitSwa
placeholder="0"
/>
<div className="token">
<SelectPairButton token={swapTokenInfo.tokenB} hiddenModal isHiddenArrow />
<SelectPairButton
token={swapTokenInfo.tokenB}
hiddenModal
isHiddenArrow
/>
</div>
</div>
<div className="info">
<span className="price-text">{swapTokenInfo.tokenBUSDStr}</span>
<span className={`balance-text ${connected ? "balance-text-disabled" : ""}`} onClick={handleAutoFillTokenB}>
<span
className={`balance-text ${
connected ? "balance-text-disabled" : ""
}`}
onClick={handleAutoFillTokenB}
>
Balance: {balanceBDisplay}
</span>
</div>
Expand Down
25 changes: 15 additions & 10 deletions packages/web/src/containers/home-swap-container/HomeSwapContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,12 @@ const HomeSwapContainer: React.FC = () => {
const [tokenAAmount, setTokenAAmount] = useState<string>("1000");
const [tokenB, setTokenB] = useState<TokenModel | null>(TOKEN_B);
const [tokenBAmount, setTokenBAmount] = useState<string>("0");
const [swapDirection, setSwapDirection] = useState<SwapDirectionType>("EXACT_IN");
const [swapDirection, setSwapDirection] =
useState<SwapDirectionType>("EXACT_IN");
const { slippage } = useSlippage();
const { connected } = useWallet();
const [, setSwapValue] = useAtom(SwapState.swap);
const [swapValue, setSwapValue] = useAtom(SwapState.swap);

const tokenABalance = useMemo(() => {
if (!connected) return "-";
if (tokenA && displayBalanceMap[tokenA.priceId]) {
Expand Down Expand Up @@ -86,7 +87,7 @@ const HomeSwapContainer: React.FC = () => {
.multipliedBy(tokenPrices[tokenB.priceId].usd)
.toNumber();
}, [tokenB, tokenBAmount, tokenPrices]);

const swapTokenInfo: SwapTokenInfo = useMemo(() => {
return {
tokenA,
Expand Down Expand Up @@ -117,39 +118,43 @@ const HomeSwapContainer: React.FC = () => {

const swapNow = useCallback(() => {
if (swapDirection === "EXACT_IN") {
router.push(`/swap?tokenA=${tokenA?.path}&tokenB=${tokenB?.path}&direction=EXACT_IN`);
router.push(
`/swap?tokenA=${tokenA?.path}&tokenB=${tokenB?.path}&direction=EXACT_IN`,
);
} else {
router.push(`/swap?tokenA=${tokenA?.path}&tokenB=${tokenB?.path}&direction=EXACT_IN`);
router.push(
`/swap?tokenA=${tokenA?.path}&tokenB=${tokenB?.path}&direction=EXACT_IN`,
);
}
}, [router, swapDirection, tokenA, tokenB]);

const onSubmitSwapValue = () => {
setTokenA(tokenB);
setTokenB(tokenA);
setSwapDirection(prev => prev === "EXACT_IN" ? "EXACT_OUT" : "EXACT_IN");
setSwapDirection(prev => (prev === "EXACT_IN" ? "EXACT_OUT" : "EXACT_IN"));
};

const changeTokenAAmount = useCallback((value: string) => {
setSwapValue((prev) => ({
setSwapValue(prev => ({
...prev,
tokenAAmount: value,
}));
setTokenAAmount(value);
}, []);

const changeTokenBAmount = useCallback((value: string) => {
setSwapValue((prev) => ({
setSwapValue(prev => ({
...prev,
tokenBAmount: value,
}));
setTokenBAmount(value);
}, []);


return (
<HomeSwap
swapTokenInfo={swapTokenInfo}
swapNow={swapNow}
swapValue={swapValue}
onSubmitSwapValue={onSubmitSwapValue}
changeTokenAAmount={changeTokenAAmount}
connected={connected}
Expand Down
11 changes: 8 additions & 3 deletions packages/web/src/containers/swap-container/SwapContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,14 @@ const SwapContainer: React.FC = () => {
return;
}
const query = router.query;
const currentTokenA = tokens.find(token => token.path === query.tokenA) || null;
const currentTokenB = tokens.find(token => token.path === query.tokenB) || null;
const direction: SwapDirectionType = query.direction === "EXACT_OUT" ? "EXACT_OUT" : "EXACT_IN";
const currentTokenA =
tokens.find(token => token.path === query.tokenA) || null;
const currentTokenB =
tokens.find(token => token.path === query.tokenB) || null;
const direction: SwapDirectionType =
query.direction === "EXACT_OUT" ? "EXACT_OUT" : "EXACT_IN";
if (!currentTokenA || !currentTokenB) return;

setSwapValue({
tokenA: currentTokenA,
tokenB: currentTokenB,
Expand Down
Loading