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

v3 with new design #43

Merged
merged 13 commits into from
Feb 3, 2025
Merged

v3 with new design #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
5c9a32f
add color utility functions and Tailwind CSS configuration
Ho3einWave Jan 16, 2025
cae5b1a
refactor: update Tailwind CSS configuration and utility functions for…
Ho3einWave Jan 18, 2025
c7795b1
refactor: improve error handling and styling in swap components
Ho3einWave Jan 19, 2025
8940eb5
feat: add new icons and update styling for Swap components
Ho3einWave Jan 21, 2025
7cfb4b6
feat: enhance dark mode support and update UI styling across components
Ho3einWave Jan 22, 2025
12d0a9e
refactor: update component styles for improved responsiveness and con…
Ho3einWave Jan 22, 2025
73000ad
refactor: streamline icon imports and update theme handling for impro…
Ho3einWave Jan 29, 2025
3e34795
refactor: update styling for Swap components to enhance visual consis…
Ho3einWave Jan 30, 2025
a23f09d
refactor: comment out Sentry initialization and update balance token …
Ho3einWave Jan 30, 2025
90bae65
refactor: update class names for consistency in CardDialog component
Ho3einWave Feb 3, 2025
e0fc813
2.0.35
Ho3einWave Feb 3, 2025
989f034
3.0.0
Ho3einWave Feb 3, 2025
bdd71b2
Merge pull request #42 from MyTonSwap/feature/new-version
Ho3einWave Feb 3, 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
24 changes: 12 additions & 12 deletions lib/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
import SettingPopover from "./SettingPopover";
import "./Header.scss";
import { useOptionsStore } from "../../store/options.store";
import Refresh from "../Common/Refresh";
import { useSwapStore } from "../../store/swap.store";
import { useTranslation } from "react-i18next";
import Setting from "../icons/Setting";
import SettingPopover from './SettingPopover';
import './Header.scss';
import { useOptionsStore } from '../../store/options.store';
import Refresh from '../Common/Refresh';
import { useSwapStore } from '../../store/swap.store';
import { useTranslation } from 'react-i18next';
import Menu from '../icons/Menu';
const Header = () => {
const { t } = useTranslation();
const { options } = useOptionsStore();
const { isFindingBestRoute, receive_token, refetchBestRoute } =
useSwapStore();

return (
<div className="header-container">
<div data-testid="swap-header-title">{t("swap")}</div>
<div className="header-setting">
<div className="mts-flex mts-justify-between mts-items-center mts-px-1 mts-text-primary-950 dark:mts-text-white mts-font-bold mts-text-lg md:mts-text-xl">
<div data-testid="swap-header-title">{t('swap')}</div>
<div className="mts-flex mts-items-center mts-gap-2">
{options.ui_preferences?.show_refresh && (
<div
className="loading-container"
className="mts-w-6 mts-h-6 mts-cursor-pointer"
onClick={refetchBestRoute}
>
<Refresh
Expand All @@ -28,7 +28,7 @@ const Header = () => {
)}
{options.ui_preferences?.show_settings && (
<SettingPopover>
<Setting className="setting-icon" />
<Menu className="mts-text-primary-950 dark:mts-text-white mts-text-2xl mts-rotate-90" />
</SettingPopover>
)}
</div>
Expand Down
52 changes: 29 additions & 23 deletions lib/components/Header/SettingPopover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import { FC, PropsWithChildren, useRef, useState } from "react";
import SlippageSetting from "./SlippageSetting";
import { useOnClickOutside } from "usehooks-ts";
import TokensSettings from "./TokensSettings";
import { AnimatePresence, motion } from "framer-motion";
import { FC, PropsWithChildren, useRef, useState } from 'react';
import SlippageSetting from './SlippageSetting';
import { useOnClickOutside } from 'usehooks-ts';
import TokensSettings from './TokensSettings';
import { AnimatePresence, motion } from 'framer-motion';

import "./SettingPopover.scss";
import Wallet from "./Wallet";
import { useOptionsStore } from "../../store/options.store";
import { useTranslation } from "react-i18next";
import { useMediaQuery } from "@uidotdev/usehooks";
import { modalAnimationDesktop, modalAnimationMobile } from "../../constants";
import { IoClose } from "react-icons/io5";
import './SettingPopover.scss';
import Wallet from './Wallet';
import { useOptionsStore } from '../../store/options.store';
import { useTranslation } from 'react-i18next';
import { useMediaQuery } from '@uidotdev/usehooks';
import { modalAnimationDesktop, modalAnimationMobile } from '../../constants';
import Close from '../icons/Close';

export type SettingPopoverProps = PropsWithChildren & {};

Expand All @@ -36,14 +36,18 @@ const SettingPopover: FC<SettingPopoverProps> = ({ children }) => {
const handleCloseSetting = () => {
setIsOpen(false);
};
const isDesktop = useMediaQuery("(min-width: 768px)");
const isDesktop = useMediaQuery('(min-width: 768px)');

const modalAnimation = isDesktop
? modalAnimationDesktop
: modalAnimationMobile;
return (
<div className="popover-container">
<button onClick={handleButtonClick} data-testid="setting-button">
<div className="mts-flex mts-relative mts-items-center mts-z-[2]">
<button
onClick={handleButtonClick}
data-testid="setting-button"
className="mts-flex mts-justify-center mts-items-center"
>
{children}
</button>
<AnimatePresence>
Expand All @@ -52,25 +56,27 @@ const SettingPopover: FC<SettingPopoverProps> = ({ children }) => {
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ ease: "easeOut", duration: 0.15 }}
className="modal-backdrop"
transition={{ ease: 'easeOut', duration: 0.15 }}
className="mts-fixed mts-top-0 mts-left-0 mts-bg-black/50 mts-w-full mts-h-full"
>
<motion.div
initial={modalAnimation.initial}
animate={modalAnimation.animate}
exit={modalAnimation.exit}
transition={{ ease: "easeOut", duration: 0.15 }}
transition={{ ease: 'easeOut', duration: 0.15 }}
ref={ref}
className="popover"
className="mts-flex mts-fixed mts-bottom-0 mts-left-0 mts-flex-col mts-gap-3 mts-shadow-sm mts-rounded-t-2xl mts-bg-dark-100 dark:mts-bg-dark-900 mts-p-4 mts-w-full mts-min-w-60 mts-h-fit mts-text-primary-950 rtl:mts-right-auto rtl:left-0 md:mts-min-w-80 md:mts-max-w-[32.5rem] md:mts-rounded-2xl"
data-testid="setting-popover"
>
<div className="popover-header">
<div>{t("setting")}</div>
<div className="mts-flex mts-items-center mts-justify-between dark:mts-text-white">
<div className="mts-text-lg">
{t('setting')}
</div>
<button
onClick={handleCloseSetting}
className="popover-header-close"
className="mts-text-primary-950 dark:mts-text-white"
>
<IoClose />
<Close />
</button>
</div>

Expand Down
121 changes: 63 additions & 58 deletions lib/components/Header/SlippageSetting.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { ChangeEvent, useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { useSwapStore } from '../../store/swap.store';
import './SlippageSetting.scss';
import { useTranslation } from 'react-i18next';
import { cn } from '../../utils/cn';

const SlippageSetting = () => {
const { t } = useTranslation();
Expand Down Expand Up @@ -50,72 +50,77 @@ const SlippageSetting = () => {

return (
<div
className="slippage-setting-container"
className="mts-flex mts-flex-col mts-gap-1 md:mts-gap-4 "
data-testid="slippage-setting"
>
<button className="button-container">
<div>{t('max_slippage')}</div>
<button className="mts-flex mts-justify-between mts-w-full mts-text-black ">
<div className="mts-text-lg mts-text-dark-600 dark:mts-text-dark-200">
{t('max_slippage')}
</div>
<div
className="slippage-indicator"
className="mts-flex mts-justify-center mts-items-center mts-text-sm mts-text-dark-600 dark:mts-text-dark-200"
data-testid="slippage-indicator"
>
{slippage === 'auto' ? t('auto') : `${slippage}%`}{' '}
</div>
</button>
<AnimatePresence>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="slippage-setting-dropdown"
<div className="mts-grid mts-grid-cols-4 mts-justify-around mts-gap-x-2 mts-w-full mts-text-sm md:mts-text-base ">
<div
onClick={handleOnAutoClick}
className={cn(
`mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white dark:mts-bg-dark-800 dark:mts-text-white mts-p-1 mts-h-12 md:mts-h-12 md:mts-m-1`,
slippage === 'auto'
? 'mts-border-primary-500'
: 'mts-border-dark-200 dark:mts-border-dark-700'
)}
data-testid="slippage-setting-auto"
>
{t('auto')}
</div>
<div
onClick={() => handleOnPercentClick(2)}
className={cn(
`mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white dark:mts-bg-dark-800 dark:mts-text-white mts-p-1 mts-h-12 md:mts-h-12`,
slippage === 2
? 'mts-border-primary-500'
: 'mts-border-dark-200 dark:mts-border-dark-700'
)}
data-testid="slippage-setting-2"
>
2%
</div>
<div
onClick={() => handleOnPercentClick(5)}
className={cn(
`mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white dark:mts-bg-dark-800 dark:mts-text-white mts-p-1 mts-h-12 md:mts-h-12`,
slippage === 5
? 'mts-border-primary-500'
: 'mts-border-dark-200 dark:mts-border-dark-700'
)}
data-testid="slippage-setting-5"
>
5%
</div>
<div
className={cn(
`mts-flex mts-justify-between mts-items-center mts-gap-1 mts-relative mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white dark:mts-bg-dark-800 dark:mts-text-white mts-h-12 md:mts-h-12`,
['auto', 2, 5].includes(slippage)
? 'mts-border-dark-200 dark:mts-border-dark-700'
: 'mts-border-primary-500'
)}
>
<div
onClick={handleOnAutoClick}
className={`dropdown-item ${
slippage === 'auto' ? 'active' : 'inactive-border'
}`}
data-testid="slippage-setting-auto"
>
{t('auto')}
</div>
<div
onClick={() => handleOnPercentClick(2)}
className={`dropdown-item ${
slippage === 2 ? 'active' : 'inactive-border'
}`}
data-testid="slippage-setting-2"
>
2%
</div>
<div
onClick={() => handleOnPercentClick(5)}
className={`dropdown-item ${
slippage === 5 ? 'active' : 'inactive-border'
}`}
data-testid="slippage-setting-5"
>
5%
</div>
<div
className={`controllers dropdown-item ${
['auto', 2, 5].includes(slippage)
? 'inactive-border'
: 'active'
}`}
>
<input
value={userInput}
onChange={handleSlippageChange}
data-testid="slippage-setting-input"
type="text"
dir="rtl"
className={`slippage-input `}
placeholder="1"
/>
<span className="slippage-input-percent">%</span>
</div>
</motion.div>
</AnimatePresence>
<input
value={userInput}
onChange={handleSlippageChange}
data-testid="slippage-setting-input"
type="text"
dir="rtl"
placeholder="1"
className="mts-w-full mts-bg-transparent mts-outline-none"
/>
<span className="mts-text-xs md:text-sm mts-pr-1">%</span>
</div>
</div>
</div>
);
};
Expand Down
31 changes: 17 additions & 14 deletions lib/components/Header/TokensSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,33 @@
import clsx from "clsx";
import { useSwapStore } from "../../store/swap.store";
import "./TokensSettings.scss";
import { useTranslation } from "react-i18next";
import { useSwapStore } from '../../store/swap.store';
import { useTranslation } from 'react-i18next';
import { cn } from '../../utils/cn';

const TokensSettings = () => {
const { t } = useTranslation();
const { communityTokens, setCommunityTokens } = useSwapStore();
return (
<div className="token-setting-container">
<div className="token-setting-text">
<span>{t("community_tokens")}</span>
<div className="mts-flex mts-justify-between mts-items-center mts-px-1 mts-text-xs md:mts-text-sm">
<div className="mts-text-dark-600 mts-text-lg dark:mts-text-dark-200">
<span>{t('community_tokens')}</span>
</div>
<div>
<button
className={clsx(
"checkbox",
communityTokens ? "checkbox-active" : ""
className={cn(
'mts-flex mts-relative mts-justify-start mts-items-center mts-transition-all mts-duration-300 mts-rounded-full mts-bg-dark-100 mts-p-1 mts-w-12 mts-h-6 mts-shadow-[0px_0px_0px_4px_rgb(var(--mts-primary-100))] dark:mts-bg-dark-900 dark:mts-shadow-[0px_0px_0px_4px_rgb(var(--mts-primary-800))]',

communityTokens
? 'mts-bg-primary-500 dark:mts-bg-primary-500'
: ''
)}
onClick={() => setCommunityTokens(!communityTokens)}
data-testid="community-token-setting"
>
<div
className={clsx(
"checkbox-inner",
className={cn(
'mts-absolute mts-transition-all mts-duration-300 mts-ease mts-rounded-full mts-w-4 mts-h-4',
communityTokens
? "checkbox-inner-active"
: "checkbox-inner-inactive"
? 'mts-left-7 mts-bg-white dark:mts-bg-dark-800'
: 'mts-left-1 mts-bg-primary-500'
)}
></div>
</button>
Expand Down
Loading