From eda7e55484d1fe650072c6e4bee28cc7dc1d865b Mon Sep 17 00:00:00 2001 From: HoseinBaseri Date: Thu, 26 Dec 2024 14:51:54 +0330 Subject: [PATCH] fix: bugfix and improvements --- lib/components/Swap/Swap.scss | 4 ++ lib/components/Swap/Swap.tsx | 17 +----- lib/components/SwapButton/SwapButton.tsx | 61 +++++++++----------- lib/store/swap.store.ts | 24 +++++++- package.json | 7 ++- pnpm-lock.yaml | 73 +++++++++++++++++++++--- 6 files changed, 128 insertions(+), 58 deletions(-) diff --git a/lib/components/Swap/Swap.scss b/lib/components/Swap/Swap.scss index cac7865..ec99bcb 100644 --- a/lib/components/Swap/Swap.scss +++ b/lib/components/Swap/Swap.scss @@ -105,3 +105,7 @@ .mytonswap-app.rtl { direction: rtl; } + +.raw-bottom-telegram { + padding-bottom: var(--telegram-padding-bottom, 8px) !important; +} diff --git a/lib/components/Swap/Swap.tsx b/lib/components/Swap/Swap.tsx index ca87e43..2e96e04 100644 --- a/lib/components/Swap/Swap.tsx +++ b/lib/components/Swap/Swap.tsx @@ -5,7 +5,7 @@ import SwapDetails from '../SwapDetails/SwapDetails'; import clsx from 'clsx'; import { TonConnectUI } from '@tonconnect/ui-react'; import { useOptionsStore, SwapOptions } from '../../store/options.store'; -import { ModalState, useSwapStore } from '../../store/swap.store'; +import { useSwapStore } from '../../store/swap.store'; import { useWalletStore } from '../../store/wallet.store'; import SwapButton from '../SwapButton/SwapButton'; import './Swap.scss'; @@ -92,7 +92,7 @@ export const SwapComponent: FC = ({ } const { setWallet, - refetch, + wallet: stateWallet, disconnect, } = useWalletStore(); @@ -115,8 +115,7 @@ export const SwapComponent: FC = ({ const { initializeApp, receive_token, - refetchBestRoute, - swapModal, + pay_token, } = useSwapStore(); @@ -124,15 +123,8 @@ export const SwapComponent: FC = ({ useEffect(() => { if (isInitMount) { - let refetchInterval: ReturnType; if (!pay_token) { initializeApp(); - refetchInterval = setInterval(() => { - if (swapModal === ModalState.NONE) { - refetch(); - refetchBestRoute(); - } - }, 10000); } if ( (window as NewWindow)?.Telegram?.WebApp?.initData?.length !== 0 @@ -158,9 +150,6 @@ export const SwapComponent: FC = ({ setOnSwap(onSwap); } isInitMount.current = false; - return () => { - clearInterval(refetchInterval); - }; } }, []); diff --git a/lib/components/SwapButton/SwapButton.tsx b/lib/components/SwapButton/SwapButton.tsx index 293e865..5e06ba5 100644 --- a/lib/components/SwapButton/SwapButton.tsx +++ b/lib/components/SwapButton/SwapButton.tsx @@ -1,34 +1,30 @@ -import { useWalletStore } from "../../store/wallet.store"; -import { ModalState, useSwapStore } from "../../store/swap.store"; -import { AnimatePresence, motion } from "framer-motion"; -import ErrorTonConnect from "./ErrorTonConnect"; -import ConfirmationModal from "./ConfirmationModal"; -import WaitingForWallet from "./WaitingForWallet"; -import Inprogress from "./Inprogress"; -import Done from "./Done"; -import "./SwapButton.scss"; -import { useMediaQuery, useOnClickOutside } from "usehooks-ts"; +import { useWalletStore } from '../../store/wallet.store'; +import { ModalState, useSwapStore } from '../../store/swap.store'; +import { AnimatePresence, motion } from 'framer-motion'; +import ErrorTonConnect from './ErrorTonConnect'; +import ConfirmationModal from './ConfirmationModal'; +import WaitingForWallet from './WaitingForWallet'; +import Inprogress from './Inprogress'; +import Done from './Done'; +import './SwapButton.scss'; +import { useMediaQuery } from 'usehooks-ts'; import { modalAnimationDesktop, modalAnimationMobile, WIDGET_VERSION, -} from "../../constants"; -import { useLongPress } from "@uidotdev/usehooks"; -import toast from "react-hot-toast"; -import { useOptionsStore } from "../../store/options.store"; -import { useTranslation } from "react-i18next"; -import { cn } from "../../utils/cn"; -import { useRef } from "react"; -import { CgSpinnerTwo } from "react-icons/cg"; +} from '../../constants'; +import { useLongPress } from '@uidotdev/usehooks'; +import toast from 'react-hot-toast'; +import { useOptionsStore } from '../../store/options.store'; +import { useTranslation } from 'react-i18next'; +import { cn } from '../../utils/cn'; +import { CgSpinnerTwo } from 'react-icons/cg'; const SwapButton = () => { const { t } = useTranslation(); const { tonConnectInstance } = useOptionsStore(); - const refModal = useRef(null); - useOnClickOutside(refModal, () => [setModalState(ModalState.NONE)]); - - const isDesktop = useMediaQuery("(min-width: 768px)"); + const isDesktop = useMediaQuery('(min-width: 768px)'); const { balance } = useWalletStore(); const { pay_amount, @@ -47,16 +43,16 @@ const SwapButton = () => { Loading ... ); - if (!tonConnectInstance?.wallet) return t("button_text.connect_wallet"); + if (!tonConnectInstance?.wallet) return t('button_text.connect_wallet'); if (!receive_token || !pay_token) - return t("button_text.choose_a_token"); - if (pay_amount === 0n) return t("button_text.enter_amount"); + return t('button_text.choose_a_token'); + if (pay_amount === 0n) return t('button_text.enter_amount'); if (bestRoute && !bestRoute.pool_data.status) - return t("button_text.price_impact"); + return t('button_text.price_impact'); if (pay_amount > Number(balance.get(pay_token!.address)?.balance ?? 0)) - return t("button_text.insufficient_balance"); + return t('button_text.insufficient_balance'); - return t("button_text.swap"); + return t('button_text.swap'); }; const isButtonDisabled = () => { @@ -105,8 +101,7 @@ const SwapButton = () => { > {